@atlaskit/editor-plugin-selection 0.1.0

package/dist/es2019/commands.js

@@ -0,0 +1,250 @@
+import { isIgnored as isIgnoredByGapCursor } from '@atlaskit/editor-common/selection';
+import { isEmptyParagraph, isNodeEmpty } from '@atlaskit/editor-common/utils';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { SelectionActionTypes } from './actions';
+import { GapCursorSelection, Side } from './gap-cursor-selection';
+import { createCommand, getPluginState } from './plugin-factory';
+import { RelativeSelectionPos, SelectionDirection, selectionPluginKey } from './types';
+import { findFirstChildNodeToSelect, findLastChildNodeToSelect, findSelectableContainerAfter, findSelectableContainerBefore, findSelectableContainerParent, isSelectableContainerNode, isSelectionAtEndOfParentNode, isSelectionAtStartOfParentNode } from './utils';
+export const selectNearNode = (selectionRelativeToNode, selection) => ({
+  tr
+}) => {
+  tr.setMeta(selectionPluginKey, {
+    type: SelectionActionTypes.SET_RELATIVE_SELECTION,
+    selectionRelativeToNode
+  });
+  if (selection) {
+    return tr.setSelection(selection);
+  }
+  return tr;
+};
+export const setSelectionRelativeToNode = (selectionRelativeToNode, selection) => createCommand({
+  type: SelectionActionTypes.SET_RELATIVE_SELECTION,
+  selectionRelativeToNode
+}, tr => {
+  return selectNearNode(selectionRelativeToNode, selection)({
+    tr
+  }) || tr;
+});
+export const arrowRight = (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  if (selection instanceof GapCursorSelection) {
+    return arrowRightFromGapCursor(selection)(state, dispatch);
+  } else if (selection instanceof NodeSelection) {
+    return arrowRightFromNode(selection)(state, dispatch);
+  } else if (selection instanceof TextSelection) {
+    return arrowRightFromText(selection)(state, dispatch);
+  }
+  return false;
+};
+export const arrowLeft = (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  if (selection instanceof GapCursorSelection) {
+    return arrowLeftFromGapCursor(selection)(state, dispatch);
+  } else if (selection instanceof NodeSelection) {
+    return arrowLeftFromNode(selection)(state, dispatch);
+  } else if (selection instanceof TextSelection) {
+    return arrowLeftFromText(selection)(state, dispatch);
+  }
+  return false;
+};
+const arrowRightFromGapCursor = selection => (state, dispatch) => {
+  const {
+    $from,
+    $to,
+    side
+  } = selection;
+  if (side === Side.LEFT) {
+    const selectableNode = findSelectableContainerAfter($to, state.doc);
+    if (selectableNode) {
+      return setSelectionRelativeToNode(RelativeSelectionPos.Start, NodeSelection.create(state.doc, selectableNode.pos))(state, dispatch);
+    }
+  } else if (side === Side.RIGHT && isSelectionAtEndOfParentNode($from, selection)) {
+    const selectableNode = findSelectableContainerParent(selection);
+    if (selectableNode) {
+      return setSelectionRelativeToNode(RelativeSelectionPos.End, NodeSelection.create(state.doc, selectableNode.pos))(state, dispatch);
+    }
+  }
+  return false;
+};
+const arrowLeftFromGapCursor = selection => (state, dispatch) => {
+  const {
+    $from,
+    side
+  } = selection;
+  const {
+    selectionRelativeToNode
+  } = getPluginState(state);
+  if (side === Side.RIGHT) {
+    const selectableNode = findSelectableContainerBefore($from, state.doc);
+    if (selectableNode) {
+      return setSelectionRelativeToNode(RelativeSelectionPos.End, NodeSelection.create(state.doc, selectableNode.pos))(state, dispatch);
+    }
+  } else if (side === Side.LEFT && isSelectionAtStartOfParentNode($from, selection)) {
+    if (selectionRelativeToNode === RelativeSelectionPos.Before) {
+      const $parent = state.doc.resolve(selection.$from.before(selection.$from.depth));
+      if ($parent) {
+        const selectableNode = findSelectableContainerBefore($parent, state.doc);
+        if (selectableNode && isIgnoredByGapCursor(selectableNode.node)) {
+          // selection is inside node without gap cursor preceeded by another node without gap cursor - set node selection for previous node
+          return setSelectionRelativeToNode(RelativeSelectionPos.End, NodeSelection.create(state.doc, selectableNode.pos))(state, dispatch);
+        }
+      }
+      // we don't return this as we want to reset the relative pos, but not block other plugins
+      // from responding to arrow left key
+      setSelectionRelativeToNode()(state, dispatch);
+    } else {
+      const selectableNode = findSelectableContainerParent(selection);
+      if (selectableNode) {
+        return setSelectionRelativeToNode(RelativeSelectionPos.Start, NodeSelection.create(state.doc, selectableNode.pos))(state, dispatch);
+      }
+    }
+  }
+  return false;
+};
+const arrowRightFromNode = selection => (state, dispatch) => {
+  const {
+    node,
+    from,
+    $to
+  } = selection;
+  const {
+    selectionRelativeToNode
+  } = getPluginState(state);
+  if (node.isAtom) {
+    if (isSelectionAtEndOfParentNode($to, selection)) {
+      // selection is for inline node that is the last child of its parent node - set text selection after it
+      return findAndSetTextSelection(RelativeSelectionPos.End, state.doc.resolve(from + 1), SelectionDirection.After)(state, dispatch);
+    }
+    return false;
+  } else if (selectionRelativeToNode === RelativeSelectionPos.Start) {
+    // selection is for container node - set selection inside it at the start
+    return setSelectionInsideAtNodeStart(RelativeSelectionPos.Inside, node, from)(state, dispatch);
+  } else if (isIgnoredByGapCursor(node) && (!selectionRelativeToNode || selectionRelativeToNode === RelativeSelectionPos.End)) {
+    const selectableNode = findSelectableContainerAfter($to, state.doc);
+    if (selectableNode && isIgnoredByGapCursor(selectableNode.node)) {
+      // selection is for node without gap cursor followed by another node without gap cursor - set node selection for next node
+      return setSelectionRelativeToNode(RelativeSelectionPos.Start, NodeSelection.create(state.doc, selectableNode.pos))(state, dispatch);
+    }
+  }
+  return false;
+};
+const arrowLeftFromNode = selection => (state, dispatch) => {
+  const {
+    node,
+    from,
+    to,
+    $from
+  } = selection;
+  const {
+    selectionRelativeToNode
+  } = getPluginState(state);
+  if (node.isAtom) {
+    if (isSelectionAtStartOfParentNode($from, selection)) {
+      // selection is for inline node that is the first child of its parent node - set text selection before it
+      return findAndSetTextSelection(RelativeSelectionPos.Start, state.doc.resolve(from), SelectionDirection.Before)(state, dispatch);
+    }
+    return false;
+  } else if (selectionRelativeToNode === RelativeSelectionPos.End) {
+    // selection is for container node - set selection inside it at the end
+    return setSelectionInsideAtNodeEnd(RelativeSelectionPos.Inside, node, from, to)(state, dispatch);
+  } else if (!selectionRelativeToNode || selectionRelativeToNode === RelativeSelectionPos.Inside) {
+    // selection is for container node - set selection inside it at the start
+    // (this is a special case when the user selects by clicking node)
+    return setSelectionInsideAtNodeStart(RelativeSelectionPos.Before, node, from)(state, dispatch);
+  } else if (isIgnoredByGapCursor(node) && selectionRelativeToNode === RelativeSelectionPos.Start) {
+    // selection is for node without gap cursor preceeded by another node without gap cursor - set node selection for previous node
+    const selectableNode = findSelectableContainerBefore($from, state.doc);
+    if (selectableNode && isIgnoredByGapCursor(selectableNode.node)) {
+      return setSelectionRelativeToNode(RelativeSelectionPos.End, NodeSelection.create(state.doc, selectableNode.pos))(state, dispatch);
+    }
+  }
+  return false;
+};
+const arrowRightFromText = selection => (state, dispatch) => {
+  if (isSelectionAtEndOfParentNode(selection.$to, selection)) {
+    const selectableNode = findSelectableContainerParent(selection);
+    if (selectableNode) {
+      return setSelectionRelativeToNode(RelativeSelectionPos.End, NodeSelection.create(state.doc, selectableNode.pos))(state, dispatch);
+    }
+  }
+  return false;
+};
+const arrowLeftFromText = selection => (state, dispatch) => {
+  const {
+    selectionRelativeToNode
+  } = getPluginState(state);
+  if (selectionRelativeToNode === RelativeSelectionPos.Before) {
+    const selectableNode = findSelectableContainerBefore(selection.$from, state.doc);
+    if (selectableNode && isIgnoredByGapCursor(selectableNode.node)) {
+      // selection is inside node without gap cursor preceeded by another node without gap cursor - set node selection for previous node
+      return setSelectionRelativeToNode(RelativeSelectionPos.End, NodeSelection.create(state.doc, selectableNode.pos))(state, dispatch);
+    }
+    // we don't return this as we want to reset the relative pos, but not block other plugins
+    // from responding to arrow left key
+    setSelectionRelativeToNode(undefined)(state, dispatch);
+  } else if (isSelectionAtStartOfParentNode(selection.$from, selection)) {
+    const selectableNode = findSelectableContainerParent(selection);
+    if (selectableNode) {
+      return setSelectionRelativeToNode(RelativeSelectionPos.Start, NodeSelection.create(state.doc, selectableNode.pos))(state, dispatch);
+    }
+  }
+  return false;
+};
+const findAndSetTextSelection = (selectionRelativeToNode, $pos, dir) => (state, dispatch) => {
+  const sel = Selection.findFrom($pos, dir, true);
+  if (sel) {
+    return setSelectionRelativeToNode(selectionRelativeToNode, sel)(state, dispatch);
+  }
+  return false;
+};
+const setSelectionInsideAtNodeStart = (selectionRelativeToNode, node, pos) => (state, dispatch) => {
+  if (isNodeEmpty(node)) {
+    return findAndSetTextSelection(selectionRelativeToNode, state.doc.resolve(pos), SelectionDirection.After)(state, dispatch);
+  }
+  const selectableNode = findFirstChildNodeToSelect(node);
+  if (selectableNode) {
+    const {
+      node: childNode,
+      pos: childPos
+    } = selectableNode;
+    const selectionPos = pos + childPos + 1;
+    if (childNode.isText || childNode.isAtom) {
+      return findAndSetTextSelection(selectionRelativeToNode, state.doc.resolve(selectionPos), SelectionDirection.Before)(state, dispatch);
+    } else if (isEmptyParagraph(childNode)) {
+      return findAndSetTextSelection(selectionRelativeToNode, state.doc.resolve(selectionPos + 1), SelectionDirection.Before)(state, dispatch);
+    } else if (!isIgnoredByGapCursor(node)) {
+      return setSelectionRelativeToNode(selectionRelativeToNode, new GapCursorSelection(state.doc.resolve(selectionPos), Side.LEFT))(state, dispatch);
+    } else if (isSelectableContainerNode(node)) {
+      return setSelectionRelativeToNode(selectionRelativeToNode, NodeSelection.create(state.doc, selectionPos))(state, dispatch);
+    }
+  }
+  return false;
+};
+export const setSelectionInsideAtNodeEnd = (selectionRelativeToNode, node, from, to) => (state, dispatch) => {
+  if (isNodeEmpty(node)) {
+    return findAndSetTextSelection(selectionRelativeToNode, state.doc.resolve(to), SelectionDirection.Before)(state, dispatch);
+  }
+  const selectableNode = findLastChildNodeToSelect(node);
+  if (selectableNode) {
+    const {
+      node: childNode,
+      pos: childPos
+    } = selectableNode;
+    const selectionPos = from + childPos + childNode.nodeSize;
+    if (childNode.isText || childNode.isAtom) {
+      return findAndSetTextSelection(selectionRelativeToNode, state.doc.resolve(selectionPos + 1), SelectionDirection.After)(state, dispatch);
+    } else if (isEmptyParagraph(childNode)) {
+      return findAndSetTextSelection(selectionRelativeToNode, state.doc.resolve(selectionPos), SelectionDirection.After)(state, dispatch);
+    } else if (!isIgnoredByGapCursor(node)) {
+      return setSelectionRelativeToNode(selectionRelativeToNode, new GapCursorSelection(state.doc.resolve(selectionPos + 1), Side.RIGHT))(state, dispatch);
+    } else if (isSelectableContainerNode(node)) {
+      return setSelectionRelativeToNode(selectionRelativeToNode, NodeSelection.create(state.doc, selectionPos))(state, dispatch);
+    }
+  }
+  return false;
+};

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

