@stesura/react-prosemirror 3.2.11-stesura.1

package/dist/esm/tiptap/tiptapNodeView.js

@@ -0,0 +1,211 @@
+import { getAttributesFromExtensions, getRenderedAttributes } from "@tiptap/core";
+import { ReactNodeViewContext, useCurrentEditor } from "@tiptap/react";
+import cx from "classnames";
+import React, { forwardRef, memo, useMemo, useRef } from "react";
+import { useEditorEventCallback } from "../hooks/useEditorEventCallback.js";
+import { useIgnoreMutation } from "../hooks/useIgnoreMutation.js";
+import { useIsNodeSelected } from "../hooks/useIsNodeSelected.js";
+import { useStopEvent } from "../hooks/useStopEvent.js";
+import { htmlAttrsToReactProps } from "../props.js";
+import { useMergedDOMRefs } from "../refs.js";
+import { ReactProseMirrorNodeView } from "./ReactProseMirrorNodeView.js";
+import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallback.js";
+/**
+ * Convert a Tiptap node view component to a React ProseMirror node view component
+ *
+ * Given a Tiptap-compatible React component and a Tiptap extension, returns
+ * a React component that can be passed to React ProseMirror as a custom node view.
+ *
+ * Example:
+ *
+ * ```tsx
+ * const nodeViews = {
+ *   codeBlock: nodeView({
+ *     component: function CodeBlock(nodeViewProps) {
+ *       return (
+ *         <pre>
+ *           <NodeViewContent as="code" />
+ *         </pre>
+ *       )
+ *     },
+ *     extension: CodeBlockExtension,
+ *   }),
+ * }
+ * ```
+ */ export function tiptapNodeView(param) {
+    let { component: WrappedComponent, extension, as, className = "", attrs, contentDOMElementTag: InnerTag = "div", stopEvent, ignoreMutation } = param;
+    const TiptapNodeView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function TiptapNodeView(param, ref) {
+        let { children, nodeProps, ...props } = param;
+        const { node, getPos, decorations, innerDecorations, contentDOMRef } = nodeProps;
+        const OuterTag = as ?? (node.type.isInline ? "span" : "div");
+        const { editor } = useCurrentEditor();
+        const extensionManager = editor?.extensionManager ?? null;
+        const extensions = extensionManager?.extensions ?? null;
+        const selected = useIsNodeSelected();
+        const isDraggingRef = useRef(false);
+        const htmlAttributes = useMemo(()=>{
+            if (!extensions) return {};
+            const attributes = getAttributesFromExtensions(extensions);
+            const extensionAttributes = attributes.filter((attribute)=>attribute.type === extension.name);
+            return getRenderedAttributes(node, extensionAttributes);
+        }, [
+            extensions,
+            node
+        ]);
+        useStopEvent(function(_, event) {
+            if (!editor || !(this.dom instanceof HTMLElement)) return false;
+            const nodeView = new ReactProseMirrorNodeView(WrappedComponent, {
+                extension,
+                decorations,
+                editor,
+                getPos,
+                HTMLAttributes: htmlAttributes,
+                innerDecorations,
+                node,
+                view: editor.view
+            }, this.dom, this.contentDOM ?? null);
+            nodeView.isDragging = isDraggingRef.current;
+            if (stopEvent) {
+                const result = stopEvent.call({
+                    name: extension.name,
+                    editor,
+                    type: node.type
+                }, {
+                    event,
+                    defaultStopEvent: nodeView.stopEvent.bind(nodeView)
+                });
+                isDraggingRef.current = nodeView.isDragging;
+                return result;
+            }
+            const result = nodeView.stopEvent(event) ?? false;
+            isDraggingRef.current = nodeView.isDragging;
+            return result;
+        });
+        useIgnoreMutation(function(_, mutation) {
+            if (!editor || !(this.dom instanceof HTMLElement)) return false;
+            const nodeView = new ReactProseMirrorNodeView(WrappedComponent, {
+                extension,
+                decorations,
+                editor,
+                getPos,
+                HTMLAttributes: htmlAttributes,
+                innerDecorations,
+                node,
+                view: editor.view
+            }, this.dom, this.contentDOM ?? null);
+            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(()=>{
+            if (!attrs) return {};
+            const resolvedAttrs = typeof attrs === "function" ? attrs({
+                node,
+                HTMLAttributes: htmlAttributes
+            }) : attrs;
+            const { className: extraClassName, ...htmlProps } = htmlAttrsToReactProps(resolvedAttrs);
+            return {
+                extraClassName,
+                htmlProps
+            };
+        }, [
+            htmlAttributes,
+            node
+        ]);
+        const finalClassName = cx("react-renderer", `node-${node.type.name}`, props.className, className, extraClassName, {
+            "ProseMirror-selectednode": selected
+        });
+        const updateAttributes = useEditorEventCallback((_, attributes)=>{
+            if (!editor) {
+                return;
+            }
+            editor.commands.command((param)=>{
+                let { tr } = param;
+                const pos = getPos();
+                Object.keys(attributes).forEach((key)=>{
+                    tr.setNodeAttribute(pos, key, attributes[key]);
+                });
+                return true;
+            });
+        });
+        const deleteNode = useEditorEventCallback(()=>{
+            if (!editor) {
+                return;
+            }
+            const from = getPos();
+            const to = from + node.nodeSize;
+            editor.commands.deleteRange({
+                from,
+                to
+            });
+        });
+        const nodeViewContent = useMemo(()=>/*#__PURE__*/ React.createElement(InnerTag, {
+                ref: contentDOMRef,
+                "data-node-view-content-inner": node.type.name,
+                style: {
+                    whitespace: "inherit"
+                }
+            }, children), [
+            children,
+            contentDOMRef,
+            node.type.name
+        ]);
+        const innerRef = useRef(null);
+        const finalRef = useMergedDOMRefs(ref, innerRef);
+        const onDragStart = useTiptapEditorEventCallback((editor, event)=>{
+            const dom = innerRef.current;
+            if (!dom) return;
+            const viewDesc = dom.pmViewDesc;
+            if (!viewDesc) return;
+            const nodeView = new ReactProseMirrorNodeView(WrappedComponent, {
+                extension,
+                decorations,
+                editor,
+                getPos,
+                HTMLAttributes: htmlAttributes,
+                innerDecorations,
+                node,
+                view: editor.view
+            }, viewDesc.dom, viewDesc.contentDOM);
+            return nodeView.onDragStart(event);
+        });
+        const nodeViewContext = useMemo(()=>({
+                nodeViewContentChildren: nodeViewContent,
+                onDragStart
+            }), [
+            nodeViewContent,
+            onDragStart
+        ]);
+        if (!editor) return null;
+        return /*#__PURE__*/ React.createElement(ReactNodeViewContext.Provider, {
+            value: nodeViewContext
+        }, /*#__PURE__*/ React.createElement(OuterTag, {
+            ref: finalRef,
+            ...props,
+            ...htmlProps,
+            className: finalClassName
+        }, /*#__PURE__*/ React.createElement(WrappedComponent, {
+            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;
+}