@handlewithcare/react-prosemirror 3.1.0-tiptap.53 → 3.1.0

package/dist/esm/plugins/beforeInputPlugin.js

@@ -3,7 +3,7 @@ import { Plugin, TextSelection } from "prosemirror-state";
 import { ReactEditorView } from "../ReactEditorView.js";
 import { CursorWrapper } from "../components/CursorWrapper.js";
 import { widget } from "../decorations/ReactWidgetType.js";
-import { TextViewDesc, sortViewDescs } from "../viewdesc.js";
+import { CompositionViewDesc, TextViewDesc, findTextInFragment } from "../viewdesc.js";
 import { reactKeysPluginKey } from "./reactKeys.js";
 function insertText(view, eventData) {
     let options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
@@ -47,36 +47,66 @@ function handleGapCursorComposition(view) {
     tr.setSelection(TextSelection.near(tr.doc.resolve($from.pos + 1)));
     view.dispatch(tr);
 }
+const observeOptions = {
+    childList: true,
+    characterData: true,
+    characterDataOldValue: true,
+    attributes: true,
+    attributeOldValue: true,
+    subtree: true
+};
 export function beforeInputPlugin() {
-    let compositionMarks = null;
+    let observer = null;
+    let preCompositionSnapshot = null;
+    function teardownComposition(view, endedAt) {
+        view.input.composing = false;
+        if (observer) {
+            if (view.input.compositionNode && view.dom.contains(view.input.compositionNode)) {
+                view.domObserver.queue.push(...observer.takeRecords());
+                view.domObserver.flush();
+            } else {
+                const freezeFrom = reactKeysPluginKey.getState(view.state)?.freezeFrom;
+                const frozenNode = freezeFrom == null ? null : view.state.doc.nodeAt(freezeFrom);
+                if (freezeFrom != null && frozenNode != null && preCompositionSnapshot) {
+                    // This is a little hacky — it only works because we always abort
+                    // compositions if the node after freezeFrom changes, so we can
+                    // be sure that if a composition was canceled by the user/browser,
+                    // the content hasn't changed since the composition started
+                    view.dispatch(view.state.tr.replaceWith(freezeFrom + 1, freezeFrom + 1 + frozenNode.content.size, preCompositionSnapshot));
+                }
+            }
+            observer.disconnect();
+            observer = null;
+        }
+        view.input.compositionEndedAt = endedAt;
+        view.input.compositionNode = null;
+        view.input.compositionNodes = [];
+        view.input.compositionID++;
+    }
     return new Plugin({
+        view () {
+            return {
+                update (view) {
+                    if (!(view instanceof ReactEditorView)) return;
+                    const frozen = reactKeysPluginKey.getState(view.state)?.freezeFrom != null;
+                    if (observer && view.composing && !frozen) {
+                        teardownComposition(view, Date.now());
+                    }
+                }
+            };
+        },
         props: {
             handleDOMEvents: {
                 compositionstart (view) {
                     if (!(view instanceof ReactEditorView)) return false;
-                    view.compositionStarting = true;
-                    const { state } = view;
-                    const { selection } = state;
-                    const isEmptyTr = state.tr.delete(selection.from, selection.to);
-                    const $from = isEmptyTr.doc.resolve(isEmptyTr.mapping.map(selection.from));
-                    const isEmptyTextblock = $from.parent.isTextblock && $from.parent.childCount === 0;
-                    compositionMarks = view.state.storedMarks;
-                    // Render a CursorWrapper with empty marks if starting a composition in an
-                    // empty textblock with no marks. This prevents the browser from adding a
-                    // <br> to the text block when it becomes empty (either via canceling the
-                    // composition with the escape key or deleting all composition text when
-                    // the composition node is the only text node in the text block)
-                    if (compositionMarks === null && isEmptyTextblock) {
-                        compositionMarks = [];
-                    }
-                    const tr = view.state.tr.setStoredMarks(null);
-                    view.dispatch(tr);
+                    const storedMarks = view.state.selection.empty ? view.state.storedMarks : view.state.storedMarks ?? (view.state.selection instanceof TextSelection ? view.state.selection.$from.marksAcross(view.state.selection.$to) : null);
+                    view.dispatch(view.state.tr.deleteSelection().setStoredMarks(storedMarks));
                     handleGapCursorComposition(view);
-                    if (compositionMarks) {
+                    if (storedMarks) {
                         view.dispatch(view.state.tr.setMeta(reactKeysPluginKey, {
-                            cursorWrapper: widget(state.selection.from, CursorWrapper, {
+                            cursorWrapper: widget(view.state.selection.from, CursorWrapper, {
                                 key: "cursor-wrapper",
-                                marks: compositionMarks,
+                                marks: storedMarks,
                                 side: 0,
                                 raw: true
                             })
@@ -87,24 +117,38 @@ export function beforeInputPlugin() {
                     // node depending on the user's last navigation direction, and the
                     // IME composes into whichever one it found.
                     } else if (view.state.selection.empty) {
-                        // @ts-expect-error internal method
                         view.domObserver.disconnectSelection();
                         try {
                             view.docView.setSelection(view.state.selection.anchor, view.state.selection.head, view, true // force — skip the isEquivalentPosition early-return
                             );
                         } finally{
-                            // @ts-expect-error internal method
                             view.domObserver.setCurSelection();
-                            // @ts-expect-error internal method
                             view.domObserver.connectSelection();
                         }
                     }
-                    view.compositionStarting = false;
-                    // We set composing to true after creating the cursor wrapper
-                    // so that no existing text nodes try to protect themselves
-                    // while we're creating the cursor wrapper, which may need
-                    // to split a text node.
+                    const freezeFrom = view.state.selection.$from.before();
+                    view.dispatch(view.state.tr.setMeta(reactKeysPluginKey, {
+                        freezeFrom
+                    }));
+                    const frozenDom = view.nodeDOM(freezeFrom);
+                    if (!frozenDom) {
+                        view.dispatch(view.state.tr.setMeta(reactKeysPluginKey, {
+                            cursorWrapper: null,
+                            freezeFrom: null
+                        }));
+                        return false;
+                    }
+                    preCompositionSnapshot = view.state.doc.nodeAt(freezeFrom)?.content ?? null;
                     view.input.composing = true;
+                    observer = new MutationObserver((records)=>{
+                        if (reactKeysPluginKey.getState(view.state)?.freezeFrom == null) {
+                            return;
+                        }
+                        view.domObserver.queue.push(...records);
+                        view.domObserver.flush();
+                        syncCompositionViewDescs(view);
+                    });
+                    observer.observe(frozenDom, observeOptions);
                     return true;
                 },
                 compositionupdate () {
@@ -113,36 +157,11 @@ export function beforeInputPlugin() {
                 compositionend (view, event) {
                     if (!(view instanceof ReactEditorView)) return false;
                     if (!view.composing) return false;
-                    view.input.composing = false;
-                    compositionMarks = null;
-                    for (const displaced of view.displacedNodes){
-                        // Put the displaced TextViewDesc back into its parent's child list.
-                        const parent = displaced.parent;
-                        if (parent && !parent.children.includes(displaced)) {
-                            parent.children.push(displaced);
-                            parent.children.sort(sortViewDescs);
-                        }
-                        // Restore pmViewDesc claim on the text node.
-                        displaced.dom.pmViewDesc = displaced;
-                        // Truncate the IME text node back to what the displaced PM node says it
-                        // is. The composed content lives in PM state; the next React render will
-                        // mount a sibling TextNodeView that inserts its own DOM (e.g.
-                        // `<span class="word">k</span>`) right after this node.
-                        const claimedText = displaced.node.text ?? "";
-                        if (displaced.nodeDOM.nodeValue !== claimedText) {
-                            displaced.nodeDOM.nodeValue = claimedText;
-                        }
-                    }
+                    teardownComposition(view, event.timeStamp);
                     view.dispatch(view.state.tr.setMeta(reactKeysPluginKey, {
-                        cursorWrapper: null
+                        cursorWrapper: null,
+                        freezeFrom: null
                     }));
-                    if (view.input.compositionNode && isCompositionNodeOrphaned(view.input.compositionNode)) {
-                        view.input.compositionNode.remove();
-                    }
-                    view.input.compositionEndedAt = event.timeStamp;
-                    view.input.compositionNode = null;
-                    view.input.compositionNodes = [];
-                    view.input.compositionID++;
                     return true;
                 },
                 beforeinput (view, event) {
@@ -193,63 +212,6 @@ export function beforeInputPlugin() {
                                 insertText(view, event.data);
                                 break;
                             }
-                        case "insertCompositionText":
-                        case "deleteCompositionText":
-                        case "insertFromComposition":
-                            {
-                                if (!(view instanceof ReactEditorView)) break;
-                                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);
-                                }
-                                // When updating a composition within an existing text node,
-                                // we need to avoid remounting it. If the composition is at
-                                // the very beginning of the text node, the start position of
-                                // that node will either be mapped forward (if inserting new
-                                // content) or deleted (if replacing existing content).
-                                //
-                                // This will cause the reactKeys plugin to mint a new key for
-                                // that node, which triggers a remount. So we check to see whether
-                                // we're working on a composition at the very beginning of a text
-                                // node, and if so, tell the react keys plugin not to change the
-                                // key for that node.
-                                //
-                                // We need to check that the marks are the same — if they're not,
-                                // then we're inserting text _before_ this text node, not at the
-                                // start of it, so we actually _do_ want to map the exsting node
-                                // forward.
-                                const $start = view.state.doc.resolve(start);
-                                const $end = view.state.doc.resolve(end);
-                                const marks = compositionMarks ?? $start.marksAcross($end) ?? [];
-                                if ($start.textOffset === 0 && $end.nodeAfter?.marks.every((m)=>m.isInSet(marks))) {
-                                    tr.setMeta(reactKeysPluginKey, {
-                                        overrides: {
-                                            [start]: start
-                                        }
-                                    });
-                                }
-                                view.dom.addEventListener("input", ()=>{
-                                    const sel = view.domSelectionRange();
-                                    if (sel.focusNode && sel.focusNode.nodeType === 3) {
-                                        view.input.compositionNode = sel.focusNode;
-                                    }
-                                    view.dispatch(tr);
-                                }, {
-                                    once: true
-                                });
-                                break;
-                            }
                         case "deleteWordBackward":
                         case "deleteHardLineBackward":
                         case "deleteSoftLineBackward":
@@ -283,11 +245,59 @@ export function beforeInputPlugin() {
         }
     });
 }
-function isCompositionNodeOrphaned(tn) {
-    if (tn.pmViewDesc) return false;
-    for(let parent = tn.parentNode; parent; parent = parent.parentNode){
-        const desc = parent.pmViewDesc;
-        if (desc instanceof TextViewDesc && desc.nodeDOM === tn) return false;
+function syncCompositionViewDescs(view) {
+    const compositionNode = view.domObserver.lastChangedTextNode;
+    if (!compositionNode) return;
+    const freezeFrom = reactKeysPluginKey.getState(view.state)?.freezeFrom;
+    if (freezeFrom == null) return;
+    const compositionBlock = view.state.doc.nodeAt(freezeFrom);
+    if (!compositionBlock) return;
+    const compositionBlockDesc = view.docView.descAt(freezeFrom);
+    if (!compositionBlockDesc) return;
+    const desc = view.docView.nearestDesc(compositionNode);
+    compositionBlockDesc.node = compositionBlock;
+    if (desc instanceof TextViewDesc) {
+        if (compositionNode.nodeValue && desc.node.text !== compositionNode.nodeValue) {
+            desc.node = view.state.schema.text(compositionNode.nodeValue, desc.node.marks);
+            desc.nodeDOM = compositionNode;
+            compositionNode.pmViewDesc = desc;
+        }
+        return;
     }
-    return true;
+    if (desc instanceof CompositionViewDesc) {
+        if (compositionNode.nodeValue != null && desc.text !== compositionNode.nodeValue) {
+            desc.dom = compositionNode;
+            desc.textDOM = compositionNode;
+            desc.text = compositionNode.nodeValue;
+            compositionNode.pmViewDesc = desc;
+        }
+        return;
+    }
+    const parentDesc = desc?.contentDOM ? desc : compositionBlockDesc;
+    const children = parentDesc.children;
+    // Drop any text or composition desc in this container whose DOM the
+    // IME has detached. This covers two cases: a TextViewDesc the IME subsumed
+    // into the composition node, and (on Safari, which replaces the whole text
+    // node on each composition update) any orphaned composition view
+    // desc(s) left over from the previous composition steps.
+    for(let i = children.length - 1; i >= 0; i--){
+        const c = children[i];
+        if (!(c instanceof TextViewDesc) && !(c instanceof CompositionViewDesc)) {
+            continue;
+        }
+        const dom = c.dom;
+        if (view.dom.contains(dom)) continue;
+        children.splice(i, 1);
+    }
+    const contentStart = freezeFrom + 1;
+    const { from, to } = view.state.selection;
+    const textPos = findTextInFragment(compositionBlock.content, compositionNode.nodeValue ?? "", from - contentStart, to - contentStart);
+    if (textPos < 0) return;
+    const startPos = contentStart + textPos;
+    let topDOM = compositionNode;
+    while(topDOM.parentNode && topDOM.parentNode !== parentDesc.contentDOM){
+        topDOM = topDOM.parentNode;
+    }
+    const insertIndex = children.findLastIndex((c)=>c.posBefore <= startPos) + 1;
+    children.splice(insertIndex, 0, new CompositionViewDesc(parentDesc, ()=>startPos, topDOM, compositionNode, compositionNode.nodeValue ?? ""));
 }

package/dist/esm/plugins/reactKeys.js

@@ -20,7 +20,8 @@ export const reactKeysPluginKey = new PluginKey("@handlewithcare/react-prosemirr
                 const next = {
                     posToKey: new Map(),
                     keyToPos: new Map(),
-                    cursorWrapper: null
+                    cursorWrapper: null,
+                    freezeFrom: null
                 };
                 state.doc.descendants((_, pos)=>{
                     const key = createNodeKey();
@@ -37,19 +38,30 @@ export const reactKeysPluginKey = new PluginKey("@handlewithcare/react-prosemirr
        * through the transaction to identify its current position,
        * and assign its key to that new position, dropping it if the
        * node was deleted.
-       */ apply (tr, value, _, newState) {
+       */ apply (tr, value, oldState, newState) {
                 const meta = tr.getMeta(reactKeysPluginKey);
                 const overrides = meta && "overrides" in meta ? meta.overrides : {};
                 const cursorWrapper = meta && "cursorWrapper" in meta ? meta.cursorWrapper : undefined;
+                const freezeFrom = meta && "freezeFrom" in meta ? meta.freezeFrom : undefined;
                 const next = {
                     posToKey: new Map(),
                     keyToPos: new Map(),
-                    cursorWrapper: cursorWrapper === undefined ? value.cursorWrapper ? widget(tr.mapping.map(value.cursorWrapper.from, -1), value.cursorWrapper.type.Component, value.cursorWrapper.spec) : null : cursorWrapper
+                    cursorWrapper: cursorWrapper === undefined ? value.cursorWrapper ? widget(tr.mapping.map(value.cursorWrapper.from, -1), value.cursorWrapper.type.Component, value.cursorWrapper.spec) : null : cursorWrapper,
+                    freezeFrom: freezeFrom === undefined ? value.freezeFrom !== null ? tr.mapping.map(value.freezeFrom, -1) : null : freezeFrom
                 };
+                if (value.freezeFrom !== null && next.freezeFrom !== null && tr.getMeta("composition") == null) {
+                    const oldBlock = oldState.doc.nodeAt(value.freezeFrom);
+                    const newBlock = newState.doc.nodeAt(next.freezeFrom);
+                    if (newBlock && !oldBlock?.eq(newBlock)) {
+                        next.freezeFrom = null;
+                        next.cursorWrapper = null;
+                    }
+                }
                 if (!tr.docChanged) {
                     return {
                         ...value,
-                        cursorWrapper: next.cursorWrapper
+                        cursorWrapper: next.cursorWrapper,
+                        freezeFrom: next.freezeFrom
                     };
                 }
                 const posToKeyEntries = Array.from(value.posToKey.entries()).sort((param, param1)=>{

package/dist/esm/tiptap/ReactProseMirrorNodeView.js

@@ -2,7 +2,7 @@ import { NodeView } from "@tiptap/core";
 /**
  * Subclass of Tiptap's NodeView to be used in tiptapNodeView.
  *
- * Allows us to pass in an existing dom and contentODM from React ProseMirror's
+ * Allows us to pass in an existing dom and contentDOM from React ProseMirror's
  * ViewDesc, so that we can call Tiptap's default stopEvent and ignoreMutation
  * methods
  */ export class ReactProseMirrorNodeView extends NodeView {

package/dist/esm/tiptap/TiptapEditorContent.js

@@ -49,7 +49,14 @@ function getInstance() {
         }
     };
 }
-export function TiptapEditorContent(param) {
+/**
+ * Renders the actual editable ProseMirror document.
+ *
+ * This **must** be passed as a child to the `TiptapEditorView`
+ * component. It may be wrapped in other components, and other
+ * childern may be passed before or after. It must be passed the
+ * same `editor` as is passed to the `TiptapEditorView`.
+ */ export function TiptapEditorContent(param) {
     let { editor: editorProp, ...props } = param;
     const editor = editorProp;
     const { onEditorInitialize, onEditorDeinitialize } = useContext(TiptapEditorContext);

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

@@ -1,5 +1,9 @@
 import { useContext } from "react";
 import { EditorContext } from "../../contexts/EditorContext.js";
-export function useIsInReactProseMirror() {
+/**
+ * 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/tiptapNodeView.js

@@ -23,11 +23,9 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
  *   codeBlock: nodeView({
  *     component: function CodeBlock(nodeViewProps) {
  *       return (
- *         <AnnotatableNodeViewWrapper {...nodeViewProps}>
- *           <pre>
- *             <NodeViewContent as="code" />
- *           </pre>
- *         </AnnotatableNodeViewWrapper>
+ *         <pre>
+ *           <NodeViewContent as="code" />
+ *         </pre>
  *       )
  *     },
  *     extension: CodeBlockExtension,
@@ -84,15 +82,6 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
             return result;
         });
         useIgnoreMutation(function(_, mutation) {
-            if (ignoreMutation) {
-                return ignoreMutation.call({
-                    name: extension.name,
-                    editor,
-                    type: node.type
-                }, {
-                    mutation
-                });
-            }
             if (!editor || !(this.dom instanceof HTMLElement)) return false;
             const nodeView = new ReactProseMirrorNodeView(WrappedComponent, {
                 extension,
@@ -104,6 +93,16 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
                 node,
                 view: editor.view
             }, this.dom, this.contentDOM);
+            if (ignoreMutation) {
+                return ignoreMutation.call({
+                    name: extension.name,
+                    editor,
+                    type: node.type
+                }, {
+                    mutation,
+                    defaultIgnoreMutation: nodeView.ignoreMutation.bind(nodeView)
+                });
+            }
             return nodeView.ignoreMutation(mutation) ?? false;
         });
         const { extraClassName, htmlProps } = useMemo(()=>{

package/dist/esm/viewdesc.js

@@ -382,7 +382,7 @@ export class ViewDesc {
             const after = selRange.focusNode.childNodes[selRange.focusOffset];
             if (after && after.contentEditable == "false") force = true;
         }
-        if (view.composing || !(force || brKludge && browser.safari) && isEquivalentPosition(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) && isEquivalentPosition(headDOM.node, headDOM.offset, selRange.focusNode, selRange.focusOffset)) {
+        if (view.cursorWrapped || !(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
@@ -691,6 +691,9 @@ export class TextViewDesc extends NodeViewDesc {
     isText(text) {
         return this.node.text == text;
     }
+    ignoreMutation(mutation) {
+        return mutation.type !== "characterData" && mutation.type !== "selection";
+    }
 }
 // A dummy desc used to tag trailing BR or IMG nodes created to work
 // around contentEditable terribleness.