@tiptap/core 2.1.0-rc.8 → 2.1.0

package/dist/index.umd.js

@@ -115,9 +115,6 @@
       buildProps(tr, shouldDispatch = true) {
           const { rawCommands, editor, state } = this;
           const { view } = editor;
-          if (state.storedMarks) {
-              tr.setStoredMarks(state.storedMarks);
-          }
           const props = {
               tr,
               editor,
@@ -127,7 +124,7 @@
                   transaction: tr,
               }),
               dispatch: shouldDispatch ? () => undefined : undefined,
-              chain: () => this.createChain(tr),
+              chain: () => this.createChain(tr, shouldDispatch),
               can: () => this.createCan(tr),
               get commands() {
                   return Object.fromEntries(Object.entries(rawCommands).map(([name, command]) => {
@@ -303,7 +300,10 @@
                   return;
               }
               if (key === 'class') {
-                  mergedAttributes[key] = [mergedAttributes[key], value].join(' ');
+                  const valueClasses = value.split(' ');
+                  const existingClasses = mergedAttributes[key].split(' ');
+                  const insertClasses = valueClasses.filter(valueClass => !existingClasses.includes(valueClass));
+                  mergedAttributes[key] = [...existingClasses, ...insertClasses].join(' ');
               }
               else if (key === 'style') {
                   mergedAttributes[key] = [mergedAttributes[key], value].join('; ');
@@ -1306,6 +1306,16 @@
       return commands$1.createParagraphNear(state, dispatch);
   };
 
+  const cut = (originRange, targetPos) => ({ editor, tr }) => {
+      const { state: state$1 } = editor;
+      const contentSlice = state$1.doc.slice(originRange.from, originRange.to);
+      tr.deleteRange(originRange.from, originRange.to);
+      const newPos = tr.mapping.map(targetPos);
+      tr.insert(newPos, contentSlice.content);
+      tr.setSelection(new state.TextSelection(tr.doc.resolve(newPos - 1)));
+      return true;
+  };
+
   const deleteCurrentNode = () => ({ tr, dispatch }) => {
       const { selection } = tr;
       const currentNode = selection.$anchor.node();
@@ -1635,7 +1645,7 @@
           if (content.toString() === '<>') {
               return true;
           }
-          let { from, to } = typeof position === 'number' ? { from: position, to: position } : position;
+          let { from, to } = typeof position === 'number' ? { from: position, to: position } : { from: position.from, to: position.to };
           let isOnlyTextContent = true;
           let isOnlyBlockContent = true;
           const nodes = isFragment(content) ? content : [content];
@@ -1697,6 +1707,40 @@
       return commands$1.joinForward(state, dispatch);
   };
 
+  const joinItemBackward = () => ({ tr, state, dispatch, }) => {
+      try {
+          const point = transform.joinPoint(state.doc, state.selection.$from.pos, -1);
+          if (point === null || point === undefined) {
+              return false;
+          }
+          tr.join(point, 2);
+          if (dispatch) {
+              dispatch(tr);
+          }
+          return true;
+      }
+      catch {
+          return false;
+      }
+  };
+
+  const joinItemForward = () => ({ state, dispatch, tr, }) => {
+      try {
+          const point = transform.joinPoint(state.doc, state.selection.$from.pos, +1);
+          if (point === null || point === undefined) {
+              return false;
+          }
+          tr.join(point, 2);
+          if (dispatch) {
+              dispatch(tr);
+          }
+          return true;
+      }
+      catch (e) {
+          return false;
+      }
+  };
+
   function isMacOS() {
       return typeof navigator !== 'undefined'
           ? /Mac/.test(navigator.platform)
@@ -1943,6 +1987,283 @@
       return true;
   };
 
+  function getMarkAttributes(state, typeOrName) {
+      const type = getMarkType(typeOrName, state.schema);
+      const { from, to, empty } = state.selection;
+      const marks = [];
+      if (empty) {
+          if (state.storedMarks) {
+              marks.push(...state.storedMarks);
+          }
+          marks.push(...state.selection.$head.marks());
+      }
+      else {
+          state.doc.nodesBetween(from, to, node => {
+              marks.push(...node.marks);
+          });
+      }
+      const mark = marks.find(markItem => markItem.type.name === type.name);
+      if (!mark) {
+          return {};
+      }
+      return { ...mark.attrs };
+  }
+
+  const findListItemPos = (typeOrName, state) => {
+      const { $from } = state.selection;
+      const nodeType = getNodeType(typeOrName, state.schema);
+      let currentNode = null;
+      let currentDepth = $from.depth;
+      let currentPos = $from.pos;
+      let targetDepth = null;
+      while (currentDepth > 0 && targetDepth === null) {
+          currentNode = $from.node(currentDepth);
+          if (currentNode.type === nodeType) {
+              targetDepth = currentDepth;
+          }
+          else {
+              currentDepth -= 1;
+              currentPos -= 1;
+          }
+      }
+      if (targetDepth === null) {
+          return null;
+      }
+      return { $pos: state.doc.resolve(currentPos), depth: targetDepth };
+  };
+
+  /**
+   * Finds the first node of a given type or name in the current selection.
+   * @param state The editor state.
+   * @param typeOrName The node type or name.
+   * @param pos The position to start searching from.
+   * @param maxDepth The maximum depth to search.
+   * @returns The node and the depth as an array.
+   */
+  const getNodeAtPosition = (state, typeOrName, pos, maxDepth = 20) => {
+      const $pos = state.doc.resolve(pos);
+      let currentDepth = maxDepth;
+      let node = null;
+      while (currentDepth > 0 && node === null) {
+          const currentNode = $pos.node(currentDepth);
+          if ((currentNode === null || currentNode === void 0 ? void 0 : currentNode.type.name) === typeOrName) {
+              node = currentNode;
+          }
+          else {
+              currentDepth -= 1;
+          }
+      }
+      return [node, currentDepth];
+  };
+
+  const getNextListDepth = (typeOrName, state) => {
+      const listItemPos = findListItemPos(typeOrName, state);
+      if (!listItemPos) {
+          return false;
+      }
+      const [, depth] = getNodeAtPosition(state, typeOrName, listItemPos.$pos.pos + 4);
+      return depth;
+  };
+
+  const isAtStartOfNode = (state) => {
+      const { $from, $to } = state.selection;
+      if ($from.parentOffset > 0 || $from.pos !== $to.pos) {
+          return false;
+      }
+      return true;
+  };
+
+  const hasListBefore = (editorState, name, parentListTypes) => {
+      const { $anchor } = editorState.selection;
+      const previousNodePos = Math.max(0, $anchor.pos - 2);
+      const previousNode = editorState.doc.resolve(previousNodePos).node();
+      if (!previousNode || !parentListTypes.includes(previousNode.type.name)) {
+          return false;
+      }
+      return true;
+  };
+
+  const hasListItemBefore = (typeOrName, state) => {
+      var _a;
+      const { $anchor } = state.selection;
+      const $targetPos = state.doc.resolve($anchor.pos - 2);
+      if ($targetPos.index() === 0) {
+          return false;
+      }
+      if (((_a = $targetPos.nodeBefore) === null || _a === void 0 ? void 0 : _a.type.name) !== typeOrName) {
+          return false;
+      }
+      return true;
+  };
+
+  const listItemHasSubList = (typeOrName, state, node) => {
+      if (!node) {
+          return false;
+      }
+      const nodeType = getNodeType(typeOrName, state.schema);
+      let hasSubList = false;
+      node.descendants(child => {
+          if (child.type === nodeType) {
+              hasSubList = true;
+          }
+      });
+      return hasSubList;
+  };
+
+  const handleBackspace = (editor, name, parentListTypes) => {
+      // this is required to still handle the undo handling
+      if (editor.commands.undoInputRule()) {
+          return true;
+      }
+      // if the current item is NOT inside a list item &
+      // the previous item is a list (orderedList or bulletList)
+      // move the cursor into the list and delete the current item
+      if (!isNodeActive(editor.state, name) && hasListBefore(editor.state, name, parentListTypes)) {
+          const { $anchor } = editor.state.selection;
+          const $listPos = editor.state.doc.resolve($anchor.before() - 1);
+          const listDescendants = [];
+          $listPos.node().descendants((node, pos) => {
+              if (node.type.name === name) {
+                  listDescendants.push({ node, pos });
+              }
+          });
+          const lastItem = listDescendants.at(-1);
+          if (!lastItem) {
+              return false;
+          }
+          const $lastItemPos = editor.state.doc.resolve($listPos.start() + lastItem.pos + 1);
+          return editor.chain().cut({ from: $anchor.start() - 1, to: $anchor.end() + 1 }, $lastItemPos.end()).joinForward().run();
+      }
+      // if the cursor is not inside the current node type
+      // do nothing and proceed
+      if (!isNodeActive(editor.state, name)) {
+          return false;
+      }
+      // if the cursor is not at the start of a node
+      // do nothing and proceed
+      if (!isAtStartOfNode(editor.state)) {
+          return false;
+      }
+      const listItemPos = findListItemPos(name, editor.state);
+      if (!listItemPos) {
+          return false;
+      }
+      const $prev = editor.state.doc.resolve(listItemPos.$pos.pos - 2);
+      const prevNode = $prev.node(listItemPos.depth);
+      const previousListItemHasSubList = listItemHasSubList(name, editor.state, prevNode);
+      // if the previous item is a list item and doesn't have a sublist, join the list items
+      if (hasListItemBefore(name, editor.state) && !previousListItemHasSubList) {
+          return editor.commands.joinItemBackward();
+      }
+      // otherwise in the end, a backspace should
+      // always just lift the list item if
+      // joining / merging is not possible
+      return editor.chain().liftListItem(name).run();
+  };
+
+  function findParentNodeClosestToPos($pos, predicate) {
+      for (let i = $pos.depth; i > 0; i -= 1) {
+          const node = $pos.node(i);
+          if (predicate(node)) {
+              return {
+                  pos: i > 0 ? $pos.before(i) : 0,
+                  start: $pos.start(i),
+                  depth: i,
+                  node,
+              };
+          }
+      }
+  }
+
+  function findParentNode(predicate) {
+      return (selection) => findParentNodeClosestToPos(selection.$from, predicate);
+  }
+
+  const isAtEndOfNode = (state, nodeType) => {
+      const { $from, $to, $anchor } = state.selection;
+      if (nodeType) {
+          const parentNode = findParentNode(node => node.type.name === nodeType)(state.selection);
+          if (!parentNode) {
+              return false;
+          }
+          const $parentPos = state.doc.resolve(parentNode.pos + 1);
+          if ($anchor.pos + 1 === $parentPos.end()) {
+              return true;
+          }
+          return false;
+      }
+      if ($to.parentOffset < $to.parent.nodeSize - 2 || $from.pos !== $to.pos) {
+          return false;
+      }
+      return true;
+  };
+
+  const nextListIsDeeper = (typeOrName, state) => {
+      const listDepth = getNextListDepth(typeOrName, state);
+      const listItemPos = findListItemPos(typeOrName, state);
+      if (!listItemPos || !listDepth) {
+          return false;
+      }
+      if (listDepth > listItemPos.depth) {
+          return true;
+      }
+      return false;
+  };
+
+  const nextListIsHigher = (typeOrName, state) => {
+      const listDepth = getNextListDepth(typeOrName, state);
+      const listItemPos = findListItemPos(typeOrName, state);
+      if (!listItemPos || !listDepth) {
+          return false;
+      }
+      if (listDepth < listItemPos.depth) {
+          return true;
+      }
+      return false;
+  };
+
+  const handleDelete = (editor, name) => {
+      // if the cursor is not inside the current node type
+      // do nothing and proceed
+      if (!isNodeActive(editor.state, name)) {
+          return false;
+      }
+      // if the cursor is not at the end of a node
+      // do nothing and proceed
+      if (!isAtEndOfNode(editor.state, name)) {
+          return false;
+      }
+      // check if the next node is a list with a deeper depth
+      if (nextListIsDeeper(name, editor.state)) {
+          return editor
+              .chain()
+              .focus(editor.state.selection.from + 4)
+              .lift(name)
+              .joinBackward()
+              .run();
+      }
+      if (nextListIsHigher(name, editor.state)) {
+          return editor.chain()
+              .joinForward()
+              .joinBackward()
+              .run();
+      }
+      return editor.commands.joinItemForward();
+  };
+
+  const hasListItemAfter = (typeOrName, state) => {
+      var _a;
+      const { $anchor } = state.selection;
+      const $targetPos = state.doc.resolve($anchor.pos - $anchor.parentOffset - 2);
+      if ($targetPos.index() === $targetPos.parent.childCount - 1) {
+          return false;
+      }
+      if (((_a = $targetPos.nodeAfter) === null || _a === void 0 ? void 0 : _a.type.name) !== typeOrName) {
+          return false;
+      }
+      return true;
+  };
+
   /**
    * Returns a new `Transform` based on all steps of the passed transactions.
    */
@@ -2004,24 +2325,6 @@
       return nodesWithPos;
   }
 
-  function findParentNodeClosestToPos($pos, predicate) {
-      for (let i = $pos.depth; i > 0; i -= 1) {
-          const node = $pos.node(i);
-          if (predicate(node)) {
-              return {
-                  pos: i > 0 ? $pos.before(i) : 0,
-                  start: $pos.start(i),
-                  depth: i,
-                  node,
-              };
-          }
-      }
-  }
-
-  function findParentNode(predicate) {
-      return (selection) => findParentNodeClosestToPos(selection.$from, predicate);
-  }
-
   function getHTMLFromFragment(fragment, schema) {
       const documentFragment = model.DOMSerializer.fromSchema(schema).serializeFragment(fragment);
       const temporaryDocument = document.implementation.createHTMLDocument();
@@ -2068,28 +2371,6 @@
       });
   }
 
