fix(editor): focus the body editor and place the caret at its end when clicking below the last line

The Body field's outer grid cell is stretched to a fixed min-height by the
dialog, but the contentEditable only grows to fit its own content, leaving
empty space below the last line that silently ate clicks instead of
focusing the editor. ClickBelowContentPlugin catches a click on the scroll
wrapper itself and forces focus + caret to the document's end, matching
what clicking below a plain <textarea>'s last line does. Also gives the
wrapper a text cursor so it previews as clickable. Disabled whenever the
body actually overflows the field, since a scrollbar then covers that same
wrapper and isn't a distinct DOM node — clicking it would otherwise be
mistaken for the same gesture and hijack the user's scroll.

Author: koki-develop

src/components/molecules/MarkdownEditor/AGENTS.md

@@ -15,6 +15,7 @@ WYSIWYG Markdown editor (Lexical) for the task body. **Uncontrolled** — seeded
 One-line summaries — each plugin file's header comment owns the why-this-design rationale.
 
 - **`LinkOpenPlugin`** — click a link → `onOpenLink(url)` to the system browser.
+- **`ClickBelowContentPlugin`** — a click on the scroll wrapper itself (the empty space below the last line, when the field's dialog-imposed `min-h-[...]` outgrows the actual content) focuses the editor with the caret forced to the document's end, instead of silently missing — the contentEditable only grows to fit its content, so that space belongs to the wrapper, not it. Disabled whenever the wrapper's content actually overflows (`scrollHeight > clientHeight`): a real scrollbar then covers that same wrapper, isn't a distinct DOM node, and clicking it is otherwise indistinguishable from a genuine dead-space click — but the dead-space gap this plugin exists for can only occur in the first place when nothing overflows, so the two cases never overlap.
 - **`ListTabIndentationPlugin`** — Tab / Shift+Tab indent inside list items.
 - **`ListExitPlugin`** — Backspace at list-item start exits the list instead of folding into the previous line; Ctrl+A across a leading list clears the doc (snapshot-gated so word-select doesn't trigger).
 - **`NoListInTablePlugin`** — safety net that unwraps any `ListNode` that slips into a `TableCellNode` via a non-transformer path (raw command, paste of pre-built nodes).

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

@@ -0,0 +1,115 @@
+import { describe, expect, test } from "vitest";
+import { render } from "vitest-browser-react";
+
+import "@/style.css";
+
+import { MarkdownEditor } from "./MarkdownEditor";
+
+// Regression test for a real bug: the dialog stretches the field's outer
+// grid cell to a fixed min-height (`min-h-[20rem]`), but the contentEditable
+// itself only grows to fit its own short content — clicking the empty space
+// between the last line and the field's visible bottom edge used to hit the
+// scroll wrapper div and silently do nothing (no focus, no caret). This
+// mounts the actual production `MarkdownEditor` (not the `renderTestEditor`
+// harness, which doesn't reproduce the wrapper DOM — see `MarkdownEditor.spec.tsx`)
+// with a short body inside the same fixed-height wrapper the real dialogs use.
+describe("MarkdownEditor (click below content)", () => {
+  test("clicking the empty space below the last line focuses the editor with the caret at the document end", async () => {
+    await render(
+      <MarkdownEditor
+        initialValue="hello"
+        onChange={() => {}}
+        onOpenLink={() => {}}
+        className="h-[20rem]"
+      />,
+    );
+
+    const editable = document.querySelector('[contenteditable="true"]');
+    if (editable == null) throw new Error("contentEditable not found");
+    const wrapper = editable.parentElement;
+    if (wrapper == null) throw new Error("scroll wrapper not found");
+
+    // Sanity-check the bug's actual precondition: the wrapper is taller than
+    // the content it holds, so there really is dead space below the text.
+    expect(wrapper.getBoundingClientRect().height).toBeGreaterThan(
+      editable.getBoundingClientRect().height,
+    );
+
+    expect(document.activeElement).not.toBe(editable);
+
+    wrapper.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    expect(document.activeElement).toBe(editable);
+    const selection = document.getSelection();
+    expect(selection?.isCollapsed).toBe(true);
+    expect(selection?.anchorNode?.textContent).toBe("hello");
+    expect(selection?.anchorOffset).toBe("hello".length);
+  });
+
+  test("a click that lands on the contentEditable itself (not the wrapper) is left alone", async () => {
+    await render(
+      <MarkdownEditor
+        initialValue="hello"
+        onChange={() => {}}
+        onOpenLink={() => {}}
+        className="h-[20rem]"
+      />,
+    );
+
+    const editable = document.querySelector('[contenteditable="true"]');
+    if (editable == null) throw new Error("contentEditable not found");
+
+    editable.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    // Nothing forces focus here — a real click on the contentEditable is
+    // handled entirely by native browser behavior, so the plugin must not
+    // double-handle it (its handler only reacts when `event.target` is the
+    // wrapper itself).
+    expect(document.activeElement).not.toBe(editable);
+  });
+
+  test("a body long enough to overflow the field leaves click-to-focus disabled, so a scrollbar interaction can't be mistaken for one", async () => {
+    await render(
+      <MarkdownEditor
+        initialValue={Array.from({ length: 60 }, (_, i) => `line ${i}`).join("\n\n")}
+        onChange={() => {}}
+        onOpenLink={() => {}}
+        className="h-[10rem]"
+      />,
+    );
+
+    const editable = document.querySelector('[contenteditable="true"]');
+    if (editable == null) throw new Error("contentEditable not found");
+    const wrapper = editable.parentElement;
+    if (wrapper == null) throw new Error("scroll wrapper not found");
+
+    // Sanity-check the precondition this test cares about: the body actually
+    // overflows, so a real scrollbar is showing (an overlay scrollbar isn't a
+    // distinct DOM node and reserves no layout space of its own to click-test
+    // against, so a click on it is indistinguishable, by target OR position,
+    // from a click on the wrapper's dead space — see the plugin's comment).
+    expect(wrapper.scrollHeight).toBeGreaterThan(wrapper.clientHeight);
+
+    wrapper.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    expect(document.activeElement).not.toBe(editable);
+  });
+
+  test("the scroll wrapper previews as a text cursor, matching its click-to-type behavior", async () => {
+    await render(
+      <MarkdownEditor
+        initialValue="hello"
+        onChange={() => {}}
+        onOpenLink={() => {}}
+        className="h-[20rem]"
+      />,
+    );
+
+    const editable = document.querySelector('[contenteditable="true"]');
+    if (editable == null) throw new Error("contentEditable not found");
+    const wrapper = editable.parentElement;
+    if (wrapper == null) throw new Error("scroll wrapper not found");
+
+    expect(getComputedStyle(wrapper).cursor).toBe("text");
+  });
+});

src/components/molecules/MarkdownEditor/ClickBelowContentPlugin.tsx

@@ -0,0 +1,64 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getRoot } from "lexical";
+import { useEffect } from "react";
+
+// The Body field's outer grid cell is stretched to a fixed min-height by the
+// dialog (`min-h-[20rem]` in TaskDetailDialog.tsx / CreateTaskDialog.tsx),
+// but the contentEditable itself only grows to fit its own content — a short
+// body leaves empty space between the last line and the field's visible
+// bottom edge that belongs to the scroll wrapper (the `min-h-0
+// overflow-y-auto` div in MarkdownEditor.tsx), not the contentEditable, and
+// silently swallows clicks there. This plugin catches a click that lands on
+// that wrapper itself — never on a descendant, since a click that lands
+// inside the contentEditable's own box (including the empty space below its
+// last line, as long as that space is still part of the box) is already
+// handled natively — and explicitly focuses the editor with the caret
+// forced to the very end of the document, matching what clicking below the
+// last line of a plain <textarea> does.
+export function ClickBelowContentPlugin(): null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerRootListener((rootElement) => {
+      if (rootElement === null) return;
+      const wrapper = rootElement.parentElement;
+      if (wrapper === null) return;
+
+      const handleClick = (event: MouseEvent) => {
+        if (event.target !== wrapper) return;
+        // The wrapper only has dead space below the content — this plugin's
+        // whole reason to exist — when the content FITS without scrolling.
+        // Once it overflows, the visible viewport is always fully covered by
+        // content edge to edge (even scrolled to the very bottom), and a
+        // real scrollbar appears. A scrollbar isn't a distinct DOM node, so
+        // dragging/clicking it (to scroll and re-read an overflowing body —
+        // the exact case this wrapper's `overflow-y-auto` exists for) also
+        // fires with `event.target === wrapper`, indistinguishable from a
+        // genuine dead-space click by target alone — and, for an
+        // overlay-style scrollbar, not distinguishable by click position
+        // either, since it reserves no layout space of its own to test
+        // against. Bailing whenever the content overflows sidesteps that
+        // ambiguity entirely instead of trying to geometrically guess where
+        // the scrollbar sits.
+        if (wrapper.scrollHeight > wrapper.clientHeight) return;
+        rootElement.focus();
+        // `discrete: true` commits synchronously, inside this same click
+        // handler call — without it the update lands in the next microtask,
+        // racing whatever selection the browser's own native `focus()`
+        // placement (or Lexical's selectionchange sync of it) produces, and
+        // `selectEnd()` can lose that race and never visibly apply.
+        editor.update(
+          () => {
+            $getRoot().selectEnd();
+          },
+          { discrete: true },
+        );
+      };
+
+      wrapper.addEventListener("click", handleClick);
+      return () => wrapper.removeEventListener("click", handleClick);
+    });
+  }, [editor]);
+
+  return null;
+}

