@stesura/react-prosemirror 3.2.11-stesura.1

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

@@ -0,0 +1,318 @@
+// Forked from Tiptap's useEditor hook, with modifications to support
+// server-side rendering
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useEditor", {
+    enumerable: true,
+    get: function() {
+        return useEditor;
+    }
+});
+const _core = require("@tiptap/core");
+const _react = require("react");
+const _index = require("use-sync-external-store/shim/index.js");
+const _StaticEditorView = require("../../StaticEditorView.js");
+let ReactEditor = class ReactEditor extends _core.Editor {
+    constructor(options){
+        super(options);
+        // @ts-expect-error Internal property
+        this.editorView = new _StaticEditorView.StaticEditorView({
+            // @ts-expect-error Internal property
+            state: this.editorState.reconfigure({
+                plugins: this.extensionManager.plugins
+            }),
+            ...this.options.editorProps,
+            attributes: {
+                role: "textbox",
+                ...this.options.editorProps.attributes
+            }
+        });
+    }
+};
+/**
+ * This class handles the creation, destruction, and re-creation of the editor instance.
+ */ let EditorInstanceManager = class EditorInstanceManager {
+    /**
+   * The current editor instance.
+   */ editor = null;
+    /**
+   * The most recent options to apply to the editor.
+   */ options;
+    /**
+   * The subscriptions to notify when the editor instance
+   * has been created or destroyed.
+   */ subscriptions = new Set();
+    /**
+   * A timeout to destroy the editor if it was not mounted within a time frame.
+   */ scheduledDestructionTimeout;
+    /**
+   * Whether the editor has been mounted.
+   */ isComponentMounted = false;
+    /**
+   * The most recent dependencies array.
+   */ previousDeps = null;
+    /**
+   * The unique instance ID. This is used to identify the editor instance. And will be re-generated for each new instance.
+   */ instanceId = "";
+    constructor(options){
+        this.options = options;
+        this.subscriptions = new Set();
+        this.setEditor(this.createEditor());
+        this.scheduleDestroy();
+        this.getEditor = this.getEditor.bind(this);
+        this.getServerSnapshot = this.getServerSnapshot.bind(this);
+        this.subscribe = this.subscribe.bind(this);
+        this.refreshEditorInstance = this.refreshEditorInstance.bind(this);
+        this.scheduleDestroy = this.scheduleDestroy.bind(this);
+        this.onRender = this.onRender.bind(this);
+        this.createEditor = this.createEditor.bind(this);
+    }
+    setEditor(editor) {
+        this.editor = editor;
+        this.instanceId = Math.random().toString(36).slice(2, 9);
+        // Notify all subscribers that the editor instance has been created
+        this.subscriptions.forEach((cb)=>cb());
+    }
+    /**
+   * Create a new editor instance. And attach event listeners.
+   */ createEditor() {
+        var _this = this;
+        const optionsToApply = {
+            ...this.options.current,
+            // Always call the most recent version of the callback function by default
+            onBeforeCreate: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onBeforeCreate?.(...args);
+            },
+            onBlur: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onBlur?.(...args);
+            },
+            onCreate: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onCreate?.(...args);
+            },
+            onDestroy: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onDestroy?.(...args);
+            },
+            onFocus: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onFocus?.(...args);
+            },
+            onSelectionUpdate: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onSelectionUpdate?.(...args);
+            },
+            onTransaction: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onTransaction?.(...args);
+            },
+            onUpdate: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onUpdate?.(...args);
+            },
+            onContentError: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onContentError?.(...args);
+            },
+            onDrop: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onDrop?.(...args);
+            },
+            onPaste: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onPaste?.(...args);
+            },
+            onDelete: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onDelete?.(...args);
+            }
+        };
+        const editor = new ReactEditor(optionsToApply);
+        // no need to keep track of the event listeners, they will be removed when the editor is destroyed
+        return editor;
+    }
+    /**
+   * Get the current editor instance.
+   */ getEditor() {
+        return this.editor;
+    }
+    // ----- FORKED CHANGES -----
+    /**
+   * Always disable the editor on the server-side.
+   */ getServerSnapshot() {
+        // return null;
+        // Return editor in SSRm, contrary to Tiptap's implementation
+        return this.editor;
+    }
+    // ----- END FORKED CHANGES -----
+    /**
+   * Subscribe to the editor instance's changes.
+   */ subscribe(onStoreChange) {
+        this.subscriptions.add(onStoreChange);
+        return ()=>{
+            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)) {
+                // we don't want to compare callbacks, they are always different and only registered once
+                return true;
+            }
+            // We often encourage putting extensions inlined in the options object, so we will do a slightly deeper comparison here
+            if (key === "extensions" && a.extensions && b.extensions) {
+                if (a.extensions.length !== b.extensions.length) {
+                    return false;
+                }
+                return a.extensions.every((extension, index)=>{
+                    if (extension !== b.extensions?.[index]) {
+                        return false;
+                    }
+                    return true;
+                });
+            }
+            if (a[key] !== b[key]) {
+                // if any of the options have changed, we should update the editor options
+                return false;
+            }
+            return true;
+        });
+    }
+    /**
+   * On each render, we will create, update, or destroy the editor instance.
+   * @param deps The dependencies to watch for changes
+   * @returns A cleanup function
+   */ onRender(deps) {
+        // The returned callback will run on each render
+        return ()=>{
+            this.isComponentMounted = true;
+            // Cleanup any scheduled destructions, since we are currently rendering
+            clearTimeout(this.scheduledDestructionTimeout);
+            if (this.editor && !this.editor.isDestroyed && deps.length === 0) {
+                // if the editor does exist & deps are empty, we don't need to re-initialize the editor generally
+                if (!EditorInstanceManager.compareOptions(this.options.current, this.editor.options)) {
+                    // But, the options are different, so we need to update the editor options
+                    // Still, this is faster than re-creating the editor
+                    this.editor.setOptions({
+                        ...this.options.current,
+                        editable: this.editor.isEditable
+                    });
+                }
+            } else {
+                // When the editor:
+                // - does not yet exist
+                // - is destroyed
+                // - the deps array changes
+                // We need to destroy the editor instance and re-initialize it
+                this.refreshEditorInstance(deps);
+            }
+            return ()=>{
+                this.isComponentMounted = false;
+                this.scheduleDestroy();
+            };
+        };
+    }
+    /**
+   * Recreate the editor instance if the dependencies have changed.
+   */ refreshEditorInstance(deps) {
+        if (this.editor && !this.editor.isDestroyed) {
+            // Editor instance already exists
+            if (this.previousDeps === null) {
+                // If lastDeps has not yet been initialized, reuse the current editor instance
+                this.previousDeps = deps;
+                return;
+            }
+            const depsAreEqual = this.previousDeps.length === deps.length && this.previousDeps.every((dep, index)=>dep === deps[index]);
+            if (depsAreEqual) {
+                // deps exist and are equal, no need to recreate
+                return;
+            }
+        }
+        if (this.editor && !this.editor.isDestroyed) {
+            // Destroy the editor instance if it exists
+            this.editor.destroy();
+        }
+        this.setEditor(this.createEditor());
+        // Update the lastDeps to the current deps
+        this.previousDeps = deps;
+    }
+    /**
+   * Schedule the destruction of the editor instance.
+   * This will only destroy the editor if it was not mounted on the next tick.
+   * This is to avoid destroying the editor instance when it's actually still mounted.
+   */ scheduleDestroy() {
+        const currentInstanceId = this.instanceId;
+        const currentEditor = this.editor;
+        // Wait two ticks to see if the component is still mounted
+        this.scheduledDestructionTimeout = setTimeout(()=>{
+            if (this.isComponentMounted && this.instanceId === currentInstanceId) {
+                // If still mounted on the following tick, with the same instanceId, do not destroy the editor
+                if (currentEditor) {
+                    // just re-apply options as they might have changed
+                    currentEditor.setOptions(this.options.current);
+                }
+                return;
+            }
+            if (currentEditor && !currentEditor.isDestroyed) {
+                currentEditor.destroy();
+                if (this.instanceId === currentInstanceId) {
+                    this.setEditor(null);
+                }
+            }
+        // This allows the effect to run again between ticks
+        // which may save us from having to re-create the editor
+        }, 1);
+    }
+};
+function useEditor() {
+    let options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, deps = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+    const mostRecentOptions = (0, _react.useRef)(options);
+    mostRecentOptions.current = options;
+    const [instanceManager] = (0, _react.useState)(()=>new EditorInstanceManager(mostRecentOptions));
+    const editor = (0, _index.useSyncExternalStore)(instanceManager.subscribe, instanceManager.getEditor, instanceManager.getServerSnapshot);
+    (0, _react.useDebugValue)(editor);
+    // This effect will handle creating/updating the editor instance
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (0, _react.useEffect)(instanceManager.onRender(deps));
+    return editor;
+}

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useIsInReactProseMirror", {
+    enumerable: true,
+    get: function() {
+        return useIsInReactProseMirror;
+    }
+});
+const _react = require("react");
+const _EditorContext = require("../../contexts/EditorContext.js");
+function useIsInReactProseMirror() {
+    return (0, _react.useContext)(_EditorContext.EditorContext) !== null;
+}

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTiptapEditor", {
+    enumerable: true,
+    get: function() {
+        return useTiptapEditor;
+    }
+});
+const _ReactProseMirror = require("../extensions/ReactProseMirror.js");
+const _ReactProseMirrorCommands = require("../extensions/ReactProseMirrorCommands.js");
+const _useEditor = require("./useEditor.js");
+function useTiptapEditor(options, deps) {
+    const extensions = [
+        _ReactProseMirror.ReactProseMirror,
+        ...options.extensions ?? []
+    ];
+    // If a consumer explicitly disables core extensions (or the Commands core extension)
+    // do not re-add our custom Commands
+    if (options.enableCoreExtensions === false || typeof options.enableCoreExtensions === "object" && options?.enableCoreExtensions?.commands === false) {
+    // Do nothing
+    } else {
+        options.enableCoreExtensions = {
+            ...typeof options.enableCoreExtensions === "object" ? options.enableCoreExtensions : {},
+            commands: false
+        };
+        extensions.push(_ReactProseMirrorCommands.ReactProseMirrorCommands);
+    }
+    return (0, _useEditor.useEditor)({
+        ...options,
+        extensions,
+        element: null
+    }, deps);
+}

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTiptapEditorEffect", {
+    enumerable: true,
+    get: function() {
+        return useTiptapEditorEffect;
+    }
+});
+const _react = require("@tiptap/react");
+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 && isEditorInitialized) {
+            return effect(editor);
+        }
+    // The rules of hooks want to be able to statically
+    // verify the dependencies for the effect, but this will
+    // have already happened at the call-site.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, dependencies && [
+        editor,
+        view,
+        isEditorInitialized,
+        ...dependencies
+    ]);
+}

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTiptapEditorEventCallback", {
+    enumerable: true,
+    get: function() {
+        return useTiptapEditorEventCallback;
+    }
+});
+const _react = require("@tiptap/react");
+const _react1 = require("react");
+const _useEditorEffect = require("../../hooks/useEditorEffect.js");
+function assertEditor(editor) {
+    if (editor) return;
+    throw new DOMException("Tiptap Editor is not initialized", "InvalidStateError");
+}
+function useTiptapEditorEventCallback(callback) {
+    const ref = (0, _react1.useRef)(callback);
+    const { editor } = (0, _react.useCurrentEditor)();
+    (0, _useEditorEffect.useEditorEffect)(()=>{
+        ref.current = callback;
+    }, [
+        callback
+    ]);
+    return (0, _react1.useCallback)(function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        assertEditor(editor);
+        return ref.current(editor, ...args);
+    }, [
+        editor
+    ]);
+}

