@atlaskit/code 14.1.4 → 14.3.1

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

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { Decorator } from './styled';
+export default function BidiWarning({
+  testId,
+  bidiCharacter,
+  skipChildren,
+  tooltipEnabled,
+  label = 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.'
+}) {
+  if (tooltipEnabled) {
+    return (
+      /*#__PURE__*/
+      // Following patches, this should be updated to use the render props signature which will provide aria attributes.
+      // Note: this should be tested, as initial testing did not see attributes work with current tooltip implementation.
+      React.createElement(Tooltip, {
+        content: label,
+        tag: CustomizedTagWithRef
+      }, /*#__PURE__*/React.createElement(Decorator, {
+        testId: testId,
+        bidiCharacter: bidiCharacter
+      }, skipChildren ? null : bidiCharacter))
+    );
+  }
+
+  return /*#__PURE__*/React.createElement(Decorator, {
+    testId: testId,
+    bidiCharacter: bidiCharacter
+  }, skipChildren ? null : bidiCharacter);
+}
+const CustomizedTagWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    ref: ref
+  }), children);
+});

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

@@ -0,0 +1,65 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Y75 } from '@atlaskit/theme/colors';
+const decoration = css({
+  // Required as otherwise the following bidi characters cause the span
+  // to not receive hover events.
+  //
+  // U+2066 LEFT-TO-RIGHT ISOLATE (when using pseudo element before)
+  // U+202E RIGHT-TO-LEFT OVERRIDE' (when using pseudo element after)
+  position: 'relative',
+  ':before': {
+    /* layout */
+    display: 'inline-flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '0 4px',
+    fontSize: '14px',
+    lineHeight: '18px',
+    background: Y75,
+
+    /**
+     * Ensures the decoration receives pointer events when it occurs with
+     * an ancestor that disables them.
+     */
+    pointerEvents: 'auto',
+
+    /* contents */
+    content: '"<"attr(data-bidi-character-code)">"',
+    // This color is Y800 which is not yet rolled out
+    // https://hello.atlassian.net/wiki/spaces/~tswan/pages/1366555782?focusedCommentId=1370387374#comment-1370387374
+    color: '#7F5F01',
+    fontStyle: 'normal'
+  },
+  ':hover:before': {
+    color: '#533F04'
+  }
+});
+export function Decorator({
+  bidiCharacter,
+  children,
+  testId
+}) {
+  const bidiCharacterCode = getBidiCharacterCode(bidiCharacter);
+  return jsx("span", {
+    "aria-label": bidiCharacterCode
+  }, jsx("span", {
+    css: decoration,
+    "data-testid": testId,
+    "data-bidi-character-code": bidiCharacterCode // This is set to true so that the content is not read out by
+    // screen readers as the content includes angle brackets for
+    // visual decoration purposes.
+    // We use a span with the aria-label set to the bidi character  code
+    // above this span for screen readers.
+    ,
+    "aria-hidden": "true"
+  }, children));
+}
+
+function getBidiCharacterCode(bidiCharacter) {
+  var _bidiCharacter$codePo;
+
+  const bidiCharacterCode = (_bidiCharacter$codePo = bidiCharacter.codePointAt(0)) === null || _bidiCharacter$codePo === void 0 ? void 0 : _bidiCharacter$codePo.toString(16);
+  return `U+${bidiCharacterCode}`;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/es2019/code-block.js

@@ -6,6 +6,7 @@ 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';
 const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
   showLineNumbers = true,
   language: providedLanguage = 'text',
@@ -13,7 +14,10 @@ const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
   highlightedStartText = 'Highlight start',
   highlightedEndText = 'Highlight end',
   testId,
-  text
+  text,
+  codeBidiWarnings = true,
+  codeBidiWarningLabel,
+  codeBidiWarningTooltipEnabled = true
 }) {
   const numLines = (text || '').split('\n').length;
   const globalTheme = useGlobalTheme();
@@ -31,6 +35,10 @@ const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
   const language = useMemo(() => normalizeLanguage(providedLanguage), [providedLanguage]); // 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,
@@ -42,7 +50,8 @@ const CodeBlock = /*#__PURE__*/memo(function CodeBlock({
     ,
     wrapLines: highlight.length > 0 || !!testId,
     lineProps: getLineProps,
-    useInlineStyles: false
+    useInlineStyles: false,
+    renderer: renderer
   }, text);
 });
 CodeBlock.displayName = 'CodeBlock';

