@atlaskit/code 14.4.8 → 14.5.0

package/dist/es2019/syntax-highlighter/lib/process/create-line-element.js

@@ -0,0 +1,65 @@
+import getInlineLineNumber from './get-inline-line-number';
+export default function createLineElement({
+  children,
+  lineNumber,
+  showLineNumbers,
+  lineProps = {},
+  className = []
+}) {
+  const properties = typeof lineProps === 'function' ? lineProps(lineNumber) : lineProps;
+  properties.className = className;
+  let currentChildren = children;
+  if (lineNumber && showLineNumbers) {
+    // When syntax highlighting is NOT turned on, the entire LOC is just a single
+    // child. We can then happily create the line number and the LOC as siblings...
+    if (currentChildren.length === 1) {
+      currentChildren = [getInlineLineNumber(lineNumber), ...currentChildren];
+    } else {
+      // ... However, when syntax highlighting IS on, a span is created for each
+      // tokenised node in the AST (eg. <span>import</span><span>React</span>).
+      // When shouldWrapLongLines is true, the row becomes `display: flex` and
+      // forces all its children to be equal height. This can be a source of
+      // visual bugs where a LOC is broken up weirdly into segments.
+      //
+      //  +---------------------------------------+
+      //  | row                                   |
+      //  |  +----+ +-------+ +--------+ +------+ |
+      //  |  |line| |key    | |keywords| |key   | |
+      //  |  |no. | |word   | |        | |word  | |
+      //  |  |    | |       | |        | |      | |
+      //  |  +----+ +-------+ +--------+ +------+ |
+      //  +---------------------------------------+
+      //
+      // Nesting the children one layer deeper (i.e. creating an extra span)
+      // ensures that the line number and the ENTIRE line of code are aligned by
+      // the parent flexbox (the row).
+      //
+      //  +---------------------------------------------+
+      //  | row                                         |
+      //  | +----+  +--------------------------------+  |
+      //  | |line|  | extra span we are creating     |  |
+      //  | |no. |  |  +-------+ +--------+ +------+ |  |
+      //  | |    |  |  |key    | |keywords| |key   | |  |
+      //  | |    |  |  |word   | |        | |word  | |  |
+      //  | |    |  |  |       | |        | |      | |  |
+      //  | |    |  |  +-------+ +--------+ +------+ |  |
+      //  | +----+  +--------------------------------+  |
+      //  +---------------------------------------------+
+      //
+      currentChildren = [getInlineLineNumber(lineNumber), {
+        type: 'element',
+        tagName: 'span',
+        properties: {
+          className: []
+        },
+        children: currentChildren
+      }];
+    }
+  }
+  return {
+    type: 'element',
+    tagName: 'span',
+    properties,
+    children: currentChildren
+  };
+}

package/dist/es2019/syntax-highlighter/lib/process/create-line.js

@@ -0,0 +1,23 @@
+import createLineElement from './create-line-element';
+import getInlineLineNumber from './get-inline-line-number';
+function createLineGenerator(lineProps, shouldCreateParentElementForLines, showLineNumbers) {
+  return (children, lineNumber, className = []) => {
+    // Needed for more complex line creation
+    if (shouldCreateParentElementForLines || className.length > 0) {
+      return createLineElement({
+        children,
+        lineNumber,
+        showLineNumbers,
+        lineProps,
+        className
+      });
+    } else {
+      // Simple line creation without the bells and whistles
+      if (showLineNumbers && lineNumber) {
+        children.unshift(getInlineLineNumber(lineNumber));
+      }
+      return children;
+    }
+  };
+}
+export default createLineGenerator;

package/dist/es2019/syntax-highlighter/lib/process/flatten-code-tree.js

@@ -0,0 +1,18 @@
+import createLineElement from './create-line-element';
+export default function flattenCodeTree(tree, offset = 0, className = []) {
+  let newTree = [];
+  for (let i = 0; i < tree.length; i++) {
+    const node = tree[i];
+    if (node.type === 'text') {
+      newTree.push(createLineElement({
+        children: [node],
+        lineNumber: offset,
+        className
+      }));
+    } else if (node.children) {
+      const classNames = className.concat(node.properties.className || []);
+      flattenCodeTree(node.children, offset + 1, classNames).forEach(i => newTree.push(i));
+    }
+  }
+  return newTree;
+}

