@atlaskit/editor-plugin-selection 0.1.0

package/dist/cjs/gap-cursor/utils/place-gap-cursor.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toDOM = void 0;
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+var _selection = require("@atlaskit/editor-common/selection");
+var _utils = require("../utils");
+/**
+ * We have a couple of nodes that require us to compute style
+ * on different elements, ideally all nodes should be able to
+ * compute the appropriate styles based on their wrapper.
+ */
+var nestedCases = {
+  'tableView-content-wrap': 'table',
+  'mediaSingleView-content-wrap': '.rich-media-item',
+  'bodiedExtensionView-content-wrap': '.extension-container',
+  'embedCardView-content-wrap': '.rich-media-item',
+  'datasourceView-content-wrap': '.datasourceView-content-inner-wrap'
+};
+var computeNestedStyle = function computeNestedStyle(dom) {
+  var foundKey = Object.keys(nestedCases).find(function (className) {
+    return dom.classList.contains(className);
+  });
+  var nestedSelector = foundKey && nestedCases[foundKey];
+  if (nestedSelector) {
+    var nestedElement = dom.querySelector(nestedSelector);
+    if (nestedElement) {
+      return window.getComputedStyle(nestedElement);
+    }
+  }
+};
+var measureHeight = function measureHeight(style) {
+  return measureValue(style, ['height', 'padding-top', 'padding-bottom', 'border-top-width', 'border-bottom-width']);
+};
+var measureWidth = function measureWidth(style) {
+  return measureValue(style, ['width', 'padding-left', 'padding-right', 'border-left-width', 'border-right-width']);
+};
+var measureValue = function measureValue(style, measureValues) {
+  var _measureValues = (0, _toArray2.default)(measureValues),
+    base = _measureValues[0],
+    contentBoxValues = _measureValues.slice(1);
+  var measures = [style.getPropertyValue(base)];
+  var boxSizing = style.getPropertyValue('box-sizing');
+  if (boxSizing === 'content-box') {
+    contentBoxValues.forEach(function (value) {
+      measures.push(style.getPropertyValue(value));
+    });
+  }
+  var result = 0;
+  for (var i = 0; i < measures.length; i++) {
+    result += parseFloat(measures[i]);
+  }
+  return result;
+};
+var mutateElementStyle = function mutateElementStyle(element, style, side) {
+  element.style.transform = style.getPropertyValue('transform');
+  if ((0, _utils.isLeftCursor)(side)) {
+    element.style.width = style.getPropertyValue('width');
+    element.style.marginLeft = style.getPropertyValue('margin-left');
+  } else {
+    var marginRight = parseFloat(style.getPropertyValue('margin-right'));
+    if (marginRight > 0) {
+      element.style.marginLeft = "-".concat(Math.abs(marginRight), "px");
+    } else {
+      element.style.paddingRight = "".concat(Math.abs(marginRight), "px");
+    }
+  }
+};
+var toDOM = exports.toDOM = function toDOM(view, getPos) {
+  var selection = view.state.selection;
+  var $from = selection.$from,
+    side = selection.side;
+  var isRightCursor = side === _selection.Side.RIGHT;
+  var node = isRightCursor ? $from.nodeBefore : $from.nodeAfter;
+  var nodeStart = getPos();
+  // @ts-ignore - [unblock prosemirror bump] nodeStart can be undefined
+  var dom = view.nodeDOM(nodeStart);
+  var element = document.createElement('span');
+  element.className = "ProseMirror-gapcursor ".concat(isRightCursor ? '-right' : '-left');
+  element.appendChild(document.createElement('span'));
+  if (dom instanceof HTMLElement && element.firstChild) {
+    var style = computeNestedStyle(dom) || window.getComputedStyle(dom);
+    var gapCursor = element.firstChild;
+    gapCursor.style.height = "".concat(measureHeight(style), "px");
+    var layoutMode = node && (0, _utils.getLayoutModeFromTargetNode)(node);
+
+    // TODO remove this table specific piece. need to figure out margin collapsing logic
+    if (nodeStart !== 0 || layoutMode || (node === null || node === void 0 ? void 0 : node.type.name) === 'table') {
+      gapCursor.style.marginTop = style.getPropertyValue('margin-top');
+    }
+    if (layoutMode) {
+      gapCursor.setAttribute('layout', layoutMode);
+      var breakoutModeStyle = (0, _utils.getComputedStyleForLayoutMode)(dom, node, style);
+      gapCursor.style.width = "".concat(measureWidth(breakoutModeStyle), "px");
+    } else {
+      mutateElementStyle(gapCursor, style, selection.side);
+    }
+  }
+  return element;
+};

