@atlaskit/editor-core 151.0.0 → 151.2.0

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

@@ -0,0 +1,41 @@
+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 const createPlugin = ({
+  dispatch,
+  reactContext
+}, {
+  appearance
+}) => {
+  const intl = reactContext().intl;
+  const codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
+  return new Plugin({
+    key: codeBidiWarningPluginKey,
+    state: createPluginState(dispatch, 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 tooltipEnabled = appearance !== 'mobile';
+      return {
+        decorationSet: createBidiWarningsDecorationSetFromDoc({
+          doc: state.doc,
+          codeBidiWarningLabel,
+          tooltipEnabled
+        }),
+        codeBidiWarningLabel,
+        tooltipEnabled
+      };
+    }),
+    props: {
+      decorations: state => {
+        const {
+          decorationSet
+        } = getPluginState(state);
+        return decorationSet;
+      }
+    }
+  });
+};

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import CodeBidiWarning from '@atlaskit/code/bidi-warning';
+import codeBidiWarningDecorator from '@atlaskit/code/bidi-warning-decorator';
+import { pluginFactory } from '../../../utils/plugin-state-factory';
+import { stepHasSlice } from '../../../utils/step';
+import { codeBidiWarningPluginKey } from '../plugin-key';
+import reducer from './reducer';
+export const {
+  createPluginState,
+  getPluginState
+} = pluginFactory(codeBidiWarningPluginKey, reducer, {
+  onDocChanged: (tr, pluginState) => {
+    if (!tr.steps.find(stepHasSlice)) {
+      return pluginState;
+    }
+
+    const newBidiWarningsDecorationSet = createBidiWarningsDecorationSetFromDoc({
+      doc: tr.doc,
+      codeBidiWarningLabel: pluginState.codeBidiWarningLabel,
+      tooltipEnabled: pluginState.tooltipEnabled
+    });
+    return { ...pluginState,
+      decorationSet: newBidiWarningsDecorationSet
+    };
+  }
+});
+export function createBidiWarningsDecorationSetFromDoc({
+  doc,
+  codeBidiWarningLabel,
+  tooltipEnabled
+}) {
+  const bidiCharactersAndTheirPositions = [];
+  doc.descendants((node, pos) => {
+    const isTextWithCodeMark = node.type.name === 'text' && node.marks && node.marks.some(mark => mark.type.name === 'code');
+
+    if (isTextWithCodeMark) {
+      codeBidiWarningDecorator(node.textContent, ({
+        bidiCharacter,
+        index
+      }) => {
+        bidiCharactersAndTheirPositions.push({
+          position: pos + index,
+          bidiCharacter
+        });
+      });
+      return false;
+    }
+
+    const isCodeBlock = node.type.name === 'codeBlock';
+
+    if (isCodeBlock) {
+      codeBidiWarningDecorator(node.textContent, ({
+        bidiCharacter,
+        index
+      }) => {
+        bidiCharactersAndTheirPositions.push({
+          position: pos + index + 1,
+          bidiCharacter
+        });
+      });
+    }
+  }); // Bidi characters are not expected to commonly appear in code snippets, so recreating the decoration set
+  // for documents rather than reusing existing decorations seems a reasonable performance/complexity tradeoff.
+
+  if (bidiCharactersAndTheirPositions.length === 0) {
+    return DecorationSet.empty;
+  }
+
+  const newBidiWarningsDecorationSet = DecorationSet.create(doc, bidiCharactersAndTheirPositions.map(({
+    position,
+    bidiCharacter
+  }) => {
+    return Decoration.widget(position, () => renderDOM({
+      bidiCharacter,
+      codeBidiWarningLabel,
+      tooltipEnabled
+    }));
+  }));
+  return newBidiWarningsDecorationSet;
+}
+
+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,
+    tooltipEnabled: tooltipEnabled
+  }), element);
+  return element;
+}

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

