Fix selection bug with non-react node views

nytimes · Nov 10, 2023 · 94e0d72 · 94e0d72
1 parent d7da35d
commit 94e0d72
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 36 deletions.
diff --git a/demo/main.tsx b/demo/main.tsx
@@ -178,12 +178,28 @@ const customNodeViews: Record<string, NodeViewConstructor> = {
 
 function DemoEditor() {
   const [state, setState] = useState(editorState);
+  const [showReactNodeViews, setShowReactNodeViews] = useState(true);
 
   return (
     <main>
       <h1>React ProseMirror Demo</h1>
+      <button
+        onClick={() => {
+          if (showReactNodeViews) {
+            setShowReactNodeViews((prev) => !prev);
+          } else {
+            window.location.reload();
+          }
+        }}
+      >
+        Switch to{" "}
+        {showReactNodeViews
+          ? "ProseMirror node views"
+          : "React node views (requires reload)"}
+      </button>
       <ProseMirror
         as={<article />}
+        key={`${showReactNodeViews}`}
         className="ProseMirror"
         state={state}
         dispatchTransaction={function (tr) {
@@ -221,9 +237,9 @@ function DemoEditor() {
           return DecorationSet.create(state.doc, decorations);
         }}
         plugins={plugins}
-        nodeViews={{ paragraph: Paragraph }}
-        // customNodeViews={customNodeViews}
-      ></ProseMirror>
+        nodeViews={showReactNodeViews ? { paragraph: Paragraph } : undefined}
+        customNodeViews={showReactNodeViews ? undefined : customNodeViews}
+      />
     </main>
   );
 }

diff --git a/docs/assets/index-bb616a06.js → docs/assets/index-bf7cdcd7.js b/docs/assets/index-bb616a06.js → docs/assets/index-bf7cdcd7.js
diff --git a/docs/index.html b/docs/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React-ProseMirror Demo</title>
-    <script type="module" crossorigin src="/react-prosemirror/assets/index-bb616a06.js"></script>
+    <script type="module" crossorigin src="/react-prosemirror/assets/index-bf7cdcd7.js"></script>
     <link rel="stylesheet" href="/react-prosemirror/assets/index-17fff6c1.css">
   </head>
   <body>

diff --git a/src/components/NodeView.tsx b/src/components/NodeView.tsx
@@ -9,6 +9,7 @@ import React, {
   ForwardRefExoticComponent,
   RefAttributes,
   cloneElement,
+  createElement,
   useContext,
   useLayoutEffect,
   useRef,
@@ -145,23 +146,18 @@ export function NodeView({
     }
     const { contentDOM } = customNodeViewRef.current;
     contentDomRef.current = contentDOM ?? null;
-    element = (
-      <div
-        ref={customNodeViewRootRef}
-        style={{ display: "contents" }}
-        contentEditable={!!contentDOM}
-        suppressContentEditableWarning={true}
-      >
-        {contentDOM &&
-          createPortal(
-            <ChildNodeViews
-              pos={pos}
-              node={node}
-              innerDecorations={innerDeco}
-            />,
-            contentDOM
-          )}
-      </div>
+    element = createElement(
+      node.isInline ? "span" : "div",
+      {
+        ref: customNodeViewRootRef,
+        contentEditable: !!contentDOM,
+        suppressContentEditableWarning: true,
+      },
+      contentDOM &&
+        createPortal(
+          <ChildNodeViews pos={pos} node={node} innerDecorations={innerDeco} />,
+          contentDOM
+        )
     );
   } else {
     const outputSpec: DOMOutputSpec | undefined = node.type.spec.toDOM?.(node);