package/dist/cjs/gap-cursor/utils.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getComputedStyleForLayoutMode = void 0;
+exports.getLayoutModeFromTargetNode = getLayoutModeFromTargetNode;
+exports.getMediaNearPos = getMediaNearPos;
+exports.isTextBlockNearPos = exports.isLeftCursor = exports.isIgnoredClick = void 0;
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _styles = require("@atlaskit/editor-common/styles");
+var _selection = require("./selection");
+var isLeftCursor = exports.isLeftCursor = function isLeftCursor(side) {
+  return side === _selection.Side.LEFT;
+};
+function getMediaNearPos(doc, $pos, schema) {
+  var dir = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : -1;
+  var $currentPos = $pos;
+  var currentNode = null;
+  var _schema$nodes = schema.nodes,
+    mediaSingle = _schema$nodes.mediaSingle,
+    media = _schema$nodes.media,
+    mediaGroup = _schema$nodes.mediaGroup;
+  do {
+    $currentPos = doc.resolve(dir === -1 ? $currentPos.before() : $currentPos.after());
+    if (!$currentPos) {
+      return null;
+    }
+    currentNode = (dir === -1 ? $currentPos.nodeBefore : $currentPos.nodeAfter) || $currentPos.parent;
+    if (!currentNode || currentNode.type === schema.nodes.doc) {
+      return null;
+    }
+    if (currentNode.type === mediaSingle || currentNode.type === media || currentNode.type === mediaGroup) {
+      return currentNode;
+    }
+  } while ($currentPos.depth > 0);
+  return null;
+}
+var isTextBlockNearPos = exports.isTextBlockNearPos = function isTextBlockNearPos(doc, schema, $pos, dir) {
+  var $currentPos = $pos;
+  var currentNode = dir === -1 ? $currentPos.nodeBefore : $currentPos.nodeAfter;
+
+  // If next node is a text or a text block bail out early.
+  if (currentNode && (currentNode.isTextblock || currentNode.isText)) {
+    return true;
+  }
+  while ($currentPos.depth > 0) {
+    $currentPos = doc.resolve(dir === -1 ? $currentPos.before() : $currentPos.after());
+    if (!$currentPos) {
+      return false;
+    }
+    currentNode = (dir === -1 ? $currentPos.nodeBefore : $currentPos.nodeAfter) || $currentPos.parent;
+    if (!currentNode || currentNode.type === schema.nodes.doc) {
+      return false;
+    }
+    if (currentNode.isTextblock) {
+      return true;
+    }
+  }
+  var childNode = currentNode;
+  while (childNode && childNode.firstChild) {
+    childNode = childNode.firstChild;
+    if (childNode && (childNode.isTextblock || childNode.isText)) {
+      return true;
+    }
+  }
+  return false;
+};
+function getLayoutModeFromTargetNode(node) {
+  var layout;
+  if (node.attrs.layout) {
+    layout = node.attrs.layout;
+  }
+  if (node.marks && node.marks.length) {
+    layout = (node.marks.find(function (mark) {
+      return mark.type.name === 'breakout';
+    }) || {
+      attrs: {
+        mode: ''
+      }
+    }).attrs.mode;
+  }
+  if (node.type.name === 'table' && node.attrs.width) {
+    layout = 'fixed-width';
+  }
+  if (['wide', 'full-width', 'fixed-width'].indexOf(layout) === -1) {
+    return '';
+  }
+  return layout;
+}
+var isIgnoredClick = exports.isIgnoredClick = function isIgnoredClick(elem) {
+  if (elem.nodeName === 'BUTTON' || elem.closest('button')) {
+    return true;
+  }
+
+  // check if we're clicking an image caption placeholder
+  if (elem.closest("[data-id=\"".concat(_mediaSingle.CAPTION_PLACEHOLDER_ID, "\"]"))) {
+    return true;
+  }
+
+  // check if target node has a parent table node
+  var tableWrap;
+  var node = elem;
+  while (node) {
+    if (node.className && (node.getAttribute('class') || '').indexOf(_styles.TableSharedCssClassName.TABLE_CONTAINER) > -1) {
+      tableWrap = node;
+      break;
+    }
+    node = node.parentNode;
+  }
+  if (tableWrap) {
+    var rowControls = tableWrap.querySelector(".".concat(_styles.TableSharedCssClassName.TABLE_ROW_CONTROLS_WRAPPER));
+    var isColumnControlsDecoration = elem && elem.classList && elem.classList.contains(_styles.TableSharedCssClassName.TABLE_COLUMN_CONTROLS_DECORATIONS);
+    return rowControls && rowControls.contains(elem) || isColumnControlsDecoration;
+  }
+
+  // Check if unsupported node selection
+  // (without this, selection requires double clicking in FF due to posAtCoords differences)
+  if (elem.closest(".".concat(_styles.UnsupportedSharedCssClassName.BLOCK_CONTAINER))) {
+    return true;
+  }
+  return false;
+};
+
+/*
+  Calculates custom style for breakout mode
+  Mainly to handle table width to include the numbered column width as well
+*/
+var getComputedStyleForLayoutMode = exports.getComputedStyleForLayoutMode = function getComputedStyleForLayoutMode(dom, node, style) {
+  if (node && node.type.name === 'table') {
+    var tableContainer = dom.querySelector('.pm-table-container');
+    if (tableContainer) {
+      return window.getComputedStyle(tableContainer);
+    }
+  }
+  return style;
+};