@@ -0,0 +1,3 @@
+export default ((pluginState, action) => {
+  return pluginState;
+});

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

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

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() {
@@ -22,7 +22,13 @@ const codeBlockPlugin = (options = {}) => ({
   pmPlugins() {
     return [{
       name: 'codeBlock',
-      plugin: () => createPlugin(options.useLongPressSelection)
+      plugin: ({
+        reactContext
+      }) => createPlugin({
+        useLongPressSelection: options.useLongPressSelection,
+        reactContext,
+        appearance: options.appearance
+      })
     }, {
       name: 'codeBlockIDEKeyBindings',
       plugin: () => ideUX

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

@@ -28,7 +28,7 @@ const toDOM = node => ['div', {
 }]]];
 
 export class CodeBlockView {
-  constructor(_node, view, getPos) {
+  constructor(_node, view, getPos, codeBidiWarningOptions) {
     _defineProperty(this, "highlighting", null);
 
     _defineProperty(this, "highlighter", null);
@@ -57,6 +57,7 @@ export class CodeBlockView {
       dom,
       contentDOM
     } = DOMSerializer.renderSpec(document, toDOM(_node));
+    this.codeBidiWarningOptions = codeBidiWarningOptions;
     this.getPos = getPos;
     this.view = view;
     this.node = _node;
@@ -99,7 +100,10 @@ export class CodeBlockView {
     ReactDOM.render( /*#__PURE__*/React.createElement(CodeBlock, {
       text: node.textContent,
       language: node.attrs.language,
-      showLineNumbers: false
+      showLineNumbers: false,
+      codeBidiWarnings: this.codeBidiWarningOptions.enabled,
+      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');
@@ -130,8 +134,19 @@ export class CodeBlockView {
   ignoreMutation(record) {
     var _this$highlighting$co, _this$highlighting;
 
-    return record.target === this.lineNumberGutter || record.target.parentNode === this.lineNumberGutter || ((_this$highlighting$co = (_this$highlighting = this.highlighting) === null || _this$highlighting === void 0 ? void 0 : _this$highlighting.contains(record.target)) !== null && _this$highlighting$co !== void 0 ? _this$highlighting$co : false);
+    const lineNumberChanges = record.target === this.lineNumberGutter || record.target.parentNode === this.lineNumberGutter;
+    const outsideTheCodeBlockChanges = (_this$highlighting$co = (_this$highlighting = this.highlighting) === null || _this$highlighting === void 0 ? void 0 : _this$highlighting.contains(record.target)) !== null && _this$highlighting$co !== void 0 ? _this$highlighting$co : false;
+    const codeBidiWarningDecorationChanges = record.type === 'attributes' && record.attributeName === 'aria-describedby';
+    return lineNumberChanges || outsideTheCodeBlockChanges || codeBidiWarningDecorationChanges;
   }
 
 }
-export const highlightingCodeBlockNodeView = () => (node, view, getPos) => new CodeBlockView(node, view, getPos);
+export const highlightingCodeBlockNodeView = ({
+  codeBidiWarnings,
+  codeBidiWarningLabel,
+  codeBidiWarningTooltipEnabled
+}) => (node, view, getPos) => new CodeBlockView(node, view, getPos, {
+  label: codeBidiWarningLabel,
+  enabled: codeBidiWarnings,
+  tooltipEnabled: codeBidiWarningTooltipEnabled
+});

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

@@ -1,4 +1,5 @@
 import { Plugin, NodeSelection } from 'prosemirror-state';
+import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { codeBlockNodeView } from '../nodeviews/code-block';
 import { highlightingCodeBlockNodeView } from '../nodeviews/highlighting-code-block';
 import { createSelectionClickHandler } from '../../selection/utils';
@@ -7,51 +8,69 @@ import { ACTIONS } from './actions';
 import { findCodeBlock } from '../utils';
 import { codeBlockClassNames } from '../ui/class-names';
 import { getFeatureFlags } from '../../feature-flags-context';
-export const createPlugin = (useLongPressSelection = false) => new Plugin({
-  state: {
-    init(_, state) {
-      const node = findCodeBlock(state, state.selection);
-      return {
-        pos: node ? node.pos : null,
-        contentCopied: false,
-        isNodeSelected: false
-      };
-    },
-
-    apply(tr, pluginState, _oldState, newState) {
-      if (tr.docChanged || tr.selectionSet) {
-        const node = findCodeBlock(newState, tr.selection);
-        const newPluginState = { ...pluginState,
+export const createPlugin = ({
+  useLongPressSelection = false,
+  reactContext,
+  appearance
+}) => {
+  const intl = reactContext().intl;
+  const codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
+  return new Plugin({
+    state: {
+      init(_, state) {
+        const node = findCodeBlock(state, state.selection);
+        return {
           pos: node ? node.pos : null,
-          isNodeSelected: tr.selection instanceof NodeSelection
+          contentCopied: false,
+          isNodeSelected: false
         };
-        return newPluginState;
-      }
+      },
 
-      const meta = tr.getMeta(pluginKey);
+      apply(tr, pluginState, _oldState, newState) {
+        if (tr.docChanged || tr.selectionSet) {
+          const node = findCodeBlock(newState, tr.selection);
+          const newPluginState = { ...pluginState,
+            pos: node ? node.pos : null,
+            isNodeSelected: tr.selection instanceof NodeSelection
+          };
+          return newPluginState;
+        }
 
-      if ((meta === null || meta === void 0 ? void 0 : meta.type) === ACTIONS.SET_COPIED_TO_CLIPBOARD) {
-        return { ...pluginState,
-          contentCopied: meta.data
-        };
-      }
+        const meta = tr.getMeta(pluginKey);
 
-      return pluginState;
-    }
+        if ((meta === null || meta === void 0 ? void 0 : meta.type) === ACTIONS.SET_COPIED_TO_CLIPBOARD) {
+          return { ...pluginState,
+            contentCopied: meta.data
+          };
+        }
 
-  },
-  key: pluginKey,
-  props: {
-    nodeViews: {
-      codeBlock(node, view, getPos) {
-        const featureFlags = getFeatureFlags(view.state);
-        const createCodeBlockNodeView = featureFlags !== null && featureFlags !== void 0 && featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockNodeView() : codeBlockNodeView();
-        return createCodeBlockNodeView(node, view, getPos);
+        return pluginState;
       }
 
     },
-    handleClickOn: createSelectionClickHandler(['codeBlock'], target => !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
-      useLongPressSelection
-    })
-  }
-});
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        codeBlock(node, view, getPos) {
+          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,
+            codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+          }) : codeBlockNodeView();
+          return createCodeBlockNodeView(node, view, getPos);
+        }
+
+      },
+      handleClickOn: createSelectionClickHandler(['codeBlock'], target => !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
+        useLongPressSelection
+      })
+    }
+  });
+};

package/dist/es2019/plugins/feature-flags-context/feature-flags-from-props.js

@@ -6,7 +6,7 @@ import { browser } from '@atlaskit/editor-common';
  */
 
 export function createFeatureFlagsFromProps(props) {
-  var _props$allowTextColor, _props$performanceTra, _props$performanceTra2, _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$allowTables, _props$featureFlags4, _props$featureFlags5, _props$allowTables2, _props$featureFlags6, _props$featureFlags7, _props$allowTables3, _props$featureFlags8, _props$featureFlags9, _props$allowTables4, _props$featureFlags10, _props$featureFlags11, _props$allowTables5, _props$allowExtension, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27;
+  var _props$allowTextColor, _props$performanceTra, _props$performanceTra2, _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$allowTables, _props$featureFlags4, _props$featureFlags5, _props$allowTables2, _props$featureFlags6, _props$featureFlags7, _props$allowTables3, _props$featureFlags8, _props$featureFlags9, _props$allowTables4, _props$featureFlags10, _props$featureFlags11, _props$allowTables5, _props$allowExtension, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29;
 
   const normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
   return { ...normalizedFeatureFlags,
@@ -36,6 +36,7 @@ export function createFeatureFlagsFromProps(props) {
     enableViewUpdateSubscription: Boolean(typeof ((_props$featureFlags22 = props.featureFlags) === null || _props$featureFlags22 === void 0 ? void 0 : _props$featureFlags22.enableViewUpdateSubscription) === 'boolean' ? !!((_props$featureFlags23 = props.featureFlags) !== null && _props$featureFlags23 !== void 0 && _props$featureFlags23.enableViewUpdateSubscription) : false),
     collabAvatarScroll: Boolean(typeof ((_props$featureFlags24 = props.featureFlags) === null || _props$featureFlags24 === void 0 ? void 0 : _props$featureFlags24.collabAvatarScroll) === 'boolean' ? !!((_props$featureFlags25 = props.featureFlags) !== null && _props$featureFlags25 !== void 0 && _props$featureFlags25.collabAvatarScroll) : false),
     ufo: Boolean(typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26.ufo) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27.ufo) : false),
-    codeBlockSyntaxHighlighting: Boolean(typeof normalizedFeatureFlags.codeBlockSyntaxHighlighting === 'boolean' ? !!normalizedFeatureFlags.codeBlockSyntaxHighlighting && !browser.safari : false)
+    codeBlockSyntaxHighlighting: Boolean(typeof normalizedFeatureFlags.codeBlockSyntaxHighlighting === 'boolean' ? !!normalizedFeatureFlags.codeBlockSyntaxHighlighting && !browser.safari : false),
+    codeBidiWarnings: Boolean(typeof ((_props$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28.codeBidiWarnings) === 'boolean' ? !!((_props$featureFlags29 = props.featureFlags) !== null && _props$featureFlags29 !== void 0 && _props$featureFlags29.codeBidiWarnings) : true)
   };
 }

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/index.js

@@ -60,4 +60,5 @@ export { default as mobileSelectionPlugin } from './mobile-selection';
 export { default as clipboardPlugin } from './clipboard';
 export { default as undoRedoPlugin } from './undo-redo';
 export { default as avatarGroupPlugin } from './avatar-group';
-export { default as viewUpdateSubscriptionPlugin } from './view-update-subscription';
+export { default as viewUpdateSubscriptionPlugin } from './view-update-subscription';
+export { default as codeBidiWarningPlugin } from './code-bidi-warning';

package/dist/es2019/plugins/rank.js

@@ -6,7 +6,7 @@ export default {
   // https://product-fabric.atlassian.net/wiki/spaces/E/pages/1113098008/Selection+Guide#Special-Cases
   'expandKeymap', 'tableSelectionKeymap', 'tableKeymap', 'captionKeymap', // selection keymap needs to be above gap cursor keymap so it can set node selections from
   // left/right arrows
-  'selectionKeymap', 'gapCursorKeymap', 'gapCursor', 'syncUrlText', 'fakeCursorToolbarPlugin', 'hyperLink', 'table', 'tableDecorations', 'hyperlinkInputRule', 'tablePMColResizing', 'hyperlinkKeymap', 'tableColResizing', 'undoRedoKeyMap', 'blockTypeKeyMap', 'tableEditing', 'filterStepsPlugin', 'pmCollab', 'collab', 'ruleInputRule', 'ruleKeymap', 'panel', 'media', 'mediaKeymap', 'mediaSingleKeymap', 'mediaEditor', 'unsupportedContent', 'jiraIssue', 'fakeTextCursor', 'helpDialog', 'helpDialogKeymap', 'macro', 'expand', 'extension', 'layout', 'contextPanel', 'floatingToolbar', 'clearMarksOnChange', 'reactNodeView', 'history', 'undoRedoPlugin', 'codeBlockIndent', 'placeholder', 'width', 'maxContentSize', 'multilineContent', 'grid', 'mobileDimensions', 'scrollGutterPlugin', 'analytics', 'findReplace', 'selection', 'avatarGroup', 'viewUpdateSubscription'],
+  'selectionKeymap', 'gapCursorKeymap', 'gapCursor', 'syncUrlText', 'fakeCursorToolbarPlugin', 'hyperLink', 'table', 'tableDecorations', 'hyperlinkInputRule', 'tablePMColResizing', 'hyperlinkKeymap', 'tableColResizing', 'undoRedoKeyMap', 'blockTypeKeyMap', 'tableEditing', 'filterStepsPlugin', 'pmCollab', 'collab', 'ruleInputRule', 'ruleKeymap', 'panel', 'media', 'mediaKeymap', 'mediaSingleKeymap', 'mediaEditor', 'unsupportedContent', 'jiraIssue', 'fakeTextCursor', 'helpDialog', 'helpDialogKeymap', 'macro', 'expand', 'extension', 'layout', 'contextPanel', 'floatingToolbar', 'clearMarksOnChange', 'reactNodeView', 'history', 'undoRedoPlugin', 'codeBlockIndent', 'placeholder', 'width', 'maxContentSize', 'multilineContent', 'grid', 'mobileDimensions', 'scrollGutterPlugin', 'analytics', 'findReplace', 'selection', 'avatarGroup', 'viewUpdateSubscription', 'inlineCode'],
   nodes: ['doc', 'paragraph', 'text', 'bulletList', 'orderedList', 'listItem', 'heading', 'blockquote', 'codeBlock', 'rule', 'panel', 'mention', 'confluenceUnsupportedBlock', 'confluenceUnsupportedInline', 'unsupportedBlock', 'unsupportedInline', 'confluenceJiraIssue', 'hardBreak', 'emoji', 'placeholder', 'mediaSingle', 'mediaGroup', 'table', 'expand', 'nestedExpand', 'media', 'tableHeader', 'decisionList', 'tableRow', 'decisionItem', 'tableCell', 'taskList', 'taskItem', 'extension', 'bodiedExtension', 'inlineExtension', 'layoutSection', 'layoutColumn', 'inlineCard', 'blockCard', 'embedCard'],
   marks: [// Inline marks
   'link', 'em', 'strong', 'textColor', 'strike', 'subsup', 'underline', 'code', 'typeAheadQuery', // Block marks

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.0.0";
+export const version = "151.2.0";
 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.0.0",
+	"version": "151.2.0",
 	"sideEffects": false
 }

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

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tablesPlugin, tasksAndDecisionsPlugin, textColorPlugin, cardPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, analyticsPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin } from '../plugins';
+import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tablesPlugin, tasksAndDecisionsPlugin, textColorPlugin, cardPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, analyticsPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, codeBidiWarningPlugin } from '../plugins';
 import { isFullPage as fullPageCheck } from '../utils/is-full-page';
 import { GUTTER_SIZE_MOBILE_IN_PX } from '../plugins/base/pm-plugins/scroll-gutter';
 import { createFeatureFlagsFromProps } from '../plugins/feature-flags-context/feature-flags-from-props';
@@ -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
     })
   };
 }
@@ -393,6 +394,12 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
     preset.add([viewUpdateSubscriptionPlugin]);
   }
 
