@atlaskit/editor-core 151.1.2 → 151.3.1

package/dist/cjs/ui/ConfigPanel/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isValidHex = exports.getNameFromDuplicateField = exports.isDuplicateField = exports.getSafeParentedName = exports.getOptionFromValue = exports.validateRequired = exports.toEntries = exports.fromEntries = exports.validate = void 0;
+exports.isValidHex = exports.getNameFromDuplicateField = exports.isDuplicateField = exports.getSafeParentedName = exports.getOptionFromValue = exports.validateRequired = exports.fromEntries = exports.validate = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -32,14 +32,6 @@ var fromEntries = function fromEntries(iterable) {
 
 exports.fromEntries = fromEntries;
 
-var toEntries = function toEntries(parameters) {
-  return Array.isArray(parameters) ? parameters.reduce(function (prev, curr) {
-    return [].concat((0, _toConsumableArray2.default)(prev), (0, _toConsumableArray2.default)(Object.entries(curr)));
-  }, []) : Object.entries(parameters);
-};
-
-exports.toEntries = toEntries;
-
 var isEmptyString = function isEmptyString(value) {
   return typeof value === 'string' && value === '';
 };
@@ -104,7 +96,7 @@ exports.isDuplicateField = isDuplicateField;
 var getNameFromDuplicateField = function getNameFromDuplicateField(key) {
   return key.replace(duplicateFieldRegex, '');
 };
-/* 
+/*
     ColorPickerButton only accepts 8 digit hex alpha values, for example:
     #123fffaa (8 digits, hex alpha)
     */

package/dist/cjs/ui/DropdownMenu/index.js

@@ -134,6 +134,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         key: item.key || item.content,
         isSelected: item.isActive
       }, /*#__PURE__*/_react.default.createElement(_item.default, {
+        role: "menuitem",
         elemBefore: item.elemBefore,
         elemAfter: item.elemAfter,
         isDisabled: item.isDisabled,
@@ -212,7 +213,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         }
       }), items.map(function (group, index) {
         return /*#__PURE__*/_react.default.createElement(_item.ItemGroup, {
-          key: index
+          key: index,
+          role: "menu"
         }, group.items.map(function (item) {
           return _this2.renderItem(item);
         }));

package/dist/cjs/ui/LinkSearch/LinkSearchListItem.js

@@ -63,7 +63,7 @@ var Name = _styledComponents.default.div(_templateObject3 || (_templateObject3 =
 
 exports.Name = Name;
 
-var ContainerName = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), _colors.N100, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _theme.fontSizeSmall)()));
+var ContainerName = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), _colors.N300, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _theme.fontSizeSmall)()));
 
 exports.ContainerName = ContainerName;
 

package/dist/cjs/ui/Resizer/index.js

@@ -185,6 +185,7 @@ var Resizer = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var handleStyles = {};
       var handles = {};
+      var handleComponent = {};
       var _this$props4 = this.props,
           _this$props4$innerPad = _this$props4.innerPadding,
           innerPadding = _this$props4$innerPad === void 0 ? 0 : _this$props4$innerPad,
