@tiptap/core 2.9.1 → 2.10.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { Plugin, PluginKey, TextSelection, Selection, NodeSelection, EditorState } from '@tiptap/pm/state';
 import { EditorView } from '@tiptap/pm/view';
 import { keymap } from '@tiptap/pm/keymap';
-import { Schema, Fragment, DOMParser, DOMSerializer, Node as Node$1, Slice } from '@tiptap/pm/model';
+import { Schema, DOMSerializer, Fragment, Node as Node$1, DOMParser, Slice } from '@tiptap/pm/model';
 import { liftTarget, ReplaceStep, ReplaceAroundStep, joinPoint, Transform, canSplit, canJoin, findWrapping } from '@tiptap/pm/transform';
 import { createParagraphNear as createParagraphNear$1, deleteSelection as deleteSelection$1, exitCode as exitCode$1, joinUp as joinUp$1, joinDown as joinDown$1, joinBackward as joinBackward$1, joinForward as joinForward$1, joinTextblockBackward as joinTextblockBackward$1, joinTextblockForward as joinTextblockForward$1, lift as lift$1, liftEmptyBlock as liftEmptyBlock$1, newlineInCode as newlineInCode$1, selectNodeBackward as selectNodeBackward$1, selectNodeForward as selectNodeForward$1, selectParentNode as selectParentNode$1, selectTextblockEnd as selectTextblockEnd$1, selectTextblockStart as selectTextblockStart$1, setBlockType, wrapIn as wrapIn$1 } from '@tiptap/pm/commands';
 import { liftListItem as liftListItem$1, sinkListItem as sinkListItem$1, wrapInList as wrapInList$1 } from '@tiptap/pm/schema-list';
@@ -172,6 +172,13 @@ class EventEmitter {
         }
         return this;
     }
+    once(event, fn) {
+        const onceFn = (...args) => {
+            this.off(event, onceFn);
+            fn.apply(this, args);
+        };
+        return this.on(event, onceFn);
+    }
     removeAllListeners() {
         this.callbacks = {};
     }
