@handlewithcare/react-prosemirror 2.5.2 → 2.6.0-tiptap.0

package/dist/cjs/tiptap/TiptapEditorContent.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TiptapEditorContent", {
+    enumerable: true,
+    get: function() {
+        return TiptapEditorContent;
+    }
+});
+const _react = require("@tiptap/react");
+const _react1 = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _ProseMirrorDoc = require("../components/ProseMirrorDoc.js");
+const _useEditorEffect = require("../hooks/useEditorEffect.js");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function TiptapEditorContent(param) {
+    let { editor, ...props } = param;
+    (0, _useEditorEffect.useEditorEffect)((view)=>{
+        if (editor.view === view) {
+            return;
+        }
+        Object.defineProperty(editor, "editorView", {
+            value: view,
+            configurable: true,
+            enumerable: true,
+            writable: true
+        });
+        // @ts-expect-error private method
+        editor.injectCSS();
+        const dom = view.dom;
+        dom.editor = editor;
+        setTimeout(()=>{
+            if (editor.isDestroyed) {
+                return;
+            }
+            editor.commands.focus(editor.options.autofocus);
+            editor.emit("create", {
+                editor
+            });
+            editor.isInitialized = true;
+        });
+    }, [
+        editor
+    ]);
+    const contextValue = (0, _react1.useMemo)(()=>({
+            editor
+        }), [
+        editor
+    ]);
+    return /*#__PURE__*/ _react1.default.createElement(_react.EditorContext.Provider, {
+        value: contextValue
+    }, /*#__PURE__*/ _react1.default.createElement(_ProseMirrorDoc.ProseMirrorDoc, props));
+}

package/dist/cjs/tiptap/TiptapEditorView.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TiptapEditorView", {
+    enumerable: true,
+    get: function() {
+        return TiptapEditorView;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _ProseMirror = require("../components/ProseMirror.js");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function TiptapEditorView(param) {
+    let { editor, nodeViews, children } = param;
+    const dispatchTransaction = (0, _react.useCallback)((tr)=>{
+        // @ts-expect-error calling private method
+        editor.dispatchTransaction(tr);
+    }, [
+        editor
+    ]);
+    const initialEditorProps = {
+        ...editor.options.editorProps,
+        attributes: {
+            role: "textbox",
+            ...editor.options.editorProps?.attributes
+        }
+    };
+    const { nodeViews: customNodeViews, markViews } = editor.isDestroyed ? {
+        nodeViews: undefined,
+        markViews: undefined
+    } : editor.view.props;
+    return /*#__PURE__*/ _react.default.createElement(_ProseMirror.ProseMirror, {
+        className: "tiptap",
+        ...initialEditorProps,
+        markViews: markViews,
+        nodeViews: nodeViews,
+        customNodeViews: customNodeViews,
+        state: editor.isDestroyed || editor.state.plugins.length ? editor.state : editor.state.reconfigure({
+            plugins: editor.extensionManager.plugins
+        }),
+        dispatchTransaction: dispatchTransaction
+    }, children);
+}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTiptapEditorEffect", {
+    enumerable: true,
+    get: function() {
+        return useTiptapEditorEffect;
+    }
+});
+const _react = require("@tiptap/react");
+const _useEditorEffect = require("../../hooks/useEditorEffect.js");
+function useTiptapEditorEffect(effect, dependencies) {
+    const { editor } = (0, _react.useCurrentEditor)();
+    (0, _useEditorEffect.useEditorEffect)(()=>{
+        if (editor) {
+            return effect(editor);
+        }
+    // The rules of hooks want to be able to statically
+    // verify the dependencies for the effect, but this will
+    // have already happened at the call-site.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, dependencies && [
+        editor,
+        ...dependencies
+    ]);
+}

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTiptapEditorEventCallback", {
+    enumerable: true,
+    get: function() {
+        return useTiptapEditorEventCallback;
+    }
+});
+const _react = require("@tiptap/react");
+const _useEditorEventCallback = require("../../hooks/useEditorEventCallback.js");
+function assertEditor(editor) {
+    if (editor) return;
+    throw new DOMException("Tiptap Editor is not initialized", "InvalidStateError");
+}
+function useTiptapEditorEventCallback(callback) {
+    const { editor } = (0, _react.useCurrentEditor)();
+    return (0, _useEditorEventCallback.useEditorEventCallback)(function(_) {
+        for(var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++){
+            args[_key - 1] = arguments[_key];
+        }
+        assertEditor(editor);
+        return callback(editor, ...args);
+    });
+}

