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

package/dist/esm/plugins/beforeInputPlugin.js

@@ -1,5 +1,6 @@
 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) {
@@ -46,68 +47,41 @@ function handleGapCursorComposition(view) {
 }
 export function beforeInputPlugin(setCursorWrapper) {
     let compositionMarks = null;
-    let precompositionSnapshot = null;
     return new Plugin({
         props: {
             handleDOMEvents: {
                 compositionstart (view) {
-                    compositionMarks = view.state.storedMarks ?? view.state.selection.$from.marks();
-                    view.dispatch(view.state.tr.deleteSelection());
+                    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);
                     handleGapCursorComposition(view);
                     const { state } = view;
-                    const $pos = state.selection.$from;
-                    if (compositionMarks) {
+                    if (compositionMarks?.length) {
                         setCursorWrapper(widget(state.selection.from, CursorWrapper, {
                             key: "cursor-wrapper",
-                            marks: compositionMarks
+                            marks: compositionMarks,
+                            side: 1
                         }));
                     }
-                    // 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) {
-                    // @ts-expect-error Internal property - input
+                    if (!(view instanceof ReactEditorView)) return false;
+                    if (!view.composing) return false;
                     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) {
@@ -156,6 +130,30 @@ 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/viewdesc.js

@@ -235,7 +235,9 @@ 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
@@ -370,7 +372,9 @@ 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.
@@ -645,7 +649,10 @@ export class TextViewDesc extends NodeViewDesc {
             skip: skip || true
         };
     }
-    update(_node, _outerDeco, _innerDeco, _view) {
+    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;
         this.dirty = NOT_DIRTY;
         return true;
     }