@handlewithcare/react-prosemirror 2.8.0 → 2.9.0-tiptap.24

package/dist/cjs/components/ReactNodeView.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ReactNodeView", {
+    enumerable: true,
+    get: function() {
+        return ReactNodeView;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
+const _IgnoreMutationContext = require("../contexts/IgnoreMutationContext.js");
+const _SelectNodeContext = require("../contexts/SelectNodeContext.js");
+const _StopEventContext = require("../contexts/StopEventContext.js");
+const _useNodeViewDescriptor = require("../hooks/useNodeViewDescriptor.js");
+const _ChildNodeViews = require("./ChildNodeViews.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;
+}
+const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(param) {
+    let { component: Component, outerDeco, getPos, node, innerDeco } = param;
+    const [hasCustomSelectNode, setHasCustomSelectNode] = (0, _react.useState)(false);
+    const [selected, setSelected] = (0, _react.useState)(false);
+    const ref = (0, _react.useRef)(null);
+    const innerRef = (0, _react.useRef)(null);
+    const selectNodeRef = (0, _react.useRef)(null);
+    const deselectNodeRef = (0, _react.useRef)(null);
+    const stopEventRef = (0, _react.useRef)(null);
+    const ignoreMutationRef = (0, _react.useRef)(null);
+    const setSelectNode = (0, _react.useCallback)((selectHandler, deselectHandler)=>{
+        selectNodeRef.current = selectHandler;
+        deselectNodeRef.current = deselectHandler;
+        setHasCustomSelectNode(true);
+        return ()=>{
+            selectNodeRef.current = null;
+            deselectNodeRef.current = null;
+            setHasCustomSelectNode(false);
+        };
+    }, []);
+    const setStopEvent = (0, _react.useCallback)((handler)=>{
+        stopEventRef.current = handler;
+        return ()=>{
+            stopEventRef.current = null;
+        };
+    }, []);
+    const setIgnoreMutation = (0, _react.useCallback)((handler)=>{
+        ignoreMutationRef.current = handler;
+        return ()=>{
+            ignoreMutationRef.current = null;
+            return ()=>{
+                ignoreMutationRef.current = null;
+            };
+        };
+    }, []);
+    const nodeProps = (0, _react.useMemo)(()=>({
+            node: node,
+            getPos: getPos,
+            decorations: outerDeco,
+            innerDecorations: innerDeco
+        }), [
+        getPos,
+        innerDeco,
+        node,
+        outerDeco
+    ]);
+    const { childContextValue, contentDOM, nodeDOM } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(ref, ()=>{
+        setSelected(false);
+        return {
+            dom: innerRef.current ?? ref.current,
+            update () {
+                return true;
+            },
+            multiType: true,
+            selectNode () {
+                const selectNode = selectNodeRef.current;
+                if (selectNode) {
+                    selectNode.call(this);
+                }
+                setSelected(true);
+            },
+            deselectNode () {
+                const deselectNode = deselectNodeRef.current;
+                if (deselectNode) {
+                    deselectNode.call(this);
+                }
+                setSelected(false);
+            },
+            stopEvent (event) {
+                const stopEvent = stopEventRef.current;
+                if (stopEvent) {
+                    return stopEvent.call(this, event);
+                }
+                return false;
+            },
+            ignoreMutation (mutation) {
+                const ignoreMutation = ignoreMutationRef.current;
+                if (ignoreMutation) {
+                    return ignoreMutation.call(this, mutation);
+                }
+                return false;
+            }
+        };
+    }, nodeProps);
+    const props = {
+        nodeProps,
+        ...!contentDOM && !nodeProps.node.isText && nodeDOM?.nodeName !== "BR" ? {
+            contentEditable: false,
+            suppressContentEditableWarning: true
+        } : null,
+        ...!hasCustomSelectNode && selected ? {
+            className: "ProseMirror-selectednode"
+        } : null,
+        ...!hasCustomSelectNode && selected || node.type.spec.draggable ? {
+            draggable: true
+        } : null,
+        ref: innerRef
+    };
+    const children = !node.isLeaf ? /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
+        getPos: getPos,
+        node: node,
+        innerDecorations: innerDeco
+    }) : null;
+    const element = /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.wrapInDeco, /*#__PURE__*/ _react.default.createElement(Component, props, children)), {
+        ref
+    });
+    return /*#__PURE__*/ _react.default.createElement(_SelectNodeContext.SelectNodeContext.Provider, {
+        value: setSelectNode
+    }, /*#__PURE__*/ _react.default.createElement(_StopEventContext.StopEventContext.Provider, {
+        value: setStopEvent
+    }, /*#__PURE__*/ _react.default.createElement(_IgnoreMutationContext.IgnoreMutationContext.Provider, {
+        value: setIgnoreMutation
+    }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, element))));
+});

package/dist/cjs/components/nodes/ReactNodeView.js

