Fix bug on hovered hr options menu click

Signed-off-by: Émile Ré <emile@getprobo.com>

packages/ui/src/RichEditor/BlockMenu.tsx

@@ -134,9 +134,16 @@ export function BlockMenu({ editor }: BlockMenuProps) {
     try {
       const pos = editor.view.posAtDOM(hoveredBlock, 0);
       const $pos = editor.state.doc.resolve(pos);
-      const rootPos = $pos.before(1);
-      const rootNode = $pos.node(1);
-      const insertPos = rootPos + rootNode.nodeSize;
+
+      let insertPos: number;
+      if ($pos.depth >= 1) {
+        const rootPos = $pos.before(1);
+        const rootNode = $pos.node(1);
+        insertPos = rootPos + rootNode.nodeSize;
+      } else {
+        const nodeAfter = $pos.nodeAfter;
+        insertPos = pos + (nodeAfter?.nodeSize ?? 1);
+      }
 
       editor.chain()
         .focus()

packages/ui/src/RichEditor/OptionsMenu.tsx

@@ -139,7 +139,14 @@ export function OptionsMenu({ editor }: OptionsMenuProps) {
     try {
       const pos = editor.view.posAtDOM(hoveredBlock, 0);
       const $pos = editor.state.doc.resolve(pos);
-      return { node: $pos.node(1), pos: $pos.before(1) };
+      if ($pos.depth >= 1) {
+        return { node: $pos.node(1), pos: $pos.before(1) };
+      }
+      const nodeAfter = $pos.nodeAfter;
+      if (nodeAfter) {
+        return { node: nodeAfter, pos: pos };
+      }
+      return null;
     } catch {
       return null;
     }
@@ -161,10 +168,36 @@ export function OptionsMenu({ editor }: OptionsMenuProps) {
     applyCommand: (chain: ReturnType<typeof editor.chain>) => ReturnType<typeof editor.chain>,
   ) => {
     const data = getNodeAtHoveredBlock();
-    if (!data) return;
+    if (!data) {
+      setMenuOpen(false);
+      return;
+    }
 
     try {
       if (!data.node.isTextblock) {
+        if (!data.node.firstChild) {
+          const paragraph = editor.state.schema.nodes.paragraph.create();
+          editor.chain()
+            .focus()
+            .command(({ tr }) => {
+              tr.replaceWith(data.pos, data.pos + data.node.nodeSize, paragraph);
+              return true;
+            })
+            .run();
+
+          const $near = editor.state.doc.resolve(data.pos + 1);
+          const textPos = TextSelection.near($near).from;
+
+          applyCommand(
+            editor.chain()
+              .focus()
+              .setTextSelection(textPos),
+          ).run();
+
+          setMenuOpen(false);
+          return;
+        }
+
         let textBlock = data.node.firstChild;
         if (!textBlock) return;
         while (!textBlock.isTextblock && textBlock.firstChild) {
@@ -172,7 +205,7 @@ export function OptionsMenu({ editor }: OptionsMenuProps) {
         }
         if (!textBlock.isTextblock) return;
 
-        const firstChildSize = data.node.firstChild!.nodeSize;
+        const firstChildSize = data.node.firstChild.nodeSize;
         const paragraph = editor.state.schema.nodes.paragraph.create(
           null,
           textBlock.content,
@@ -254,6 +287,7 @@ export function OptionsMenu({ editor }: OptionsMenuProps) {
           menuRefs.setReference(node);
         }}
         {...getReferenceProps()}
+        onMouseDown={e => e.preventDefault()}
         draggable
         onDragStart={onDragStart}
         onDragEnd={() => setHoveredBlock(null)}