@atlaskit/editor-plugin-paste 0.1.22 → 0.2.0

package/dist/es2019/edge-cases/index.js

@@ -0,0 +1,87 @@
+import { isListNode } from '@atlaskit/editor-common/utils';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+import { findParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { isCursorSelectionAtTextStartOrEnd, isEmptyNode, isSelectionInsidePanel } from '../util';
+import { insertSliceAtNodeEdge, insertSliceInsideOfPanelNodeSelected, insertSliceIntoEmptyNode, insertSliceIntoRangeSelectionInsideList } from './lists';
+export function insertSliceForLists({
+  tr,
+  slice,
+  schema
+}) {
+  var _slice$content$firstC;
+  const {
+    selection,
+    selection: {
+      $to,
+      $from
+    }
+  } = tr;
+  const {
+    $cursor
+  } = selection;
+  const panelNode = isSelectionInsidePanel(selection);
+  const selectionIsInsideList = $from.blockRange($to, isListNode);
+  if (!$cursor && selectionIsInsideList) {
+    return insertSliceIntoRangeSelectionInsideList({
+      tr,
+      slice
+    });
+  }
+
+  // if inside an empty panel, try and insert content inside it rather than replace it
+  if (panelNode && isEmptyNode(panelNode) && $from.node() === $to.node()) {
+    return insertSliceInsideOfPanelNodeSelected(panelNode)({
+      tr,
+      slice
+    });
+  }
+  if (!$cursor || selectionIsInsideList) {
+    return tr.replaceSelection(slice);
+  }
+  if (isEmptyNode(tr.doc.resolve($cursor.pos).node())) {
+    return insertSliceIntoEmptyNode({
+      tr,
+      slice
+    });
+  }
+
+  // When pasting a single list item into an action or decision, we skip the special "insert at node edge"
+  // logic so that prosemirror pastes the list's content into the action/decision, rather than
+  // pasting a whole list node directly after the action/decision item. (But we still preserve the
+  // existing "insert at" node edge" behaviour if dealing with a list with more than one item, so that
+  // it still inserts whole list node after the action/decision item).
+  const pastingIntoActionOrDecision = Boolean(findParentNodeOfType([schema.nodes.taskList, schema.nodes.decisionList])(selection));
+  const oneListItem = slice.content.childCount === 1 && isListNode(slice.content.firstChild) && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.childCount) === 1;
+  if (!(pastingIntoActionOrDecision && oneListItem) && isCursorSelectionAtTextStartOrEnd(selection)) {
+    return insertSliceAtNodeEdge({
+      tr,
+      slice
+    });
+  }
+  tr.replaceSelection(slice);
+}
+export function insertSliceForListsInsideBlockquote({
+  tr,
+  slice
+}) {
+  safeInsert(slice.content, tr.selection.$to.pos)(tr).scrollIntoView();
+  // ProseMirror doesn't give a proper way to tell us where something was inserted.
+  // However, we can know "how" it inserted something.
+  //
+  // So, instead of weird depth calculations, we can use the step produced by the transform.
+  // For instance:
+  //    The `replaceStep.to and replaceStep.from`, tell us the real position
+  //    where the content will be insert.
+  //    Then, we can use the `tr.mapping.map` to the updated position after the replace operation
+  const replaceStep = tr.steps[0];
+  if (!(replaceStep instanceof ReplaceStep)) {
+    return tr;
+  }
+  const nextPosition = tr.mapping.map(replaceStep.to);
+  // The findFrom will make search for both: TextSelection and NodeSelections.
+  const nextSelection = Selection.findFrom(tr.doc.resolve(Math.min(nextPosition, tr.doc.content.size)), -1);
+  if (nextSelection) {
+    tr.setSelection(nextSelection);
+  }
+}

package/dist/es2019/edge-cases/lists.js