package/dist/cjs/gap-cursor-selection.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GapCursorSelection", {
+  enumerable: true,
+  get: function get() {
+    return _selection.GapCursorSelection;
+  }
+});
+Object.defineProperty(exports, "Side", {
+  enumerable: true,
+  get: function get() {
+    return _selection.Side;
+  }
+});
+Object.defineProperty(exports, "hasGapCursorPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _actions.hasGapCursorPlugin;
+  }
+});
+Object.defineProperty(exports, "setCursorForTopLevelBlocks", {
+  enumerable: true,
+  get: function get() {
+    return _actions.setCursorForTopLevelBlocks;
+  }
+});
+Object.defineProperty(exports, "setSelectionTopLevelBlocks", {
+  enumerable: true,
+  get: function get() {
+    return _actions.setSelectionTopLevelBlocks;
+  }
+});
+var _selection = require("@atlaskit/editor-common/selection");
+var _actions = require("./gap-cursor/actions");

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "selectionPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.selectionPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/plugin-factory.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPluginState = exports.createPluginState = exports.createCommand = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _reducer = require("./reducer");
+var _types = require("./types");
+var _utils2 = require("./utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var handleDocChanged = function handleDocChanged(tr, pluginState) {
+  // in some collab edge cases mapping decorations could throw an error
+  try {
+    if (pluginState.decorationSet.find().length === 0 && (!tr.selectionSet || (0, _utils2.getDecorations)(tr).find().length === 0)) {
+      return pluginState;
+    }
+    var decorationSet = pluginState.decorationSet.map(tr.mapping, tr.doc);
+    return _objectSpread(_objectSpread({}, pluginState), {}, {
+      decorationSet: decorationSet
+    });
+  } catch (error) {
+    return _objectSpread(_objectSpread({}, pluginState), {}, {
+      decorationSet: _view.DecorationSet.empty
+    });
+  }
+};
+var handleSelectionChanged = function handleSelectionChanged(tr, pluginState) {
+  // Reset relative selection pos when user clicks to select a node
+  if ((tr.selection instanceof _state.NodeSelection && (0, _utils2.isSelectableContainerNode)(tr.selection.node) || tr.selection instanceof _cellSelection.CellSelection) && !tr.getMeta(_types.selectionPluginKey)) {
+    return _objectSpread(_objectSpread({}, pluginState), {}, {
+      selectionRelativeToNode: undefined
+    });
+  }
+  return pluginState;
+};
+var _pluginFactory = (0, _utils.pluginFactory)(_types.selectionPluginKey, _reducer.reducer, {
+    onDocChanged: handleDocChanged,
+    onSelectionChanged: handleSelectionChanged
+  }),
+  createCommand = exports.createCommand = _pluginFactory.createCommand,
+  getPluginState = exports.getPluginState = _pluginFactory.getPluginState,
+  createPluginState = exports.createPluginState = _pluginFactory.createPluginState;

