@atlaskit/editor-core 188.5.0 → 188.6.0

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

@@ -1,158 +0,0 @@
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { findPositionOfNodeBefore } from '@atlaskit/editor-prosemirror/utils';
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { hideCaretModifier } from '../gap-cursor/styles';
-import { GapCursorSelection, JSON_ID, Side as GapCursorSide, Side } from '../gap-cursor/selection';
-import { getLayoutModeFromTargetNode, isIgnoredClick } from '../gap-cursor/utils';
-import { toDOM } from '../gap-cursor/utils/place-gap-cursor';
-import { deleteNode, setGapCursorAtPos } from '../gap-cursor/actions';
-import { Direction } from '../gap-cursor/direction';
-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/plugins/selection/pm-plugins/gap-cursor-plugin-key.js

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

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

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

package/dist/es2019/plugins/selection/pm-plugins/selection-main.js

@@ -1,97 +0,0 @@
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { SelectionActionTypes } from '../actions';
-import { createPluginState, getPluginState } from '../plugin-factory';
-import { selectionPluginKey } from '../types';
-import { getAllSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload, getDecorations, getNodeSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, shouldRecalcDecorations } from '../utils';
-import { onKeydown } from './events/keydown';
-import { onCreateSelectionBetween } from './events/create-selection-between';
-export const getInitialState = state => ({
-  decorationSet: getDecorations(state.tr),
-  selection: state.selection
-});
-export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) => {
-  return new SafePlugin({
-    key: selectionPluginKey,
-    state: createPluginState(dispatch, getInitialState),
-    view: () => ({
-      update: (editorView, oldEditorState) => {
-        const {
-          state
-        } = editorView;
-        if (!shouldRecalcDecorations({
-          oldEditorState,
-          newEditorState: state
-        })) {
-          return;
-        }
-        const analyticsPayload = getNodeSelectionAnalyticsPayload(state.selection) || getAllSelectionAnalyticsPayload(state.selection) ||
-        // We handle all range/cell selections except click and drag here, which is
-        // handled in mouseup handler below
-        !editorView.mouseDown && (getRangeSelectionAnalyticsPayload(state.selection, state.doc) || getCellSelectionAnalyticsPayload(state));
-
-        // We have to use dispatchAnalyticsEvent over any of the analytics plugin helpers
-        // as there were several issues caused by the fact that adding analytics through
-        // the plugin adds a new step to the transaction
-        // This causes prosemirror to run through some different code paths, eg. attempting
-        // to map selection
-        if (analyticsPayload) {
-          dispatchAnalyticsEvent(analyticsPayload);
-        }
-      }
-    }),
-    appendTransaction(_transactions, oldEditorState, newEditorState) {
-      if (!shouldRecalcDecorations({
-        oldEditorState,
-        newEditorState
-      })) {
-        return;
-      }
-      const {
-        tr
-      } = newEditorState;
-      tr.setMeta(selectionPluginKey, {
-        type: SelectionActionTypes.SET_DECORATIONS,
-        selection: tr.selection,
-        decorationSet: getDecorations(tr)
-      });
-      return tr;
-    },
-    filterTransaction(tr, state) {
-      // Prevent single click selecting atom nodes on mobile (we want to select with long press gesture instead)
-      if (options.useLongPressSelection && tr.selectionSet && tr.selection instanceof NodeSelection && !tr.getMeta(selectionPluginKey)) {
-        return false;
-      }
-
-      // Prevent prosemirror's mutation observer overriding a node selection with a text selection
-      // for exact same range - this was cause of being unable to change dates in collab:
-      // https://product-fabric.atlassian.net/browse/ED-10645
-      if (state.selection instanceof NodeSelection && tr.selection instanceof TextSelection && state.selection.from === tr.selection.from && state.selection.to === tr.selection.to) {
-        return false;
-      }
-      return true;
-    },
-    props: {
-      createSelectionBetween: onCreateSelectionBetween,
-      decorations(state) {
-        return getPluginState(state).decorationSet;
-      },
-      handleDOMEvents: {
-        keydown: onKeydown,
-        // We only want to fire analytics for a click and drag range/cell selection when
-        // the user has finished, otherwise we will get an event almost every time they move
-        // their mouse which is too much
-        mouseup: (editorView, event) => {
-          const mouseEvent = event;
-          if (!mouseEvent.shiftKey) {
-            const analyticsPayload = getRangeSelectionAnalyticsPayload(editorView.state.selection, editorView.state.doc) || getCellSelectionAnalyticsPayload(editorView.state);
-            if (analyticsPayload) {
-              dispatchAnalyticsEvent(analyticsPayload);
-            }
-          }
-          return false;
-        }
-      }
-    }
-  });
-};

