@stesura/react-prosemirror 3.2.11-stesura.1

package/dist/esm/tiptap/extensions/ReactProseMirror.js

@@ -0,0 +1,30 @@
+import { Extension } from "@tiptap/core";
+import { reorderSiblingsOnTransaction } from "../../commands/reorderSiblings.js";
+import { reactKeys } from "../../plugins/reactKeys.js";
+export const ReactProseMirror = Extension.create({
+    name: "@handlewithcare/react-prosemirror/reactKeys",
+    addProseMirrorPlugins () {
+        return [
+            reactKeys()
+        ];
+    },
+    addCommands () {
+        return {
+            /**
+       * Command that reorders the adjacent nodes starting
+       * at the provided position.
+       *
+       * @param pos - The `start` position of the parent of the nodes being reordered
+       * @param order - The new order for the nodes, expressed as an array of indices. For
+       *                example, to swap the first two nodes in a set of three, `order`
+       *                would be set to `[1, 0, 2]`. To move the first node to the end,
+       *                and keep the other two in relative order, set `order` to `[1, 2, 0]`.
+       */ reorderSiblings (initialPos, order) {
+                return function reorderSiblingsCommand(param) {
+                    let { tr, state, dispatch } = param;
+                    return reorderSiblingsOnTransaction(initialPos, order, tr, state, dispatch);
+                };
+            }
+        };
+    }
+});

package/dist/esm/tiptap/extensions/ReactProseMirrorCommands.js

@@ -0,0 +1,11 @@
+import { Extension, commands as coreCommands } from "@tiptap/core";
+import { updateAttributes } from "./commands/updateAttributes.js";
+export const ReactProseMirrorCommands = Extension.create({
+    name: "reactProseMirrorCommands",
+    addCommands () {
+        return {
+            ...coreCommands,
+            updateAttributes
+        };
+    }
+});

package/dist/esm/tiptap/extensions/commands/updateAttributes.js

@@ -0,0 +1,96 @@
+import { getMarkType, getNodeType, getSchemaTypeNameByName } from "@tiptap/core";
+// Tiptap's updateAttributes command, but using setNodeAttribute instead of
+// setNodeMarkup to avoid replacing entire leaf nodes
+export const updateAttributes = function(typeOrName) {
+    let attributes = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+    return (param)=>{
+        let { tr, state, dispatch } = param;
+        let nodeType = null;
+        let markType = null;
+        const schemaType = getSchemaTypeNameByName(typeof typeOrName === "string" ? typeOrName : typeOrName.name, state.schema);
+        if (!schemaType) {
+            return false;
+        }
+        if (schemaType === "node") {
+            nodeType = getNodeType(typeOrName, state.schema);
+        }
+        if (schemaType === "mark") {
+            markType = getMarkType(typeOrName, state.schema);
+        }
+        let canUpdate = false;
+        tr.selection.ranges.forEach((range)=>{
+            const from = range.$from.pos;
+            const to = range.$to.pos;
+            let lastPos;
+            let lastNode;
+            let trimmedFrom;
+            let trimmedTo;
+            if (tr.selection.empty) {
+                state.doc.nodesBetween(from, to, (node, pos)=>{
+                    if (nodeType && nodeType === node.type) {
+                        canUpdate = true;
+                        trimmedFrom = Math.max(pos, from);
+                        trimmedTo = Math.min(pos + node.nodeSize, to);
+                        lastPos = pos;
+                        lastNode = node;
+                    }
+                });
+            } else {
+                state.doc.nodesBetween(from, to, (node, pos)=>{
+                    if (pos < from && nodeType && nodeType === node.type) {
+                        canUpdate = true;
+                        trimmedFrom = Math.max(pos, from);
+                        trimmedTo = Math.min(pos + node.nodeSize, to);
+                        lastPos = pos;
+                        lastNode = node;
+                    }
+                    if (pos >= from && pos <= to) {
+                        if (nodeType && nodeType === node.type) {
+                            canUpdate = true;
+                            if (dispatch) {
+                                Object.entries(attributes).forEach((param)=>{
+                                    let [key, value] = param;
+                                    tr.setNodeAttribute(pos, key, value);
+                                });
+                            }
+                        }
+                        if (markType && node.marks.length) {
+                            node.marks.forEach((mark)=>{
+                                if (markType === mark.type) {
+                                    canUpdate = true;
+                                    if (dispatch) {
+                                        const trimmedFrom2 = Math.max(pos, from);
+                                        const trimmedTo2 = Math.min(pos + node.nodeSize, to);
+                                        tr.addMark(trimmedFrom2, trimmedTo2, markType.create({
+                                            ...mark.attrs,
+                                            ...attributes
+                                        }));
+                                    }
+                                }
+                            });
+                        }
+                    }
+                });
+            }
+            if (lastNode) {
+                if (dispatch) {
+                    Object.entries(attributes).forEach((param)=>{
+                        let [key, value] = param;
+                        if (lastPos !== undefined) tr.setNodeAttribute(lastPos, key, value);
+                    });
+                }
+                if (markType && lastNode.marks.length) {
+                    lastNode.marks.forEach((mark)=>{
+                        if (markType === mark.type && dispatch) {
+                            tr.addMark(trimmedFrom, trimmedTo, markType.create({
+                                ...mark.attrs,
+                                ...attributes
+                            }));
+                        }
+                    });
+                }
+            }
+        });
+        return canUpdate;
+    };
+};

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

