@atlaskit/editor-plugin-selection 0.1.0

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

@@ -0,0 +1,124 @@
+import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
+import { TableSharedCssClassName, UnsupportedSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { Side } from './selection';
+export const isLeftCursor = side => side === Side.LEFT;
+export function getMediaNearPos(doc, $pos, schema, dir = -1) {
+  let $currentPos = $pos;
+  let currentNode = null;
+  const {
+    mediaSingle,
+    media,
+    mediaGroup
+  } = schema.nodes;
+  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;
+}
+export const isTextBlockNearPos = (doc, schema, $pos, dir) => {
+  let $currentPos = $pos;
+  let 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;
+    }
+  }
+  let childNode = currentNode;
+  while (childNode && childNode.firstChild) {
+    childNode = childNode.firstChild;
+    if (childNode && (childNode.isTextblock || childNode.isText)) {
+      return true;
+    }
+  }
+  return false;
+};
+export function getLayoutModeFromTargetNode(node) {
+  let layout;
+  if (node.attrs.layout) {
+    layout = node.attrs.layout;
+  }
+  if (node.marks && node.marks.length) {
+    layout = (node.marks.find(mark => 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;
+}
+export const 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="${CAPTION_PLACEHOLDER_ID}"]`)) {
+    return true;
+  }
+
+  // check if target node has a parent table node
+  let tableWrap;
+  let node = elem;
+  while (node) {
+    if (node.className && (node.getAttribute('class') || '').indexOf(TableSharedCssClassName.TABLE_CONTAINER) > -1) {
+      tableWrap = node;
+      break;
+    }
+    node = node.parentNode;
+  }
+  if (tableWrap) {
+    const rowControls = tableWrap.querySelector(`.${TableSharedCssClassName.TABLE_ROW_CONTROLS_WRAPPER}`);
+    const isColumnControlsDecoration = elem && elem.classList && elem.classList.contains(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(`.${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
+*/
+export const getComputedStyleForLayoutMode = (dom, node, style) => {
+  if (node && node.type.name === 'table') {
+    const tableContainer = dom.querySelector('.pm-table-container');
+    if (tableContainer) {
+      return window.getComputedStyle(tableContainer);
+    }
+  }
+  return style;
+};

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

@@ -0,0 +1,2 @@
+export { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
+export { setCursorForTopLevelBlocks, setSelectionTopLevelBlocks, hasGapCursorPlugin } from './gap-cursor/actions';

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { selectionPlugin } from './plugin';

package/dist/es2019/plugin-factory.js

@@ -0,0 +1,43 @@
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { reducer } from './reducer';
+import { selectionPluginKey } from './types';
+import { getDecorations, isSelectableContainerNode } from './utils';
+const handleDocChanged = (tr, pluginState) => {
+  // in some collab edge cases mapping decorations could throw an error
+  try {
+    if (pluginState.decorationSet.find().length === 0 && (!tr.selectionSet || getDecorations(tr).find().length === 0)) {
+      return pluginState;
+    }
+    const decorationSet = pluginState.decorationSet.map(tr.mapping, tr.doc);
+    return {
+      ...pluginState,
+      decorationSet
+    };
+  } catch (error) {
+    return {
+      ...pluginState,
+      decorationSet: DecorationSet.empty
+    };
+  }
+};
+const handleSelectionChanged = (tr, pluginState) => {
+  // Reset relative selection pos when user clicks to select a node
+  if ((tr.selection instanceof NodeSelection && isSelectableContainerNode(tr.selection.node) || tr.selection instanceof CellSelection) && !tr.getMeta(selectionPluginKey)) {
+    return {
+      ...pluginState,
+      selectionRelativeToNode: undefined
+    };
+  }
+  return pluginState;
+};
+export const {
+  createCommand,
+  getPluginState,
+  createPluginState
+} = pluginFactory(selectionPluginKey, reducer, {
+  onDocChanged: handleDocChanged,
+  onSelectionChanged: handleSelectionChanged
+});

package/dist/es2019/plugin.js

@@ -0,0 +1,60 @@
+import { selectNearNode } from './commands';
+import gapCursorKeymapPlugin from './pm-plugins/gap-cursor-keymap';
+import gapCursorPlugin from './pm-plugins/gap-cursor-main';
+import { gapCursorPluginKey } from './pm-plugins/gap-cursor-plugin-key';
+import selectionKeymapPlugin from './pm-plugins/keymap';
+import { createPlugin } from './pm-plugins/selection-main';
+import { selectionPluginKey } from './types';
+const displayGapCursor = toggle => ({
+  tr
+}) => {
+  return tr.setMeta(gapCursorPluginKey, {
+    displayGapCursor: toggle
+  });
+};
+export const selectionPlugin = ({
+  config: options
+}) => ({
+  name: 'selection',
+  commands: {
+    displayGapCursor
+  },
+  actions: {
+    selectNearNode: ({
+      selectionRelativeToNode,
+      selection
+    }) => state => {
+      return selectNearNode(selectionRelativeToNode, selection)({
+        tr: state.tr
+      }) || state.tr;
+    }
+  },
+  getSharedState(editorState) {
+    if (!editorState) {
+      return undefined;
+    }
+    const pluginState = selectionPluginKey.getState(editorState);
+    return {
+      selectionRelativeToNode: pluginState === null || pluginState === void 0 ? void 0 : pluginState.selectionRelativeToNode
+    };
+  },
+  pmPlugins() {
+    return [{
+      name: 'selection',
+      plugin: ({
+        dispatch,
+        dispatchAnalyticsEvent
+      }) => createPlugin(dispatch, dispatchAnalyticsEvent, options)
+    }, {
+      name: 'selectionKeymap',
+      plugin: selectionKeymapPlugin
+    }, {
+      name: 'gapCursorKeymap',
+      plugin: () => gapCursorKeymapPlugin()
+    }, {
+      name: 'gapCursor',
+      plugin: () => gapCursorPlugin
+    }];
+  }
+});
+export default selectionPlugin;

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

@@ -0,0 +1,89 @@
+import { NodeSelection, TextSelection } from '@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) {
+  const {
+    doc
+  } = $pos;
+  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.
+    const currentPosIndex = $pos.index();
+    if (currentPosIndex === 0) {
+      return null;
+    }
+    const previousIndex = currentPosIndex - 1;
+    const $previousPos = $pos.doc.resolve($pos.posAtIndex(previousIndex));
+    if (isValidPosition($previousPos)) {
+      return $previousPos;
+    }
+    return null;
+  }
+  if (isValidPosition($pos)) {
+    return $pos;
+  }
+  const positionLevelUp = $pos.before();
+  const resolvedPositionLevelUp = doc.resolve(positionLevelUp);
+  return findEmptySelectableParentNodePosition(resolvedPositionLevelUp, isValidPosition);
+}
+const checkPositionNode = $pos => {
+  const maybeNode = $pos.nodeAfter;
+  if (!maybeNode || !maybeNode.isBlock) {
+    return false;
+  }
+  if (maybeNode.isAtom) {
+    return true;
+  }
+  return isNodeContentEmpty(maybeNode) && NodeSelection.isSelectable(maybeNode);
+};
+function findNextSelectionPosition({
+  $targetHead,
+  $anchor,
+  doc
+}) {
+  const direction = $anchor.pos < $targetHead.pos ? 'down' : 'up';
+  const maybeNextPosition = findEmptySelectableParentNodePosition($targetHead, checkPositionNode);
+  if (maybeNextPosition && maybeNextPosition.nodeAfter) {
+    const nodeAfter = maybeNextPosition.nodeAfter;
+    const pos = maybeNextPosition.pos;
+    const nextPositionToSelect = direction === 'down' ? Math.min(nodeAfter.nodeSize + pos, doc.content.size) : Math.max(pos, 0);
+    return doc.resolve(nextPositionToSelect);
+  }
+  return null;
+}
+export const 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;
+  }
+  const $nextHeadPosition = findNextSelectionPosition({
+    $targetHead: $head,
+    $anchor,
+    doc: view.state.doc
+  });
+  if (!$nextHeadPosition) {
+    return null;
+  }
+  const forcedTextSelection = TextSelection.create(view.state.doc, $anchor.pos, $nextHeadPosition.pos);
+  return forcedTextSelection;
+};

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

