@handlewithcare/react-prosemirror 2.2.4 → 2.3.1

package/dist/esm/components/ReactNodeView.js

@@ -1,5 +1,6 @@
 import React, { cloneElement, memo, useContext, useMemo, useRef } from "react";
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { IgnoreMutationContext } from "../contexts/IgnoreMutationContext.js";
 import { NodeViewContext } from "../contexts/NodeViewContext.js";
 import { SelectNodeContext } from "../contexts/SelectNodeContext.js";
 import { StopEventContext } from "../contexts/StopEventContext.js";
@@ -18,7 +19,7 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
     const outputSpec = useMemo(()=>node.type.spec.toDOM?.(node), [
         node
     ]);
-    const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, nodeViewDescRef } = useNodeViewDescriptor(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
+    const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, setIgnoreMutation, nodeViewDescRef } = useNodeViewDescriptor(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
     const finalProps = {
         ...props,
         ...!hasContentDOM && {
@@ -79,7 +80,9 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
         value: setSelectNode
     }, /*#__PURE__*/ React.createElement(StopEventContext.Provider, {
         value: setStopEvent
+    }, /*#__PURE__*/ React.createElement(IgnoreMutationContext.Provider, {
+        value: setIgnoreMutation
     }, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
         value: childContextValue
-    }, decoratedElement)));
+    }, decoratedElement))));
 });

package/dist/esm/contexts/IgnoreMutationContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const IgnoreMutationContext = createContext(null);

package/dist/esm/hooks/useClientOnly.js

@@ -1,8 +1,9 @@
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function unsubscribe() {}
+function subscribe() {
+    return unsubscribe;
+}
 export function useClientOnly() {
-    const [render, setRender] = useState(false);
-    useEffect(()=>{
-        setRender(true);
-    }, []);
-    return render;
+    return useSyncExternalStore(subscribe, ()=>true, ()=>false);
 }

package/dist/esm/hooks/useEditor.js

@@ -220,7 +220,7 @@ let didWarnValueDefaultValue = false;
     cleanup();
     const docViewDescRef = useRef(new NodeViewDesc(undefined, [], ()=>-1, state.doc, [], DecorationSet.empty, tempDom, null, tempDom, ()=>false, ()=>{
     /* The doc node can't have a node selection*/ }, ()=>{
-    /* The doc node can't have a node selection*/ }));
+    /* The doc node can't have a node selection*/ }, ()=>false));
     const directEditorProps = {
         ...options,
         state,

package/dist/esm/hooks/useEditorEventCallback.js

@@ -25,10 +25,12 @@ import { useEditorEffect } from "./useEditorEffect.js";
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
-        if (view) {
-            return ref.current(view, ...args);
-        }
-        return;
+        // It's not actually possible for an event handler to run
+        // while view is null, since view is only ever set to
+        // null in a layout effect that then immediately triggers
+        // a re-render which sets view to a new EditorView
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return ref.current(view, ...args);
     }, [
         view
     ]);

package/dist/esm/hooks/useIgnoreMutation.js

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { IgnoreMutationContext } from "../contexts/IgnoreMutationContext.js";
+import { useEditorEffect } from "./useEditorEffect.js";
+import { useEditorEventCallback } from "./useEditorEventCallback.js";
+export function useIgnoreMutation(ignoreMutation) {
+    const register = useContext(IgnoreMutationContext);
+    const ignoreMutationMemo = useEditorEventCallback(ignoreMutation);
+    useEditorEffect(()=>{
+        register(ignoreMutationMemo);
+    }, [
+        register,
+        ignoreMutationMemo
+    ]);
+}

package/dist/esm/hooks/useNodeViewDescriptor.js

@@ -11,6 +11,10 @@ export function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDec
     const setStopEvent = useCallback((newStopEvent)=>{
         stopEvent.current = newStopEvent;
     }, []);