@@ -194,7 +195,8 @@ var Resizer = /*#__PURE__*/function (_React$Component) {
           layout = _this$props4.layout,
           enable = _this$props4.enable,
           children = _this$props4.children,
-          ratio = _this$props4.ratio;
+          ratio = _this$props4.ratio,
+          handleComponentFunc = _this$props4.handleComponentFunc;
       var isResizing = this.state.isResizing;
 
       _utils.handleSides.forEach(function (side) {
@@ -204,6 +206,11 @@ var Resizer = /*#__PURE__*/function (_React$Component) {
         handleStyles[side] = (_handleStyles$side = {
           width: '24px'
         }, (0, _defineProperty2.default)(_handleStyles$side, side, "".concat(-13 - innerPadding, "px")), (0, _defineProperty2.default)(_handleStyles$side, "zIndex", _editorSharedStyles.akRichMediaResizeZIndex), (0, _defineProperty2.default)(_handleStyles$side, "pointerEvents", 'auto'), _handleStyles$side);
+        var sideHandleComponent = handleComponentFunc && handleComponentFunc(side);
+
+        if (sideHandleComponent) {
+          handleComponent[side] = sideHandleComponent;
+        }
       });
 
       var className = (0, _classnames.default)(_editorCommon.richMediaClassName, "image-".concat(layout), this.props.className, {
@@ -237,6 +244,7 @@ var Resizer = /*#__PURE__*/function (_React$Component) {
         handleClasses: handles,
         handleStyles: handleStyles,
         handleWrapperStyle: handleWrapperStyle,
+        handleComponent: handleComponent,
         enable: enable,
         onResize: this.handleResize,
         onResizeStop: this.handleResizeStop,

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.nextMajorVersion = exports.version = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "151.1.2";
+var version = "151.3.1";
 exports.version = version;
 
 var nextMajorVersion = function nextMajorVersion() {

package/dist/cjs/version.json

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

package/dist/es2019/create-editor/ReactEditorView.js

@@ -471,8 +471,27 @@ export default class ReactEditorView extends React.Component {
           transformer: this.contentTransformer
         });
 
+        if (this.props.editorProps.shouldFocus && view.props.editable && view.props.editable(view.state)) {
+          this.focusTimeoutId = handleEditorFocus(view);
+        }
+
         if (this.featureFlags.ufo) {
+          this.experienceStore = ExperienceStore.getInstance(view);
+          this.experienceStore.start(EditorExperience.editSession);
+          this.experienceStore.addMetadata(EditorExperience.editSession, {
+            reliabilityInterval: RELIABILITY_INTERVAL
+          });
           this.reliabilityInterval = window.setInterval(() => {
+            var _this$experienceStore11, _this$experienceStore12;
+
+            (_this$experienceStore11 = this.experienceStore) === null || _this$experienceStore11 === void 0 ? void 0 : (_this$experienceStore12 = _this$experienceStore11.success(EditorExperience.editSession)) === null || _this$experienceStore12 === void 0 ? void 0 : _this$experienceStore12.finally(() => {
+              var _this$experienceStore13, _this$experienceStore14;
+
+              (_this$experienceStore13 = this.experienceStore) === null || _this$experienceStore13 === void 0 ? void 0 : _this$experienceStore13.start(EditorExperience.editSession);
+              (_this$experienceStore14 = this.experienceStore) === null || _this$experienceStore14 === void 0 ? void 0 : _this$experienceStore14.addMetadata(EditorExperience.editSession, {
+                reliabilityInterval: RELIABILITY_INTERVAL
+              });
+            });
             const reliabilityEvent = {
               action: ACTION.UFO_SESSION_COMPLETE,
               actionSubject: ACTION_SUBJECT.EDITOR,
@@ -483,14 +502,6 @@ export default class ReactEditorView extends React.Component {
             };
             this.dispatchAnalyticsEvent(reliabilityEvent);
           }, RELIABILITY_INTERVAL);
-        }
-
-        if (this.props.editorProps.shouldFocus && view.props.editable && view.props.editable(view.state)) {
-          this.focusTimeoutId = handleEditorFocus(view);
-        }
-
-        if (this.featureFlags.ufo) {
-          this.experienceStore = ExperienceStore.getInstance(view);
         } // Force React to re-render so consumers get a reference to the editor view
 
 

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

@@ -1,4 +1,4 @@
-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 { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, 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, beforePrimaryToolbarPlugin, 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';
@@ -87,7 +87,8 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
     },
     cardOptions: props.smartLinks || props.UNSAFE_cards,
     codeBlock: { ...props.codeBlock,
-      useLongPressSelection: false
+      useLongPressSelection: false,
+      appearance: props.appearance
     }
   };
 }
@@ -99,8 +100,6 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
  */
 
 export default function createPluginsList(props, prevProps, createAnalyticsEvent) {
-  var _props$featureFlags;
-
   const appearance = props.appearance;
   const isMobile = appearance === 'mobile';
   const isComment = appearance === 'comment';
@@ -272,8 +271,8 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
   if (props.allowPanel) {
     preset.add([panelPlugin, {
       useLongPressSelection: false,
-      UNSAFE_allowCustomPanel: props.allowPanel.UNSAFE_allowCustomPanel,
-      UNSAFE_allowCustomPanelEdit: props.allowPanel.UNSAFE_allowCustomPanelEdit
+      allowCustomPanel: props.allowPanel.allowCustomPanel,
+      allowCustomPanelEdit: props.allowPanel.allowCustomPanelEdit
     }]);
   }
 
@@ -371,26 +370,46 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
     replacePlusMenuWithElementBrowser: props.elementBrowser && props.elementBrowser.replacePlusMenu || false
   }]);
 
-  if (((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.showAvatarGroupAsPlugin) === true) {
+  const hasBeforePrimaryToolbar = components => {
+    if (components && 'before' in components) {
+      return !!components.before;
+    }
+
+    return false;
+  };
+
+  if (hasBeforePrimaryToolbar(props.primaryToolbarComponents) && !featureFlags.twoLineEditorToolbar) {
+    preset.add([beforePrimaryToolbarPlugin, {
+      beforePrimaryToolbarComponents: props.primaryToolbarComponents.before
+    }]);
+  }
+
+  if (featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar) {
     preset.add([avatarGroupPlugin, {
-      collabEdit: props.collabEdit
+      collabEdit: props.collabEdit,
+      takeFullWidth: !hasBeforePrimaryToolbar(props.primaryToolbarComponents)
     }]);
   }
 
   if (props.allowFindReplace) {
-    var _props$featureFlags2;
-
     preset.add([findReplacePlugin, {
-      takeFullWidth: !!((_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.showAvatarGroupAsPlugin) === false
+      takeFullWidth: !!featureFlags.showAvatarGroupAsPlugin === false && !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
+      twoLineEditorToolbar: !!featureFlags.twoLineEditorToolbar
     }]);
   }
 
+  if (props.UNSAFE_allowFragmentMark) {
+    preset.add(fragmentMarkPlugin);
+  }
+
   if (featureFlags.enableViewUpdateSubscription) {
     preset.add([viewUpdateSubscriptionPlugin]);
   }
 
   if (featureFlags.codeBidiWarnings) {
-    preset.add(codeBidiWarningPlugin);
+    preset.add([codeBidiWarningPlugin, {
+      appearance: props.appearance
+    }]);
   }
 
   const excludes = new Set();

package/dist/es2019/labs/next/presets/cxhtml.js

@@ -26,8 +26,7 @@ export function useCXHTMLPreset({
     }
   }]);
   preset.add([panelPlugin, {
-    UNSAFE_allowCustomPanel: true,
-    UNSAFE_allowCustomPanelEdit: true
+    allowCustomPanel: true
   }]);
   preset.add(listPlugin);
   preset.add(textColorPlugin);

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

@@ -62,7 +62,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/es2019/nodeviews/ReactNodeView.js

@@ -148,7 +148,7 @@ export default class ReactNodeView {
     }, props)) : null;
   }
 
