@tiptap/core 2.7.4 → 2.9.0

package/dist/index.cjs

@@ -781,6 +781,123 @@ function inputRulesPlugin(props) {
     return plugin;
 }
 
+// see: https://github.com/mesqueeb/is-what/blob/88d6e4ca92fb2baab6003c54e02eedf4e729e5ab/src/index.ts
+function getType(value) {
+    return Object.prototype.toString.call(value).slice(8, -1);
+}
+function isPlainObject(value) {
+    if (getType(value) !== 'Object') {
+        return false;
+    }
+    return value.constructor === Object && Object.getPrototypeOf(value) === Object.prototype;
+}
+
+function mergeDeep(target, source) {
+    const output = { ...target };
+    if (isPlainObject(target) && isPlainObject(source)) {
+        Object.keys(source).forEach(key => {
+            if (isPlainObject(source[key]) && isPlainObject(target[key])) {
+                output[key] = mergeDeep(target[key], source[key]);
+            }
+            else {
+                output[key] = source[key];
+            }
+        });
+    }
+    return output;
+}
+
+/**
+ * The Mark class is used to create custom mark extensions.
+ * @see https://tiptap.dev/api/extensions#create-a-new-extension
+ */
+class Mark {
+    constructor(config = {}) {
+        this.type = 'mark';
+        this.name = 'mark';
+        this.parent = null;
+        this.child = null;
+        this.config = {
+            name: this.name,
+            defaultOptions: {},
+        };
+        this.config = {
+            ...this.config,
+            ...config,
+        };
+        this.name = this.config.name;
+        if (config.defaultOptions && Object.keys(config.defaultOptions).length > 0) {
+            console.warn(`[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${this.name}".`);
+        }
+        // TODO: remove `addOptions` fallback
+        this.options = this.config.defaultOptions;
+        if (this.config.addOptions) {
+            this.options = callOrReturn(getExtensionField(this, 'addOptions', {
+                name: this.name,
+            }));
+        }
+        this.storage = callOrReturn(getExtensionField(this, 'addStorage', {
+            name: this.name,
+            options: this.options,
+        })) || {};
+    }
+    static create(config = {}) {
+        return new Mark(config);
+    }
+    configure(options = {}) {
+        // return a new instance so we can use the same extension
+        // with different calls of `configure`
+        const extension = this.extend({
+            ...this.config,
+            addOptions: () => {
+                return mergeDeep(this.options, options);
+            },
+        });
+        // Always preserve the current name
+        extension.name = this.name;
+        // Set the parent to be our parent
+        extension.parent = this.parent;
+        return extension;
+    }
+    extend(extendedConfig = {}) {
+        const extension = new Mark(extendedConfig);
+        extension.parent = this;
+        this.child = extension;
+        extension.name = extendedConfig.name ? extendedConfig.name : extension.parent.name;
+        if (extendedConfig.defaultOptions && Object.keys(extendedConfig.defaultOptions).length > 0) {
+            console.warn(`[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${extension.name}".`);
+        }
+        extension.options = callOrReturn(getExtensionField(extension, 'addOptions', {
+            name: extension.name,
+        }));
+        extension.storage = callOrReturn(getExtensionField(extension, 'addStorage', {
+            name: extension.name,
+            options: extension.options,
+        }));
+        return extension;
+    }
+    static handleExit({ editor, mark }) {
+        const { tr } = editor.state;
+        const currentPos = editor.state.selection.$from;
+        const isAtEnd = currentPos.pos === currentPos.end();
+        if (isAtEnd) {
+            const currentMarks = currentPos.marks();
+            const isInMark = !!currentMarks.find(m => (m === null || m === void 0 ? void 0 : m.type.name) === mark.name);
+            if (!isInMark) {
+                return false;
+            }
+            const removeMark = currentMarks.find(m => (m === null || m === void 0 ? void 0 : m.type.name) === mark.name);
+            if (removeMark) {
+                tr.removeStoredMark(removeMark);
+            }
+            tr.insertText(' ', currentPos.pos);
+            editor.view.dispatch(tr);
+            return true;
+        }
+        return false;
+    }
+}
+
 function isNumber(value) {
     return typeof value === 'number';
 }
@@ -1240,32 +1357,6 @@ class ExtensionManager {
     }
 }
 