+    const ignoreMutation = useRef(()=>false);
+    const setIgnoreMutation = useCallback((newIgnoreMutation)=>{
+        ignoreMutation.current = newIgnoreMutation;
+    }, []);
     const selectNode = useRef(()=>{
         if (!nodeDomRef.current || !node) return;
         if (nodeDomRef.current.nodeType == 1) nodeDomRef.current.classList.add("ProseMirror-selectednode");
@@ -46,7 +50,7 @@ export function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDec
         if (!node || !nodeDomRef.current) return;
         const firstChildDesc = childDescriptors.current[0];
         if (!nodeViewDescRef.current) {
-            nodeViewDescRef.current = new NodeViewDesc(parentRef.current, childDescriptors.current, getPos, node, outerDecorations, innerDecorations, domRef?.current ?? nodeDomRef.current, firstChildDesc?.dom.parentElement ?? null, nodeDomRef.current, (event)=>!!stopEvent.current(event), ()=>selectNode.current(), ()=>deselectNode.current());
+            nodeViewDescRef.current = new NodeViewDesc(parentRef.current, childDescriptors.current, getPos, node, outerDecorations, innerDecorations, domRef?.current ?? nodeDomRef.current, firstChildDesc?.dom.parentElement ?? null, nodeDomRef.current, (event)=>!!stopEvent.current(event), ()=>selectNode.current(), ()=>deselectNode.current(), (mutation)=>ignoreMutation.current(mutation));
         } else {
             nodeViewDescRef.current.parent = parentRef.current;
             nodeViewDescRef.current.children = childDescriptors.current;
@@ -101,6 +105,7 @@ export function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDec
         childDescriptors,
         nodeViewDescRef,
         setStopEvent,
-        setSelectNode
+        setSelectNode,
+        setIgnoreMutation
     };
 }

package/dist/esm/index.js

@@ -7,6 +7,7 @@ export { useEditorEventListener } from "./hooks/useEditorEventListener.js";
 export { useEditorState } from "./hooks/useEditorState.js";
 export { useStopEvent } from "./hooks/useStopEvent.js";
 export { useSelectNode } from "./hooks/useSelectNode.js";
+export { useIgnoreMutation } from "./hooks/useIgnoreMutation.js";
 export { useIsNodeSelected } from "./hooks/useIsNodeSelected.js";
 export { reactKeys } from "./plugins/reactKeys.js";
 export { widget } from "./decorations/ReactWidgetType.js";

package/dist/esm/props.js

@@ -1,27 +1,31 @@
 import cx from "classnames";
-import { generate, parse } from "css-tree";
-export function kebabCaseToCamelCase(str) {
-    return str.replaceAll(/-[a-z]/g, (g)=>g[1]?.toUpperCase() ?? "");
-}
-/**
- * Converts a CSS style string to an object
- * that can be passed to a React component's
- * `style` prop.
- */ export function cssToStyles(css) {
-    const ast = parse(`* { ${css} }`);
-    if (ast.type !== "StyleSheet") return {};
-    const rule = ast.children.first;
-    if (rule?.type !== "Rule") return {};
-    const block = rule.block;
-    const styles = {};
-    for (const declaration of block.children){
-        if (declaration.type !== "Declaration") continue;
-        const property = declaration.property;
-        const value = declaration.value.type === "Raw" ? declaration.value.value : generate(declaration.value);
-        const camelCasePropertyName = property.startsWith("--") ? property : kebabCaseToCamelCase(property);
-        styles[camelCasePropertyName] = value;
+let patched = false;
+function patchConsoleError() {
+    if (patched) return;
+    /* eslint-disable no-console */ const consoleError = console.error;
+    console.error = function() {
+        for(var _len = arguments.length, data = new Array(_len), _key = 0; _key < _len; _key++){
+            data[_key] = arguments[_key];
+        }
+        const [message, prop, correction] = data;
+        if (typeof message === "string" && message.startsWith("Warning: Invalid DOM property `%s`. Did you mean `%s`?") && prop === "STYLE" && correction === "style") {
+            return;
+        }
+        consoleError(...data);
+    };
+    patched = true;
+/* eslint-enable no-console */ }
+function mergeStyleProps(a, b) {
+    if (!("STYLE" in a)) {
+        if (!("STYLE" in b)) {
+            return undefined;
+        }
+        return b.STYLE;
+    }
+    if (!("STYLE" in b)) {
+        return a.STYLE;
     }
-    return styles;
+    return `${a.STYLE.match(/;\s*$/) ? a.STYLE : `${a.STYLE}`} ${b.STYLE}`;
 }
 /**
  * Merges two sets of React props. Class names
@@ -32,6 +36,7 @@ export function kebabCaseToCamelCase(str) {
         ...a,
         ...b,
         className: cx(a.className, b.className),
+        STYLE: mergeStyleProps(a, b),
         style: {
             ...a.style,
             ...b.style
@@ -42,6 +47,7 @@ export function kebabCaseToCamelCase(str) {
  * Given a record of HTML attributes, returns tho
  * equivalent React props.
  */ export function htmlAttrsToReactProps(attrs) {
+    patchConsoleError();
     const props = {};
     for (const [attrName, attrValue] of Object.entries(attrs)){
         switch(attrName.toLowerCase()){
@@ -52,7 +58,14 @@ export function kebabCaseToCamelCase(str) {
                 }
             case "style":
                 {
-                    props.style = cssToStyles(attrValue);
+                    // HACK: React expects the `style` prop to be an
+                    // object mapping from CSS property name to value.
+                    // However, it will pass un-recognized props through
+                    // to the underlying DOM element, and HTML attributes
+                    // are case insensitive. So we use `STYLE` instead,
+                    // which React doesn't intercept, but the DOM treats
+                    // as `style`
+                    props.STYLE = attrValue;
                     break;
                 }
             case "autocapitalize":

package/dist/esm/viewdesc.js

@@ -539,8 +539,9 @@ export class NodeViewDesc extends ViewDesc {
     stopEvent;
     selectNode;
     deselectNode;
-    constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, stopEvent, selectNode, deselectNode){
-        super(parent, children, getPos, dom, contentDOM), this.node = node, this.outerDeco = outerDeco, this.innerDeco = innerDeco, this.nodeDOM = nodeDOM, this.stopEvent = stopEvent, this.selectNode = selectNode, this.deselectNode = deselectNode;
+    ignoreMutation;
+    constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, stopEvent, selectNode, deselectNode, ignoreMutation){
+        super(parent, children, getPos, dom, contentDOM), this.node = node, this.outerDeco = outerDeco, this.innerDeco = innerDeco, this.nodeDOM = nodeDOM, this.stopEvent = stopEvent, this.selectNode = selectNode, this.deselectNode = deselectNode, this.ignoreMutation = ignoreMutation;
     }
     updateOuterDeco() {
     // pass
@@ -600,7 +601,9 @@ export class TextViewDesc extends NodeViewDesc {
     constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, nodeDOM){
         super(parent, children, getPos, node, outerDeco, innerDeco, dom, null, nodeDOM, ()=>false, ()=>{
         /* Text nodes can't have node selections */ }, ()=>{
-        /* Text nodes can't have node selections */ });
+        /* Text nodes can't have node selections */ }, (mutation)=>{
+            return mutation.type != "characterData" && mutation.type != "selection";
+        });
     }
     parseRule() {
         let skip = this.nodeDOM.parentNode;
@@ -627,9 +630,6 @@ export class TextViewDesc extends NodeViewDesc {
         if (dom == this.nodeDOM) return this.posAtStart + Math.min(offset, this.node.text.length);
         return super.localPosFromDOM(dom, offset, bias);
     }
-    ignoreMutation(mutation) {
-        return mutation.type != "characterData" && mutation.type != "selection";
-    }
     markDirty(from, to) {
         super.markDirty(from, to);
         if (this.dom != this.nodeDOM && (from == 0 || to == this.nodeDOM.nodeValue.length)) this.dirty = NODE_DIRTY;