package/dist/es2019/plugins/selection/reducer.js

@@ -1,18 +0,0 @@
-import { SelectionActionTypes } from './actions';
-export function reducer(pluginState, action) {
-  switch (action.type) {
-    case SelectionActionTypes.SET_DECORATIONS:
-      return {
-        ...pluginState,
-        decorationSet: action.decorationSet,
-        selection: action.selection
-      };
-    case SelectionActionTypes.SET_RELATIVE_SELECTION:
-      return {
-        ...pluginState,
-        selectionRelativeToNode: action.selectionRelativeToNode
-      };
-    default:
-      return pluginState;
-  }
-}

package/dist/es2019/plugins/selection/types.js

@@ -1,9 +0,0 @@
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { RelativeSelectionPos } from '@atlaskit/editor-common/selection';
-export const selectionPluginKey = new PluginKey('selection');
-export { RelativeSelectionPos };
-export let SelectionDirection = /*#__PURE__*/function (SelectionDirection) {
-  SelectionDirection[SelectionDirection["Before"] = -1] = "Before";
-  SelectionDirection[SelectionDirection["After"] = 1] = "After";
-  return SelectionDirection;
-}({});

package/dist/es2019/plugins/selection/utils.js

@@ -1,233 +0,0 @@
-import { NodeSelection, TextSelection, Selection, AllSelection } from '@atlaskit/editor-prosemirror/state';
-import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { flatten, findParentNode } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { isSelectionAtStartOfNode, isSelectionAtEndOfNode, getNodeSelectionAnalyticsPayload, getAllSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload, createSelectionClickHandler, isIgnored as isIgnoredByGapCursor } from '@atlaskit/editor-common/selection';
-import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
-import { selectionPluginKey } from './types';
-export const getDecorations = tr => {
-  if (tr.selection instanceof NodeSelection) {
-    return DecorationSet.create(tr.doc, [Decoration.node(tr.selection.from, tr.selection.to, {
-      class: akEditorSelectedNodeClassName
-    })]);
-  }
-  if (tr.selection instanceof TextSelection || tr.selection instanceof AllSelection) {
-    const decorations = getNodesToDecorateFromSelection(tr.selection, tr.doc).map(({
-      node,
-      pos
-    }) => {
-      return Decoration.node(pos, pos + node.nodeSize, {
-        class: akEditorSelectedNodeClassName
-      });
-    });
-    return DecorationSet.create(tr.doc, decorations);
-  }
-  return DecorationSet.empty;
-};
-const topLevelBlockNodesThatHaveSelectionStyles = ['table', 'panel', 'expand', 'layoutSection', 'decisionList', 'decisionItem', 'codeBlock'];
-
-/**
- * Use `getNodesToDecorateFromSelection` to collect and return
- * a list of nodes within the Selection that should have Selection
- * decorations applied. This allows selection styles to be added to
- * nested nodes. It will ignore text nodes as decorations are
- * applied natively and also ignore nodes that don't completely
- * sit within the given `Selection`.
- */
-export const getNodesToDecorateFromSelection = (selection, doc) => {
-  const nodes = [];
-  if (selection.from !== selection.to) {
-    const {
-      from,
-      to
-    } = selection;
-    doc.nodesBetween(from, to, (node, pos) => {
-      const withinSelection = from <= pos && pos + node.nodeSize <= to;
-      // The reason we need to check for these nodes is to stop
-      // traversing their children if they are within a selection -
-      // this is to prevent selection styles from being added to
-      // the children as well as the parent node.
-      // Example scenario is if an entire table has been selected
-      // we should not traverse its children so we can apply the
-      // selection styles to the table. But if an entire tableRow
-      // has been selected (but the parent table has not) we should
-      // traverse it as it could contain other nodes that need
-      // selection styles. I couldn’t see a clear way to differentiate
-      // without explicitly stating which nodes should be traversed
-      // and which shouldn’t.
-      const isTopLevelNodeThatHasSelectionStyles = topLevelBlockNodesThatHaveSelectionStyles.includes(node.type.name);
-      // If the node is a top-level block node and completely sits within
-      // the selection, we do not recurse it's children to prevent selection
-      // styles being added to its child nodes. The expected behaviour
-      // is that selection styles are only added to the parent.
-      if (node && withinSelection && isTopLevelNodeThatHasSelectionStyles) {
-        nodes.push({
-          node,
-          pos
-        });
-        return false;
-        // Otherwise we recurse the children and return them so we can apply
-        // selection styles. Text is handled by the browser.
-      } else if (node && withinSelection && !node.isText) {
-        nodes.push({
-          node,
-          pos
-        });
-      }
-      return true;
-    });
-  }
-  return nodes;
-};
-export function shouldRecalcDecorations({
-  oldEditorState,
-  newEditorState
-}) {
-  const oldSelection = oldEditorState.selection;
-  const newSelection = newEditorState.selection;
-  const oldPluginState = selectionPluginKey.getState(oldEditorState);
-  const newPluginState = selectionPluginKey.getState(newEditorState);
-  if (!oldPluginState || !newPluginState) {
-    return false;
-  }
-
-  // If selection is unchanged, no need to recalculate
-  if (oldSelection.eq(newSelection)) {
-    // We need this special case for NodeSelection, as Prosemirror still thinks the
-    // selections are equal when the node has changed
-    if (oldSelection instanceof NodeSelection && newSelection instanceof NodeSelection) {
-      const oldDecorations = oldPluginState.decorationSet.find();
-      const newDecorations = newPluginState.decorationSet.find();
-      // There might not be old or new decorations if the node selection is for a text node
-      // This wouldn't have happened intentionally, but we need to handle this case regardless
-      if (oldDecorations.length > 0 && newDecorations.length > 0) {
-        return !oldDecorations[0].eq(newDecorations[0]);
-      }
-      return !(oldDecorations.length === 0 && newDecorations.length === 0);
-    }
-    return false;
-  }
-
-  // There's no point updating decorations if going from one standard TextSelection to another
-  if (oldSelection instanceof TextSelection && newSelection instanceof TextSelection && oldSelection.from === oldSelection.to && newSelection.from === newSelection.to) {
-    return false;
-  }
-  return true;
-}
-export const isSelectableContainerNode = node => !!(node && !node.isAtom && NodeSelection.isSelectable(node));
-export const isSelectableChildNode = node => !!(node && (node.isText || isEmptyParagraph(node) || NodeSelection.isSelectable(node)));
-
-/**
- * Finds closest parent node that is a selectable block container node
- * If it finds a parent that is not selectable but supports gap cursor, will
- * return undefined
- */
-export const findSelectableContainerParent = selection => {
-  let foundNodeThatSupportsGapCursor = false;
-  const selectableNode = findParentNode(node => {
-    const isSelectable = isSelectableContainerNode(node);
-    if (!isSelectable && !isIgnoredByGapCursor(node)) {
-      foundNodeThatSupportsGapCursor = true;
-    }
-    return isSelectable;
-  })(selection);
-  if (!foundNodeThatSupportsGapCursor) {
-    return selectableNode;
-  }
-};
-
-/**
- * Finds node before that is a selectable block container node, starting
- * from $pos.depth + 1 and working in
- * If it finds a node that is not selectable but supports gap cursor, will
- * return undefined
- */
-export const findSelectableContainerBefore = ($pos, doc) => {
-  // prosemirror just returns the same pos from Selection.findFrom when
-  // parent.inlineContent is true, so we move position back one here
-  // to counteract that
-  if ($pos.parent.inlineContent && isSelectableContainerNode($pos.parent)) {
-    $pos = doc.resolve($pos.start() - 1);
-  }
-  const selectionBefore = Selection.findFrom($pos, -1);
-  if (selectionBefore) {
-    const $selectionBefore = doc.resolve(selectionBefore.from);
-    for (let i = $pos.depth + 1; i <= $selectionBefore.depth; i++) {
-      const node = $selectionBefore.node(i);
-      if (isSelectableContainerNode(node)) {
-        return {
-          node,
-          pos: $selectionBefore.start(i) - 1
-        };
-      }
-      if (i > $pos.depth + 1 && !isIgnoredByGapCursor(node)) {
-        return;
-      }
-    }
-
-    /**
-     * Stick to the default left selection behaviour,
-     * useful for mediaSingleWithCaption
-     */
-    if (selectionBefore instanceof NodeSelection && NodeSelection.isSelectable(selectionBefore.node)) {
-      return {
-        node: selectionBefore.node,
-        pos: selectionBefore.from
-      };
-    }
-  }
-};
-
-/**
- * Finds node after that is a selectable block container node, starting
- * from $pos.depth + 1 and working in
- * If it finds a node that is not selectable but supports gap cursor, will
- * return undefined
- */
-export const findSelectableContainerAfter = ($pos, doc) => {
-  const selectionAfter = Selection.findFrom($pos, 1);
-  if (selectionAfter) {
-    const $selectionAfter = doc.resolve(selectionAfter.from);
-    for (let i = $pos.depth + 1; i <= $selectionAfter.depth; i++) {
-      const node = $selectionAfter.node(i);
-      if (isSelectableContainerNode(node)) {
-        return {
-          node,
-          pos: $selectionAfter.start(i) - 1
-        };
-      }
-      if (i > $pos.depth + 1 && !isIgnoredByGapCursor(node)) {
-        return;
-      }
-    }
-  }
-};
-
-/**
- * Finds first child node that is a selectable block container node OR that
- * supports gap cursor
- */
-export const findFirstChildNodeToSelect = parent => flatten(parent).find(child => isSelectableChildNode(child.node) || !isIgnoredByGapCursor(child.node));
-
-/**
- * Finds last child node that is a selectable block container node OR that
- * supports gap cursor
- */
-export const findLastChildNodeToSelect = parent => {
-  let child;
-  parent.descendants((node, pos) => {
-    if (isSelectableChildNode(node) || !isIgnoredByGapCursor(node)) {
-      child = {
-        node,
-        pos
-      };
-      return false;
-    }
-  });
-  if (child) {
-    return child;
-  }
-};
-export const isSelectionAtStartOfParentNode = ($pos, selection) => isSelectionAtStartOfNode($pos, findSelectableContainerParent(selection));
-export const isSelectionAtEndOfParentNode = ($pos, selection) => isSelectionAtEndOfNode($pos, findSelectableContainerParent(selection));
-export { getNodeSelectionAnalyticsPayload, getAllSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload, createSelectionClickHandler };

