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

package/dist/index.js

@@ -1,15 +1,11 @@
-// src/BubbleMenu.tsx
-import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
-import React3, { useEffect as useEffect3, useRef as useRef2 } from "react";
-import { createPortal } from "react-dom";
-
 // src/Context.tsx
-import React2, { createContext, useContext, useMemo } from "react";
+import { createContext, useContext, useMemo } from "react";
 
 // src/EditorContent.tsx
 import React, { forwardRef } from "react";
 import ReactDOM from "react-dom";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var mergeRefs = (...refs) => {
   return (node) => {
     refs.forEach((ref) => {
@@ -28,7 +24,7 @@ var Portals = ({ contentComponent }) => {
     contentComponent.getSnapshot,
     contentComponent.getServerSnapshot
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, Object.values(renderers));
+  return /* @__PURE__ */ jsx(Fragment, { children: Object.values(renderers) });
 };
 function getInstance() {
   const subscribers = /* @__PURE__ */ new Set();
@@ -118,6 +114,7 @@ var PureEditorContent = class extends React.Component {
     }
   }
   componentWillUnmount() {
+    var _a;
     const editor = this.props.editor;
     if (!editor) {
       return;
@@ -132,7 +129,7 @@ var PureEditorContent = class extends React.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");
@@ -143,7 +140,10 @@ var PureEditorContent = class extends React.Component {
   }
   render() {
     const { editor, innerRef, ...rest } = this.props;
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }), (editor == null ? void 0 : editor.contentComponent) && /* @__PURE__ */ React.createElement(Portals, { contentComponent: editor.contentComponent }));
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }),
+      (editor == null ? void 0 : editor.contentComponent) && /* @__PURE__ */ jsx(Portals, { contentComponent: editor.contentComponent })
+    ] });
   }
 };
 var EditorContentWithKey = forwardRef(
@@ -248,7 +248,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.
@@ -360,6 +360,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 Editor(optionsToApply);
@@ -386,6 +390,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
@@ -396,10 +435,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);
       }
@@ -480,6 +521,7 @@ function useEditor(options = {}, deps = []) {
 }
 
 // src/Context.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var EditorContext = createContext({
   editor: null
 });
