@tiptap/core 2.7.4 → 2.9.0

package/dist/{packages/core/src/index.d.ts → index.d.ts}

@@ -11,8 +11,6 @@ export * from './NodePos.js';
 export * from './NodeView.js';
 export * from './PasteRule.js';
 export * from './pasteRules/index.js';
-export * from './plugins/DropPlugin.js';
-export * from './plugins/PastePlugin.js';
 export * from './Tracker.js';
 export * from './types.js';
 export * from './utilities/index.js';
@@ -24,3 +22,4 @@ export interface NodeConfig<Options = any, Storage = any> {
 }
 export interface MarkConfig<Options = any, Storage = any> {
 }
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,OAAO,KAAK,UAAU,MAAM,uBAAuB,CAAA;AACnD,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,sBAAsB,CAAA;AAGpC,MAAM,WAAW,QAAQ,CAAC,UAAU,GAAG,GAAG;CAAI;AAG9C,MAAM,WAAW,eAAe,CAAC,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG;CAAI;AAGjE,MAAM,WAAW,UAAU,CAAC,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG;CAAI;AAG5D,MAAM,WAAW,UAAU,CAAC,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG;CAAI"}

package/dist/index.js

@@ -779,6 +779,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';
 }
@@ -1238,32 +1355,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
@@ -1577,12 +1668,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;
@@ -1872,7 +1967,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,
@@ -1893,7 +1988,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;
@@ -3547,6 +3644,27 @@ const Commands = Extension.create({
     },
 });
 
+const Drop = Extension.create({
+    name: 'drop',
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new 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() {
@@ -3711,6 +3829,26 @@ const Keymap = Extension.create({
     },
 });
 
+const Paste = Extension.create({
+    name: 'paste',
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey('tiptapPaste'),
+                props: {
+                    handlePaste: (_view, e, slice) => {
+                        this.editor.emit('paste', {
+                            editor: this.editor,
+                            event: e,
+                            slice,
+                        });
+                    },
+                },
+            }),
+        ];
+    },
+});
+
 const Tabindex = Extension.create({
     name: 'tabindex',
     addProseMirrorPlugins() {
@@ -3729,9 +3867,11 @@ var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ClipboardTextSerializer: ClipboardTextSerializer,
   Commands: Commands,
+  Drop: Drop,
   Editable: Editable,
   FocusEvents: FocusEvents,
   Keymap: Keymap,
+  Paste: Paste,
   Tabindex: Tabindex
 });
 
@@ -3829,7 +3969,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;
@@ -3905,34 +4046,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 Plugin({
-        key: new PluginKey('tiptapDrop'),
-        props: {
-            handleDrop: (_, e, slice, moved) => {
-                onDrop(e, slice, moved);
-            },
-        },
-    });
-};
-
-const PastePlugin = (onPaste) => {
-    return new Plugin({
-        key: new PluginKey('tiptapPaste'),
-        props: {
-            handlePaste: (_view, e, slice) => {
-                onPaste(e, slice);
-            },
-        },
-    });
-};
-
 const style = `.ProseMirror {
   position: relative;
 }
@@ -4078,12 +4200,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;
@@ -4185,18 +4303,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;
@@ -4215,6 +4342,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;
@@ -4257,6 +4386,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
@@ -4275,6 +4407,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({
@@ -4652,97 +4790,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
@@ -5162,5 +5209,5 @@ class Tracker {
     }
 }
 
-export { CommandManager, DropPlugin, Editor, Extension, InputRule, Mark, Node, NodePos, NodeView, PastePlugin, PasteRule, Tracker, callOrReturn, combineTransactionSteps, createChainableState, createDocument, createNodeFromContent, createStyleTag, defaultBlockAt, deleteProps, elementFromString, escapeForRegEx, index as extensions, findChildren, findChildrenInRange, findDuplicates, findParentNode, findParentNodeClosestToPos, fromString, generateHTML, generateJSON, generateText, getAttributes, getAttributesFromExtensions, getChangedRanges, getDebugJSON, getExtensionField, getHTMLFromFragment, getMarkAttributes, getMarkRange, getMarkType, getMarksBetween, getNodeAtPosition, getNodeAttributes, getNodeType, getRenderedAttributes, getSchema, getSchemaByResolvedExtensions, getSchemaTypeByName, getSchemaTypeNameByName, getSplittedAttributes, getText, getTextBetween, getTextContentFromNodes, getTextSerializersFromSchema, injectExtensionAttributesToParseRule, inputRulesPlugin, isActive, isAtEndOfNode, isAtStartOfNode, isEmptyObject, isExtensionRulesEnabled, isFunction, isList, isMacOS, isMarkActive, isNodeActive, isNodeEmpty, isNodeSelection, isNumber, isPlainObject, isRegExp, isString, isTextSelection, isiOS, markInputRule, markPasteRule, mergeAttributes, mergeDeep, minMax, nodeInputRule, nodePasteRule, objectIncludes, pasteRulesPlugin, posToDOMRect, removeDuplicates, resolveFocusPosition, selectionToInsertionEnd, splitExtensions, textInputRule, textPasteRule, textblockTypeInputRule, wrappingInputRule };
+export { CommandManager, Editor, Extension, InputRule, Mark, Node, NodePos, NodeView, PasteRule, Tracker, callOrReturn, combineTransactionSteps, createChainableState, createDocument, createNodeFromContent, createStyleTag, defaultBlockAt, deleteProps, elementFromString, escapeForRegEx, index as extensions, findChildren, findChildrenInRange, findDuplicates, findParentNode, findParentNodeClosestToPos, fromString, generateHTML, generateJSON, generateText, getAttributes, getAttributesFromExtensions, getChangedRanges, getDebugJSON, getExtensionField, getHTMLFromFragment, getMarkAttributes, getMarkRange, getMarkType, getMarksBetween, getNodeAtPosition, getNodeAttributes, getNodeType, getRenderedAttributes, getSchema, getSchemaByResolvedExtensions, getSchemaTypeByName, getSchemaTypeNameByName, getSplittedAttributes, getText, getTextBetween, getTextContentFromNodes, getTextSerializersFromSchema, injectExtensionAttributesToParseRule, inputRulesPlugin, isActive, isAtEndOfNode, isAtStartOfNode, isEmptyObject, isExtensionRulesEnabled, isFunction, isList, isMacOS, isMarkActive, isNodeActive, isNodeEmpty, isNodeSelection, isNumber, isPlainObject, isRegExp, isString, isTextSelection, isiOS, markInputRule, markPasteRule, mergeAttributes, mergeDeep, minMax, nodeInputRule, nodePasteRule, objectIncludes, pasteRulesPlugin, posToDOMRect, removeDuplicates, resolveFocusPosition, selectionToInsertionEnd, splitExtensions, textInputRule, textPasteRule, textblockTypeInputRule, wrappingInputRule };
 //# sourceMappingURL=index.js.map