@@ -113,28 +113,28 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
             selectNode () {
                 const selectNode = selectNodeRef.current;
                 if (selectNode) {
-                    selectNode();
+                    selectNode.call(this);
                 }
                 setSelected(true);
             },
             deselectNode () {
                 const deselectNode = deselectNodeRef.current;
                 if (deselectNode) {
-                    deselectNode();
+                    deselectNode.call(this);
                 }
                 setSelected(false);
             },
             stopEvent (event) {
                 const stopEvent = stopEventRef.current;
                 if (stopEvent) {
-                    return stopEvent(event);
+                    return stopEvent.call(this, event);
                 }
                 return false;
             },
             ignoreMutation (mutation) {
                 const ignoreMutation = ignoreMutationRef.current;
                 if (ignoreMutation) {
-                    return ignoreMutation(mutation);
+                    return ignoreMutation.call(this, mutation);
                 }
                 return false;
             }

package/dist/cjs/hooks/useEditor.js

@@ -103,7 +103,11 @@ function useEditor(mount, options) {
         // running effects. Running effects will reattach selection
         // change listeners if the EditorView has been destroyed.
         if (view instanceof _ReactEditorView.ReactEditorView && !view.isDestroyed) {
+            // Plugins might dispatch transactions from their
+            // view update lifecycle hooks
+            flushSyncRef.current = false;
             view.commitPendingEffects();
+            flushSyncRef.current = true;
         }
     });
     view.update(directEditorProps);

package/dist/cjs/hooks/useEditorEventCallback.js

@@ -31,7 +31,7 @@ function useEditorEventCallback(callback) {
             args[_key] = arguments[_key];
         }
         assertIsReactEditorView(view);
-        return ref.current(view, ...args);
+        return ref.current.call(this, view, ...args);
     }, [
         view
     ]);

package/dist/cjs/tiptap/ReactProseMirrorNodeView.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/TiptapEditor.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TiptapEditor", {
+    enumerable: true,
+    get: function() {
+        return TiptapEditor;
+    }
+});
+const _core = require("@tiptap/core");
+const _prosemirrorstate = require("prosemirror-state");
+const _StaticEditorView = require("../StaticEditorView.js");
+let TiptapEditor = class TiptapEditor extends _core.Editor {
+    constructor(options = {}){
+        super({
+            ...options,
+            element: null
+        });
+    }
+    get view() {
+        return(// @ts-expect-error private property
+        this.editorView ?? new _StaticEditorView.StaticEditorView({
+            state: _prosemirrorstate.EditorState.create({
+                schema: this.extensionManager.schema
+            }),
+            ...this.options.editorProps,
+            attributes: {
+                role: "textbox",
+                ...this.options.editorProps.attributes
+            }
+        }));
+    }
+};

package/dist/cjs/tiptap/TiptapEditorContent.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TiptapEditorContent", {
+    enumerable: true,
+    get: function() {
+        return TiptapEditorContent;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactdom = require("react-dom");
+const _ProseMirrorDoc = require("../components/ProseMirrorDoc.js");
+const _useEditorEffect = require("../hooks/useEditorEffect.js");
+const _TiptapEditorContext = require("./contexts/TiptapEditorContext.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;
+}
+/**
+ * This component renders all of the editor's registered "React renderers".
+ */ const Portals = (param)=>{
+    let { contentComponent } = param;
+    const renderers = (0, _react.useSyncExternalStore)(contentComponent.subscribe, contentComponent.getSnapshot, contentComponent.getServerSnapshot);
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, Object.values(renderers));
+};
+function getInstance() {
+    const subscribers = new Set();
+    let renderers = {};
+    return {
+        /**
+     * Subscribe to the editor instance's changes.
+     */ subscribe (callback) {
+            subscribers.add(callback);
+            return ()=>{
+                subscribers.delete(callback);
+            };
+        },
+        getSnapshot () {
+            return renderers;
+        },
+        getServerSnapshot () {
+            return renderers;
+        },
+        /**
+     * Adds a new React Renderer to the editor.
+     */ setRenderer (id, renderer) {
+            renderers = {
+                ...renderers,
+                [id]: /*#__PURE__*/ (0, _reactdom.createPortal)(renderer.reactElement, renderer.element, id)
+            };
+            subscribers.forEach((subscriber)=>subscriber());
+        },
+        /**
+     * Removes a React Renderer from the editor.
+     */ removeRenderer (id) {
+            const nextRenderers = {
+                ...renderers
+            };
+            delete nextRenderers[id];
+            renderers = nextRenderers;
+            subscribers.forEach((subscriber)=>subscriber());
+        }
+    };
+}
+function TiptapEditorContent(param) {
+    let { editor: editorProp, ...props } = param;
+    const editor = editorProp;
+    const { onEditorInitialize, onEditorDeinitialize } = (0, _react.useContext)(_TiptapEditorContext.TiptapEditorContext);
+    (0, _useEditorEffect.useEditorEffect)((view)=>{
+        if (editor.view === view) {
+            return;
+        }
+        // @ts-expect-error private property
+        editor.editorView = view;
+        editor.contentComponent = getInstance();
+        // @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;
+            onEditorInitialize();
+        });
+        return ()=>{
+            editor.isInitialized = false;
+            editor.contentComponent = null;
+            onEditorDeinitialize();
+        };
+    }, [
+        editor,
+        onEditorDeinitialize,
+        onEditorInitialize
+    ]);
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_ProseMirrorDoc.ProseMirrorDoc, props), editor?.contentComponent && /*#__PURE__*/ _react.default.createElement(Portals, {
+        contentComponent: editor.contentComponent
+    }));
+}

