@atlaskit/editor-core 151.1.0 → 151.2.1

package/dist/es2019/plugins/code-bidi-warning/pm-plugins/plugin-factory.js

@@ -18,7 +18,8 @@ export const {
 
     const newBidiWarningsDecorationSet = createBidiWarningsDecorationSetFromDoc({
       doc: tr.doc,
-      codeBidiWarningLabel: pluginState.codeBidiWarningLabel
+      codeBidiWarningLabel: pluginState.codeBidiWarningLabel,
+      tooltipEnabled: pluginState.tooltipEnabled
     });
     return { ...pluginState,
       decorationSet: newBidiWarningsDecorationSet
@@ -27,7 +28,8 @@ export const {
 });
 export function createBidiWarningsDecorationSetFromDoc({
   doc,
-  codeBidiWarningLabel
+  codeBidiWarningLabel,
+  tooltipEnabled
 }) {
   const bidiCharactersAndTheirPositions = [];
   doc.descendants((node, pos) => {
@@ -70,19 +72,28 @@ export function createBidiWarningsDecorationSetFromDoc({
     position,
     bidiCharacter
   }) => {
-    return Decoration.widget(position, () => renderDOM(bidiCharacter, codeBidiWarningLabel));
+    return Decoration.widget(position, () => renderDOM({
+      bidiCharacter,
+      codeBidiWarningLabel,
+      tooltipEnabled
+    }));
   }));
   return newBidiWarningsDecorationSet;
 }
 
-function renderDOM(bidiCharacter, codeBidiWarningLabel) {
+function renderDOM({
+  bidiCharacter,
+  codeBidiWarningLabel,
+  tooltipEnabled
+}) {
   const element = document.createElement('span'); // Note: we use this pattern elsewhere (see highlighting code block, and drop cursor widget decoration)
   // we should investigate if there is a memory leak with such usage.
 
   ReactDOM.render( /*#__PURE__*/React.createElement(CodeBidiWarning, {
     bidiCharacter: bidiCharacter,
     skipChildren: true,
-    label: codeBidiWarningLabel
+    label: codeBidiWarningLabel,
+    tooltipEnabled: tooltipEnabled
   }), element);
   return element;
 }

package/dist/es2019/plugins/code-block/index.js

@@ -9,7 +9,7 @@ import { IconCode } from '../quick-insert/assets';
 import { messages } from '../block-type/messages';
 import refreshBrowserSelectionOnChange from './refresh-browser-selection';
 
-const codeBlockPlugin = (options = {}) => ({
+const codeBlockPlugin = options => ({
   name: 'codeBlock',
 
   nodes() {
@@ -26,7 +26,8 @@ const codeBlockPlugin = (options = {}) => ({
         reactContext
       }) => createPlugin({
         useLongPressSelection: options.useLongPressSelection,
-        reactContext
+        reactContext,
+        appearance: options.appearance
       })
     }, {
       name: 'codeBlockIDEKeyBindings',

package/dist/es2019/plugins/code-block/nodeviews/highlighting-code-block.js

@@ -102,7 +102,8 @@ export class CodeBlockView {
       language: node.attrs.language,
       showLineNumbers: false,
       codeBidiWarnings: this.codeBidiWarningOptions.enabled,
-      codeBidiWarningLabel: this.codeBidiWarningOptions.label
+      codeBidiWarningLabel: this.codeBidiWarningOptions.label,
+      codeBidiWarningTooltipEnabled: this.codeBidiWarningOptions.tooltipEnabled
     }), highlighting);
     this.measure(performance.now() - start);
     content === null || content === void 0 ? void 0 : content.setAttribute('data-debounce', 'false');
@@ -142,8 +143,10 @@ export class CodeBlockView {
 }
 export const highlightingCodeBlockNodeView = ({
   codeBidiWarnings,
-  codeBidiWarningLabel
+  codeBidiWarningLabel,
+  codeBidiWarningTooltipEnabled
 }) => (node, view, getPos) => new CodeBlockView(node, view, getPos, {
+  label: codeBidiWarningLabel,
   enabled: codeBidiWarnings,
-  label: codeBidiWarningLabel
+  tooltipEnabled: codeBidiWarningTooltipEnabled
 });

package/dist/es2019/plugins/code-block/pm-plugins/main.js

@@ -10,7 +10,8 @@ import { codeBlockClassNames } from '../ui/class-names';
 import { getFeatureFlags } from '../../feature-flags-context';
 export const createPlugin = ({
   useLongPressSelection = false,
-  reactContext
+  reactContext,
+  appearance
 }) => {
   const intl = reactContext().intl;
   const codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
@@ -51,10 +52,17 @@ export const createPlugin = ({
     props: {
       nodeViews: {
         codeBlock(node, view, getPos) {
-          const featureFlags = getFeatureFlags(view.state);
+          const featureFlags = getFeatureFlags(view.state); // The appearance being mobile indicates we are in an editor 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 = appearance !== 'mobile';
           const createCodeBlockNodeView = featureFlags !== null && featureFlags !== void 0 && featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockNodeView({
             codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
-            codeBidiWarningLabel
+            codeBidiWarningLabel,
+            codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
           }) : codeBlockNodeView();
           return createCodeBlockNodeView(node, view, getPos);
         }

package/dist/es2019/plugins/find-replace/ui/Find.js

@@ -1,12 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/core';
 import { defineMessages, injectIntl } from 'react-intl';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import MatchCaseIcon from '@atlaskit/icon/glyph/emoji/keyboard';
 import Textfield from '@atlaskit/textfield';
-import { SectionWrapper, Count } from './styles';
+import { countStyles, sectionWrapperStyles } from './styles';
 import { TRIGGER_METHOD } from '../../analytics/types';
 import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
 const messages = defineMessages({
@@ -147,16 +150,16 @@ class Find extends React.Component {
     this.findNext = formatMessage(messages.findNext);
     this.findPrevious = formatMessage(messages.findPrevious);
     this.matchCase = formatMessage(messages.matchCase);
-    this.matchCaseIcon = /*#__PURE__*/React.createElement(MatchCaseIcon, {
+    this.matchCaseIcon = jsx(MatchCaseIcon, {
       label: this.matchCase
     });
-    this.findNextIcon = /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    this.findNextIcon = jsx(ChevronDownIcon, {
       label: this.findNext
     });
-    this.findPrevIcon = /*#__PURE__*/React.createElement(ChevronUpIcon, {
+    this.findPrevIcon = jsx(ChevronUpIcon, {
       label: this.findPrevious
     });
-    this.closeIcon = /*#__PURE__*/React.createElement(EditorCloseIcon, {
+    this.closeIcon = jsx(EditorCloseIcon, {
       label: this.closeFindReplaceDialog
     }); // We locally manage the value of the input inside this component in order to support compositions.
     // This requires some additional work inside componentDidUpdate to ensure we support changes that
@@ -200,7 +203,9 @@ class Find extends React.Component {
       selectedMatchPosition: count.index + 1,
       totalResultsCount: count.total
     });
-    return /*#__PURE__*/React.createElement(SectionWrapper, null, /*#__PURE__*/React.createElement(Textfield, {
+    return jsx("div", {
+      css: sectionWrapperStyles
+    }, jsx(Textfield, {
       name: "find",
       appearance: "none",
       placeholder: this.find,
@@ -212,24 +217,27 @@ class Find extends React.Component {
       onBlur: this.props.onFindBlur,
       onCompositionStart: this.handleCompositionStart,
       onCompositionEnd: this.handleCompositionEnd
-    }), findText && /*#__PURE__*/React.createElement(Count, null, count.total === 0 ? this.noResultsFound : resultsCount), allowMatchCase && /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
+    }), findText && jsx("span", {
+      "data-testid": "textfield-count",
+      css: countStyles
+    }, count.total === 0 ? this.noResultsFound : resultsCount), allowMatchCase && jsx(FindReplaceTooltipButton, {
       title: this.matchCase,
       icon: this.matchCaseIcon,
       onClick: this.handleMatchCaseClick,
       isPressed: shouldMatchCase
-    }), /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
+    }), jsx(FindReplaceTooltipButton, {
       title: this.findNext,
       icon: this.findNextIcon,
       keymapDescription: 'Enter',
       onClick: this.handleFindNextClick,
       disabled: count.total <= 1
-    }), /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
+    }), jsx(FindReplaceTooltipButton, {
       title: this.findPrevious,
       icon: this.findPrevIcon,
       keymapDescription: 'Shift Enter',
       onClick: this.handleFindPrevClick,
       disabled: count.total <= 1
-    }), /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
+    }), jsx(FindReplaceTooltipButton, {
       title: this.closeFindReplaceDialog,
       icon: this.closeIcon,
       keymapDescription: 'Escape',

package/dist/es2019/plugins/find-replace/ui/FindReplace.js

@@ -1,8 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/core';
 import Find from './Find';
 import Replace from './Replace';
-import { Rule, Wrapper } from './styles';
+import { ruleStyles, wrapperStyles } from './styles';
 
 class FindReplace extends React.PureComponent {
   constructor(...args) {
@@ -51,7 +54,9 @@ class FindReplace extends React.PureComponent {
       shouldMatchCase,
       onToggleMatchCase
     } = this.props;
-    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Find, {
+    return jsx("div", {
+      css: wrapperStyles
+    }, jsx(Find, {
       allowMatchCase: allowMatchCase,
       shouldMatchCase: shouldMatchCase,
       onToggleMatchCase: onToggleMatchCase,
@@ -65,7 +70,10 @@ class FindReplace extends React.PureComponent {
       onFindTextfieldRefSet: this.setFindTextfieldRef,
       onCancel: onCancel,
       onArrowDown: this.setFocusToReplace
-    }), /*#__PURE__*/React.createElement(Rule, null), /*#__PURE__*/React.createElement(Replace, {
+    }), jsx("hr", {
+      css: ruleStyles,
+      id: "replace-hr-element"
+    }), jsx(Replace, {
       canReplace: count.total > 0,
       replaceText: replaceText,
       onReplace: onReplace,

package/dist/es2019/plugins/find-replace/ui/Replace.js

@@ -1,8 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/core';
+import Button from '@atlaskit/button/standard-button';
 import { defineMessages, injectIntl } from 'react-intl';
 import Textfield from '@atlaskit/textfield';
-import { SectionWrapper, ReplaceSectionButton } from './styles';
+import { sectionWrapperStyles, replaceSectionButtonStyles } from './styles';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT, TRIGGER_METHOD } from '../../analytics/types';
 const messages = defineMessages({
   replaceWith: {
@@ -138,7 +142,9 @@ class Replace extends React.PureComponent {
     const {
       canReplace
     } = this.props;
-    return /*#__PURE__*/React.createElement(SectionWrapper, null, /*#__PURE__*/React.createElement(Textfield, {
+    return jsx("div", {
+      css: sectionWrapperStyles
+    }, jsx(Textfield, {
       name: "replace",
       appearance: "none",
       placeholder: this.replaceWith,
@@ -149,11 +155,13 @@ class Replace extends React.PureComponent {
       onKeyDown: this.handleReplaceKeyDown,
       onCompositionStart: this.handleCompositionStart,
       onCompositionEnd: this.handleCompositionEnd
-    }), /*#__PURE__*/React.createElement(ReplaceSectionButton, {
+    }), jsx(Button, {
+      css: replaceSectionButtonStyles,
       testId: this.replace,
       onClick: this.handleReplaceClick,
       isDisabled: !canReplace
-    }, this.replace), /*#__PURE__*/React.createElement(ReplaceSectionButton, {
+    }, this.replace), jsx(Button, {
+      css: replaceSectionButtonStyles,
       testId: this.replaceAll,
       onClick: this.handleReplaceAllClick,
       isDisabled: !canReplace

package/dist/es2019/plugins/find-replace/ui/styles.js

@@ -1,50 +1,40 @@
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css } from '@emotion/core';
 import { N60, N30A } from '@atlaskit/theme/colors';
-import Button from '@atlaskit/button/standard-button';
-import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles'; // This is a workaround because React.memo does not play well with styled-components
-
-function StyledComponentsButton(props) {
-  return /*#__PURE__*/React.createElement(Button, props);
-}
-
-export const ReplaceSectionButton = styled(StyledComponentsButton)`
-  /* increase specificity to override default Button styles */
-  && {
-    margin-left: 4px;
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+export const replaceSectionButtonStyles = css({
+  marginLeft: '4px'
+});
+export const ruleStyles = css({
+  width: '100%',
+  border: 'none',
+  backgroundColor: `${N30A}`,
+  margin: '4px 0px',
+  height: '1px',
+  borderRadius: '1px'
+});
+export const wrapperStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  '> *:not(#replace-hr-element)': {
+    margin: '0px 4px'
   }
-`;
-export const Rule = styled.hr`
-  width: 100%;
-  border: none;
-  background-color: ${N30A};
-  margin: 4px 0px;
-  height: 1px;
-  border-radius: 1px;
-`;
-export const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  > *:not(${Rule}) {
-    margin: 0px 4px;
+});
+export const sectionWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'column',
+  '> *': {
+    display: 'inline-flex',
+    height: '32px',
+    flex: '0 0 auto'
   }
-`;
-export const SectionWrapper = styled.div`
-  display: flex;
-  align-items: center;
-
-  > * {
-    flex: 0 0 auto;
-    display: inline-flex;
-    height: 32px;
-  }
-`;
-export const Count = styled.span`
-  color: ${N60};
-  font-size: ${relativeFontSizeToBase16(12)};
-  flex: 0 0 auto;
-  justify-content: center;
-  align-items: center;
-  margin-left: 4px;
-  margin-right: 8px;
-`;
+});
+export const countStyles = css({
+  color: `${N60}`,
+  fontSize: `${relativeFontSizeToBase16(12)}`,
+  flex: '0 0 auto',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginLeft: '4px',
+  marginRight: '8px'
+});

package/dist/es2019/plugins/hyperlink/HyperlinkToolbarAppearance.js

@@ -59,7 +59,7 @@ export class HyperlinkToolbarAppearance extends Component {
 
   // needed so we display the right state on the Toolbar while the same Toolbar
   // instance is visible and we click other link
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.url !== this.props.url) {
       this.resolveUrl(nextProps.url);
     }

package/dist/es2019/plugins/status/styles.js

@@ -3,7 +3,10 @@ import { StatusSharedCssClassName } from '@atlaskit/editor-common';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const statusStyles = css`
   .${StatusSharedCssClassName.STATUS_CONTAINER} {
+    // these two styles can be removed when displayInlineBlockForInlineNodes is enabled by default
+    // as it will make all inline nodes inline-block by default
     display: inline-block;
+    user-select: all;
 
     > span {
       display: inline-block;

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "151.1.0";
+export const version = "151.2.1";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "151.1.0",
+	"version": "151.2.1",
 	"sideEffects": false
 }

package/dist/esm/create-editor/create-plugins-list.js

@@ -96,7 +96,8 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
     },
     cardOptions: props.smartLinks || props.UNSAFE_cards,
     codeBlock: _objectSpread(_objectSpread({}, props.codeBlock), {}, {
-      useLongPressSelection: false
+      useLongPressSelection: false,
+      appearance: props.appearance
     })
   };
 }
@@ -394,7 +395,9 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
   }
 
   if (featureFlags.codeBidiWarnings) {
-    preset.add(codeBidiWarningPlugin);
+    preset.add([codeBidiWarningPlugin, {
+      appearance: props.appearance
+    }]);
   }
 
   var excludes = new Set();

package/dist/esm/labs/next/presets/default.js

@@ -63,7 +63,9 @@ export function createDefaultPreset(options) {
   preset.add(floatingToolbarPlugin);
   preset.add([featureFlagsContextPlugin, options.featureFlags || {}]);
   preset.add([selectionPlugin, options.selection]);
-  preset.add([codeBlockPlugin, options.codeBlock]);
+  preset.add([codeBlockPlugin, options.codeBlock || {
+    appearance: 'full-page'
+  }]);
   return preset;
 }
 export function useDefaultPreset(props) {

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

@@ -1,13 +1,16 @@
 import { createPlugin } from './pm-plugins/main';
 
-var codeBidiWarning = function codeBidiWarning() {
+var codeBidiWarning = function codeBidiWarning(_ref) {
+  var appearance = _ref.appearance;
   return {
     name: 'codeBidiWarning',
     pmPlugins: function pmPlugins() {
       return [{
         name: 'codeBidiWarning',
         plugin: function plugin(options) {
-          return createPlugin(options);
+          return createPlugin(options, {
+            appearance: appearance
+          });
         }
       }];
     }

package/dist/esm/plugins/code-bidi-warning/pm-plugins/main.js

@@ -2,20 +2,29 @@ import { Plugin } from 'prosemirror-state';
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { codeBidiWarningPluginKey } from '../plugin-key';
 import { createBidiWarningsDecorationSetFromDoc, createPluginState, getPluginState } from './plugin-factory';
-export var createPlugin = function createPlugin(_ref) {
+export var createPlugin = function createPlugin(_ref, _ref2) {
   var dispatch = _ref.dispatch,
       reactContext = _ref.reactContext;
+  var appearance = _ref2.appearance;
   var intl = reactContext().intl;
   var codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
   return new Plugin({
     key: codeBidiWarningPluginKey,
     state: createPluginState(dispatch, function (state) {
+      // The appearance being mobile indicates we are in an editor 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 tooltipEnabled = appearance !== 'mobile';
       return {
         decorationSet: createBidiWarningsDecorationSetFromDoc({
           doc: state.doc,
-          codeBidiWarningLabel: codeBidiWarningLabel
+          codeBidiWarningLabel: codeBidiWarningLabel,
+          tooltipEnabled: tooltipEnabled
         }),
-        codeBidiWarningLabel: codeBidiWarningLabel
+        codeBidiWarningLabel: codeBidiWarningLabel,
+        tooltipEnabled: tooltipEnabled
       };
     }),
     props: {

package/dist/esm/plugins/code-bidi-warning/pm-plugins/plugin-factory.js

@@ -22,7 +22,8 @@ var _pluginFactory = pluginFactory(codeBidiWarningPluginKey, reducer, {
 
     var newBidiWarningsDecorationSet = createBidiWarningsDecorationSetFromDoc({
       doc: tr.doc,
-      codeBidiWarningLabel: pluginState.codeBidiWarningLabel
+      codeBidiWarningLabel: pluginState.codeBidiWarningLabel,
+      tooltipEnabled: pluginState.tooltipEnabled
     });
     return _objectSpread(_objectSpread({}, pluginState), {}, {
       decorationSet: newBidiWarningsDecorationSet
@@ -35,7 +36,8 @@ var _pluginFactory = pluginFactory(codeBidiWarningPluginKey, reducer, {
 export { createPluginState, getPluginState };
 export function createBidiWarningsDecorationSetFromDoc(_ref) {
   var doc = _ref.doc,
-      codeBidiWarningLabel = _ref.codeBidiWarningLabel;
+      codeBidiWarningLabel = _ref.codeBidiWarningLabel,
+      tooltipEnabled = _ref.tooltipEnabled;
   var bidiCharactersAndTheirPositions = [];
   doc.descendants(function (node, pos) {
     var isTextWithCodeMark = node.type.name === 'text' && node.marks && node.marks.some(function (mark) {
@@ -77,20 +79,28 @@ export function createBidiWarningsDecorationSetFromDoc(_ref) {
     var position = _ref4.position,
         bidiCharacter = _ref4.bidiCharacter;
     return Decoration.widget(position, function () {
-      return renderDOM(bidiCharacter, codeBidiWarningLabel);
+      return renderDOM({
+        bidiCharacter: bidiCharacter,
+        codeBidiWarningLabel: codeBidiWarningLabel,
+        tooltipEnabled: tooltipEnabled
+      });
     });
   }));
   return newBidiWarningsDecorationSet;
 }
 
-function renderDOM(bidiCharacter, codeBidiWarningLabel) {
+function renderDOM(_ref5) {
+  var bidiCharacter = _ref5.bidiCharacter,
+      codeBidiWarningLabel = _ref5.codeBidiWarningLabel,
+      tooltipEnabled = _ref5.tooltipEnabled;
   var element = document.createElement('span'); // Note: we use this pattern elsewhere (see highlighting code block, and drop cursor widget decoration)
   // we should investigate if there is a memory leak with such usage.
 
   ReactDOM.render( /*#__PURE__*/React.createElement(CodeBidiWarning, {
     bidiCharacter: bidiCharacter,
     skipChildren: true,
-    label: codeBidiWarningLabel
+    label: codeBidiWarningLabel,
+    tooltipEnabled: tooltipEnabled
   }), element);
   return element;
 }

package/dist/esm/plugins/code-block/index.js

@@ -9,8 +9,7 @@ import { IconCode } from '../quick-insert/assets';
 import { messages } from '../block-type/messages';
 import refreshBrowserSelectionOnChange from './refresh-browser-selection';
 
-var codeBlockPlugin = function codeBlockPlugin() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+var codeBlockPlugin = function codeBlockPlugin(options) {
   return {
     name: 'codeBlock',
     nodes: function nodes() {
@@ -26,7 +25,8 @@ var codeBlockPlugin = function codeBlockPlugin() {
           var reactContext = _ref.reactContext;
           return createPlugin({
             useLongPressSelection: options.useLongPressSelection,
-            reactContext: reactContext
+            reactContext: reactContext,
+            appearance: options.appearance
           });
         }
       }, {

package/dist/esm/plugins/code-block/nodeviews/highlighting-code-block.js

@@ -121,7 +121,8 @@ export var CodeBlockView = /*#__PURE__*/function () {
         language: node.attrs.language,
         showLineNumbers: false,
         codeBidiWarnings: this.codeBidiWarningOptions.enabled,
-        codeBidiWarningLabel: this.codeBidiWarningOptions.label
+        codeBidiWarningLabel: this.codeBidiWarningOptions.label,
+        codeBidiWarningTooltipEnabled: this.codeBidiWarningOptions.tooltipEnabled
       }), highlighting);
       this.measure(performance.now() - start);
       content === null || content === void 0 ? void 0 : content.setAttribute('data-debounce', 'false');
@@ -165,11 +166,13 @@ export var CodeBlockView = /*#__PURE__*/function () {
 }();
 export var highlightingCodeBlockNodeView = function highlightingCodeBlockNodeView(_ref) {
   var codeBidiWarnings = _ref.codeBidiWarnings,
-      codeBidiWarningLabel = _ref.codeBidiWarningLabel;
+      codeBidiWarningLabel = _ref.codeBidiWarningLabel,
+      codeBidiWarningTooltipEnabled = _ref.codeBidiWarningTooltipEnabled;
   return function (node, view, getPos) {
     return new CodeBlockView(node, view, getPos, {
+      label: codeBidiWarningLabel,
       enabled: codeBidiWarnings,
-      label: codeBidiWarningLabel
+      tooltipEnabled: codeBidiWarningTooltipEnabled
     });
   };
 };

package/dist/esm/plugins/code-block/pm-plugins/main.js

@@ -17,7 +17,8 @@ import { getFeatureFlags } from '../../feature-flags-context';
 export var createPlugin = function createPlugin(_ref) {
   var _ref$useLongPressSele = _ref.useLongPressSelection,
       useLongPressSelection = _ref$useLongPressSele === void 0 ? false : _ref$useLongPressSele,
-      reactContext = _ref.reactContext;
+      reactContext = _ref.reactContext,
+      appearance = _ref.appearance;
   var intl = reactContext().intl;
   var codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
   return new Plugin({
@@ -57,10 +58,17 @@ export var createPlugin = function createPlugin(_ref) {
     props: {
       nodeViews: {
         codeBlock: function codeBlock(node, view, getPos) {
-          var featureFlags = getFeatureFlags(view.state);
+          var featureFlags = getFeatureFlags(view.state); // The appearance being mobile indicates we are in an editor 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 = appearance !== 'mobile';
           var createCodeBlockNodeView = featureFlags !== null && featureFlags !== void 0 && featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockNodeView({
             codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
-            codeBidiWarningLabel: codeBidiWarningLabel
+            codeBidiWarningLabel: codeBidiWarningLabel,
+            codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
           }) : codeBlockNodeView();
           return createCodeBlockNodeView(node, view, getPos);
         }