package/dist/es2019/code.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { forwardRef, memo, useMemo } from 'react';
+import React, { forwardRef, memo, useMemo } from 'react';
 import { jsx } from '@emotion/core';
 import { useGlobalTheme } from '@atlaskit/theme/components';
+import CodeBidiWarning from './bidi-warning';
+import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
 import { getCodeStyles } from './internal/theme/styles';
 const Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code({
   testId,
@@ -11,12 +13,62 @@ const Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code({
 }, ref) {
   const theme = useGlobalTheme();
   const styles = useMemo(() => getCodeStyles(theme), [theme]);
+  const {
+    children,
+    codeBidiWarnings = true,
+    codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled = true,
+    ...otherProps
+  } = props;
+  const decoratedChildren = codeBidiWarnings ? jsx(RenderCodeChildrenWithBidiWarnings, {
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+  }, children) : children;
   return jsx("code", _extends({
     ref: ref,
     "data-testid": testId,
     css: styles
-  }, props));
+  }, otherProps), decoratedChildren);
 }));
+
+function RenderCodeChildrenWithBidiWarnings({
+  children,
+  codeBidiWarningLabel,
+  codeBidiWarningTooltipEnabled
+}) {
+  const replacedChildren = React.Children.map(children, childNode => {
+    if (typeof childNode === 'string') {
+      const decorated = codeBidiWarningDecorator(childNode, ({
+        bidiCharacter,
+        index
+      }) => jsx(CodeBidiWarning, {
+        bidiCharacter: bidiCharacter,
+        key: index,
+        label: codeBidiWarningLabel,
+        tooltipEnabled: codeBidiWarningTooltipEnabled
+      }));
+      return decorated;
+    }
+
+    if (isReactElement(childNode) && childNode.props.children) {
+      const newChildNode = /*#__PURE__*/React.cloneElement(childNode, {
+        children: jsx(RenderCodeChildrenWithBidiWarnings, {
+          codeBidiWarningLabel: codeBidiWarningLabel,
+          codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+        }, childNode.props.children)
+      });
+      return newChildNode;
+    }
+
+    return childNode;
+  });
+  return jsx(React.Fragment, null, replacedChildren);
+}
+
+function isReactElement(child) {
+  return !!child.type;
+}
+
 Code.displayName = 'Code';
 export { getCodeStyles };
 export default Code;

package/dist/es2019/react-syntax-highlighter-bidi-warning-renderer.js