@@ -0,0 +1,256 @@
+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 const shouldSkipGapCursor = (direction, state, $pos) => {
+  var _$pos$nodeBefore;
+  const {
+    doc,
+    schema
+  } = state;
+  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;
+  const {
+    selection
+  } = state;
+  const upArrowFromGapCursorIntoMedia = selection instanceof GapCursorSelection && dir === Direction.UP && selection.$from.nodeBefore && isMediaNode(selection.$from.nodeBefore);
+  const 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) {
+  const {
+    selection,
+    tr
+  } = state;
+  let $pos = isBackward(dir) ? selection.$from : selection.$to;
+  if (dir === Direction.UP && selection.$from.nodeBefore && isMediaNode(selection.$from.nodeBefore)) {
+    var _tr$doc$nodeAt;
+    const 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) {
+    const 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 const arrow = (dir, endOfTextblock) => (state, dispatch, view) => {
+  const {
+    doc,
+    selection,
+    tr
+  } = state;
+  let $pos = isBackward(dir) ? selection.$from : selection.$to;
+  let 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)) {
+    const 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) {
+    const domAtPos = view.domAtPos.bind(view);
+    const target = findDomRefAtPos($pos.pos, domAtPos);
+    if (target && target.textContent === ZERO_WIDTH_SPACE) {
+      return false;
+    }
+  }
+  const 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 const deleteNode = dir => (state, dispatch) => {
+  if (state.selection instanceof GapCursorSelection) {
+    const {
+      $from,
+      $anchor
+    } = state.selection;
+    let {
+      tr
+    } = state;
+    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
+const captureCursorCoords = (event, editorRef, posAtCoords, tr) => {
+  const 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
+    const coords = posAtCoords({
+      left: rect.left,
+      top: event.clientY
+    });
+    if (coords && coords.inside > -1) {
+      const $from = tr.doc.resolve(coords.inside);
+      const start = $from.before(1);
+      const side = event.clientX < rect.left ? Side.LEFT : Side.RIGHT;
+      let position;
+      if (side === Side.LEFT) {
+        position = start;
+      } else {
+        const node = tr.doc.nodeAt(start);
+        if (node) {
+          position = start + node.nodeSize;
+        }
+      }
+      return {
+        position,
+        side
+      };
+    }
+  }
+  return null;
+};
+export const setSelectionTopLevelBlocks = (tr, event, editorRef, posAtCoords, editorFocused) => {
+  const cursorCoords = captureCursorCoords(event, editorRef, posAtCoords, tr);
+  if (!cursorCoords) {
+    return;
+  }
+  const $pos = cursorCoords.position !== undefined ? tr.doc.resolve(cursorCoords.position) : null;
+  if ($pos === null) {
+    return;
+  }
+  const 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) {
+    const selectionTemp = Selection.findFrom($pos, cursorCoords.side === Side.LEFT ? 1 : -1, true);
+    if (selectionTemp) {
+      tr.setSelection(selectionTemp);
+    }
+  }
+};
+export const setCursorForTopLevelBlocks = (event, editorRef, posAtCoords, editorFocused) => (state, dispatch) => {
+  const {
+    tr
+  } = state;
+  setSelectionTopLevelBlocks(tr, event, editorRef, posAtCoords, editorFocused);
+  if (tr.selectionSet && dispatch) {
+    dispatch(tr);
+    return true;
+  }
+  return false;
+};
+export const hasGapCursorPlugin = state => {
+  return Boolean(gapCursorPluginKey.get(state));
+};

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

@@ -0,0 +1,15 @@
+export let 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/es2019/gap-cursor/selection.js

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

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

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

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

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

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

@@ -0,0 +1,94 @@
+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.
+ */
+const 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'
+};
+const computeNestedStyle = dom => {
+  const foundKey = Object.keys(nestedCases).find(className => dom.classList.contains(className));
+  const nestedSelector = foundKey && nestedCases[foundKey];
+  if (nestedSelector) {
+    const nestedElement = dom.querySelector(nestedSelector);
+    if (nestedElement) {
+      return window.getComputedStyle(nestedElement);
+    }
+  }
+};
+const measureHeight = style => {
+  return measureValue(style, ['height', 'padding-top', 'padding-bottom', 'border-top-width', 'border-bottom-width']);
+};
+const measureWidth = style => {
+  return measureValue(style, ['width', 'padding-left', 'padding-right', 'border-left-width', 'border-right-width']);
+};
+const measureValue = (style, measureValues) => {
+  const [base, ...contentBoxValues] = measureValues;
+  const measures = [style.getPropertyValue(base)];
+  const boxSizing = style.getPropertyValue('box-sizing');
+  if (boxSizing === 'content-box') {
+    contentBoxValues.forEach(value => {
+      measures.push(style.getPropertyValue(value));
+    });
+  }
+  let result = 0;
+  for (let i = 0; i < measures.length; i++) {
+    result += parseFloat(measures[i]);
+  }
+  return result;
+};
+const 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 {
+    const marginRight = parseFloat(style.getPropertyValue('margin-right'));
+    if (marginRight > 0) {
+      element.style.marginLeft = `-${Math.abs(marginRight)}px`;
+    } else {
+      element.style.paddingRight = `${Math.abs(marginRight)}px`;
+    }
+  }
+};
+export const toDOM = (view, getPos) => {
+  const selection = view.state.selection;
+  const {
+    $from,
+    side
+  } = selection;
+  const isRightCursor = side === Side.RIGHT;
+  const node = isRightCursor ? $from.nodeBefore : $from.nodeAfter;
+  const nodeStart = getPos();
+  // @ts-ignore - [unblock prosemirror bump] nodeStart can be undefined
+  const dom = view.nodeDOM(nodeStart);
+  const element = document.createElement('span');
+  element.className = `ProseMirror-gapcursor ${isRightCursor ? '-right' : '-left'}`;
+  element.appendChild(document.createElement('span'));
+  if (dom instanceof HTMLElement && element.firstChild) {
+    const style = computeNestedStyle(dom) || window.getComputedStyle(dom);
+    const gapCursor = element.firstChild;
+    gapCursor.style.height = `${measureHeight(style)}px`;
+    const 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);
+      const breakoutModeStyle = getComputedStyleForLayoutMode(dom, node, style);
+      gapCursor.style.width = `${measureWidth(breakoutModeStyle)}px`;
+    } else {
+      mutateElementStyle(gapCursor, style, selection.side);
+    }
+  }
+  return element;
+};