@atlaskit/editor-core 187.9.0 → 187.9.2

package/dist/es2019/plugins/extension/pm-plugins/main.js

@@ -1,4 +1,7 @@
+import { TextSelection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfTypeClosestToPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { isSelectionAtStartOfNode, isSelectionAtEndOfNode } from '@atlaskit/editor-common/selection';
 import { createSelectionClickHandler } from '../../selection/utils';
 import ExtensionNodeView from '../nodeviews/extension';
 import { updateState, clearEditingContext } from '../commands';
@@ -163,6 +166,53 @@ const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProvid
     },
     key: pluginKey,
     props: {
+      handleDOMEvents: {
+        /**
+         * ED-18072 - Cannot shift + arrow past bodied extension if it is not empty.
+         * This code is to handle the case where the selection starts inside or on the node and the user is trying to shift + arrow.
+         * For other part of the solution see code in: packages/editor/editor-core/src/plugins/selection/pm-plugins/events/keydown.ts
+         */
+        keydown: (view, event) => {
+          if (event instanceof KeyboardEvent && event.shiftKey && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+            const {
+              schema,
+              selection,
+              selection: {
+                $head
+              },
+              doc,
+              tr
+            } = view.state;
+            const {
+              bodiedExtension
+            } = schema.nodes;
+            if (selection instanceof TextSelection || selection instanceof NodeSelection) {
+              const maybeBodiedExtension = selection instanceof TextSelection ? findParentNodeOfTypeClosestToPos($head, bodiedExtension) : findSelectedNodeOfType(bodiedExtension)(selection);
+              if (maybeBodiedExtension) {
+                const end = maybeBodiedExtension.pos + maybeBodiedExtension.node.nodeSize;
+                if (event.key === 'ArrowUp' || event.key === 'ArrowLeft' && isSelectionAtStartOfNode($head, maybeBodiedExtension)) {
+                  const anchor = end + 1;
+
+                  // an offset is used here so that left arrow selects the first character before the node (consistent with arrow right)
+                  const headOffset = event.key === 'ArrowLeft' ? -1 : 0;
+                  const head = maybeBodiedExtension.pos + headOffset;
+                  const newSelection = TextSelection.create(doc, Math.max(anchor, selection.anchor), head);
+                  view.dispatch(tr.setSelection(newSelection));
+                  return true;
+                }
+                if (event.key === 'ArrowDown' || event.key === 'ArrowRight' && isSelectionAtEndOfNode($head, maybeBodiedExtension)) {
+                  const anchor = maybeBodiedExtension.pos - 1;
+                  const head = end + 1;
+                  const newSelection = TextSelection.create(doc, Math.min(anchor, selection.anchor), head);
+                  view.dispatch(tr.setSelection(newSelection));
+                  return true;
+                }
+              }
+            }
+          }
+          return false;
+        }
+      },
       nodeViews: {
         // WARNING: referentiality-plugin also creates these nodeviews
         extension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -290,7 +290,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
     });
     _defineProperty(this, "handleSelectedEmoji", emojiId => {
       this.props.editorView.focus();
-      insertEmoji(emojiId, INPUT_METHOD.PICKER)(this.props.editorView.state, this.props.editorView.dispatch);
+      insertEmoji(this.editorAnalyticsAPI)(emojiId, INPUT_METHOD.PICKER)(this.props.editorView.state, this.props.editorView.dispatch);
       this.toggleEmojiPicker();
       return true;
     });

package/dist/es2019/plugins/selection/pm-plugins/events/keydown.js

@@ -1,36 +1,68 @@
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+
+/*
+ * The way expand was built, no browser reconize selection on it.
+ * For instance, when a selection going to a "collapsed" expand
+ * the browser will try to send the cursor to inside the expand content (wrong),
+ * this behavior is caused because the expand content is never true hidden
+ * we just set the height to 1px.
+ *
+ * So, we need to capture a possible selection event
+ * when a collapsed exxpand is the next node in the common depth.
+ * If that is true, we create a new TextSelection and stop the event bubble
+ */
 const isCollpasedExpand = node => {
   return Boolean(node && ['expand', 'nestedExpand'].includes(node.type.name) && !node.attrs.__expanded);
 };
