@tiptap/react 3.0.0-next.4 → 3.0.0-next.5

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024, Tiptap GmbH
+Copyright (c) 2025, Tiptap GmbH
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/index.cjs

@@ -31,15 +31,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  BubbleMenu: () => BubbleMenu,
   EditorConsumer: () => EditorConsumer,
   EditorContent: () => EditorContent,
   EditorContext: () => EditorContext,
   EditorProvider: () => EditorProvider,
-  FloatingMenu: () => FloatingMenu,
+  MarkViewContent: () => MarkViewContent,
   NodeViewContent: () => NodeViewContent,
   NodeViewWrapper: () => NodeViewWrapper,
   PureEditorContent: () => PureEditorContent,
+  ReactMarkView: () => ReactMarkView,
+  ReactMarkViewContext: () => ReactMarkViewContext,
+  ReactMarkViewRenderer: () => ReactMarkViewRenderer,
   ReactNodeView: () => ReactNodeView,
   ReactNodeViewContentProvider: () => ReactNodeViewContentProvider,
   ReactNodeViewContext: () => ReactNodeViewContext,
@@ -52,18 +54,14 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/BubbleMenu.tsx
-var import_extension_bubble_menu = require("@tiptap/extension-bubble-menu");
-var import_react6 = __toESM(require("react"), 1);
-var import_react_dom2 = require("react-dom");
-
 // src/Context.tsx
-var import_react5 = __toESM(require("react"), 1);
+var import_react5 = require("react");
 
 // src/EditorContent.tsx
 var import_react = __toESM(require("react"), 1);
 var import_react_dom = __toESM(require("react-dom"), 1);
 var import_shim = require("use-sync-external-store/shim");
