@handlewithcare/react-prosemirror 2.6.0-tiptap.0 → 2.6.0-tiptap.2

package/dist/cjs/tiptap/TiptapEditorContent.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "TiptapEditorContent", {
 });
 const _react = require("@tiptap/react");
 const _react1 = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactdom = require("react-dom");
 const _ProseMirrorDoc = require("../components/ProseMirrorDoc.js");
 const _useEditorEffect = require("../hooks/useEditorEffect.js");
 function _getRequireWildcardCache(nodeInterop) {
@@ -53,18 +54,62 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+/**
+ * This component renders all of the editor's registered "React renderers".
+ */ const Portals = (param)=>{
+    let { contentComponent } = param;
+    const renderers = (0, _react1.useSyncExternalStore)(contentComponent.subscribe, contentComponent.getSnapshot, contentComponent.getServerSnapshot);
+    return /*#__PURE__*/ _react1.default.createElement(_react1.default.Fragment, null, Object.values(renderers));
+};
+function getInstance() {
+    const subscribers = new Set();
+    let renderers = {};
+    return {
+        /**
+     * Subscribe to the editor instance's changes.
+     */ subscribe (callback) {
+            subscribers.add(callback);
+            return ()=>{
+                subscribers.delete(callback);
+            };
+        },
+        getSnapshot () {
+            return renderers;
+        },
+        getServerSnapshot () {
+            return renderers;
+        },
+        /**
+     * Adds a new React Renderer to the editor.
+     */ setRenderer (id, renderer) {
+            renderers = {
+                ...renderers,
+                [id]: /*#__PURE__*/ (0, _reactdom.createPortal)(renderer.reactElement, renderer.element, id)
+            };
+            subscribers.forEach((subscriber)=>subscriber());
+        },
+        /**
+     * Removes a React Renderer from the editor.
+     */ removeRenderer (id) {
+            const nextRenderers = {
+                ...renderers
+            };
+            delete nextRenderers[id];
+            renderers = nextRenderers;
+            subscribers.forEach((subscriber)=>subscriber());
+        }
+    };
+}
 function TiptapEditorContent(param) {
-    let { editor, ...props } = param;
+    let { editor: editorProp, ...props } = param;
+    const editor = editorProp;
     (0, _useEditorEffect.useEditorEffect)((view)=>{
         if (editor.view === view) {
             return;
         }
-        Object.defineProperty(editor, "editorView", {
-            value: view,
-            configurable: true,
-            enumerable: true,
-            writable: true
-        });
+        // @ts-expect-error private property
+        editor.editorView = view;
+        editor.contentComponent = getInstance();
         // @ts-expect-error private method
         editor.injectCSS();
         const dom = view.dom;
@@ -79,6 +124,10 @@ function TiptapEditorContent(param) {
             });
             editor.isInitialized = true;
         });
+        return ()=>{
+            editor.isInitialized = false;
+            editor.contentComponent = null;
+        };
     }, [
         editor
     ]);
@@ -89,5 +138,7 @@ function TiptapEditorContent(param) {
     ]);
     return /*#__PURE__*/ _react1.default.createElement(_react.EditorContext.Provider, {
         value: contextValue
-    }, /*#__PURE__*/ _react1.default.createElement(_ProseMirrorDoc.ProseMirrorDoc, props));
+    }, /*#__PURE__*/ _react1.default.createElement(_react1.default.Fragment, null, /*#__PURE__*/ _react1.default.createElement(_ProseMirrorDoc.ProseMirrorDoc, props), editor?.contentComponent && /*#__PURE__*/ _react1.default.createElement(Portals, {
+        contentComponent: editor.contentComponent
+    })));
 }

package/dist/cjs/tiptap/TiptapEditorView.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "TiptapEditorView", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _ProseMirror = require("../components/ProseMirror.js");
+const _useForceUpdate = require("../hooks/useForceUpdate.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -53,11 +54,17 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 function TiptapEditorView(param) {
     let { editor, nodeViews, children } = param;
+    const forceUpdate = (0, _useForceUpdate.useForceUpdate)();
     const dispatchTransaction = (0, _react.useCallback)((tr)=>{
         // @ts-expect-error calling private method
         editor.dispatchTransaction(tr);
+        // Tiptap's dispatchTransaction doesn't trigger
+        // a re-render, so we need to manually force
+        // one to ensure that React stays in sync.
+        forceUpdate();
     }, [
-        editor
+        editor,
+        forceUpdate
     ]);
     const initialEditorProps = {
         ...editor.options.editorProps,

package/dist/cjs/tiptap/hooks/useTiptapEditor.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTiptapEditor", {
+    enumerable: true,
+    get: function() {
+        return useTiptapEditor;
+    }
+});
+const _react = require("@tiptap/react");
+function useTiptapEditor(options, deps) {
+    return (0, _react.useEditor)({
+        ...options,
+        element: null
+    }, deps);
+}

package/dist/cjs/tiptap/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     tiptapNodeView: function() {
         return _tiptapNodeView.tiptapNodeView;
     },
