@atlaskit/editor-plugin-selection 0.1.0

package/dist/esm/gap-cursor/actions.js

@@ -0,0 +1,249 @@
+import { atTheBeginningOfDoc, atTheEndOfDoc } from '@atlaskit/editor-common/selection';
+import { isMediaNode, isNodeBeforeMediaNode, isPositionNearTableRow, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findDomRefAtPos, findPositionOfNodeBefore, removeNodeBefore } from '@atlaskit/editor-prosemirror/utils';
+import { gapCursorPluginKey } from '../pm-plugins/gap-cursor-plugin-key';
+import { Direction, isBackward, isForward } from './direction';
+import { GapCursorSelection, Side } from './selection';
+import { isTextBlockNearPos } from './utils';
+import { isValidTargetNode } from './utils/is-valid-target-node';
+export var shouldSkipGapCursor = function shouldSkipGapCursor(direction, state, $pos) {
+  var _$pos$nodeBefore;
+  var doc = state.doc,
+    schema = state.schema;
+  switch (direction) {
+    case Direction.UP:
+      if (atTheBeginningOfDoc(state)) {
+        return false;
+      }
+      return isPositionNearTableRow($pos, schema, 'before') || isTextBlockNearPos(doc, schema, $pos, -1) || isNodeBeforeMediaNode($pos, state);
+    case Direction.DOWN:
+      return atTheEndOfDoc(state) || isTextBlockNearPos(doc, schema, $pos, 1) || isPositionNearTableRow($pos, schema, 'after') || ((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.type.name) === 'text' && !$pos.nodeAfter // end of a paragraph
+      ;
+
+    default:
+      return false;
+  }
+};
+
+// These cases should be handled using the handleMediaGapCursor function
+function shouldHandleMediaGapCursor(dir, state) {
+  var _selection$$from$node;
+  var selection = state.selection;
+  var upArrowFromGapCursorIntoMedia = selection instanceof GapCursorSelection && dir === Direction.UP && selection.$from.nodeBefore && isMediaNode(selection.$from.nodeBefore);
+  var downArrowFromGapCursorIntoMediaGroup = selection instanceof GapCursorSelection && dir === Direction.DOWN && ((_selection$$from$node = selection.$from.nodeAfter) === null || _selection$$from$node === void 0 ? void 0 : _selection$$from$node.type.name) === 'mediaGroup';
+  return upArrowFromGapCursorIntoMedia || downArrowFromGapCursorIntoMediaGroup;
+}
+
+// Handle media gap cursor for up/down arrow into media nodes
+// Should check this case by using shouldHandleMediaGapCursor first
+function handleMediaGapCursor(dir, state) {
+  var selection = state.selection,
+    tr = state.tr;
+  var $pos = isBackward(dir) ? selection.$from : selection.$to;
+  if (dir === Direction.UP && selection.$from.nodeBefore && isMediaNode(selection.$from.nodeBefore)) {
+    var _tr$doc$nodeAt;
+    var nodeBeforePos = findPositionOfNodeBefore(tr.selection);
+    if (nodeBeforePos && selection.side === 'right' && ((_tr$doc$nodeAt = tr.doc.nodeAt(nodeBeforePos)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.type.name) === 'mediaSingle') {
+      tr.setSelection(new NodeSelection(tr.doc.resolve(nodeBeforePos))).scrollIntoView();
+    } else if (nodeBeforePos || nodeBeforePos === 0) {
+      tr.setSelection(new GapCursorSelection(tr.doc.resolve(nodeBeforePos), Side.LEFT)).scrollIntoView();
+    }
+  }
+  if (dir === Direction.DOWN && selection.$from.nodeAfter) {
+    var nodeAfterPos = selection.side === 'right' ? $pos.pos : $pos.pos + selection.$from.nodeAfter.nodeSize;
+    if (nodeAfterPos) {
+      tr.setSelection(new GapCursorSelection(tr.doc.resolve(nodeAfterPos), Side.LEFT)).scrollIntoView();
+    }
+  }
+  return tr;
+}
+export var arrow = function arrow(dir, endOfTextblock) {
+  return function (state, dispatch, view) {
+    var doc = state.doc,
+      selection = state.selection,
+      tr = state.tr;
+    var $pos = isBackward(dir) ? selection.$from : selection.$to;
+    var mustMove = selection.empty;
+
+    // start from text selection
+    if (selection instanceof TextSelection) {
+      // if cursor is in the middle of a text node, do nothing
+      if (!endOfTextblock || !endOfTextblock(dir.toString())) {
+        return false;
+      }
+
+      // UP/DOWN jumps to the nearest texblock skipping gapcursor whenever possible
+      if (shouldSkipGapCursor(dir, state, $pos)) {
+        return false;
+      }
+
+      // otherwise resolve previous/next position
+      $pos = doc.resolve(isBackward(dir) ? $pos.before() : $pos.after());
+      mustMove = false;
+    }
+    if (selection instanceof NodeSelection) {
+      if (selection.node.isInline) {
+        return false;
+      }
+      if (dir === Direction.UP && !atTheBeginningOfDoc(state) && !isNodeBeforeMediaNode($pos, state) || dir === Direction.DOWN) {
+        // We dont add gap cursor on node selections going up and down
+        // Except we do if we're going up for a block node which is the
+        // first node in the document OR the node before is a media node
+        return false;
+      }
+    }
+
+    // Handle media gap cursor for up/down arrow into media nodes
+    if (shouldHandleMediaGapCursor(dir, state)) {
+      var updatedTr = handleMediaGapCursor(dir, state);
+      if (dispatch) {
+        dispatch(updatedTr);
+      }
+      return true;
+    }
+
+    // when jumping between block nodes at the same depth, we need to reverse cursor without changing ProseMirror position
+    if (selection instanceof GapCursorSelection &&
+    // next node allow gap cursor position
+    isValidTargetNode(isBackward(dir) ? $pos.nodeBefore : $pos.nodeAfter) && (
+    // gap cursor changes block node
+    isBackward(dir) && selection.side === Side.LEFT || isForward(dir) && selection.side === Side.RIGHT)) {
+      // reverse cursor position
+      if (dispatch) {
+        dispatch(tr.setSelection(new GapCursorSelection($pos, selection.side === Side.RIGHT ? Side.LEFT : Side.RIGHT)).scrollIntoView());
+      }
+      return true;
+    }
+    if (view) {
+      var domAtPos = view.domAtPos.bind(view);
+      var target = findDomRefAtPos($pos.pos, domAtPos);
+      if (target && target.textContent === ZERO_WIDTH_SPACE) {
+        return false;
+      }
+    }
+    var nextSelection = GapCursorSelection.findFrom($pos, isBackward(dir) ? -1 : 1, mustMove);
+    if (!nextSelection) {
+      return false;
+    }
+    if (!isValidTargetNode(isForward(dir) ? nextSelection.$from.nodeBefore : nextSelection.$from.nodeAfter)) {
+      // reverse cursor position
+      if (dispatch) {
+        dispatch(tr.setSelection(new GapCursorSelection(nextSelection.$from, isForward(dir) ? Side.LEFT : Side.RIGHT)).scrollIntoView());
+      }
+      return true;
+    }
+    if (dispatch) {
+      dispatch(tr.setSelection(nextSelection).scrollIntoView());
+    }
+    return true;
+  };
+};
+export var deleteNode = function deleteNode(dir) {
+  return function (state, dispatch) {
+    if (state.selection instanceof GapCursorSelection) {
+      var _state$selection = state.selection,
+        $from = _state$selection.$from,
+        $anchor = _state$selection.$anchor;
+      var tr = state.tr;
+      if (isBackward(dir)) {
+        if (state.selection.side === 'left') {
+          tr.setSelection(new GapCursorSelection($anchor, Side.RIGHT));
+          if (dispatch) {
+            dispatch(tr);
+          }
+          return true;
+        }
+        tr = removeNodeBefore(state.tr);
+      } else if ($from.nodeAfter) {
+        tr = tr.delete($from.pos, $from.pos + $from.nodeAfter.nodeSize);
+      }
+      if (dispatch) {
+        dispatch(tr.setSelection(Selection.near(tr.doc.resolve(tr.mapping.map(state.selection.$from.pos)))).scrollIntoView());
+      }
+      return true;
+    }
+    return false;
+  };
+};
+
+// This function captures clicks outside of the ProseMirror contentEditable area
+// see also description of "handleClick" in gap-cursor pm-plugin
+var captureCursorCoords = function captureCursorCoords(event, editorRef, posAtCoords, tr) {
+  var rect = editorRef.getBoundingClientRect();
+
+  // capture clicks before the first block element
+  if (event.clientY < rect.top) {
+    return {
+      position: 0,
+      side: Side.LEFT
+    };
+  }
+  if (rect.left > 0) {
+    // calculate start position of a node that is vertically at the same level
+    var _coords = posAtCoords({
+      left: rect.left,
+      top: event.clientY
+    });
+    if (_coords && _coords.inside > -1) {
+      var $from = tr.doc.resolve(_coords.inside);
+      var start = $from.before(1);
+      var side = event.clientX < rect.left ? Side.LEFT : Side.RIGHT;
+      var position;
+      if (side === Side.LEFT) {
+        position = start;
+      } else {
+        var node = tr.doc.nodeAt(start);
+        if (node) {
+          position = start + node.nodeSize;
+        }
+      }
+      return {
+        position: position,
+        side: side
+      };
+    }
+  }
+  return null;
+};
+export var setSelectionTopLevelBlocks = function setSelectionTopLevelBlocks(tr, event, editorRef, posAtCoords, editorFocused) {
+  var cursorCoords = captureCursorCoords(event, editorRef, posAtCoords, tr);
+  if (!cursorCoords) {
+    return;
+  }
+  var $pos = cursorCoords.position !== undefined ? tr.doc.resolve(cursorCoords.position) : null;
+  if ($pos === null) {
+    return;
+  }
+  var isGapCursorAllowed = cursorCoords.side === Side.LEFT ? isValidTargetNode($pos.nodeAfter) : isValidTargetNode($pos.nodeBefore);
+  if (isGapCursorAllowed && GapCursorSelection.valid($pos)) {
+    // this forces PM to re-render the decoration node if we change the side of the gap cursor, it doesn't do it by default
+    if (tr.selection instanceof GapCursorSelection) {
+      tr.setSelection(Selection.near($pos));
+    } else {
+      tr.setSelection(new GapCursorSelection($pos, cursorCoords.side));
+    }
+  }
+  // try to set text selection if the editor isnt focused
+  // if the editor is focused, we are most likely dragging a selection outside.
+  else if (editorFocused === false) {
+    var selectionTemp = Selection.findFrom($pos, cursorCoords.side === Side.LEFT ? 1 : -1, true);
+    if (selectionTemp) {
+      tr.setSelection(selectionTemp);
+    }
+  }
+};
+export var setCursorForTopLevelBlocks = function setCursorForTopLevelBlocks(event, editorRef, posAtCoords, editorFocused) {
+  return function (state, dispatch) {
+    var tr = state.tr;
+    setSelectionTopLevelBlocks(tr, event, editorRef, posAtCoords, editorFocused);
+    if (tr.selectionSet && dispatch) {
+      dispatch(tr);
+      return true;
+    }
+    return false;
+  };
+};
+export var hasGapCursorPlugin = function hasGapCursorPlugin(state) {
+  return Boolean(gapCursorPluginKey.get(state));
+};

package/dist/esm/gap-cursor/direction.js

@@ -0,0 +1,15 @@
+export var Direction = /*#__PURE__*/function (Direction) {
+  Direction["UP"] = "up";
+  Direction["RIGHT"] = "right";
+  Direction["DOWN"] = "down";
+  Direction["LEFT"] = "left";
+  Direction["BACKWARD"] = "backward";
+  Direction["FORWARD"] = "forward";
+  return Direction;
+}({});
+export function isBackward(dir) {
+  return [Direction.UP, Direction.LEFT, Direction.BACKWARD].indexOf(dir) !== -1;
+}
+export function isForward(dir) {
+  return [Direction.RIGHT, Direction.DOWN, Direction.FORWARD].indexOf(dir) !== -1;
+}

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

@@ -0,0 +1 @@
+export { GapCursorSelection, JSON_ID, Side, GapBookmark } from '@atlaskit/editor-common/selection';

package/dist/esm/gap-cursor/utils/is-ignored.js

@@ -0,0 +1 @@
+export { isIgnored } from '@atlaskit/editor-common/selection';

package/dist/esm/gap-cursor/utils/is-valid-target-node.js

@@ -0,0 +1 @@
+export { isValidTargetNode } from '@atlaskit/editor-common/selection';

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

@@ -0,0 +1,97 @@
+import _toArray from "@babel/runtime/helpers/toArray";
+import { Side } from '@atlaskit/editor-common/selection';
+import { getComputedStyleForLayoutMode, getLayoutModeFromTargetNode, isLeftCursor } from '../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 = _toArray(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 (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");
+    }
+  }
+};
+export var toDOM = function toDOM(view, getPos) {
+  var selection = view.state.selection;
+  var $from = selection.$from,
+    side = selection.side;
+  var isRightCursor = side === 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 && 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 = getComputedStyleForLayoutMode(dom, node, style);
+      gapCursor.style.width = "".concat(measureWidth(breakoutModeStyle), "px");
+    } else {
+      mutateElementStyle(gapCursor, style, selection.side);
+    }
+  }
+  return element;
+};

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

