@atlaskit/code 14.4.8 → 14.5.1

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

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = processLines;
+var _createLine = _interopRequireDefault(require("./create-line"));
+var _createLineElement = _interopRequireDefault(require("./create-line-element"));
+var _flattenCodeTree = _interopRequireDefault(require("./flatten-code-tree"));
+var _getCodeTree = _interopRequireDefault(require("./get-code-tree"));
+var 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.
+ */
+function processLines(_ref) {
+  var astGenerator = _ref.astGenerator,
+    code = _ref.code,
+    language = _ref.language,
+    shouldCreateParentElementForLines = _ref.shouldCreateParentElementForLines,
+    lineProps = _ref.lineProps,
+    showLineNumbers = _ref.showLineNumbers;
+  var codeTree = (0, _getCodeTree.default)(language, code, astGenerator);
+  var startingLineNumber = 1;
+  var createLine = (0, _createLine.default)(lineProps, shouldCreateParentElementForLines, showLineNumbers);
+  var newTree = [];
+  var lastLineBreakIndex = -1;
+  var index = 0;
+
+  // Seems odd we flatten the tree immediately - what work could we do on it more performantly than on the lines?
+  var tree = (0, _flattenCodeTree.default)(codeTree);
+  var _loop = function _loop() {
+    var testNode = tree[index];
+    if (testNode.type === 'text') {
+      index++;
+      return "continue";
+    }
+    var node = testNode;
+    var firstChildNode = node.children[0];
+    if (firstChildNode.type === 'text') {
+      var value = firstChildNode.value;
+      var newLines = getNewLines(value);
+      if (newLines) {
+        var splitValue = value.split('\n');
+        splitValue.forEach(function (text, i) {
+          var lineNumber = newTree.length + startingLineNumber;
+          var newChild = {
+            type: 'text',
+            value: "".concat(text, "\n")
+          };
+
+          // if it's the first line
+          if (i === 0) {
+            var _children = tree.slice(lastLineBreakIndex + 1, index).concat((0, _createLineElement.default)({
+              children: [newChild],
+              className: node.properties.className,
+              lineNumber: lineNumber
+            }));
+            var _line = createLine(_children, lineNumber);
+            newTree.push(_line);
+
+            // if it's the last line
+          } else if (i === splitValue.length - 1) {
+            var nextNode = tree[index + 1];
+            var stringChild = nextNode && nextNode.children && nextNode.children[0];
+            // Similar to newChild above, but no newline
+            var lastLineInPreviousSpan = {
+              type: 'text',
+              value: "".concat(text)
+            };
+            if (stringChild) {
+              var newElem = (0, _createLineElement.default)({
+                children: [lastLineInPreviousSpan],
+                className: node.properties.className,
+                lineNumber: lineNumber
+              });
+              tree.splice(index + 1, 0, newElem);
+            } else {
+              var _children2 = [lastLineInPreviousSpan];
+              var _line2 = createLine(_children2, lineNumber, node.properties.className);
+              newTree.push(_line2);
+            }
+
+            // if it's neither the first nor the last line
+          } else {
+            var _children3 = [newChild];
+            var _line3 = createLine(_children3, lineNumber, node.properties.className);
+            newTree.push(_line3);
+          }
+        });
+        lastLineBreakIndex = index;
+      }
+    }
+    index++;
+  };
+  while (index < tree.length) {
+    var _ret = _loop();
+    if (_ret === "continue") continue;
+  }
+  if (lastLineBreakIndex !== tree.length - 1) {
+    var children = tree.slice(lastLineBreakIndex + 1, tree.length);
+    if (children && children.length) {
+      var lineNumber = newTree.length + startingLineNumber;
+      var 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/cjs/syntax-highlighter/lib/react-renderer/create-children.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createChildren;
+var _createElement = _interopRequireDefault(require("./create-element"));
+function createChildren(codeBidiWarningConfig) {
+  var childrenCount = 0;
+  return function (children) {
+    childrenCount += 1;
+    return children.map(function (child, i) {
+      return (0, _createElement.default)({
+        node: child,
+        codeBidiWarningConfig: codeBidiWarningConfig,
+        key: "code-segment-".concat(childrenCount, "-").concat(i)
+      });
+    });
+  };
+}

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createElement;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _bidiWarning = _interopRequireDefault(require("../../../bidi-warning"));
+var _bidiWarningDecorator = _interopRequireDefault(require("../../../bidi-warning/bidi-warning-decorator"));
+var _createChildren = _interopRequireDefault(require("./create-children"));
+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; }
+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) { (0, _defineProperty2.default)(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; }
+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.
+function createElement(_ref) {
+  var node = _ref.node,
+    codeBidiWarningConfig = _ref.codeBidiWarningConfig,
+    key = _ref.key;
+  if (node.type === 'text') {
+    var value = node.value;
+    // occasionally a numeric value is passed when the type is text
+    var textValue = "".concat(value);
+    if (codeBidiWarningConfig.codeBidiWarnings) {
+      var decorated = (0, _bidiWarningDecorator.default)(textValue, function (_ref2) {
+        var bidiCharacter = _ref2.bidiCharacter,
+          index = _ref2.index;
+        return /*#__PURE__*/_react.default.createElement(_bidiWarning.default, {
+          bidiCharacter: bidiCharacter,
+          key: index,
+          label: codeBidiWarningConfig.codeBidiWarningLabel,
+          tooltipEnabled: codeBidiWarningConfig.codeBidiWarningTooltipEnabled
+        });
+      });
+      return decorated;
+    }
+    return textValue;
+  } else {
+    var properties = node.properties,
+      tagName = node.tagName;
+    var childrenCreator = (0, _createChildren.default)(codeBidiWarningConfig);
+    var props = _objectSpread(_objectSpread({}, properties), {}, {
+      className: createClassNameString(properties.className)
+    });
+    var children = childrenCreator(node.children);
+    return /*#__PURE__*/_react.default.createElement(tagName, _objectSpread({
+      key: key
+    }, props), children);
+  }
+}

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ReactRenderer;
+var _react = _interopRequireDefault(require("react"));
+var _createElement = _interopRequireDefault(require("./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.
+ */
+function ReactRenderer(_ref) {
+  var containerProps = _ref.containerProps,
+    codeTagProps = _ref.codeTagProps,
+    rows = _ref.rows,
+    codeBidiWarningConfig = _ref.codeBidiWarningConfig;
+  var renderedRows = rows.map(function (node, i) {
+    return (0, _createElement.default)({
+      node: node,
+      codeBidiWarningConfig: codeBidiWarningConfig,
+      key: "code-segment".concat(i)
+    });
+  });
+  return /*#__PURE__*/_react.default.createElement("span", containerProps, /*#__PURE__*/_react.default.createElement("code", codeTagProps, renderedRows));
+}

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyntaxHighlighter = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _react = _interopRequireDefault(require("react"));
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+// 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
+var SyntaxHighlighter = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(SyntaxHighlighter, _React$PureComponent);
+  var _super = _createSuper(SyntaxHighlighter);
+  function SyntaxHighlighter() {
+    (0, _classCallCheck2.default)(this, SyntaxHighlighter);
+    return _super.apply(this, arguments);
+  }
+  return (0, _createClass2.default)(SyntaxHighlighter);
+}(_react.default.PureComponent);
+/**
+ * Function that receives current line number as argument and returns a
+ * line props object to be applied to each `span` wrapping code line.
+ */
+exports.SyntaxHighlighter = SyntaxHighlighter;

package/dist/cjs/version.json

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

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

@@ -1,4 +1,12 @@
 export const 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) {
   const matches = [...originalText.matchAll(bidiCharacterRegex)];
   if (matches.length === 0) {

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

@@ -2,6 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 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({
   testId,
   bidiCharacter,

package/dist/es2019/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__
@@ -27,13 +26,14 @@ const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
   text,
   codeBidiWarnings = true,
   codeBidiWarningLabel,
-  codeBidiWarningTooltipEnabled = true
+  codeBidiWarningTooltipEnabled = true,
+  shouldWrapLongLines = false
 }) {
   const numLines = (text || '').split('\n').length;
   const globalTheme = useGlobalTheme();
   const theme = useMemo(() => getCodeBlockTheme(globalTheme, numLines), [globalTheme, numLines]);
   const getStyles = useMemo(() => getCodeBlockStyles(theme), [theme]);
-  const styles = useMemo(() => css(getStyles(highlightedStartText, highlightedEndText, showLineNumbers)), [highlightedStartText, highlightedEndText, showLineNumbers, getStyles]);
+  const styles = useMemo(() => css(getStyles(highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines)), [highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines, getStyles]);
   const {
     getHighlightStyles,
     highlightedLines
@@ -46,25 +46,25 @@ const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
 
   // https://product-fabric.atlassian.net/browse/DST-2472
   const languageToUse = text ? language : 'text';
-  const renderer = codeBidiWarnings ? createBidiWarningRenderer({
-    codeBidiWarningLabel,
-    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/es2019/internal/theme/styles.js

@@ -23,7 +23,13 @@ const 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)`
+  }
 });
 
 // order of these keys does matter as it will affect the css precedence
@@ -192,11 +198,11 @@ export const getBaseCodeStyles = theme => ({
  *
  * @param theme
  */
-export const getCodeBlockStyles = theme => (highlightedStartText, highlightedEndText, hasLineNumbers) => ({
+export const getCodeBlockStyles = theme => (highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines) => ({
   // this is required to account for prismjs styles leaking into the codeblock
   'code[class*="language-"], pre[class*="language-"], code': {
     all: 'unset',
-    padding: hasLineNumbers ? `${SPACING}px 0` : SPACING
+    padding: showLineNumbers ? `${SPACING}px 0` : SPACING
   },
   display: 'flex',
   lineHeight: CODE_LINE_HEIGHT,
@@ -206,14 +212,14 @@ export const getCodeBlockStyles = theme => (highlightedStartText, highlightedEnd
   ...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: `${SPACING}px !important`,
     marginRight: `-${SPACING}px`
   },
@@ -229,11 +235,12 @@ export const getCodeBlockStyles = theme => (highlightedStartText, highlightedEnd
       whiteSpace: 'nowrap',
       width: '1px'
     },
+    // The formatting here is an accessibility convention
     '&::before': {
-      content: `", ${highlightedStartText}, "`
+      content: `" [${highlightedStartText}] "`
     },
     '&::after': {
-      content: `", ${highlightedEndText}, "`
+      content: `" [${highlightedEndText}] "`
     }
   },
   '& [data-ds--code--row--highlight] .linenumber': {
@@ -258,7 +265,7 @@ export const getCodeBlockStyles = theme => (highlightedStartText, highlightedEnd
   },
   '& code:first-of-type': {
     paddingRight: `0px !important`,
-    backgroundImage: hasLineNumbers ? `linear-gradient(to right, var(${VAR_CODE_LINE_NUMBER_BG_COLOR},${theme.lineNumberBgColor}), var(${VAR_CODE_LINE_NUMBER_BG_COLOR},${theme.lineNumberBgColor})
+    backgroundImage: showLineNumbers ? `linear-gradient(to right, var(${VAR_CODE_LINE_NUMBER_BG_COLOR},${theme.lineNumberBgColor}), var(${VAR_CODE_LINE_NUMBER_BG_COLOR},${theme.lineNumberBgColor})
     calc(${theme.lineNumberWidth} + ${LINE_NUMBER_GUTTER}px), transparent calc(${theme.lineNumberWidth} + ${LINE_NUMBER_GUTTER}px), transparent)` : undefined
   },
   // we need to use last-of-type because when Code is SSR'd
@@ -266,7 +273,11 @@ export const getCodeBlockStyles = theme => (highlightedStartText, highlightedEnd
   // applied to the first one
   '& code:last-of-type': {
     paddingRight: `${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/es2019/syntax-highlighter/async.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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)
+const generator = options => {
+  const {
+    loader
+  } = options;
+
+  // eslint-disable-next-line @repo/internal/react/no-class-components
+  class AsyncHighlighter extends React.PureComponent {
+    // Useful in tests
+    static preload() {
+      return AsyncHighlighter.loadAstGenerator();
+    }
+    static loadAstGenerator() {
+      AsyncHighlighter.astGeneratorPromise = loader().then(astGenerator => {
+        AsyncHighlighter.astGenerator = astGenerator;
+        return astGenerator;
+      });
+      return AsyncHighlighter.astGeneratorPromise;
+    }
+    componentDidMount() {
+      if (!AsyncHighlighter.astGeneratorPromise) {
+        AsyncHighlighter.loadAstGenerator();
+      }
+      if (!AsyncHighlighter.astGenerator && AsyncHighlighter.astGeneratorPromise) {
+        AsyncHighlighter.astGeneratorPromise.then(() => {
+          this.forceUpdate();
+        });
+      }
+    }
+    render() {
+      return /*#__PURE__*/React.createElement(AsyncHighlighter.highlightInstance, _extends({}, this.props, {
+        astGenerator: AsyncHighlighter.astGenerator
+      }));
+    }
+  }
+  _defineProperty(AsyncHighlighter, "astGenerator", null);
+  _defineProperty(AsyncHighlighter, "highlightInstance", highlight);
+  return AsyncHighlighter;
+};
+export default generator({
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_refractor-import" */
+  'refractor').then(module => {
+    // Webpack 3 returns module.exports as default as module, but webpack 4 returns module.exports as module.default
+    return module.default || module;
+  })
+});

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

@@ -0,0 +1,38 @@
+/**
+ * Original library: https://github.com/react-syntax-highlighter/react-syntax-highlighter
+ * All modifications by Atlassian
+ */
+
+/**
+ * MIT License
+ *
+ * Copyright (c) 2019 Conor Hastings
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * __Syntax Highlighter__
+ *
+ * A syntax highlighter based on top of [refractor](https://github.com/wooorm/refractor).
+ * @atlaskit/code uses this under-the-hood, but it is not intended for public consumption.
+ * You should be using @atlaskit/code directly.
+ */
+import SyntaxHighlighter from './async';
+export default SyntaxHighlighter;

package/dist/es2019/syntax-highlighter/lib/highlight.js

@@ -0,0 +1,73 @@
+import { memo } from 'react';
+import processLines from './process';
+import ReactRenderer from './react-renderer';
+
+/**
+ * Takes in a code string and (in the default behaviour):
+ * - Uses refractor to turn it into a tree structure with highlighting metadata
+ * - Collapses this tree into lines for a renderer
+ * - Passes these lines to a React renderer
+ *
+ * In future, the final step could have a custom renderer.
+ */
+const Highlight = /*#__PURE__*/memo(function Highlight({
+  language = 'text',
+  testId,
+  text = '',
+  codeTagProps = {
+    className: `language-${language}`
+  },
+  showLineNumbers = false,
+  shouldCreateParentElementForLines = false,
+  shouldWrapLongLines = false,
+  lineProps = {},
+  codeBidiWarnings,
+  codeBidiWarningLabel,
+  codeBidiWarningTooltipEnabled,
+  astGenerator = null,
+  ...rest
+}) {
+  // TODO maybe we call this code or text everywhere; for now we match the API in
+  // @atlaskit/codeblock
+  const code = text;
+  const generatorClassName = 'prismjs';
+  const containerProps = {
+    ...rest,
+    'data-testid': testId,
+    className: rest.className ? `${generatorClassName} ${rest.className}` : generatorClassName
+  };
+  if (shouldWrapLongLines) {
+    codeTagProps.style = {
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word'
+    };
+  } else {
+    codeTagProps.style = {
+      whiteSpace: 'pre'
+    };
+  }
+  const codeBidiWarningConfig = {
+    codeBidiWarnings,
+    codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled
+  };
+
+  // Tree + logic into rows
+  const rows = processLines({
+    astGenerator,
+    code,
+    language,
+    shouldCreateParentElementForLines: shouldCreateParentElementForLines || !!shouldWrapLongLines,
+    lineProps,
+    showLineNumbers
+  });
+
+  // Rows + logic into a renderer
+  return ReactRenderer({
+    containerProps,
+    codeTagProps,
+    rows,
+    codeBidiWarningConfig
+  });
+});
+export default Highlight;