@handlewithcare/react-prosemirror 2.8.0-tiptap.17 → 2.8.0-tiptap.19

package/dist/cjs/tiptap/TiptapEditorContent.js

@@ -10,10 +10,9 @@ Object.defineProperty(exports, "TiptapEditorContent", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _reactdom = require("react-dom");
-const _ReactEditorView = require("../ReactEditorView.js");
 const _ProseMirrorDoc = require("../components/ProseMirrorDoc.js");
-const _EditorContext = require("../contexts/EditorContext.js");
-const _useClientLayoutEffect = require("../hooks/useClientLayoutEffect.js");
+const _useEditorEffect = require("../hooks/useEditorEffect.js");
+const _TiptapEditorContext = require("./contexts/TiptapEditorContext.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -104,9 +103,9 @@ function getInstance() {
 function TiptapEditorContent(param) {
     let { editor: editorProp, ...props } = param;
     const editor = editorProp;
-    const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
-    (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
-        if (!(view instanceof _ReactEditorView.ReactEditorView) || editor.view === view) {
+    const { onEditorInitialize, onEditorDeinitialize } = (0, _react.useContext)(_TiptapEditorContext.TiptapEditorContext);
+    (0, _useEditorEffect.useEditorEffect)((view)=>{
+        if (editor.view === view) {
             return;
         }
         // @ts-expect-error private property
@@ -125,14 +124,17 @@ function TiptapEditorContent(param) {
                 editor
             });
             editor.isInitialized = true;
+            onEditorInitialize();
         });
         return ()=>{
             editor.isInitialized = false;
             editor.contentComponent = null;
+            onEditorDeinitialize();
         };
     }, [
         editor,
-        view
+        onEditorDeinitialize,
+        onEditorInitialize
     ]);
     return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_ProseMirrorDoc.ProseMirrorDoc, props), editor?.contentComponent && /*#__PURE__*/ _react.default.createElement(Portals, {
         contentComponent: editor.contentComponent

package/dist/cjs/tiptap/TiptapEditorView.js

@@ -12,6 +12,7 @@ const _react = require("@tiptap/react");
 const _react1 = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _ProseMirror = require("../components/ProseMirror.js");
 const _useForceUpdate = require("../hooks/useForceUpdate.js");
+const _TiptapEditorContext = require("./contexts/TiptapEditorContext.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -55,6 +56,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 function TiptapEditorView(param) {
     let { editor, nodeViews, children, static: isStatic = false } = param;
+    const [isEditorInitialized, setIsEditorInitialized] = (0, _react1.useState)(editor.isInitialized);
     const forceUpdate = (0, _useForceUpdate.useForceUpdate)();
     const dispatchTransaction = (0, _react1.useCallback)((tr)=>{
         // @ts-expect-error calling private method
@@ -83,6 +85,21 @@ function TiptapEditorView(param) {
         }), [
         editor
     ]);
+    const onEditorInitialize = (0, _react1.useCallback)(()=>{
+        setIsEditorInitialized(true);
+    }, []);
+    const onEditorDeinitialize = (0, _react1.useCallback)(()=>{
+        setIsEditorInitialized(false);
+    }, []);
+    const tiptapEditorContextValue = (0, _react1.useMemo)(()=>({
+            isEditorInitialized,
+            onEditorInitialize,
+            onEditorDeinitialize
+        }), [
+        isEditorInitialized,
+        onEditorDeinitialize,
+        onEditorInitialize
+    ]);
     return /*#__PURE__*/ _react1.default.createElement(_ProseMirror.ProseMirror, {
         static: isStatic,
         className: "tiptap",
@@ -90,11 +107,11 @@ function TiptapEditorView(param) {
         markViews: markViews,
         nodeViews: nodeViews,
         customNodeViews: customNodeViews,
-        state: editor.isDestroyed || editor.state.plugins.length ? editor.state : editor.state.reconfigure({
-            plugins: editor.extensionManager.plugins
-        }),
+        state: editor.state,
         dispatchTransaction: dispatchTransaction
     }, /*#__PURE__*/ _react1.default.createElement(_react.EditorContext.Provider, {
         value: contextValue
-    }, children));
+    }, /*#__PURE__*/ _react1.default.createElement(_TiptapEditorContext.TiptapEditorContext.Provider, {
+        value: tiptapEditorContextValue
+    }, children)));
 }

package/dist/cjs/tiptap/contexts/TiptapEditorContext.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TiptapEditorContext", {
+    enumerable: true,
+    get: function() {
+        return TiptapEditorContext;
+    }
+});
+const _react = require("react");
+const TiptapEditorContext = (0, _react.createContext)(null);

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