+var import_jsx_runtime = require("react/jsx-runtime");
 var mergeRefs = (...refs) => {
   return (node) => {
     refs.forEach((ref) => {
@@ -82,7 +80,7 @@ var Portals = ({ contentComponent }) => {
     contentComponent.getSnapshot,
     contentComponent.getServerSnapshot
   );
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, Object.values(renderers));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: Object.values(renderers) });
 };
 function getInstance() {
   const subscribers = /* @__PURE__ */ new Set();
@@ -172,6 +170,7 @@ var PureEditorContent = class extends import_react.default.Component {
     }
   }
   componentWillUnmount() {
+    var _a;
     const editor = this.props.editor;
     if (!editor) {
       return;
@@ -186,7 +185,7 @@ var PureEditorContent = class extends import_react.default.Component {
       this.unsubscribeToContentComponent();
     }
     editor.contentComponent = null;
-    if (!editor.options.element.firstChild) {
+    if (!((_a = editor.options.element) == null ? void 0 : _a.firstChild)) {
       return;
     }
     const newElement = document.createElement("div");
@@ -197,7 +196,10 @@ var PureEditorContent = class extends import_react.default.Component {
   }
   render() {
     const { editor, innerRef, ...rest } = this.props;
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }), (editor == null ? void 0 : editor.contentComponent) && /* @__PURE__ */ import_react.default.createElement(Portals, { contentComponent: editor.contentComponent }));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }),
+      (editor == null ? void 0 : editor.contentComponent) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portals, { contentComponent: editor.contentComponent })
+    ] });
   }
 };
 var EditorContentWithKey = (0, import_react.forwardRef)(
@@ -302,7 +304,7 @@ function useEditorState(options) {
 var isDev = process.env.NODE_ENV !== "production";
 var isSSR = typeof window === "undefined";
 var isNext = isSSR || Boolean(typeof window !== "undefined" && window.next);
-var EditorInstanceManager = class {
+var EditorInstanceManager = class _EditorInstanceManager {
   constructor(options) {
     /**
      * The current editor instance.
@@ -414,6 +416,10 @@ var EditorInstanceManager = class {
       onPaste: (...args) => {
         var _a, _b;
         return (_b = (_a = this.options.current).onPaste) == null ? void 0 : _b.call(_a, ...args);
+      },
+      onDelete: (...args) => {
+        var _a, _b;
+        return (_b = (_a = this.options.current).onDelete) == null ? void 0 : _b.call(_a, ...args);
       }
     };
     const editor = new import_core.Editor(optionsToApply);
@@ -440,6 +446,41 @@ var EditorInstanceManager = class {
       this.subscriptions.delete(onStoreChange);
     };
   }
+  static compareOptions(a, b) {
+    return Object.keys(a).every((key) => {
+      if ([
+        "onCreate",
+        "onBeforeCreate",
+        "onDestroy",
+        "onUpdate",
+        "onTransaction",
+        "onFocus",
+        "onBlur",
+        "onSelectionUpdate",
+        "onContentError",
+        "onDrop",
+        "onPaste"
+      ].includes(key)) {
+        return true;
+      }
+      if (key === "extensions" && a.extensions && b.extensions) {
+        if (a.extensions.length !== b.extensions.length) {
+          return false;
+        }
+        return a.extensions.every((extension, index) => {
+          var _a;
+          if (extension !== ((_a = b.extensions) == null ? void 0 : _a[index])) {
+            return false;
+          }
+          return true;
+        });
+      }
+      if (a[key] !== b[key]) {
+        return false;
+      }
+      return true;
+    });
+  }
   /**
    * On each render, we will create, update, or destroy the editor instance.
    * @param deps The dependencies to watch for changes
@@ -450,10 +491,12 @@ var EditorInstanceManager = class {
       this.isComponentMounted = true;
       clearTimeout(this.scheduledDestructionTimeout);
       if (this.editor && !this.editor.isDestroyed && deps.length === 0) {
-        this.editor.setOptions({
-          ...this.options.current,
-          editable: this.editor.isEditable
-        });
+        if (!_EditorInstanceManager.compareOptions(this.options.current, this.editor.options)) {
+          this.editor.setOptions({
+            ...this.options.current,
+            editable: this.editor.isEditable
+          });
+        }
       } else {
         this.refreshEditorInstance(deps);
       }
@@ -534,6 +577,7 @@ function useEditor(options = {}, deps = []) {
 }
 
 // src/Context.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var EditorContext = (0, import_react5.createContext)({
   editor: null
 });
@@ -551,108 +595,17 @@ function EditorProvider({
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ import_react5.default.createElement(EditorContext.Provider, { value: contextValue }, slotBefore, /* @__PURE__ */ import_react5.default.createElement(EditorConsumer, null, ({ editor: currentEditor }) => /* @__PURE__ */ import_react5.default.createElement(EditorContent, { editor: currentEditor, ...editorContainerProps })), children, slotAfter);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(EditorContext.Provider, { value: contextValue, children: [
+    slotBefore,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditorConsumer, { children: ({ editor: currentEditor }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditorContent, { editor: currentEditor, ...editorContainerProps }) }),
+    children,
+    slotAfter
+  ] });
 }
 
-// src/BubbleMenu.tsx
-var BubbleMenu = import_react6.default.forwardRef(
-  ({ pluginKey = "bubbleMenu", editor, updateDelay, resizeDelay, shouldShow = null, options, children, ...restProps }, ref) => {
-    const menuEl = (0, import_react6.useRef)(document.createElement("div"));
-    if (typeof ref === "function") {
-      ref(menuEl.current);
-    } else if (ref) {
-      ref.current = menuEl.current;
-    }
-    const { editor: currentEditor } = useCurrentEditor();
-    (0, import_react6.useEffect)(() => {
-      const bubbleMenuElement = menuEl.current;
-      bubbleMenuElement.style.visibility = "hidden";
-      bubbleMenuElement.style.position = "absolute";
-      if ((editor == null ? void 0 : editor.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
-        return;
-      }
-      const attachToEditor = editor || currentEditor;
-      if (!attachToEditor) {
-        console.warn("BubbleMenu component is not rendered inside of an editor component or does not have editor prop.");
-        return;
-      }
-      const plugin = (0, import_extension_bubble_menu.BubbleMenuPlugin)({
-        updateDelay,
-        resizeDelay,
-        editor: attachToEditor,
-        element: bubbleMenuElement,
-        pluginKey,
-        shouldShow,
-        options
-      });
-      attachToEditor.registerPlugin(plugin);
-      return () => {
-        attachToEditor.unregisterPlugin(pluginKey);
-        window.requestAnimationFrame(() => {
-          if (bubbleMenuElement.parentNode) {
-            bubbleMenuElement.parentNode.removeChild(bubbleMenuElement);
-          }
-        });
-      };
-    }, [editor, currentEditor]);
-    return (0, import_react_dom2.createPortal)(/* @__PURE__ */ import_react6.default.createElement("div", { ...restProps }, children), menuEl.current);
-  }
-);
-
-// src/FloatingMenu.tsx
-var import_extension_floating_menu = require("@tiptap/extension-floating-menu");
-var import_react7 = __toESM(require("react"), 1);
-var import_react_dom3 = require("react-dom");
-var FloatingMenu = import_react7.default.forwardRef(
-  ({ pluginKey = "floatingMenu", editor, shouldShow = null, options, children, ...restProps }, ref) => {
-    const menuEl = (0, import_react7.useRef)(document.createElement("div"));
-    if (typeof ref === "function") {
-      ref(menuEl.current);
-    } else if (ref) {
-      ref.current = menuEl.current;
-    }
-    const { editor: currentEditor } = useCurrentEditor();
-    (0, import_react7.useEffect)(() => {
-      const floatingMenuElement = menuEl.current;
-      floatingMenuElement.style.visibility = "hidden";
-      floatingMenuElement.style.position = "absolute";
-      if ((editor == null ? void 0 : editor.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
-        return;
-      }
-      const attachToEditor = editor || currentEditor;
-      if (!attachToEditor) {
-        console.warn(
-          "FloatingMenu component is not rendered inside of an editor component or does not have editor prop."
-        );
-        return;
-      }
-      const plugin = (0, import_extension_floating_menu.FloatingMenuPlugin)({
-        editor: attachToEditor,
-        element: floatingMenuElement,
-        pluginKey,
-        shouldShow,
-        options
-      });
-      attachToEditor.registerPlugin(plugin);
-      return () => {
-        attachToEditor.unregisterPlugin(pluginKey);
-        window.requestAnimationFrame(() => {
-          if (floatingMenuElement.parentNode) {
-            floatingMenuElement.parentNode.removeChild(floatingMenuElement);
-          }
-        });
-      };
-    }, [editor, currentEditor]);
-    return (0, import_react_dom3.createPortal)(/* @__PURE__ */ import_react7.default.createElement("div", { ...restProps }, children), menuEl.current);
-  }
-);
-
-// src/NodeViewContent.tsx
-var import_react9 = __toESM(require("react"), 1);
-
 // src/useReactNodeView.ts
-var import_react8 = require("react");
-var ReactNodeViewContext = (0, import_react8.createContext)({
+var import_react6 = require("react");
+var ReactNodeViewContext = (0, import_react6.createContext)({
   onDragStart: () => {
   },
   nodeViewContentChildren: void 0,
@@ -660,64 +613,66 @@ var ReactNodeViewContext = (0, import_react8.createContext)({
   }
 });
 var ReactNodeViewContentProvider = ({ children, content }) => {
-  return (0, import_react8.createElement)(ReactNodeViewContext.Provider, { value: { nodeViewContentChildren: content } }, children);
+  return (0, import_react6.createElement)(ReactNodeViewContext.Provider, { value: { nodeViewContentChildren: content } }, children);
 };
-var useReactNodeView = () => (0, import_react8.useContext)(ReactNodeViewContext);
+var useReactNodeView = () => (0, import_react6.useContext)(ReactNodeViewContext);
 
 // src/NodeViewContent.tsx
+var import_jsx_runtime3 = (
+  // @ts-ignore
+  require("react/jsx-runtime")
+);
 function NodeViewContent({
   as: Tag = "div",
   ...props
 }) {
   const { nodeViewContentRef, nodeViewContentChildren } = useReactNodeView();
-  return (
-    // @ts-ignore
-    /* @__PURE__ */ import_react9.default.createElement(
-      Tag,
-      {
-        ...props,
-        ref: nodeViewContentRef,
-        "data-node-view-content": "",
-        style: {
-          whiteSpace: "pre-wrap",
-          ...props.style
-        }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Tag,
+    {
+      ...props,
+      ref: nodeViewContentRef,
+      "data-node-view-content": "",
+      style: {
+        whiteSpace: "pre-wrap",
+        ...props.style
       },
-      nodeViewContentChildren
-    )
+      children: nodeViewContentChildren
+    }
   );
 }
 
 // src/NodeViewWrapper.tsx
-var import_react10 = __toESM(require("react"), 1);
-var NodeViewWrapper = import_react10.default.forwardRef((props, ref) => {
+var import_react7 = __toESM(require("react"), 1);
+var import_jsx_runtime4 = (
+  // @ts-ignore
+  require("react/jsx-runtime")
+);
+var NodeViewWrapper = import_react7.default.forwardRef((props, ref) => {
   const { onDragStart } = useReactNodeView();
   const Tag = props.as || "div";
-  return (
-    // @ts-ignore
-    /* @__PURE__ */ import_react10.default.createElement(
-      Tag,
-      {
-        ...props,
-        ref,
-        "data-node-view-wrapper": "",
-        onDragStart,
-        style: {
-          whiteSpace: "normal",
-          ...props.style
-        }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Tag,
+    {
+      ...props,
+      ref,
+      "data-node-view-wrapper": "",
+      onDragStart,
+      style: {
+        whiteSpace: "normal",
+        ...props.style
       }
-    )
+    }
   );
 });
 
-// src/ReactNodeViewRenderer.tsx
+// src/ReactMarkViewRenderer.tsx
 var import_core2 = require("@tiptap/core");
-var import_react12 = __toESM(require("react"), 1);
+var import_react8 = __toESM(require("react"), 1);
 
 // src/ReactRenderer.tsx
-var import_react11 = __toESM(require("react"), 1);
-var import_react_dom4 = require("react-dom");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function isClassComponent(Component) {
   return !!(typeof Component === "function" && Component.prototype && Component.prototype.isReactComponent);
 }
@@ -741,7 +696,7 @@ var ReactRenderer = class {
       this.element.classList.add(...className.split(" "));
     }
     if (this.editor.isInitialized) {
-      (0, import_react_dom4.flushSync)(() => {
+      (0, import_react_dom2.flushSync)(() => {
         this.render();
       });
     } else {
@@ -761,7 +716,7 @@ var ReactRenderer = class {
         this.ref = ref;
       };
     }
-    this.reactElement = /* @__PURE__ */ import_react11.default.createElement(Component, { ...props });
+    this.reactElement = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { ...props });
     (_a = editor == null ? void 0 : editor.contentComponent) == null ? void 0 : _a.setRenderer(this.id, this);
   }
   /**
@@ -792,8 +747,69 @@ var ReactRenderer = class {
   }
 };
 
+// src/ReactMarkViewRenderer.tsx
+var import_jsx_runtime6 = (
+  // @ts-ignore
+  require("react/jsx-runtime")
+);
+var ReactMarkViewContext = import_react8.default.createContext({
+  markViewContentRef: () => {
+  }
+});
+var MarkViewContent = (props) => {
+  const Tag = props.as || "span";
+  const { markViewContentRef } = import_react8.default.useContext(ReactMarkViewContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tag, { ...props, ref: markViewContentRef, "data-mark-view-content": "" });
+};
+var ReactMarkView = class extends import_core2.MarkView {
+  constructor(component, props, options) {
+    super(component, props, options);
+    this.didMountContentDomElement = false;
+    const { as = "span", attrs, className = "" } = options || {};
+    const componentProps = props;
+    this.contentDOMElement = document.createElement("span");
+    const markViewContentRef = (el) => {
+      if (el && this.contentDOMElement && el.firstChild !== this.contentDOMElement) {
+        el.appendChild(this.contentDOMElement);
+        this.didMountContentDomElement = true;
+      }
+    };
+    const context = {
+      markViewContentRef
+    };
+    const ReactMarkViewProvider = import_react8.default.memo((componentProps2) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ReactMarkViewContext.Provider, { value: context, children: import_react8.default.createElement(component, componentProps2) });
+    });
+    ReactMarkViewProvider.displayName = "ReactNodeView";
+    this.renderer = new ReactRenderer(ReactMarkViewProvider, {
+      editor: props.editor,
+      props: componentProps,
+      as,
+      className: `mark-${props.mark.type.name} ${className}`.trim()
+    });
+    if (attrs) {
+      this.renderer.updateAttributes(attrs);
+    }
+  }
+  get dom() {
+    return this.renderer.element;
+  }
+  get contentDOM() {
+    if (!this.didMountContentDomElement) {
+      return null;
+    }
+    return this.contentDOMElement;
+  }
+};
+function ReactMarkViewRenderer(component, options = {}) {
+  return (props) => new ReactMarkView(component, props, options);
+}
+
 // src/ReactNodeViewRenderer.tsx
-var ReactNodeView = class extends import_core2.NodeView {
+var import_core3 = require("@tiptap/core");
+var import_react9 = __toESM(require("react"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ReactNodeView = class extends import_core3.NodeView {
   /**
    * Setup the React component.
    * Called on initialization.
@@ -826,8 +842,8 @@ var ReactNodeView = class extends import_core2.NodeView {
     };
     const context = { onDragStart, nodeViewContentRef };
     const Component = this.component;
-    const ReactNodeViewProvider = import_react12.default.memo((componentProps) => {
-      return /* @__PURE__ */ import_react12.default.createElement(ReactNodeViewContext.Provider, { value: context }, import_react12.default.createElement(Component, componentProps));
+    const ReactNodeViewProvider = import_react9.default.memo((componentProps) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ReactNodeViewContext.Provider, { value: context, children: import_react9.default.createElement(Component, componentProps) });
     });
     ReactNodeViewProvider.displayName = "ReactNodeView";
     if (this.node.isLeaf) {
@@ -847,13 +863,13 @@ var ReactNodeView = class extends import_core2.NodeView {
     }
     const { className = "" } = this.options;
     this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
-    this.editor.on("selectionUpdate", this.handleSelectionUpdate);
     this.renderer = new ReactRenderer(ReactNodeViewProvider, {
       editor: this.editor,
       props,
       as,
       className: `node-${this.node.type.name} ${className}`.trim()
     });
+    this.editor.on("selectionUpdate", this.handleSelectionUpdate);
     this.updateElementAttributes();
   }
   /**
@@ -976,7 +992,7 @@ var ReactNodeView = class extends import_core2.NodeView {
       let attrsObj = {};
       if (typeof this.options.attrs === "function") {
         const extensionAttributes = this.editor.extensionManager.attributes;
-        const HTMLAttributes2 = (0, import_core2.getRenderedAttributes)(this.node, extensionAttributes);
+        const HTMLAttributes2 = (0, import_core3.getRenderedAttributes)(this.node, extensionAttributes);
         attrsObj = this.options.attrs({ node: this.node, HTMLAttributes: HTMLAttributes2 });
       } else {
         attrsObj = this.options.attrs;
@@ -998,15 +1014,17 @@ function ReactNodeViewRenderer(component, options) {
 __reExport(index_exports, require("@tiptap/core"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  BubbleMenu,
   EditorConsumer,
   EditorContent,
   EditorContext,
   EditorProvider,
-  FloatingMenu,
+  MarkViewContent,
   NodeViewContent,
   NodeViewWrapper,
   PureEditorContent,
+  ReactMarkView,
+  ReactMarkViewContext,
+  ReactMarkViewRenderer,
   ReactNodeView,
   ReactNodeViewContentProvider,
   ReactNodeViewContext,