@tiptap/core 2.6.6 → 2.7.0-pre.0

package/dist/index.umd.js

@@ -317,7 +317,18 @@
                   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;
@@ -711,16 +722,6 @@
               },
           },
           props: {
-              handleTextInput(view, from, to, text) {
-                  return run$1({
-                      editor,
-                      from,
-                      to,
-                      text,
-                      rules,
-                      plugin,
-                  });
-              },
               handleDOMEvents: {
                   compositionend: view => {
                       setTimeout(() => {
@@ -738,6 +739,19 @@
                       });
                       return false;
                   },
+                  keyup(view, event) {
+                      if (event.key.length === 1) {
+                          return run$1({
+                              editor,
+                              from: view.state.selection.from,
+                              to: view.state.selection.from,
+                              text: '',
+                              rules,
+                              plugin,
+                          });
+                      }
+                      return false;
+                  },
               },
               // add support for input rules to trigger on enter
               // this is useful for example for code blocks
@@ -1148,15 +1162,19 @@
               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];
@@ -3314,10 +3332,17 @@
       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 }) => {
@@ -3651,7 +3676,8 @@
                   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;
@@ -3661,7 +3687,7 @@
                       if (empty || !allWasSelected) {
                           return;
                       }
-                      const isEmpty = newState.doc.textBetween(0, newState.doc.content.size, ' ', ' ').length === 0;
+                      const isEmpty = isNodeEmpty(newState.doc);
                       if (!isEmpty) {
                           return;
                       }
@@ -3885,6 +3911,28 @@
       }
   }
 
+  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;
 }
@@ -4009,6 +4057,8 @@ img.ProseMirror-separator {
               onBlur: () => null,
               onDestroy: () => null,
               onContentError: ({ error }) => { throw error; },
+              onPaste: () => null,
+              onDrop: () => null,
           };
           this.isCapturingTransaction = false;
           this.capturedTransaction = null;
@@ -4028,6 +4078,12 @@ img.ProseMirror-separator {
           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;
@@ -4155,7 +4211,12 @@ img.ProseMirror-separator {
               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);
           });
@@ -4764,6 +4825,9 @@ img.ProseMirror-separator {
           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();
       }
@@ -4802,9 +4866,13 @@ img.ProseMirror-separator {
               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);
       }
@@ -4875,6 +4943,11 @@ img.ProseMirror-separator {
           }
           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;
@@ -4921,9 +4994,15 @@ img.ProseMirror-separator {
           }
           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,
@@ -4931,8 +5010,14 @@ img.ProseMirror-separator {
               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 });
       }
@@ -5068,6 +5153,7 @@ img.ProseMirror-separator {
   }
 
   exports.CommandManager = CommandManager;
+  exports.DropPlugin = DropPlugin;
   exports.Editor = Editor;
   exports.Extension = Extension;
   exports.InputRule = InputRule;
@@ -5075,6 +5161,7 @@ img.ProseMirror-separator {
   exports.Node = Node;
   exports.NodePos = NodePos;
   exports.NodeView = NodeView;
+  exports.PastePlugin = PastePlugin;
   exports.PasteRule = PasteRule;
   exports.Tracker = Tracker;
   exports.callOrReturn = callOrReturn;