@@ -25,5 +25,17 @@ function useTiptapEditor(options, deps) {
             ...editor.options.editorProps.attributes
         }
     });
+    // @ts-expect-error private property
+    const stateHasPlugins = !!editor.editorState.plugins.length;
+    const managerHasPlugins = !!editor.extensionManager.plugins.length;
+    const stateNeedsReconfigure = !stateHasPlugins && managerHasPlugins && !editor.isDestroyed;
+    // @ts-expect-error private property
+    editor.editorState = stateNeedsReconfigure ? editor.editorState.reconfigure({
+        plugins: editor.extensionManager.plugins
+    }) : editor.editorState;
+    if (stateNeedsReconfigure) {
+        // @ts-expect-error private property
+        editor.editorView.updateState(editor.editorState);
+    }
     return editor;
 }

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

@@ -13,11 +13,13 @@ const _react1 = require("react");
 const _ReactEditorView = require("../../ReactEditorView.js");
 const _EditorContext = require("../../contexts/EditorContext.js");
 const _useEditorEffect = require("../../hooks/useEditorEffect.js");
+const _TiptapEditorContext = require("../contexts/TiptapEditorContext.js");
 function useTiptapEditorEffect(effect, dependencies) {
     const { view } = (0, _react1.useContext)(_EditorContext.EditorContext);
     const { editor } = (0, _react.useCurrentEditor)();
+    const { isEditorInitialized } = (0, _react1.useContext)(_TiptapEditorContext.TiptapEditorContext);
     (0, _useEditorEffect.useEditorEffect)(()=>{
-        if (editor?.view instanceof _ReactEditorView.ReactEditorView && view instanceof _ReactEditorView.ReactEditorView) {
+        if (editor?.view instanceof _ReactEditorView.ReactEditorView && view instanceof _ReactEditorView.ReactEditorView && isEditorInitialized) {
             return effect(editor);
         }
     // The rules of hooks want to be able to statically
@@ -27,6 +29,7 @@ function useTiptapEditorEffect(effect, dependencies) {
     }, dependencies && [
         editor,
         view,
+        isEditorInitialized,
         ...dependencies
     ]);
 }

package/dist/esm/tiptap/TiptapEditorContent.js

@@ -1,9 +1,8 @@
 import React, { useContext, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
-import { ReactEditorView } from "../ReactEditorView.js";
 import { ProseMirrorDoc } from "../components/ProseMirrorDoc.js";
-import { EditorContext } from "../contexts/EditorContext.js";
-import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
+import { useEditorEffect } from "../hooks/useEditorEffect.js";
+import { TiptapEditorContext } from "./contexts/TiptapEditorContext.js";
 /**
  * This component renders all of the editor's registered "React renderers".
  */ const Portals = (param)=>{
@@ -53,9 +52,9 @@ function getInstance() {
 export function TiptapEditorContent(param) {
     let { editor: editorProp, ...props } = param;
     const editor = editorProp;
-    const { view } = useContext(EditorContext);
-    useClientLayoutEffect(()=>{
-        if (!(view instanceof ReactEditorView) || editor.view === view) {
+    const { onEditorInitialize, onEditorDeinitialize } = useContext(TiptapEditorContext);
+    useEditorEffect((view)=>{
+        if (editor.view === view) {
             return;
         }
         // @ts-expect-error private property
@@ -74,14 +73,17 @@ export function TiptapEditorContent(param) {
                 editor
             });
             editor.isInitialized = true;
+            onEditorInitialize();
         });
         return ()=>{
             editor.isInitialized = false;
             editor.contentComponent = null;
+            onEditorDeinitialize();
         };
     }, [
         editor,
-        view
+        onEditorDeinitialize,
+        onEditorInitialize
     ]);
     return /*#__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,11 +1,13 @@
 import { EditorContext } from "@tiptap/react";
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { ProseMirror } from "../components/ProseMirror.js";
 import { useForceUpdate } from "../hooks/useForceUpdate.js";
+import { TiptapEditorContext } from "./contexts/TiptapEditorContext.js";
 /**
  * Render a Tiptap-compatible React ProseMirror editor.
  */ export function TiptapEditorView(param) {
     let { editor, nodeViews, children, static: isStatic = false } = param;
+    const [isEditorInitialized, setIsEditorInitialized] = useState(editor.isInitialized);
     const forceUpdate = useForceUpdate();
     const dispatchTransaction = useCallback((tr)=>{
         // @ts-expect-error calling private method
@@ -34,6 +36,21 @@ import { useForceUpdate } from "../hooks/useForceUpdate.js";
         }), [
         editor
     ]);
+    const onEditorInitialize = useCallback(()=>{
+        setIsEditorInitialized(true);
+    }, []);
+    const onEditorDeinitialize = useCallback(()=>{
+        setIsEditorInitialized(false);
+    }, []);
+    const tiptapEditorContextValue = useMemo(()=>({
+            isEditorInitialized,
+            onEditorInitialize,
+            onEditorDeinitialize
+        }), [
+        isEditorInitialized,
+        onEditorDeinitialize,
+        onEditorInitialize
+    ]);
     return /*#__PURE__*/ React.createElement(ProseMirror, {
         static: isStatic,
         className: "tiptap",
@@ -41,11 +58,11 @@ import { useForceUpdate } from "../hooks/useForceUpdate.js";
         markViews: markViews,
         nodeViews: nodeViews,
         customNodeViews: customNodeViews,
-        state: editor.isDestroyed || editor.state.plugins.length ? editor.state : editor.state.reconfigure({
-            plugins: editor.extensionManager.plugins
-        }),
+        state: editor.state,
         dispatchTransaction: dispatchTransaction
     }, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
         value: contextValue
-    }, children));
+    }, /*#__PURE__*/ React.createElement(TiptapEditorContext.Provider, {
+        value: tiptapEditorContextValue
+    }, children)));
 }

