@tiptap/core 2.6.6 → 2.7.0

package/dist/index.cjs

@@ -321,7 +321,18 @@ function mergeAttributes(...objects) {
                 mergedAttributes[key] = [...existingClasses, ...insertClasses].join(' ');
             }
             else if (key === 'style') {
-                mergedAttributes[key] = [mergedAttributes[key], value].join('; ');
+                const newStyles = value ? value.split(';').map((style) => style.trim()).filter(Boolean) : [];
+                const existingStyles = mergedAttributes[key] ? mergedAttributes[key].split(';').map((style) => style.trim()).filter(Boolean) : [];
+                const styleMap = new Map();
+                existingStyles.forEach(style => {
+                    const [property, val] = style.split(':').map(part => part.trim());
+                    styleMap.set(property, val);
+                });
+                newStyles.forEach(style => {
+                    const [property, val] = style.split(':').map(part => part.trim());
+                    styleMap.set(property, val);
+                });
+                mergedAttributes[key] = Array.from(styleMap.entries()).map(([property, val]) => `${property}: ${val}`).join('; ');
             }
             else {
                 mergedAttributes[key] = value;
@@ -1152,15 +1163,19 @@ class ExtensionManager {
             if (!addNodeView) {
                 return [];
             }
-            const nodeview = (node, view, getPos, decorations) => {
+            const nodeview = (node, view, getPos, decorations, innerDecorations) => {
                 const HTMLAttributes = getRenderedAttributes(node, extensionAttributes);
                 return addNodeView()({
-                    editor,
+                    // pass-through
                     node,
-                    getPos,
+                    view,
+                    getPos: getPos,
                     decorations,
-                    HTMLAttributes,
+                    innerDecorations,
+                    // tiptap-specific
+                    editor,
                     extension,
+                    HTMLAttributes,
                 });
             };
             return [extension.name, nodeview];
@@ -3318,10 +3333,17 @@ const toggleNode = (typeOrName, toggleTypeOrName, attributes = {}) => ({ state,
     const type = getNodeType(typeOrName, state.schema);
     const toggleType = getNodeType(toggleTypeOrName, state.schema);
     const isActive = isNodeActive(state, type, attributes);
+    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;
+    }
     if (isActive) {
-        return commands.setNode(toggleType);
+        return commands.setNode(toggleType, attributesToCopy);
     }
-    return commands.setNode(type, attributes);
+    // If the node is not active, we want to set the new node type with the given attributes
+    // Copying over the attributes from the current node if the selection is pointing to a node of the same type
+    return commands.setNode(type, { ...attributesToCopy, ...attributes });
 };
 
 const toggleWrap = (typeOrName, attributes = {}) => ({ state, commands }) => {
@@ -3655,7 +3677,8 @@ const Keymap = Extension.create({
                 appendTransaction: (transactions, oldState, newState) => {
                     const docChanges = transactions.some(transaction => transaction.docChanged)
                         && !oldState.doc.eq(newState.doc);
-                    if (!docChanges) {
+                    const ignoreTr = transactions.some(transaction => transaction.getMeta('preventClearDocument'));
+                    if (!docChanges || ignoreTr) {
                         return;
                     }
                     const { empty, from, to } = oldState.selection;
@@ -3665,7 +3688,7 @@ const Keymap = Extension.create({
                     if (empty || !allWasSelected) {
                         return;
                     }
-                    const isEmpty = newState.doc.textBetween(0, newState.doc.content.size, ' ', ' ').length === 0;
+                    const isEmpty = isNodeEmpty(newState.doc);
                     if (!isEmpty) {
                         return;
                     }
@@ -3889,6 +3912,28 @@ class NodePos {
     }
 }
 
+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;
 }
@@ -4013,6 +4058,8 @@ class Editor extends EventEmitter {
             onBlur: () => null,
             onDestroy: () => null,
             onContentError: ({ error }) => { throw error; },
+            onPaste: () => null,
+            onDrop: () => null,
         };
         this.isCapturingTransaction = false;
         this.capturedTransaction = null;
@@ -4032,6 +4079,12 @@ 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));
+        }
         window.setTimeout(() => {
             if (this.isDestroyed) {
                 return;
@@ -4159,7 +4212,12 @@ class Editor extends EventEmitter {
             FocusEvents,
             Keymap,
             Tabindex,
-        ] : [];
+        ].filter(ext => {
+            if (typeof this.options.enableCoreExtensions === 'object') {
+                return this.options.enableCoreExtensions[ext.name] !== false;
+            }
+            return true;
+        }) : [];
         const allExtensions = [...coreExtensions, ...this.options.extensions].filter(extension => {
             return ['extension', 'node', 'mark'].includes(extension === null || extension === void 0 ? void 0 : extension.type);
         });
@@ -4768,6 +4826,9 @@ class NodeView {
         this.extension = props.extension;
         this.node = props.node;
         this.decorations = props.decorations;
+        this.innerDecorations = props.innerDecorations;
+        this.view = props.view;
+        this.HTMLAttributes = props.HTMLAttributes;
         this.getPos = props.getPos;
         this.mount();
     }
@@ -4806,9 +4867,13 @@ class NodeView {
             y = handleBox.y - domBox.y + offsetY;
         }
         (_g = event.dataTransfer) === null || _g === void 0 ? void 0 : _g.setDragImage(this.dom, x, y);
+        const pos = this.getPos();
+        if (typeof pos !== 'number') {
+            return;
+        }
         // we need to tell ProseMirror that we want to move the whole node
         // so we create a NodeSelection
-        const selection = state.NodeSelection.create(view.state.doc, this.getPos());
+        const selection = state.NodeSelection.create(view.state.doc, pos);
         const transaction = view.state.tr.setSelection(selection);
         view.dispatch(transaction);
     }
@@ -4879,6 +4944,11 @@ class NodeView {
         }
         return true;
     }
+    /**
+     * Called when a DOM [mutation](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) or a selection change happens within the view.
+     * @return `false` if the editor should re-read the selection or re-parse the range around the mutation
+     * @return `true` if it can safely be ignored.
+     */
     ignoreMutation(mutation) {
         if (!this.dom || !this.contentDOM) {
             return true;
@@ -4925,9 +4995,15 @@ class NodeView {
         }
         return true;
     }
+    /**
+     * Update the attributes of the prosemirror node.
+     */
     updateAttributes(attributes) {
         this.editor.commands.command(({ tr }) => {
             const pos = this.getPos();
+            if (typeof pos !== 'number') {
+                return false;
+            }
             tr.setNodeMarkup(pos, undefined, {
                 ...this.node.attrs,
                 ...attributes,
@@ -4935,8 +5011,14 @@ class NodeView {
             return true;
         });
     }
+    /**
+     * Delete the node.
+     */
     deleteNode() {
         const from = this.getPos();
+        if (typeof from !== 'number') {
+            return;
+        }
         const to = from + this.node.nodeSize;
         this.editor.commands.deleteRange({ from, to });
     }
@@ -5072,6 +5154,7 @@ class Tracker {
 }
 
 exports.CommandManager = CommandManager;
+exports.DropPlugin = DropPlugin;
 exports.Editor = Editor;
 exports.Extension = Extension;
 exports.InputRule = InputRule;
@@ -5079,6 +5162,7 @@ exports.Mark = Mark;
 exports.Node = Node;
 exports.NodePos = NodePos;
 exports.NodeView = NodeView;
+exports.PastePlugin = PastePlugin;
 exports.PasteRule = PasteRule;
 exports.Tracker = Tracker;
 exports.callOrReturn = callOrReturn;