package/dist/cjs/plugin.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectionPlugin = exports.default = void 0;
+var _commands = require("./commands");
+var _gapCursorKeymap = _interopRequireDefault(require("./pm-plugins/gap-cursor-keymap"));
+var _gapCursorMain = _interopRequireDefault(require("./pm-plugins/gap-cursor-main"));
+var _gapCursorPluginKey = require("./pm-plugins/gap-cursor-plugin-key");
+var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
+var _selectionMain = require("./pm-plugins/selection-main");
+var _types = require("./types");
+var displayGapCursor = function displayGapCursor(toggle) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    return tr.setMeta(_gapCursorPluginKey.gapCursorPluginKey, {
+      displayGapCursor: toggle
+    });
+  };
+};
+var selectionPlugin = exports.selectionPlugin = function selectionPlugin(_ref2) {
+  var options = _ref2.config;
+  return {
+    name: 'selection',
+    commands: {
+      displayGapCursor: displayGapCursor
+    },
+    actions: {
+      selectNearNode: function selectNearNode(_ref3) {
+        var selectionRelativeToNode = _ref3.selectionRelativeToNode,
+          selection = _ref3.selection;
+        return function (state) {
+          return (0, _commands.selectNearNode)(selectionRelativeToNode, selection)({
+            tr: state.tr
+          }) || state.tr;
+        };
+      }
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      var pluginState = _types.selectionPluginKey.getState(editorState);
+      return {
+        selectionRelativeToNode: pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectionRelativeToNode
+      };
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'selection',
+        plugin: function plugin(_ref4) {
+          var dispatch = _ref4.dispatch,
+            dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
+          return (0, _selectionMain.createPlugin)(dispatch, dispatchAnalyticsEvent, options);
+        }
+      }, {
+        name: 'selectionKeymap',
+        plugin: _keymap.default
+      }, {
+        name: 'gapCursorKeymap',
+        plugin: function plugin() {
+          return (0, _gapCursorKeymap.default)();
+        }
+      }, {
+        name: 'gapCursor',
+        plugin: function plugin() {
+          return _gapCursorMain.default;
+        }
+      }];
+    }
+  };
+};
+var _default = exports.default = selectionPlugin;