package/dist/cjs/tiptap/index.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TiptapEditorContent: function() {
+        return _TiptapEditorContent.TiptapEditorContent;
+    },
+    TiptapEditorView: function() {
+        return _TiptapEditorView.TiptapEditorView;
+    },
+    tiptapNodeView: function() {
+        return _tiptapNodeView.tiptapNodeView;
+    },
+    useTiptapEditorEffect: function() {
+        return _useTiptapEditorEffect.useTiptapEditorEffect;
+    },
+    useTiptapEditorEventCallback: function() {
+        return _useTiptapEditorEventCallback.useTiptapEditorEventCallback;
+    }
+});
+const _tiptapNodeView = require("./tiptapNodeView.js");
+const _TiptapEditorView = require("./TiptapEditorView.js");
+const _TiptapEditorContent = require("./TiptapEditorContent.js");
+const _useTiptapEditorEffect = require("./hooks/useTiptapEditorEffect.js");
+const _useTiptapEditorEventCallback = require("./hooks/useTiptapEditorEventCallback.js");

package/dist/cjs/tiptap/tiptapNodeView.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "tiptapNodeView", {
+    enumerable: true,
+    get: function() {
+        return tiptapNodeView;
+    }
+});
+const _core = require("@tiptap/core");
+const _react = require("@tiptap/react");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react1 = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _useEditorEventCallback = require("../hooks/useEditorEventCallback.js");
+const _useIgnoreMutation = require("../hooks/useIgnoreMutation.js");
+const _useIsNodeSelected = require("../hooks/useIsNodeSelected.js");
+const _useStopEvent = require("../hooks/useStopEvent.js");
+const _props = require("../props.js");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function tiptapNodeView(param) {
+    let { component: WrappedComponent, extension, as: OuterTag = "div", className = "", attrs, contentDOMElementTag: InnerTag = "div", stopEvent, ignoreMutation } = param;
+    const TiptapNodeView = /*#__PURE__*/ (0, _react1.memo)(/*#__PURE__*/ (0, _react1.forwardRef)(function TiptapNodeView(param, ref) {
+        let { children, nodeProps, ...props } = param;
+        const { node, getPos, decorations, innerDecorations } = nodeProps;
+        const { editor } = (0, _react.useCurrentEditor)();
+        const extensionManager = editor?.extensionManager ?? null;
+        const extensions = extensionManager?.extensions ?? null;
+        const selected = (0, _useIsNodeSelected.useIsNodeSelected)();
+        (0, _useStopEvent.useStopEvent)((_, event)=>{
+            if (stopEvent) {
+                return stopEvent({
+                    event
+                });
+            }
+            return false;
+        });
+        (0, _useIgnoreMutation.useIgnoreMutation)((_, mutation)=>{
+            if (ignoreMutation) {
+                return ignoreMutation({
+                    mutation
+                });
+            }
+            return false;
+        });
+        // This is just a dummy ref to satisfy Tiptap's types
+        const innerRef = (0, _react1.useRef)(null);
+        const htmlAttributes = (0, _react1.useMemo)(()=>{
+            if (!extensions) return {};
+            const attributes = (0, _core.getAttributesFromExtensions)(extensions);
+            const extensionAttributes = attributes.filter((attribute)=>attribute.type === extension.name);
+            return (0, _core.getRenderedAttributes)(node, extensionAttributes);
+        }, [
+            extensions,
+            node
+        ]);
+        const { extraClassName, htmlProps } = (0, _react1.useMemo)(()=>{
+            if (!attrs) return {};
+            const resolvedAttrs = typeof attrs === "function" ? attrs({
+                node,
+                HTMLAttributes: htmlAttributes
+            }) : attrs;
+            const { className: extraClassName, ...htmlProps } = (0, _props.htmlAttrsToReactProps)(resolvedAttrs);
+            return {
+                extraClassName,
+                htmlProps
+            };
+        }, [
+            htmlAttributes,
+            node
+        ]);
+        const finalClassName = (0, _classnames.default)("react-renderer", `node-${node.type.name}`, className, extraClassName, {
+            "ProseMirror-selectednode": selected
+        });
+        const updateAttributes = (0, _useEditorEventCallback.useEditorEventCallback)((_, attributes)=>{
+            if (!editor) {
+                return;
+            }
+            editor.commands.command((param)=>{
+                let { tr } = param;
+                const pos = getPos();
+                tr.setNodeMarkup(pos, undefined, {
+                    ...node.attrs,
+                    ...attributes
+                });
+                return true;
+            });
+        });
+        const deleteNode = (0, _useEditorEventCallback.useEditorEventCallback)(()=>{
+            if (!editor) {
+                return;
+            }
+            const from = getPos();
+            const to = from + node.nodeSize;
+            editor.commands.deleteRange({
+                from,
+                to
+            });
+        });
+        const nodeViewContext = (0, _react1.useMemo)(()=>({
+                nodeViewContentChildren: /*#__PURE__*/ _react1.default.createElement(InnerTag, {
+                    "data-node-view-content-inner": node.type.name,
+                    style: {
+                        whitespace: "inherit"
+                    }
+                }, children)
+            }), [
+            children,
+            node.type.name
+        ]);
+        if (!editor) return null;
+        return /*#__PURE__*/ _react1.default.createElement(_react.ReactNodeViewContext.Provider, {
+            value: nodeViewContext
+        }, /*#__PURE__*/ _react1.default.createElement(OuterTag, {
+            ref: ref,
+            className: finalClassName,
+            ...props,
+            ...htmlProps
+        }, /*#__PURE__*/ _react1.default.createElement(WrappedComponent, {
+            ref: innerRef,
+            node: node,
+            getPos: getPos,
+            view: editor.view,
+            editor: editor,
+            decorations: decorations,
+            innerDecorations: innerDecorations,
+            extension: extension,
+            HTMLAttributes: htmlAttributes,
+            selected: selected,
+            updateAttributes: updateAttributes,
+            deleteNode: deleteNode
+        })));
+    }));
+    TiptapNodeView.displayName = `TiptapNodeView(${WrappedComponent.displayName ?? "Anonymous"})`;
+    return TiptapNodeView;
+}