package/dist/cjs/tiptap/TiptapEditorView.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TiptapEditorView", {
+    enumerable: true,
+    get: function() {
+        return TiptapEditorView;
+    }
+});
+const _react = require("@tiptap/react");
+const _react1 = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _ProseMirror = require("../components/ProseMirror.js");
+const _useForceUpdate = require("../hooks/useForceUpdate.js");
+const _TiptapEditorContext = require("./contexts/TiptapEditorContext.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, markViews, children, static: isStatic = false } = param;
+    const [isEditorInitialized, setIsEditorInitialized] = (0, _react1.useState)(editor.isInitialized);
+    const forceUpdate = (0, _useForceUpdate.useForceUpdate)();
+    const dispatchTransaction = (0, _react1.useCallback)((tr)=>{
+        // @ts-expect-error calling private method
+        editor.dispatchTransaction(tr);
+        // Tiptap's dispatchTransaction doesn't trigger
+        // a re-render, so we need to manually force
+        // one to ensure that React stays in sync.
+        forceUpdate();
+    }, [
+        editor,
+        forceUpdate
+    ]);
+    const initialEditorProps = {
+        ...editor.options.editorProps,
+        attributes: {
+            role: "textbox",
+            ...editor.options.editorProps?.attributes
+        }
+    };
+    const { nodeViews: customNodeViews, markViews: customMarkViews } = editor.isDestroyed ? {
+        nodeViews: undefined,
+        markViews: undefined
+    } : editor.view.props;
+    const contextValue = (0, _react1.useMemo)(()=>({
+            editor
+        }), [
+        editor
+    ]);
+    const onEditorInitialize = (0, _react1.useCallback)(()=>{
+        setIsEditorInitialized(true);
+    }, []);
+    const onEditorDeinitialize = (0, _react1.useCallback)(()=>{
+        setIsEditorInitialized(false);
+    }, []);
+    const tiptapEditorContextValue = (0, _react1.useMemo)(()=>({
+            isEditorInitialized,
+            onEditorInitialize,
+            onEditorDeinitialize
+        }), [
+        isEditorInitialized,
+        onEditorDeinitialize,
+        onEditorInitialize
+    ]);
+    return /*#__PURE__*/ _react1.default.createElement(_ProseMirror.ProseMirror, {
+        static: isStatic,
+        className: "tiptap",
+        ...initialEditorProps,
+        markViews: markViews,
+        customMarkViews: customMarkViews,
+        nodeViews: nodeViews,
+        customNodeViews: customNodeViews,
+        state: editor.state,
+        dispatchTransaction: dispatchTransaction
+    }, /*#__PURE__*/ _react1.default.createElement(_react.EditorContext.Provider, {
+        value: contextValue
+    }, /*#__PURE__*/ _react1.default.createElement(_TiptapEditorContext.TiptapEditorContext.Provider, {
+        value: tiptapEditorContextValue
+    }, children)));
+}

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/contexts/TiptapEditorContext.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TiptapEditorContext", {
+    enumerable: true,
+    get: function() {
+        return TiptapEditorContext;
+    }
+});
+const _react = require("react");
+const TiptapEditorContext = (0, _react.createContext)(null);

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ReactProseMirror", {
+    enumerable: true,
+    get: function() {
+        return ReactProseMirror;
+    }
+});
+const _core = require("@tiptap/core");
+const _reorderSiblings = require("../../commands/reorderSiblings.js");
+const _reactKeys = require("../../plugins/reactKeys.js");
+const ReactProseMirror = _core.Extension.create({
+    name: "@handlewithcare/react-prosemirror/reactKeys",
+    addProseMirrorPlugins () {
+        return [
+            (0, _reactKeys.reactKeys)()
+        ];
+    },
+    addCommands () {
+        return {
+            /**
+       * Command that reorders the adjacent nodes starting
+       * at the provided position.
+       *
+       * @param pos - The `start` position of the parent of the nodes being reordered
+       * @param order - The new order for the nodes, expressed as an array of indices. For
+       *                example, to swap the first two nodes in a set of three, `order`
+       *                would be set to `[1, 0, 2]`. To move the first node to the end,
+       *                and keep the other two in relative order, set `order` to `[1, 2, 0]`.
+       */ reorderSiblings (initialPos, order) {
+                return function reorderSiblingsCommand(param) {
+                    let { tr, state, dispatch } = param;
+                    return (0, _reorderSiblings.reorderSiblingsOnTransaction)(initialPos, order, tr, state, dispatch);
+                };
+            }
+        };
+    }
+});

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useIsInReactProseMirror", {
+    enumerable: true,
+    get: function() {
+        return useIsInReactProseMirror;
+    }
+});
+const _react = require("react");
+const _EditorContext = require("../../contexts/EditorContext.js");
+function useIsInReactProseMirror() {
+    return (0, _react.useContext)(_EditorContext.EditorContext) !== null;
+}