@@ -0,0 +1,156 @@
+import _extends from "@babel/runtime/helpers/extends";
+// @ts-nocheck
+import React from 'react';
+import CodeBidiWarning from './bidi-warning';
+import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator'; // File mostly vendored from react-syntax-highlighter
+//
+// - https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/efc3f7b7537d1729193b7a472067bcbe6cbecaf1/src/highlight.js#L272-L281
+// - https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/efc3f7b7537d1729193b7a472067bcbe6cbecaf1/src/create-element.js
+//
+// Patching react syntax-highlighter with a decoration feature is likely preferable
+
+export function createBidiWarningRenderer(codeBidiWarningConfig) {
+  return function bidiWarningRenderer({
+    rows,
+    stylesheet,
+    useInlineStyles
+  }) {
+    return rows.map((node, i) => createElement({
+      node,
+      stylesheet,
+      useInlineStyles,
+      codeBidiWarningConfig,
+      key: `code-segement${i}`
+    }));
+  };
+} // Get all possible permutations of all power sets
+//
+// Super simple, non-algorithmic solution since the
+// number of class names will not be greater than 4
+
+function powerSetPermutations(arr) {
+  const arrLength = arr.length;
+
+  if (arrLength === 0 || arrLength === 1) {
+    return arr;
+  }
+
+  if (arrLength === 2) {
+    // prettier-ignore
+    return [arr[0], arr[1], `${arr[0]}.${arr[1]}`, `${arr[1]}.${arr[0]}`];
+  }
+
+  if (arrLength === 3) {
+    return [arr[0], arr[1], arr[2], `${arr[0]}.${arr[1]}`, `${arr[0]}.${arr[2]}`, `${arr[1]}.${arr[0]}`, `${arr[1]}.${arr[2]}`, `${arr[2]}.${arr[0]}`, `${arr[2]}.${arr[1]}`, `${arr[0]}.${arr[1]}.${arr[2]}`, `${arr[0]}.${arr[2]}.${arr[1]}`, `${arr[1]}.${arr[0]}.${arr[2]}`, `${arr[1]}.${arr[2]}.${arr[0]}`, `${arr[2]}.${arr[0]}.${arr[1]}`, `${arr[2]}.${arr[1]}.${arr[0]}`];
+  }
+
+  if (arrLength >= 4) {
+    // Currently does not support more than 4 extra
+    // class names (after `.token` has been removed)
+    return [arr[0], arr[1], arr[2], arr[3], `${arr[0]}.${arr[1]}`, `${arr[0]}.${arr[2]}`, `${arr[0]}.${arr[3]}`, `${arr[1]}.${arr[0]}`, `${arr[1]}.${arr[2]}`, `${arr[1]}.${arr[3]}`, `${arr[2]}.${arr[0]}`, `${arr[2]}.${arr[1]}`, `${arr[2]}.${arr[3]}`, `${arr[3]}.${arr[0]}`, `${arr[3]}.${arr[1]}`, `${arr[3]}.${arr[2]}`, `${arr[0]}.${arr[1]}.${arr[2]}`, `${arr[0]}.${arr[1]}.${arr[3]}`, `${arr[0]}.${arr[2]}.${arr[1]}`, `${arr[0]}.${arr[2]}.${arr[3]}`, `${arr[0]}.${arr[3]}.${arr[1]}`, `${arr[0]}.${arr[3]}.${arr[2]}`, `${arr[1]}.${arr[0]}.${arr[2]}`, `${arr[1]}.${arr[0]}.${arr[3]}`, `${arr[1]}.${arr[2]}.${arr[0]}`, `${arr[1]}.${arr[2]}.${arr[3]}`, `${arr[1]}.${arr[3]}.${arr[0]}`, `${arr[1]}.${arr[3]}.${arr[2]}`, `${arr[2]}.${arr[0]}.${arr[1]}`, `${arr[2]}.${arr[0]}.${arr[3]}`, `${arr[2]}.${arr[1]}.${arr[0]}`, `${arr[2]}.${arr[1]}.${arr[3]}`, `${arr[2]}.${arr[3]}.${arr[0]}`, `${arr[2]}.${arr[3]}.${arr[1]}`, `${arr[3]}.${arr[0]}.${arr[1]}`, `${arr[3]}.${arr[0]}.${arr[2]}`, `${arr[3]}.${arr[1]}.${arr[0]}`, `${arr[3]}.${arr[1]}.${arr[2]}`, `${arr[3]}.${arr[2]}.${arr[0]}`, `${arr[3]}.${arr[2]}.${arr[1]}`, `${arr[0]}.${arr[1]}.${arr[2]}.${arr[3]}`, `${arr[0]}.${arr[1]}.${arr[3]}.${arr[2]}`, `${arr[0]}.${arr[2]}.${arr[1]}.${arr[3]}`, `${arr[0]}.${arr[2]}.${arr[3]}.${arr[1]}`, `${arr[0]}.${arr[3]}.${arr[1]}.${arr[2]}`, `${arr[0]}.${arr[3]}.${arr[2]}.${arr[1]}`, `${arr[1]}.${arr[0]}.${arr[2]}.${arr[3]}`, `${arr[1]}.${arr[0]}.${arr[3]}.${arr[2]}`, `${arr[1]}.${arr[2]}.${arr[0]}.${arr[3]}`, `${arr[1]}.${arr[2]}.${arr[3]}.${arr[0]}`, `${arr[1]}.${arr[3]}.${arr[0]}.${arr[2]}`, `${arr[1]}.${arr[3]}.${arr[2]}.${arr[0]}`, `${arr[2]}.${arr[0]}.${arr[1]}.${arr[3]}`, `${arr[2]}.${arr[0]}.${arr[3]}.${arr[1]}`, `${arr[2]}.${arr[1]}.${arr[0]}.${arr[3]}`, `${arr[2]}.${arr[1]}.${arr[3]}.${arr[0]}`, `${arr[2]}.${arr[3]}.${arr[0]}.${arr[1]}`, `${arr[2]}.${arr[3]}.${arr[1]}.${arr[0]}`, `${arr[3]}.${arr[0]}.${arr[1]}.${arr[2]}`, `${arr[3]}.${arr[0]}.${arr[2]}.${arr[1]}`, `${arr[3]}.${arr[1]}.${arr[0]}.${arr[2]}`, `${arr[3]}.${arr[1]}.${arr[2]}.${arr[0]}`, `${arr[3]}.${arr[2]}.${arr[0]}.${arr[1]}`, `${arr[3]}.${arr[2]}.${arr[1]}.${arr[0]}`];
+  }
+}
+
+const classNameCombinations = {};
+
+function getClassNameCombinations(classNames) {
+  if (classNames.length === 0 || classNames.length === 1) {
+    return classNames;
+  }
+
+  const key = classNames.join('.');
+
+  if (!classNameCombinations[key]) {
+    classNameCombinations[key] = powerSetPermutations(classNames);
+  }
+
+  return classNameCombinations[key];
+}
+
+export function createStyleObject(classNames, elementStyle = {}, stylesheet) {
+  const nonTokenClassNames = classNames.filter(className => className !== 'token');
+  const classNamesCombinations = getClassNameCombinations(nonTokenClassNames);
+  return classNamesCombinations.reduce((styleObject, className) => {
+    return { ...styleObject,
+      ...stylesheet[className]
+    };
+  }, elementStyle);
+}
+export function createClassNameString(classNames) {
+  return classNames.join(' ');
+}
+export function createChildren(stylesheet, useInlineStyles, codeBidiWarningConfig) {
+  let childrenCount = 0;
+  return children => {
+    childrenCount += 1;
+    return children.map((child, i) => createElement({
+      node: child,
+      stylesheet,
+      useInlineStyles,
+      codeBidiWarningConfig,
+      key: `code-segment-${childrenCount}-${i}`
+    }));
+  };
+}
+
+function createElement({
+  node,
+  stylesheet,
+  style = {},
+  useInlineStyles,
+  codeBidiWarningConfig,
+  key
+}) {
+  const {
+    properties,
+    type,
+    tagName: TagName,
+    value
+  } = node;
+
+  if (type === 'text') {
+    // occasionally react-syntax-highlighter passes a numeric value when the
+    // type is text
+    const textValue = value + '';
+    const decorated = codeBidiWarningDecorator(textValue, ({
+      bidiCharacter,
+      index
+    }) => /*#__PURE__*/React.createElement(CodeBidiWarning, {
+      bidiCharacter: bidiCharacter,
+      key: index,
+      label: codeBidiWarningConfig.codeBidiWarningLabel,
+      tooltipEnabled: codeBidiWarningConfig.codeBidiWarningTooltipEnabled
+    }));
+    return decorated;
+  } else if (TagName) {
+    const childrenCreator = createChildren(stylesheet, useInlineStyles, codeBidiWarningConfig);
+    let props;
+
+    if (!useInlineStyles) {
+      props = { ...properties,
+        className: createClassNameString(properties.className)
+      };
+    } else {
+      const allStylesheetSelectors = Object.keys(stylesheet).reduce((classes, selector) => {
+        selector.split('.').forEach(className => {
+          if (!classes.includes(className)) {
+            classes.push(className);
+          }
+        });
+        return classes;
+      }, []); // For compatibility with older versions of react-syntax-highlighter
+
+      const startingClassName = properties.className && properties.className.includes('token') ? ['token'] : [];
+      const className = properties.className && startingClassName.concat(properties.className.filter(className => !allStylesheetSelectors.includes(className)));
+      props = { ...properties,
+        className: createClassNameString(className) || undefined,
+        style: createStyleObject(properties.className, Object.assign({}, properties.style, style), stylesheet)
+      };
+    }
+
+    const children = childrenCreator(node.children);
+    return /*#__PURE__*/React.createElement(TagName, _extends({
+      key: key
+    }, props), children);
+  }
+}