package/dist/esm/ReactEditorView.js

@@ -132,6 +132,18 @@ function changedNodeViews(a, b) {
         }
         return undefined;
     }
+    destroy() {
+        // Prevent the base class from destroying the React-managed nodes.
+        // Restore them below after invoking the base class method.
+        const reactContent = [
+            ...this.dom.childNodes
+        ];
+        try {
+            super.destroy();
+        } finally{
+            this.dom.replaceChildren(...reactContent);
+        }
+    }
     /**
    * Commit effects by appling the pending props and state.
    *

package/dist/esm/components/CustomNodeView.js

@@ -1,5 +1,5 @@
 import { DOMSerializer } from "prosemirror-model";
-import React, { cloneElement, createElement, memo, useMemo, useRef, useState } from "react";
+import React, { cloneElement, memo, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
 import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
@@ -8,7 +8,6 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
     let { constructor, node, getPos, innerDeco, outerDeco } = param;
     const ref = useRef(null);
     const innerRef = useRef(null);
-    const [selected, setSelected] = useState(false);
     const nodeProps = useMemo(()=>({
             node,
             getPos,
@@ -38,7 +37,6 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
-        setSelected(false);
         const nodeView = createNodeView(...args);
         const contentDOM = nodeView.contentDOM;
         const nodeDOM = nodeView.dom;
@@ -48,6 +46,9 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
             if (!nodeDOM.hasAttribute("contenteditable")) {
                 nodeDOM.contentEditable = "false";
             }
+            if (node.type.spec.draggable) {
+                nodeDOM.draggable = true;
+            }
         }
         return {
             ...nodeView,
@@ -57,22 +58,16 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
                 }
                 wrapperDOM.removeChild(nodeDOM);
             },
-            selectNode: nodeView.selectNode?.bind(nodeView) ?? (()=>{
-                if (nodeDOM instanceof HTMLElement) {
-                    nodeDOM.classList.add("ProseMirror-selectednode");
-                }
-                setSelected(true);
-            }),
-            deselectNode: nodeView.deselectNode?.bind(nodeView) ?? (()=>{
-                if (nodeDOM instanceof HTMLElement) {
-                    nodeDOM.classList.remove("ProseMirror-selectednode");
-                }
-                setSelected(false);
-            }),
+            selectNode: nodeView.selectNode?.bind(nodeView),
+            deselectNode: nodeView.deselectNode?.bind(nodeView),
             stopEvent: nodeView.stopEvent?.bind(nodeView),
             ignoreMutation: nodeView.ignoreMutation?.bind(nodeView)
         };
     }, nodeProps);
+    const Component = node.isInline ? "span" : "div";
+    const props = {
+        ref: innerRef
+    };
     const children = !node.isLeaf && contentDOM ? /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
         value: childContextValue
     }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
@@ -80,14 +75,7 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
         node: node,
         innerDecorations: innerDeco
     })), contentDOM) : null;
-    const innerElement = /*#__PURE__*/ createElement(node.isInline ? "span" : "div", {
-        ref: innerRef
-    }, children);
-    const props = {
-        ...selected || node.type.spec.draggable ? {
-            draggable: true
-        } : null,
+    return /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, /*#__PURE__*/ React.createElement(Component, props, children)), {
         ref
-    };
-    return /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, innerElement), props);
+    });
 });

