@atlaskit/renderer 81.1.0 → 82.2.0

package/dist/es2019/react/index.js

@@ -10,6 +10,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((acc, markOrNode) => {
@@ -128,13 +129,23 @@ export default class ReactSerializer {
       } = mark.attrs;
       const extraProps = {
         isInline: node === null || node === void 0 ? void 0 : node.isInline
-      };
+      }; // currently the only mark which has custom props is the code mark
+
+      const 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'
+      } : {};
       const props = {
         eventHandlers: this.eventHandlers,
         fireAnalyticsEvent: this.fireAnalyticsEvent,
         markKey: key,
         ...otherAttrs,
         ...extraProps,
+        ...markSpecificProps,
         dataAttributes: {
           'data-renderer-mark': true
         }
@@ -192,6 +203,9 @@ export default class ReactSerializer {
       case 'mediaGroup':
         return this.getMediaGroupProps(node);
 
+      case 'mediaInline':
+        return this.getMediaInlineProps(node);
+
       case 'mediaSingle':
         return this.getMediaSingleProps(node, path);
 
@@ -296,9 +310,8 @@ export default class ReactSerializer {
       return /*#__PURE__*/React.createElement(TextWrapperComponent, {
         key: textKey,
         startPos: startPos + parentDepth,
-        endPos: endPos + parentDepth,
-        text: mark.text
-      });
+        endPos: endPos + parentDepth
+      }, mark.text);
     }
 
     return mark.text || '';
@@ -410,6 +423,11 @@ export default class ReactSerializer {
     };
   }
 
+  getMediaInlineProps(node) {
+    return { ...this.getProps(node)
+    };
+  }
+
   getTaskItemProps(node, path = []) {
     return { ...this.getProps(node, path),
       disabled: this.disableActions
@@ -430,8 +448,15 @@ export default class ReactSerializer {
   }
 
   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.
+    const codeBidiWarningTooltipEnabled = this.appearance !== 'mobile';
     return { ...this.getProps(node),
-      text: node.textContent
+      text: node.textContent,
+      codeBidiWarningTooltipEnabled
     };
   }
 

package/dist/es2019/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 const isCodeMark = mark => {
+  return mark && mark.type && mark.type.name === 'code';
+};
+export function CodeWithIntl(props) {
+  const featureFlags = useFeatureFlags();
+  const 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/es2019/react/nodes/codeBlock.js

@@ -1,18 +1,24 @@
 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) {
   const {
     text,
     language,
-    allowCopyToClipboard = false
+    allowCopyToClipboard = false,
+    codeBidiWarningTooltipEnabled
   } = props;
+  const featureFlags = useFeatureFlags();
+  const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   const className = ['code-block', props.className].join(' ');
   return /*#__PURE__*/React.createElement("div", {
     className: className
@@ -20,11 +26,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)`
+const IntlCodeBlock = injectIntl(CodeBlock);
+export default styled(IntlCodeBlock)`
   tab-size: 4;
   [data-ds--code--code-block] {
     font-size: ${relativeFontSizeToBase16(fontSize())};

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

@@ -66,8 +66,7 @@ class HeadingAnchor extends React.PureComponent {
     _defineProperty(this, "renderAnchorButton", () => {
       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',

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

@@ -39,11 +39,9 @@ function Heading(props) {
   const showAnchorLink = !!props.showAnchorLink;
   const isRightAligned = hasRightAlignmentMark(marks);
   const enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
-  return /*#__PURE__*/React.createElement("div", {
-    className: `heading-wrapper ${HX}`
-  }, /*#__PURE__*/React.createElement(HX, _extends({
+  return /*#__PURE__*/React.createElement(HX, _extends({
     id: headingId
-  }, dataAttributes), /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children)), showAnchorLink && /*#__PURE__*/React.createElement(CopyTextConsumer, null, ({
+  }, dataAttributes), /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children, showAnchorLink && /*#__PURE__*/React.createElement(CopyTextConsumer, null, ({
     copyTextToClipboard
   }) => {
     return headingId && /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, ({
@@ -61,7 +59,7 @@ function Heading(props) {
         return copyTextToClipboard(getCurrentUrlWithHash(headingId));
       }
     }));
-  }));
+  })));
 }
 
 export default Heading;

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

@@ -85,6 +85,12 @@ const MediaGroup = Loadable({
   './mediaGroup').then(mod => mod.default),
   loading: () => null
 });
+const MediaInline = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_renderer-node_MediaInline" */
+  './mediaInline').then(mod => mod.default),
+  loading: () => null
+});
 const Mention = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_renderer-node_Mention" */
@@ -119,6 +125,7 @@ export const nodeToReact = {
   listItem: ListItem,
   media: Media,
   mediaGroup: MediaGroup,
+  mediaInline: MediaInline,
   mediaSingle: MediaSingle,
   mention: Mention,
   orderedList: OrderedList,
@@ -278,4 +285,4 @@ const isEmojiBlock = pnode => {
   return emojiCount > 0;
 };
 
-export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };
+export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };

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

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { MediaInlineCard } from '@atlaskit/media-card';
+import { WithProviders } from '@atlaskit/editor-common';
+export const RenderMediaInline = props => {
+  const {
+    mediaProvider
+  } = props;
+  const [viewMediaClientConfigState, setViewMediaClientConfigState] = useState({});
+  useEffect(() => {
+    updateViewMediaClientConfigState(mediaProvider);
+  }, [mediaProvider]);
+
+  const updateViewMediaClientConfigState = async mediaProvider => {
+    if (mediaProvider) {
+      const mediaClientConfig = await mediaProvider;
+      setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(MediaInlineCard, {
+    identifier: props.identifier,
+    shouldOpenMediaViewer: true,
+    mediaClientConfig: viewMediaClientConfigState
+  });
+};
+
+const MediaInline = props => {
+  const {
+    collection,
+    id,
+    providers
+  } = props;
+  const identifier = {
+    id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(WithProviders, {
+    providers: ['mediaProvider'],
+    providerFactory: providers,
+    renderNode: providers => {
+      const {
+        mediaProvider
+      } = providers;
+      return /*#__PURE__*/React.createElement(RenderMediaInline, {
+        identifier: identifier,
+        mediaProvider: mediaProvider
+      });
+    }
+  }));
+};
+
+export default MediaInline;

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

@@ -77,7 +77,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/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.UNSAFE_allowCustomPanels !== this.props.UNSAFE_allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
       this.serializer = new ReactSerializer(this.deriveSerializerProps(nextProps));
     }
   }

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')}
   }

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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "81.1.0",
+	"version": "82.2.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 || '';
@@ -470,6 +482,11 @@ var ReactSerializer = /*#__PURE__*/function () {
         enableDownloadButton: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.enableDownloadButton
       });
     }
+  }, {
+    key: "getMediaInlineProps",
+    value: function getMediaInlineProps(node) {
+      return _objectSpread({}, this.getProps(node));
+    }
   }, {
     key: "getTaskItemProps",
     value: function getTaskItemProps(node) {
@@ -496,8 +513,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);