package/dist/es2019/version.json

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

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

@@ -0,0 +1,61 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+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;
+export default function codeBidiWarningDecorator(originalText, decorate) {
+  var matches = _toConsumableArray(originalText.matchAll(bidiCharacterRegex));
+
+  if (matches.length === 0) {
+    // No matches encountered, so we return the originalText value
+    return originalText;
+  }
+
+  var children = [];
+  var mappedTo = 0;
+
+  var _iterator = _createForOfIteratorHelper(matches),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var match = _step.value;
+
+      if (mappedTo !== match.index) {
+        // There were unmatched characters prior to this match which haven't been
+        // mapped to the children.
+        // Add them as plain text.
+        children.push(originalText.substring(mappedTo, match.index));
+      }
+
+      children.push(decorate({
+        bidiCharacter: match[0],
+        index: match.index
+      })); // While index is guaranteed to be present, it needs to be asserted due
+      // to a limitation of typescripts regex handling
+      //
+      // https://github.com/microsoft/TypeScript/issues/36788
+      // Decorate bidi character
+
+      mappedTo = match.index + match[0].length;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  if (mappedTo !== originalText.length) {
+    // There is text following the final match, which needs to be mapped
+    // to the children.
+    // Added as plain text.
+    children.push(originalText.substring(mappedTo, originalText.length));
+  } // return the mapped children with decorated bidi characters
+
+
+  return children;
+}

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