@@ -0,0 +1,308 @@
+// Forked from Tiptap's useEditor hook, with modifications to support
+// server-side rendering
+import { Editor } from "@tiptap/core";
+import { useDebugValue, useEffect, useRef, useState } from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
+import { StaticEditorView } from "../../StaticEditorView.js";
+let ReactEditor = class ReactEditor extends Editor {
+    constructor(options){
+        super(options);
+        // @ts-expect-error Internal property
+        this.editorView = new 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);
+    }
+};
+export 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 = useRef(options);
+    mostRecentOptions.current = options;
+    const [instanceManager] = useState(()=>new EditorInstanceManager(mostRecentOptions));
+    const editor = useSyncExternalStore(instanceManager.subscribe, instanceManager.getEditor, instanceManager.getServerSnapshot);
+    useDebugValue(editor);
+    // This effect will handle creating/updating the editor instance
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(instanceManager.onRender(deps));
+    return editor;
+}

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

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { EditorContext } from "../../contexts/EditorContext.js";
+/**
+ * Returns true if the hook is called in a
+ * component that's a descendant of the
+ * ProseMirror component
+ */ export function useIsInReactProseMirror() {
+    return useContext(EditorContext) !== null;
+}

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

@@ -0,0 +1,31 @@
+import { ReactProseMirror } from "../extensions/ReactProseMirror.js";
+import { ReactProseMirrorCommands } from "../extensions/ReactProseMirrorCommands.js";
+import { useEditor } from "./useEditor.js";
+/**
+ * Create a React ProseMirror integrated Tiptap Editor instance.
+ * @param options The editor options
+ * @param deps The dependencies to watch for changes
+ * @returns The editor instance
+ * @example const editor = useEditor({ extensions: [...] })
+ */ export function useTiptapEditor(options, deps) {
+    const extensions = [
+        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);
+    }
+    return useEditor({
+        ...options,
+        extensions,
+        element: null
+    }, deps);
+}

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

@@ -0,0 +1,42 @@
+import { useCurrentEditor } from "@tiptap/react";
+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.
+ *
+ * Effects can take a Tiptap Editor instance as an argument.
+ * This hook should be used to execute layout effects that
+ * depend on the Editor, such as for positioning DOM
+ * nodes based on ProseMirror positions.
+ *
+ * Layout effects registered with this hook still fire
+ * synchronously after all DOM mutations, but they do so
+ * _after_ the Editor has been updated, even when the
+ * Editor lives in an ancestor component.
+ *
+ * This hook can only be used in a component that is mounted
+ * as a child of the TiptapEditorView component, including
+ * React node view components.
+ */ 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 && 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/esm/tiptap/hooks/useTiptapEditorEventCallback.js

@@ -0,0 +1,35 @@
+import { useCurrentEditor } from "@tiptap/react";
+import { useCallback, useRef } from "react";
+import { useEditorEffect } from "../../hooks/useEditorEffect.js";
+function assertEditor(editor) {
+    if (editor) return;
+    throw new DOMException("Tiptap Editor is not initialized", "InvalidStateError");
+}
+/**
+ * Returns a stable function reference to be used as an
+ * event handler callback.
+ *
+ * The callback will be called with the Tiptap Editor instance
+ * as its first argument.
+ *
+ * This hook can only be used in a component that is mounted
+ * as a child of the TiptapEditorView component, including
+ * React node view components.
+ */ export function useTiptapEditorEventCallback(callback) {
+    const ref = useRef(callback);
+    const { editor } = useCurrentEditor();
+    useEditorEffect(()=>{
+        ref.current = callback;
+    }, [
+        callback
+    ]);
+    return 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/esm/tiptap/index.js

@@ -0,0 +1,9 @@
+export { tiptapNodeView } from "./tiptapNodeView.js";
+export { TiptapEditorView } from "./TiptapEditorView.js";
+export { TiptapEditorContent } from "./TiptapEditorContent.js";
+export { useTiptapEditorEffect } from "./hooks/useTiptapEditorEffect.js";
+export { useIsInReactProseMirror } from "./hooks/useIsInReactProseMirror.js";
+export { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallback.js";
+export { TiptapEditor } from "./TiptapEditor.js";
+export { useTiptapEditor } from "./hooks/useTiptapEditor.js";
+export { ReactProseMirror } from "./extensions/ReactProseMirror.js";