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

package/dist/esm/plugins/reactKeys.js

@@ -1,4 +1,6 @@
 import { Plugin, PluginKey } from "prosemirror-state";
+import { DecorationSet } from "prosemirror-view";
+import { widget } from "../decorations/ReactWidgetType.js";
 export function createNodeKey() {
     const key = Math.floor(Math.random() * 0xffffffffffff).toString(16);
     return key;
@@ -11,14 +13,15 @@ export const reactKeysPluginKey = new PluginKey("@handlewithcare/react-prosemirr
  * key for a given node can be accessed by that node's
  * current position in the document, and vice versa.
  */ export function reactKeys() {
-    let composing = false;
     return new Plugin({
         key: reactKeysPluginKey,
         state: {
             init (_, state) {
                 const next = {
                     posToKey: new Map(),
-                    keyToPos: new Map()
+                    keyToPos: new Map(),
+                    cursorWrapper: null,
+                    freezeFrom: null
                 };
                 state.doc.descendants((_, pos)=>{
                     const key = createNodeKey();
@@ -35,15 +38,32 @@ 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) {
-                if (!tr.docChanged || composing) {
-                    return value;
-                }
-                const overrides = tr.getMeta(reactKeysPluginKey)?.overrides;
+       */ 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()
+                    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,
+                    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,
+                        freezeFrom: next.freezeFrom
+                    };
+                }
                 const posToKeyEntries = Array.from(value.posToKey.entries()).sort((param, param1)=>{
                     let [a] = param, [b] = param1;
                     return a - b;
@@ -69,13 +89,12 @@ export const reactKeysPluginKey = new PluginKey("@handlewithcare/react-prosemirr
             }
         },
         props: {
-            handleDOMEvents: {
-                compositionstart: ()=>{
-                    composing = true;
-                },
-                compositionend: ()=>{
-                    composing = false;
-                }
+            decorations (state) {
+                const deco = reactKeysPluginKey.getState(state)?.cursorWrapper;
+                if (!deco) return DecorationSet.empty;
+                return DecorationSet.create(state.doc, [
+                    deco
+                ]);
             }
         }
     });

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

@@ -16,7 +16,17 @@ import { domIndex, isEquivalentPosition } from "./dom.js";
 export function sortViewDescs(a, b) {
     if (a instanceof TrailingHackViewDesc) return 1;
     if (b instanceof TrailingHackViewDesc) return -1;
-    return a.getPos() - b.getPos();
+    const posDiff = a.getPos() - b.getPos();
+    if (posDiff !== 0) return posDiff;
+    // When two descs share the same PM position (e.g. a zero-width widget
+    // and a text node that starts at the same position), fall back to DOM
+    // order so that the viewdesc children match the actual DOM layout.
+    // Without this, position computations like `posBeforeChild` can return
+    // the wrong PM position for the widget's container.
+    const cmp = a.dom.compareDocumentPosition(b.dom);
+    if (cmp & 4 /* DOCUMENT_POSITION_FOLLOWING */ ) return -1;
+    if (cmp & 2 /* DOCUMENT_POSITION_PRECEDING */ ) return 1;
+    return 0;
 }
 const NOT_DIRTY = 0, CHILD_DIRTY = 1, CONTENT_DIRTY = 2, NODE_DIRTY = 3;
 // Superclass for the various kinds of descriptions. Defines their
@@ -235,7 +245,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 +382,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 (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
         // (one where the focus is before the anchor), but not all
         // browsers support it yet.
@@ -645,7 +659,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;
     }
@@ -674,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.
@@ -763,3 +783,33 @@ export function sameOuterDeco(a, b) {
     for(let i = 0; i < a.length; i++)if (!a[i].type.eq(b[i].type)) return false;
     return true;
 }
+// Find a piece of text in an inline fragment, overlapping from-to.
+// Ported from prosemirror-view's findTextInFragment.
+export function findTextInFragment(frag, text, from, to) {
+    for(let i = 0, pos = 0; i < frag.childCount && pos <= to;){
+        const child = frag.child(i++);
+        const childStart = pos;
+        pos += child.nodeSize;
+        if (!child.isText) continue;
+        let str = child.text;
+        while(i < frag.childCount){
+            const next = frag.child(i++);
+            pos += next.nodeSize;
+            if (!next.isText) break;
+            str += next.text;
+        }
+        if (pos >= from) {
+            if (pos >= to && str.slice(to - text.length - childStart, to - childStart) === text) {
+                return to - text.length;
+            }
+            const found = childStart < to ? str.lastIndexOf(text, to - childStart - 1) : -1;
+            if (found >= 0 && found + text.length + childStart >= from) {
+                return childStart + found;
+            }
+            if (from === to && str.length >= to + text.length - childStart && str.slice(to - childStart, to - childStart + text.length) === text) {
+                return to;
+            }
+        }
+    }
+    return -1;
+}