-  function getMarkAttributes(state, typeOrName) {
-      const type = getMarkType(typeOrName, state.schema);
-      const { from, to, empty } = state.selection;
-      const marks = [];
-      if (empty) {
-          if (state.storedMarks) {
-              marks.push(...state.storedMarks);
-          }
-          marks.push(...state.selection.$head.marks());
-      }
-      else {
-          state.doc.nodesBetween(from, to, node => {
-              marks.push(...node.marks);
-          });
-      }
-      const mark = marks.find(markItem => markItem.type.name === type.name);
-      if (!mark) {
-          return {};
-      }
-      return { ...mark.attrs };
-  }
-
   function getNodeAttributes(state, typeOrName) {
       const type = getNodeType(typeOrName, state.schema);
       const { from, to } = state.selection;
@@ -2958,6 +3239,7 @@
     clearNodes: clearNodes,
     command: command,
     createParagraphNear: createParagraphNear,
+    cut: cut,
     deleteCurrentNode: deleteCurrentNode,
     deleteNode: deleteNode,
     deleteRange: deleteRange,
@@ -2974,6 +3256,8 @@
     joinDown: joinDown,
     joinBackward: joinBackward,
     joinForward: joinForward,
+    joinItemBackward: joinItemBackward,
+    joinItemForward: joinItemForward,
     keyboardShortcut: keyboardShortcut,
     lift: lift,
     liftEmptyBlock: liftEmptyBlock,
@@ -3275,8 +3559,8 @@ img.ProseMirror-separator {
   opacity: 0
 }`;
 
-  function createStyleTag(style, nonce) {
-      const tiptapStyleTag = document.querySelector('style[data-tiptap-style]');
+  function createStyleTag(style, nonce, suffix) {
+      const tiptapStyleTag = document.querySelector(`style[data-tiptap-style${suffix ? `-${suffix}` : ''}]`);
       if (tiptapStyleTag !== null) {
           return tiptapStyleTag;
       }
@@ -3284,7 +3568,7 @@ img.ProseMirror-separator {
       if (nonce) {
           styleNode.setAttribute('nonce', nonce);
       }
-      styleNode.setAttribute('data-tiptap-style', '');
+      styleNode.setAttribute(`data-tiptap-style${suffix ? `-${suffix}` : ''}`, '');
       styleNode.innerHTML = style;
       document.getElementsByTagName('head')[0].appendChild(styleNode);
       return styleNode;
@@ -3661,7 +3945,6 @@ img.ProseMirror-separator {
               const { tr } = state;
               const captureGroup = match[match.length - 1];
               const fullMatch = match[0];
-              let markEnd = range.to;
               if (captureGroup) {
                   const startSpaces = fullMatch.search(/\S/);
                   const textStart = range.from + fullMatch.indexOf(captureGroup);
@@ -3682,7 +3965,7 @@ img.ProseMirror-separator {
                   if (textStart > range.from) {
                       tr.delete(range.from + startSpaces, textStart);
                   }
-                  markEnd = range.from + startSpaces + captureGroup.length;
+                  const markEnd = range.from + startSpaces + captureGroup.length;
                   tr.addMark(range.from + startSpaces, markEnd, config.type.create(attributes || {}));
                   tr.removeStoredMark(config.type);
               }
@@ -3697,11 +3980,14 @@ img.ProseMirror-separator {
   function nodeInputRule(config) {
       return new InputRule({
           find: config.find,
-          handler: ({ state, range, match }) => {
+          handler: ({ state: state$1, range, match }) => {
+              var _a;
               const attributes = callOrReturn(config.getAttributes, undefined, match) || {};
-              const { tr } = state;
-              const start = range.from;
+              const { tr } = state$1;
+              const start = config.blockReplace ? range.from - 1 : range.from;
               let end = range.to;
+              const newNode = config.type.create(attributes);
+              const { $to } = tr.selection;
               if (match[1]) {
                   const offset = match[0].lastIndexOf(match[1]);
                   let matchStart = start + offset;
@@ -3715,10 +4001,34 @@ img.ProseMirror-separator {
                   const lastChar = match[0][match[0].length - 1];
                   tr.insertText(lastChar, start + match[0].length - 1);
                   // insert node from input rule
-                  tr.replaceWith(matchStart, end, config.type.create(attributes));
+                  tr.replaceWith(matchStart, end, newNode);
               }
               else if (match[0]) {
-                  tr.replaceWith(start, end, config.type.create(attributes));
+                  tr.replaceWith(start, end, newNode);
+              }
+              if (config.blockReplace && config.addExtraNewline) {
+                  const posAfter = $to.end();
+                  if ($to.nodeAfter) {
+                      console.log($to.node().type.name);
+                      if ($to.nodeAfter.isTextblock) {
+                          tr.setSelection(state.TextSelection.create(tr.doc, $to.pos + 1));
+                      }
+                      else if ($to.nodeAfter.isBlock) {
+                          tr.setSelection(state.NodeSelection.create(tr.doc, $to.pos));
+                      }
+                      else {
+                          tr.setSelection(state.TextSelection.create(tr.doc, $to.pos));
+                      }
+                  }
+                  else {
+                      // add node after horizontal rule if it’s the end of the document
+                      const node = (_a = $to.parent.type.contentMatch.defaultType) === null || _a === void 0 ? void 0 : _a.create();
+                      if (node) {
+                          tr.insert(posAfter, node);
+                          tr.setSelection(state.TextSelection.create(tr.doc, posAfter + 1));
+                      }
+                  }
+                  tr.scrollIntoView();
               }
           },
       });
@@ -3970,6 +4280,10 @@ img.ProseMirror-separator {
       }
   }
 
+  function isAndroid() {
+      return navigator.platform === 'Android' || /android/i.test(navigator.userAgent);
+  }
+
   class NodeView {
       constructor(component, props, options) {
           this.isDragging = false;
@@ -4110,13 +4424,14 @@ img.ProseMirror-separator {
           if (mutation.type === 'selection') {
               return false;
           }
-          // try to prevent a bug on iOS that will break node views on enter
+          // try to prevent a bug on iOS and Android that will break node views on enter
           // this is because ProseMirror can’t preventDispatch on enter
           // this will lead to a re-render of the node view on enter
           // see: https://github.com/ueberdosis/tiptap/issues/1214
+          // see: https://github.com/ueberdosis/tiptap/issues/2534
           if (this.dom.contains(mutation.target)
               && mutation.type === 'childList'
-              && isiOS()
+              && (isiOS() || isAndroid())
               && this.editor.isFocused) {
               const changedNodes = [
                   ...Array.from(mutation.addedNodes),
@@ -4303,6 +4618,7 @@ img.ProseMirror-separator {
   exports.findChildren = findChildren;
   exports.findChildrenInRange = findChildrenInRange;
   exports.findDuplicates = findDuplicates;
+  exports.findListItemPos = findListItemPos;
   exports.findParentNode = findParentNode;
   exports.findParentNodeClosestToPos = findParentNodeClosestToPos;
   exports.fromString = fromString;
@@ -4319,6 +4635,8 @@ img.ProseMirror-separator {
   exports.getMarkRange = getMarkRange;
   exports.getMarkType = getMarkType;
   exports.getMarksBetween = getMarksBetween;
+  exports.getNextListDepth = getNextListDepth;
+  exports.getNodeAtPosition = getNodeAtPosition;
   exports.getNodeAttributes = getNodeAttributes;
   exports.getNodeType = getNodeType;
   exports.getRenderedAttributes = getRenderedAttributes;
@@ -4331,9 +4649,16 @@ img.ProseMirror-separator {
   exports.getTextBetween = getTextBetween;
   exports.getTextContentFromNodes = getTextContentFromNodes;
   exports.getTextSerializersFromSchema = getTextSerializersFromSchema;
+  exports.handleBackspace = handleBackspace;
+  exports.handleDelete = handleDelete;
+  exports.hasListBefore = hasListBefore;
+  exports.hasListItemAfter = hasListItemAfter;
+  exports.hasListItemBefore = hasListItemBefore;
   exports.injectExtensionAttributesToParseRule = injectExtensionAttributesToParseRule;
   exports.inputRulesPlugin = inputRulesPlugin;
   exports.isActive = isActive;
+  exports.isAtEndOfNode = isAtEndOfNode;
+  exports.isAtStartOfNode = isAtStartOfNode;
   exports.isEmptyObject = isEmptyObject;
   exports.isExtensionRulesEnabled = isExtensionRulesEnabled;
   exports.isFunction = isFunction;
@@ -4349,11 +4674,14 @@ img.ProseMirror-separator {
   exports.isString = isString;
   exports.isTextSelection = isTextSelection;
   exports.isiOS = isiOS;
+  exports.listItemHasSubList = listItemHasSubList;
   exports.markInputRule = markInputRule;
   exports.markPasteRule = markPasteRule;
   exports.mergeAttributes = mergeAttributes;
   exports.mergeDeep = mergeDeep;
   exports.minMax = minMax;
+  exports.nextListIsDeeper = nextListIsDeeper;
+  exports.nextListIsHigher = nextListIsHigher;
   exports.nodeInputRule = nodeInputRule;
   exports.nodePasteRule = nodePasteRule;
   exports.objectIncludes = objectIncludes;