@handlewithcare/react-prosemirror 3.1.0-tiptap.43 → 3.1.0-tiptap.45

package/dist/cjs/components/ChildNodeViews.js

@@ -244,7 +244,9 @@ function adjustWidgetMarksBack(widgetChildren, nodeChild) {
         const child = widgetChildren[i];
         if (// Using internal Decoration property, "type"
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        child.widget.type.side < 0) {
+        child.widget.type.side < 0 || // Using internal Decoration property, "type"
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        child.widget.type.spec.marks) {
             continue;
         }
         child.marks = child.marks.reduce((acc, mark)=>mark.addToSet(acc), marksToSpread);

package/dist/cjs/components/CursorWrapper.js

@@ -54,7 +54,6 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const CursorWrapper = /*#__PURE__*/ (0, _react.forwardRef)(function CursorWrapper(param, ref) {
     let { widget, getPos, ...props } = param;
-    const [shouldRender, setShouldRender] = (0, _react.useState)(true);
     const innerRef = (0, _react.useRef)(null);
     (0, _react.useImperativeHandle)(ref, ()=>{
         return innerRef.current;
@@ -65,27 +64,23 @@ const CursorWrapper = /*#__PURE__*/ (0, _react.forwardRef)(function CursorWrappe
         view.domObserver.disconnectSelection();
         // @ts-expect-error Internal property - domSelection
         const domSel = view.domSelection();
-        const range = document.createRange();
         const node = innerRef.current;
         const img = node.nodeName == "IMG";
-        if (img && node.parentNode) {
-            range.setEnd(node.parentNode, (0, _dom.domIndex)(node) + 1);
+        if (img) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            domSel.collapse(node.parentNode, (0, _dom.domIndex)(node) + 1);
         } else {
-            range.setEnd(node, 0);
+            domSel.collapse(node, 0);
         }
-        range.collapse(false);
-        domSel.removeAllRanges();
-        domSel.addRange(range);
-        setShouldRender(false);
         // @ts-expect-error Internal property - domObserver
         view.domObserver.connectSelection();
     }, []);
-    return shouldRender ? /*#__PURE__*/ _react.default.createElement("img", {
+    return /*#__PURE__*/ _react.default.createElement("img", {
         ref: innerRef,
         className: "ProseMirror-separator",
         // eslint-disable-next-line react/no-unknown-property
         "mark-placeholder": "true",
         alt: "",
         ...props
-    }) : null;
+    });
 });

package/dist/cjs/components/ProseMirror.js

@@ -73,7 +73,7 @@ const rootChildDescriptionsContextValue = {
 function ProseMirrorInner(param) {
     let { children, nodeViewComponents, markViewComponents, ...props } = param;
     const [mount, setMount] = (0, _react.useState)(null);
-    const { editor, state } = (0, _useEditor.useEditor)(mount, props);
+    const { editor, cursorWrapper, state } = (0, _useEditor.useEditor)(mount, props);
     const nodeViewConstructors = editor.view.nodeViews;
     const nodeViewContextValue = (0, _react.useMemo)(()=>{
         return {
@@ -90,7 +90,7 @@ function ProseMirrorInner(param) {
     ]);
     const node = state.doc;
     const decorations = (0, _computeDocDeco.computeDocDeco)(editor.view);
-    const innerDecorations = (0, _viewDecorations.viewDecorations)(editor.view, editor.cursorWrapper);
+    const innerDecorations = (0, _viewDecorations.viewDecorations)(editor.view, cursorWrapper);
     const docNodeViewContextValue = (0, _react.useMemo)(()=>({
             setMount,
             node,

package/dist/cjs/hooks/useEditor.js

@@ -113,13 +113,11 @@ function useEditor(mount, options) {
     view.update(directEditorProps);
     const editor = (0, _react.useMemo)(()=>({
             view,
-            cursorWrapper,
             flushSyncRef,
             registerEventListener,
             unregisterEventListener,
             isStatic: options.static ?? false
         }), [
-        cursorWrapper,
         options.static,
         registerEventListener,
         unregisterEventListener,
@@ -127,6 +125,7 @@ function useEditor(mount, options) {
     ]);
     return {
         editor,
+        cursorWrapper,
         state
     };
 }

package/dist/cjs/plugins/beforeInputPlugin.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "beforeInputPlugin", {
         return beforeInputPlugin;
     }
 });
+const _prosemirrormodel = require("prosemirror-model");
 const _prosemirrorstate = require("prosemirror-state");
 const _CursorWrapper = require("../components/CursorWrapper.js");
 const _ReactWidgetType = require("../decorations/ReactWidgetType.js");
@@ -25,6 +26,34 @@ function insertText(view, eventData) {
     view.dispatch(tr);
     return true;
 }
+// Taken from https://github.com/ProseMirror/prosemirror-gapcursor/blob/master/src/index.ts#L67-L84
+// This is a hack that, when a composition starts while a gap cursor
+// is active, quickly creates an inline context for the composition to
+// happen in, to avoid it being aborted by the DOM selection being
+// moved into a valid position.
+//
+// We can't rely on the actual hack from prosemirror-gapcursor, because
+// it happens too late. We snapshot the DOM during compositionstart, but
+// the gapcursor hack runs in beforeinput (after compositionstart).
+function handleGapCursorComposition(view) {
+    // @ts-expect-error Internal property - jsonID
+    if (!(view.state.selection.jsonID === "gapcursor")) {
+        return;
+    }
+    const { $from } = view.state.selection;
+    const insert = $from.parent.contentMatchAt($from.index())// All schemas _must_ have a text node type
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    .findWrapping(view.state.schema.nodes.text);
+    if (!insert) return;
+    let fragment = _prosemirrormodel.Fragment.empty;
+    for(let i = insert.length - 1; i >= 0; i--){
+        fragment = _prosemirrormodel.Fragment.from(// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        insert[i].createAndFill(null, fragment));
+    }
+    const tr = view.state.tr.replace($from.pos, $from.pos, new _prosemirrormodel.Slice(fragment, 0, 0));
+    tr.setSelection(_prosemirrorstate.TextSelection.near(tr.doc.resolve($from.pos + 1)));
+    view.dispatch(tr);
+}
 function beforeInputPlugin(setCursorWrapper) {
     let compositionMarks = null;
     let precompositionSnapshot = null;
@@ -32,10 +61,11 @@ function beforeInputPlugin(setCursorWrapper) {
         props: {
             handleDOMEvents: {
                 compositionstart (view) {
+                    compositionMarks = view.state.storedMarks ?? view.state.selection.$from.marks();
+                    view.dispatch(view.state.tr.deleteSelection());
+                    handleGapCursorComposition(view);
                     const { state } = view;
-                    view.dispatch(state.tr.deleteSelection());
                     const $pos = state.selection.$from;
-                    compositionMarks = state.storedMarks ?? $pos.marks();
                     if (compositionMarks) {
                         setCursorWrapper((0, _ReactWidgetType.widget)(state.selection.from, _CursorWrapper.CursorWrapper, {
                             key: "cursor-wrapper",

package/dist/cjs/testing/editorViewTestHelpers.js

@@ -51,7 +51,7 @@ function tempEditor(param) {
     const state = _prosemirrorstate.EditorState.create({
         doc: startDoc,
         schema: _prosemirrortestbuilder.schema,
-        selection: selection ?? startDoc.tag?.a ? _prosemirrorstate.TextSelection.create(startDoc, startDoc.tag.a, startDoc.tag?.b) : undefined,
+        selection: selection ?? (startDoc.tag?.a ? _prosemirrorstate.TextSelection.create(startDoc, startDoc.tag.a, startDoc.tag?.b) : undefined),
         plugins: [
             ...plugins ?? [],
             (0, _reactKeys.reactKeys)()

package/dist/cjs/tiptap/tiptapNodeView.js

@@ -163,9 +163,8 @@ function tiptapNodeView(param) {
             editor.commands.command((param)=>{
                 let { tr } = param;
                 const pos = getPos();
-                tr.setNodeMarkup(pos, undefined, {
-                    ...node.attrs,
-                    ...attributes
+                Object.keys(attributes).forEach((key)=>{
+                    tr.setNodeAttribute(pos, key, attributes[key]);
                 });
                 return true;
             });

package/dist/esm/components/ChildNodeViews.js

@@ -185,7 +185,9 @@ function adjustWidgetMarksBack(widgetChildren, nodeChild) {
         const child = widgetChildren[i];
         if (// Using internal Decoration property, "type"
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        child.widget.type.side < 0) {
+        child.widget.type.side < 0 || // Using internal Decoration property, "type"
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        child.widget.type.spec.marks) {
             continue;
         }
         child.marks = child.marks.reduce((acc, mark)=>mark.addToSet(acc), marksToSpread);

package/dist/esm/components/CursorWrapper.js

@@ -1,9 +1,8 @@
-import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { domIndex } from "../dom.js";
 import { useEditorEffect } from "../hooks/useEditorEffect.js";
 export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(param, ref) {
     let { widget, getPos, ...props } = param;
-    const [shouldRender, setShouldRender] = useState(true);
     const innerRef = useRef(null);
     useImperativeHandle(ref, ()=>{
         return innerRef.current;
@@ -14,27 +13,23 @@ export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(par
         view.domObserver.disconnectSelection();
         // @ts-expect-error Internal property - domSelection
         const domSel = view.domSelection();
-        const range = document.createRange();
         const node = innerRef.current;
         const img = node.nodeName == "IMG";
-        if (img && node.parentNode) {
-            range.setEnd(node.parentNode, domIndex(node) + 1);
+        if (img) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            domSel.collapse(node.parentNode, domIndex(node) + 1);
         } else {
-            range.setEnd(node, 0);
+            domSel.collapse(node, 0);
         }
-        range.collapse(false);
-        domSel.removeAllRanges();
-        domSel.addRange(range);
-        setShouldRender(false);
         // @ts-expect-error Internal property - domObserver
         view.domObserver.connectSelection();
     }, []);
-    return shouldRender ? /*#__PURE__*/ React.createElement("img", {
+    return /*#__PURE__*/ React.createElement("img", {
         ref: innerRef,
         className: "ProseMirror-separator",
         // eslint-disable-next-line react/no-unknown-property
         "mark-placeholder": "true",
         alt: "",
         ...props
-    }) : null;
+    });
 });

package/dist/esm/components/ProseMirror.js

@@ -22,7 +22,7 @@ const rootChildDescriptionsContextValue = {
 function ProseMirrorInner(param) {
     let { children, nodeViewComponents, markViewComponents, ...props } = param;
     const [mount, setMount] = useState(null);
-    const { editor, state } = useEditor(mount, props);
+    const { editor, cursorWrapper, state } = useEditor(mount, props);
     const nodeViewConstructors = editor.view.nodeViews;
     const nodeViewContextValue = useMemo(()=>{
         return {
@@ -39,7 +39,7 @@ function ProseMirrorInner(param) {
     ]);
     const node = state.doc;
     const decorations = computeDocDeco(editor.view);
-    const innerDecorations = viewDecorations(editor.view, editor.cursorWrapper);
+    const innerDecorations = viewDecorations(editor.view, cursorWrapper);
     const docNodeViewContextValue = useMemo(()=>({
             setMount,
             node,

package/dist/esm/hooks/useEditor.js

@@ -111,13 +111,11 @@ let didWarnValueDefaultValue = false;
     view.update(directEditorProps);
     const editor = useMemo(()=>({
             view,
-            cursorWrapper,
             flushSyncRef,
             registerEventListener,
             unregisterEventListener,
             isStatic: options.static ?? false
         }), [
-        cursorWrapper,
         options.static,
         registerEventListener,
         unregisterEventListener,
@@ -125,6 +123,7 @@ let didWarnValueDefaultValue = false;
     ]);
     return {
         editor,
+        cursorWrapper,
         state
     };
 }

package/dist/esm/plugins/beforeInputPlugin.js

@@ -1,4 +1,5 @@
-import { Plugin } from "prosemirror-state";
+import { Fragment, Slice } from "prosemirror-model";
+import { Plugin, TextSelection } from "prosemirror-state";
 import { CursorWrapper } from "../components/CursorWrapper.js";
 import { widget } from "../decorations/ReactWidgetType.js";
 function insertText(view, eventData) {
@@ -15,6 +16,34 @@ function insertText(view, eventData) {
     view.dispatch(tr);
     return true;
 }
+// Taken from https://github.com/ProseMirror/prosemirror-gapcursor/blob/master/src/index.ts#L67-L84
+// This is a hack that, when a composition starts while a gap cursor
+// is active, quickly creates an inline context for the composition to
+// happen in, to avoid it being aborted by the DOM selection being
+// moved into a valid position.
+//
+// We can't rely on the actual hack from prosemirror-gapcursor, because
+// it happens too late. We snapshot the DOM during compositionstart, but
+// the gapcursor hack runs in beforeinput (after compositionstart).
+function handleGapCursorComposition(view) {
+    // @ts-expect-error Internal property - jsonID
+    if (!(view.state.selection.jsonID === "gapcursor")) {
+        return;
+    }
+    const { $from } = view.state.selection;
+    const insert = $from.parent.contentMatchAt($from.index())// All schemas _must_ have a text node type
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    .findWrapping(view.state.schema.nodes.text);
+    if (!insert) return;
+    let fragment = Fragment.empty;
+    for(let i = insert.length - 1; i >= 0; i--){
+        fragment = Fragment.from(// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        insert[i].createAndFill(null, fragment));
+    }
+    const tr = view.state.tr.replace($from.pos, $from.pos, new Slice(fragment, 0, 0));
+    tr.setSelection(TextSelection.near(tr.doc.resolve($from.pos + 1)));
+    view.dispatch(tr);
+}
 export function beforeInputPlugin(setCursorWrapper) {
     let compositionMarks = null;
     let precompositionSnapshot = null;
@@ -22,10 +51,11 @@ export function beforeInputPlugin(setCursorWrapper) {
         props: {
             handleDOMEvents: {
                 compositionstart (view) {
+                    compositionMarks = view.state.storedMarks ?? view.state.selection.$from.marks();
+                    view.dispatch(view.state.tr.deleteSelection());
+                    handleGapCursorComposition(view);
                     const { state } = view;
-                    view.dispatch(state.tr.deleteSelection());
                     const $pos = state.selection.$from;
-                    compositionMarks = state.storedMarks ?? $pos.marks();
                     if (compositionMarks) {
                         setCursorWrapper(widget(state.selection.from, CursorWrapper, {
                             key: "cursor-wrapper",

package/dist/esm/testing/editorViewTestHelpers.js

@@ -28,7 +28,7 @@ export function tempEditor(param) {
     const state = EditorState.create({
         doc: startDoc,
         schema,
-        selection: selection ?? startDoc.tag?.a ? TextSelection.create(startDoc, startDoc.tag.a, startDoc.tag?.b) : undefined,
+        selection: selection ?? (startDoc.tag?.a ? TextSelection.create(startDoc, startDoc.tag.a, startDoc.tag?.b) : undefined),
         plugins: [
             ...plugins ?? [],
             reactKeys()

package/dist/esm/tiptap/tiptapNodeView.js

@@ -131,9 +131,8 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
             editor.commands.command((param)=>{
                 let { tr } = param;
                 const pos = getPos();
-                tr.setNodeMarkup(pos, undefined, {
-                    ...node.attrs,
-                    ...attributes
+                Object.keys(attributes).forEach((key)=>{
+                    tr.setNodeAttribute(pos, key, attributes[key]);
                 });
                 return true;
             });