@@ -497,105 +539,14 @@ function EditorProvider({
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ React2.createElement(EditorContext.Provider, { value: contextValue }, slotBefore, /* @__PURE__ */ React2.createElement(EditorConsumer, null, ({ editor: currentEditor }) => /* @__PURE__ */ React2.createElement(EditorContent, { editor: currentEditor, ...editorContainerProps })), children, slotAfter);
+  return /* @__PURE__ */ jsxs2(EditorContext.Provider, { value: contextValue, children: [
+    slotBefore,
+    /* @__PURE__ */ jsx2(EditorConsumer, { children: ({ editor: currentEditor }) => /* @__PURE__ */ jsx2(EditorContent, { editor: currentEditor, ...editorContainerProps }) }),
+    children,
+    slotAfter
+  ] });
 }
 
-// src/BubbleMenu.tsx
-var BubbleMenu = React3.forwardRef(
-  ({ pluginKey = "bubbleMenu", editor, updateDelay, resizeDelay, shouldShow = null, options, children, ...restProps }, ref) => {
-    const menuEl = useRef2(document.createElement("div"));
-    if (typeof ref === "function") {
-      ref(menuEl.current);
-    } else if (ref) {
-      ref.current = menuEl.current;
-    }
-    const { editor: currentEditor } = useCurrentEditor();
-    useEffect3(() => {
-      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 = 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 createPortal(/* @__PURE__ */ React3.createElement("div", { ...restProps }, children), menuEl.current);
-  }
-);
-
-// src/FloatingMenu.tsx
-import { FloatingMenuPlugin } from "@tiptap/extension-floating-menu";
-import React4, { useEffect as useEffect4, useRef as useRef3 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
-var FloatingMenu = React4.forwardRef(
-  ({ pluginKey = "floatingMenu", editor, shouldShow = null, options, children, ...restProps }, ref) => {
-    const menuEl = useRef3(document.createElement("div"));
-    if (typeof ref === "function") {
-      ref(menuEl.current);
-    } else if (ref) {
-      ref.current = menuEl.current;
-    }
-    const { editor: currentEditor } = useCurrentEditor();
-    useEffect4(() => {
-      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 = 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 createPortal2(/* @__PURE__ */ React4.createElement("div", { ...restProps }, children), menuEl.current);
-  }
-);
-
-// src/NodeViewContent.tsx
-import React5 from "react";
-
 // src/useReactNodeView.ts
 import { createContext as createContext2, createElement, useContext as useContext2 } from "react";
 var ReactNodeViewContext = createContext2({
@@ -611,6 +562,7 @@ var ReactNodeViewContentProvider = ({ children, content }) => {
 var useReactNodeView = () => useContext2(ReactNodeViewContext);
 
 // src/NodeViewContent.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
 function NodeViewContent({
   as: Tag = "div",
   ...props
@@ -618,7 +570,7 @@ function NodeViewContent({
   const { nodeViewContentRef, nodeViewContentChildren } = useReactNodeView();
   return (
     // @ts-ignore
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ jsx3(
       Tag,
       {
         ...props,
@@ -627,21 +579,22 @@ function NodeViewContent({
         style: {
           whiteSpace: "pre-wrap",
           ...props.style
-        }
-      },
-      nodeViewContentChildren
+        },
+        children: nodeViewContentChildren
+      }
     )
   );
 }
 
 // src/NodeViewWrapper.tsx
-import React6 from "react";
-var NodeViewWrapper = React6.forwardRef((props, ref) => {
+import React3 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var NodeViewWrapper = React3.forwardRef((props, ref) => {
   const { onDragStart } = useReactNodeView();
   const Tag = props.as || "div";
   return (
     // @ts-ignore
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ jsx4(
       Tag,
       {
         ...props,
@@ -657,16 +610,13 @@ var NodeViewWrapper = React6.forwardRef((props, ref) => {
   );
 });
 
-// src/ReactNodeViewRenderer.tsx
-import {
-  getRenderedAttributes,
-  NodeView
-} from "@tiptap/core";
-import React8 from "react";
+// src/ReactMarkViewRenderer.tsx
+import { MarkView } from "@tiptap/core";
+import React4 from "react";
 
 // src/ReactRenderer.tsx
-import React7 from "react";
 import { flushSync } from "react-dom";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function isClassComponent(Component) {
   return !!(typeof Component === "function" && Component.prototype && Component.prototype.isReactComponent);
 }
@@ -710,7 +660,7 @@ var ReactRenderer = class {
         this.ref = ref;
       };
     }
-    this.reactElement = /* @__PURE__ */ React7.createElement(Component, { ...props });
+    this.reactElement = /* @__PURE__ */ jsx5(Component, { ...props });
     (_a = editor == null ? void 0 : editor.contentComponent) == null ? void 0 : _a.setRenderer(this.id, this);
   }
   /**
@@ -741,7 +691,71 @@ var ReactRenderer = class {
   }
 };
 
+// src/ReactMarkViewRenderer.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ReactMarkViewContext = React4.createContext({
+  markViewContentRef: () => {
+  }
+});
+var MarkViewContent = (props) => {
+  const Tag = props.as || "span";
+  const { markViewContentRef } = React4.useContext(ReactMarkViewContext);
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ jsx6(Tag, { ...props, ref: markViewContentRef, "data-mark-view-content": "" })
+  );
+};
+var ReactMarkView = class extends 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 = React4.memo((componentProps2) => {
+      return /* @__PURE__ */ jsx6(ReactMarkViewContext.Provider, { value: context, children: React4.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
+import {
+  getRenderedAttributes,
+  NodeView
+} from "@tiptap/core";
+import React5 from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var ReactNodeView = class extends NodeView {
   /**
    * Setup the React component.
@@ -775,8 +789,8 @@ var ReactNodeView = class extends NodeView {
     };
     const context = { onDragStart, nodeViewContentRef };
     const Component = this.component;
-    const ReactNodeViewProvider = React8.memo((componentProps) => {
-      return /* @__PURE__ */ React8.createElement(ReactNodeViewContext.Provider, { value: context }, React8.createElement(Component, componentProps));
+    const ReactNodeViewProvider = React5.memo((componentProps) => {
+      return /* @__PURE__ */ jsx7(ReactNodeViewContext.Provider, { value: context, children: React5.createElement(Component, componentProps) });
     });
     ReactNodeViewProvider.displayName = "ReactNodeView";
     if (this.node.isLeaf) {
@@ -796,13 +810,13 @@ var ReactNodeView = class extends 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();
   }
   /**
@@ -946,15 +960,17 @@ function ReactNodeViewRenderer(component, options) {
 // src/index.ts
 export * from "@tiptap/core";
 export {
-  BubbleMenu,
   EditorConsumer,
   EditorContent,
   EditorContext,
   EditorProvider,
-  FloatingMenu,
+  MarkViewContent,
   NodeViewContent,
   NodeViewWrapper,
   PureEditorContent,
+  ReactMarkView,
+  ReactMarkViewContext,
+  ReactMarkViewRenderer,
   ReactNodeView,
   ReactNodeViewContentProvider,
   ReactNodeViewContext,