Add "trailing hacks" in more scenarios.

Browsers have very particular opinions about where they will allow users to place selections in contenteditable elements. ProseMirror manages this in part by placing <br> elements in locations that browsers otherwise wouldn't allow user selections. This PR brings react-prosemirror closer to matching all of the situations that ProseMirror itself uses these "trailing hacks". Rather than only in empty textblocks, we now also place trailing hacks when a textblock node ends with a non-text node, a widget, or a text node that ends with a newline.
nytimes · Mar 15, 2024 · 602029d · 602029d
1 parent ff0c846
commit 602029d
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 30 deletions.
diff --git a/demo/main.tsx b/demo/main.tsx
@@ -43,6 +43,15 @@ const schema = new Schema({
       cellAttributes: {},
       tableGroup: "block",
     }),
+    footnote: {
+      group: "inline",
+      content: "text*",
+      inline: true,
+      // This makes the view treat the node as a leaf, even though it
+      // technically has content
+      atom: true,
+      attrs: { number: { default: 0 } },
+    },
     list: {
       group: "block",
       content: "list_item+",
@@ -99,10 +108,10 @@ const editorState = EditorState.create({
       ]),
       schema.text(" the first paragraph"),
     ]),
-    schema.nodes.paragraph.create(
-      {},
-      schema.text("This is the second paragraph")
-    ),
+    schema.nodes.paragraph.create({}, [
+      schema.text("This is the second paragraph"),
+      schema.nodes.footnote.create({ number: 1 }, schema.text("Footnote")),
+    ]),
     schema.nodes.paragraph.create(),
     schema.nodes.image.create(),
     schema.nodes.image.create(),
@@ -164,6 +173,22 @@ const ListItem = forwardRef(function ListItem(
   );
 });
 
+const Footnote = forwardRef(function Footnote(
+  { nodeProps, ...props }: NodeViewComponentProps,
+  ref: Ref<HTMLButtonElement>
+) {
+  return (
+    <button
+      ref={ref}
+      {...props}
+      suppressContentEditableWarning
+      contentEditable="false"
+    >
+      {nodeProps.node.attrs.number}
+    </button>
+  );
+});
+
 const TestWidget = forwardRef(function TestWidget(
   { widget, pos, ...props }: WidgetViewComponentProps,
   ref: ForwardedRef<HTMLSpanElement>
@@ -301,7 +326,12 @@ function DemoEditor() {
         plugins={plugins}
         nodeViews={
           showReactNodeViews
-            ? { paragraph: Paragraph, list: List, list_item: ListItem }
+            ? {
+                paragraph: Paragraph,
+                list: List,
+                list_item: ListItem,
+                footnote: Footnote,
+              }
             : undefined
         }
         customNodeViews={showReactNodeViews ? undefined : customNodeViews}

diff --git a/docs/assets/index-fb909589.js → docs/assets/index-0b42cd6e.js b/docs/assets/index-fb909589.js → docs/assets/index-0b42cd6e.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-fb909589.js"></script>
+    <script type="module" crossorigin src="/react-prosemirror/assets/index-0b42cd6e.js"></script>
     <link rel="stylesheet" href="/react-prosemirror/assets/index-523693cd.css">
   </head>
   <body>

diff --git a/src/components/ChildNodeViews.tsx b/src/components/ChildNodeViews.tsx
@@ -427,17 +427,18 @@ export function ChildNodeViews({
     reactKeys?.posToKey
   );
 
-  if (!children.length) {
-    childElements.push(
-      <TrailingHackView
-        key={createKey(
-          editorState?.doc,
-          innerPos,
-          { type: "trailinghack", offset: 0 },
-          reactKeys?.posToKey
-        )}
-      />
-    );
+  const lastChild = children[children.length - 1];
+
+  if (
+    !lastChild ||
+    lastChild.type !== "node" ||
+    (lastChild.node.isInline && !lastChild.node.isText) ||
+    // RegExp.test actually handles undefined just fine
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    /\n$/.test(lastChild.node.text!)
+  ) {
+    // TODO: ProseMirror also adds an img hack after non-contenteditable views
+    childElements.push(<TrailingHackView key="trailing-hack" />);
   }
 
   return <>{childElements}</>;