@handlewithcare/react-prosemirror 3.1.0-tiptap.51 → 3.1.0-tiptap.52

package/dist/esm/plugins/beforeInputPlugin.js

@@ -1,6 +1,5 @@
 import { Fragment, Slice } from "prosemirror-model";
 import { Plugin, TextSelection } from "prosemirror-state";
-import { ReactEditorView } from "../ReactEditorView.js";
 import { CursorWrapper } from "../components/CursorWrapper.js";
 import { widget } from "../decorations/ReactWidgetType.js";
 function insertText(view, eventData) {
@@ -47,41 +46,68 @@ function handleGapCursorComposition(view) {
 }
 export function beforeInputPlugin(setCursorWrapper) {
     let compositionMarks = null;
+    let precompositionSnapshot = null;
     return new Plugin({
         props: {
             handleDOMEvents: {
                 compositionstart (view) {
-                    if (!(view instanceof ReactEditorView)) return false;
-                    view.input.composing = true;
-                    compositionMarks = view.state.storedMarks;
-                    const tr = view.state.tr.deleteSelection().setStoredMarks(null);
-                    view.dispatch(tr);
+                    compositionMarks = view.state.storedMarks ?? view.state.selection.$from.marks();
+                    view.dispatch(view.state.tr.deleteSelection());
                     handleGapCursorComposition(view);
                     const { state } = view;
-                    if (compositionMarks?.length) {
+                    const $pos = state.selection.$from;
+                    if (compositionMarks) {
                         setCursorWrapper(widget(state.selection.from, CursorWrapper, {
                             key: "cursor-wrapper",
-                            marks: compositionMarks,
-                            side: 1
+                            marks: compositionMarks
                         }));
                     }
+                    // Snapshot the siblings of the node that contains the
+                    // current cursor. We'll restore this later, so that React
+                    // doesn't panic about unknown DOM nodes.
+                    const { node: parent } = view.domAtPos($pos.pos);
+                    precompositionSnapshot = [];
+                    for (const node of parent.childNodes){
+                        precompositionSnapshot.push(node);
+                    }
+                    // @ts-expect-error Internal property - input
+                    view.input.composing = true;
                     return true;
                 },
                 compositionupdate () {
                     return true;
                 },
                 compositionend (view, event) {
-                    if (!(view instanceof ReactEditorView)) return false;
-                    if (!view.composing) return false;
+                    // @ts-expect-error Internal property - input
                     view.input.composing = false;
+                    const { state } = view;
+                    const { node: parent } = view.domAtPos(state.selection.from);
+                    if (precompositionSnapshot) {
+                        // Restore the snapshot of the parent node's children
+                        // from before the composition started. This gives us a
+                        // clean slate from which to dispatch our transaction
+                        // and trigger a React update.
+                        precompositionSnapshot.forEach((prevNode, i)=>{
+                            if (parent.childNodes.length <= i) {
+                                parent.appendChild(prevNode);
+                                return;
+                            }
+                            parent.replaceChild(prevNode, parent.childNodes.item(i));
+                        });
+                        if (parent.childNodes.length > precompositionSnapshot.length) {
+                            for(let i = precompositionSnapshot.length; i < parent.childNodes.length; i++){
+                                parent.removeChild(parent.childNodes.item(i));
+                            }
+                        }
+                    }
+                    if (event.data) {
+                        insertText(view, event.data, {
+                            marks: compositionMarks
+                        });
+                    }
                     compositionMarks = null;
+                    precompositionSnapshot = null;
                     setCursorWrapper(null);
-                    if (view.input.compositionNode && !view.input.compositionNode.pmViewDesc) {
-                        view.input.compositionNode.remove();
-                    }
-                    view.input.compositionEndedAt = event.timeStamp;
-                    view.input.compositionNode = null;
-                    view.input.compositionID++;
                     return true;
                 },
                 beforeinput (view, event) {
@@ -130,30 +156,6 @@ export function beforeInputPlugin(setCursorWrapper) {
                                 insertText(view, event.data);
                                 break;
                             }
-                        case "insertCompositionText":
-                            {
-                                const { tr } = view.state;
-                                // There's always a range on insertCompositionText beforeinput events
-                                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                                const range = event.getTargetRanges()[0];
-                                const start = view.posAtDOM(range.startContainer, range.startOffset);
-                                const end = view.posAtDOM(range.endContainer, range.endOffset, 1);
-                                if (view.state.doc.textBetween(start, end, "**", "*") === event.data) {
-                                    return;
-                                }
-                                if (event.data) {
-                                    if (compositionMarks) tr.ensureMarks(compositionMarks);
-                                    tr.insertText(event.data, start, end);
-                                } else {
-                                    tr.delete(start, end);
-                                }
-                                view.dom.addEventListener("input", ()=>{
-                                    view.dispatch(tr);
-                                }, {
-                                    once: true
-                                });
-                                break;
-                            }
                         case "deleteWordBackward":
                         case "deleteHardLineBackward":
                         case "deleteSoftLineBackward":

package/dist/esm/plugins/componentEventListeners.js

@@ -1,4 +1,3 @@
-import { Plugin, PluginKey } from "prosemirror-state";
 import { unstable_batchedUpdates as batch } from "react-dom";
 export function componentEventListeners(eventHandlerRegistry) {
     const domEventHandlers = {};
@@ -7,7 +6,7 @@ export function componentEventListeners(eventHandlerRegistry) {
             for (const handler of handlers){
                 let handled = false;
                 batch(()=>{
-                    handled = !!handler.call(this, view, event);
+                    handled = !!handler(view, event);
                 });
                 if (handled || event.defaultPrevented) return true;
             }
@@ -15,11 +14,5 @@ export function componentEventListeners(eventHandlerRegistry) {
         }
         domEventHandlers[eventType] = handleEvent;
     }
-    const plugin = new Plugin({
-        key: new PluginKey("@handlewithcare/react-prosemirror/componentEventListeners"),
-        props: {
-            handleDOMEvents: domEventHandlers
-        }
-    });
-    return plugin;
+    return domEventHandlers;
 }

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

@@ -2,7 +2,13 @@ import { StaticEditorView } from "../../StaticEditorView.js";
 import { ReactProseMirror } from "../extensions/ReactProseMirror.js";
 import { ReactProseMirrorCommands } from "../extensions/ReactProseMirrorCommands.js";
 import { useEditor } from "./useEditor.js";
-export function useTiptapEditor(options, deps) {
+/**
+ * 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 ?? []

package/dist/esm/tiptap/utils/ssrJSDOMPatch.js

@@ -0,0 +1,56 @@
+/**
+ * This file is used to patch global DOM variables in a NodeJS environment.
+ * This is needed for ProseMirror to work in a NodeJS environment.
+ */ if (typeof window === "undefined") {
+    // Make sure to import JSDOM only in a NodeJS environment.
+    // The magic comments prevent bundlers from statically analyzing this require:
+    // - webpackIgnore: true  → webpack / Next.js
+    // - @vite-ignore         → Vite
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const jsdom = require(/* webpackIgnore: true */ /* @vite-ignore */ "jsdom");
+    const html = `
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Testing</title>
+  </head>
+  <body></body>
+</html>
+`;
+    const { window: window1 } = new jsdom.JSDOM(html);
+    global.window = window1;
+    global.document = window1.document;
+    // Use Object.defineProperty for navigator since it's read-only in Node.js 22+
+    Object.defineProperty(global, "navigator", {
+        value: window1.navigator,
+        writable: true,
+        configurable: true
+    });
+    global.innerHeight = 0;
+    global.SVGElement = window1.SVGElement;
+    // @ts-expect-error stub getSelection for SSR
+    document.getSelection = ()=>({});
+    document.createRange = ()=>({
+            setStart () {},
+            setEnd () {},
+            // @ts-expect-error stub getBoundingClientRect for SSR
+            getClientRects () {
+                return {
+                    left: 0,
+                    top: 0,
+                    right: 0,
+                    bottom: 0
+                };
+            },
+            // @ts-expect-error stub getBoundingClientRect for SSR
+            getBoundingClientRect () {
+                return {
+                    left: 0,
+                    top: 0,
+                    right: 0,
+                    bottom: 0
+                };
+            }
+        });
+}
+export { };

package/dist/esm/viewdesc.js

@@ -235,9 +235,7 @@ export class ViewDesc {
                 prev = i ? this.children[i - 1] : null;
                 if (!prev || prev.dom.parentNode == this.contentDOM) break;
             }
-            if (prev && side && enter && !prev.border && !prev.domAtom) {
-                return prev.domFromPos(prev.size, side);
-            }
+            if (prev && side && enter && !prev.border && !prev.domAtom) return prev.domFromPos(prev.size, side);
             return {
                 node: this.contentDOM,
                 offset: prev ? domIndex(prev.dom) + 1 : 0
@@ -372,9 +370,7 @@ export class ViewDesc {
             const after = selRange.focusNode.childNodes[selRange.focusOffset];
             if (after && after.contentEditable == "false") force = true;
         }
-        if (!(force || brKludge && browser.safari) && isEquivalentPosition(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) && isEquivalentPosition(headDOM.node, headDOM.offset, selRange.focusNode, selRange.focusOffset)) {
-            return;
-        }
+        if (!(force || brKludge && browser.safari) && isEquivalentPosition(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) && isEquivalentPosition(headDOM.node, headDOM.offset, selRange.focusNode, selRange.focusOffset)) return;
         // Selection.extend can be used to create an 'inverted' selection
         // (one where the focus is before the anchor), but not all
         // browsers support it yet.
@@ -649,10 +645,7 @@ export class TextViewDesc extends NodeViewDesc {
             skip: skip || true
         };
     }
-    update(node, outerDeco, _innerDeco, _view) {
-        if (this.dirty == NODE_DIRTY || this.dirty != NOT_DIRTY && !this.inParent() || !node.sameMarkup(this.node)) return false;
-        this.updateOuterDeco(outerDeco);
-        this.node = node;
+    update(_node, _outerDeco, _innerDeco, _view) {
         this.dirty = NOT_DIRTY;
         return true;
     }