package/dist/es2019/syntax-highlighter/lib/process/get-code-tree.js

@@ -0,0 +1,16 @@
+export default function getCodeTree(language, code, astGenerator) {
+  if (language === 'text' || !astGenerator) {
+    return [{
+      type: 'text',
+      value: code
+    }];
+  }
+  try {
+    return astGenerator.highlight(code, language);
+  } catch (e) {
+    return [{
+      type: 'text',
+      value: code
+    }];
+  }
+}

package/dist/es2019/syntax-highlighter/lib/process/get-inline-line-number.js

@@ -0,0 +1,17 @@
+export default function getInlineLineNumber(lineNumber) {
+  return {
+    type: 'element',
+    tagName: 'span',
+    properties: {
+      key: `line-number--${lineNumber}`,
+      className: ['comment', 'linenumber', 'ds-line-number'],
+      // We're placing the lineNumber in a data-attr on an empty span (hence the
+      // empty children array below). This allows CodeBlock to use CSS to
+      // generate the content in a pseudo-element, which is a fix for a bug
+      // where line numbers were being copied (CSS content can't be copied)
+      // https://product-fabric.atlassian.net/browse/DSP-2729
+      'data-ds--line-number': lineNumber
+    },
+    children: []
+  };
+}

package/dist/es2019/syntax-highlighter/lib/process/index.js

@@ -0,0 +1,114 @@
+import createLineGenerator from './create-line';
+import createLineElement from './create-line-element';
+import flattenCodeTree from './flatten-code-tree';
+import getCodeTree from './get-code-tree';
+const newLineRegex = /\n/g;
+function getNewLines(str) {
+  return str.match(newLineRegex);
+}
+/**
+ * __Line Processor__
+ *
+ * A line processor, that uses refractor to turn code into a tree structure
+ * with highlighting metadata and collapses this tree into lines for a renderer.
+ */
+export default function processLines({
+  astGenerator,
+  code,
+  language,
+  shouldCreateParentElementForLines,
+  lineProps,
+  showLineNumbers
+}) {
+  const codeTree = getCodeTree(language, code, astGenerator);
+  const startingLineNumber = 1;
+  const createLine = createLineGenerator(lineProps, shouldCreateParentElementForLines, showLineNumbers);
+  const newTree = [];
+  let lastLineBreakIndex = -1;
+  let index = 0;
+
+  // Seems odd we flatten the tree immediately - what work could we do on it more performantly than on the lines?
+  const tree = flattenCodeTree(codeTree);
+  while (index < tree.length) {
+    const testNode = tree[index];
+    if (testNode.type === 'text') {
+      index++;
+      continue;
+    }
+    const node = testNode;
+    const firstChildNode = node.children[0];
+    if (firstChildNode.type === 'text') {
+      const {
+        value
+      } = firstChildNode;
+      const newLines = getNewLines(value);
+      if (newLines) {
+        const splitValue = value.split('\n');
+        splitValue.forEach((text, i) => {
+          const lineNumber = newTree.length + startingLineNumber;
+          const newChild = {
+            type: 'text',
+            value: `${text}\n`
+          };
+
+          // if it's the first line
+          if (i === 0) {
+            const children = tree.slice(lastLineBreakIndex + 1, index).concat(createLineElement({
+              children: [newChild],
+              className: node.properties.className,
+              lineNumber
+            }));
+            const line = createLine(children, lineNumber);
+            newTree.push(line);
+
+            // if it's the last line
+          } else if (i === splitValue.length - 1) {
+            const nextNode = tree[index + 1];
+            const stringChild = nextNode && nextNode.children && nextNode.children[0];
+            // Similar to newChild above, but no newline
+            const lastLineInPreviousSpan = {
+              type: 'text',
+              value: `${text}`
+            };
+            if (stringChild) {
+              const newElem = createLineElement({
+                children: [lastLineInPreviousSpan],
+                className: node.properties.className,
+                lineNumber
+              });
+              tree.splice(index + 1, 0, newElem);
+            } else {
+              const children = [lastLineInPreviousSpan];
+              const line = createLine(children, lineNumber, node.properties.className);
+              newTree.push(line);
+            }
+
+            // if it's neither the first nor the last line
+          } else {
+            const children = [newChild];
+            const line = createLine(children, lineNumber, node.properties.className);
+            newTree.push(line);
+          }
+        });
+        lastLineBreakIndex = index;
+      }
+    }
+    index++;
+  }
+  if (lastLineBreakIndex !== tree.length - 1) {
+    const children = tree.slice(lastLineBreakIndex + 1, tree.length);
+    if (children && children.length) {
+      const lineNumber = newTree.length + startingLineNumber;
+      const line = createLine(children, lineNumber);
+      newTree.push(line);
+    }
+  }
+  if (shouldCreateParentElementForLines) {
+    return newTree;
+  }
+
+  // If shouldCreateParentElementForLines was off, we still have a tree structure we need to flatten
+  // We have (RefractorNode | RefractorNode[])[] but need RefractorNode[]
+  // This seems like a code smell to review
+  return newTree.flat(1);
+}

