@tiptap/core 2.7.4 → 2.9.0

package/dist/index.umd.js

@@ -777,6 +777,123 @@
       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';
   }
@@ -1236,32 +1353,6 @@
       }
   }
 
-  // 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
@@ -1575,12 +1666,16 @@
           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;
@@ -1870,7 +1965,7 @@
       var _a;
       if (dispatch) {
           options = {
-              parseOptions: {},
+              parseOptions: editor.options.parseOptions,
               updateSelection: true,
               applyInputRules: false,
               applyPasteRules: false,
@@ -1891,7 +1986,9 @@
                   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;
@@ -3545,6 +3642,27 @@
       },
   });
 
+  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() {
@@ -3709,6 +3827,26 @@
       },
   });
 
+  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() {
@@ -3727,9 +3865,11 @@
     __proto__: null,
     ClipboardTextSerializer: ClipboardTextSerializer,
     Commands: Commands,
+    Drop: Drop,
     Editable: Editable,
     FocusEvents: FocusEvents,
     Keymap: Keymap,
+    Paste: Paste,
     Tabindex: Tabindex
   });
 
@@ -3827,7 +3967,8 @@
           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;
@@ -3903,34 +4044,15 @@
           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;
 }
@@ -4076,12 +4198,8 @@ 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));
-          }
+          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;
@@ -4183,18 +4301,27 @@ img.ProseMirror-separator {
       /**
        * 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;
@@ -4213,6 +4340,8 @@ img.ProseMirror-separator {
               FocusEvents,
               Keymap,
               Tabindex,
+              Drop,
+              Paste,
           ].filter(ext => {
               if (typeof this.options.enableCoreExtensions === 'object') {
                   return this.options.enableCoreExtensions[ext.name] !== false;
@@ -4255,6 +4384,9 @@ img.ProseMirror-separator {
                   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
@@ -4273,6 +4405,12 @@ img.ProseMirror-separator {
                   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({
@@ -4650,97 +4788,6 @@ img.ProseMirror-separator {
       });
   }
 
-  /**
-   * 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
@@ -5161,7 +5208,6 @@ img.ProseMirror-separator {
   }
 
   exports.CommandManager = CommandManager;
-  exports.DropPlugin = DropPlugin;
   exports.Editor = Editor;
   exports.Extension = Extension;
   exports.InputRule = InputRule;
@@ -5169,7 +5215,6 @@ img.ProseMirror-separator {
   exports.Node = Node;
   exports.NodePos = NodePos;
   exports.NodeView = NodeView;
-  exports.PastePlugin = PastePlugin;
   exports.PasteRule = PasteRule;
   exports.Tracker = Tracker;
   exports.callOrReturn = callOrReturn;