@atlaskit/renderer 81.1.1 → 83.0.0

package/dist/es2019/react/nodes/panel.js

@@ -13,21 +13,20 @@ import EmojiItem from './emoji'; // AFP-2532 TODO: Fix automatic suppressions be
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { themed } from '@atlaskit/theme';
+import { getPanelBackgroundDarkModeColors } from '@atlaskit/editor-common';
 const PanelStyled = styled.div`
   ${props => {
   if (props['data-panel-type'] !== PanelType.CUSTOM || !props.backgroundColor) {
     return '';
-  }
+  } // Similar to mainDynamicStyles()
 
-  const border = themed({
-    light: 'none',
-    dark: `1px solid rgba(255, 255, 255, 0.4)`
-  })(props); // Similar to mainDynamicStyles()
 
   return `
       &[data-panel-type=${PanelType.CUSTOM}] {
         background-color: ${props.backgroundColor};
-        border: ${border};
+        ${themed({
+    dark: getPanelBackgroundDarkModeColors
+  })};
       }
     `;
 }}
@@ -77,7 +76,7 @@ const Panel = props => {
     const icon = getIcon();
 
     if (icon) {
-      return /*#__PURE__*/React.createElement("span", {
+      return /*#__PURE__*/React.createElement("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }

package/dist/es2019/react/nodes/text-wrapper.js

@@ -1,22 +1,23 @@
 import React from 'react';
 import { TextWithAnnotationDraft } from '../../ui/annotations';
-const TextWrapper = /*#__PURE__*/React.memo(props => {
+
+const TextWrapper = props => {
   const {
     startPos,
     endPos
   } = props;
   const {
-    text
+    children
   } = props;
 
-  if (!text) {
+  if (!children) {
     return null;
   }
 
   return /*#__PURE__*/React.createElement(TextWithAnnotationDraft, {
-    text: text,
     startPos: startPos,
     endPos: endPos
-  });
-});
+  }, children);
+};
+
 export default TextWrapper;

package/dist/es2019/ui/MediaCard.js

@@ -174,7 +174,8 @@ export class MediaCardInternal extends Component {
       imageStatus,
       disableOverlay,
       alt,
-      featureFlags
+      featureFlags,
+      ssr
     } = this.props;
 
     if (imageStatus === 'loading' || !url) {
@@ -200,7 +201,8 @@ export class MediaCardInternal extends Component {
       mediaViewerDataSource: {
         list: Array.from(mediaIdentifierMap.values())
       },
-      featureFlags: featureFlags
+      featureFlags: featureFlags,
+      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
     });
   }
   /**
@@ -214,7 +216,7 @@ export class MediaCardInternal extends Component {
   render() {
     const {
       contextIdentifierProvider,
-      mediaClientConfig,
+      mediaClientConfig: mediaClientConfigInState,
       fileState
     } = this.state;
     const {
@@ -231,7 +233,8 @@ export class MediaCardInternal extends Component {
       originalDimensions,
       shouldOpenMediaViewer: forceOpenMediaViewer,
       featureFlags,
-      shouldEnableDownloadButton
+      shouldEnableDownloadButton,
+      ssr
     } = this.props;
     const isMobile = rendererAppearance === 'mobile';
     const shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
@@ -247,6 +250,8 @@ export class MediaCardInternal extends Component {
       return null;
     }
 
+    const mediaClientConfig = !!ssr ? ssr.config : mediaClientConfigInState;
+
     if (!mediaClientConfig || !id) {
       return this.renderLoadingCard();
     }
@@ -288,7 +293,8 @@ export class MediaCardInternal extends Component {
         list: Array.from(mediaIdentifierMap.values())
       },
       featureFlags: featureFlags,
-      shouldEnableDownloadButton: shouldEnableDownloadButton
+      shouldEnableDownloadButton: shouldEnableDownloadButton,
+      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
     }));
   }
 

package/dist/es2019/ui/Renderer/index.js

@@ -147,7 +147,7 @@ export class Renderer extends PureComponent {
     const nextMedia = nextProps.media || {};
     const media = this.props.media || {};
 
-    if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
+    if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.allowCustomPanels !== this.props.allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
       this.serializer = new ReactSerializer(this.deriveSerializerProps(nextProps));
     }
   }
@@ -183,7 +183,7 @@ export class Renderer extends PureComponent {
       surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
       media: props.media,
       allowCopyToClipboard: props.allowCopyToClipboard,
-      allowCustomPanels: props.UNSAFE_allowCustomPanels,
+      allowCustomPanels: props.allowCustomPanels,
       allowAnnotations: props.allowAnnotations,
       allowSelectAllTrap: props.allowSelectAllTrap,
       allowPlaceholderText: props.allowPlaceholderText
@@ -206,7 +206,7 @@ export class Renderer extends PureComponent {
       allowPlaceholderText,
       allowColumnSorting,
       allowCopyToClipboard,
-      UNSAFE_allowCustomPanels
+      allowCustomPanels
     } = this.props;
     const allowNestedHeaderLinks = isNestedHeaderLinksEnabled(allowHeadingAnchorLinks);
     /**
@@ -280,7 +280,7 @@ export class Renderer extends PureComponent {
         allowNestedHeaderLinks: allowNestedHeaderLinks,
         allowColumnSorting: allowColumnSorting,
         allowCopyToClipboard: allowCopyToClipboard,
-        allowCustomPanels: UNSAFE_allowCustomPanels,
+        allowCustomPanels: allowCustomPanels,
         allowPlaceholderText: allowPlaceholderText,
         innerRef: this.editorRef,
         onClick: handleWrapperOnClick,

package/dist/es2019/ui/Renderer/style.js

@@ -7,7 +7,6 @@ import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, head
 import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
-import { h100, h300, h400, h500, h600, h700 } from '@atlaskit/theme/typography';
 export const FullPagePadding = 32;
 
 const getLineHeight = fontCode => headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
@@ -38,10 +37,12 @@ const headingAnchorStyle = headingTag => css`
      * The copy link button doesn't reserve space in the DOM so that
      * the text alignment isn't impacted by the button/icon's space.
      */