src/components/molecules/MarkdownEditor/MarkdownEditor.tsx

@@ -25,6 +25,7 @@ import { BoundaryStrictFormatPlugin } from "./BoundaryStrictFormatPlugin";
 import { CheckListIndentPlugin } from "./CheckListIndentPlugin";
 import { CheckListOutdentPlugin } from "./CheckListOutdentPlugin";
 import { CheckListShortcutPlugin } from "./CheckListShortcutPlugin";
+import { ClickBelowContentPlugin } from "./ClickBelowContentPlugin";
 import { CodeBlockEscapePlugin } from "./CodeBlockEscapePlugin";
 import { $highlightAllCodeBlocks, CodeBlockHighlightPlugin } from "./CodeBlockHighlightPlugin";
 import { CorkCodeNode } from "./CorkCodeNode";
@@ -362,7 +363,11 @@ export const MarkdownEditor = forwardRef<HTMLDivElement, MarkdownEditorProps>(
         <LexicalComposer initialConfig={buildInitialConfig(initialValue)}>
           <RichTextPlugin
             contentEditable={
-              <div className="min-h-0 overflow-y-auto">
+              // `cursor-text` so the whole scroll wrapper (not just the
+              // contentEditable's own content-sized box) previews as
+              // clickable-to-type — matching ClickBelowContentPlugin's actual
+              // click behavior for the empty space below the last line.
+              <div className="min-h-0 cursor-text overflow-y-auto">
                 <ContentEditable
                   ref={ref}
                   ariaLabel={ariaLabel}
@@ -383,6 +388,12 @@ export const MarkdownEditor = forwardRef<HTMLDivElement, MarkdownEditorProps>(
             ErrorBoundary={LexicalErrorBoundary}
           />
           <HistoryPlugin />
+          {/* Clicking the empty space below the last line (the field's outer
+            grid cell is stretched to a fixed min-height by the dialog, but
+            the contentEditable itself only grows to fit its content) focuses
+            the editor with the caret forced to the document's end, instead
+            of silently missing. */}
+          <ClickBelowContentPlugin />
           {/* Block / link shortcuts (headings, lists, tables, horizontal rules,
             links, etc.) — the upstream MarkdownShortcutPlugin handles these
             correctly. Text-format transformers (**bold**, *italic*, ==hl==,