package/dist/cjs/pm-plugins/events/create-selection-between.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onCreateSelectionBetween = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+function isNodeContentEmpty(maybeNode) {
+  return (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.content.size) === 0 || (maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.textContent) === '';
+}
+function findEmptySelectableParentNodePosition($pos, isValidPosition) {
+  var doc = $pos.doc;
+  if ($pos.pos + 1 > doc.content.size) {
+    return null;
+  }
+  if ($pos.nodeBefore !== null) {
+    if (isValidPosition($pos)) {
+      return $pos;
+    }
+
+    // We can not use `$pos.before()` because ProseMirror throws an error when depth is zero.
+    var currentPosIndex = $pos.index();
+    if (currentPosIndex === 0) {
+      return null;
+    }
+    var previousIndex = currentPosIndex - 1;
+    var $previousPos = $pos.doc.resolve($pos.posAtIndex(previousIndex));
+    if (isValidPosition($previousPos)) {
+      return $previousPos;
+    }
+    return null;
+  }
+  if (isValidPosition($pos)) {
+    return $pos;
+  }
+  var positionLevelUp = $pos.before();
+  var resolvedPositionLevelUp = doc.resolve(positionLevelUp);
+  return findEmptySelectableParentNodePosition(resolvedPositionLevelUp, isValidPosition);
+}
+var checkPositionNode = function checkPositionNode($pos) {
+  var maybeNode = $pos.nodeAfter;
+  if (!maybeNode || !maybeNode.isBlock) {
+    return false;
+  }
+  if (maybeNode.isAtom) {
+    return true;
+  }
+  return isNodeContentEmpty(maybeNode) && _state.NodeSelection.isSelectable(maybeNode);
+};
+function findNextSelectionPosition(_ref) {
+  var $targetHead = _ref.$targetHead,
+    $anchor = _ref.$anchor,
+    doc = _ref.doc;
+  var direction = $anchor.pos < $targetHead.pos ? 'down' : 'up';
+  var maybeNextPosition = findEmptySelectableParentNodePosition($targetHead, checkPositionNode);
+  if (maybeNextPosition && maybeNextPosition.nodeAfter) {
+    var nodeAfter = maybeNextPosition.nodeAfter;
+    var pos = maybeNextPosition.pos;
+    var nextPositionToSelect = direction === 'down' ? Math.min(nodeAfter.nodeSize + pos, doc.content.size) : Math.max(pos, 0);
+    return doc.resolve(nextPositionToSelect);
+  }
+  return null;
+}
+var onCreateSelectionBetween = exports.onCreateSelectionBetween = function onCreateSelectionBetween(view, $anchor, $head) {
+  var _$head$parent, _$head$parent2;
+  if ($anchor.pos === $head.pos) {
+    return null;
+  }
+  if ($anchor.depth === $head.depth && $anchor.sameParent($head)) {
+    return null;
+  }
+
+  // If the head is targeting a paragraph on root, then let ProseMirror handle the text selection
+  if ($head.depth === 1 && ((_$head$parent = $head.parent) === null || _$head$parent === void 0 ? void 0 : _$head$parent.type.name) === 'paragraph') {
+    return null;
+  }
+
+  // If head is at the beginning of a non-empty textblock, let ProseMirror handle the text selection
+  if ((_$head$parent2 = $head.parent) !== null && _$head$parent2 !== void 0 && _$head$parent2.isTextblock && !isNodeContentEmpty($head.parent) && $head.parentOffset === 0) {
+    return null;
+  }
+  var $nextHeadPosition = findNextSelectionPosition({
+    $targetHead: $head,
+    $anchor: $anchor,
+    doc: view.state.doc
+  });
+  if (!$nextHeadPosition) {
+    return null;
+  }
+  var forcedTextSelection = _state.TextSelection.create(view.state.doc, $anchor.pos, $nextHeadPosition.pos);
+  return forcedTextSelection;
+};

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

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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);
+};
+
+/**
+ * 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));
+};
+
+/**
+ * ED-19861 - [Regression] keyboard selections within action items are unpredicatable
+ * Table was added to the list of problematic nodes because the desired behaviour when Shift+Up from outside the
+ * table is to select the table node itself, rather than the table cell content. Previously this behaviour was handled
+ * in `packages/editor/editor-core/src/plugins/selection/pm-plugins/events/create-selection-between.ts` but there was
+ * a bug in `create-selection-between` which after fixing the bug that code was no longer handling table selection
+ * correctly, so to fix that table was added here.
+ */
+var isTable = function isTable(node) {
+  return Boolean(node && ['table'].includes(node.type.name));
+};
+var isProblematicNode = function isProblematicNode(node) {
+  return isCollpasedExpand(node) || isBodiedExtension(node) || isTable(node);
+};
+var findFixedProblematicNodePosition = function findFixedProblematicNodePosition(doc, $head, direction) {
+  if ($head.pos === 0 || $head.depth === 0) {
+    return null;
+  }
+  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 = exports.onKeydown = function onKeydown(view, event) {
+  /*
+   * This workaround is needed for some specific situations.
+   * - expand collapse
+   * - bodied extension
+   */
+  if (!(event instanceof KeyboardEvent)) {
+    return false;
+  }
+  if (!event.shiftKey || event.ctrlKey || event.metaKey) {
+    return false;
+  }
+  if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
+    return false;
+  }
+  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(doc, $head, direction);
+  if ($fixedProblematicNodePosition) {
+    // 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);
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};

package/dist/cjs/pm-plugins/gap-cursor-keymap.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = keymapPlugin;
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _commands = require("@atlaskit/editor-prosemirror/commands");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _actions = require("../gap-cursor/actions");
+var _direction = require("../gap-cursor/direction");
+var _selection = require("../gap-cursor/selection");
+function keymapPlugin() {
+  var map = {};
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.insertNewLine.common, function (state, dispatch, view) {
+    var isInGapCursor = state.selection instanceof _selection.GapCursorSelection;
+    // Only operate in gap cursor
+    if (!isInGapCursor) {
+      return false;
+    }
+    return (0, _commands.createParagraphNear)(state, dispatch);
+  }, map);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, function (state, dispatch, view) {
+    var endOfTextblock = view ? view.endOfTextblock.bind(view) : undefined;
+    return (0, _actions.arrow)(_direction.Direction.LEFT, endOfTextblock)(state, dispatch, view);
+  }, map);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, function (state, dispatch, view) {
+    var endOfTextblock = view ? view.endOfTextblock.bind(view) : undefined;
+    return (0, _actions.arrow)(_direction.Direction.RIGHT, endOfTextblock)(state, dispatch);
+  }, map);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveUp.common, function (state, dispatch, view) {
+    var endOfTextblock = view ? view.endOfTextblock.bind(view) : undefined;
+    return (0, _actions.arrow)(_direction.Direction.UP, endOfTextblock)(state, dispatch);
+  }, map);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveDown.common, function (state, dispatch, view) {
+    var endOfTextblock = view ? view.endOfTextblock.bind(view) : undefined;
+    return (0, _actions.arrow)(_direction.Direction.DOWN, endOfTextblock)(state, dispatch);
+  }, map);
+
+  // default PM's Backspace doesn't handle removing block nodes when cursor is after it
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.backspace.common, (0, _actions.deleteNode)(_direction.Direction.BACKWARD), map);
+
+  // handle Delete key (remove node after the cursor)
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.deleteKey.common, (0, _actions.deleteNode)(_direction.Direction.FORWARD), map);
+  return (0, _keymap.keymap)(map);
+}