@@ -0,0 +1,111 @@
+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);
+};
+
+/**
+ * ED-18072 - Cannot shift + arrow past bodied extension if it is not empty
+ */
+const 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.
+ */
+const isTable = node => {
+  return Boolean(node && ['table'].includes(node.type.name));
+};
+const isProblematicNode = node => {
+  return isCollpasedExpand(node) || isBodiedExtension(node) || isTable(node);
+};
+const findFixedProblematicNodePosition = (doc, $head, direction) => {
+  if ($head.pos === 0 || $head.depth === 0) {
+    return null;
+  }
+  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 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;
+  }
+  const {
+    doc,
+    selection: {
+      $head,
+      $anchor
+    }
+  } = view.state;
+  if (event.key === 'ArrowRight' && $head.nodeAfter || event.key === 'ArrowLeft' && $head.nodeBefore) {
+    return false;
+  }
+  const direction = ['ArrowLeft', 'ArrowUp', 'Home'].includes(event.key) ? 'up' : 'down';
+  const $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)
+    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);
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};

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

@@ -0,0 +1,40 @@
+import { backspace, bindKeymapWithCommand, deleteKey, insertNewLine, moveDown, moveLeft, moveRight, moveUp } from '@atlaskit/editor-common/keymaps';
+import { createParagraphNear } from '@atlaskit/editor-prosemirror/commands';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { arrow, deleteNode } from '../gap-cursor/actions';
+import { Direction } from '../gap-cursor/direction';
+import { GapCursorSelection } from '../gap-cursor/selection';
+export default function keymapPlugin() {
+  const map = {};
+  bindKeymapWithCommand(insertNewLine.common, (state, dispatch, view) => {
+    const isInGapCursor = state.selection instanceof GapCursorSelection;
+    // Only operate in gap cursor
+    if (!isInGapCursor) {
+      return false;
+    }
+    return createParagraphNear(state, dispatch);
+  }, map);
+  bindKeymapWithCommand(moveLeft.common, (state, dispatch, view) => {
+    const endOfTextblock = view ? view.endOfTextblock.bind(view) : undefined;
+    return arrow(Direction.LEFT, endOfTextblock)(state, dispatch, view);
+  }, map);
+  bindKeymapWithCommand(moveRight.common, (state, dispatch, view) => {
+    const endOfTextblock = view ? view.endOfTextblock.bind(view) : undefined;
+    return arrow(Direction.RIGHT, endOfTextblock)(state, dispatch);
+  }, map);
+  bindKeymapWithCommand(moveUp.common, (state, dispatch, view) => {
+    const endOfTextblock = view ? view.endOfTextblock.bind(view) : undefined;
+    return arrow(Direction.UP, endOfTextblock)(state, dispatch);
+  }, map);
+  bindKeymapWithCommand(moveDown.common, (state, dispatch, view) => {
+    const endOfTextblock = view ? view.endOfTextblock.bind(view) : undefined;
+    return arrow(Direction.DOWN, endOfTextblock)(state, dispatch);
+  }, map);
+
+  // default PM's Backspace doesn't handle removing block nodes when cursor is after it
+  bindKeymapWithCommand(backspace.common, deleteNode(Direction.BACKWARD), map);
+
+  // handle Delete key (remove node after the cursor)
+  bindKeymapWithCommand(deleteKey.common, deleteNode(Direction.FORWARD), map);
+  return keymap(map);
+}