package/dist/es2019/syntax-highlighter/lib/react-renderer/create-children.js

@@ -0,0 +1,12 @@
+import createElement from './create-element';
+export default function createChildren(codeBidiWarningConfig) {
+  let childrenCount = 0;
+  return children => {
+    childrenCount += 1;
+    return children.map((child, i) => createElement({
+      node: child,
+      codeBidiWarningConfig,
+      key: `code-segment-${childrenCount}-${i}`
+    }));
+  };
+}

package/dist/es2019/syntax-highlighter/lib/react-renderer/create-element.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import CodeBidiWarning from '../../../bidi-warning';
+import codeBidiWarningDecorator from '../../../bidi-warning/bidi-warning-decorator';
+import createChildren from './create-children';
+function createClassNameString(classNames) {
+  return classNames ? classNames.join(' ') : '';
+}
+
+// NOTE: This is a function call rather than a React component because, for
+// unknown reasons, it appears to be more performant. We tried and measured both
+// and this stacks up better than as a memoised React component. Something to look
+// into in the future.
+export default function createElement({
+  node,
+  codeBidiWarningConfig,
+  key
+}) {
+  if (node.type === 'text') {
+    const {
+      value
+    } = node;
+    // occasionally a numeric value is passed when the type is text
+    const textValue = `${value}`;
+    if (codeBidiWarningConfig.codeBidiWarnings) {
+      const decorated = codeBidiWarningDecorator(textValue, ({
+        bidiCharacter,
+        index
+      }) => /*#__PURE__*/React.createElement(CodeBidiWarning, {
+        bidiCharacter: bidiCharacter,
+        key: index,
+        label: codeBidiWarningConfig.codeBidiWarningLabel,
+        tooltipEnabled: codeBidiWarningConfig.codeBidiWarningTooltipEnabled
+      }));
+      return decorated;
+    }
+    return textValue;
+  } else {
+    const {
+      properties,
+      tagName
+    } = node;
+    const childrenCreator = createChildren(codeBidiWarningConfig);
+    const props = {
+      ...properties,
+      className: createClassNameString(properties.className)
+    };
+    const children = childrenCreator(node.children);
+    return /*#__PURE__*/React.createElement(tagName, {
+      key,
+      ...props
+    }, children);
+  }
+}

package/dist/es2019/syntax-highlighter/lib/react-renderer/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import createElement from './create-element';
+
+/**
+ * __React Renderer__
+ *
+ * A component that receives processed code lines and renders them into the code
+ * rows inside the wrapping span and nested code tag, applying passed props and
+ * code bidi warning config settings.
+ */
+export default function ReactRenderer({
+  containerProps,
+  codeTagProps,
+  rows,
+  codeBidiWarningConfig
+}) {
+  const renderedRows = rows.map((node, i) => createElement({
+    node,
+    codeBidiWarningConfig,
+    key: `code-segment${i}`
+  }));
+  return /*#__PURE__*/React.createElement("span", containerProps, /*#__PURE__*/React.createElement("code", codeTagProps, renderedRows));
+}