@@ -0,0 +1,113 @@
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { Transform } from '@atlaskit/editor-prosemirror/transform';
+export function insertSliceIntoEmptyNode({
+  tr,
+  slice
+}) {
+  tr.replaceSelection(slice);
+}
+export function insertSliceAtNodeEdge({
+  tr,
+  slice
+}) {
+  const {
+    selection
+  } = tr;
+  const {
+    $cursor
+  } = selection;
+  if (!$cursor) {
+    return;
+  }
+  const position = !$cursor.nodeBefore ? $cursor.before() : $cursor.after();
+  tr.replaceRange(position, position, slice);
+  const startSlicePosition = tr.doc.resolve(Math.min(position + slice.content.size - slice.openEnd, tr.doc.content.size));
+  const direction = -1;
+  tr.setSelection(TextSelection.near(startSlicePosition, direction));
+}
+export function insertSliceIntoRangeSelectionInsideList({
+  tr,
+  slice
+}) {
+  const {
+    selection: {
+      $to,
+      $from,
+      to,
+      from
+    }
+  } = tr;
+
+  // when the selection is inside of the same list item
+  // we can use a normal replace
+  if ($from.sameParent($to) || $from.depth === $to.depth) {
+    return tr.replaceSelection(slice);
+  }
+
+  // if pasting a list inside another list, ensure no empty list items get added
+  const newRange = $from.blockRange($to);
+  if (!newRange) {
+    return;
+  }
+  const startPos = from;
+  const endPos = $to.nodeAfter ? to : to + 2;
+  const newSlice = tr.doc.slice(endPos, newRange.end);
+  tr.deleteRange(startPos, newRange.end);
+  const mapped = tr.mapping.map(startPos);
+  tr.replaceRange(mapped, mapped, slice);
+  if (newSlice.size <= 0) {
+    return;
+  }
+  const newSelection = TextSelection.near(tr.doc.resolve(tr.mapping.map(mapped)), -1);
+  // @ts-ignore - [unblock prosemirror bump] assigning to readonly prop
+  newSlice.openEnd = newSlice.openStart;
+  tr.replaceRange(newSelection.from, newSelection.from, newSlice);
+  tr.setSelection(TextSelection.near(tr.doc.resolve(newSelection.from), -1));
+}
+export function insertSliceInsideOfPanelNodeSelected(panelNode) {
+  return ({
+    tr,
+    slice
+  }) => {
+    const {
+      selection,
+      selection: {
+        $to,
+        $from
+      }
+    } = tr;
+    const {
+      from: panelPosition
+    } = selection;
+
+    // if content of slice isn't valid for a panel node, insert the invalid node and following content after
+    if (panelNode && !panelNode.type.validContent(Fragment.from(slice.content))) {
+      var _parentNode$firstChil;
+      const insertPosition = $to.pos + 1;
+      tr.replaceRange(insertPosition, insertPosition, slice);
+      // need to delete the empty paragraph at the top of the panel
+      const parentNode = tr.doc.resolve($from.before()).node();
+      if (parentNode && parentNode.childCount > 1 && ((_parentNode$firstChil = parentNode.firstChild) === null || _parentNode$firstChil === void 0 ? void 0 : _parentNode$firstChil.type.name) === 'paragraph' && isEmptyParagraph(parentNode.firstChild)) {
+        const startPosDelete = tr.doc.resolve($from.before()).posAtIndex(0);
+        const endPosDelete = tr.doc.resolve($from.before()).posAtIndex(1);
+        const SIZE_OF_EMPTY_PARAGRAPH = 2; // {startPos}<p>{startPos + 1}</p>{endPos}
+        if (endPosDelete - startPosDelete === SIZE_OF_EMPTY_PARAGRAPH) {
+          tr.delete(startPosDelete, endPosDelete);
+        }
+      }
+      tr.setSelection(TextSelection.near(tr.doc.resolve(insertPosition + slice.content.size - slice.openStart - slice.openEnd + 1)));
+      return;
+    }
+    const temporaryDoc = new Transform(tr.doc.type.createAndFill());
+    temporaryDoc.replaceRange(0, temporaryDoc.doc.content.size, slice);
+    const sliceWithoutInvalidListSurrounding = temporaryDoc.doc.slice(0);
+    const newPanel = panelNode.copy(sliceWithoutInvalidListSurrounding.content);
+    const panelNodeSelected = selection instanceof NodeSelection ? selection.node : null;
+    const replaceFrom = panelNodeSelected ? panelPosition : tr.doc.resolve(panelPosition).start();
+    const replaceTo = panelNodeSelected ? panelPosition + panelNodeSelected.nodeSize : replaceFrom;
+    tr.replaceRangeWith(replaceFrom, replaceTo, newPanel);
+    tr.setSelection(TextSelection.near(tr.doc.resolve($from.pos + newPanel.content.size), -1));
+  };
+}