+    useTiptapEditor: function() {
+        return _useTiptapEditor.useTiptapEditor;
+    },
     useTiptapEditorEffect: function() {
         return _useTiptapEditorEffect.useTiptapEditorEffect;
     },
@@ -30,3 +33,4 @@ const _TiptapEditorView = require("./TiptapEditorView.js");
 const _TiptapEditorContent = require("./TiptapEditorContent.js");
 const _useTiptapEditorEffect = require("./hooks/useTiptapEditorEffect.js");
 const _useTiptapEditorEventCallback = require("./hooks/useTiptapEditorEventCallback.js");
+const _useTiptapEditor = require("./hooks/useTiptapEditor.js");

package/dist/cjs/tiptap/tiptapNodeView.js

@@ -64,10 +64,11 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 function tiptapNodeView(param) {
-    let { component: WrappedComponent, extension, as: OuterTag = "div", className = "", attrs, contentDOMElementTag: InnerTag = "div", stopEvent, ignoreMutation } = param;
+    let { component: WrappedComponent, extension, as, className = "", attrs, contentDOMElementTag: InnerTag = "div", stopEvent, ignoreMutation } = param;
     const TiptapNodeView = /*#__PURE__*/ (0, _react1.memo)(/*#__PURE__*/ (0, _react1.forwardRef)(function TiptapNodeView(param, ref) {
         let { children, nodeProps, ...props } = param;
         const { node, getPos, decorations, innerDecorations } = nodeProps;
+        const OuterTag = as ?? node.type.isInline ? "span" : "div";
         const { editor } = (0, _react.useCurrentEditor)();
         const extensionManager = editor?.extensionManager ?? null;
         const extensions = extensionManager?.extensions ?? null;
@@ -142,20 +143,18 @@ function tiptapNodeView(param) {
                 to
             });
         });
-        const nodeViewContext = (0, _react1.useMemo)(()=>({
-                nodeViewContentChildren: /*#__PURE__*/ _react1.default.createElement(InnerTag, {
-                    "data-node-view-content-inner": node.type.name,
-                    style: {
-                        whitespace: "inherit"
-                    }
-                }, children)
-            }), [
+        const nodeViewContent = (0, _react1.useMemo)(()=>/*#__PURE__*/ _react1.default.createElement(InnerTag, {
+                "data-node-view-content-inner": node.type.name,
+                style: {
+                    whitespace: "inherit"
+                }
+            }, children), [
             children,
             node.type.name
         ]);
         if (!editor) return null;
-        return /*#__PURE__*/ _react1.default.createElement(_react.ReactNodeViewContext.Provider, {
-            value: nodeViewContext
+        return /*#__PURE__*/ _react1.default.createElement(_react.ReactNodeViewContentProvider, {
+            content: nodeViewContent
         }, /*#__PURE__*/ _react1.default.createElement(OuterTag, {
             ref: ref,
             className: finalClassName,

package/dist/esm/tiptap/TiptapEditorContent.js

@@ -1,19 +1,64 @@
 import { EditorContext } from "@tiptap/react";
-import React, { useMemo } from "react";
+import React, { useMemo, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
 import { ProseMirrorDoc } from "../components/ProseMirrorDoc.js";
 import { useEditorEffect } from "../hooks/useEditorEffect.js";
+/**
+ * This component renders all of the editor's registered "React renderers".
+ */ const Portals = (param)=>{
+    let { contentComponent } = param;
+    const renderers = useSyncExternalStore(contentComponent.subscribe, contentComponent.getSnapshot, contentComponent.getServerSnapshot);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, Object.values(renderers));
+};
+function getInstance() {
+    const subscribers = new Set();
+    let renderers = {};
+    return {
+        /**
+     * Subscribe to the editor instance's changes.
+     */ subscribe (callback) {
+            subscribers.add(callback);
+            return ()=>{
+                subscribers.delete(callback);
+            };
+        },
+        getSnapshot () {
+            return renderers;
+        },
+        getServerSnapshot () {
+            return renderers;
+        },
+        /**
+     * Adds a new React Renderer to the editor.
+     */ setRenderer (id, renderer) {
+            renderers = {
+                ...renderers,
+                [id]: /*#__PURE__*/ createPortal(renderer.reactElement, renderer.element, id)
+            };
+            subscribers.forEach((subscriber)=>subscriber());
+        },
+        /**
+     * Removes a React Renderer from the editor.
+     */ removeRenderer (id) {
+            const nextRenderers = {
+                ...renderers
+            };
+            delete nextRenderers[id];
+            renderers = nextRenderers;
+            subscribers.forEach((subscriber)=>subscriber());
+        }
+    };
+}
 export function TiptapEditorContent(param) {
-    let { editor, ...props } = param;
+    let { editor: editorProp, ...props } = param;
+    const editor = editorProp;
     useEditorEffect((view)=>{
         if (editor.view === view) {
             return;
         }
-        Object.defineProperty(editor, "editorView", {
-            value: view,
-            configurable: true,
-            enumerable: true,
-            writable: true
-        });
+        // @ts-expect-error private property
+        editor.editorView = view;
+        editor.contentComponent = getInstance();
         // @ts-expect-error private method
         editor.injectCSS();
         const dom = view.dom;
@@ -28,6 +73,10 @@ export function TiptapEditorContent(param) {
             });
             editor.isInitialized = true;
         });
+        return ()=>{
+            editor.isInitialized = false;
+            editor.contentComponent = null;
+        };
     }, [
         editor
     ]);
@@ -38,5 +87,7 @@ export function TiptapEditorContent(param) {
     ]);
     return /*#__PURE__*/ React.createElement(EditorContext.Provider, {
         value: contextValue
-    }, /*#__PURE__*/ React.createElement(ProseMirrorDoc, props));
+    }, /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ProseMirrorDoc, props), editor?.contentComponent && /*#__PURE__*/ React.createElement(Portals, {
+        contentComponent: editor.contentComponent
+    })));
 }