@@ -477,6 +484,7 @@ function getSchemaByResolvedExtensions(extensions, editor) {
             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 => {
@@ -570,6 +578,14 @@ function isExtensionRulesEnabled(extension, enabled) {
     return enabled;
 }
 
+function getHTMLFromFragment(fragment, schema) {
+    const documentFragment = 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
@@ -699,7 +715,7 @@ function inputRulesPlugin(props) {
             init() {
                 return null;
             },
-            apply(tr, prev) {
+            apply(tr, prev, state) {
                 const stored = tr.getMeta(plugin);
                 if (stored) {
                     return stored;
@@ -709,7 +725,14 @@ function inputRulesPlugin(props) {
                 const isSimulatedInput = !!simulatedInputMeta;
                 if (isSimulatedInput) {
                     setTimeout(() => {
-                        const { from, text } = simulatedInputMeta;
+                        let { text } = simulatedInputMeta;
+                        if (typeof text === 'string') {
+                            text = text;
+                        }
+                        else {
+                            text = getHTMLFromFragment(Fragment.from(text), state.schema);
+                        }
+                        const { from } = simulatedInputMeta;
                         const to = from + text.length;
                         run$1({
                             editor,
@@ -902,7 +925,7 @@ function isNumber(value) {
 
 /**
  * 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) {
@@ -992,7 +1015,13 @@ function pasteRulesPlugin(props) {
     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({
@@ -1011,7 +1040,12 @@ function pasteRulesPlugin(props) {
         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;
     };
@@ -1060,7 +1094,14 @@ function pasteRulesPlugin(props) {
                 }
                 // Handle simulated paste
                 if (isSimulatedPaste) {
-                    const { from, text } = simulatedPasteMeta;
+                    let { text } = simulatedPasteMeta;
+                    if (typeof text === 'string') {
+                        text = text;
+                    }
+                    else {
+                        text = getHTMLFromFragment(Fragment.from(text), state.schema);
+                    }
+                    const { from } = simulatedPasteMeta;
                     const to = from + text.length;
                     const pasteEvt = createClipboardPasteEvent(text);
                     return processEvent({
@@ -1657,13 +1698,33 @@ function objectIncludes(object1, object2, options = { strict: true }) {
 
 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;
     }
@@ -1676,6 +1737,8 @@ function getMarkRange($pos, type, attributes = {}) {
     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);
@@ -1686,8 +1749,8 @@ function getMarkRange($pos, type, attributes = {}) {
     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;
     }
@@ -1863,6 +1926,9 @@ function elementFromString(value) {
  * @returns The created Prosemirror node or fragment
  */
 function createNodeFromContent(content, schema, options) {
+    if (content instanceof Node$1 || content instanceof Fragment) {
+        return content;
+    }
     options = {
         slice: true,
         parseOptions: {},
@@ -2027,6 +2093,15 @@ const insertContentAt = (position, value, options) => ({ tr, dispatch, editor })
             if (Array.isArray(value)) {
                 newContent = value.map(v => v.text || '').join('');
             }
+            else if (value instanceof 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;
             }
@@ -2523,14 +2598,6 @@ function findParentNode(predicate) {
     return (selection) => findParentNodeClosestToPos(selection.$from, predicate);
 }
 
-function getHTMLFromFragment(fragment, schema) {
-    const documentFragment = 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);
@@ -3101,6 +3168,11 @@ const setMeta = (key, value) => ({ tr }) => {
 
 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.');
@@ -3109,14 +3181,14 @@ const setNode = (typeOrName, attributes = {}) => ({ state, dispatch, chain }) =>
     return (chain()
         // try to convert node to default node if needed
         .command(({ commands }) => {
-        const canSetBlock = setBlockType(type, attributes)(state);
+        const canSetBlock = setBlockType(type, { ...attributesToCopy, ...attributes })(state);
         if (canSetBlock) {
             return true;
         }
         return commands.clearNodes();
     })
         .command(({ state: updatedState }) => {
-        return setBlockType(type, attributes)(updatedState, dispatch);
+        return setBlockType(type, { ...attributesToCopy, ...attributes })(updatedState, dispatch);
     })
         .run());
 };
@@ -3535,21 +3607,63 @@ const updateAttributes = (typeOrName, attributes = {}) => ({ tr, state, dispatch
         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,
@@ -3557,7 +3671,7 @@ const updateAttributes = (typeOrName, attributes = {}) => ({ tr, state, dispatch
                         }
                     });
                 }
-            });
+            }
         });
     }
     return true;
@@ -4373,6 +4487,7 @@ class Editor extends EventEmitter {
      * Creates a ProseMirror view.
      */
     createView() {
+        var _a;
         let doc;
         try {
             doc = createDocument(this.options.content, this.schema, this.options.parseOptions, { errorOnInvalidContent: this.options.enableContentCheck });
@@ -4401,18 +4516,17 @@ class Editor extends EventEmitter {
         const selection = resolveFocusPosition(doc, this.options.autofocus);
         this.view = new 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: 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({
@@ -4608,7 +4722,7 @@ class Editor extends EventEmitter {
 /**
  * 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({
@@ -4652,7 +4766,7 @@ function markInputRule(config) {
 /**
  * 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({
@@ -4692,7 +4806,7 @@ function nodeInputRule(config) {
  * 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({
@@ -4713,7 +4827,7 @@ function textblockTypeInputRule(config) {
 /**
  * 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({
@@ -4750,7 +4864,7 @@ function textInputRule(config) {
  * 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({
@@ -5083,7 +5197,7 @@ class NodeView {
 /**
  * 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({
@@ -5137,7 +5251,7 @@ function isString(value) {
 /**
  * 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({
@@ -5162,7 +5276,7 @@ function nodePasteRule(config) {
 /**
  * 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({