+  if (featureFlags.codeBidiWarnings) {
+    preset.add([codeBidiWarningPlugin, {
+      appearance: props.appearance
+    }]);
+  }
+
   var excludes = new Set();
 
   if (!isCodeBlockAllowed({

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

@@ -0,0 +1,20 @@
+import { createPlugin } from './pm-plugins/main';
+
+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, {
+            appearance: appearance
+          });
+        }
+      }];
+    }
+  };
+};
+
+export default codeBidiWarning;

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

@@ -0,0 +1,2 @@
+import { PluginKey } from 'prosemirror-state';
+export var codeBidiWarningPluginKey = new PluginKey('codeBidiWarningPlugin');

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

@@ -0,0 +1,39 @@
+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, _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,
+          tooltipEnabled: tooltipEnabled
+        }),
+        codeBidiWarningLabel: codeBidiWarningLabel,
+        tooltipEnabled: tooltipEnabled
+      };
+    }),
+    props: {
+      decorations: function decorations(state) {
+        var _getPluginState = getPluginState(state),
+            decorationSet = _getPluginState.decorationSet;
+
+        return decorationSet;
+      }
+    }
+  });
+};

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

@@ -0,0 +1,106 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import CodeBidiWarning from '@atlaskit/code/bidi-warning';
+import codeBidiWarningDecorator from '@atlaskit/code/bidi-warning-decorator';
+import { pluginFactory } from '../../../utils/plugin-state-factory';
+import { stepHasSlice } from '../../../utils/step';
+import { codeBidiWarningPluginKey } from '../plugin-key';
+import reducer from './reducer';
+
+var _pluginFactory = pluginFactory(codeBidiWarningPluginKey, reducer, {
+  onDocChanged: function onDocChanged(tr, pluginState) {
+    if (!tr.steps.find(stepHasSlice)) {
+      return pluginState;
+    }
+
+    var newBidiWarningsDecorationSet = createBidiWarningsDecorationSetFromDoc({
+      doc: tr.doc,
+      codeBidiWarningLabel: pluginState.codeBidiWarningLabel,
+      tooltipEnabled: pluginState.tooltipEnabled
+    });
+    return _objectSpread(_objectSpread({}, pluginState), {}, {
+      decorationSet: newBidiWarningsDecorationSet
+    });
+  }
+}),
+    createPluginState = _pluginFactory.createPluginState,
+    getPluginState = _pluginFactory.getPluginState;
+
+export { createPluginState, getPluginState };
+export function createBidiWarningsDecorationSetFromDoc(_ref) {
+  var doc = _ref.doc,
+      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) {
+      return mark.type.name === 'code';
+    });
+
+    if (isTextWithCodeMark) {
+      codeBidiWarningDecorator(node.textContent, function (_ref2) {
+        var bidiCharacter = _ref2.bidiCharacter,
+            index = _ref2.index;
+        bidiCharactersAndTheirPositions.push({
+          position: pos + index,
+          bidiCharacter: bidiCharacter
+        });
+      });
+      return false;
+    }
+
+    var isCodeBlock = node.type.name === 'codeBlock';
+
+    if (isCodeBlock) {
+      codeBidiWarningDecorator(node.textContent, function (_ref3) {
+        var bidiCharacter = _ref3.bidiCharacter,
+            index = _ref3.index;
+        bidiCharactersAndTheirPositions.push({
+          position: pos + index + 1,
+          bidiCharacter: bidiCharacter
+        });
+      });
+    }
+  }); // Bidi characters are not expected to commonly appear in code snippets, so recreating the decoration set
+  // for documents rather than reusing existing decorations seems a reasonable performance/complexity tradeoff.
+
+  if (bidiCharactersAndTheirPositions.length === 0) {
+    return DecorationSet.empty;
+  }
+
+  var newBidiWarningsDecorationSet = DecorationSet.create(doc, bidiCharactersAndTheirPositions.map(function (_ref4) {
+    var position = _ref4.position,
+        bidiCharacter = _ref4.bidiCharacter;
+    return Decoration.widget(position, function () {
+      return renderDOM({
+        bidiCharacter: bidiCharacter,
+        codeBidiWarningLabel: codeBidiWarningLabel,
+        tooltipEnabled: tooltipEnabled
+      });
+    });
+  }));
+  return newBidiWarningsDecorationSet;
+}
+
+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,
+    tooltipEnabled: tooltipEnabled
+  }), element);
+  return element;
+}

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

@@ -0,0 +1,3 @@
+export default (function (pluginState, action) {
+  return pluginState;
+});

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

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