@tiptap/react 3.0.0-next.1 → 3.0.0-next.2

package/dist/index.js

@@ -4,7 +4,11 @@ import React3, { useEffect as useEffect3, useRef as useRef2 } from "react";
 import { createPortal } from "react-dom";
 
 // src/Context.tsx
-import React2, { createContext, useContext } from "react";
+import React2, {
+  createContext,
+  useContext,
+  useMemo
+} from "react";
 
 // src/EditorContent.tsx
 import React, {
@@ -174,8 +178,15 @@ import {
 import { useSyncExternalStore as useSyncExternalStore2 } from "use-sync-external-store/shim";
 
 // src/useEditorState.ts
-import { useDebugValue, useEffect, useState } from "react";
+import deepEqual from "fast-deep-equal/es6/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 {
   constructor(initialEditor) {
     this.transactionNumber = 0;
@@ -234,17 +245,18 @@ var EditorStateManager = class {
   }
 };
 function useEditorState(options) {
-  const [editorInstance] = useState(() => new EditorStateManager(options.editor));
+  var _a;
+  const [editorStateManager] = useState(() => new EditorStateManager(options.editor));
   const selectedState = useSyncExternalStoreWithSelector(
-    editorInstance.subscribe,
-    editorInstance.getSnapshot,
-    editorInstance.getServerSnapshot,
+    editorStateManager.subscribe,
+    editorStateManager.getSnapshot,
+    editorStateManager.getServerSnapshot,
     options.selector,
-    options.equalityFn
+    (_a = options.equalityFn) != null ? _a : deepEqual
   );
-  useEffect(() => {
-    return editorInstance.watch(options.editor);
-  }, [options.editor, editorInstance]);
+  useIsomorphicLayoutEffect(() => {
+    return editorStateManager.watch(options.editor);
+  }, [options.editor, editorStateManager]);
   useDebugValue(selectedState);
   return selectedState;
 }
@@ -279,6 +291,7 @@ var EditorInstanceManager = class {
     this.options = options;
     this.subscriptions = /* @__PURE__ */ new Set();
     this.setEditor(this.getInitialEditor());
+    this.scheduleDestroy();
     this.getEditor = this.getEditor.bind(this);
     this.getServerSnapshot = this.getServerSnapshot.bind(this);
     this.subscribe = this.subscribe.bind(this);
@@ -356,6 +369,14 @@ var EditorInstanceManager = class {
       onContentError: (...args) => {
         var _a, _b;
         return (_b = (_a = this.options.current).onContentError) == null ? void 0 : _b.call(_a, ...args);
+      },
+      onDrop: (...args) => {
+        var _a, _b;
+        return (_b = (_a = this.options.current).onDrop) == null ? void 0 : _b.call(_a, ...args);
+      },
+      onPaste: (...args) => {
+        var _a, _b;
+        return (_b = (_a = this.options.current).onPaste) == null ? void 0 : _b.call(_a, ...args);
       }
     };
     const editor = new Editor(optionsToApply);
@@ -392,7 +413,10 @@ var EditorInstanceManager = class {
       this.isComponentMounted = true;
       clearTimeout(this.scheduledDestructionTimeout);
       if (this.editor && !this.editor.isDestroyed && deps.length === 0) {
-        this.editor.setOptions(this.options.current);
+        this.editor.setOptions({
+          ...this.options.current,
+          editable: this.editor.isEditable
+        });
       } else {
         this.refreshEditorInstance(deps);
       }
@@ -443,7 +467,7 @@ var EditorInstanceManager = class {
           this.setEditor(null);
         }
       }
-    }, 0);
+    }, 1);
   }
 };
 function useEditor(options = {}, deps = []) {
@@ -460,7 +484,7 @@ function useEditor(options = {}, deps = []) {
   useEditorState({
     editor,
     selector: ({ transactionNumber }) => {
-      if (options.shouldRerenderOnTransaction === false) {
+      if (options.shouldRerenderOnTransaction === false || options.shouldRerenderOnTransaction === void 0) {
         return null;
       }
       if (options.immediatelyRender && transactionNumber === 0) {
@@ -482,118 +506,143 @@ function EditorProvider({
   children,
   slotAfter,
   slotBefore,
+  editorContainerProps = {},
   ...editorOptions
 }) {
   const editor = useEditor(editorOptions);
+  const contextValue = useMemo(() => ({ editor }), [editor]);
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ React2.createElement(EditorContext.Provider, { value: { editor } }, slotBefore, /* @__PURE__ */ React2.createElement(EditorConsumer, null, ({ editor: currentEditor }) => /* @__PURE__ */ React2.createElement(EditorContent, { editor: currentEditor })), children, slotAfter);
+  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 = (props) => {
-  const menuEl = useRef2(document.createElement("div"));
-  const { editor: currentEditor } = useCurrentEditor();
-  useEffect3(() => {
-    var _a;
-    menuEl.current.style.visibility = "hidden";
-    menuEl.current.style.position = "absolute";
-    if (((_a = props.editor) == null ? void 0 : _a.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
-      return;
-    }
-    const {
-      pluginKey = "bubbleMenu",
-      editor,
-      updateDelay,
-      resizeDelay,
-      shouldShow = null
-    } = props;
-    const menuEditor = editor || currentEditor;
-    if (!menuEditor) {
-      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: menuEditor,
-      element: menuEl.current,
-      pluginKey,
-      shouldShow,
-      options: props.options
-    });
-    menuEditor.registerPlugin(plugin);
-    return () => {
-      menuEditor.unregisterPlugin(pluginKey);
-      window.requestAnimationFrame(() => {
-        if (menuEl.current.parentNode) {
-          menuEl.current.parentNode.removeChild(menuEl.current);
-        }
+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
       });
-    };
-  }, [props.editor, currentEditor]);
-  const portal = createPortal(
-    /* @__PURE__ */ React3.createElement("div", { className: props.className }, props.children),
-    menuEl.current
-  );
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, portal);
-};
+      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 React4, { useEffect as useEffect4, useRef as useRef3 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-var FloatingMenu = (props) => {
+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(() => {
-    var _a;
-    menuEl.current.style.visibility = "hidden";
-    menuEl.current.style.position = "absolute";
-    if (((_a = props.editor) == null ? void 0 : _a.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
+    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 {
-      pluginKey = "floatingMenu",
-      editor,
-      options,
-      shouldShow = null
-    } = props;
-    const menuEditor = editor || currentEditor;
-    if (!menuEditor) {
-      console.warn("FloatingMenu component is not rendered inside of an editor component or does not have editor prop.");
+    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,
-      editor: menuEditor,
-      element: menuEl.current,
-      options,
-      shouldShow
+      shouldShow,
+      options
     });
-    menuEditor.registerPlugin(plugin);
+    attachToEditor.registerPlugin(plugin);
     return () => {
-      menuEditor.unregisterPlugin(pluginKey);
+      attachToEditor.unregisterPlugin(pluginKey);
       window.requestAnimationFrame(() => {
-        if (menuEl.current.parentNode) {
-          menuEl.current.parentNode.removeChild(menuEl.current);
+        if (floatingMenuElement.parentNode) {
+          floatingMenuElement.parentNode.removeChild(floatingMenuElement);
         }
       });
     };
-  }, [
-    props.editor,
-    currentEditor
-  ]);
-  const portal = createPortal2(
-    /* @__PURE__ */ React4.createElement("div", { className: props.className }, props.children),
+  }, [editor, currentEditor]);
+  return createPortal2(
+    /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        ...restProps
+      },
+      children
+    ),
     menuEl.current
   );
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, portal);
-};
+});
 
 // src/NodeViewContent.tsx
 import React5 from "react";
@@ -651,6 +700,7 @@ var NodeViewWrapper = React6.forwardRef((props, ref) => {
 
 // src/ReactNodeViewRenderer.tsx
 import {
+  getRenderedAttributes,
   NodeView
 } from "@tiptap/core";
 import React8 from "react";
@@ -666,12 +716,14 @@ function isForwardRefComponent(Component) {
   return !!(typeof Component === "object" && ((_a = Component.$$typeof) == null ? void 0 : _a.toString()) === "Symbol(react.forward_ref)");
 }
 var ReactRenderer = class {
+  /**
+   * Immediately creates element and renders the provided React component.
+   */
   constructor(component, {
     editor,
     props = {},
     as = "div",
-    className = "",
-    attrs
+    className = ""
   }) {
     this.ref = null;
     this.id = Math.floor(Math.random() * 4294967295).toString();
@@ -683,11 +735,6 @@ var ReactRenderer = class {
     if (className) {
       this.element.classList.add(...className.split(" "));
     }
-    if (attrs) {
-      Object.keys(attrs).forEach((key) => {
-        this.element.setAttribute(key, attrs[key]);
-      });
-    }
     if (this.editor.isInitialized) {
       flushSync(() => {
         this.render();
@@ -696,6 +743,9 @@ var ReactRenderer = class {
       this.render();
     }
   }
+  /**
+   * Render the React component.
+   */
   render() {
     var _a;
     const Component = this.component;
@@ -706,9 +756,12 @@ var ReactRenderer = class {
         this.ref = ref;
       };
     }
-    this.reactElement = React7.createElement(Component, props);
+    this.reactElement = /* @__PURE__ */ React7.createElement(Component, { ...props });
     (_a = editor == null ? void 0 : editor.contentComponent) == null ? void 0 : _a.setRenderer(this.id, this);
   }
+  /**
+   * Re-renders the React component with new props.
+   */
   updateProps(props = {}) {
     this.props = {
       ...this.props,
@@ -716,22 +769,40 @@ var ReactRenderer = class {
     };
     this.render();
   }
+  /**
+   * Destroy the React component.
+   */
   destroy() {
     var _a;
     const editor = this.editor;
     (_a = editor == null ? void 0 : editor.contentComponent) == null ? void 0 : _a.removeRenderer(this.id);
   }
+  /**
+   * Update the attributes of the element that holds the React component.
+   */
+  updateAttributes(attributes) {
+    Object.keys(attributes).forEach((key) => {
+      this.element.setAttribute(key, attributes[key]);
+    });
+  }
 };
 
 // src/ReactNodeViewRenderer.tsx
 var ReactNodeView = class extends NodeView {
+  /**
+   * Setup the React component.
+   * Called on initialization.
+   */
   mount() {
     const props = {
       editor: this.editor,
       node: this.node,
       decorations: this.decorations,
+      innerDecorations: this.innerDecorations,
+      view: this.view,
       selected: false,
       extension: this.extension,
+      HTMLAttributes: this.HTMLAttributes,
       getPos: () => this.getPos(),
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
       deleteNode: () => this.deleteNode()
@@ -750,9 +821,11 @@ 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 = React8.memo(
+      (componentProps) => {
+        return /* @__PURE__ */ React8.createElement(ReactNodeViewContext.Provider, { value: context }, React8.createElement(Component, componentProps));
+      }
+    );
     ReactNodeViewProvider.displayName = "ReactNodeView";
     if (this.node.isLeaf) {
       this.contentDOMElement = null;
@@ -762,6 +835,7 @@ var ReactNodeView = class extends NodeView {
       this.contentDOMElement = document.createElement(this.node.isInline ? "span" : "div");
     }
     if (this.contentDOMElement) {
+      this.contentDOMElement.dataset.nodeViewContentReact = "";
       this.contentDOMElement.style.whiteSpace = "inherit";
     }
     let as = this.node.isInline ? "span" : "div";
@@ -775,10 +849,14 @@ var ReactNodeView = class extends NodeView {
       editor: this.editor,
       props,
       as,
-      className: `node-${this.node.type.name} ${className}`.trim(),
-      attrs: this.options.attrs
+      className: `node-${this.node.type.name} ${className}`.trim()
     });
+    this.updateElementAttributes();
   }
+  /**
+   * Return the DOM element.
+   * This is the element that will be used to display the node view.
+   */
   get dom() {
     var _a;
     if (this.renderer.element.firstElementChild && !((_a = this.renderer.element.firstElementChild) == null ? void 0 : _a.hasAttribute("data-node-view-wrapper"))) {
@@ -786,15 +864,27 @@ var ReactNodeView = class extends NodeView {
     }
     return this.renderer.element;
   }
+  /**
+   * Return the content DOM element.
+   * This is the element that will be used to display the rich-text content of the node.
+   */
   get contentDOM() {
     if (this.node.isLeaf) {
       return null;
     }
     return this.contentDOMElement;
   }
+  /**
+   * On editor selection update, check if the node is selected.
+   * If it is, call `selectNode`, otherwise call `deselectNode`.
+   */
   handleSelectionUpdate() {
     const { from, to } = this.editor.state.selection;
-    if (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
+    const pos = this.getPos();
+    if (typeof pos !== "number") {
+      return;
+    }
+    if (from <= pos && to >= pos + this.node.nodeSize) {
       if (this.renderer.props.selected) {
         return;
       }
@@ -806,9 +896,16 @@ var ReactNodeView = class extends NodeView {
       this.deselectNode();
     }
   }
-  update(node, decorations) {
-    const updateProps = (props) => {
+  /**
+   * On update, update the React component.
+   * To prevent unnecessary updates, the `update` option can be used.
+   */
+  update(node, decorations, innerDecorations) {
+    const rerenderComponent = (props) => {
       this.renderer.updateProps(props);
+      if (typeof this.options.attrs === "function") {
+        this.updateElementAttributes();
+      }
     };
     if (node.type !== this.node.type) {
       return false;
@@ -816,41 +913,74 @@ var ReactNodeView = class extends NodeView {
     if (typeof this.options.update === "function") {
       const oldNode = this.node;
       const oldDecorations = this.decorations;
+      const oldInnerDecorations = this.innerDecorations;
       this.node = node;
       this.decorations = decorations;
+      this.innerDecorations = innerDecorations;
       return this.options.update({
         oldNode,
         oldDecorations,
         newNode: node,
         newDecorations: decorations,
-        updateProps: () => updateProps({ node, decorations })
+        oldInnerDecorations,
+        innerDecorations,
+        updateProps: () => rerenderComponent({ node, decorations, innerDecorations })
       });
     }
-    if (node === this.node && this.decorations === decorations) {
+    if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {
       return true;
     }
     this.node = node;
     this.decorations = decorations;
-    updateProps({ node, decorations });
+    this.innerDecorations = innerDecorations;
+    rerenderComponent({ node, decorations, innerDecorations });
     return true;
   }
+  /**
+   * Select the node.
+   * Add the `selected` prop and the `ProseMirror-selectednode` class.
+   */
   selectNode() {
     this.renderer.updateProps({
       selected: true
     });
     this.renderer.element.classList.add("ProseMirror-selectednode");
   }
+  /**
+   * Deselect the node.
+   * Remove the `selected` prop and the `ProseMirror-selectednode` class.
+   */
   deselectNode() {
     this.renderer.updateProps({
       selected: false
     });
     this.renderer.element.classList.remove("ProseMirror-selectednode");
   }
+  /**
+   * Destroy the React component instance.
+   */
   destroy() {
     this.renderer.destroy();
     this.editor.off("selectionUpdate", this.handleSelectionUpdate);
     this.contentDOMElement = null;
   }
+  /**
+   * Update the attributes of the top-level element that holds the React component.
+   * Applying the attributes defined in the `attrs` option.
+   */
+  updateElementAttributes() {
+    if (this.options.attrs) {
+      let attrsObj = {};
+      if (typeof this.options.attrs === "function") {
+        const extensionAttributes = this.editor.extensionManager.attributes;
+        const HTMLAttributes2 = getRenderedAttributes(this.node, extensionAttributes);
+        attrsObj = this.options.attrs({ node: this.node, HTMLAttributes: HTMLAttributes2 });
+      } else {
+        attrsObj = this.options.attrs;
+      }
+      this.renderer.updateAttributes(attrsObj);
+    }
+  }
 };
 function ReactNodeViewRenderer(component, options) {
   return (props) => {
@@ -873,6 +1003,7 @@ export {
   NodeViewContent,
   NodeViewWrapper,
   PureEditorContent,
+  ReactNodeView,
   ReactNodeViewContext,
   ReactNodeViewRenderer,
   ReactRenderer,