1 | import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
---|
2 | import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
---|
3 | import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
---|
4 | var _excluded = ["language", "children", "style", "customStyle", "codeTagProps", "useInlineStyles", "showLineNumbers", "showInlineLineNumbers", "startingLineNumber", "lineNumberContainerStyle", "lineNumberStyle", "wrapLines", "wrapLongLines", "lineProps", "renderer", "PreTag", "CodeTag", "code", "astGenerator"];
|
---|
5 |
|
---|
6 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
---|
7 |
|
---|
8 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
---|
9 |
|
---|
10 | import React from 'react';
|
---|
11 | import createElement from './create-element';
|
---|
12 | import checkForListedLanguage from './checkForListedLanguage';
|
---|
13 | var newLineRegex = /\n/g;
|
---|
14 |
|
---|
15 | function getNewLines(str) {
|
---|
16 | return str.match(newLineRegex);
|
---|
17 | }
|
---|
18 |
|
---|
19 | function getAllLineNumbers(_ref) {
|
---|
20 | var lines = _ref.lines,
|
---|
21 | startingLineNumber = _ref.startingLineNumber,
|
---|
22 | style = _ref.style;
|
---|
23 | return lines.map(function (_, i) {
|
---|
24 | var number = i + startingLineNumber;
|
---|
25 | return /*#__PURE__*/React.createElement("span", {
|
---|
26 | key: "line-".concat(i),
|
---|
27 | className: "react-syntax-highlighter-line-number",
|
---|
28 | style: typeof style === 'function' ? style(number) : style
|
---|
29 | }, "".concat(number, "\n"));
|
---|
30 | });
|
---|
31 | }
|
---|
32 |
|
---|
33 | function AllLineNumbers(_ref2) {
|
---|
34 | var codeString = _ref2.codeString,
|
---|
35 | codeStyle = _ref2.codeStyle,
|
---|
36 | _ref2$containerStyle = _ref2.containerStyle,
|
---|
37 | containerStyle = _ref2$containerStyle === void 0 ? {
|
---|
38 | "float": 'left',
|
---|
39 | paddingRight: '10px'
|
---|
40 | } : _ref2$containerStyle,
|
---|
41 | _ref2$numberStyle = _ref2.numberStyle,
|
---|
42 | numberStyle = _ref2$numberStyle === void 0 ? {} : _ref2$numberStyle,
|
---|
43 | startingLineNumber = _ref2.startingLineNumber;
|
---|
44 | return /*#__PURE__*/React.createElement("code", {
|
---|
45 | style: Object.assign({}, codeStyle, containerStyle)
|
---|
46 | }, getAllLineNumbers({
|
---|
47 | lines: codeString.replace(/\n$/, '').split('\n'),
|
---|
48 | style: numberStyle,
|
---|
49 | startingLineNumber: startingLineNumber
|
---|
50 | }));
|
---|
51 | }
|
---|
52 |
|
---|
53 | function getEmWidthOfNumber(num) {
|
---|
54 | return "".concat(num.toString().length, ".25em");
|
---|
55 | }
|
---|
56 |
|
---|
57 | function getInlineLineNumber(lineNumber, inlineLineNumberStyle) {
|
---|
58 | return {
|
---|
59 | type: 'element',
|
---|
60 | tagName: 'span',
|
---|
61 | properties: {
|
---|
62 | key: "line-number--".concat(lineNumber),
|
---|
63 | className: ['comment', 'linenumber', 'react-syntax-highlighter-line-number'],
|
---|
64 | style: inlineLineNumberStyle
|
---|
65 | },
|
---|
66 | children: [{
|
---|
67 | type: 'text',
|
---|
68 | value: lineNumber
|
---|
69 | }]
|
---|
70 | };
|
---|
71 | }
|
---|
72 |
|
---|
73 | function assembleLineNumberStyles(lineNumberStyle, lineNumber, largestLineNumber) {
|
---|
74 | // minimally necessary styling for line numbers
|
---|
75 | var defaultLineNumberStyle = {
|
---|
76 | display: 'inline-block',
|
---|
77 | minWidth: getEmWidthOfNumber(largestLineNumber),
|
---|
78 | paddingRight: '1em',
|
---|
79 | textAlign: 'right',
|
---|
80 | userSelect: 'none'
|
---|
81 | }; // prep custom styling
|
---|
82 |
|
---|
83 | var customLineNumberStyle = typeof lineNumberStyle === 'function' ? lineNumberStyle(lineNumber) : lineNumberStyle; // combine
|
---|
84 |
|
---|
85 | var assembledStyle = _objectSpread(_objectSpread({}, defaultLineNumberStyle), customLineNumberStyle);
|
---|
86 |
|
---|
87 | return assembledStyle;
|
---|
88 | }
|
---|
89 |
|
---|
90 | function createLineElement(_ref3) {
|
---|
91 | var children = _ref3.children,
|
---|
92 | lineNumber = _ref3.lineNumber,
|
---|
93 | lineNumberStyle = _ref3.lineNumberStyle,
|
---|
94 | largestLineNumber = _ref3.largestLineNumber,
|
---|
95 | showInlineLineNumbers = _ref3.showInlineLineNumbers,
|
---|
96 | _ref3$lineProps = _ref3.lineProps,
|
---|
97 | lineProps = _ref3$lineProps === void 0 ? {} : _ref3$lineProps,
|
---|
98 | _ref3$className = _ref3.className,
|
---|
99 | className = _ref3$className === void 0 ? [] : _ref3$className,
|
---|
100 | showLineNumbers = _ref3.showLineNumbers,
|
---|
101 | wrapLongLines = _ref3.wrapLongLines;
|
---|
102 | var properties = typeof lineProps === 'function' ? lineProps(lineNumber) : lineProps;
|
---|
103 | properties['className'] = className;
|
---|
104 |
|
---|
105 | if (lineNumber && showInlineLineNumbers) {
|
---|
106 | var inlineLineNumberStyle = assembleLineNumberStyles(lineNumberStyle, lineNumber, largestLineNumber);
|
---|
107 | children.unshift(getInlineLineNumber(lineNumber, inlineLineNumberStyle));
|
---|
108 | }
|
---|
109 |
|
---|
110 | if (wrapLongLines & showLineNumbers) {
|
---|
111 | properties.style = _objectSpread(_objectSpread({}, properties.style), {}, {
|
---|
112 | display: 'flex'
|
---|
113 | });
|
---|
114 | }
|
---|
115 |
|
---|
116 | return {
|
---|
117 | type: 'element',
|
---|
118 | tagName: 'span',
|
---|
119 | properties: properties,
|
---|
120 | children: children
|
---|
121 | };
|
---|
122 | }
|
---|
123 |
|
---|
124 | function flattenCodeTree(tree) {
|
---|
125 | var className = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
---|
126 | var newTree = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
---|
127 |
|
---|
128 | for (var i = 0; i < tree.length; i++) {
|
---|
129 | var node = tree[i];
|
---|
130 |
|
---|
131 | if (node.type === 'text') {
|
---|
132 | newTree.push(createLineElement({
|
---|
133 | children: [node],
|
---|
134 | className: _toConsumableArray(new Set(className))
|
---|
135 | }));
|
---|
136 | } else if (node.children) {
|
---|
137 | var classNames = className.concat(node.properties.className);
|
---|
138 | flattenCodeTree(node.children, classNames).forEach(function (i) {
|
---|
139 | return newTree.push(i);
|
---|
140 | });
|
---|
141 | }
|
---|
142 | }
|
---|
143 |
|
---|
144 | return newTree;
|
---|
145 | }
|
---|
146 |
|
---|
147 | function processLines(codeTree, wrapLines, lineProps, showLineNumbers, showInlineLineNumbers, startingLineNumber, largestLineNumber, lineNumberStyle, wrapLongLines) {
|
---|
148 | var _ref4;
|
---|
149 |
|
---|
150 | var tree = flattenCodeTree(codeTree.value);
|
---|
151 | var newTree = [];
|
---|
152 | var lastLineBreakIndex = -1;
|
---|
153 | var index = 0;
|
---|
154 |
|
---|
155 | function createWrappedLine(children, lineNumber) {
|
---|
156 | var className = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
---|
157 | return createLineElement({
|
---|
158 | children: children,
|
---|
159 | lineNumber: lineNumber,
|
---|
160 | lineNumberStyle: lineNumberStyle,
|
---|
161 | largestLineNumber: largestLineNumber,
|
---|
162 | showInlineLineNumbers: showInlineLineNumbers,
|
---|
163 | lineProps: lineProps,
|
---|
164 | className: className,
|
---|
165 | showLineNumbers: showLineNumbers,
|
---|
166 | wrapLongLines: wrapLongLines
|
---|
167 | });
|
---|
168 | }
|
---|
169 |
|
---|
170 | function createUnwrappedLine(children, lineNumber) {
|
---|
171 | if (showLineNumbers && lineNumber && showInlineLineNumbers) {
|
---|
172 | var inlineLineNumberStyle = assembleLineNumberStyles(lineNumberStyle, lineNumber, largestLineNumber);
|
---|
173 | children.unshift(getInlineLineNumber(lineNumber, inlineLineNumberStyle));
|
---|
174 | }
|
---|
175 |
|
---|
176 | return children;
|
---|
177 | }
|
---|
178 |
|
---|
179 | function createLine(children, lineNumber) {
|
---|
180 | var className = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
---|
181 | return wrapLines || className.length > 0 ? createWrappedLine(children, lineNumber, className) : createUnwrappedLine(children, lineNumber);
|
---|
182 | }
|
---|
183 |
|
---|
184 | var _loop = function _loop() {
|
---|
185 | var node = tree[index];
|
---|
186 | var value = node.children[0].value;
|
---|
187 | var newLines = getNewLines(value);
|
---|
188 |
|
---|
189 | if (newLines) {
|
---|
190 | var splitValue = value.split('\n');
|
---|
191 | splitValue.forEach(function (text, i) {
|
---|
192 | var lineNumber = showLineNumbers && newTree.length + startingLineNumber;
|
---|
193 | var newChild = {
|
---|
194 | type: 'text',
|
---|
195 | value: "".concat(text, "\n")
|
---|
196 | }; // if it's the first line
|
---|
197 |
|
---|
198 | if (i === 0) {
|
---|
199 | var _children = tree.slice(lastLineBreakIndex + 1, index).concat(createLineElement({
|
---|
200 | children: [newChild],
|
---|
201 | className: node.properties.className
|
---|
202 | }));
|
---|
203 |
|
---|
204 | var _line = createLine(_children, lineNumber);
|
---|
205 |
|
---|
206 | newTree.push(_line); // if it's the last line
|
---|
207 | } else if (i === splitValue.length - 1) {
|
---|
208 | var stringChild = tree[index + 1] && tree[index + 1].children && tree[index + 1].children[0];
|
---|
209 | var lastLineInPreviousSpan = {
|
---|
210 | type: 'text',
|
---|
211 | value: "".concat(text)
|
---|
212 | };
|
---|
213 |
|
---|
214 | if (stringChild) {
|
---|
215 | var newElem = createLineElement({
|
---|
216 | children: [lastLineInPreviousSpan],
|
---|
217 | className: node.properties.className
|
---|
218 | });
|
---|
219 | tree.splice(index + 1, 0, newElem);
|
---|
220 | } else {
|
---|
221 | var _children2 = [lastLineInPreviousSpan];
|
---|
222 |
|
---|
223 | var _line2 = createLine(_children2, lineNumber, node.properties.className);
|
---|
224 |
|
---|
225 | newTree.push(_line2);
|
---|
226 | } // if it's neither the first nor the last line
|
---|
227 |
|
---|
228 | } else {
|
---|
229 | var _children3 = [newChild];
|
---|
230 |
|
---|
231 | var _line3 = createLine(_children3, lineNumber, node.properties.className);
|
---|
232 |
|
---|
233 | newTree.push(_line3);
|
---|
234 | }
|
---|
235 | });
|
---|
236 | lastLineBreakIndex = index;
|
---|
237 | }
|
---|
238 |
|
---|
239 | index++;
|
---|
240 | };
|
---|
241 |
|
---|
242 | while (index < tree.length) {
|
---|
243 | _loop();
|
---|
244 | }
|
---|
245 |
|
---|
246 | if (lastLineBreakIndex !== tree.length - 1) {
|
---|
247 | var children = tree.slice(lastLineBreakIndex + 1, tree.length);
|
---|
248 |
|
---|
249 | if (children && children.length) {
|
---|
250 | var lineNumber = showLineNumbers && newTree.length + startingLineNumber;
|
---|
251 | var line = createLine(children, lineNumber);
|
---|
252 | newTree.push(line);
|
---|
253 | }
|
---|
254 | }
|
---|
255 |
|
---|
256 | return wrapLines ? newTree : (_ref4 = []).concat.apply(_ref4, newTree);
|
---|
257 | }
|
---|
258 |
|
---|
259 | function defaultRenderer(_ref5) {
|
---|
260 | var rows = _ref5.rows,
|
---|
261 | stylesheet = _ref5.stylesheet,
|
---|
262 | useInlineStyles = _ref5.useInlineStyles;
|
---|
263 | return rows.map(function (node, i) {
|
---|
264 | return createElement({
|
---|
265 | node: node,
|
---|
266 | stylesheet: stylesheet,
|
---|
267 | useInlineStyles: useInlineStyles,
|
---|
268 | key: "code-segement".concat(i)
|
---|
269 | });
|
---|
270 | });
|
---|
271 | } // only highlight.js has the highlightAuto method
|
---|
272 |
|
---|
273 |
|
---|
274 | function isHighlightJs(astGenerator) {
|
---|
275 | return astGenerator && typeof astGenerator.highlightAuto !== 'undefined';
|
---|
276 | }
|
---|
277 |
|
---|
278 | function getCodeTree(_ref6) {
|
---|
279 | var astGenerator = _ref6.astGenerator,
|
---|
280 | language = _ref6.language,
|
---|
281 | code = _ref6.code,
|
---|
282 | defaultCodeValue = _ref6.defaultCodeValue;
|
---|
283 |
|
---|
284 | // figure out whether we're using lowlight/highlight or refractor/prism
|
---|
285 | // then attempt highlighting accordingly
|
---|
286 | // lowlight/highlight?
|
---|
287 | if (isHighlightJs(astGenerator)) {
|
---|
288 | var hasLanguage = checkForListedLanguage(astGenerator, language);
|
---|
289 |
|
---|
290 | if (language === 'text') {
|
---|
291 | return {
|
---|
292 | value: defaultCodeValue,
|
---|
293 | language: 'text'
|
---|
294 | };
|
---|
295 | } else if (hasLanguage) {
|
---|
296 | return astGenerator.highlight(language, code);
|
---|
297 | } else {
|
---|
298 | return astGenerator.highlightAuto(code);
|
---|
299 | }
|
---|
300 | } // must be refractor/prism, then
|
---|
301 |
|
---|
302 |
|
---|
303 | try {
|
---|
304 | return language && language !== 'text' ? {
|
---|
305 | value: astGenerator.highlight(code, language)
|
---|
306 | } : {
|
---|
307 | value: defaultCodeValue
|
---|
308 | };
|
---|
309 | } catch (e) {
|
---|
310 | return {
|
---|
311 | value: defaultCodeValue
|
---|
312 | };
|
---|
313 | }
|
---|
314 | }
|
---|
315 |
|
---|
316 | export default function (defaultAstGenerator, defaultStyle) {
|
---|
317 | return function SyntaxHighlighter(_ref7) {
|
---|
318 | var language = _ref7.language,
|
---|
319 | children = _ref7.children,
|
---|
320 | _ref7$style = _ref7.style,
|
---|
321 | style = _ref7$style === void 0 ? defaultStyle : _ref7$style,
|
---|
322 | _ref7$customStyle = _ref7.customStyle,
|
---|
323 | customStyle = _ref7$customStyle === void 0 ? {} : _ref7$customStyle,
|
---|
324 | _ref7$codeTagProps = _ref7.codeTagProps,
|
---|
325 | codeTagProps = _ref7$codeTagProps === void 0 ? {
|
---|
326 | className: language ? "language-".concat(language) : undefined,
|
---|
327 | style: _objectSpread(_objectSpread({}, style['code[class*="language-"]']), style["code[class*=\"language-".concat(language, "\"]")])
|
---|
328 | } : _ref7$codeTagProps,
|
---|
329 | _ref7$useInlineStyles = _ref7.useInlineStyles,
|
---|
330 | useInlineStyles = _ref7$useInlineStyles === void 0 ? true : _ref7$useInlineStyles,
|
---|
331 | _ref7$showLineNumbers = _ref7.showLineNumbers,
|
---|
332 | showLineNumbers = _ref7$showLineNumbers === void 0 ? false : _ref7$showLineNumbers,
|
---|
333 | _ref7$showInlineLineN = _ref7.showInlineLineNumbers,
|
---|
334 | showInlineLineNumbers = _ref7$showInlineLineN === void 0 ? true : _ref7$showInlineLineN,
|
---|
335 | _ref7$startingLineNum = _ref7.startingLineNumber,
|
---|
336 | startingLineNumber = _ref7$startingLineNum === void 0 ? 1 : _ref7$startingLineNum,
|
---|
337 | lineNumberContainerStyle = _ref7.lineNumberContainerStyle,
|
---|
338 | _ref7$lineNumberStyle = _ref7.lineNumberStyle,
|
---|
339 | lineNumberStyle = _ref7$lineNumberStyle === void 0 ? {} : _ref7$lineNumberStyle,
|
---|
340 | wrapLines = _ref7.wrapLines,
|
---|
341 | _ref7$wrapLongLines = _ref7.wrapLongLines,
|
---|
342 | wrapLongLines = _ref7$wrapLongLines === void 0 ? false : _ref7$wrapLongLines,
|
---|
343 | _ref7$lineProps = _ref7.lineProps,
|
---|
344 | lineProps = _ref7$lineProps === void 0 ? {} : _ref7$lineProps,
|
---|
345 | renderer = _ref7.renderer,
|
---|
346 | _ref7$PreTag = _ref7.PreTag,
|
---|
347 | PreTag = _ref7$PreTag === void 0 ? 'pre' : _ref7$PreTag,
|
---|
348 | _ref7$CodeTag = _ref7.CodeTag,
|
---|
349 | CodeTag = _ref7$CodeTag === void 0 ? 'code' : _ref7$CodeTag,
|
---|
350 | _ref7$code = _ref7.code,
|
---|
351 | code = _ref7$code === void 0 ? (Array.isArray(children) ? children[0] : children) || '' : _ref7$code,
|
---|
352 | astGenerator = _ref7.astGenerator,
|
---|
353 | rest = _objectWithoutProperties(_ref7, _excluded);
|
---|
354 |
|
---|
355 | astGenerator = astGenerator || defaultAstGenerator;
|
---|
356 | var allLineNumbers = showLineNumbers ? /*#__PURE__*/React.createElement(AllLineNumbers, {
|
---|
357 | containerStyle: lineNumberContainerStyle,
|
---|
358 | codeStyle: codeTagProps.style || {},
|
---|
359 | numberStyle: lineNumberStyle,
|
---|
360 | startingLineNumber: startingLineNumber,
|
---|
361 | codeString: code
|
---|
362 | }) : null;
|
---|
363 | var defaultPreStyle = style.hljs || style['pre[class*="language-"]'] || {
|
---|
364 | backgroundColor: '#fff'
|
---|
365 | };
|
---|
366 | var generatorClassName = isHighlightJs(astGenerator) ? 'hljs' : 'prismjs';
|
---|
367 | var preProps = useInlineStyles ? Object.assign({}, rest, {
|
---|
368 | style: Object.assign({}, defaultPreStyle, customStyle)
|
---|
369 | }) : Object.assign({}, rest, {
|
---|
370 | className: rest.className ? "".concat(generatorClassName, " ").concat(rest.className) : generatorClassName,
|
---|
371 | style: Object.assign({}, customStyle)
|
---|
372 | });
|
---|
373 |
|
---|
374 | if (wrapLongLines) {
|
---|
375 | codeTagProps.style = _objectSpread(_objectSpread({}, codeTagProps.style), {}, {
|
---|
376 | whiteSpace: 'pre-wrap'
|
---|
377 | });
|
---|
378 | } else {
|
---|
379 | codeTagProps.style = _objectSpread(_objectSpread({}, codeTagProps.style), {}, {
|
---|
380 | whiteSpace: 'pre'
|
---|
381 | });
|
---|
382 | }
|
---|
383 |
|
---|
384 | if (!astGenerator) {
|
---|
385 | return /*#__PURE__*/React.createElement(PreTag, preProps, allLineNumbers, /*#__PURE__*/React.createElement(CodeTag, codeTagProps, code));
|
---|
386 | }
|
---|
387 | /*
|
---|
388 | * Some custom renderers rely on individual row elements so we need to turn wrapLines on
|
---|
389 | * if renderer is provided and wrapLines is undefined.
|
---|
390 | */
|
---|
391 |
|
---|
392 |
|
---|
393 | if (wrapLines === undefined && renderer || wrapLongLines) wrapLines = true;
|
---|
394 | renderer = renderer || defaultRenderer;
|
---|
395 | var defaultCodeValue = [{
|
---|
396 | type: 'text',
|
---|
397 | value: code
|
---|
398 | }];
|
---|
399 | var codeTree = getCodeTree({
|
---|
400 | astGenerator: astGenerator,
|
---|
401 | language: language,
|
---|
402 | code: code,
|
---|
403 | defaultCodeValue: defaultCodeValue
|
---|
404 | });
|
---|
405 |
|
---|
406 | if (codeTree.language === null) {
|
---|
407 | codeTree.value = defaultCodeValue;
|
---|
408 | } // determine largest line number so that we can force minWidth on all linenumber elements
|
---|
409 |
|
---|
410 |
|
---|
411 | var largestLineNumber = codeTree.value.length + startingLineNumber;
|
---|
412 | var rows = processLines(codeTree, wrapLines, lineProps, showLineNumbers, showInlineLineNumbers, startingLineNumber, largestLineNumber, lineNumberStyle, wrapLongLines);
|
---|
413 | return /*#__PURE__*/React.createElement(PreTag, preProps, /*#__PURE__*/React.createElement(CodeTag, codeTagProps, !showInlineLineNumbers && allLineNumbers, renderer({
|
---|
414 | rows: rows,
|
---|
415 | stylesheet: style,
|
---|
416 | useInlineStyles: useInlineStyles
|
---|
417 | })));
|
---|
418 | };
|
---|
419 | } |
---|