@handlewithcare/react-prosemirror 3.1.0-tiptap.30 → 3.1.0-tiptap.31

package/dist/cjs/components/marks/MarkViewConstructorView.js

@@ -12,6 +12,7 @@ const _prosemirrormodel = require("prosemirror-model");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _reactdom = require("react-dom");
 const _ChildDescriptionsContext = require("../../contexts/ChildDescriptionsContext.js");
+const _useForceUpdate = require("../../hooks/useForceUpdate.js");
 const _useMarkViewDescription = require("../../hooks/useMarkViewDescription.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -58,6 +59,7 @@ const MarkViewConstructorView = /*#__PURE__*/ (0, _react.memo)(function MarkView
     let { constructor, mark, inline, getPos, children } = param;
     const ref = (0, _react.useRef)(null);
     const innerRef = (0, _react.useRef)(null);
+    const forceUpdate = (0, _useForceUpdate.useForceUpdate)();
     const markProps = (0, _react.useMemo)(()=>({
             mark,
             inline,
@@ -84,13 +86,17 @@ const MarkViewConstructorView = /*#__PURE__*/ (0, _react.memo)(function MarkView
         }
         return markView;
     };
-    const { childContextValue, contentDOM } = (0, _useMarkViewDescription.useMarkViewDescription)(ref, function() {
+    const { childContextValue, contentDOM } = (0, _useMarkViewDescription.useMarkViewDescription)(()=>ref.current, (markView)=>markView?.contentDOM ?? null, function() {
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
         const markView = createMarkView(...args);
         const dom = markView.dom;
         const wrapperDOM = innerRef.current ?? ref.current;
+        wrapperDOM.appendChild(dom);
+        // Force a re-render so that we properly create
+        // a portal into the contentDOM/dom
+        forceUpdate();
         return {
             ...markView,
             destroy () {
@@ -99,7 +105,7 @@ const MarkViewConstructorView = /*#__PURE__*/ (0, _react.memo)(function MarkView
             },
             ignoreMutation: markView.ignoreMutation
         };
-    }, (markView)=>markView?.contentDOM ?? null, markProps);
+    }, markProps);
     const Component = inline ? "span" : "div";
     const props = {
         ref: innerRef

package/dist/cjs/components/marks/ReactMarkView.js

@@ -67,17 +67,16 @@ const ReactMarkView = /*#__PURE__*/ (0, _react.memo)(function ReactMarkView(para
             };
         };
     }, []);
-    const markProps = (0, _react.useMemo)(()=>({
+    const markViewDescProps = (0, _react.useMemo)(()=>({
             mark,
             getPos,
-            inline,
-            contentDOMRef
+            inline
         }), [
         getPos,
         inline,
         mark
     ]);
-    const { childContextValue } = (0, _useMarkViewDescription.useMarkViewDescription)(ref, ()=>({
+    const { childContextValue, refUpdated } = (0, _useMarkViewDescription.useMarkViewDescription)(()=>ref.current, ()=>contentDOMRef.current ?? ref.current, ()=>({
             dom: ref.current,
             ignoreMutation (mutation) {
                 const ignoreMutation = ignoreMutationRef.current;
@@ -86,10 +85,29 @@ const ReactMarkView = /*#__PURE__*/ (0, _react.memo)(function ReactMarkView(para
                 }
                 return false;
             }
-        }), ()=>contentDOMRef.current ?? ref.current, markProps);
+        }), markViewDescProps);
+    const setDOM = (0, _react.useCallback)((el)=>{
+        ref.current = el;
+        refUpdated();
+    }, [
+        refUpdated
+    ]);
+    const setContentDOM = (0, _react.useCallback)((el)=>{
+        contentDOMRef.current = el;
+        refUpdated();
+    }, [
+        refUpdated
+    ]);
+    const markProps = (0, _react.useMemo)(()=>({
+            ...markViewDescProps,
+            contentDOMRef: setContentDOM
+        }), [
+        markViewDescProps,
+        setContentDOM
+    ]);
     const props = {
         markProps,
-        ref
+        ref: setDOM
     };
     return /*#__PURE__*/ _react.default.createElement(_IgnoreMutationContext.IgnoreMutationContext.Provider, {
         value: setIgnoreMutation

package/dist/cjs/hooks/useMarkViewDescription.js

@@ -15,18 +15,17 @@ const _EditorContext = require("../contexts/EditorContext.js");
 const _viewdesc = require("../viewdesc.js");
 const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
 const _useEffectEvent = require("./useEffectEvent.js");
-function useMarkViewDescription(ref, constructor, getContentDOM, props) {
+function useMarkViewDescription(getDOM, getContentDOM, constructor, props) {
     const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
     const { parentRef, siblingsRef } = (0, _react.useContext)(_ChildDescriptionsContext.ChildDescriptionsContext);
-    const [dom, setDOM] = (0, _react.useState)(null);
-    const [contentDOM, setContentDOM] = (0, _react.useState)(null);
+    const contentDOMRef = (0, _react.useRef)(null);
     const viewDescRef = (0, _react.useRef)();
     const childrenRef = (0, _react.useRef)([]);
     const create = (0, _useEffectEvent.useEffectEvent)(()=>{
         if (!(view instanceof _ReactEditorView.ReactEditorView)) {
             return;
         }
-        const dom = ref.current;
+        const dom = getDOM();
         if (!dom) {
             return;
         }
@@ -38,9 +37,8 @@ function useMarkViewDescription(ref, constructor, getContentDOM, props) {
         const parent = parentRef.current;
         const children = childrenRef.current;
         const contentDOM = getContentDOM(markView);
-        const viewDesc = new _viewdesc.MarkViewDesc(parent, children, getPos, mark, dom, contentDOM ?? dom, markView);
-        setDOM(dom);
-        setContentDOM(contentDOM);
+        const viewDesc = new _viewdesc.ReactMarkViewDesc(parent, children, getPos, mark, dom, contentDOM ?? markView.dom, markView);
+        contentDOMRef.current = contentDOM;
         return viewDesc;
     });
     const update = (0, _useEffectEvent.useEffectEvent)(()=>{
@@ -51,7 +49,7 @@ function useMarkViewDescription(ref, constructor, getContentDOM, props) {
         if (!viewDesc) {
             return false;
         }
-        const dom = ref.current;
+        const dom = getDOM();
         if (!dom || dom !== viewDesc.dom) {
             return false;
         }
@@ -73,8 +71,7 @@ function useMarkViewDescription(ref, constructor, getContentDOM, props) {
             const index = siblings.indexOf(viewDesc);
             siblings.splice(index, 1);
         }
-        setDOM(null);
-        setContentDOM(null);
+        contentDOMRef.current = null;
     });
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
         viewDescRef.current = create();
@@ -85,6 +82,16 @@ function useMarkViewDescription(ref, constructor, getContentDOM, props) {
         create,
         destroy
     ]);
+    const refUpdated = (0, _react.useCallback)(()=>{
+        if (!update()) {
+            destroy();
+            viewDescRef.current = create();
+        }
+    }, [
+        create,
+        destroy,
+        update
+    ]);
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
         if (!update()) {
             destroy();
@@ -115,8 +122,7 @@ function useMarkViewDescription(ref, constructor, getContentDOM, props) {
     ]);
     return {
         childContextValue,
-        dom,
-        contentDOM,
-        ref
+        contentDOM: contentDOMRef.current ?? viewDescRef.current?.dom,
+        refUpdated
     };
 }

package/dist/cjs/hooks/useNodeViewDescriptor.js

@@ -15,7 +15,12 @@ const _EditorContext = require("../contexts/EditorContext.js");
 const _viewdesc = require("../viewdesc.js");
 const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
 const _useEffectEvent = require("./useEffectEvent.js");
-function useNodeViewDescriptor(ref, constructor, findContentDOM, props) {
+function findContentDOM(view, source, children) {
+    // When a composition is happening, we want to essentially freeze everything,
+    // so we maintain the current contentDOM.
+    return view.composing ? source?.contentDOM ?? null : children[0]?.dom?.parentElement ?? null;
+}
+function useNodeViewDescriptor(ref, constructor, props) {
     const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
     const { parentRef, siblingsRef } = (0, _react.useContext)(_ChildDescriptorsContext.ChildDescriptorsContext);
     const [dom, setDOM] = (0, _react.useState)(null);
@@ -38,7 +43,7 @@ function useNodeViewDescriptor(ref, constructor, findContentDOM, props) {
         }
         const parent = parentRef.current;
         const children = childrenRef.current;
-        const contentDOM = findContentDOM(nodeView, children);
+        const contentDOM = findContentDOM(view, nodeView, children);
         const nodeDOM = nodeView.dom;
         const viewDesc = new _viewdesc.ReactNodeViewDesc(parent, children, getPos, node, decorations, innerDecorations, dom, contentDOM, nodeDOM, nodeView);
         setDOM(dom);
@@ -58,7 +63,7 @@ function useNodeViewDescriptor(ref, constructor, findContentDOM, props) {
         if (!dom || dom !== viewDesc.dom) {
             return false;
         }
-        const contentDOM = findContentDOM(viewDesc, viewDesc.children);
+        const contentDOM = findContentDOM(view, viewDesc, viewDesc.children);
         if (contentDOM !== viewDesc.contentDOM) {
             return false;
         }

package/dist/cjs/tiptap/TiptapNodeView.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ReactProseMirrorNodeView", {
+    enumerable: true,
+    get: function() {
+        return ReactProseMirrorNodeView;
+    }
+});
+const _core = require("@tiptap/core");
+let ReactProseMirrorNodeView = class ReactProseMirrorNodeView extends _core.NodeView {
+    _dom;
+    _contentDOM;
+    constructor(component, props, dom, contentDOM, options){
+        super(component, props, options);
+        this._dom = dom;
+        this._contentDOM = contentDOM;
+    }
+    get dom() {
+        return this._dom;
+    }
+    get contentDOM() {
+        return this._contentDOM;
+    }
+};

package/dist/cjs/tiptap/extensions/ReactProseMirrorCommands.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "ReactProseMirrorCommands", {
 const _core = require("@tiptap/core");
 const _updateAttributes = require("./commands/updateAttributes.js");
 const ReactProseMirrorCommands = _core.Extension.create({
-    name: "commands",
+    name: "reactProseMirrorCommands",
     addCommands () {
         return {
             ..._core.commands,

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

@@ -22,6 +22,10 @@ function useTiptapEditor(options, deps) {
     if (options.enableCoreExtensions === false || typeof options.enableCoreExtensions === "object" && options?.enableCoreExtensions?.commands === false) {
     // Do nothing
     } else {
+        options.enableCoreExtensions = {
+            ...typeof options.enableCoreExtensions === "object" ? options.enableCoreExtensions : {},
+            commands: false
+        };
         extensions.push(_ReactProseMirrorCommands.ReactProseMirrorCommands);
     }
     const editor = (0, _react.useEditor)({

package/dist/cjs/viewdesc.js

@@ -18,6 +18,9 @@ _export(exports, {
     NodeViewDesc: function() {
         return NodeViewDesc;
     },
+    ReactMarkViewDesc: function() {
+        return ReactMarkViewDesc;
+    },
     ReactNodeViewDesc: function() {
         return ReactNodeViewDesc;
     },
@@ -743,6 +746,13 @@ let CustomNodeViewDesc = class CustomNodeViewDesc extends NodeViewDesc {
         return this.spec.ignoreMutation ? this.spec.ignoreMutation.call(this, mutation) : super.ignoreMutation(mutation);
     }
 };
+let ReactMarkViewDesc = class ReactMarkViewDesc extends MarkViewDesc {
+    destroy() {
+        // React has already destroyed the children (if needed).
+        this.children = [];
+        super.destroy();
+    }
+};
 let ReactNodeViewDesc = class ReactNodeViewDesc extends CustomNodeViewDesc {
     updateChildren(_view, _pos) {
     // React has already updated the children.

package/dist/esm/components/marks/MarkViewConstructorView.js

@@ -2,11 +2,13 @@ import { DOMSerializer } from "prosemirror-model";
 import React, { memo, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
 import { ChildDescriptionsContext } from "../../contexts/ChildDescriptionsContext.js";
+import { useForceUpdate } from "../../hooks/useForceUpdate.js";
 import { useMarkViewDescription } from "../../hooks/useMarkViewDescription.js";
 export const MarkViewConstructorView = /*#__PURE__*/ memo(function MarkViewConstructorView(param) {
     let { constructor, mark, inline, getPos, children } = param;
     const ref = useRef(null);
     const innerRef = useRef(null);
+    const forceUpdate = useForceUpdate();
     const markProps = useMemo(()=>({
             mark,
             inline,
@@ -33,13 +35,17 @@ export const MarkViewConstructorView = /*#__PURE__*/ memo(function MarkViewConst
         }
         return markView;
     };
-    const { childContextValue, contentDOM } = useMarkViewDescription(ref, function() {
+    const { childContextValue, contentDOM } = useMarkViewDescription(()=>ref.current, (markView)=>markView?.contentDOM ?? null, function() {
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
         const markView = createMarkView(...args);
         const dom = markView.dom;
         const wrapperDOM = innerRef.current ?? ref.current;
+        wrapperDOM.appendChild(dom);
+        // Force a re-render so that we properly create
+        // a portal into the contentDOM/dom
+        forceUpdate();
         return {
             ...markView,
             destroy () {
@@ -48,7 +54,7 @@ export const MarkViewConstructorView = /*#__PURE__*/ memo(function MarkViewConst
             },
             ignoreMutation: markView.ignoreMutation
         };
-    }, (markView)=>markView?.contentDOM ?? null, markProps);
+    }, markProps);
     const Component = inline ? "span" : "div";
     const props = {
         ref: innerRef

package/dist/esm/components/marks/ReactMarkView.js

@@ -16,17 +16,16 @@ export const ReactMarkView = /*#__PURE__*/ memo(function ReactMarkView(param) {
             };
         };
     }, []);
-    const markProps = useMemo(()=>({
+    const markViewDescProps = useMemo(()=>({
             mark,
             getPos,
-            inline,
-            contentDOMRef
+            inline
         }), [
         getPos,
         inline,
         mark
     ]);
-    const { childContextValue } = useMarkViewDescription(ref, ()=>({
+    const { childContextValue, refUpdated } = useMarkViewDescription(()=>ref.current, ()=>contentDOMRef.current ?? ref.current, ()=>({
             dom: ref.current,
             ignoreMutation (mutation) {
                 const ignoreMutation = ignoreMutationRef.current;
@@ -35,10 +34,29 @@ export const ReactMarkView = /*#__PURE__*/ memo(function ReactMarkView(param) {
                 }
                 return false;
             }
-        }), ()=>contentDOMRef.current ?? ref.current, markProps);
+        }), markViewDescProps);
+    const setDOM = useCallback((el)=>{
+        ref.current = el;
+        refUpdated();
+    }, [
+        refUpdated
+    ]);
+    const setContentDOM = useCallback((el)=>{
+        contentDOMRef.current = el;
+        refUpdated();
+    }, [
+        refUpdated
+    ]);
+    const markProps = useMemo(()=>({
+            ...markViewDescProps,
+            contentDOMRef: setContentDOM
+        }), [
+        markViewDescProps,
+        setContentDOM
+    ]);
     const props = {
         markProps,
-        ref
+        ref: setDOM
     };
     return /*#__PURE__*/ React.createElement(IgnoreMutationContext.Provider, {
         value: setIgnoreMutation

package/dist/esm/hooks/useMarkViewDescription.js

@@ -1,22 +1,21 @@
-import { useContext, useMemo, useRef, useState } from "react";
+import { useCallback, useContext, useMemo, useRef } from "react";
 import { ReactEditorView } from "../ReactEditorView.js";
 import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
-import { MarkViewDesc, sortViewDescs } from "../viewdesc.js";
+import { ReactMarkViewDesc, sortViewDescs } from "../viewdesc.js";
 import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
 import { useEffectEvent } from "./useEffectEvent.js";
-export function useMarkViewDescription(ref, constructor, getContentDOM, props) {
+export function useMarkViewDescription(getDOM, getContentDOM, constructor, props) {
     const { view } = useContext(EditorContext);
     const { parentRef, siblingsRef } = useContext(ChildDescriptionsContext);
-    const [dom, setDOM] = useState(null);
-    const [contentDOM, setContentDOM] = useState(null);
+    const contentDOMRef = useRef(null);
     const viewDescRef = useRef();
     const childrenRef = useRef([]);
     const create = useEffectEvent(()=>{
         if (!(view instanceof ReactEditorView)) {
             return;
         }
-        const dom = ref.current;
+        const dom = getDOM();
         if (!dom) {
             return;
         }
@@ -28,9 +27,8 @@ export function useMarkViewDescription(ref, constructor, getContentDOM, props) {
         const parent = parentRef.current;
         const children = childrenRef.current;
         const contentDOM = getContentDOM(markView);
-        const viewDesc = new MarkViewDesc(parent, children, getPos, mark, dom, contentDOM ?? dom, markView);
-        setDOM(dom);
-        setContentDOM(contentDOM);
+        const viewDesc = new ReactMarkViewDesc(parent, children, getPos, mark, dom, contentDOM ?? markView.dom, markView);
+        contentDOMRef.current = contentDOM;
         return viewDesc;
     });
     const update = useEffectEvent(()=>{
@@ -41,7 +39,7 @@ export function useMarkViewDescription(ref, constructor, getContentDOM, props) {
         if (!viewDesc) {
             return false;
         }
-        const dom = ref.current;
+        const dom = getDOM();
         if (!dom || dom !== viewDesc.dom) {
             return false;
         }
@@ -63,8 +61,7 @@ export function useMarkViewDescription(ref, constructor, getContentDOM, props) {
             const index = siblings.indexOf(viewDesc);
             siblings.splice(index, 1);
         }
-        setDOM(null);
-        setContentDOM(null);
+        contentDOMRef.current = null;
     });
     useClientLayoutEffect(()=>{
         viewDescRef.current = create();
@@ -75,6 +72,16 @@ export function useMarkViewDescription(ref, constructor, getContentDOM, props) {
         create,
         destroy
     ]);
+    const refUpdated = useCallback(()=>{
+        if (!update()) {
+            destroy();
+            viewDescRef.current = create();
+        }
+    }, [
+        create,
+        destroy,
+        update
+    ]);
     useClientLayoutEffect(()=>{
         if (!update()) {
             destroy();
@@ -105,8 +112,7 @@ export function useMarkViewDescription(ref, constructor, getContentDOM, props) {
     ]);
     return {
         childContextValue,
-        dom,
-        contentDOM,
-        ref
+        contentDOM: contentDOMRef.current ?? viewDescRef.current?.dom,
+        refUpdated
     };
 }

package/dist/esm/hooks/useNodeViewDescriptor.js

@@ -5,7 +5,12 @@ import { EditorContext } from "../contexts/EditorContext.js";
 import { CompositionViewDesc, ReactNodeViewDesc, sortViewDescs } from "../viewdesc.js";
 import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
 import { useEffectEvent } from "./useEffectEvent.js";
-export function useNodeViewDescriptor(ref, constructor, findContentDOM, props) {
+function findContentDOM(view, source, children) {
+    // When a composition is happening, we want to essentially freeze everything,
+    // so we maintain the current contentDOM.
+    return view.composing ? source?.contentDOM ?? null : children[0]?.dom?.parentElement ?? null;
+}
+export function useNodeViewDescriptor(ref, constructor, props) {
     const { view } = useContext(EditorContext);
     const { parentRef, siblingsRef } = useContext(ChildDescriptorsContext);
     const [dom, setDOM] = useState(null);
@@ -28,7 +33,7 @@ export function useNodeViewDescriptor(ref, constructor, findContentDOM, props) {
         }
         const parent = parentRef.current;
         const children = childrenRef.current;
-        const contentDOM = findContentDOM(nodeView, children);
+        const contentDOM = findContentDOM(view, nodeView, children);
         const nodeDOM = nodeView.dom;
         const viewDesc = new ReactNodeViewDesc(parent, children, getPos, node, decorations, innerDecorations, dom, contentDOM, nodeDOM, nodeView);
         setDOM(dom);
@@ -48,7 +53,7 @@ export function useNodeViewDescriptor(ref, constructor, findContentDOM, props) {
         if (!dom || dom !== viewDesc.dom) {
             return false;
         }
-        const contentDOM = findContentDOM(viewDesc, viewDesc.children);
+        const contentDOM = findContentDOM(view, viewDesc, viewDesc.children);
         if (contentDOM !== viewDesc.contentDOM) {
             return false;
         }

package/dist/esm/tiptap/TiptapNodeView.js

@@ -0,0 +1,22 @@
+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
+ * ViewDesc, so that we can call Tiptap's default stopEvent and ignoreMutation
+ * methods
+ */ export class ReactProseMirrorNodeView extends NodeView {
+    _dom;
+    _contentDOM;
+    constructor(component, props, dom, contentDOM, options){
+        super(component, props, options);
+        this._dom = dom;
+        this._contentDOM = contentDOM;
+    }
+    get dom() {
+        return this._dom;
+    }
+    get contentDOM() {
+        return this._contentDOM;
+    }
+}

package/dist/esm/tiptap/extensions/ReactProseMirrorCommands.js

@@ -1,7 +1,7 @@
 import { Extension, commands as coreCommands } from "@tiptap/core";
 import { updateAttributes } from "./commands/updateAttributes.js";
 export const ReactProseMirrorCommands = Extension.create({
-    name: "commands",
+    name: "reactProseMirrorCommands",
     addCommands () {
         return {
             ...coreCommands,

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

@@ -12,6 +12,10 @@ export function useTiptapEditor(options, deps) {
     if (options.enableCoreExtensions === false || typeof options.enableCoreExtensions === "object" && options?.enableCoreExtensions?.commands === false) {
     // Do nothing
     } else {
+        options.enableCoreExtensions = {
+            ...typeof options.enableCoreExtensions === "object" ? options.enableCoreExtensions : {},
+            commands: false
+        };
         extensions.push(ReactProseMirrorCommands);
     }
     const editor = useEditor({

package/dist/esm/viewdesc.js

@@ -730,6 +730,13 @@ let CustomNodeViewDesc = class CustomNodeViewDesc extends NodeViewDesc {
         return this.spec.ignoreMutation ? this.spec.ignoreMutation.call(this, mutation) : super.ignoreMutation(mutation);
     }
 };
+export class ReactMarkViewDesc extends MarkViewDesc {
+    destroy() {
+        // React has already destroyed the children (if needed).
+        this.children = [];
+        super.destroy();
+    }
+}
 export class ReactNodeViewDesc extends CustomNodeViewDesc {
     updateChildren(_view, _pos) {
     // React has already updated the children.