-    display: inline-block;
-    & + .${HeadingAnchorWrapperClassName} {
+    .${HeadingAnchorWrapperClassName} {
       position: absolute;
+      height: ${headingSizes[headingTag].lineHeight}em;
+
       margin-left: 6px;
+
       button {
         padding-left: 0;
         padding-right: 0;
@@ -58,16 +59,18 @@ const headingAnchorStyle = headingTag => css`
      * @see https://caniuse.com/mdn-css_at-rules_media_hover
      */
     @media (hover: hover) and (pointer: fine) {
-      & + .${HeadingAnchorWrapperClassName} {
+      .${HeadingAnchorWrapperClassName} {
         > button {
           opacity: 0;
           transform: translate(-8px, 0px);
           transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
-          &:focus {
-            opacity: 1;
-            transform: none !important;
-            outline: solid 2px ${colors.B200};
-          }
+        }
+      }
+
+      &:hover {
+        .${HeadingAnchorWrapperClassName} > button {
+          opacity: 1;
+          transform: none !important;
         }
       }
     }
@@ -93,39 +96,41 @@ const alignedHeadingAnchorStyle = ({
      * container edge.
      */
     .fabric-editor-block-mark:not([data-align='center'])[data-align] {
-        .heading-wrapper {
-          // Using right to left text to achieve the inverse effect
-          // of where the copy link button icon sits for left/center
-          // alignment.
-          // Although this is unorthodox it's the only approach which
-          // allows the button to sit flush against the left edge of
-          // bottom line of text.
-          direction: rtl;
-
-          // By default RTL will negatively impact the layout of special
-          // characters within the heading text, and potentially other
-          // nested inline nodes. To prevent this we insert pseudo elements
-          // containing HTML entities to retain LTR for all heading content
-          // except for the copy link button.
-          > *:not(.${HeadingAnchorWrapperClassName}):not(br) {
-            ::before {
-              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm
-              content: '\u202A';
-            }
-            ::after {
-              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm
-              content: '\u202C';
+        > {
+          h1, h2, h3, h4, h5, h6 {
+            // Using right to left text to achieve the inverse effect
+            // of where the copy link button icon sits for left/center
+            // alignment.
+            // Although this is unorthodox it's the only approach which
+            // allows the button to sit flush against the left edge of
+            // bottom line of text.
+            direction: rtl;
+
+            // By default RTL will negatively impact the layout of special
+            // characters within the heading text, and potentially other
+            // nested inline nodes. To prevent this we insert pseudo elements
+            // containing HTML entities to retain LTR for all heading content
+            // except for the copy link button.
+            > *:not(.${HeadingAnchorWrapperClassName}):not(br) {
+              ::before {
+                // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm
+                content: '\u202A';
+              }
+              ::after {
+                // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm
+                content: '\u202C';
+              }
             }
           }
         }
-      }
-      .${HeadingAnchorWrapperClassName} {
-        margin: 0 6px 0 0;
-      }
+        .${HeadingAnchorWrapperClassName} {
+          margin: 0 6px 0 0;
+        }
 
-      @media (hover: hover) and (pointer: fine) {
-        .${HeadingAnchorWrapperClassName} > button {
-          transform: translate(8px, 0);
+        @media (hover: hover) and (pointer: fine) {
+          .${HeadingAnchorWrapperClassName} > button {
+            transform: translate(8px, 0px);
+          }
         }
       }
     }
@@ -160,8 +165,10 @@ const tableSortableColumnStyle = ({
       .${HeadingAnchorWrapperClassName} {
         position: unset;
       }
-      .heading-wrapper {
-        margin-right: 30px;
+      > {
+        h1, h2, h3, h4, h5, h6 {
+          margin-right: 30px;
+        }
       }
     `;
   }
@@ -272,47 +279,6 @@ export const Wrapper = styled.div`
   ${fullPageStyles}
   ${fullWidthStyles}
 
-  div.heading-wrapper{
-    position: relative;
-    h1, h2, h3, h4, h5, h6{
-      margin-top: 0;
-      font-size: inherit;
-    }
-    &.h1 {
-      ${h700};
-      margin-top: 1.667em;
-    }
-    &.h2 {
-      ${h600};
-      margin-top: 1.8em;
-    }
-    &.h3 {
-      ${h500};
-      margin-top: 2em;
-    }
-    &.h4 {
-      ${h400};
-      margin-top: 1.357em;
-    }
-    &.h5 {
-      ${h300};
-      margin-top: 1.667em;
-    }
-    &.h6 {
-      ${h100};
-      margin-top: 1.455em;
-    }
-    /* show copy button on heading wrapper hover */
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-          .${HeadingAnchorWrapperClassName} > button{
-            opacity: 1;
-            transform: none !important;
-          }
-      }
-    }
-  }
-
   & h1 {
     ${headingAnchorStyle('h1')}
   }
@@ -623,7 +589,7 @@ export const Wrapper = styled.div`
       margin-top: 0;
     }
 
-    &:hover button.copy-to-clipboard{
+    &:hover button.copy-to-clipboard, .copy-to-clipboard:focus{
       opacity: 1;
       position: absolute;
       height: 32px;

package/dist/es2019/ui/SortingIcon.js

@@ -52,7 +52,7 @@ const TableSortingIcon = styled.div`
   }
 
   &.${TABLE_SORTING_ICON_CLASS}-inactive {
-    opacity: 0.5;
+    opacity: 0.7;
   }
 `;
 

package/dist/es2019/ui/annotations/draft/component.js

@@ -59,7 +59,7 @@ export const applyAnnotationOnText = ({
 export const TextWithAnnotationDraft = ({
   startPos,
   endPos,
-  text
+  children
 }) => {
   const textPosition = React.useMemo(() => ({
     start: startPos,
@@ -75,21 +75,21 @@ export const TextWithAnnotationDraft = ({
   }, [nextDraftPosition, textPosition]);
 
   if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, text);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
 
   if (shouldApplyAnnotationAt === InsertDraftPosition.AROUND_TEXT) {
     return /*#__PURE__*/React.createElement(AnnotationDraft, {
       key: 0,
       draftPosition: nextDraftPosition
-    }, text);
+    }, children);
   }
 
-  const offsets = calcTextSplitOffset(nextDraftPosition, textPosition, text);
-  const texts = splitText(text, offsets);
+  const offsets = calcTextSplitOffset(nextDraftPosition, textPosition, children);
+  const texts = splitText(children, offsets);
 
   if (!texts) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, text);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
 
   const components = applyAnnotationOnText({

package/dist/es2019/ui/annotations/hooks/use-events.js

@@ -20,8 +20,10 @@ export const useAnnotationStateByTypeEvent = ({
 
       const nextStates = Object.values(payload).reduce((acc, curr) => {
         if (curr.annotationType === type) {
+          // Check for empty state to prevent additional renders
+          const isEmpty = curr.state === null || curr.state === undefined;
           return { ...acc,
-            [curr.id]: curr.state
+            [curr.id]: !isEmpty ? curr.state : states[curr.id]
           };
         }
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "81.1.1",
+	"version": "83.0.0",
 	"sideEffects": false
 }

package/dist/esm/react/index.js

@@ -19,6 +19,7 @@ import { getMarksByOrder, isSameMark, calcTableColumnWidths } from '@atlaskit/ed
 import { getText } from '../utils';
 import { findChildrenByType } from 'prosemirror-utils';
 import { insideBreakoutLayout } from './renderer-node';
+import { isCodeMark } from './marks/code';
 
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce(function (acc, markOrNode) {
@@ -144,13 +145,22 @@ var ReactSerializer = /*#__PURE__*/function () {
 
       var extraProps = {
         isInline: node === null || node === void 0 ? void 0 : node.isInline
-      };
-
-      var props = _objectSpread(_objectSpread(_objectSpread({
+      }; // currently the only mark which has custom props is the code mark
+
+      var markSpecificProps = isCodeMark(mark) ? {
+        // The appearance being mobile indicates we are in an renderer being
+        // rendered by mobile bridge in a web view.
+        // The tooltip is likely to have unexpected behaviour there, with being cut
+        // off, so we disable it. This is also to keep the behaviour consistent with
+        // the rendering in the mobile Native Renderer.
+        codeBidiWarningTooltipEnabled: _this.appearance !== 'mobile'
+      } : {};
+
+      var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
         eventHandlers: _this.eventHandlers,
         fireAnalyticsEvent: _this.fireAnalyticsEvent,
         markKey: key
-      }, otherAttrs), extraProps), {}, {
+      }, otherAttrs), extraProps), markSpecificProps), {}, {
         dataAttributes: {
           'data-renderer-mark': true
         }
@@ -212,6 +222,9 @@ var ReactSerializer = /*#__PURE__*/function () {
         case 'mediaGroup':
           return this.getMediaGroupProps(node);
 
+        case 'mediaInline':
+          return this.getMediaInlineProps(node);
+
         case 'mediaSingle':
           return this.getMediaSingleProps(node, path);
 
@@ -331,9 +344,8 @@ var ReactSerializer = /*#__PURE__*/function () {
         return /*#__PURE__*/React.createElement(TextWrapperComponent, {
           key: textKey,
           startPos: startPos + parentDepth,
-          endPos: endPos + parentDepth,
-          text: mark.text
-        });
+          endPos: endPos + parentDepth
+        }, mark.text);
       }
 
       return mark.text || '';
@@ -418,7 +430,8 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getMediaProps",
     value: function getMediaProps(node) {
-      var _this6 = this;
+      var _this6 = this,
+          _this$media;
 
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var link = node.type.schema.marks.link;
@@ -434,7 +447,8 @@ var ReactSerializer = /*#__PURE__*/function () {
         isLinkMark: isLinkMark,
         allowAltTextOnImages: this.allowAltTextOnImages,
         featureFlags: this.media && this.media.featureFlags,
-        shouldOpenMediaViewer: this.shouldOpenMediaViewer
+        shouldOpenMediaViewer: this.shouldOpenMediaViewer,
+        ssr: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.ssr
       });
     }
   }, {
@@ -461,15 +475,21 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getMediaGroupProps",
     value: function getMediaGroupProps(node) {
-      var _this$media;
+      var _this$media2, _this$media3;
 
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         shouldOpenMediaViewer: this.shouldOpenMediaViewer,
         allowAltTextOnImages: this.allowAltTextOnImages,
         featureFlags: this.media && this.media.featureFlags,
-        enableDownloadButton: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.enableDownloadButton
+        enableDownloadButton: (_this$media2 = this.media) === null || _this$media2 === void 0 ? void 0 : _this$media2.enableDownloadButton,
+        ssr: (_this$media3 = this.media) === null || _this$media3 === void 0 ? void 0 : _this$media3.ssr
       });
     }
+  }, {
+    key: "getMediaInlineProps",
+    value: function getMediaInlineProps(node) {
+      return _objectSpread({}, this.getProps(node));
+    }
   }, {
     key: "getTaskItemProps",
     value: function getTaskItemProps(node) {
@@ -496,8 +516,15 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getCodeBlockProps",
     value: function getCodeBlockProps(node) {
+      // The appearance being mobile indicates we are in an renderer being
+      // rendered by mobile bridge in a web view.
+      // The tooltip is likely to have unexpected behaviour there, with being cut
+      // off, so we disable it. This is also to keep the behaviour consistent with
+      // the rendering in the mobile Native Renderer.
+      var codeBidiWarningTooltipEnabled = this.appearance !== 'mobile';
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
-        text: node.textContent
+        text: node.textContent,
+        codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
       });
     }
   }, {

package/dist/esm/react/marks/code.js

@@ -1,8 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { injectIntl } from 'react-intl';
 import AkCode from '@atlaskit/code/inline';
-export default function Code(props) {
+import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
+import { useFeatureFlags } from '../../use-feature-flags';
+export var isCodeMark = function isCodeMark(mark) {
+  return mark && mark.type && mark.type.name === 'code';
+};
+export function CodeWithIntl(props) {
+  var featureFlags = useFeatureFlags();
+  var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   return /*#__PURE__*/React.createElement(AkCode, _extends({
-    className: "code"
+    className: "code",
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: props.codeBidiWarningTooltipEnabled
   }, props.dataAttributes), props.children);
-}
+}
+export default injectIntl(CodeWithIntl);

package/dist/esm/react/marks/fragment.js

@@ -0,0 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+export default function FragmentMark(props) {
+  var WrapperElement = props.isInline ? 'span' : 'div';
+  return /*#__PURE__*/React.createElement(WrapperElement, _extends({
+    "data-localId": props.localId,
+    "data-name": props.name,
+    "data-mark-type": "fragment"
+  }, props.dataAttributes), props.children);
+}

package/dist/esm/react/marks/index.js

@@ -12,6 +12,7 @@ import Indentation from './indentation';
 import UnsupportedMark from './unsupportedMark';
 import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
+import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation'; // Stage0
 
 import ConfluenceInlineComment from './confluence-inline-comment';
@@ -32,9 +33,10 @@ export var markToReact = {
   indentation: Indentation,
   unsupportedMark: UnsupportedMark,
   unsupportedNodeAttribute: UnsupportedNodeAttribute,
-  dataConsumer: DataConsumer
+  dataConsumer: DataConsumer,
+  fragment: FragmentMark
 };
 export var toReact = function toReact(mark) {
   return markToReact[mark.type.name];
 };
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };

package/dist/esm/react/nodes/codeBlock.js

@@ -3,19 +3,25 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import React from 'react';
+import { injectIntl } from 'react-intl';
 import styled from 'styled-components';
 import { CodeBlock as AkCodeBlock } from '@atlaskit/code';
 import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, DN50 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
+import { useFeatureFlags } from '../../use-feature-flags';
 import CopyButton from './codeBlockCopyButton';
 
 function CodeBlock(props) {
   var text = props.text,
       language = props.language,
       _props$allowCopyToCli = props.allowCopyToClipboard,
-      allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli;
+      allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli,
+      codeBidiWarningTooltipEnabled = props.codeBidiWarningTooltipEnabled;
+  var featureFlags = useFeatureFlags();
+  var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   var className = ['code-block', props.className].join(' ');
   return /*#__PURE__*/React.createElement("div", {
     className: className
@@ -23,11 +29,15 @@ function CodeBlock(props) {
     content: text
   }) : null, /*#__PURE__*/React.createElement(AkCodeBlock, {
     language: language,
-    text: text
+    text: text,
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
   }));
 }
 
-export default styled(CodeBlock)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  tab-size: 4;\n  [data-ds--code--code-block] {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, scroll, scroll;\n    background-position: 100% 0, 100% 0, 0 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), overflowShadow({
+var IntlCodeBlock = injectIntl(CodeBlock);
+export default styled(IntlCodeBlock)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  tab-size: 4;\n  [data-ds--code--code-block] {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, scroll, scroll;\n    background-position: 100% 0, 100% 0, 0 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), overflowShadow({
   background: themed({
     light: N20,
     dark: DN50

package/dist/esm/react/nodes/heading-anchor.js

@@ -111,8 +111,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "renderAnchorButton", function () {
       return /*#__PURE__*/React.createElement(CopyAnchorButton, {
         onMouseLeave: _this.resetMessage,
-        onClick: _this.copyToClipboard,
-        "aria-label": _this.state.tooltipMessage
+        onClick: _this.copyToClipboard
       }, /*#__PURE__*/React.createElement(LinkIcon, {
         label: "copy",
         size: _this.props.level > 3 ? 'small' : 'medium',