@atlaskit/editor-core 187.9.0 → 187.9.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-core
 
+## 187.9.2
+
+### Patch Changes
+
+- [`6190030df97`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6190030df97) - Migrate `emoji` plugin to the new Analytics API
+- [`78068814a36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78068814a36) - [ux] Fix user selection via arrow keys getting stuck inside nested body macro if it's not empty or cannot shift + arrow into the macro
+
 ## 187.9.0
 
 ### Minor Changes

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

@@ -4,40 +4,43 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.insertEmoji = insertEmoji;
+exports.insertEmoji = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _analytics = require("../../analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-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 = _model.Fragment.fromArray([node, textNode]);
-        var tr = (0, _utils.safeInsert)(fragment)(state.tr);
-        if (inputMethod) {
-          (0, _analytics.addAnalytics)(state, tr, {
-            action: _analytics.ACTION.INSERTED,
-            actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
-            actionSubjectId: _analytics.ACTION_SUBJECT_ID.EMOJI,
-            attributes: {
-              inputMethod: inputMethod
-            },
-            eventType: _analytics.EVENT_TYPE.TRACK
-          });
+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 = _model.Fragment.fromArray([node, textNode]);
+          var tr = (0, _utils.safeInsert)(fragment)(state.tr);
+          if (inputMethod) {
+            editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+              action: _analytics.ACTION.INSERTED,
+              actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+              actionSubjectId: _analytics.ACTION_SUBJECT_ID.EMOJI,
+              attributes: {
+                inputMethod: inputMethod
+              },
+              eventType: _analytics.EVENT_TYPE.TRACK
+            })(tr);
+          }
+          dispatch(tr.setSelection(_state.Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
         }
-        dispatch(tr.setSelection(_state.Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
+        return true;
       }
-      return true;
-    }
-    return false;
+      return false;
+    };
   };
-}
+};
+exports.insertEmoji = insertEmoji;

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

@@ -188,10 +188,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 (0, _asciiInputRules.inputRulePlugin)(schema, providerFactory, featureFlags);
+          return (0, _asciiInputRules.inputRulePlugin)(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);
         }
       }];
     },
@@ -208,13 +209,13 @@ var emojiPlugin = function emojiPlugin(options, api) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconEmoji, null);
           },
           action: function action(insert, state) {
-            var _api$dependencies$ana8;
+            var _api$dependencies$ana9;
             var tr = insert(undefined);
             (0, _openTypeaheadAtCursor.openTypeAheadAtCursor)({
               triggerHandler: typeAhead,
               inputMethod: _analytics.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: _analytics.ACTION.INVOKED,
               actionSubject: _analytics.ACTION_SUBJECT.TYPEAHEAD,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.TYPEAHEAD_EMOJI,

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

@@ -16,14 +16,14 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _prosemirrorInputRules = require("@atlaskit/prosemirror-input-rules");
-var _analytics = require("../../analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var matcher;
-function inputRulePlugin(schema, providerFactory, featureFlags) {
+function inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI) {
   if (schema.nodes.emoji && providerFactory) {
     initMatcher(providerFactory);
-    var asciiEmojiRule = (0, _prosemirrorInputRules.createRule)(AsciiEmojiMatcher.REGEX, inputRuleHandler);
+    var asciiEmojiRule = (0, _prosemirrorInputRules.createRule)(AsciiEmojiMatcher.REGEX, inputRuleHandler(editorAnalyticsAPI));
     return (0, _prosemirrorInputRules.createPlugin)('emoji', [asciiEmojiRule]);
   }
   return;
@@ -41,17 +41,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;
@@ -150,18 +152,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) {
     (0, _classCallCheck2.default)(this, AsciiEmojiTransactionCreator);
     this.state = state;
     this.match = match;
     this.start = start;
     this.end = end;
+    this.editorAnalyticsAPI = editorAnalyticsAPI;
   }
   (0, _createClass2.default)(AsciiEmojiTransactionCreator, [{
     key: "create",
     value: function create() {
+      var _this$editorAnalytics;
       var tr = this.state.tr.replaceWith(this.from, this.to, this.createNodes());
-      return (0, _analytics.addAnalytics)(this.state, tr, {
+      (_this$editorAnalytics = this.editorAnalyticsAPI) === null || _this$editorAnalytics === void 0 ? void 0 : _this$editorAnalytics.attachAnalyticsEvent({
         action: _analytics.ACTION.INSERTED,
         actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
         actionSubjectId: _analytics.ACTION_SUBJECT_ID.EMOJI,
@@ -169,7 +173,8 @@ var AsciiEmojiTransactionCreator = /*#__PURE__*/function () {
           inputMethod: _analytics.INPUT_METHOD.ASCII
         },
         eventType: _analytics.EVENT_TYPE.TRACK
-      });
+      })(tr);
+      return tr;
     }
   }, {
     key: "from",
@@ -221,8 +226,8 @@ var AsciiEmojiTransactionCreator = /*#__PURE__*/function () {
 }();
 var stateKey = new _state.PluginKey('asciiEmojiPlugin');
 exports.stateKey = stateKey;
-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/cjs/plugins/extension/pm-plugins/main.js

@@ -27,14 +27,17 @@ Object.defineProperty(exports, "pluginKey", {
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _utils = require("../../selection/utils");
+var _selection = require("@atlaskit/editor-common/selection");
+var _utils2 = require("../../selection/utils");
 var _extension = _interopRequireDefault(require("../nodeviews/extension"));
 var _commands = require("../commands");
-var _utils2 = require("../utils");
+var _utils3 = require("../utils");
 var _pluginFactory = require("../plugin-factory");
 var _pluginKey = require("../plugin-key");
-var _utils3 = require("./utils");
+var _utils4 = require("./utils");
 var shouldShowEditButton = function shouldShowEditButton(extensionHandler, extensionProvider) {
   var usesLegacyMacroBrowser = !extensionHandler && !extensionProvider || typeof extensionHandler === 'function';
   var usesModernUpdateMethod = (0, _typeof2.default)(extensionHandler) === 'object' && typeof extensionHandler.update === 'function';
@@ -60,7 +63,7 @@ var getUpdateExtensionPromise = /*#__PURE__*/function () {
             break;
           }
           _context.next = 7;
-          return (0, _utils3.updateEditButton)(view, extensionProvider);
+          return (0, _utils4.updateEditButton)(view, extensionProvider);
         case 7:
           updateMethod = _context.sent;
           if (!updateMethod) {
@@ -100,7 +103,7 @@ var createExtensionProviderHandler = function createExtensionProviderHandler(vie
               extensionProvider: extensionProvider
             })(view.state, view.dispatch);
             _context2.next = 8;
-            return (0, _utils3.updateEditButton)(view, extensionProvider);
+            return (0, _utils4.updateEditButton)(view, extensionProvider);
           case 8:
             _context2.next = 13;
             break;
@@ -177,7 +180,7 @@ var handleUpdate = function handleUpdate(_ref4) {
     showEditButton = _getPluginState.showEditButton;
 
   // This fetches the selected extension node, either by keyboard selection or click for all types of extensions
-  var selectedExtension = (0, _utils2.getSelectedExtension)(state, true);
+  var selectedExtension = (0, _utils3.getSelectedExtension)(state, true);
   if (!selectedExtension) {
     if (showContextPanel) {
       (0, _commands.clearEditingContext)(applyChange)(state, dispatch);
@@ -185,11 +188,11 @@ var handleUpdate = function handleUpdate(_ref4) {
     return;
   }
   var node = selectedExtension.node;
-  var newElement = (0, _utils2.getSelectedDomElement)(state.schema, domAtPos, selectedExtension);
+  var newElement = (0, _utils3.getSelectedDomElement)(state.schema, domAtPos, selectedExtension);
 
   // In some cases, showEditButton can be stale and the edit button doesn't show - @see ED-15285
   // To be safe, we update the showEditButton state here
-  var shouldUpdateEditButton = !showEditButton && extensionProvider && element === newElement && !(0, _utils2.getSelectedExtension)(prevState, true);
+  var shouldUpdateEditButton = !showEditButton && extensionProvider && element === newElement && !(0, _utils3.getSelectedExtension)(prevState, true);
   var isNewNodeSelected = node.attrs.localId ? localId !== node.attrs.localId :
   // This is the current assumption and it's wrong but we are keeping it
   // as fallback in case we need to turn off `allowLocalIdGeneration`
@@ -263,6 +266,48 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
     },
     key: _pluginKey.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 _state.TextSelection || selection instanceof _state.NodeSelection) {
+              var maybeBodiedExtension = selection instanceof _state.TextSelection ? (0, _utils.findParentNodeOfTypeClosestToPos)($head, bodiedExtension) : (0, _utils.findSelectedNodeOfType)(bodiedExtension)(selection);
+              if (maybeBodiedExtension) {
+                var end = maybeBodiedExtension.pos + maybeBodiedExtension.node.nodeSize;
+                if (event.key === 'ArrowUp' || event.key === 'ArrowLeft' && (0, _selection.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 = _state.TextSelection.create(doc, Math.max(anchor, selection.anchor), head);
+                  view.dispatch(tr.setSelection(newSelection));
+                  return true;
+                }
+                if (event.key === 'ArrowDown' || event.key === 'ArrowRight' && (0, _selection.isSelectionAtEndOfNode)($head, maybeBodiedExtension)) {
+                  var _anchor = maybeBodiedExtension.pos - 1;
+                  var _head = end + 1;
+                  var _newSelection = _state.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: (0, _extension.default)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
@@ -271,7 +316,7 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
         // WARNING: referentiality-plugin also creates these nodeviews
         inlineExtension: (0, _extension.default)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi)
       },
-      handleClickOn: (0, _utils.createSelectionClickHandler)(['extension', 'bodiedExtension'], function (target) {
+      handleClickOn: (0, _utils2.createSelectionClickHandler)(['extension', 'bodiedExtension'], function (target) {
         return !target.closest('.extension-content');
       }, {
         useLongPressSelection: useLongPressSelection

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

@@ -288,7 +288,7 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectedEmoji", function (emojiId) {
       _this.props.editorView.focus();
-      (0, _insertEmoji.insertEmoji)(emojiId, _analytics.INPUT_METHOD.PICKER)(_this.props.editorView.state, _this.props.editorView.dispatch);
+      (0, _insertEmoji.insertEmoji)(_this.editorAnalyticsAPI)(emojiId, _analytics.INPUT_METHOD.PICKER)(_this.props.editorView.state, _this.props.editorView.dispatch);
       _this.toggleEmojiPicker();
       return true;
     });

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

@@ -5,38 +5,69 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.onKeydown = void 0;
 var _state = require("@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;
 };
 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;
@@ -47,16 +78,21 @@ 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 = _state.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 = _state.TextSelection.create(view.state.doc, $anchor.pos, head);
     var tr = view.state.tr;
     tr.setSelection(forcedTextSelection);
     view.dispatch(tr);

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.9.0";
+var version = "187.9.2";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

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

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

@@ -1,8 +1,8 @@
 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) {
+import { EVENT_TYPE, ACTION_SUBJECT_ID, ACTION_SUBJECT, ACTION } from '@atlaskit/editor-common/analytics';
+export const insertEmoji = editorAnalyticsAPI => (emojiId, inputMethod) => {
   return (state, dispatch) => {
     const {
       emoji
@@ -17,7 +17,7 @@ export function insertEmoji(emojiId, inputMethod) {
         const fragment = Fragment.fromArray([node, textNode]);
         const tr = safeInsert(fragment)(state.tr);
         if (inputMethod) {
-          addAnalytics(state, tr, {
+          editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
             action: ACTION.INSERTED,
             actionSubject: ACTION_SUBJECT.DOCUMENT,
             actionSubjectId: ACTION_SUBJECT_ID.EMOJI,
@@ -25,7 +25,7 @@ export function insertEmoji(emojiId, inputMethod) {
               inputMethod
             },
             eventType: EVENT_TYPE.TRACK
-          });
+          })(tr);
         }
         dispatch(tr.setSelection(Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
       }
@@ -33,4 +33,4 @@ export function insertEmoji(emojiId, inputMethod) {
     }
     return false;
   };
-}
+};

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

@@ -169,7 +169,10 @@ const emojiPlugin = (options, api) => {
           schema,
           providerFactory,
           featureFlags
-        }) => asciiInputRulePlugin(schema, providerFactory, featureFlags)
+        }) => {
+          var _api$dependencies$ana8;
+          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);
+        }
       }];
     },
     pluginsOptions: {
@@ -183,13 +186,13 @@ const emojiPlugin = (options, api) => {
         keyshortcut: ':',
         icon: () => /*#__PURE__*/React.createElement(IconEmoji, null),
         action(insert, state) {
-          var _api$dependencies$ana8;
+          var _api$dependencies$ana9;
           const 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/es2019/plugins/emoji/pm-plugins/ascii-input-rules.js

@@ -2,12 +2,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
 let matcher;
-export function inputRulePlugin(schema, providerFactory, featureFlags) {
+export function inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI) {
   if (schema.nodes.emoji && providerFactory) {
     initMatcher(providerFactory);
-    const asciiEmojiRule = createRule(AsciiEmojiMatcher.REGEX, inputRuleHandler);
+    const asciiEmojiRule = createRule(AsciiEmojiMatcher.REGEX, inputRuleHandler(editorAnalyticsAPI));
     return createPlugin('emoji', [asciiEmojiRule]);
   }
   return;
@@ -25,17 +25,17 @@ function initMatcher(providerFactory) {
   };
   providerFactory.subscribe('emojiProvider', handleProvider);
 }
-function inputRuleHandler(state, matchParts, start, end) {
+const inputRuleHandler = editorAnalyticsAPI => (state, matchParts, start, end) => {
   if (!matcher) {
     return null;
   }
   const match = matcher.match(matchParts);
   if (match) {
-    const transactionCreator = new AsciiEmojiTransactionCreator(state, match, start, end);
+    const transactionCreator = new AsciiEmojiTransactionCreator(state, match, start, end, editorAnalyticsAPI);
     return transactionCreator.create();
   }
   return null;
-}
+};
 const REGEX_LEADING_CAPTURE_INDEX = 1;
 const REGEX_EMOJI_LEADING_PARENTHESES = 2;
 const REGEX_EMOJI_ASCII_CAPTURE_INDEX = 3;
@@ -107,15 +107,17 @@ class RecordingAsciiEmojiMatcher extends AsciiEmojiMatcher {
   }
 }
 class AsciiEmojiTransactionCreator {
-  constructor(state, match, start, end) {
+  constructor(state, match, start, end, editorAnalyticsAPI) {
     this.state = state;
     this.match = match;
     this.start = start;
     this.end = end;
+    this.editorAnalyticsAPI = editorAnalyticsAPI;
   }
   create() {
+    var _this$editorAnalytics;
     const 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,
@@ -123,7 +125,8 @@ class AsciiEmojiTransactionCreator {
         inputMethod: INPUT_METHOD.ASCII
       },
       eventType: EVENT_TYPE.TRACK
-    });
+    })(tr);
+    return tr;
   }
   get from() {
     return this.start + this.match.leadingString.length;
@@ -160,7 +163,7 @@ class AsciiEmojiTransactionCreator {
   }
 }
 export const stateKey = new PluginKey('asciiEmojiPlugin');
-const plugins = (schema, providerFactory, featureFlags) => {
-  return [inputRulePlugin(schema, providerFactory, featureFlags)].filter(plugin => !!plugin);
+const plugins = (schema, providerFactory, featureFlags, editorAnalyticsAPI) => {
+  return [inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI)].filter(plugin => !!plugin);
 };
 export default plugins;