-const findFixedProblematicNodePosition = ($pos, direction) => {
-  if ($pos.pos === 0 || $pos.depth === 0) {
+
+/**
+ * ED-18072 - Cannot shift + arrow past bodied extension if it is not empty
+ */
+const isBodiedExtension = node => {
+  return Boolean(node && ['bodiedExtension'].includes(node.type.name));
+};
+const isProblematicNode = node => {
+  return isCollpasedExpand(node) || isBodiedExtension(node);
+};
+const findFixedProblematicNodePosition = (doc, $head, direction) => {
+  if ($head.pos === 0 || $head.depth === 0) {
     return null;
   }
-  const pos = direction === 'up' ? $pos.before() : $pos.after();
-  const $posResolved = $pos.doc.resolve(pos);
-  const maybeExpandNode = direction === 'up' ? $posResolved.nodeBefore : $posResolved.nodeAfter;
-  if (maybeExpandNode && isCollpasedExpand(maybeExpandNode)) {
-    const nodeSize = maybeExpandNode.nodeSize;
-    const expandPosition = direction === 'up' ? pos - nodeSize : pos + nodeSize;
-    const startPosNode = Math.max(expandPosition, 0);
-    const $startPosNode = $pos.doc.resolve(Math.min(startPosNode, $pos.doc.content.size));
-    return $startPosNode;
+  if (direction === 'up') {
+    const pos = $head.before();
+    const $posResolved = $head.doc.resolve(pos);
+    const maybeProblematicNode = $posResolved.nodeBefore;
+    if (maybeProblematicNode && isProblematicNode(maybeProblematicNode)) {
+      const nodeSize = maybeProblematicNode.nodeSize;
+      const nodeStartPosition = pos - nodeSize;
+
+      // ($head.pos - 1) will correspond to (nodeStartPosition + nodeSize) when we are at the start of the text node
+      const isAtEndOfProblematicNode = $head.pos - 1 === nodeStartPosition + nodeSize;
+      if (isAtEndOfProblematicNode) {
+        const startPosNode = Math.max(nodeStartPosition, 0);
+        const $startPosNode = $head.doc.resolve(Math.min(startPosNode, $head.doc.content.size));
+        return $startPosNode;
+      }
+    }
+  }
+  if (direction === 'down') {
+    const pos = $head.after();
+    const maybeProblematicNode = doc.nodeAt(pos);
+    if (maybeProblematicNode && isProblematicNode(maybeProblematicNode) && $head.pos + 1 === pos) {
+      const nodeSize = maybeProblematicNode.nodeSize;
+      const nodePosition = pos + nodeSize;
+      const startPosNode = Math.max(nodePosition, 0);
+      const $startPosNode = $head.doc.resolve(Math.min(startPosNode, $head.doc.content.size));
+      return $startPosNode;
+    }
   }
   return null;
 };
 export const onKeydown = (view, event) => {
   /*
-   * This workaround is needed for some specific situation with collapsed expand.
-   *
-   * The way expand was built, no browser reconize selection on it.
-   * For instance, when a selection going to a "collapsed" expand
-   * the browser will try to send the cursor to inside the expand content (wrong),
-   * this behavior is caused because the expand content is never true hidden
-   * we just set the height to 1px.
-   *
-   * So, we need to capture a possible selection event
-   * when a collapsed exxpand is the next node in the common depth.
-   * If that is true, we create a new TextSelection and stop the event bubble
+   * This workaround is needed for some specific situations.
+   * - expand collapse
+   * - bodied extension
    */
   if (!(event instanceof KeyboardEvent)) {
     return false;
@@ -42,6 +74,7 @@ export const onKeydown = (view, event) => {
     return false;
   }
   const {
+    doc,
     selection: {
       $head,
       $anchor
@@ -51,9 +84,12 @@ export const onKeydown = (view, event) => {
     return false;
   }
   const direction = ['ArrowLeft', 'ArrowUp', 'Home'].includes(event.key) ? 'up' : 'down';
-  const $fixedProblematicNodePosition = findFixedProblematicNodePosition($head, direction);
+  const $fixedProblematicNodePosition = findFixedProblematicNodePosition(doc, $head, direction);
   if ($fixedProblematicNodePosition) {
-    const forcedTextSelection = TextSelection.create(view.state.doc, $anchor.pos, $fixedProblematicNodePosition.pos);
+    // an offset is used here so that left arrow selects the first character before the node (consistent with arrow right)
+    const headOffset = event.key === 'ArrowLeft' ? -1 : 0;
+    const head = $fixedProblematicNodePosition.pos + headOffset;
+    const forcedTextSelection = TextSelection.create(view.state.doc, $anchor.pos, head);
     const tr = view.state.tr;
     tr.setSelection(forcedTextSelection);
     view.dispatch(tr);

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.9.0";
+export const version = "187.9.2";
 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": "187.9.0",
+	"version": "187.9.2",
 	"sideEffects": false
 }

package/dist/esm/plugins/emoji/commands/insert-emoji.js

@@ -4,33 +4,35 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
-import { addAnalytics, EVENT_TYPE, ACTION_SUBJECT_ID, ACTION_SUBJECT, ACTION } from '../../analytics';
-export function insertEmoji(emojiId, inputMethod) {
-  return function (state, dispatch) {
-    var emoji = state.schema.nodes.emoji;
-    if (emoji && emojiId) {
-      var node = emoji.createChecked(_objectSpread(_objectSpread({}, emojiId), {}, {
-        text: emojiId.fallback || emojiId.shortName
-      }));
-      var textNode = state.schema.text(' ');
-      if (dispatch) {
-        var fragment = Fragment.fromArray([node, textNode]);
-        var tr = safeInsert(fragment)(state.tr);
-        if (inputMethod) {
-          addAnalytics(state, tr, {
-            action: ACTION.INSERTED,
-            actionSubject: ACTION_SUBJECT.DOCUMENT,
-            actionSubjectId: ACTION_SUBJECT_ID.EMOJI,
-            attributes: {
-              inputMethod: inputMethod
-            },
-            eventType: EVENT_TYPE.TRACK
-          });
+import { EVENT_TYPE, ACTION_SUBJECT_ID, ACTION_SUBJECT, ACTION } from '@atlaskit/editor-common/analytics';
+export var insertEmoji = function insertEmoji(editorAnalyticsAPI) {
+  return function (emojiId, inputMethod) {
+    return function (state, dispatch) {
+      var emoji = state.schema.nodes.emoji;
+      if (emoji && emojiId) {
+        var node = emoji.createChecked(_objectSpread(_objectSpread({}, emojiId), {}, {
+          text: emojiId.fallback || emojiId.shortName
+        }));
+        var textNode = state.schema.text(' ');
+        if (dispatch) {
+          var fragment = Fragment.fromArray([node, textNode]);
+          var tr = safeInsert(fragment)(state.tr);
+          if (inputMethod) {
+            editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+              action: ACTION.INSERTED,
+              actionSubject: ACTION_SUBJECT.DOCUMENT,
+              actionSubjectId: ACTION_SUBJECT_ID.EMOJI,
+              attributes: {
+                inputMethod: inputMethod
+              },
+              eventType: EVENT_TYPE.TRACK
+            })(tr);
+          }
+          dispatch(tr.setSelection(Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
         }
-        dispatch(tr.setSelection(Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
+        return true;
       }
-      return true;
-    }
-    return false;
+      return false;
+    };
   };
-}
+};

package/dist/esm/plugins/emoji/index.js

@@ -174,10 +174,11 @@ var emojiPlugin = function emojiPlugin(options, api) {
       }, {
         name: 'emojiAsciiInputRule',
         plugin: function plugin(_ref6) {
+          var _api$dependencies$ana8;
           var schema = _ref6.schema,
             providerFactory = _ref6.providerFactory,
             featureFlags = _ref6.featureFlags;
-          return asciiInputRulePlugin(schema, providerFactory, featureFlags);
+          return asciiInputRulePlugin(schema, providerFactory, featureFlags, api === null || api === void 0 ? void 0 : (_api$dependencies$ana8 = api.dependencies.analytics) === null || _api$dependencies$ana8 === void 0 ? void 0 : _api$dependencies$ana8.actions);
         }
       }];
     },
@@ -194,13 +195,13 @@ var emojiPlugin = function emojiPlugin(options, api) {
             return /*#__PURE__*/React.createElement(IconEmoji, null);
           },
           action: function action(insert, state) {
-            var _api$dependencies$ana8;
+            var _api$dependencies$ana9;
             var tr = insert(undefined);
             openTypeAheadAtCursor({
               triggerHandler: typeAhead,
               inputMethod: INPUT_METHOD.QUICK_INSERT
             })(tr);
-            api === null || api === void 0 ? void 0 : (_api$dependencies$ana8 = api.dependencies.analytics) === null || _api$dependencies$ana8 === void 0 ? void 0 : _api$dependencies$ana8.actions.attachAnalyticsEvent({
+            api === null || api === void 0 ? void 0 : (_api$dependencies$ana9 = api.dependencies.analytics) === null || _api$dependencies$ana9 === void 0 ? void 0 : _api$dependencies$ana9.actions.attachAnalyticsEvent({
               action: ACTION.INVOKED,
               actionSubject: ACTION_SUBJECT.TYPEAHEAD,
               actionSubjectId: ACTION_SUBJECT_ID.TYPEAHEAD_EMOJI,

package/dist/esm/plugins/emoji/pm-plugins/ascii-input-rules.js

@@ -10,12 +10,12 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { createRule, createPlugin } from '@atlaskit/prosemirror-input-rules';
 import { leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
-import { addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD, EVENT_TYPE } from '../../analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 var matcher;
-export function inputRulePlugin(schema, providerFactory, featureFlags) {
+export function inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI) {
   if (schema.nodes.emoji && providerFactory) {
     initMatcher(providerFactory);
-    var asciiEmojiRule = createRule(AsciiEmojiMatcher.REGEX, inputRuleHandler);
+    var asciiEmojiRule = createRule(AsciiEmojiMatcher.REGEX, inputRuleHandler(editorAnalyticsAPI));
     return createPlugin('emoji', [asciiEmojiRule]);
   }
   return;
@@ -33,17 +33,19 @@ function initMatcher(providerFactory) {
   };
   providerFactory.subscribe('emojiProvider', handleProvider);
 }
-function inputRuleHandler(state, matchParts, start, end) {
-  if (!matcher) {
+var inputRuleHandler = function inputRuleHandler(editorAnalyticsAPI) {
+  return function (state, matchParts, start, end) {
+    if (!matcher) {
+      return null;
+    }
+    var match = matcher.match(matchParts);
+    if (match) {
+      var transactionCreator = new AsciiEmojiTransactionCreator(state, match, start, end, editorAnalyticsAPI);
+      return transactionCreator.create();
+    }
     return null;
-  }
-  var match = matcher.match(matchParts);
-  if (match) {
-    var transactionCreator = new AsciiEmojiTransactionCreator(state, match, start, end);
-    return transactionCreator.create();
-  }
-  return null;
-}
+  };
+};
 var REGEX_LEADING_CAPTURE_INDEX = 1;
 var REGEX_EMOJI_LEADING_PARENTHESES = 2;
 var REGEX_EMOJI_ASCII_CAPTURE_INDEX = 3;
@@ -142,18 +144,20 @@ var RecordingAsciiEmojiMatcher = /*#__PURE__*/function (_AsciiEmojiMatcher) {
   return RecordingAsciiEmojiMatcher;
 }(AsciiEmojiMatcher);
 var AsciiEmojiTransactionCreator = /*#__PURE__*/function () {
-  function AsciiEmojiTransactionCreator(state, match, start, end) {
+  function AsciiEmojiTransactionCreator(state, match, start, end, editorAnalyticsAPI) {
     _classCallCheck(this, AsciiEmojiTransactionCreator);
     this.state = state;
     this.match = match;
     this.start = start;
     this.end = end;
+    this.editorAnalyticsAPI = editorAnalyticsAPI;
   }
   _createClass(AsciiEmojiTransactionCreator, [{
     key: "create",
     value: function create() {
+      var _this$editorAnalytics;
       var tr = this.state.tr.replaceWith(this.from, this.to, this.createNodes());
-      return addAnalytics(this.state, tr, {
+      (_this$editorAnalytics = this.editorAnalyticsAPI) === null || _this$editorAnalytics === void 0 ? void 0 : _this$editorAnalytics.attachAnalyticsEvent({
         action: ACTION.INSERTED,
         actionSubject: ACTION_SUBJECT.DOCUMENT,
         actionSubjectId: ACTION_SUBJECT_ID.EMOJI,
@@ -161,7 +165,8 @@ var AsciiEmojiTransactionCreator = /*#__PURE__*/function () {
           inputMethod: INPUT_METHOD.ASCII
         },
         eventType: EVENT_TYPE.TRACK
-      });
+      })(tr);
+      return tr;
     }
   }, {
     key: "from",
@@ -212,8 +217,8 @@ var AsciiEmojiTransactionCreator = /*#__PURE__*/function () {
   return AsciiEmojiTransactionCreator;
 }();
 export var stateKey = new PluginKey('asciiEmojiPlugin');
-var plugins = function plugins(schema, providerFactory, featureFlags) {
-  return [inputRulePlugin(schema, providerFactory, featureFlags)].filter(function (plugin) {
+var plugins = function plugins(schema, providerFactory, featureFlags, editorAnalyticsAPI) {
+  return [inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI)].filter(function (plugin) {
     return !!plugin;
   });
 };

package/dist/esm/plugins/extension/pm-plugins/main.js

@@ -1,7 +1,10 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { TextSelection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfTypeClosestToPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { isSelectionAtStartOfNode, isSelectionAtEndOfNode } from '@atlaskit/editor-common/selection';
 import { createSelectionClickHandler } from '../../selection/utils';
 import ExtensionNodeView from '../nodeviews/extension';
 import { updateState, clearEditingContext } from '../commands';
@@ -234,6 +237,48 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
     },
     key: pluginKey,
     props: {
+      handleDOMEvents: {
+        /**
+         * ED-18072 - Cannot shift + arrow past bodied extension if it is not empty.
+         * This code is to handle the case where the selection starts inside or on the node and the user is trying to shift + arrow.
+         * For other part of the solution see code in: packages/editor/editor-core/src/plugins/selection/pm-plugins/events/keydown.ts
+         */
+        keydown: function keydown(view, event) {
+          if (event instanceof KeyboardEvent && event.shiftKey && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+            var _view$state = view.state,
+              schema = _view$state.schema,
+              selection = _view$state.selection,
+              $head = _view$state.selection.$head,
+              doc = _view$state.doc,
+              tr = _view$state.tr;
+            var bodiedExtension = schema.nodes.bodiedExtension;
+            if (selection instanceof TextSelection || selection instanceof NodeSelection) {
+              var maybeBodiedExtension = selection instanceof TextSelection ? findParentNodeOfTypeClosestToPos($head, bodiedExtension) : findSelectedNodeOfType(bodiedExtension)(selection);
+              if (maybeBodiedExtension) {
+                var end = maybeBodiedExtension.pos + maybeBodiedExtension.node.nodeSize;
+                if (event.key === 'ArrowUp' || event.key === 'ArrowLeft' && isSelectionAtStartOfNode($head, maybeBodiedExtension)) {
+                  var anchor = end + 1;
+
+                  // an offset is used here so that left arrow selects the first character before the node (consistent with arrow right)
+                  var headOffset = event.key === 'ArrowLeft' ? -1 : 0;
+                  var head = maybeBodiedExtension.pos + headOffset;
+                  var newSelection = TextSelection.create(doc, Math.max(anchor, selection.anchor), head);
+                  view.dispatch(tr.setSelection(newSelection));
+                  return true;
+                }
+                if (event.key === 'ArrowDown' || event.key === 'ArrowRight' && isSelectionAtEndOfNode($head, maybeBodiedExtension)) {
+                  var _anchor = maybeBodiedExtension.pos - 1;
+                  var _head = end + 1;
+                  var _newSelection = TextSelection.create(doc, Math.min(_anchor, selection.anchor), _head);
+                  view.dispatch(tr.setSelection(_newSelection));
+                  return true;
+                }
+              }
+            }
+          }
+          return false;
+        }
+      },
       nodeViews: {
         // WARNING: referentiality-plugin also creates these nodeviews
         extension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),

package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -283,7 +283,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     });
     _defineProperty(_assertThisInitialized(_this), "handleSelectedEmoji", function (emojiId) {
       _this.props.editorView.focus();
-      insertEmoji(emojiId, INPUT_METHOD.PICKER)(_this.props.editorView.state, _this.props.editorView.dispatch);
+      insertEmoji(_this.editorAnalyticsAPI)(emojiId, INPUT_METHOD.PICKER)(_this.props.editorView.state, _this.props.editorView.dispatch);
       _this.toggleEmojiPicker();
       return true;
     });

package/dist/esm/plugins/selection/pm-plugins/events/keydown.js

@@ -1,36 +1,68 @@
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+
+/*
+ * The way expand was built, no browser reconize selection on it.
+ * For instance, when a selection going to a "collapsed" expand
+ * the browser will try to send the cursor to inside the expand content (wrong),
+ * this behavior is caused because the expand content is never true hidden
+ * we just set the height to 1px.
+ *
+ * So, we need to capture a possible selection event
+ * when a collapsed exxpand is the next node in the common depth.
+ * If that is true, we create a new TextSelection and stop the event bubble
+ */
 var isCollpasedExpand = function isCollpasedExpand(node) {
   return Boolean(node && ['expand', 'nestedExpand'].includes(node.type.name) && !node.attrs.__expanded);
 };
-var findFixedProblematicNodePosition = function findFixedProblematicNodePosition($pos, direction) {
-  if ($pos.pos === 0 || $pos.depth === 0) {
+
+/**
+ * ED-18072 - Cannot shift + arrow past bodied extension if it is not empty
+ */
+var isBodiedExtension = function isBodiedExtension(node) {
+  return Boolean(node && ['bodiedExtension'].includes(node.type.name));
+};
+var isProblematicNode = function isProblematicNode(node) {
+  return isCollpasedExpand(node) || isBodiedExtension(node);
+};
+var findFixedProblematicNodePosition = function findFixedProblematicNodePosition(doc, $head, direction) {
+  if ($head.pos === 0 || $head.depth === 0) {
     return null;
   }
-  var pos = direction === 'up' ? $pos.before() : $pos.after();
-  var $posResolved = $pos.doc.resolve(pos);
-  var maybeExpandNode = direction === 'up' ? $posResolved.nodeBefore : $posResolved.nodeAfter;
-  if (maybeExpandNode && isCollpasedExpand(maybeExpandNode)) {
-    var nodeSize = maybeExpandNode.nodeSize;
-    var expandPosition = direction === 'up' ? pos - nodeSize : pos + nodeSize;
-    var startPosNode = Math.max(expandPosition, 0);
-    var $startPosNode = $pos.doc.resolve(Math.min(startPosNode, $pos.doc.content.size));
-    return $startPosNode;
+  if (direction === 'up') {
+    var pos = $head.before();
+    var $posResolved = $head.doc.resolve(pos);
+    var maybeProblematicNode = $posResolved.nodeBefore;
+    if (maybeProblematicNode && isProblematicNode(maybeProblematicNode)) {
+      var nodeSize = maybeProblematicNode.nodeSize;
+      var nodeStartPosition = pos - nodeSize;
+
+      // ($head.pos - 1) will correspond to (nodeStartPosition + nodeSize) when we are at the start of the text node
+      var isAtEndOfProblematicNode = $head.pos - 1 === nodeStartPosition + nodeSize;
+      if (isAtEndOfProblematicNode) {
+        var startPosNode = Math.max(nodeStartPosition, 0);
+        var $startPosNode = $head.doc.resolve(Math.min(startPosNode, $head.doc.content.size));
+        return $startPosNode;
+      }
+    }
+  }
+  if (direction === 'down') {
+    var _pos = $head.after();
+    var _maybeProblematicNode = doc.nodeAt(_pos);
+    if (_maybeProblematicNode && isProblematicNode(_maybeProblematicNode) && $head.pos + 1 === _pos) {
+      var _nodeSize = _maybeProblematicNode.nodeSize;
+      var nodePosition = _pos + _nodeSize;
+      var _startPosNode = Math.max(nodePosition, 0);
+      var _$startPosNode = $head.doc.resolve(Math.min(_startPosNode, $head.doc.content.size));
+      return _$startPosNode;
+    }
   }
   return null;
 };
 export var onKeydown = function onKeydown(view, event) {
   /*
-   * This workaround is needed for some specific situation with collapsed expand.
-   *
-   * The way expand was built, no browser reconize selection on it.
-   * For instance, when a selection going to a "collapsed" expand
-   * the browser will try to send the cursor to inside the expand content (wrong),
-   * this behavior is caused because the expand content is never true hidden
-   * we just set the height to 1px.
-   *
-   * So, we need to capture a possible selection event
-   * when a collapsed exxpand is the next node in the common depth.
-   * If that is true, we create a new TextSelection and stop the event bubble
+   * This workaround is needed for some specific situations.
+   * - expand collapse
+   * - bodied extension
    */
   if (!(event instanceof KeyboardEvent)) {
     return false;
@@ -41,16 +73,21 @@ export var onKeydown = function onKeydown(view, event) {
   if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
     return false;
   }
-  var _view$state$selection = view.state.selection,
+  var _view$state = view.state,
+    doc = _view$state.doc,
+    _view$state$selection = _view$state.selection,
     $head = _view$state$selection.$head,
     $anchor = _view$state$selection.$anchor;
   if (event.key === 'ArrowRight' && $head.nodeAfter || event.key === 'ArrowLeft' && $head.nodeBefore) {
     return false;
   }
   var direction = ['ArrowLeft', 'ArrowUp', 'Home'].includes(event.key) ? 'up' : 'down';
-  var $fixedProblematicNodePosition = findFixedProblematicNodePosition($head, direction);
+  var $fixedProblematicNodePosition = findFixedProblematicNodePosition(doc, $head, direction);
   if ($fixedProblematicNodePosition) {
-    var forcedTextSelection = TextSelection.create(view.state.doc, $anchor.pos, $fixedProblematicNodePosition.pos);
+    // an offset is used here so that left arrow selects the first character before the node (consistent with arrow right)
+    var headOffset = event.key === 'ArrowLeft' ? -1 : 0;
+    var head = $fixedProblematicNodePosition.pos + headOffset;
+    var forcedTextSelection = TextSelection.create(view.state.doc, $anchor.pos, head);
     var tr = view.state.tr;
     tr.setSelection(forcedTextSelection);
     view.dispatch(tr);

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.9.0";
+export var version = "187.9.2";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

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

package/dist/types/plugins/emoji/commands/insert-emoji.d.ts

@@ -1,4 +1,4 @@
 import type { EmojiId } from '@atlaskit/emoji';
 import type { Command } from '../../../types';
-import type { INPUT_METHOD } from '../../analytics';
-export declare function insertEmoji(emojiId: EmojiId, inputMethod?: INPUT_METHOD.PICKER | INPUT_METHOD.ASCII | INPUT_METHOD.TYPEAHEAD): Command;
+import type { INPUT_METHOD, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+export declare const insertEmoji: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (emojiId: EmojiId, inputMethod?: INPUT_METHOD.PICKER | INPUT_METHOD.ASCII | INPUT_METHOD.TYPEAHEAD) => Command;

package/dist/types/plugins/emoji/pm-plugins/ascii-input-rules.d.ts

@@ -3,7 +3,8 @@ import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { FeatureFlags } from '../../../types/feature-flags';
-export declare function inputRulePlugin(schema: Schema, providerFactory: ProviderFactory, featureFlags: FeatureFlags): SafePlugin | undefined;
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+export declare function inputRulePlugin(schema: Schema, providerFactory: ProviderFactory, featureFlags: FeatureFlags, editorAnalyticsAPI: EditorAnalyticsAPI | undefined): SafePlugin | undefined;
 export declare const stateKey: PluginKey<any>;
-declare const plugins: (schema: Schema, providerFactory: ProviderFactory, featureFlags: FeatureFlags) => SafePlugin<any>[];
+declare const plugins: (schema: Schema, providerFactory: ProviderFactory, featureFlags: FeatureFlags, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => SafePlugin<any>[];
 export default plugins;

package/dist/types/plugins/extension/pm-plugins/main.d.ts

@@ -5,13 +5,13 @@ import type { ExtensionHandlers, ExtensionProvider } from '@atlaskit/editor-comm
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ApplyChangeHandler } from '@atlaskit/editor-plugin-context-panel';
 import type { EditorAppearance } from '../../../types/editor-appearance';
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import { getPluginState, createCommand } from '../plugin-factory';
 import { pluginKey } from '../plugin-key';
 import type extensionPlugin from '../index';
-import type { ApplyChangeHandler } from '@atlaskit/editor-plugin-context-panel';
 export declare const createExtensionProviderHandler: (view: EditorView) => (name: string, provider?: Promise<ExtensionProvider>) => Promise<void>;
 export declare const createContextIdentifierProviderHandler: (view: EditorView) => (name: string, provider?: Promise<ContextIdentifierProvider>) => Promise<void>;
 export declare const handleUpdate: ({ view, prevState, domAtPos, extensionHandlers, applyChange, }: {

package/dist/types/plugins/insert-block/ui/ToolbarInsertBlock/index.d.ts

@@ -7,6 +7,7 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     private dropdownButtonRef?;
     private emojiButtonRef?;
     private plusButtonRef?;
+    private editorAnalyticsAPI;
     state: State;
     static getDerivedStateFromProps(props: Props & WrappedComponentProps, state: State): State | null;
     componentDidUpdate(prevProps: Props): void;