@@ -0,0 +1 @@
+export { default } from './ui';

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

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { Decorator } from './styled';
+export default function BidiWarning(_ref) {
+  var testId = _ref.testId,
+      bidiCharacter = _ref.bidiCharacter,
+      skipChildren = _ref.skipChildren,
+      tooltipEnabled = _ref.tooltipEnabled,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.' : _ref$label;
+
+  if (tooltipEnabled) {
+    return (
+      /*#__PURE__*/
+      // Following patches, this should be updated to use the render props signature which will provide aria attributes.
+      // Note: this should be tested, as initial testing did not see attributes work with current tooltip implementation.
+      React.createElement(Tooltip, {
+        content: label,
+        tag: CustomizedTagWithRef
+      }, /*#__PURE__*/React.createElement(Decorator, {
+        testId: testId,
+        bidiCharacter: bidiCharacter
+      }, skipChildren ? null : bidiCharacter))
+    );
+  }
+
+  return /*#__PURE__*/React.createElement(Decorator, {
+    testId: testId,
+    bidiCharacter: bidiCharacter
+  }, skipChildren ? null : bidiCharacter);
+}
+var CustomizedTagWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+      rest = _objectWithoutProperties(props, ["children"]);
+
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    ref: ref
+  }), children);
+});

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

