fix(editor): merge live-typed nested quote with adjacent QuoteNode sibling

QuoteNestingShortcutPlugin used to unconditionally replace the typed
paragraph with a fresh nested chain, so typing `> ccc` on an outer-quote
line below an existing `> > bbb` produced two adjacent same-depth
QuoteNodes that rendered as separate blocks until the file was reopened.
Mirror the QUOTE transformer's previous-is-quote branch by splicing the
new tail into the existing sibling via $mergeIntoQuoteTree and absorbing
a trailing sibling QuoteNode so live typing and the import path converge
on the same tree shape.

Author: koki-develop

src/components/molecules/MarkdownEditor/QuoteNestingShortcutPlugin.spec.tsx

@@ -0,0 +1,79 @@
+import { $isQuoteNode } from "@lexical/rich-text";
+import { $createParagraphNode, $getRoot, $isParagraphNode } from "lexical";
+import { describe, expect, test } from "vitest";
+
+import { renderTestEditor } from "./__tests__/utils";
+import { QuoteNestingShortcutPlugin } from "./QuoteNestingShortcutPlugin";
+
+describe("QuoteNestingShortcutPlugin (live typing)", () => {
+  // Production "open `> aaa\n> > bbb`, hit Enter on `bbb` to exit one level,
+  // then type `> ccc`" should merge `ccc` into the existing nested QuoteNode
+  // — the on-disk shape (`> aaa\n> > bbb\n> > ccc`) round-trips as a single
+  // inner QuoteNode with two paragraphs, so the live editor must converge to
+  // the same tree. Without the previous-is-quote merge, the typed `> ccc`
+  // would spawn a sibling QuoteNode adjacent to the existing one and the
+  // user would see two separate quote blocks until the file is reopened.
+  //
+  // Before:
+  //   > aaa
+  //   > > bbb
+  //   > |
+  //
+  // After typing `> ccc`:
+  //   > aaa
+  //   > > bbb
+  //   > > ccc|
+  test("typing `> ccc` on an outer-quote line below a nested quote merges into the nested quote", async () => {
+    const { editor, screen, user } = await renderTestEditor({
+      initialValue: "> aaa\n> > bbb",
+      plugins: <QuoteNestingShortcutPlugin />,
+    });
+
+    const textbox = screen.getByRole("textbox");
+    await user.click(textbox);
+
+    // Append an empty trailing paragraph inside the outer QuoteNode and
+    // place the cursor there — this is the state the user is in after
+    // pressing Enter on `bbb` (exiting one level of nesting). Built manually
+    // so the test isolates the plugin under test instead of relying on the
+    // Enter-exit pipeline.
+    editor.update(
+      () => {
+        const root = $getRoot();
+        const outerQuote = root.getFirstChild();
+        if (!$isQuoteNode(outerQuote)) throw new Error("expected QuoteNode at root[0]");
+        const trailing = $createParagraphNode();
+        outerQuote.append(trailing);
+        trailing.selectStart();
+      },
+      { discrete: true },
+    );
+
+    await user.keyboard("> ccc");
+
+    editor.getEditorState().read(() => {
+      const root = $getRoot();
+      expect(root.getChildrenSize()).toBe(1);
+
+      const outerQuote = root.getFirstChild();
+      if (!$isQuoteNode(outerQuote)) throw new Error("expected QuoteNode at root[0]");
+      expect(outerQuote.getChildrenSize()).toBe(2);
+
+      const leading = outerQuote.getChildAtIndex(0);
+      if (!$isParagraphNode(leading)) throw new Error("expected ParagraphNode at outer[0]");
+      expect(leading.getTextContent()).toBe("aaa");
+
+      const innerQuote = outerQuote.getChildAtIndex(1);
+      if (!$isQuoteNode(innerQuote)) throw new Error("expected nested QuoteNode at outer[1]");
+      expect(innerQuote.getChildrenSize()).toBe(2);
+
+      const bbb = innerQuote.getChildAtIndex(0);
+      if (!$isParagraphNode(bbb)) throw new Error("expected ParagraphNode at inner[0]");
+      expect(bbb.getTextContent()).toBe("bbb");
+
+      const ccc = innerQuote.getChildAtIndex(1);
+      if (!$isParagraphNode(ccc)) throw new Error("expected ParagraphNode at inner[1]");
+      expect(ccc.getTextContent()).toBe("ccc");
+    });
+  });
+});

src/components/molecules/MarkdownEditor/QuoteNestingShortcutPlugin.ts

@@ -16,7 +16,11 @@ import {
 } from "lexical";
 import { useEffect } from "react";
 