package/dist/esm/tiptap/TiptapEditorView.js

@@ -1,14 +1,21 @@
 import React, { useCallback } from "react";
 import { ProseMirror } from "../components/ProseMirror.js";
+import { useForceUpdate } from "../hooks/useForceUpdate.js";
 /**
  * Render a Tiptap-compatible React ProseMirror editor.
  */ export function TiptapEditorView(param) {
     let { editor, nodeViews, children } = param;
+    const forceUpdate = useForceUpdate();
     const dispatchTransaction = useCallback((tr)=>{
         // @ts-expect-error calling private method
         editor.dispatchTransaction(tr);
+        // Tiptap's dispatchTransaction doesn't trigger
+        // a re-render, so we need to manually force
+        // one to ensure that React stays in sync.
+        forceUpdate();
     }, [
-        editor
+        editor,
+        forceUpdate
     ]);
     const initialEditorProps = {
         ...editor.options.editorProps,

package/dist/esm/tiptap/hooks/useTiptapEditor.js

@@ -0,0 +1,7 @@
+import { useEditor } from "@tiptap/react";
+export function useTiptapEditor(options, deps) {
+    return useEditor({
+        ...options,
+        element: null
+    }, deps);
+}

package/dist/esm/tiptap/index.js

@@ -3,3 +3,4 @@ export { TiptapEditorView } from "./TiptapEditorView.js";
 export { TiptapEditorContent } from "./TiptapEditorContent.js";
 export { useTiptapEditorEffect } from "./hooks/useTiptapEditorEffect.js";
 export { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallback.js";
+export { useTiptapEditor } from "./hooks/useTiptapEditor.js";

package/dist/esm/tiptap/tiptapNodeView.js

@@ -1,5 +1,5 @@
 import { getAttributesFromExtensions, getRenderedAttributes } from "@tiptap/core";
-import { ReactNodeViewContext, useCurrentEditor } from "@tiptap/react";
+import { ReactNodeViewContentProvider, useCurrentEditor } from "@tiptap/react";
 import cx from "classnames";
 import React, { forwardRef, memo, useMemo, useRef } from "react";
 import { useEditorEventCallback } from "../hooks/useEditorEventCallback.js";
@@ -32,10 +32,11 @@ import { htmlAttrsToReactProps } from "../props.js";
  * }
  * ```
  */ export function tiptapNodeView(param) {
-    let { component: WrappedComponent, extension, as: OuterTag = "div", className = "", attrs, contentDOMElementTag: InnerTag = "div", stopEvent, ignoreMutation } = param;
+    let { component: WrappedComponent, extension, as, className = "", attrs, contentDOMElementTag: InnerTag = "div", stopEvent, ignoreMutation } = param;
     const TiptapNodeView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function TiptapNodeView(param, ref) {
         let { children, nodeProps, ...props } = param;
         const { node, getPos, decorations, innerDecorations } = nodeProps;
+        const OuterTag = as ?? node.type.isInline ? "span" : "div";
         const { editor } = useCurrentEditor();
         const extensionManager = editor?.extensionManager ?? null;
         const extensions = extensionManager?.extensions ?? null;
@@ -110,20 +111,18 @@ import { htmlAttrsToReactProps } from "../props.js";
                 to
             });
         });
-        const nodeViewContext = useMemo(()=>({
-                nodeViewContentChildren: /*#__PURE__*/ React.createElement(InnerTag, {
-                    "data-node-view-content-inner": node.type.name,
-                    style: {
-                        whitespace: "inherit"
-                    }
-                }, children)
-            }), [
+        const nodeViewContent = useMemo(()=>/*#__PURE__*/ React.createElement(InnerTag, {
+                "data-node-view-content-inner": node.type.name,
+                style: {
+                    whitespace: "inherit"
+                }
+            }, children), [
             children,
             node.type.name
         ]);
         if (!editor) return null;
-        return /*#__PURE__*/ React.createElement(ReactNodeViewContext.Provider, {
-            value: nodeViewContext
+        return /*#__PURE__*/ React.createElement(ReactNodeViewContentProvider, {
+            content: nodeViewContent
         }, /*#__PURE__*/ React.createElement(OuterTag, {
             ref: ref,
             className: finalClassName,