package/dist/cjs/tiptap/index.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ReactProseMirror: function() {
+        return _ReactProseMirror.ReactProseMirror;
+    },
+    TiptapEditor: function() {
+        return _TiptapEditor.TiptapEditor;
+    },
+    TiptapEditorContent: function() {
+        return _TiptapEditorContent.TiptapEditorContent;
+    },
+    TiptapEditorView: function() {
+        return _TiptapEditorView.TiptapEditorView;
+    },
+    tiptapNodeView: function() {
+        return _tiptapNodeView.tiptapNodeView;
+    },
+    useIsInReactProseMirror: function() {
+        return _useIsInReactProseMirror.useIsInReactProseMirror;
+    },
+    useTiptapEditor: function() {
+        return _useTiptapEditor.useTiptapEditor;
+    },
+    useTiptapEditorEffect: function() {
+        return _useTiptapEditorEffect.useTiptapEditorEffect;
+    },
+    useTiptapEditorEventCallback: function() {
+        return _useTiptapEditorEventCallback.useTiptapEditorEventCallback;
+    }
+});
+const _tiptapNodeView = require("./tiptapNodeView.js");
+const _TiptapEditorView = require("./TiptapEditorView.js");
+const _TiptapEditorContent = require("./TiptapEditorContent.js");
+const _useTiptapEditorEffect = require("./hooks/useTiptapEditorEffect.js");
+const _useIsInReactProseMirror = require("./hooks/useIsInReactProseMirror.js");
+const _useTiptapEditorEventCallback = require("./hooks/useTiptapEditorEventCallback.js");
+const _TiptapEditor = require("./TiptapEditor.js");
+const _useTiptapEditor = require("./hooks/useTiptapEditor.js");
+const _ReactProseMirror = require("./extensions/ReactProseMirror.js");