package/dist/es2019/selection-api/api.js

@@ -1,20 +0,0 @@
-import { setSelectionRelativeToNode as setSelectionRelativeToNodeOriginalCommand } from '../plugins/selection/commands';
-import { getPluginState as getSelectionPluginState } from '../plugins/selection/plugin-factory';
-export const createEditorSelectionAPI = () => {
-  return {
-    getSelectionPluginState: state => {
-      return getSelectionPluginState(state);
-    },
-    setSelectionRelativeToNode: ({
-      selectionRelativeToNode,
-      selection
-    }) => state => {
-      let tr = state.tr;
-      const fakeDispatch = _tr => {
-        tr = _tr;
-      };
-      setSelectionRelativeToNodeOriginalCommand(selectionRelativeToNode, selection)(state, fakeDispatch);
-      return tr;
-    }
-  };
-};

package/dist/esm/plugins/selection/actions.js

@@ -1,5 +0,0 @@
-export var SelectionActionTypes = /*#__PURE__*/function (SelectionActionTypes) {
-  SelectionActionTypes["SET_DECORATIONS"] = "SET_DECORATIONS";
-  SelectionActionTypes["SET_RELATIVE_SELECTION"] = "SET_RELATIVE_SELECTION";
-  return SelectionActionTypes;
-}({});