@atlaskit/editor-plugin-paste 0.1.22 → 0.2.0

package/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          'React.FC':
+            'Please use types directly on props instead, and explicitly define children if required',
+          'React.FunctionalComponent':
+            'Please use types directly on props instead, and explicitly define children if required',
+        },
+        extendDefaults: false,
+      },
+    ],
+  },
+};

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-paste
 
+## 0.2.0
+
+### Minor Changes
+
+- [#63830](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63830) [`a21d2c99bd13`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a21d2c99bd13) - Move code for editor paste plugin from editor-core to @atlaskit/editor-plugin-paste
+
 ## 0.1.22
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PastePluginActionTypes = void 0;
+var PastePluginActionTypes = exports.PastePluginActionTypes = /*#__PURE__*/function (PastePluginActionTypes) {
+  PastePluginActionTypes["START_TRACKING_PASTED_MACRO_POSITIONS"] = "START_TRACKING_PASTED_MACRO_POSITIONS";
+  PastePluginActionTypes["STOP_TRACKING_PASTED_MACRO_POSITIONS"] = "STOP_TRACKING_PASTED_MACRO_POSITIONS";
+  PastePluginActionTypes["ON_PASTE"] = "ON_PASTE";
+  return PastePluginActionTypes;
+}({});

package/dist/cjs/commands.js

@@ -0,0 +1,255 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.upgradeTextToLists = exports.stopTrackingPastedMacroPositions = exports.startTrackingPastedMacroPositions = exports.splitParagraphs = exports.splitIntoParagraphs = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _utils = require("@atlaskit/editor-common/utils");
+var _commands = require("@atlaskit/editor-prosemirror/commands");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _actions = require("./actions");
+var _pluginFactory = require("./pm-plugins/plugin-factory");
+/**
+ * Use this to register macro link positions during a paste operation, that you
+ * want to track in a document over time, through any document changes.
+ *
+ * @param positions a map of string keys (custom position references) and position values e.g. { ['my-key-1']: 11 }
+ *
+ * **Context**: This is neccessary if there is an async process or an unknown period of time
+ * between obtaining an original position, and wanting to know about what its final eventual
+ * value. In that scenario, positions will need to be actively tracked and mapped in plugin
+ * state so that they can be mapped through any other independent document change transactions being
+ * dispatched to the editor that could affect their value.
+ */
+var startTrackingPastedMacroPositions = exports.startTrackingPastedMacroPositions = function startTrackingPastedMacroPositions(pastedMacroPositions) {
+  return (0, _pluginFactory.createCommand)(function () {
+    return {
+      type: _actions.PastePluginActionTypes.START_TRACKING_PASTED_MACRO_POSITIONS,
+      pastedMacroPositions: pastedMacroPositions
+    };
+  });
+};
+var stopTrackingPastedMacroPositions = exports.stopTrackingPastedMacroPositions = function stopTrackingPastedMacroPositions(pastedMacroPositionKeys) {
+  return (0, _pluginFactory.createCommand)(function () {
+    return {
+      type: _actions.PastePluginActionTypes.STOP_TRACKING_PASTED_MACRO_POSITIONS,
+      pastedMacroPositionKeys: pastedMacroPositionKeys
+    };
+  });
+};
+
+// matchers for text lists
+var bullets = /^\s*[\*\-\u2022](\s+|\s+$)/;
+var numbers = /^\s*\d[\.\)](\s+|$)/;
+var getListType = function getListType(node, schema) {
+  if (!node.text) {
+    return null;
+  }
+  var _schema$nodes = schema.nodes,
+    bulletList = _schema$nodes.bulletList,
+    orderedList = _schema$nodes.orderedList;
+  return [{
+    node: bulletList,
+    matcher: bullets
+  }, {
+    node: orderedList,
+    matcher: numbers
+  }].reduce(function (lastMatch, listType) {
+    if (lastMatch) {
+      return lastMatch;
+    }
+    var match = node.text.match(listType.matcher);
+    return match ? [listType.node, match[0].length] : lastMatch;
+  }, null);
+};
+var extractListFromParagraph = function extractListFromParagraph(node, parent, schema) {
+  var _schema$nodes2 = schema.nodes,
+    hardBreak = _schema$nodes2.hardBreak,
+    bulletList = _schema$nodes2.bulletList,
+    orderedList = _schema$nodes2.orderedList;
+  var content = (0, _utils.mapChildren)(node.content, function (node) {
+    return node;
+  });
+  var listTypes = [bulletList, orderedList];
+
+  // wrap each line into a listItem and a containing list
+  var listified = content.map(function (child, index) {
+    var listMatch = getListType(child, schema);
+    var prevChild = index > 0 && content[index - 1];
+
+    // only extract list when preceded by a hardbreak
+    if (prevChild && prevChild.type !== hardBreak) {
+      return child;
+    }
+    if (!listMatch || !child.text) {
+      return child;
+    }
+    var _listMatch = (0, _slicedToArray2.default)(listMatch, 2),
+      nodeType = _listMatch[0],
+      length = _listMatch[1];
+
+    // convert to list item
+    var newText = child.text.substr(length);
+    var listItemNode = schema.nodes.listItem.createAndFill(undefined, schema.nodes.paragraph.createChecked(undefined, newText.length ? schema.text(newText) : undefined));
+    if (!listItemNode) {
+      return child;
+    }
+    var newList = nodeType.createChecked(undefined, [listItemNode]);
+    // Check whether our new list is valid content in our current structure,
+    // otherwise dont convert.
+    if (parent && !parent.type.validContent(_model.Fragment.from(newList))) {
+      return child;
+    }
+    return newList;
+  }).filter(function (child, idx, arr) {
+    // remove hardBreaks that have a list node on either side
+
+    // wasn't hardBreak, leave as-is
+    if (child.type !== hardBreak) {
+      return child;
+    }
+    if (idx > 0 && listTypes.indexOf(arr[idx - 1].type) > -1) {
+      // list node on the left
+      return null;
+    }
+    if (idx < arr.length - 1 && listTypes.indexOf(arr[idx + 1].type) > -1) {
+      // list node on the right
+      return null;
+    }
+    return child;
+  });
+
+  // try to join
+  var mockState = _state.EditorState.create({
+    schema: schema
+  });
+  var joinedListsTr;
+  var mockDispatch = function mockDispatch(tr) {
+    joinedListsTr = tr;
+  };
+  (0, _commands.autoJoin)(function (state, dispatch) {
+    if (!dispatch) {
+      return false;
+    }
+
+    // Return false to prevent replaceWith from wrapping the text node in a paragraph
+    // paragraph since that will be done later. If it's done here, it will fail
+    // the paragraph.validContent check.
+    // Dont return false if there are lists, as they arent validContent for paragraphs
+    // and will result in hanging textNodes
+    var containsList = listified.some(function (node) {
+      return node.type === bulletList || node.type === orderedList;
+    });
+    if (listified.some(function (node) {
+      return node.isText;
+    }) && !containsList) {
+      return false;
+    }
+    dispatch(state.tr.replaceWith(0, 2, listified));
+    return true;
+  }, function (before, after) {
+    return (0, _utils.isListNode)(before) && (0, _utils.isListNode)(after);
+  })(mockState, mockDispatch);
+  var fragment = joinedListsTr ? joinedListsTr.doc.content : _model.Fragment.from(listified);
+
+  // try to re-wrap fragment in paragraph (which is the original node we unwrapped)
+  var paragraph = schema.nodes.paragraph;
+  if (paragraph.validContent(fragment)) {
+    return _model.Fragment.from(paragraph.create(node.attrs, fragment, node.marks));
+  }
+
+  // fragment now contains other nodes, get Prosemirror to wrap with ContentMatch later
+  return fragment;
+};
+
+// above will wrap everything in paragraphs for us
+var upgradeTextToLists = exports.upgradeTextToLists = function upgradeTextToLists(slice, schema) {
+  return (0, _utils.mapSlice)(slice, function (node, parent) {
+    if (node.type === schema.nodes.paragraph) {
+      return extractListFromParagraph(node, parent, schema);
+    }
+    return node;
+  });
+};
+var splitParagraphs = exports.splitParagraphs = function splitParagraphs(slice, schema) {
+  // exclude Text nodes with a code mark, since we transform those later
+  // into a codeblock
+  var hasCodeMark = false;
+  slice.content.forEach(function (child) {
+    hasCodeMark = hasCodeMark || child.marks.some(function (mark) {
+      return mark.type === schema.marks.code;
+    });
+  });
+
+  // slice might just be a raw text string
+  if (schema.nodes.paragraph.validContent(slice.content) && !hasCodeMark) {
+    var replSlice = splitIntoParagraphs({
+      fragment: slice.content,
+      schema: schema
+    });
+    return new _model.Slice(replSlice, slice.openStart + 1, slice.openEnd + 1);
+  }
+  return (0, _utils.mapSlice)(slice, function (node) {
+    if (node.type === schema.nodes.paragraph) {
+      return splitIntoParagraphs({
+        fragment: node.content,
+        blockMarks: node.marks,
+        schema: schema
+      });
+    }
+    return node;
+  });
+};
+
+/**
+ * Walks the slice, creating paragraphs that were previously separated by hardbreaks.
+ * Returns the original paragraph node (as a fragment), or a fragment containing multiple nodes.
+ */
+var splitIntoParagraphs = exports.splitIntoParagraphs = function splitIntoParagraphs(_ref) {
+  var fragment = _ref.fragment,
+    _ref$blockMarks = _ref.blockMarks,
+    blockMarks = _ref$blockMarks === void 0 ? [] : _ref$blockMarks,
+    schema = _ref.schema;
+  var paragraphs = [];
+  var curChildren = [];
+  var lastNode = null;
+  var _schema$nodes3 = schema.nodes,
+    hardBreak = _schema$nodes3.hardBreak,
+    paragraph = _schema$nodes3.paragraph;
+  fragment.forEach(function (node, i) {
+    var isNodeValidContentForParagraph = schema.nodes.paragraph.validContent(_model.Fragment.from(node));
+    if (!isNodeValidContentForParagraph) {
+      paragraphs.push(node);
+      return;
+    }
+    // ED-14725 Fixed the issue that it make duplicated line
+    // when pasting <br /> from google docs.
+    if (i === 0 && node.type === hardBreak) {
+      paragraphs.push(paragraph.createChecked(undefined, curChildren, (0, _toConsumableArray2.default)(blockMarks)));
+      lastNode = node;
+      return;
+    } else if (lastNode && lastNode.type === hardBreak && node.type === hardBreak) {
+      // double hardbreak
+
+      // backtrack a little; remove the trailing hardbreak we added last loop
+      curChildren.pop();
+
+      // create a new paragraph
+      paragraphs.push(paragraph.createChecked(undefined, curChildren, (0, _toConsumableArray2.default)(blockMarks)));
+      curChildren = [];
+      return;
+    }
+
+    // add to this paragraph
+    curChildren.push(node);
+    lastNode = node;
+  });
+  if (curChildren.length) {
+    paragraphs.push(paragraph.createChecked(undefined, curChildren, (0, _toConsumableArray2.default)(blockMarks)));
+  }
+  return _model.Fragment.from(paragraphs.length ? paragraphs : [paragraph.createAndFill(undefined, undefined, (0, _toConsumableArray2.default)(blockMarks))]);
+};

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

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertSliceForLists = insertSliceForLists;
+exports.insertSliceForListsInsideBlockquote = insertSliceForListsInsideBlockquote;
+var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _transform = require("@atlaskit/editor-prosemirror/transform");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _util = require("../util");
+var _lists = require("./lists");
+function insertSliceForLists(_ref) {
+  var _slice$content$firstC;
+  var tr = _ref.tr,
+    slice = _ref.slice,
+    schema = _ref.schema;
+  var selection = tr.selection,
+    _tr$selection = tr.selection,
+    $to = _tr$selection.$to,
+    $from = _tr$selection.$from;
+  var _ref2 = selection,
+    $cursor = _ref2.$cursor;
+  var panelNode = (0, _util.isSelectionInsidePanel)(selection);
+  var selectionIsInsideList = $from.blockRange($to, _utils.isListNode);
+  if (!$cursor && selectionIsInsideList) {
+    return (0, _lists.insertSliceIntoRangeSelectionInsideList)({
+      tr: tr,
+      slice: slice
+    });
+  }
+
+  // if inside an empty panel, try and insert content inside it rather than replace it
+  if (panelNode && (0, _util.isEmptyNode)(panelNode) && $from.node() === $to.node()) {
+    return (0, _lists.insertSliceInsideOfPanelNodeSelected)(panelNode)({
+      tr: tr,
+      slice: slice
+    });
+  }
+  if (!$cursor || selectionIsInsideList) {
+    return tr.replaceSelection(slice);
+  }
+  if ((0, _util.isEmptyNode)(tr.doc.resolve($cursor.pos).node())) {
+    return (0, _lists.insertSliceIntoEmptyNode)({
+      tr: tr,
+      slice: 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).
+  var pastingIntoActionOrDecision = Boolean((0, _utils2.findParentNodeOfType)([schema.nodes.taskList, schema.nodes.decisionList])(selection));
+  var oneListItem = slice.content.childCount === 1 && (0, _utils.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) && (0, _util.isCursorSelectionAtTextStartOrEnd)(selection)) {
+    return (0, _lists.insertSliceAtNodeEdge)({
+      tr: tr,
+      slice: slice
+    });
+  }
+  tr.replaceSelection(slice);
+}
+function insertSliceForListsInsideBlockquote(_ref3) {
+  var tr = _ref3.tr,
+    slice = _ref3.slice;
+  (0, _utils2.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
+  var replaceStep = tr.steps[0];
+  if (!(replaceStep instanceof _transform.ReplaceStep)) {
+    return tr;
+  }
+  var nextPosition = tr.mapping.map(replaceStep.to);
+  // The findFrom will make search for both: TextSelection and NodeSelections.
+  var nextSelection = _state.Selection.findFrom(tr.doc.resolve(Math.min(nextPosition, tr.doc.content.size)), -1);
+  if (nextSelection) {
+    tr.setSelection(nextSelection);
+  }
+}

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

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertSliceAtNodeEdge = insertSliceAtNodeEdge;
+exports.insertSliceInsideOfPanelNodeSelected = insertSliceInsideOfPanelNodeSelected;
+exports.insertSliceIntoEmptyNode = insertSliceIntoEmptyNode;
+exports.insertSliceIntoRangeSelectionInsideList = insertSliceIntoRangeSelectionInsideList;
+var _utils = require("@atlaskit/editor-common/utils");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _transform = require("@atlaskit/editor-prosemirror/transform");
+function insertSliceIntoEmptyNode(_ref) {
+  var tr = _ref.tr,
+    slice = _ref.slice;
+  tr.replaceSelection(slice);
+}
+function insertSliceAtNodeEdge(_ref2) {
+  var tr = _ref2.tr,
+    slice = _ref2.slice;
+  var selection = tr.selection;
+  var _ref3 = selection,
+    $cursor = _ref3.$cursor;
+  if (!$cursor) {
+    return;
+  }
+  var position = !$cursor.nodeBefore ? $cursor.before() : $cursor.after();
+  tr.replaceRange(position, position, slice);
+  var startSlicePosition = tr.doc.resolve(Math.min(position + slice.content.size - slice.openEnd, tr.doc.content.size));
+  var direction = -1;
+  tr.setSelection(_state.TextSelection.near(startSlicePosition, direction));
+}
+function insertSliceIntoRangeSelectionInsideList(_ref4) {
+  var tr = _ref4.tr,
+    slice = _ref4.slice;
+  var _tr$selection = tr.selection,
+    $to = _tr$selection.$to,
+    $from = _tr$selection.$from,
+    to = _tr$selection.to,
+    from = _tr$selection.from;
+
+  // 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
+  var newRange = $from.blockRange($to);
+  if (!newRange) {
+    return;
+  }
+  var startPos = from;
+  var endPos = $to.nodeAfter ? to : to + 2;
+  var newSlice = tr.doc.slice(endPos, newRange.end);
+  tr.deleteRange(startPos, newRange.end);
+  var mapped = tr.mapping.map(startPos);
+  tr.replaceRange(mapped, mapped, slice);
+  if (newSlice.size <= 0) {
+    return;
+  }
+  var newSelection = _state.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(_state.TextSelection.near(tr.doc.resolve(newSelection.from), -1));
+}
+function insertSliceInsideOfPanelNodeSelected(panelNode) {
+  return function (_ref5) {
+    var tr = _ref5.tr,
+      slice = _ref5.slice;
+    var selection = tr.selection,
+      _tr$selection2 = tr.selection,
+      $to = _tr$selection2.$to,
+      $from = _tr$selection2.$from;
+    var panelPosition = selection.from;
+
+    // if content of slice isn't valid for a panel node, insert the invalid node and following content after
+    if (panelNode && !panelNode.type.validContent(_model.Fragment.from(slice.content))) {
+      var _parentNode$firstChil;
+      var insertPosition = $to.pos + 1;
+      tr.replaceRange(insertPosition, insertPosition, slice);
+      // need to delete the empty paragraph at the top of the panel
+      var 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' && (0, _utils.isEmptyParagraph)(parentNode.firstChild)) {
+        var startPosDelete = tr.doc.resolve($from.before()).posAtIndex(0);
+        var endPosDelete = tr.doc.resolve($from.before()).posAtIndex(1);
+        var SIZE_OF_EMPTY_PARAGRAPH = 2; // {startPos}<p>{startPos + 1}</p>{endPos}
+        if (endPosDelete - startPosDelete === SIZE_OF_EMPTY_PARAGRAPH) {
+          tr.delete(startPosDelete, endPosDelete);
+        }
+      }
+      tr.setSelection(_state.TextSelection.near(tr.doc.resolve(insertPosition + slice.content.size - slice.openStart - slice.openEnd + 1)));
+      return;
+    }
+    var temporaryDoc = new _transform.Transform(tr.doc.type.createAndFill());
+    temporaryDoc.replaceRange(0, temporaryDoc.doc.content.size, slice);
+    var sliceWithoutInvalidListSurrounding = temporaryDoc.doc.slice(0);
+    var newPanel = panelNode.copy(sliceWithoutInvalidListSurrounding.content);
+    var panelNodeSelected = selection instanceof _state.NodeSelection ? selection.node : null;
+    var replaceFrom = panelNodeSelected ? panelPosition : tr.doc.resolve(panelPosition).start();
+    var replaceTo = panelNodeSelected ? panelPosition + panelNodeSelected.nodeSize : replaceFrom;
+    tr.replaceRangeWith(replaceFrom, replaceTo, newPanel);
+    tr.setSelection(_state.TextSelection.near(tr.doc.resolve($from.pos + newPanel.content.size), -1));
+  };
+}