package/dist/esm/components/ReactNodeView.js

@@ -7,7 +7,7 @@ import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
 import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
 export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
     let { component: Component, outerDeco, getPos, node, innerDeco } = param;
-    const [controlSelected, setControlSelected] = useState(false);
+    const [hasCustomSelectNode, setHasCustomSelectNode] = useState(false);
     const [selected, setSelected] = useState(false);
     const ref = useRef(null);
     const innerRef = useRef(null);
@@ -18,11 +18,11 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
     const setSelectNode = useCallback((selectHandler, deselectHandler)=>{
         selectNodeRef.current = selectHandler;
         deselectNodeRef.current = deselectHandler;
-        setControlSelected(true);
+        setHasCustomSelectNode(true);
         return ()=>{
             selectNodeRef.current = null;
             deselectNodeRef.current = null;
-            setControlSelected(false);
+            setHasCustomSelectNode(false);
         };
     }, []);
     const setStopEvent = useCallback((handler)=>{
@@ -89,30 +89,28 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
             }
         };
     }, nodeProps);
-    const children = !node.isLeaf ? /*#__PURE__*/ React.createElement(ChildNodeViews, {
-        getPos: getPos,
-        node: node,
-        innerDecorations: innerDeco
-    }) : null;
-    const innerProps = {
+    const props = {
         nodeProps,
         ...!contentDOM && !nodeProps.node.isText && nodeDOM?.nodeName !== "BR" ? {
             contentEditable: false,
             suppressContentEditableWarning: true
         } : null,
-        ...controlSelected && selected ? {
+        ...!hasCustomSelectNode && selected ? {
             className: "ProseMirror-selectednode"
         } : null,
-        ref: innerRef
-    };
-    const innerElement = /*#__PURE__*/ React.createElement(Component, innerProps, children);
-    const props = {
-        ...controlSelected && selected || node.type.spec.draggable ? {
+        ...!hasCustomSelectNode && selected || node.type.spec.draggable ? {
             draggable: true
         } : null,
-        ref
+        ref: innerRef
     };
-    const decoratedElement = /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, innerElement), props);
+    const children = !node.isLeaf ? /*#__PURE__*/ React.createElement(ChildNodeViews, {
+        getPos: getPos,
+        node: node,
+        innerDecorations: innerDeco
+    }) : null;
+    const element = /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, /*#__PURE__*/ React.createElement(Component, props, children)), {
+        ref
+    });
     return /*#__PURE__*/ React.createElement(SelectNodeContext.Provider, {
         value: setSelectNode
     }, /*#__PURE__*/ React.createElement(StopEventContext.Provider, {
@@ -121,5 +119,5 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
         value: setIgnoreMutation
     }, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
         value: childContextValue
-    }, decoratedElement))));
+    }, element))));
 });