package/dist/es2019/pm-plugins/gap-cursor-main.js

@@ -0,0 +1,157 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { GapCursorSelection, Side as GapCursorSide, hideCaretModifier, JSON_ID, setGapCursorAtPos, Side } from '@atlaskit/editor-common/selection';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { findPositionOfNodeBefore } from '@atlaskit/editor-prosemirror/utils';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { deleteNode } from '../gap-cursor/actions';
+import { Direction } from '../gap-cursor/direction';
+import { getLayoutModeFromTargetNode, isIgnoredClick } from '../gap-cursor/utils';
+import { toDOM } from '../gap-cursor/utils/place-gap-cursor';
+import { gapCursorPluginKey } from './gap-cursor-plugin-key';
+const plugin = new SafePlugin({
+  key: gapCursorPluginKey,
+  state: {
+    init: () => ({
+      selectionIsGapCursor: false,
+      displayGapCursor: true
+    }),
+    apply: (tr, pluginState, _oldState, newState) => {
+      var _meta$displayGapCurso;
+      const meta = tr.getMeta(gapCursorPluginKey);
+      const selectionIsGapCursor = newState.selection instanceof GapCursorSelection;
+      return {
+        selectionIsGapCursor,
+        // only attempt to hide gap cursor if selection is gap cursor
+        displayGapCursor: selectionIsGapCursor ? (_meta$displayGapCurso = meta === null || meta === void 0 ? void 0 : meta.displayGapCursor) !== null && _meta$displayGapCurso !== void 0 ? _meta$displayGapCurso : pluginState.displayGapCursor : true
+      };
+    }
+  },
+  view: view => {
+    /**
+     * If the selection is at the beginning of a document and is a NodeSelection,
+     * convert to a GapCursor selection. This is to stop users accidentally replacing
+     * the first node of a document by accident.
+     */
+    if (view.state.selection.anchor === 0 && view.state.selection instanceof NodeSelection) {
+      // This is required otherwise the dispatch doesn't trigger in the correct place
+      window.requestAnimationFrame(() => {
+        view.dispatch(view.state.tr.setSelection(new GapCursorSelection(view.state.doc.resolve(0), GapCursorSide.LEFT)));
+      });
+    }
+    return {
+      update(view) {
+        const {
+          selectionIsGapCursor
+        } = gapCursorPluginKey.getState(view.state);
+        /**
+         * Starting with prosemirror-view 1.19.4, cursor wrapper that previously was hiding cursor doesn't exist:
+         * https://github.com/ProseMirror/prosemirror-view/commit/4a56bc7b7e61e96ef879d1dae1014ede0fc09e43
+         *
+         * Because it was causing issues with RTL: https://github.com/ProseMirror/prosemirror/issues/948
+         *
+         * This is the work around which uses `caret-color: transparent` in order to hide regular caret,
+         * when gap cursor is visible.
+         *
+         * Browser support is pretty good: https://caniuse.com/#feat=css-caret-color
+         */
+        view.dom.classList.toggle(hideCaretModifier, selectionIsGapCursor);
+      }
+    };
+  },
+  props: {
+    decorations: editorState => {
+      const {
+        doc,
+        selection
+      } = editorState;
+      const {
+        displayGapCursor
+      } = gapCursorPluginKey.getState(editorState);
+      if (selection instanceof GapCursorSelection && displayGapCursor) {
+        const {
+          $from,
+          side
+        } = selection;
+
+        // render decoration DOM node always to the left of the target node even if selection points to the right
+        // otherwise positioning of the right gap cursor is a nightmare when the target node has a nodeView with vertical margins
+        let position = selection.head;
+        const isRightCursor = side === Side.RIGHT;
+        if (isRightCursor && $from.nodeBefore) {
+          const nodeBeforeStart = findPositionOfNodeBefore(selection);
+          if (typeof nodeBeforeStart === 'number') {
+            position = nodeBeforeStart;
+          }
+        }
+        const node = isRightCursor ? $from.nodeBefore : $from.nodeAfter;
+        const layoutMode = node && getLayoutModeFromTargetNode(node);
+        return DecorationSet.create(doc, [Decoration.widget(position, toDOM, {
+          key: `${JSON_ID}-${side}-${layoutMode}`,
+          side: layoutMode ? -1 : 0
+        })]);
+      }
+      return null;
+    },
+    // render gap cursor only when its valid
+    createSelectionBetween(view, $anchor, $head) {
+      if (view && view.state && view.state.selection instanceof CellSelection) {
+        // Do not show GapCursor when there is a CellSection happening
+        return null;
+      }
+      if ($anchor.pos === $head.pos && GapCursorSelection.valid($head)) {
+        return new GapCursorSelection($head);
+      }
+      return null;
+    },
+    handleClick(view, nodePos, event) {
+      var _$pos$parent;
+      const posAtCoords = view.posAtCoords({
+        left: event.clientX,
+        top: event.clientY
+      });
+      if (!posAtCoords || isIgnoredClick(event.target)) {
+        return false;
+      }
+      const isInsideTheTarget = posAtCoords.pos === posAtCoords.inside;
+      if (isInsideTheTarget) {
+        return false;
+      }
+      const leftSideOffsetX = 20;
+      const side = event.offsetX > leftSideOffsetX ? Side.RIGHT : Side.LEFT;
+      const $pos = view.state.doc.resolve(nodePos);
+      // In the new prosemirror-view posAtCoords  is not returning a precise value for our media nodes
+      if (((_$pos$parent = $pos.parent) === null || _$pos$parent === void 0 ? void 0 : _$pos$parent.type.name) === 'mediaSingle') {
+        const $insidePos = view.state.doc.resolve(Math.max(posAtCoords.inside, 0));
+        // We don't have GapCursors problems when the node target is inside the root level
+        if ($insidePos.depth <= 1) {
+          return false;
+        }
+        const mediaGapCursor = !$pos.nodeBefore ? $pos.before() : $pos.after();
+        return setGapCursorAtPos(mediaGapCursor, side)(view.state, view.dispatch);
+      }
+      const docSize = view.state.doc.content.size;
+      const nodeInside = posAtCoords.inside < 0 || posAtCoords.inside > docSize ? null : view.state.doc.nodeAt(posAtCoords.inside);
+      if (nodeInside !== null && nodeInside !== void 0 && nodeInside.isAtom) {
+        return false;
+      }
+      return setGapCursorAtPos(nodePos, side)(view.state, view.dispatch);
+    },
+    handleDOMEvents: {
+      /**
+       * Android composition events aren't handled well by Prosemirror
+       * We've added a couple of beforeinput hooks to help PM out when trying to delete
+       * certain nodes. We can remove these when PM has better composition support.
+       * @see https://github.com/ProseMirror/prosemirror/issues/543
+       */
+      beforeinput: (view, event) => {
+        if (event.inputType === 'deleteContentBackward' && view.state.selection instanceof GapCursorSelection) {
+          event.preventDefault();
+          return deleteNode(Direction.BACKWARD)(view.state, view.dispatch);
+        }
+        return false;
+      }
+    }
+  }
+});
+export default plugin;

package/dist/es2019/pm-plugins/gap-cursor-plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const gapCursorPluginKey = new PluginKey('gapCursorPlugin');

package/dist/es2019/pm-plugins/keymap.js

@@ -0,0 +1,10 @@
+import { bindKeymapWithCommand, moveLeft, moveRight } from '@atlaskit/editor-common/keymaps';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { arrowLeft, arrowRight } from '../commands';
+function keymapPlugin() {
+  const list = {};
+  bindKeymapWithCommand(moveRight.common, arrowRight, list);
+  bindKeymapWithCommand(moveLeft.common, arrowLeft, list);
+  return keymap(list);
+}
+export default keymapPlugin;