@atlaskit/code 14.4.8 → 14.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/code
 
+## 14.5.0
+
+### Minor Changes
+
+- [`f5ca132a05e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f5ca132a05e) - [ux] CodeBlock has had some significant under-the-hood changes in this version. While technically it is a minor update as all API changes are additive and backwards-compatible, this is a heads up that there are some small visual changes that may require visual regression snapshots to be updated.
+
+  - Adds a new `shouldWrapLongLines` prop that allows you to wrap long lines of code over multiple lines, instead of always forcing the container to scroll horizontally.
+
+  - Fixes a frustrating bug where copying code from `CodeBlock` would also copy line numbers — this no longer occurs!
+
+  - Replaces the dependency of `react-syntax-highlighter` with our own implementation that is more maintainable and performant. This also lead to a bump in an underlying dependency `prismjs` which added new syntax highlighting features for some languages. This may cause some blocks of code to look slightly different, potentially impacting VR tests — some changes are expected! Reach out to #help-design-system if you have any questions.
+
+  - Improves the presentation and security of `CodeBlock`'s with bidirectional characters to present the source code exactly how it was written. The bidirectional characters themselves are still highlighted in the same way as before with a warning and a tooltip. This may also impact VR tests, but is expected.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.4.8
 
 ### Patch Changes

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

@@ -11,6 +11,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; }
 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.
+ */
 exports.bidiCharacterRegex = bidiCharacterRegex;
 function codeBidiWarningDecorator(originalText, decorate) {
   var matches = (0, _toConsumableArray2.default)(originalText.matchAll(bidiCharacterRegex));

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

@@ -11,6 +11,14 @@ var _react = _interopRequireDefault(require("react"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _styled = require("./styled");
 var _excluded = ["children"];
+/**
+ * __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
+ */
 function BidiWarning(_ref) {
   var testId = _ref.testId,
     bidiCharacter = _ref.bidiCharacter,

package/dist/cjs/code-block.js

@@ -1,17 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _reactSyntaxHighlighter = require("react-syntax-highlighter");
 var _components = require("@atlaskit/theme/components");
 var _useHighlight = require("./internal/hooks/use-highlight");
 var _styles = require("./internal/theme/styles");
 var _getNormalizedLanguage = require("./internal/utils/get-normalized-language");
-var _reactSyntaxHighlighterBidiWarningRenderer = require("./react-syntax-highlighter-bidi-warning-renderer");
+var _syntaxHighlighter = _interopRequireDefault(require("./syntax-highlighter"));
 /** @jsx jsx */
 
 /**
@@ -40,7 +40,9 @@ var CodeBlock = /*#__PURE__*/(0, _react.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 = (0, _components.useGlobalTheme)();
   var theme = (0, _react.useMemo)(function () {
@@ -50,8 +52,8 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
     return (0, _styles.getCodeBlockStyles)(theme);
   }, [theme]);
   var styles = (0, _react.useMemo)(function () {
-    return (0, _react2.css)(getStyles(highlightedStartText, highlightedEndText, showLineNumbers));
-  }, [highlightedStartText, highlightedEndText, showLineNumbers, getStyles]);
+    return (0, _react2.css)(getStyles(highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines));
+  }, [highlightedStartText, highlightedEndText, showLineNumbers, shouldWrapLongLines, getStyles]);
   var _useHighlightLines = (0, _useHighlight.useHighlightLines)({
       highlight: highlight,
       testId: testId
@@ -67,25 +69,25 @@ var CodeBlock = /*#__PURE__*/(0, _react.memo)(function CodeBlock(_ref) {
 
   // https://product-fabric.atlassian.net/browse/DST-2472
   var languageToUse = text ? language : 'text';
-  var renderer = codeBidiWarnings ? (0, _reactSyntaxHighlighterBidiWarningRenderer.createBidiWarningRenderer)({
-    codeBidiWarningLabel: codeBidiWarningLabel,
-    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
-  }) : undefined;
-  return (0, _react2.jsx)(_reactSyntaxHighlighter.PrismAsync, {
-    "data-testid": testId,
+  return (0, _react2.jsx)(_syntaxHighlighter.default, {
     "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';
 var _default = CodeBlock;

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

@@ -35,7 +35,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)"
+    }
   };
 };
 
@@ -211,12 +217,12 @@ var getBaseCodeStyles = function getBaseCodeStyles(theme) {
  */
 exports.getBaseCodeStyles = getBaseCodeStyles;
 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(_constants2.SPACING, "px 0") : _constants2.SPACING
+        padding: showLineNumbers ? "".concat(_constants2.SPACING, "px 0") : _constants2.SPACING
       },
       display: 'flex',
       lineHeight: _constants2.CODE_LINE_HEIGHT,
@@ -225,14 +231,14 @@ 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(_constants2.SPACING, "px !important"),
         marginRight: "-".concat(_constants2.SPACING, "px")
       },
@@ -248,11 +254,12 @@ 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': {
@@ -277,14 +284,18 @@ var getCodeBlockStyles = function getCodeBlockStyles(theme) {
       },
       '& code:first-of-type': {
         paddingRight: "0px !important",
-        backgroundImage: hasLineNumbers ? "linear-gradient(to right, var(".concat(_constants2.VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, "), var(").concat(_constants2.VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, ")\n    calc(").concat(theme.lineNumberWidth, " + ").concat(_constants2.LINE_NUMBER_GUTTER, "px), transparent calc(").concat(theme.lineNumberWidth, " + ").concat(_constants2.LINE_NUMBER_GUTTER, "px), transparent)") : undefined
+        backgroundImage: showLineNumbers ? "linear-gradient(to right, var(".concat(_constants2.VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, "), var(").concat(_constants2.VAR_CODE_LINE_NUMBER_BG_COLOR, ",").concat(theme.lineNumberBgColor, ")\n    calc(").concat(theme.lineNumberWidth, " + ").concat(_constants2.LINE_NUMBER_GUTTER, "px), transparent calc(").concat(theme.lineNumberWidth, " + ").concat(_constants2.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(_constants2.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/cjs/syntax-highlighter/async.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _highlight = _interopRequireDefault(require("./lib/highlight"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; } }
+// 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) {
+    (0, _inherits2.default)(AsyncHighlighter, _React$PureComponent);
+    var _super = _createSuper(AsyncHighlighter);
+    function AsyncHighlighter() {
+      (0, _classCallCheck2.default)(this, AsyncHighlighter);
+      return _super.apply(this, arguments);
+    }
+    (0, _createClass2.default)(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.default.createElement(AsyncHighlighter.highlightInstance, (0, _extends2.default)({}, 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.default.PureComponent);
+  (0, _defineProperty2.default)(AsyncHighlighter, "astGenerator", null);
+  (0, _defineProperty2.default)(AsyncHighlighter, "highlightInstance", _highlight.default);
+  return AsyncHighlighter;
+};
+var _default = generator({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('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;
+    });
+  }
+});
+exports.default = _default;

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _async = _interopRequireDefault(require("./async"));
+/**
+ * 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.
+ */
+var _default = _async.default;
+exports.default = _default;

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

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _process = _interopRequireDefault(require("./process"));
+var _reactRenderer = _interopRequireDefault(require("./react-renderer"));
+var _excluded = ["language", "testId", "text", "codeTagProps", "showLineNumbers", "shouldCreateParentElementForLines", "shouldWrapLongLines", "lineProps", "codeBidiWarnings", "codeBidiWarningLabel", "codeBidiWarningTooltipEnabled", "astGenerator"];
+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; }
+/**
+ * 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.
+ */
+var Highlight = /*#__PURE__*/(0, _react.memo)(function Highlight(_ref) {
+  var _ref$language = _ref.language,
+    language = _ref$language === void 0 ? 'text' : _ref$language,
+    testId = _ref.testId,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? '' : _ref$text,
+    _ref$codeTagProps = _ref.codeTagProps,
+    codeTagProps = _ref$codeTagProps === void 0 ? {
+      className: "language-".concat(language)
+    } : _ref$codeTagProps,
+    _ref$showLineNumbers = _ref.showLineNumbers,
+    showLineNumbers = _ref$showLineNumbers === void 0 ? false : _ref$showLineNumbers,
+    _ref$shouldCreatePare = _ref.shouldCreateParentElementForLines,
+    shouldCreateParentElementForLines = _ref$shouldCreatePare === void 0 ? false : _ref$shouldCreatePare,
+    _ref$shouldWrapLongLi = _ref.shouldWrapLongLines,
+    shouldWrapLongLines = _ref$shouldWrapLongLi === void 0 ? false : _ref$shouldWrapLongLi,
+    _ref$lineProps = _ref.lineProps,
+    lineProps = _ref$lineProps === void 0 ? {} : _ref$lineProps,
+    codeBidiWarnings = _ref.codeBidiWarnings,
+    codeBidiWarningLabel = _ref.codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled = _ref.codeBidiWarningTooltipEnabled,
+    _ref$astGenerator = _ref.astGenerator,
+    astGenerator = _ref$astGenerator === void 0 ? null : _ref$astGenerator,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // TODO maybe we call this code or text everywhere; for now we match the API in
+  // @atlaskit/codeblock
+  var code = text;
+  var generatorClassName = 'prismjs';
+  var containerProps = _objectSpread(_objectSpread({}, rest), {}, {
+    'data-testid': testId,
+    className: rest.className ? "".concat(generatorClassName, " ").concat(rest.className) : generatorClassName
+  });
+  if (shouldWrapLongLines) {
+    codeTagProps.style = {
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word'
+    };
+  } else {
+    codeTagProps.style = {
+      whiteSpace: 'pre'
+    };
+  }
+  var codeBidiWarningConfig = {
+    codeBidiWarnings: codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+  };
+
+  // Tree + logic into rows
+  var rows = (0, _process.default)({
+    astGenerator: astGenerator,
+    code: code,
+    language: language,
+    shouldCreateParentElementForLines: shouldCreateParentElementForLines || !!shouldWrapLongLines,
+    lineProps: lineProps,
+    showLineNumbers: showLineNumbers
+  });
+
+  // Rows + logic into a renderer
+  return (0, _reactRenderer.default)({
+    containerProps: containerProps,
+    codeTagProps: codeTagProps,
+    rows: rows,
+    codeBidiWarningConfig: codeBidiWarningConfig
+  });
+});
+var _default = Highlight;
+exports.default = _default;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createLineElement;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _getInlineLineNumber = _interopRequireDefault(require("./get-inline-line-number"));
+function createLineElement(_ref) {
+  var children = _ref.children,
+    lineNumber = _ref.lineNumber,
+    showLineNumbers = _ref.showLineNumbers,
+    _ref$lineProps = _ref.lineProps,
+    lineProps = _ref$lineProps === void 0 ? {} : _ref$lineProps,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? [] : _ref$className;
+  var properties = typeof lineProps === 'function' ? lineProps(lineNumber) : lineProps;
+  properties.className = className;
+  var 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 = [(0, _getInlineLineNumber.default)(lineNumber)].concat((0, _toConsumableArray2.default)(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 = [(0, _getInlineLineNumber.default)(lineNumber), {
+        type: 'element',
+        tagName: 'span',
+        properties: {
+          className: []
+        },
+        children: currentChildren
+      }];
+    }
+  }
+  return {
+    type: 'element',
+    tagName: 'span',
+    properties: properties,
+    children: currentChildren
+  };
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createLineElement = _interopRequireDefault(require("./create-line-element"));
+var _getInlineLineNumber = _interopRequireDefault(require("./get-inline-line-number"));
+function createLineGenerator(lineProps, shouldCreateParentElementForLines, showLineNumbers) {
+  return function (children, lineNumber) {
+    var className = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    // Needed for more complex line creation
+    if (shouldCreateParentElementForLines || className.length > 0) {
+      return (0, _createLineElement.default)({
+        children: children,
+        lineNumber: lineNumber,
+        showLineNumbers: showLineNumbers,
+        lineProps: lineProps,
+        className: className
+      });
+    } else {
+      // Simple line creation without the bells and whistles
+      if (showLineNumbers && lineNumber) {
+        children.unshift((0, _getInlineLineNumber.default)(lineNumber));
+      }
+      return children;
+    }
+  };
+}
+var _default = createLineGenerator;
+exports.default = _default;

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = flattenCodeTree;
+var _createLineElement = _interopRequireDefault(require("./create-line-element"));
+function flattenCodeTree(tree) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var className = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var newTree = [];
+  for (var i = 0; i < tree.length; i++) {
+    var node = tree[i];
+    if (node.type === 'text') {
+      newTree.push((0, _createLineElement.default)({
+        children: [node],
+        lineNumber: offset,
+        className: className
+      }));
+    } else if (node.children) {
+      var classNames = className.concat(node.properties.className || []);
+      flattenCodeTree(node.children, offset + 1, classNames).forEach(function (i) {
+        return newTree.push(i);
+      });
+    }
+  }
+  return newTree;
+}

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getCodeTree;
+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/cjs/syntax-highlighter/lib/process/get-inline-line-number.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getInlineLineNumber;
+function getInlineLineNumber(lineNumber) {
+  return {
+    type: 'element',
+    tagName: 'span',
+    properties: {
+      key: "line-number--".concat(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: []
+  };
+}