-  update(node, _decorations, validUpdate = () => true) {
+  update(node, _decorations, _innerDecorations, validUpdate = () => true) {
     // @see https://github.com/ProseMirror/prosemirror/issues/648
     const isValidUpdate = this.node.type === node.type && validUpdate(this.node, node);
 

package/dist/es2019/nodeviews/SelectionBasedNodeView.js

@@ -80,6 +80,17 @@ export class SelectionBasedNodeView extends ReactNodeView {
       return this.isSelectedNode(this.view.state.selection) || this.isSelectionInsideNode(from, to);
     });
 
+    _defineProperty(this, "nodeInsideSelection", () => {
+      const {
+        selection
+      } = this.view.state;
+      const {
+        from,
+        to
+      } = selection;
+      return this.isSelectedNode(selection) || this.isNodeInsideSelection(from, to);
+    });
+
     _defineProperty(this, "onSelectionChange", () => {
       this.update(this.node, []);
     });

package/dist/es2019/plugins/analytics/types/enums.js

@@ -55,6 +55,7 @@ export let ACTION;
   ACTION["INITIALISED"] = "initialised";
   ACTION["INPUT_PERF_SAMPLING"] = "inputPerfSampling";
   ACTION["INSERTED"] = "inserted";
+  ACTION["INVALID_DOCUMENT_ENCOUNTERED"] = "invalidDocumentEncountered";
   ACTION["INVOKED"] = "invoked";
   ACTION["LANGUAGE_SELECTED"] = "languageSelected";
   ACTION["LIST_ITEM_JOINED"] = "listItemJoined";

package/dist/es2019/plugins/annotation/utils.js

@@ -254,7 +254,7 @@ export const isSelectionValid = state => {
     return AnnotationSelectionType.DISABLED;
   }
 
-  if (disallowOnWhitespace && hasWhitespaceNode(selection)) {
+  if (disallowOnWhitespace && hasInvalidWhitespaceNode(selection)) {
     return AnnotationSelectionType.INVALID;
   }
 
@@ -307,16 +307,27 @@ function isEmptyTextSelection(selection, schema) {
  */
 
 
-export function hasWhitespaceNode(selection) {
-  let foundWhitespace = false;
-  selection.content().content.descendants(node => {
+export function hasInvalidWhitespaceNode(selection) {
+  let foundInvalidWhitespace = false;
+  const content = selection.content().content;
+  content.descendants(node => {
     if (node.textContent.trim() === '') {
-      foundWhitespace = true;
+      // Trailing new lines do not result in the annotation spanning into
+      // the trailing new line so can be ignored when looking for invalid
+      // whitespace nodes.
+      const nodeIsTrailingNewLine = // it is the final node
+      node.eq(content.lastChild) && // and there are multiple nodes
+      !node.eq(content.firstChild) && // and it is a paragraph node
+      node.type.name === 'paragraph';
+
+      if (!nodeIsTrailingNewLine) {
+        foundInvalidWhitespace = true;
+      }
     }
 
-    return !foundWhitespace;
+    return !foundInvalidWhitespace;
   });
-  return foundWhitespace;
+  return foundInvalidWhitespace;
 }
 /*
  * verifies if node contains annotation mark

package/dist/es2019/plugins/avatar-group/index.js

@@ -18,7 +18,8 @@ const avatarGroup = props => ({
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       editorView: editorView,
       eventDispatcher: eventDispatcher,
-      collabEdit: props.collabEdit
+      collabEdit: props.collabEdit,
+      takeFullWidth: props.takeFullWidth
     });
   }
 

package/dist/es2019/plugins/avatar-group/ui/AvatarGroupPluginWrapper.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../analytics';
 const ToolbarButtonWrapper = styled.div`
   display: flex;
-  flex-grow: 1;
+  flex-grow: ${props => props.takeFullWidth ? 1 : 0};
   justify-content: flex-end;
   align-items: center;
   & > div {
@@ -29,7 +29,8 @@ export const AvatarGroupPluginWrapper = props => {
   }, [dispatchAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(ToolbarButtonWrapper, {
     "aria-label": "Editors",
-    "data-testid": 'avatar-group-in-plugin'
+    "data-testid": 'avatar-group-in-plugin',
+    takeFullWidth: props.takeFullWidth
   }, /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
     editorView: props.editorView,
     eventDispatcher: props.eventDispatcher,

package/dist/es2019/plugins/before-primaryToolbar/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BeforePrimaryToolbarWrapper } from './ui/BeforePrimaryToolbarWrapper';
+
+const beforePrimaryToolbar = props => ({
+  name: 'beforePrimaryToolbar',
+
+  primaryToolbarComponent() {
+    return /*#__PURE__*/React.createElement(BeforePrimaryToolbarWrapper, {
+      beforePrimaryToolbarComponents: props.beforePrimaryToolbarComponents
+    });
+  }
+
+});
+
+export default beforePrimaryToolbar;

package/dist/es2019/plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+export const BeforePrimaryToolbarPluginWrapper = styled.div`
+  display: flex;
+  margin-right: 8px;
+  flex-grow: 1;
+  justify-content: flex-end;
+  align-items: center;
+`;
+export const BeforePrimaryToolbarWrapper = props => /*#__PURE__*/React.createElement(BeforePrimaryToolbarPluginWrapper, {
+  "data-testid": 'before-primary-toolbar-components-plugin'
+}, props.beforePrimaryToolbarComponents);

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

@@ -1,12 +1,18 @@
 import { createPlugin } from './pm-plugins/main';
 
-const codeBidiWarning = () => ({
+const codeBidiWarning = ({
+  appearance
+}) => ({
   name: 'codeBidiWarning',
 
   pmPlugins() {
     return [{
       name: 'codeBidiWarning',
-      plugin: options => createPlugin(options)
+      plugin: options => {
+        return createPlugin(options, {
+          appearance
+        });
+      }
     }];
   }
 

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

@@ -5,18 +5,28 @@ import { createBidiWarningsDecorationSetFromDoc, createPluginState, getPluginSta
 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
+          codeBidiWarningLabel,
+          tooltipEnabled
         }),
-        codeBidiWarningLabel
+        codeBidiWarningLabel,
+        tooltipEnabled
       };
     }),
     props: {

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/extension/extension-api.js

@@ -1,4 +1,5 @@
 import { Fragment, Mark } from 'prosemirror-model';
+import { NodeSelection } from 'prosemirror-state';
 import { insertMacroFromMacroBrowser } from '../macro';
 import { pluginKey as macroPluginKey } from '../macro/plugin-key';
 import { setEditingContextToContextPanel } from './commands';
@@ -41,7 +42,7 @@ const extensionAPICallPayload = functionName => ({
 
 export const createExtensionAPI = options => {
   const doc = {
-    insertAfter: (localId, adf) => {
+    insertAfter: (localId, adf, opt) => {
       const {
         editorView
       } = options;
@@ -86,7 +87,8 @@ export const createExtensionAPI = options => {
         throw new Error('insertAfter(): Could not create a node for given ADFEntity.');
       }
 
-      tr.insert(nodePos.pos + nodePos.node.nodeSize, newNode); // Validate if the document is valid at this point
+      const insertPosition = nodePos.pos + nodePos.node.nodeSize;
+      tr.insert(insertPosition, newNode); // Validate if the document is valid at this point
 
       try {
         tr.doc.check();
@@ -129,6 +131,11 @@ export const createExtensionAPI = options => {
         };
         addAnalytics(state, tr, payload);
       });
+
+      if (opt && opt.allowSelectionToNewNode) {
+        tr.setSelection(new NodeSelection(tr.doc.resolve(insertPosition)));
+      }
+
       dispatch(tr);
     },
     scrollTo: localId => {

package/dist/es2019/plugins/extension/ui/styles.js

@@ -32,4 +32,10 @@ export const extensionStyles = css`
   .extensionView-content-wrap .extension-container {
     overflow: hidden;
   }
+
+  .bodiedExtensionView-content-wrap
+    .extensionView-content-wrap
+    .extension-container {
+    width: 100%;
+  }
 `;