package/dist/esm/tiptap/contexts/TiptapEditorContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const TiptapEditorContext = createContext(null);

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

@@ -15,5 +15,17 @@ export function useTiptapEditor(options, deps) {
             ...editor.options.editorProps.attributes
         }
     });
+    // @ts-expect-error private property
+    const stateHasPlugins = !!editor.editorState.plugins.length;
+    const managerHasPlugins = !!editor.extensionManager.plugins.length;
+    const stateNeedsReconfigure = !stateHasPlugins && managerHasPlugins && !editor.isDestroyed;
+    // @ts-expect-error private property
+    editor.editorState = stateNeedsReconfigure ? editor.editorState.reconfigure({
+        plugins: editor.extensionManager.plugins
+    }) : editor.editorState;
+    if (stateNeedsReconfigure) {
+        // @ts-expect-error private property
+        editor.editorView.updateState(editor.editorState);
+    }
     return editor;
 }

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

@@ -3,6 +3,7 @@ import { useContext } from "react";
 import { ReactEditorView } from "../../ReactEditorView.js";
 import { EditorContext } from "../../contexts/EditorContext.js";
 import { useEditorEffect } from "../../hooks/useEditorEffect.js";
+import { TiptapEditorContext } from "../contexts/TiptapEditorContext.js";
 /**
  * Registers a layout effect to run after the EditorView has
  * been updated with the latest EditorState and Decorations.
@@ -23,8 +24,9 @@ import { useEditorEffect } from "../../hooks/useEditorEffect.js";
  */ export function useTiptapEditorEffect(effect, dependencies) {
     const { view } = useContext(EditorContext);
     const { editor } = useCurrentEditor();
+    const { isEditorInitialized } = useContext(TiptapEditorContext);
     useEditorEffect(()=>{
-        if (editor?.view instanceof ReactEditorView && view instanceof ReactEditorView) {
+        if (editor?.view instanceof ReactEditorView && view instanceof ReactEditorView && isEditorInitialized) {
             return effect(editor);
         }
     // The rules of hooks want to be able to statically
@@ -34,6 +36,7 @@ import { useEditorEffect } from "../../hooks/useEditorEffect.js";
     }, dependencies && [
         editor,
         view,
+        isEditorInitialized,
         ...dependencies
     ]);
 }