package/dist/es2019/syntax-highlighter/types.js

@@ -0,0 +1,9 @@
+import React from 'react';
+// This wrapper supports the async loading of refractor and language grammars. The internal Highlight is a memo() functional component as expected
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class SyntaxHighlighter extends React.PureComponent {}
+
+/**
+ * Function that receives current line number as argument and returns a
+ * line props object to be applied to each `span` wrapping code line.
+ */

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/code",
-	"version": "14.4.8",
+	"version": "14.5.0",
 	"sideEffects": false
 }

package/dist/esm/bidi-warning/bidi-warning-decorator.js

@@ -3,6 +3,14 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 export var bidiCharacterRegex = /[\u202A-\u202E\u2066-\u2069]/g;
+
+/**
+ * __Code Bidi Warning Decorator__
+ *
+ * Checks the code to see if it contains any bidi characters.
+ * In case if bidi characters found - returns children with decorated
+ * bidi characters. If no bidi characters found - original text returned.
+ */
 export default function codeBidiWarningDecorator(originalText, decorate) {
   var matches = _toConsumableArray(originalText.matchAll(bidiCharacterRegex));
   if (matches.length === 0) {

package/dist/esm/bidi-warning/ui/index.js

@@ -4,6 +4,14 @@ var _excluded = ["children"];
 import React from 'react';
 import Tooltip from '@atlaskit/tooltip';
 import { Decorator } from './styled';
+/**
+ * __Bidi Warning__
+ *
+ * A component used to render a bidi character warning.
+ * A bidi character can be used to perform a "bidi override attack".
+ *
+ * See https://hello.atlassian.net/wiki/spaces/PRODSEC/pages/1347434677/PSHELP-2943+Investigate+Trojan+Source+Attack+Vulnerability#1)-Providing-visual-cues-for-our-Customers-in-our-affected-products
+ */
 export default function BidiWarning(_ref) {
   var testId = _ref.testId,
     bidiCharacter = _ref.bidiCharacter,

package/dist/esm/code-block.js

@@ -1,12 +1,11 @@
 /** @jsx jsx */
 import { memo, useCallback, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { PrismAsync as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { useHighlightLines } from './internal/hooks/use-highlight';
 import { getCodeBlockStyles, getCodeBlockTheme } from './internal/theme/styles';
 import { normalizeLanguage } from './internal/utils/get-normalized-language';
-import { createBidiWarningRenderer } from './react-syntax-highlighter-bidi-warning-renderer';
+import SyntaxHighlighter from './syntax-highlighter';
 
 /**
  * __Code block__
@@ -34,7 +33,9 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
     codeBidiWarnings = _ref$codeBidiWarnings === void 0 ? true : _ref$codeBidiWarnings,
     codeBidiWarningLabel = _ref.codeBidiWarningLabel,
     _ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
-    codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT;
+    codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT,
+    _ref$shouldWrapLongLi = _ref.shouldWrapLongLines,
+    shouldWrapLongLines = _ref$shouldWrapLongLi === void 0 ? false : _ref$shouldWrapLongLi;
   var numLines = (text || '').split('\n').length;
   var globalTheme = useGlobalTheme();
   var theme = useMemo(function () {
@@ -44,8 +45,8 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
     return getCodeBlockStyles(theme);
   }, [theme]);
   var styles = useMemo(function () {
-    return css(getStyles(highlightedStartText, highlightedEndText, showLineNumbers));
-  }, [highlightedStartText, highlightedEndText, showLineNumbers, getStyles]);
+    return css(getStyles(highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines));
+  }, [highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines, getStyles]);
   var _useHighlightLines = useHighlightLines({
       highlight: highlight,
       testId: testId
@@ -61,25 +62,25 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
 
   // https://product-fabric.atlassian.net/browse/DST-2472
   var languageToUse = text ? language : 'text';
-  var renderer = codeBidiWarnings ? createBidiWarningRenderer({
-    codeBidiWarningLabel: codeBidiWarningLabel,
-    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
-  }) : undefined;
   return jsx(SyntaxHighlighter, {
-    "data-testid": testId,
     "data-code-lang": language,
     "data-ds--code--code-block": "",
-    css: styles,
+    testId: testId,
     language: languageToUse,
-    PreTag: "span",
-    showLineNumbers: showLineNumbers
-    // Wrap lines is needed to set styles on the line when highlighting.
+    css: styles,
+    showLineNumbers: showLineNumbers,
+    lineProps: getLineProps
+    // shouldCreateParentElementForLines is needed to pass down props to each line.
+    // This is necessary for both line highlighting and testId's, as each of
+    // these rely on a data attribute being passed down to lines.
     ,
-    wrapLines: highlight.length > 0 || !!testId,
-    lineProps: getLineProps,
-    useInlineStyles: false,
-    renderer: renderer
-  }, text);
+    shouldCreateParentElementForLines: highlight.length > 0 || !!testId,
+    shouldWrapLongLines: shouldWrapLongLines,
+    codeBidiWarnings: codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
+    text: text
+  });
 });
 CodeBlock.displayName = 'CodeBlock';
 export default CodeBlock;

package/dist/esm/internal/theme/styles.js

@@ -27,7 +27,13 @@ var lineNumberStyle = function lineNumberStyle(theme) {
     textAlign: 'right',
     userSelect: 'none',
     // this is to fix SSR spacing issue
-    display: 'block'
+    display: 'block',
+    // This is how we are preventing line numbers being copied to clipboard.
+    // (`user-select: none;` was not sufficent).
+    // https://product-fabric.atlassian.net/browse/DSP-2729
+    '&::after': {
+      content: "attr(data-ds--line-number)"
+    }
   };
 };
 
@@ -202,12 +208,12 @@ export var getBaseCodeStyles = function getBaseCodeStyles(theme) {
  * @param theme
  */
 export var getCodeBlockStyles = function getCodeBlockStyles(theme) {
-  return function (highlightedStartText, highlightedEndText, hasLineNumbers) {
+  return function (highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines) {
     return _objectSpread(_objectSpread(_objectSpread({
       // this is required to account for prismjs styles leaking into the codeblock
       'code[class*="language-"], pre[class*="language-"], code': {
         all: 'unset',
-        padding: hasLineNumbers ? "".concat(SPACING, "px 0") : SPACING
+        padding: showLineNumbers ? "".concat(SPACING, "px 0") : SPACING
       },
       display: 'flex',
       lineHeight: CODE_LINE_HEIGHT,
@@ -216,14 +222,14 @@ export var getCodeBlockStyles = function getCodeBlockStyles(theme) {
       direction: 'ltr'
     }, getBaseCodeStyles(theme)), syntaxKeywordColors(theme)), {}, {
       // this is to account for SSR spacing issue once loaded in browser
-      '& .linenumber, .react-syntax-highlighter-line-number': lineNumberStyle(theme),
+      '& .linenumber, .ds-sh-line-number': lineNumberStyle(theme),
       '& .linenumber': {
         display: 'inline-block !important',
         float: 'left'
       },
       // these styles are for line highlighting
       '& [data-ds--code--row]': {
-        display: 'block',
+        display: showLineNumbers ? 'flex' : 'block',
         paddingRight: "".concat(SPACING, "px !important"),
         marginRight: "-".concat(SPACING, "px")
       },
@@ -239,11 +245,12 @@ export var getCodeBlockStyles = function getCodeBlockStyles(theme) {
           whiteSpace: 'nowrap',
           width: '1px'
         },
+        // The formatting here is an accessibility convention
         '&::before': {
-          content: "\", ".concat(highlightedStartText, ", \"")
+          content: "\" [".concat(highlightedStartText, "] \"")
         },
         '&::after': {
-          content: "\", ".concat(highlightedEndText, ", \"")
+          content: "\" [".concat(highlightedEndText, "] \"")
         }
       },
       '& [data-ds--code--row--highlight] .linenumber': {
@@ -268,14 +275,18 @@ export var getCodeBlockStyles = function getCodeBlockStyles(theme) {
       },
       '& code:first-of-type': {
         paddingRight: "0px !important",
-        backgroundImage: hasLineNumbers ? "linear-gradient(to right, var(".concat(VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, "), var(").concat(VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, ")\n    calc(").concat(theme.lineNumberWidth, " + ").concat(LINE_NUMBER_GUTTER, "px), transparent calc(").concat(theme.lineNumberWidth, " + ").concat(LINE_NUMBER_GUTTER, "px), transparent)") : undefined
+        backgroundImage: showLineNumbers ? "linear-gradient(to right, var(".concat(VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, "), var(").concat(VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, ")\n    calc(").concat(theme.lineNumberWidth, " + ").concat(LINE_NUMBER_GUTTER, "px), transparent calc(").concat(theme.lineNumberWidth, " + ").concat(LINE_NUMBER_GUTTER, "px), transparent)") : undefined
       },
       // we need to use last-of-type because when Code is SSR'd
       // 2 <code> elements are created and we don't want this style
       // applied to the first one
       '& code:last-of-type': {
         paddingRight: "".concat(SPACING, "px !important"),
-        flex: '1 0 auto'
+        flexBasis: 'auto',
+        flexGrow: 1,
+        // Needed for the highlight line to extend full-width
+        flexShrink: shouldWrapLongLines ? 1 : 0,
+        wordBreak: 'break-word'
       },
       // Prevents empty code blocks from vertically collapsing
       'code > span:only-child:empty:before, code > span:only-child > span:only-child:empty:before': {

package/dist/esm/syntax-highlighter/async.js

@@ -0,0 +1,76 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import React from 'react';
+import highlight from './lib/highlight';
+// Uses the loader method of async bundling
+// Instantiates highligher as a singleton, loading refractor only once per page (refractor/prism are singleton modules)
+var generator = function generator(options) {
+  var loader = options.loader;
+
+  // eslint-disable-next-line @repo/internal/react/no-class-components
+  var AsyncHighlighter = /*#__PURE__*/function (_React$PureComponent) {
+    _inherits(AsyncHighlighter, _React$PureComponent);
+    var _super = _createSuper(AsyncHighlighter);
+    function AsyncHighlighter() {
+      _classCallCheck(this, AsyncHighlighter);
+      return _super.apply(this, arguments);
+    }
+    _createClass(AsyncHighlighter, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        var _this = this;
+        if (!AsyncHighlighter.astGeneratorPromise) {
+          AsyncHighlighter.loadAstGenerator();
+        }
+        if (!AsyncHighlighter.astGenerator && AsyncHighlighter.astGeneratorPromise) {
+          AsyncHighlighter.astGeneratorPromise.then(function () {
+            _this.forceUpdate();
+          });
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React.createElement(AsyncHighlighter.highlightInstance, _extends({}, this.props, {
+          astGenerator: AsyncHighlighter.astGenerator
+        }));
+      }
+    }], [{
+      key: "preload",
+      value:
+      // Useful in tests
+      function preload() {
+        return AsyncHighlighter.loadAstGenerator();
+      }
+    }, {
+      key: "loadAstGenerator",
+      value: function loadAstGenerator() {
+        AsyncHighlighter.astGeneratorPromise = loader().then(function (astGenerator) {
+          AsyncHighlighter.astGenerator = astGenerator;
+          return astGenerator;
+        });
+        return AsyncHighlighter.astGeneratorPromise;
+      }
+    }]);
+    return AsyncHighlighter;
+  }(React.PureComponent);
+  _defineProperty(AsyncHighlighter, "astGenerator", null);
+  _defineProperty(AsyncHighlighter, "highlightInstance", highlight);
+  return AsyncHighlighter;
+};
+export default generator({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_refractor-import" */
+    'refractor').then(function (module) {
+      // Webpack 3 returns module.exports as default as module, but webpack 4 returns module.exports as module.default
+      return module.default || module;
+    });
+  }
+});