@tiptap/core 2.9.0 → 2.10.0

package/dist/index.umd.js

@@ -170,6 +170,13 @@
           }
           return this;
       }
+      once(event, fn) {
+          const onceFn = (...args) => {
+              this.off(event, onceFn);
+              fn.apply(this, args);
+          };
+          return this.on(event, onceFn);
+      }
       removeAllListeners() {
           this.callbacks = {};
       }
@@ -475,6 +482,7 @@
               draggable: callOrReturn(getExtensionField(extension, 'draggable', context)),
               code: callOrReturn(getExtensionField(extension, 'code', context)),
               whitespace: callOrReturn(getExtensionField(extension, 'whitespace', context)),
+              linebreakReplacement: callOrReturn(getExtensionField(extension, 'linebreakReplacement', context)),
               defining: callOrReturn(getExtensionField(extension, 'defining', context)),
               isolating: callOrReturn(getExtensionField(extension, 'isolating', context)),
               attrs: Object.fromEntries(extensionAttributes.map(extensionAttribute => {
@@ -568,6 +576,14 @@
       return enabled;
   }
 
+  function getHTMLFromFragment(fragment, schema) {
+      const documentFragment = model.DOMSerializer.fromSchema(schema).serializeFragment(fragment);
+      const temporaryDocument = document.implementation.createHTMLDocument();
+      const container = temporaryDocument.createElement('div');
+      container.appendChild(documentFragment);
+      return container.innerHTML;
+  }
+
   /**
    * Returns the text content of a resolved prosemirror position
    * @param $from The resolved position to get the text content from
@@ -697,7 +713,7 @@
               init() {
                   return null;
               },
-              apply(tr, prev) {
+              apply(tr, prev, state) {
                   const stored = tr.getMeta(plugin);
                   if (stored) {
                       return stored;
@@ -707,7 +723,14 @@
                   const isSimulatedInput = !!simulatedInputMeta;
                   if (isSimulatedInput) {
                       setTimeout(() => {
-                          const { from, text } = simulatedInputMeta;
+                          let { text } = simulatedInputMeta;
+                          if (typeof text === 'string') {
+                              text = text;
+                          }
+                          else {
+                              text = getHTMLFromFragment(model.Fragment.from(text), state.schema);
+                          }
+                          const { from } = simulatedInputMeta;
                           const to = from + text.length;
                           run$1({
                               editor,
@@ -900,7 +923,7 @@
 
   /**
    * Paste rules are used to react to pasted content.
-   * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+   * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
    */
   class PasteRule {
       constructor(config) {
@@ -990,7 +1013,13 @@
       let isPastedFromProseMirror = false;
       let isDroppedFromProseMirror = false;
       let pasteEvent = typeof ClipboardEvent !== 'undefined' ? new ClipboardEvent('paste') : null;
-      let dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null;
+      let dropEvent;
+      try {
+          dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null;
+      }
+      catch (e) {
+          dropEvent = null;
+      }
       const processEvent = ({ state, from, to, rule, pasteEvt, }) => {
           const tr = state.tr;
           const chainableState = createChainableState({
@@ -1009,7 +1038,12 @@
           if (!handler || !tr.steps.length) {
               return;
           }
-          dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null;
+          try {
+              dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null;
+          }
+          catch (e) {
+              dropEvent = null;
+          }
           pasteEvent = typeof ClipboardEvent !== 'undefined' ? new ClipboardEvent('paste') : null;
           return tr;
       };
@@ -1058,7 +1092,14 @@
                   }
                   // Handle simulated paste
                   if (isSimulatedPaste) {
-                      const { from, text } = simulatedPasteMeta;
+                      let { text } = simulatedPasteMeta;
+                      if (typeof text === 'string') {
+                          text = text;
+                      }
+                      else {
+                          text = getHTMLFromFragment(model.Fragment.from(text), state.schema);
+                      }
+                      const { from } = simulatedPasteMeta;
                       const to = from + text.length;
                       const pasteEvt = createClipboardPasteEvent(text);
                       return processEvent({
@@ -1655,13 +1696,33 @@
 
   function findMarkInSet(marks, type, attributes = {}) {
       return marks.find(item => {
-          return item.type === type && objectIncludes(item.attrs, attributes);
+          return (item.type === type
+              && objectIncludes(
+              // Only check equality for the attributes that are provided
+              Object.fromEntries(Object.keys(attributes).map(k => [k, item.attrs[k]])), attributes));
       });
   }
   function isMarkInSet(marks, type, attributes = {}) {
       return !!findMarkInSet(marks, type, attributes);
   }
-  function getMarkRange($pos, type, attributes = {}) {
+  /**
+   * Get the range of a mark at a resolved position.
+   */
+  function getMarkRange(
+  /**
+   * The position to get the mark range for.
+   */
+  $pos, 
+  /**
+   * The mark type to get the range for.
+   */
+  type, 
+  /**
+   * The attributes to match against.
+   * If not provided, only the first mark at the position will be matched.
+   */
+  attributes) {
+      var _a;
       if (!$pos || !type) {
           return;
       }
@@ -1674,6 +1735,8 @@
       if (!start.node || !start.node.marks.some(mark => mark.type === type)) {
           return;
       }
+      // Default to only matching against the first mark's attributes
+      attributes = attributes || ((_a = start.node.marks[0]) === null || _a === void 0 ? void 0 : _a.attrs);
       // We now know that the cursor is either at the start, middle or end of a text node with the specified mark
       // so we can look it up on the targeted mark
       const mark = findMarkInSet([...start.node.marks], type, attributes);
@@ -1684,8 +1747,8 @@
       let startPos = $pos.start() + start.offset;
       let endIndex = startIndex + 1;
       let endPos = startPos + start.node.nodeSize;
-      findMarkInSet([...start.node.marks], type, attributes);
-      while (startIndex > 0 && mark.isInSet($pos.parent.child(startIndex - 1).marks)) {
+      while (startIndex > 0
+          && isMarkInSet([...$pos.parent.child(startIndex - 1).marks], type, attributes)) {
           startIndex -= 1;
           startPos -= $pos.parent.child(startIndex).nodeSize;
       }
@@ -1861,6 +1924,9 @@
    * @returns The created Prosemirror node or fragment
    */
   function createNodeFromContent(content, schema, options) {
+      if (content instanceof model.Node || content instanceof model.Fragment) {
+          return content;
+      }
       options = {
           slice: true,
           parseOptions: {},
@@ -2025,6 +2091,15 @@
               if (Array.isArray(value)) {
                   newContent = value.map(v => v.text || '').join('');
               }
+              else if (value instanceof model.Fragment) {
+                  let text = '';
+                  value.forEach(node => {
+                      if (node.text) {
+                          text += node.text;
+                      }
+                  });
+                  newContent = text;
+              }
               else if (typeof value === 'object' && !!value && !!value.text) {
                   newContent = value.text;
               }
@@ -2521,14 +2596,6 @@
       return (selection) => findParentNodeClosestToPos(selection.$from, predicate);
   }
 
-  function getHTMLFromFragment(fragment, schema) {
-      const documentFragment = model.DOMSerializer.fromSchema(schema).serializeFragment(fragment);
-      const temporaryDocument = document.implementation.createHTMLDocument();
-      const container = temporaryDocument.createElement('div');
-      container.appendChild(documentFragment);
-      return container.innerHTML;
-  }
-
   function getSchema(extensions, editor) {
       const resolvedExtensions = ExtensionManager.resolve(extensions);
       return getSchemaByResolvedExtensions(resolvedExtensions, editor);
@@ -3099,6 +3166,11 @@
 
   const setNode = (typeOrName, attributes = {}) => ({ state, dispatch, chain }) => {
       const type = getNodeType(typeOrName, state.schema);
+      let attributesToCopy;
+      if (state.selection.$anchor.sameParent(state.selection.$head)) {
+          // only copy attributes if the selection is pointing to a node of the same type
+          attributesToCopy = state.selection.$anchor.parent.attrs;
+      }
       // TODO: use a fallback like insertContent?
       if (!type.isTextblock) {
           console.warn('[tiptap warn]: Currently "setNode()" only supports text block nodes.');
@@ -3107,14 +3179,14 @@
       return (chain()
           // try to convert node to default node if needed
           .command(({ commands }) => {
-          const canSetBlock = commands$1.setBlockType(type, attributes)(state);
+          const canSetBlock = commands$1.setBlockType(type, { ...attributesToCopy, ...attributes })(state);
           if (canSetBlock) {
               return true;
           }
           return commands.clearNodes();
       })
           .command(({ state: updatedState }) => {
-          return commands$1.setBlockType(type, attributes)(updatedState, dispatch);
+          return commands$1.setBlockType(type, { ...attributesToCopy, ...attributes })(updatedState, dispatch);
       })
           .run());
   };
@@ -3533,21 +3605,63 @@
           markType = getMarkType(typeOrName, state.schema);
       }
       if (dispatch) {
-          tr.selection.ranges.forEach(range => {
+          tr.selection.ranges.forEach((range) => {
               const from = range.$from.pos;
               const to = range.$to.pos;
-              state.doc.nodesBetween(from, to, (node, pos) => {
-                  if (nodeType && nodeType === node.type) {
-                      tr.setNodeMarkup(pos, undefined, {
-                          ...node.attrs,
+              let lastPos;
+              let lastNode;
+              let trimmedFrom;
+              let trimmedTo;
+              if (tr.selection.empty) {
+                  state.doc.nodesBetween(from, to, (node, pos) => {
+                      if (nodeType && nodeType === node.type) {
+                          trimmedFrom = Math.max(pos, from);
+                          trimmedTo = Math.min(pos + node.nodeSize, to);
+                          lastPos = pos;
+                          lastNode = node;
+                      }
+                  });
+              }
+              else {
+                  state.doc.nodesBetween(from, to, (node, pos) => {
+                      if (pos < from && nodeType && nodeType === node.type) {
+                          trimmedFrom = Math.max(pos, from);
+                          trimmedTo = Math.min(pos + node.nodeSize, to);
+                          lastPos = pos;
+                          lastNode = node;
+                      }
+                      if (pos >= from && pos <= to) {
+                          if (nodeType && nodeType === node.type) {
+                              tr.setNodeMarkup(pos, undefined, {
+                                  ...node.attrs,
+                                  ...attributes,
+                              });
+                          }
+                          if (markType && node.marks.length) {
+                              node.marks.forEach((mark) => {
+                                  if (markType === mark.type) {
+                                      const trimmedFrom2 = Math.max(pos, from);
+                                      const trimmedTo2 = Math.min(pos + node.nodeSize, to);
+                                      tr.addMark(trimmedFrom2, trimmedTo2, markType.create({
+                                          ...mark.attrs,
+                                          ...attributes,
+                                      }));
+                                  }
+                              });
+                          }
+                      }
+                  });
+              }
+              if (lastNode) {
+                  if (lastPos !== undefined) {
+                      tr.setNodeMarkup(lastPos, undefined, {
+                          ...lastNode.attrs,
                           ...attributes,
                       });
                   }
-                  if (markType && node.marks.length) {
-                      node.marks.forEach(mark => {
+                  if (markType && lastNode.marks.length) {
+                      lastNode.marks.forEach((mark) => {
                           if (markType === mark.type) {
-                              const trimmedFrom = Math.max(pos, from);
-                              const trimmedTo = Math.min(pos + node.nodeSize, to);
                               tr.addMark(trimmedFrom, trimmedTo, markType.create({
                                   ...mark.attrs,
                                   ...attributes,
@@ -3555,7 +3669,7 @@
                           }
                       });
                   }
-              });
+              }
           });
       }
       return true;
@@ -4371,6 +4485,7 @@ img.ProseMirror-separator {
        * Creates a ProseMirror view.
        */
       createView() {
+          var _a;
           let doc;
           try {
               doc = createDocument(this.options.content, this.schema, this.options.parseOptions, { errorOnInvalidContent: this.options.enableContentCheck });
@@ -4399,18 +4514,17 @@ img.ProseMirror-separator {
           const selection = resolveFocusPosition(doc, this.options.autofocus);
           this.view = new view.EditorView(this.options.element, {
               ...this.options.editorProps,
+              attributes: {
+                  // add `role="textbox"` to the editor element
+                  role: 'textbox',
+                  ...(_a = this.options.editorProps) === null || _a === void 0 ? void 0 : _a.attributes,
+              },
               dispatchTransaction: this.dispatchTransaction.bind(this),
               state: state.EditorState.create({
                   doc,
                   selection: selection || undefined,
               }),
           });
-          // add `role="textbox"` to the editor element
-          this.view.dom.setAttribute('role', 'textbox');
-          // add aria-label to the editor element
-          if (!this.view.dom.getAttribute('aria-label')) {
-              this.view.dom.setAttribute('aria-label', 'Rich-Text Editor');
-          }
           // `editor.view` is not yet available at this time.
           // Therefore we will add all plugins and node views directly afterwards.
           const newState = this.state.reconfigure({
@@ -4606,7 +4720,7 @@ img.ProseMirror-separator {
   /**
    * Build an input rule that adds a mark when the
    * matched text is typed into it.
-   * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+   * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
    */
   function markInputRule(config) {
       return new InputRule({
@@ -4650,7 +4764,7 @@ img.ProseMirror-separator {
   /**
    * Build an input rule that adds a node when the
    * matched text is typed into it.
-   * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+   * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
    */
   function nodeInputRule(config) {
       return new InputRule({
@@ -4690,7 +4804,7 @@ img.ProseMirror-separator {
    * matched text is typed into it. When using a regular expresion you’ll
    * probably want the regexp to start with `^`, so that the pattern can
    * only occur at the start of a textblock.
-   * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+   * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
    */
   function textblockTypeInputRule(config) {
       return new InputRule({
@@ -4711,7 +4825,7 @@ img.ProseMirror-separator {
   /**
    * Build an input rule that replaces text when the
    * matched text is typed into it.
-   * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+   * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
    */
   function textInputRule(config) {
       return new InputRule({
@@ -4748,7 +4862,7 @@ img.ProseMirror-separator {
    * two nodes. You can pass a join predicate, which takes a regular
    * expression match and the node before the wrapped node, and can
    * return a boolean to indicate whether a join should happen.
-   * @see https://tiptap.dev/guide/custom-extensions/#input-rules
+   * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#input-rules
    */
   function wrappingInputRule(config) {
       return new InputRule({
@@ -5081,7 +5195,7 @@ img.ProseMirror-separator {
   /**
    * Build an paste rule that adds a mark when the
    * matched text is pasted into it.
-   * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+   * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
    */
   function markPasteRule(config) {
       return new PasteRule({
@@ -5135,7 +5249,7 @@ img.ProseMirror-separator {
   /**
    * Build an paste rule that adds a node when the
    * matched text is pasted into it.
-   * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+   * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
    */
   function nodePasteRule(config) {
       return new PasteRule({
@@ -5160,7 +5274,7 @@ img.ProseMirror-separator {
   /**
    * Build an paste rule that replaces text when the
    * matched text is pasted into it.
-   * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+   * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
    */
   function textPasteRule(config) {
       return new PasteRule({