-import { $createNestedQuoteChain } from "./transformers";
+import {
+  $absorbTrailingQuoteSibling,
+  $createNestedQuoteChain,
+  $mergeIntoQuoteTree,
+} from "./transformers";
 
 /**
  * Live conversion of `> ` (or `> > `, `> > > `, ...) typed at the start of a
@@ -190,7 +194,29 @@ export function QuoteNestingShortcutPlugin(): null {
             }
           }
 
-          paragraph.replace($createNestedQuoteChain(depthIncrement, tailParagraph));
+          // Mirror of the root-level QUOTE transformer's previous-is-quote
+          // branch: when the typed paragraph already has a QuoteNode above it
+          // inside the same parent, splice the new tail into that existing
+          // QuoteNode (via `$mergeIntoQuoteTree`) instead of spawning a
+          // sibling one. Without this the live editor would render two
+          // adjacent same-depth blockquotes, while reopening the saved
+          // Markdown (which round-trips through `$mergeIntoQuoteTree` on the
+          // import side) would collapse them into a single one — see the
+          // `> > bbb` + `> > ccc` case in `QuoteNestingShortcutPlugin.spec`.
+          // `$absorbTrailingQuoteSibling` covers the symmetric case where a
+          // QuoteNode also follows the typed paragraph.
+          const previous = paragraph.getPreviousSibling();
+          if ($isQuoteNode(previous)) {
+            $mergeIntoQuoteTree(previous, tailParagraph, depthIncrement);
+            paragraph.remove();
+            $absorbTrailingQuoteSibling(previous);
+            tailParagraph.selectStart();
+            return;
+          }
+
+          const newChain = $createNestedQuoteChain(depthIncrement, tailParagraph);
+          paragraph.replace(newChain);
+          $absorbTrailingQuoteSibling(newChain);
           tailParagraph.selectStart();
         },
         { tag: HISTORY_MERGE_TAG, discrete: true },

src/components/molecules/MarkdownEditor/transformers.ts

@@ -484,11 +484,18 @@ const QUOTE: ElementTransformer = {
 
 // If `quote`'s next sibling is also a QuoteNode at the same parent level,
 // concatenate that sibling's children onto `quote` and drop the sibling.
-// Used by the QUOTE transformer's live-typing path to bridge a
-// `> ` typed on a spacer paragraph into both surrounding QuoteNodes —
-// without it the merged-into-previous QuoteNode would sit adjacent to the
-// untouched trailing one, requiring a second user action to fuse them.
-function $absorbTrailingQuoteSibling(quote: QuoteNode): void {
+// Two callers, both with the same shape problem (a freshly-created or
+// freshly-merged QuoteNode left sitting next to an untouched same-level
+// QuoteNode that would render as two separate blocks):
+//
+//   - QUOTE transformer's live-typing path: `> ` typed on a spacer paragraph
+//     between two QuoteNodes — fuses both surrounding QuoteNodes into the
+//     merged structure instead of leaving the trailing one dangling.
+//   - QuoteNestingShortcutPlugin: `> ` typed inside an existing QuoteNode
+//     where the original paragraph also had a QuoteNode AFTER it (the
+//     mirror of the previous-is-quote merge), so the new nested chain
+//     doesn't sit adjacent to an untouched trailing nested QuoteNode.
+export function $absorbTrailingQuoteSibling(quote: QuoteNode): void {
   const next = quote.getNextSibling();
   if ($isQuoteNode(next)) {
     quote.append(...next.getChildren());
@@ -610,18 +617,22 @@ function $exportNestedQuote(
   return lines;
 }
 
-// Splice a freshly-imported `> ...` line into the previously-imported
-// QuoteNode tree at its `targetDepth`. The previous QuoteNode's tail is found
-// by walking `getLastChild()` down through nested QuoteNodes; that's the
-// current depth at which subsequent lines would naturally continue.
+// Splice a `> ...` line into an existing QuoteNode tree at `targetDepth`,
+// relative to `outer` (so `outer` itself is depth 1). The tail is found by
+// walking `getLastChild()` down through nested QuoteNodes; that's the current
+// depth at which subsequent lines would naturally continue. Used both by the
+// QUOTE transformer's import path and by `QuoteNestingShortcutPlugin`'s
+// previous-is-quote merge (live typing of `> ` on an outer-quote line below
+// an existing nested QuoteNode must converge to the same tree shape as
+// reloading the saved Markdown).
 //
 //   target === tail  → append paragraph at the same depth (a new quote line)
 //   target  >  tail  → open `target - tail` more nested QuoteNodes via
 //                      `$createNestedQuoteChain`, attach the chain at tail
 //   target  <  tail  → re-descend the OUTER quote's last-child path only to
 //                      `target`, append paragraph there (the line returned to
 //                      a shallower level)
-function $mergeIntoQuoteTree(
+export function $mergeIntoQuoteTree(
   outer: QuoteNode,
   newParagraph: ParagraphNode,
   targetDepth: number,