-// see: https://github.com/mesqueeb/is-what/blob/88d6e4ca92fb2baab6003c54e02eedf4e729e5ab/src/index.ts
-function getType(value) {
-    return Object.prototype.toString.call(value).slice(8, -1);
-}
-function isPlainObject(value) {
-    if (getType(value) !== 'Object') {
-        return false;
-    }
-    return value.constructor === Object && Object.getPrototypeOf(value) === Object.prototype;
-}
-
-function mergeDeep(target, source) {
-    const output = { ...target };
-    if (isPlainObject(target) && isPlainObject(source)) {
-        Object.keys(source).forEach(key => {
-            if (isPlainObject(source[key]) && isPlainObject(target[key])) {
-                output[key] = mergeDeep(target[key], source[key]);
-            }
-            else {
-                output[key] = source[key];
-            }
-        });
-    }
-    return output;
-}
-
 /**
  * The Extension class is the base class for all extensions.
  * @see https://tiptap.dev/api/extensions#create-a-new-extension
@@ -1579,12 +1670,16 @@ function getMarkRange($pos, type, attributes = {}) {
         return;
     }
     let start = $pos.parent.childAfter($pos.parentOffset);
-    if ($pos.parentOffset === start.offset && start.offset !== 0) {
+    // If the cursor is at the start of a text node that does not have the mark, look backward
+    if (!start.node || !start.node.marks.some(mark => mark.type === type)) {
         start = $pos.parent.childBefore($pos.parentOffset);
     }
-    if (!start.node) {
+    // If there is no text node with the mark even backward, return undefined
+    if (!start.node || !start.node.marks.some(mark => mark.type === type)) {
         return;
     }
+    // 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);
     if (!mark) {
         return;
@@ -1874,7 +1969,7 @@ const insertContentAt = (position, value, options) => ({ tr, dispatch, editor })
     var _a;
     if (dispatch) {
         options = {
-            parseOptions: {},
+            parseOptions: editor.options.parseOptions,
             updateSelection: true,
             applyInputRules: false,
             applyPasteRules: false,
@@ -1895,7 +1990,9 @@ const insertContentAt = (position, value, options) => ({ tr, dispatch, editor })
                 editor,
                 error: e,
                 disableCollaboration: () => {
-                    console.error('[tiptap error]: Unable to disable collaboration at this point in time');
+                    if (editor.storage.collaboration) {
+                        editor.storage.collaboration.isDisabled = true;
+                    }
                 },
             });
             return false;
@@ -3549,6 +3646,27 @@ const Commands = Extension.create({
     },
 });
 
+const Drop = Extension.create({
+    name: 'drop',
+    addProseMirrorPlugins() {
+        return [
+            new state.Plugin({
+                key: new state.PluginKey('tiptapDrop'),
+                props: {
+                    handleDrop: (_, e, slice, moved) => {
+                        this.editor.emit('drop', {
+                            editor: this.editor,
+                            event: e,
+                            slice,
+                            moved,
+                        });
+                    },
+                },
+            }),
+        ];
+    },
+});
+
 const Editable = Extension.create({
     name: 'editable',
     addProseMirrorPlugins() {
@@ -3713,6 +3831,26 @@ const Keymap = Extension.create({
     },
 });
 
+const Paste = Extension.create({
+    name: 'paste',
+    addProseMirrorPlugins() {
+        return [
+            new state.Plugin({
+                key: new state.PluginKey('tiptapPaste'),
+                props: {
+                    handlePaste: (_view, e, slice) => {
+                        this.editor.emit('paste', {
+                            editor: this.editor,
+                            event: e,
+                            slice,
+                        });
+                    },
+                },
+            }),
+        ];
+    },
+});
+
 const Tabindex = Extension.create({
     name: 'tabindex',
     addProseMirrorPlugins() {
@@ -3731,9 +3869,11 @@ var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ClipboardTextSerializer: ClipboardTextSerializer,
   Commands: Commands,
+  Drop: Drop,
   Editable: Editable,
   FocusEvents: FocusEvents,
   Keymap: Keymap,
+  Paste: Paste,
   Tabindex: Tabindex
 });
 
@@ -3831,7 +3971,8 @@ class NodePos {
         const children = [];
         this.node.content.forEach((node, offset) => {
             const isBlock = node.isBlock && !node.isTextblock;
-            const targetPos = this.pos + offset + 1;
+            const isNonTextAtom = node.isAtom && !node.isText;
+            const targetPos = this.pos + offset + (isNonTextAtom ? 0 : 1);
             const $pos = this.resolvedPos.doc.resolve(targetPos);
             if (!isBlock && $pos.depth <= this.depth) {
                 return;
@@ -3907,34 +4048,15 @@ class NodePos {
         return nodes;
     }
     setAttribute(attributes) {
-        const oldSelection = this.editor.state.selection;
-        this.editor.chain().setTextSelection(this.from).updateAttributes(this.node.type.name, attributes).setTextSelection(oldSelection.from)
-            .run();
+        const { tr } = this.editor.state;
+        tr.setNodeMarkup(this.from, undefined, {
+            ...this.node.attrs,
+            ...attributes,
+        });
+        this.editor.view.dispatch(tr);
     }
 }
 
-const DropPlugin = (onDrop) => {
-    return new state.Plugin({
-        key: new state.PluginKey('tiptapDrop'),
-        props: {
-            handleDrop: (_, e, slice, moved) => {
-                onDrop(e, slice, moved);
-            },
-        },
-    });
-};
-
-const PastePlugin = (onPaste) => {
-    return new state.Plugin({
-        key: new state.PluginKey('tiptapPaste'),
-        props: {
-            handlePaste: (_view, e, slice) => {
-                onPaste(e, slice);
-            },
-        },
-    });
-};
-
 const style = `.ProseMirror {
   position: relative;
 }
@@ -4080,12 +4202,8 @@ class Editor extends EventEmitter {
         this.on('focus', this.options.onFocus);
         this.on('blur', this.options.onBlur);
         this.on('destroy', this.options.onDestroy);
-        if (this.options.onPaste) {
-            this.registerPlugin(PastePlugin(this.options.onPaste));
-        }
-        if (this.options.onDrop) {
-            this.registerPlugin(DropPlugin(this.options.onDrop));
-        }
+        this.on('drop', ({ event, slice, moved }) => this.options.onDrop(event, slice, moved));
+        this.on('paste', ({ event, slice }) => this.options.onPaste(event, slice));
         window.setTimeout(() => {
             if (this.isDestroyed) {
                 return;
@@ -4187,18 +4305,27 @@ class Editor extends EventEmitter {
     /**
      * Unregister a ProseMirror plugin.
      *
-     * @param nameOrPluginKey The plugins name
+     * @param nameOrPluginKeyToRemove The plugins name
      * @returns The new editor state or undefined if the editor is destroyed
      */
