@atlaskit/editor-core 188.5.0 → 188.6.0

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

@@ -1,94 +0,0 @@
-import { getLayoutModeFromTargetNode, isLeftCursor, getComputedStyleForLayoutMode } from '../utils';
-import { Side } from '@atlaskit/editor-common/selection';
-
-/**
- * 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;
-};

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

@@ -1,124 +0,0 @@
-import { TableSharedCssClassName, UnsupportedSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { Side } from './selection';
-import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
-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/plugins/selection/gap-cursor-selection.js

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

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

@@ -1,51 +0,0 @@
-import { createPlugin } from './pm-plugins/selection-main';
-import { selectionPluginKey } from './types';
-import selectionKeymapPlugin from './pm-plugins/keymap';
-import gapCursorPlugin from './pm-plugins/gap-cursor-main';
-import { gapCursorPluginKey } from './pm-plugins/gap-cursor-plugin-key';
-import gapCursorKeymapPlugin from './pm-plugins/gap-cursor-keymap';
-import { selectNearNode } from './commands';
-const displayGapCursor = toggle => ({
-  tr
-}) => {
-  return tr.setMeta(gapCursorPluginKey, {
-    displayGapCursor: toggle
-  });
-};
-export const selectionPlugin = ({
-  config: options
-}) => ({
-  name: 'selection',
-  commands: {
-    displayGapCursor,
-    selectNearNode
-  },
-  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/plugins/selection/plugin-factory.js

@@ -1,43 +0,0 @@
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { pluginFactory } from '@atlaskit/editor-common/utils';
-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/plugins/selection/pm-plugins/events/create-selection-between.js

@@ -1,89 +0,0 @@
-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/plugins/selection/pm-plugins/events/keydown.js

@@ -1,112 +0,0 @@
-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/plugins/selection/pm-plugins/gap-cursor-keymap.js

@@ -1,40 +0,0 @@
-import { keymap } from '@atlaskit/editor-prosemirror/keymap';
-import { bindKeymapWithCommand, insertNewLine, moveLeft, moveRight, moveUp, moveDown, backspace, deleteKey } from '@atlaskit/editor-common/keymaps';
-import { arrow, deleteNode } from '../gap-cursor/actions';
-import { Direction } from '../gap-cursor/direction';
-import { GapCursorSelection } from '../gap-cursor/selection';
-import { createParagraphNear } from '@atlaskit/editor-prosemirror/commands';
-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);
-}