@@ -0,0 +1,64 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Y75 } from '@atlaskit/theme/colors';
+var decoration = css({
+  // Required as otherwise the following bidi characters cause the span
+  // to not receive hover events.
+  //
+  // U+2066 LEFT-TO-RIGHT ISOLATE (when using pseudo element before)
+  // U+202E RIGHT-TO-LEFT OVERRIDE' (when using pseudo element after)
+  position: 'relative',
+  ':before': {
+    /* layout */
+    display: 'inline-flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '0 4px',
+    fontSize: '14px',
+    lineHeight: '18px',
+    background: Y75,
+
+    /**
+     * Ensures the decoration receives pointer events when it occurs with
+     * an ancestor that disables them.
+     */
+    pointerEvents: 'auto',
+
+    /* contents */
+    content: '"<"attr(data-bidi-character-code)">"',
+    // This color is Y800 which is not yet rolled out
+    // https://hello.atlassian.net/wiki/spaces/~tswan/pages/1366555782?focusedCommentId=1370387374#comment-1370387374
+    color: '#7F5F01',
+    fontStyle: 'normal'
+  },
+  ':hover:before': {
+    color: '#533F04'
+  }
+});
+export function Decorator(_ref) {
+  var bidiCharacter = _ref.bidiCharacter,
+      children = _ref.children,
+      testId = _ref.testId;
+  var bidiCharacterCode = getBidiCharacterCode(bidiCharacter);
+  return jsx("span", {
+    "aria-label": bidiCharacterCode
+  }, jsx("span", {
+    css: decoration,
+    "data-testid": testId,
+    "data-bidi-character-code": bidiCharacterCode // This is set to true so that the content is not read out by
+    // screen readers as the content includes angle brackets for
+    // visual decoration purposes.
+    // We use a span with the aria-label set to the bidi character  code
+    // above this span for screen readers.
+    ,
+    "aria-hidden": "true"
+  }, children));
+}
+
+function getBidiCharacterCode(bidiCharacter) {
+  var _bidiCharacter$codePo;
+
+  var bidiCharacterCode = (_bidiCharacter$codePo = bidiCharacter.codePointAt(0)) === null || _bidiCharacter$codePo === void 0 ? void 0 : _bidiCharacter$codePo.toString(16);
+  return "U+".concat(bidiCharacterCode);
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/code-block.js

@@ -6,6 +6,7 @@ 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';
 var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
   var _ref$showLineNumbers = _ref.showLineNumbers,
       showLineNumbers = _ref$showLineNumbers === void 0 ? true : _ref$showLineNumbers,
@@ -18,7 +19,12 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
       _ref$highlightedEndTe = _ref.highlightedEndText,
       highlightedEndText = _ref$highlightedEndTe === void 0 ? 'Highlight end' : _ref$highlightedEndTe,
       testId = _ref.testId,
-      text = _ref.text;
+      text = _ref.text,
+      _ref$codeBidiWarnings = _ref.codeBidiWarnings,
+      codeBidiWarnings = _ref$codeBidiWarnings === void 0 ? true : _ref$codeBidiWarnings,
+      codeBidiWarningLabel = _ref.codeBidiWarningLabel,
+      _ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
+      codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT;
   var numLines = (text || '').split('\n').length;
   var globalTheme = useGlobalTheme();
   var theme = useMemo(function () {
@@ -46,6 +52,10 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
   }, [providedLanguage]); // 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,
@@ -57,7 +67,8 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
     ,
     wrapLines: highlight.length > 0 || !!testId,
     lineProps: getLineProps,
-    useInlineStyles: false
+    useInlineStyles: false,
+    renderer: renderer
   }, text);
 });
 CodeBlock.displayName = 'CodeBlock';