-    unregisterPlugin(nameOrPluginKey) {
+    unregisterPlugin(nameOrPluginKeyToRemove) {
         if (this.isDestroyed) {
             return undefined;
         }
-        // @ts-ignore
-        const name = typeof nameOrPluginKey === 'string' ? `${nameOrPluginKey}$` : nameOrPluginKey.key;
-        const state = this.state.reconfigure({
+        const prevPlugins = this.state.plugins;
+        let plugins = prevPlugins;
+        [].concat(nameOrPluginKeyToRemove).forEach(nameOrPluginKey => {
+            // @ts-ignore
+            const name = typeof nameOrPluginKey === 'string' ? `${nameOrPluginKey}$` : nameOrPluginKey.key;
             // @ts-ignore
-            plugins: this.state.plugins.filter(plugin => !plugin.key.startsWith(name)),
+            plugins = prevPlugins.filter(plugin => !plugin.key.startsWith(name));
+        });
+        if (prevPlugins.length === plugins.length) {
+            // No plugin was removed, so we don’t need to update the state
+            return undefined;
+        }
+        const state = this.state.reconfigure({
+            plugins,
         });
         this.view.updateState(state);
         return state;
@@ -4217,6 +4344,8 @@ class Editor extends EventEmitter {
             FocusEvents,
             Keymap,
             Tabindex,
+            Drop,
+            Paste,
         ].filter(ext => {
             if (typeof this.options.enableCoreExtensions === 'object') {
                 return this.options.enableCoreExtensions[ext.name] !== false;
@@ -4259,6 +4388,9 @@ class Editor extends EventEmitter {
                 editor: this,
                 error: e,
                 disableCollaboration: () => {
+                    if (this.storage.collaboration) {
+                        this.storage.collaboration.isDisabled = true;
+                    }
                     // To avoid syncing back invalid content, reinitialize the extensions without the collaboration extension
                     this.options.extensions = this.options.extensions.filter(extension => extension.name !== 'collaboration');
                     // Restart the initialization process by recreating the extension manager with the new set of extensions
@@ -4277,6 +4409,12 @@ class Editor extends EventEmitter {
                 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({
@@ -4654,97 +4792,6 @@ function wrappingInputRule(config) {
     });
 }
 
-/**
- * The Mark class is used to create custom mark extensions.
- * @see https://tiptap.dev/api/extensions#create-a-new-extension
- */
-class Mark {
-    constructor(config = {}) {
-        this.type = 'mark';
-        this.name = 'mark';
-        this.parent = null;
-        this.child = null;
-        this.config = {
-            name: this.name,
-            defaultOptions: {},
-        };
-        this.config = {
-            ...this.config,
-            ...config,
-        };
-        this.name = this.config.name;
-        if (config.defaultOptions && Object.keys(config.defaultOptions).length > 0) {
-            console.warn(`[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${this.name}".`);
-        }
-        // TODO: remove `addOptions` fallback
-        this.options = this.config.defaultOptions;
-        if (this.config.addOptions) {
-            this.options = callOrReturn(getExtensionField(this, 'addOptions', {
-                name: this.name,
-            }));
-        }
-        this.storage = callOrReturn(getExtensionField(this, 'addStorage', {
-            name: this.name,
-            options: this.options,
-        })) || {};
-    }
-    static create(config = {}) {
-        return new Mark(config);
-    }
-    configure(options = {}) {
-        // return a new instance so we can use the same extension
-        // with different calls of `configure`
-        const extension = this.extend({
-            ...this.config,
-            addOptions: () => {
-                return mergeDeep(this.options, options);
-            },
-        });
-        // Always preserve the current name
-        extension.name = this.name;
-        // Set the parent to be our parent
-        extension.parent = this.parent;
-        return extension;
-    }
-    extend(extendedConfig = {}) {
-        const extension = new Mark(extendedConfig);
-        extension.parent = this;
-        this.child = extension;
-        extension.name = extendedConfig.name ? extendedConfig.name : extension.parent.name;
-        if (extendedConfig.defaultOptions && Object.keys(extendedConfig.defaultOptions).length > 0) {
-            console.warn(`[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${extension.name}".`);
-        }
-        extension.options = callOrReturn(getExtensionField(extension, 'addOptions', {
-            name: extension.name,
-        }));
-        extension.storage = callOrReturn(getExtensionField(extension, 'addStorage', {
-            name: extension.name,
-            options: extension.options,
-        }));
-        return extension;
-    }
-    static handleExit({ editor, mark }) {
-        const { tr } = editor.state;
-        const currentPos = editor.state.selection.$from;
-        const isAtEnd = currentPos.pos === currentPos.end();
-        if (isAtEnd) {
-            const currentMarks = currentPos.marks();
-            const isInMark = !!currentMarks.find(m => (m === null || m === void 0 ? void 0 : m.type.name) === mark.name);
-            if (!isInMark) {
-                return false;
-            }
-            const removeMark = currentMarks.find(m => (m === null || m === void 0 ? void 0 : m.type.name) === mark.name);
-            if (removeMark) {
-                tr.removeStoredMark(removeMark);
-            }
-            tr.insertText(' ', currentPos.pos);
-            editor.view.dispatch(tr);
-            return true;
-        }
-        return false;
-    }
-}
-
 /**
  * The Node class is used to create custom node extensions.
  * @see https://tiptap.dev/api/extensions#create-a-new-extension
@@ -5165,7 +5212,6 @@ class Tracker {
 }
 
 exports.CommandManager = CommandManager;
-exports.DropPlugin = DropPlugin;
 exports.Editor = Editor;
 exports.Extension = Extension;
 exports.InputRule = InputRule;
@@ -5173,7 +5219,6 @@ exports.Mark = Mark;
 exports.Node = Node;
 exports.NodePos = NodePos;
 exports.NodeView = NodeView;
-exports.PastePlugin = PastePlugin;
 exports.PasteRule = PasteRule;
 exports.Tracker = Tracker;
 exports.callOrReturn = callOrReturn;