@@ -0,0 +1,128 @@
+import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
+import { TableSharedCssClassName, UnsupportedSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { Side } from './selection';
+export var isLeftCursor = function isLeftCursor(side) {
+  return side === Side.LEFT;
+};
+export 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;
+}
+export var 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;
+};
+export 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;
+}
+export var 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(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(TableSharedCssClassName.TABLE_CONTAINER) > -1) {
+      tableWrap = node;
+      break;
+    }
+    node = node.parentNode;
+  }
+  if (tableWrap) {
+    var rowControls = tableWrap.querySelector(".".concat(TableSharedCssClassName.TABLE_ROW_CONTROLS_WRAPPER));
+    var 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(".".concat(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 var 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/esm/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/esm/index.js

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

package/dist/esm/plugin-factory.js

@@ -0,0 +1,43 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+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';
+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 || 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: DecorationSet.empty
+    });
+  }
+};
+var handleSelectionChanged = function 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 _objectSpread(_objectSpread({}, pluginState), {}, {
+      selectionRelativeToNode: undefined
+    });
+  }
+  return pluginState;
+};
+var _pluginFactory = pluginFactory(selectionPluginKey, reducer, {
+    onDocChanged: handleDocChanged,
+    onSelectionChanged: handleSelectionChanged
+  }),
+  createCommand = _pluginFactory.createCommand,
+  getPluginState = _pluginFactory.getPluginState,
+  createPluginState = _pluginFactory.createPluginState;
+export { createCommand, getPluginState, createPluginState };

package/dist/esm/plugin.js

@@ -0,0 +1,68 @@
+import { selectNearNode as _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';
+var displayGapCursor = function displayGapCursor(toggle) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    return tr.setMeta(gapCursorPluginKey, {
+      displayGapCursor: toggle
+    });
+  };
+};
+export var 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 _selectNearNode(selectionRelativeToNode, selection)({
+            tr: state.tr
+          }) || state.tr;
+        };
+      }
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      var pluginState = 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 createPlugin(dispatch, dispatchAnalyticsEvent, options);
+        }
+      }, {
+        name: 'selectionKeymap',
+        plugin: selectionKeymapPlugin
+      }, {
+        name: 'gapCursorKeymap',
+        plugin: function plugin() {
+          return gapCursorKeymapPlugin();
+        }
+      }, {
+        name: 'gapCursor',
+        plugin: function plugin() {
+          return gapCursorPlugin;
+        }
+      }];
+    }
+  };
+};
+export default selectionPlugin;