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

package/dist/index.js

@@ -1,41 +1,30 @@
-// 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 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) => {
       if (typeof ref === "function") {
         ref(node);
       } else if (ref) {
+        ;
         ref.current = node;
       }
     });
   };
 };
-var Portals = ({
-  contentComponent
-}) => {
+var Portals = ({ contentComponent }) => {
   const renderers = useSyncExternalStore(
     contentComponent.subscribe,
     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();
@@ -125,6 +114,7 @@ var PureEditorContent = class extends React.Component {
     }
   }
   componentWillUnmount() {
+    var _a;
     const editor = this.props.editor;
     if (!editor) {
       return;
@@ -139,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");
@@ -150,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(
@@ -169,22 +162,12 @@ var EditorContent = React.memo(EditorContentWithKey);
 
 // src/useEditor.ts
 import { Editor } from "@tiptap/core";
-import {
-  useDebugValue as useDebugValue2,
-  useEffect as useEffect2,
-  useRef,
-  useState as useState2
-} from "react";
+import { useDebugValue as useDebugValue2, useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { useSyncExternalStore as useSyncExternalStore2 } from "use-sync-external-store/shim";
 
 // src/useEditorState.ts
 import deepEqual from "fast-deep-equal/es6/react";
-import {
-  useDebugValue,
-  useEffect,
-  useLayoutEffect,
-  useState
-} from "react";
+import { useDebugValue, useEffect, useLayoutEffect, useState } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 var EditorStateManager = class {
@@ -265,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.
@@ -377,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);
@@ -403,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
@@ -413,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);
       }
@@ -497,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
 });
@@ -514,153 +539,38 @@ 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);
-}
-
-// src/BubbleMenu.tsx
-var BubbleMenu = React3.forwardRef(
-  ({
-    pluginKey = "bubbleMenu",
-    editor,
-    updateDelay,
-    resizeDelay,
-    shouldShow = null,
-    options,
+  return /* @__PURE__ */ jsxs2(EditorContext.Provider, { value: contextValue, children: [
+    slotBefore,
+    /* @__PURE__ */ jsx2(EditorConsumer, { children: ({ editor: currentEditor }) => /* @__PURE__ */ jsx2(EditorContent, { editor: currentEditor, ...editorContainerProps }) }),
     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";
+    slotAfter
+  ] });
+}
 
 // src/useReactNodeView.ts
-import { createContext as createContext2, useContext as useContext2 } from "react";
+import { createContext as createContext2, createElement, useContext as useContext2 } from "react";
 var ReactNodeViewContext = createContext2({
-  onDragStart: void 0
+  onDragStart: () => {
+  },
+  nodeViewContentChildren: void 0,
+  nodeViewContentRef: () => {
+  }
 });
+var ReactNodeViewContentProvider = ({ children, content }) => {
+  return createElement(ReactNodeViewContext.Provider, { value: { nodeViewContentChildren: content } }, children);
+};
 var useReactNodeView = () => useContext2(ReactNodeViewContext);
 
 // src/NodeViewContent.tsx
-var NodeViewContent = (props) => {
-  const Tag = props.as || "div";
-  const { nodeViewContentRef } = useReactNodeView();
+import { jsx as jsx3 } from "react/jsx-runtime";
+function NodeViewContent({
+  as: Tag = "div",
+  ...props
+}) {
+  const { nodeViewContentRef, nodeViewContentChildren } = useReactNodeView();
   return (
     // @ts-ignore
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ jsx3(
       Tag,
       {
         ...props,
@@ -669,20 +579,22 @@ var NodeViewContent = (props) => {
         style: {
           whiteSpace: "pre-wrap",
           ...props.style
-        }
+        },
+        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,
@@ -698,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);
 }
@@ -719,12 +628,7 @@ var ReactRenderer = class {
   /**
    * Immediately creates element and renders the provided React component.
    */
-  constructor(component, {
-    editor,
-    props = {},
-    as = "div",
-    className = ""
-  }) {
+  constructor(component, { editor, props = {}, as = "div", className = "" }) {
     this.ref = null;
     this.id = Math.floor(Math.random() * 4294967295).toString();
     this.component = component;
@@ -756,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);
   }
   /**
@@ -787,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.
@@ -821,11 +789,9 @@ 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) {
       this.contentDOMElement = null;
@@ -844,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();
   }
   /**
@@ -994,16 +960,19 @@ 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,
   ReactNodeViewRenderer,
   ReactRenderer,