From 1d760d6ab6ee11e85a65d70bc657eb1fad6d471d Mon Sep 17 00:00:00 2001
From: ayattara <alassane.yattara@savoirfairelinux.com>
Date: Sat, 8 Aug 2026 07:09:40 +0000
Subject: [PATCH 1/3] Add checklist (GFM task-list) toolbar button

Adds applyCheckboxList, mirroring the existing bullet/numbered-list
toggle transforms: toggles a "- [ ] " marker on every non-blank
selected line, converting a plain bullet in-place to "- [ ] " rather
than double-prefixing, and toggles all-checked lines back to plain
text in one click. Wires a new "checkbox-list" entry into
TOOLBAR_ACTIONS so the button shows in MarkdownToolbar for both the
notes panel and the kanban modal (both share the same component).

Adds unit tests covering empty note, blank-line caret, full-selection
toggle on/off, blank-line skipping mid-selection, existing-bullet
conversion, and bare-caret behavior. Updates README's toolbar feature
list to mention the checklist button.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 README.md          | 11 ++++++-----
 ui/bundle.js       | 42 +++++++++++++++++++++++++++++++++++++--
 ui/bundle.test.mjs | 49 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 95 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 5d5036d..d135114 100644
--- a/README.md
+++ b/README.md
@@ -9,11 +9,12 @@ AI-assisted proofreading.
 - **Notes task panel** — a dockview panel in the task workspace (`+` → Notes),
   also available on a phone under the grouped **Panels** bottom-nav action.
 - **Markdown editing with a formatting toolbar** — a scrollable markdown
-  `<textarea>` (bold, italic, headings, bullet/numbered lists, links, inline
-  code, and code blocks), shared byte-for-byte by the task panel and the
-  kanban modal, with debounced autosave. The toolbar's actions insert or wrap
-  the right markdown around your current selection (or at the caret) so you
-  never have to remember the syntax.
+  `<textarea>` (bold, italic, headings, bullet/numbered/checklist lists,
+  links, inline code, and code blocks), shared byte-for-byte by the task
+  panel and the kanban modal, with debounced autosave. The toolbar's actions
+  insert or wrap the right markdown around your current selection (or at the
+  caret) so you never have to remember the syntax — including GFM task-list
+  checkboxes (`- [ ] `) via the checklist button.
 - **Enhance with AI** — a button next to the toolbar sends the note's current
   markdown to your configured utility agent to proofread grammar, spelling,
   and clarity. The result is shown as a preview with **Accept**/**Discard**
diff --git a/ui/bundle.js b/ui/bundle.js
index 7c01d82..1719738 100644
--- a/ui/bundle.js
+++ b/ui/bundle.js
@@ -212,6 +212,43 @@ export function applyNumberedList(text, selStart, selEnd) {
   };
 }
 
+// applyCheckboxList toggles a GFM task-list marker ("- [ ] ") on every
+// non-blank line the selection touches, mirroring applyBulletList's
+// "converges to all-listified in one click" idiom: toggling off requires
+// every non-blank line to already carry the checkbox marker, otherwise the
+// action adds it to whichever lines are missing it. A line that already has
+// a plain bullet ("- ") gets the checkbox inserted right after the dash
+// rather than double-prefixed, so "- item" becomes "- [ ] item".
+export function applyCheckboxList(text, selStart, selEnd) {
+  const { start, end } = lineRangeBounds(text, selStart, selEnd);
+  const block = text.slice(start, end);
+  if (selStart === selEnd && block.trim() === "") {
+    const marker = "- [ ] ";
+    const value = text.slice(0, start) + marker + block + text.slice(end);
+    return { value, selStart: selStart + marker.length, selEnd: selEnd + marker.length };
+  }
+  const lines = block.split("\n");
+  const checkboxRe = /^-\s+\[[ xX]\]\s+/;
+  const bulletOnlyRe = /^-\s+/;
+  const allChecked = lines.every((l) => checkboxRe.test(l) || l.trim() === "");
+  const newLines = lines.map((l) => {
+    if (l.trim() === "") return l;
+    if (allChecked) return l.replace(checkboxRe, "");
+    if (checkboxRe.test(l)) return l;
+    if (bulletOnlyRe.test(l)) return l.replace(bulletOnlyRe, (m) => `${m}[ ] `);
+    return `- [ ] ${l}`;
+  });
+  const newBlock = newLines.join("\n");
+  const value = text.slice(0, start) + newBlock + text.slice(end);
+  const deltaFirstLine = newLines[0].length - lines[0].length;
+  const deltaTotal = newBlock.length - block.length;
+  return {
+    value,
+    selStart: Math.max(start, selStart + deltaFirstLine),
+    selEnd: Math.max(start, selEnd + deltaTotal),
+  };
+}
+
 // ---------------------------------------------------------------------------
 // enhanceNote — the "Enhance with AI" client. POSTs the note's current
 // markdown to this plugin's own `enhance` webhook (server/plugin.go), which
@@ -687,7 +724,7 @@ function useNoteStore(host, { taskId, surfaceId }) {
 
 // TOOLBAR_ACTIONS drives MarkdownToolbar: each entry pairs a short glyph
 // label (this bundle ships no icon set — see bookGlyph's own comment on why
-// SVGs are hand-inlined elsewhere; plain glyphs are simpler for eight small
+// SVGs are hand-inlined elsewhere; plain glyphs are simpler for nine small
 // buttons) with the pure transform it applies to the textarea's current
 // selection.
 const TOOLBAR_ACTIONS = [
@@ -696,13 +733,14 @@ const TOOLBAR_ACTIONS = [
   { id: "heading", title: "Heading", glyph: "H", apply: (text, selStart, selEnd) => applyHeading(text, selStart, selEnd, 2) },
   { id: "bullet-list", title: "Bullet list", glyph: "\u2022\u2261", apply: applyBulletList },
   { id: "numbered-list", title: "Numbered list", glyph: "1.\u2261", apply: applyNumberedList },
+  { id: "checkbox-list", title: "Checklist", glyph: "\u2611", apply: applyCheckboxList },
   { id: "link", title: "Link", glyph: "\uD83D\uDD17", apply: applyLink },
   { id: "inline-code", title: "Inline code", glyph: "</>", apply: applyInlineCode },
   { id: "code-block", title: "Code block", glyph: "{ }", apply: applyCodeBlock },
 ];
 
 // MarkdownToolbar — the formatting toolbar (AC: bold, italic, heading,
-// bullet/numbered list, link, inline code, code block). Each button calls
+// bullet/numbered/checkbox list, link, inline code, code block). Each button calls
 // onAction(applyFn); NotesEditor's applyTransform runs applyFn against the
 // textarea's current selection and applies the resulting value/selection.
 function MarkdownToolbar({ host, onAction, disabled }) {
diff --git a/ui/bundle.test.mjs b/ui/bundle.test.mjs
index 07d5974..8a70829 100644
--- a/ui/bundle.test.mjs
+++ b/ui/bundle.test.mjs
@@ -162,6 +162,7 @@ const {
   applyHeading,
   applyBulletList,
   applyNumberedList,
+  applyCheckboxList,
   applyLink,
   applyInlineCode,
   applyCodeBlock,
@@ -751,6 +752,54 @@ test("applyNumberedList at a blank line inserts a marker for typing", () => {
   assert.equal(result.selEnd, caretOnBlankLine + 3);
 });
 
+// --- applyCheckboxList: GFM task-list toolbar button ----------------------
+
+test("applyCheckboxList prefixes every non-blank selected line with '- [ ] '", () => {
+  const text = "milk\neggs\nbread";
+  const result = applyCheckboxList(text, 0, text.length);
+  assert.equal(result.value, "- [ ] milk\n- [ ] eggs\n- [ ] bread");
+});
+
+test("applyCheckboxList toggles the marker back off when every line already has it", () => {
+  const text = "- [ ] milk\n- [x] eggs";
+  const result = applyCheckboxList(text, 0, text.length);
+  assert.equal(result.value, "milk\neggs");
+});
+
+test("applyCheckboxList at an empty note inserts a checkbox marker", () => {
+  const result = applyCheckboxList("", 0, 0);
+  assert.equal(result.value, "- [ ] ");
+  assert.equal(result.selStart, 6);
+  assert.equal(result.selEnd, 6);
+});
+
+test("applyCheckboxList at a blank line inserts a marker for typing", () => {
+  const text = "before\n\nafter";
+  const caretOnBlankLine = "before\n".length;
+  const result = applyCheckboxList(text, caretOnBlankLine, caretOnBlankLine);
+  assert.equal(result.value, "before\n- [ ] \nafter");
+  assert.equal(result.selStart, caretOnBlankLine + 6);
+  assert.equal(result.selEnd, caretOnBlankLine + 6);
+});
+
+test("applyCheckboxList skips blank lines within the selection", () => {
+  const text = "milk\n\nbread";
+  const result = applyCheckboxList(text, 0, text.length);
+  assert.equal(result.value, "- [ ] milk\n\n- [ ] bread");
+});
+
+test("applyCheckboxList inserts the checkbox marker right after an existing plain bullet", () => {
+  const text = "- milk\n- eggs";
+  const result = applyCheckboxList(text, 0, text.length);
+  assert.equal(result.value, "- [ ] milk\n- [ ] eggs");
+});
+
+test("applyCheckboxList at a bare caret (no selection) only affects that line", () => {
+  const text = "milk\neggs\nbread";
+  const result = applyCheckboxList(text, 4, 4);
+  assert.equal(result.value, "- [ ] milk\neggs\nbread");
+});
+
 // ---------------------------------------------------------------------------
 // enhanceNote — the "Enhance with AI" client (AC5/AC6/AC7).
 // ---------------------------------------------------------------------------

From a6f59cdf21f5775cd6750fa93a4ca95f4b65170b Mon Sep 17 00:00:00 2001
From: ayattara <alassane.yattara@savoirfairelinux.com>
Date: Sat, 8 Aug 2026 07:18:05 +0000
Subject: [PATCH 2/3] Use host.ui.RichTextEditor for the notes panel, matching
 the Plan editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The task panel/mobile surface now renders host.ui.RichTextEditor — the
same TipTap-based WYSIWYG editor the Plan panel uses (markdown in,
markdown out via tiptap-markdown; bold/italic/headings/lists/links/
code blocks/checklists reachable through its own bubble menu and "/"
slash commands) — instead of the hand-rolled markdown textarea, per
the request to model the notes editor on the existing Plan text area.

The kanban card's "Edit notes" modal keeps the markdown textarea +
MarkdownToolbar: host.ui.RichTextEditor calls useMermaidErrorToast,
which requires a ToastProvider ancestor, and the host's
PluginModalHost (where this plugin's modal mounts) does not render
one — this is the same platform gap a prior commit
(283b7f81, "fix: use a plain textarea in the kanban notes modal")
already discovered and documented; it still applies. NotesEditor now
branches on `presentation` internally to pick the right editor per
surface, rather than exposing a separate prop.

Since host.ui.RichTextEditor only consumes its `value` prop as the
TipTap editor's initial content (no effect resyncs a later value
change, same as the Plan panel's own tiptap-plan-editor.tsx), a
`lastRichValueRef`-driven effect bumps an `editorKey` to force a
remount whenever the note's value changes for a reason other than the
editor's own onChange (a cross-tab sync refresh, or an accepted
"Enhance with AI" preview) — mirroring task-plan-panel.tsx's own
`editorKey` pattern for the same problem.

Updates README to describe the new per-surface editor split and
updates a stale test comment referencing the old unified-editor
design.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 README.md          |  42 ++++++++++-------
 ui/bundle.js       | 111 +++++++++++++++++++++++++++++++++++----------
 ui/bundle.test.mjs |  16 ++++---
 3 files changed, 121 insertions(+), 48 deletions(-)

diff --git a/README.md b/README.md
index d135114..63cd37f 100644
--- a/README.md
+++ b/README.md
@@ -1,28 +1,36 @@
 # kandev-plugin-notes
 
 A [Kandev](https://github.com/kdlbs/kandev) plugin that gives every task a
-private markdown notes scratchpad, with a formatting toolbar and optional
-AI-assisted proofreading.
+private markdown notes scratchpad, edited with a rich, Plan-panel-style
+editor and optional AI-assisted proofreading.
 
 ## What it does
 
 - **Notes task panel** — a dockview panel in the task workspace (`+` → Notes),
   also available on a phone under the grouped **Panels** bottom-nav action.
-- **Markdown editing with a formatting toolbar** — a scrollable markdown
-  `<textarea>` (bold, italic, headings, bullet/numbered/checklist lists,
-  links, inline code, and code blocks), shared byte-for-byte by the task
-  panel and the kanban modal, with debounced autosave. The toolbar's actions
-  insert or wrap the right markdown around your current selection (or at the
-  caret) so you never have to remember the syntax — including GFM task-list
-  checkboxes (`- [ ] `) via the checklist button.
-- **Enhance with AI** — a button next to the toolbar sends the note's current
-  markdown to your configured utility agent to proofread grammar, spelling,
-  and clarity. The result is shown as a preview with **Accept**/**Discard**
-  before it ever replaces your note — nothing is overwritten automatically.
-  See "Notes are private to you" below for the privacy trade-off this makes.
-- **Kanban shortcut** — `Edit > Edit notes` on a kanban card opens the same
-  editor (toolbar, AI button included) in a fixed-size modal — the modal
-  itself never grows as you type; the editor scrolls internally instead.
+  It renders `host.ui.RichTextEditor`, the same TipTap-based WYSIWYG editor
+  the Plan panel uses: bold, italic, headings, bullet/numbered lists, links,
+  code blocks, and GFM checklists are all reachable through its selection
+  bubble menu and "/" slash commands — markdown in, markdown out, no
+  separate toolbar needed (the Plan panel has none either). Content
+  autosaves through host.storage, debounced.
+- **Kanban shortcut** — `Edit > Edit notes` on a kanban card opens the note
+  in a fixed-size modal — the modal itself never grows as you type; the
+  editor scrolls internally instead. The modal uses a markdown `<textarea>`
+  with its own formatting toolbar (bold, italic, heading, bullet/numbered/
+  checklist lists, link, inline code, code block) rather than the rich
+  editor: `host.ui.RichTextEditor` depends on a `ToastProvider` ancestor
+  that the host's plugin-modal surface doesn't provide, so it cannot mount
+  there (a host-platform gap, not something this plugin can fix). The
+  toolbar's actions insert or wrap the right markdown around your current
+  selection (or at the caret) so you never have to remember the syntax —
+  including GFM task-list checkboxes (`- [ ] `) via the checklist button.
+- **Enhance with AI** — a button next to the toolbar/editor sends the note's
+  current markdown to your configured utility agent to proofread grammar,
+  spelling, and clarity. The result is shown as a preview with
+  **Accept**/**Discard** before it ever replaces your note — nothing is
+  overwritten automatically. See "Notes are private to you" below for the
+  privacy trade-off this makes.
 - **Card indicator** — a small glyph on cards that have a note.
 - **Cross-tab sync** — an edit in one tab shows up in another without a reload.
 
diff --git a/ui/bundle.js b/ui/bundle.js
index 1719738..586135c 100644
--- a/ui/bundle.js
+++ b/ui/bundle.js
@@ -7,16 +7,22 @@
 // (`make package` / `make package-host`).
 //
 // The plugin: a per-user, private scratchpad note on a task, edited as
-// markdown through one shared editor on both surfaces:
-//   - A task panel (registerTaskPanel, mobileEnabled) and
+// markdown on two surfaces:
+//   - A task panel (registerTaskPanel, mobileEnabled) — renders
+//     host.ui.RichTextEditor, the same TipTap-based WYSIWYG editor the Plan
+//     panel uses (markdown-in/markdown-out via tiptap-markdown, bold/
+//     italic/headings/lists/links/code blocks/checklists all reachable
+//     through its own bubble menu and "/" slash commands — no custom
+//     toolbar needed, mirroring how the Plan panel itself has none), and
 //   - a kanban card menu action (registerTaskMenuAction, group "edit") that
-//     opens the same editor in a modal, bound to that card's own taskId.
-//   Both render a scrollable markdown `<textarea>` with a formatting
-//   toolbar (bold/italic/heading/lists/link/code) above it, and autosave
-//   through host.storage. This editor intentionally does not use
-//   host.ui.RichTextEditor (see makeNoteModalContent's history below for
-//   why the modal surface could never use it) — one markdown editor keeps
-//   both surfaces byte-identical and needs no host WYSIWYG dependency.
+//     opens a modal, bound to that card's own taskId. The modal keeps a
+//     scrollable markdown `<textarea>` with its own formatting toolbar
+//     (bold/italic/heading/lists/link/code/checklist) instead, because
+//     host.ui.RichTextEditor cannot mount inside the host's PluginModalHost
+//     (see makeNoteModalContent's comment for the ToastProvider gap this
+//     hits — host-platform code this repo cannot change).
+//   Both surfaces autosave through host.storage on the same debounced,
+//   conflict-aware store.
 //   - A task-card-indicators component shows a glyph when the task has a
 //     non-empty note.
 //   - An "Enhance with AI" button (both surfaces) sends the note's current
@@ -668,11 +674,14 @@ export function disposeNoteIndicatorSubscription() {
 // "current task".
 //
 // presentation: "modal" gives NotesEditor its fixed-height container (see
-// below) — this was previously the surface that had to fall back to a plain
-// `<textarea>` because host.ui.RichTextEditor's ToastProvider dependency
-// isn't satisfied inside the host's PluginModalHost (a host-platform gap,
-// not fixable from this repo). Now that both surfaces share one markdown
-// editor, that gap no longer applies to either surface.
+// below) AND keeps it on the markdown-textarea-plus-toolbar editor rather
+// than host.ui.RichTextEditor (the real, Plan-panel-identical TipTap editor
+// NotesEditor uses for the "panel"/"mobile" surfaces below): RichTextEditor
+// internally calls useMermaidErrorToast, which requires a ToastProvider
+// ancestor, and the host's PluginModalHost (where this modal mounts) does
+// not render one — confirmed live (empty, uneditable modal body). That is
+// host-platform code this repo cannot change, so the modal keeps the
+// textarea+toolbar fallback until the host wraps plugin modals in one.
 // ---------------------------------------------------------------------------
 export function makeNoteModalContent(host, taskId) {
   return function NoteModalContent() {
@@ -779,6 +788,13 @@ function NotesEditor({ host, taskId, surfaceId, presentation }) {
 
   const isMobile = presentation === "mobile";
   const isModal = presentation === "modal";
+  // The panel/mobile surfaces use host.ui.RichTextEditor — the same TipTap
+  // editor the Plan panel renders (bold/italic/headings/lists/links/code
+  // blocks/checklists all built in via its own bubble menu + "/" slash
+  // commands, no custom toolbar needed). The kanban modal surface cannot:
+  // see makeNoteModalContent's comment for why (ToastProvider gap in
+  // PluginModalHost) — it keeps the markdown textarea + MarkdownToolbar.
+  const useRichEditor = !isModal;
   const containerStyle = isModal
     ? // Fixed height (not a min-height) so the modal itself stops growing as
       // content is typed — the editor below scrolls internally instead
@@ -801,6 +817,36 @@ function NotesEditor({ host, taskId, surfaceId, presentation }) {
     }
   });
 
+  // RichTextEditor (see rich-text-editor.tsx) only consumes its `value` prop
+  // as the TipTap editor's *initial* content — like the Plan panel, there is
+  // no effect syncing later `value` changes into an already-mounted editor.
+  // The Plan panel's own fix for this is to bump a `key` (see
+  // task-plan-panel.tsx's `editorKey`) to force a remount whenever the
+  // content changes for a reason other than the editor's own onChange (a
+  // cross-tab sync refresh, or an accepted "Enhance with AI" preview) — this
+  // mirrors that pattern. lastRichValueRef tracks the value this editor
+  // instance already has, so the effect below can tell "my own onChange
+  // echoed back" (no remount, would cost the caret position) apart from "the
+  // value moved out from under me" (remount needed).
+  const [editorKey, setEditorKey] = React.useState(0);
+  const lastRichValueRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!useRichEditor || !snapshot || !snapshot.loaded) return;
+    if (lastRichValueRef.current === null) {
+      lastRichValueRef.current = snapshot.value;
+      return;
+    }
+    if (snapshot.value !== lastRichValueRef.current) {
+      lastRichValueRef.current = snapshot.value;
+      setEditorKey((k) => k + 1);
+    }
+  }, [useRichEditor, snapshot && snapshot.loaded, snapshot && snapshot.value]);
+
+  function handleRichTextChange(next) {
+    lastRichValueRef.current = next;
+    store.setValue(next);
+  }
+
   if (!snapshot) {
     return h("div", { style: containerStyle }, "Loading notes…");
   }
@@ -976,24 +1022,39 @@ function NotesEditor({ host, taskId, surfaceId, presentation }) {
         style: {
           display: "flex",
           alignItems: "center",
-          justifyContent: "space-between",
+          justifyContent: useRichEditor ? "flex-end" : "space-between",
           gap: "0.5rem",
           marginBottom: "0.5rem",
           flexWrap: "wrap",
         },
       },
-      h(MarkdownToolbar, { host, onAction: applyTransform, disabled: isEnhancing }),
+      // The rich editor (panel/mobile) needs no custom toolbar — bold,
+      // italic, headings, lists, links, code blocks and checklists are all
+      // reachable through its own bubble menu (on selection) and "/" slash
+      // commands, exactly like the Plan panel. Only the modal's plain
+      // textarea needs MarkdownToolbar's buttons.
+      useRichEditor ? null : h(MarkdownToolbar, { host, onAction: applyTransform, disabled: isEnhancing }),
       enhanceButton,
     ),
-    h(ui.Textarea, {
-      ref: textareaRef,
-      value: snapshot.value,
-      onChange: (e) => store.setValue(e.target.value),
-      placeholder: "Jot a note about this task… (Markdown supported)",
-      className: "flex-1 min-h-0 resize-none text-sm leading-relaxed font-mono",
-      style: { overflowY: "auto" },
-      "data-testid": isModal ? "notes-modal-editor" : "notes-panel-editor",
-    }),
+    useRichEditor
+      ? h(ui.RichTextEditor, {
+          key: `${surfaceId}-${taskId}-${editorKey}`,
+          taskId,
+          value: snapshot.value,
+          onChange: handleRichTextChange,
+          placeholder: "Jot a note about this task… (Markdown supported)",
+          className: "flex-1 min-h-0",
+          testId: "notes-panel-editor",
+        })
+      : h(ui.Textarea, {
+          ref: textareaRef,
+          value: snapshot.value,
+          onChange: (e) => store.setValue(e.target.value),
+          placeholder: "Jot a note about this task… (Markdown supported)",
+          className: "flex-1 min-h-0 resize-none text-sm leading-relaxed font-mono",
+          style: { overflowY: "auto" },
+          "data-testid": "notes-modal-editor",
+        }),
     enhancePreview,
     enhanceError,
     status,
diff --git a/ui/bundle.test.mjs b/ui/bundle.test.mjs
index 8a70829..5cb6671 100644
--- a/ui/bundle.test.mjs
+++ b/ui/bundle.test.mjs
@@ -265,12 +265,16 @@ test("AC11: the kanban modal surface uses the bare id 'note-modal' as its writer
   assert.equal(jsxCalls[0].props.surfaceId, "note-modal");
 });
 
-// The kanban modal surface shares the exact same markdown editor as the
-// task panel (see the file header and makeNoteModalContent's own comment):
-// there is no more editorKind/RichTextEditor branch. presentation: "modal"
-// is the only signal NotesEditor needs to give the modal its fixed-height
-// container (AC: fixed modal size with scrollable textarea) instead of the
-// panel's height: 100%.
+// The kanban modal surface renders the same NotesEditor component as the
+// task panel (see the file header and makeNoteModalContent's own comment)
+// — presentation: "modal" is the one prop that both (a) gives the modal its
+// fixed-height container (AC: fixed modal size with scrollable textarea)
+// instead of the panel's height: 100%, and (b) tells NotesEditor's own
+// internals to render the markdown textarea + toolbar instead of
+// host.ui.RichTextEditor (which cannot mount inside the host's
+// PluginModalHost — see makeNoteModalContent's comment). There is no
+// separate editorKind prop; the branch lives inside NotesEditor, keyed off
+// presentation alone.
 test("the kanban modal surface uses presentation 'modal', the same NotesEditor as the panel", () => {
   const { host, jsxCalls } = createFakeHost();
   const NoteModalContent = makeNoteModalContent(host, "task-42");

From 6598d950eda9d9200512e90aea51453e2c55fd17 Mon Sep 17 00:00:00 2001
From: ayattara <alassane.yattara@savoirfairelinux.com>
Date: Sat, 8 Aug 2026 07:44:44 +0000
Subject: [PATCH 3/3] fix: hide dead comment button on rich editor; add modal
 preview toggle

- host.ui.RichTextEditor's bubble menu always renders a "comment" button
  (inherited unconditionally from the Plan editor's TipTapPlanEditor),
  but the plugin-facing RichTextEditor wrapper never forwards
  onSelectionChange, so clicking it is a silent no-op for every plugin
  that uses it, not just this one. There is no prop to disable it and no
  host change is in scope here, so this hides it with a small scoped CSS
  rule (injectPluginStyles) targeting the panel's own RichTextEditor
  instance via a new "kandev-notes-richtext" class.
- Add a "Preview" toggle next to "Enhance with AI" in the kanban modal
  that swaps the plain textarea for host.ui.RichTextReadOnly (the Plan
  editor's read-only renderer), showing headings/lists/checkboxes/code
  blocks/links rendered as they'll look. This has no ToastProvider
  dependency (unlike the fully-editable RichTextEditor), so it's safe to
  mount inside the modal, which still can't host the editable rich editor
  due to that host-platform gap (documented in an earlier commit).
- Confirmed the "Todos" tab seen alongside "Notes" in the add-panel menu
  is a built-in kandev panel (layout-manager/constants.ts), unrelated to
  this plugin.
- Add unit tests for injectPluginStyles (single tag, idempotent, correct
  selector) and for initialize() being safe without a document global.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 README.md          |  20 ++++++++
 ui/bundle.js       | 116 +++++++++++++++++++++++++++++++++++++++------
 ui/bundle.test.mjs |  63 ++++++++++++++++++++++++
 3 files changed, 185 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 63cd37f..778846d 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,16 @@ editor and optional AI-assisted proofreading.
   bubble menu and "/" slash commands — markdown in, markdown out, no
   separate toolbar needed (the Plan panel has none either). Content
   autosaves through host.storage, debounced.
+
+  The selection bubble menu also shows a purple "comment" icon inherited
+  from the Plan editor's internals — it is always rendered by
+  `TipTapPlanEditor` regardless of whether a caller wires up
+  `onSelectionChange`, and `host.ui.RichTextEditor`'s narrow plugin-facing
+  contract never does. Clicking it is a host-platform no-op for every
+  plugin that uses `host.ui.RichTextEditor`, not just this one, and there is
+  no prop to disable it — so this plugin hides it with a small scoped CSS
+  rule injected at startup (see `injectPluginStyles` in `ui/bundle.js`)
+  rather than shipping a dead button.
 - **Kanban shortcut** — `Edit > Edit notes` on a kanban card opens the note
   in a fixed-size modal — the modal itself never grows as you type; the
   editor scrolls internally instead. The modal uses a markdown `<textarea>`
@@ -25,6 +35,16 @@ editor and optional AI-assisted proofreading.
   toolbar's actions insert or wrap the right markdown around your current
   selection (or at the caret) so you never have to remember the syntax —
   including GFM task-list checkboxes (`- [ ] `) via the checklist button.
+
+  A **Preview** toggle next to "Enhance with AI" swaps the textarea for a
+  read-only rendered view of the same markdown (`host.ui.RichTextReadOnly`,
+  the Plan editor's read-only renderer) — headings, lists, checkboxes, code
+  blocks, and links rendered as they'll actually look, without the
+  `ToastProvider` dependency that blocks the fully-editable rich editor in
+  a modal. Checkboxes render but aren't clickable in Preview (the
+  underlying TipTap node view is read-only); toggle back to Edit to check
+  them off via the checklist syntax instead.
+
 - **Enhance with AI** — a button next to the toolbar/editor sends the note's
   current markdown to your configured utility agent to proofread grammar,
   spelling, and clarity. The result is shown as a preview with
diff --git a/ui/bundle.js b/ui/bundle.js
index 586135c..9349dc2 100644
--- a/ui/bundle.js
+++ b/ui/bundle.js
@@ -778,6 +778,42 @@ function MarkdownToolbar({ host, onAction, disabled }) {
   );
 }
 
+const STYLE_ELEMENT_ID = "kandev-plugin-notes-styles";
+
+// injectPluginStyles — a one-time <style> tag this plugin owns, scoped to
+// its own DOM via the "kandev-notes-richtext" class NotesEditor puts on
+// host.ui.RichTextEditor. It exists for exactly one rule: hiding the
+// TipTap Plan editor's comment ("speech bubble") bubble-menu button, which
+// host.ui.RichTextEditor inherits unconditionally.
+//
+// TipTapPlanEditor (the component RichTextEditor wraps) always renders
+// <PlanBubbleMenu onComment={handleBubbleComment} />, where
+// handleBubbleComment just forwards to props.onSelectionChange — it never
+// checks whether that prop is actually set. RichTextEditor's plugin-facing
+// contract (rich-text-editor.tsx) deliberately forwards only
+// {value, onChange, placeholder, className, testId}, NOT
+// onSelectionChange/onCommentClick/comments/onCommentDeleted, so plugins
+// have no way to wire the comment button up to anything — clicking it is a
+// silent no-op (Report: comment icon does nothing in the notes panel).
+// There is also no per-editor prop to ask TipTapPlanEditor to omit that
+// button. Both are host-platform code this repo cannot change; the button
+// itself is only reachable to hide via a CSS selector unique enough not to
+// hit anything else. `.bg-primary.text-primary-foreground` is exactly that:
+// grep confirms only ToggleButton's `accent` variant (used solely by the
+// comment button, see plan-bubble-menu.tsx) pairs those two classes inside
+// a Plan/RichTextEditor subtree.
+export function injectPluginStyles() {
+  // Node's `node --test` harness (ui/bundle.test.mjs) has no DOM — guard so
+  // initialize() stays callable there without a `document` global.
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ELEMENT_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ELEMENT_ID;
+  style.textContent =
+    ".kandev-notes-richtext .bg-primary.text-primary-foreground { display: none !important; }";
+  document.head.appendChild(style);
+}
+
 function NotesEditor({ host, taskId, surfaceId, presentation }) {
   const { jsx: h, ui } = host;
   const React = host.React;
@@ -842,6 +878,21 @@ function NotesEditor({ host, taskId, surfaceId, presentation }) {
     }
   }, [useRichEditor, snapshot && snapshot.loaded, snapshot && snapshot.value]);
 
+  // The modal's markdown textarea has no live rendering of its own (unlike
+  // the panel's RichTextEditor, which renders WYSIWYG as you type) — a
+  // "Preview" toggle lets the user see checkboxes/headings/lists/links/code
+  // blocks rendered the same way the panel shows them, via
+  // host.ui.RichTextReadOnly (PlanReadOnlyMarkdown under the hood). That
+  // component is safe to mount inside the modal where the fully-editable
+  // RichTextEditor is not (see makeNoteModalContent's comment): it is
+  // `editable: false` and never calls useMermaidErrorToast, so it has no
+  // ToastProvider dependency. It only *renders* markdown, though — TipTap's
+  // TaskItem checkbox stays inert while editable: false, so toggling a
+  // checkbox still has to happen in the textarea (typing "x" inside
+  // `[ ]`) or via the Checklist toolbar button, not by clicking the
+  // rendered preview.
+  const [showPreview, setShowPreview] = React.useState(false);
+
   function handleRichTextChange(next) {
     lastRichValueRef.current = next;
     store.setValue(next);
@@ -940,6 +991,23 @@ function NotesEditor({ host, taskId, surfaceId, presentation }) {
       : h("span", null, "\u2728 Enhance with AI"),
   );
 
+  const previewToggleButton = isModal
+    ? h(
+        ui.Button,
+        {
+          type: "button",
+          variant: showPreview ? "secondary" : "ghost",
+          size: "sm",
+          onClick: () => setShowPreview((v) => !v),
+          "data-testid": "notes-preview-toggle",
+          title: showPreview
+            ? "Back to editing"
+            : "Preview — see checkboxes, headings, lists, links, and code blocks rendered",
+        },
+        showPreview ? "Edit" : "Preview",
+      )
+    : null;
+
   const enhancePreview =
     enhanceState.status === "preview"
       ? h(
@@ -1022,7 +1090,6 @@ function NotesEditor({ host, taskId, surfaceId, presentation }) {
         style: {
           display: "flex",
           alignItems: "center",
-          justifyContent: useRichEditor ? "flex-end" : "space-between",
           gap: "0.5rem",
           marginBottom: "0.5rem",
           flexWrap: "wrap",
@@ -1032,9 +1099,18 @@ function NotesEditor({ host, taskId, surfaceId, presentation }) {
       // italic, headings, lists, links, code blocks and checklists are all
       // reachable through its own bubble menu (on selection) and "/" slash
       // commands, exactly like the Plan panel. Only the modal's plain
-      // textarea needs MarkdownToolbar's buttons.
-      useRichEditor ? null : h(MarkdownToolbar, { host, onAction: applyTransform, disabled: isEnhancing }),
-      enhanceButton,
+      // textarea needs MarkdownToolbar's buttons, and only while not
+      // previewing (the preview has nothing to apply a selection-based
+      // transform to).
+      useRichEditor || showPreview
+        ? null
+        : h(MarkdownToolbar, { host, onAction: applyTransform, disabled: isEnhancing }),
+      h(
+        "div",
+        { style: { display: "flex", gap: "0.25rem", marginLeft: "auto" } },
+        previewToggleButton,
+        enhanceButton,
+      ),
     ),
     useRichEditor
       ? h(ui.RichTextEditor, {
@@ -1043,18 +1119,29 @@ function NotesEditor({ host, taskId, surfaceId, presentation }) {
           value: snapshot.value,
           onChange: handleRichTextChange,
           placeholder: "Jot a note about this task… (Markdown supported)",
-          className: "flex-1 min-h-0",
+          // kandev-notes-richtext: scopes the CSS rule (injected once by
+          // injectPluginStyles, see below) that hides the dead "comment"
+          // bubble-menu button host.ui.RichTextEditor inherits from the
+          // Plan editor — see that function's own comment for why it can
+          // never work here and can't be fixed by omitting a prop.
+          className: "flex-1 min-h-0 kandev-notes-richtext",
           testId: "notes-panel-editor",
         })
-      : h(ui.Textarea, {
-          ref: textareaRef,
-          value: snapshot.value,
-          onChange: (e) => store.setValue(e.target.value),
-          placeholder: "Jot a note about this task… (Markdown supported)",
-          className: "flex-1 min-h-0 resize-none text-sm leading-relaxed font-mono",
-          style: { overflowY: "auto" },
-          "data-testid": "notes-modal-editor",
-        }),
+      : showPreview
+        ? h(ui.RichTextReadOnly, {
+            value: snapshot.value,
+            className: "flex-1 min-h-0 overflow-y-auto border rounded-md",
+            testId: "notes-modal-preview",
+          })
+        : h(ui.Textarea, {
+            ref: textareaRef,
+            value: snapshot.value,
+            onChange: (e) => store.setValue(e.target.value),
+            placeholder: "Jot a note about this task… (Markdown supported)",
+            className: "flex-1 min-h-0 resize-none text-sm leading-relaxed font-mono",
+            style: { overflowY: "auto" },
+            "data-testid": "notes-modal-editor",
+          }),
     enhancePreview,
     enhanceError,
     status,
@@ -1164,6 +1251,7 @@ export function openNoteModal(host, taskId, taskTitle) {
 window.registerKandevPlugin("kandev-plugin-notes", {
   initialize(registry, host) {
     initNoteIndicatorSubscription(host);
+    injectPluginStyles();
 
     registry.registerTaskPanel({
       id: "notes",
diff --git a/ui/bundle.test.mjs b/ui/bundle.test.mjs
index 5cb6671..771ed2c 100644
--- a/ui/bundle.test.mjs
+++ b/ui/bundle.test.mjs
@@ -169,6 +169,7 @@ const {
   enhanceNote,
   enhancePreviewReducer,
   initialEnhanceState,
+  injectPluginStyles,
 } = bundle;
 
 test("registers under the manifest's plugin id", () => {
@@ -604,6 +605,68 @@ test("AC19: destroy() unsubscribes, clears the indicator cache, and clears pendi
   }
 });
 
+test("AC19: initialize() does not throw without a `document` global (the Node test env has none)", () => {
+  assert.equal(typeof document, "undefined");
+  const { host } = createFakeHost();
+  const registry = createFakeRegistry();
+  assert.doesNotThrow(() => registeredPlugin.initialize(registry, host));
+});
+
+// injectPluginStyles hides the dead "comment" bubble-menu button
+// host.ui.RichTextEditor inherits unconditionally from the Plan editor (see
+// the function's own comment in bundle.js for why it can never be wired up
+// to anything from a plugin). This is the framework-free half of that fix —
+// a minimal fake `document` stands in for jsdom, since the fix's only real
+// behavior (idempotent single <style> tag, correct selector text) needs no
+// full DOM.
+function createFakeDocument() {
+  const elementsById = new Map();
+  const head = {
+    appendChild(el) {
+      elementsById.set(el.id, el);
+    },
+  };
+  return {
+    head,
+    getElementById: (id) => elementsById.get(id) || null,
+    createElement: () => ({ id: "", textContent: "" }),
+  };
+}
+
+test("injectPluginStyles adds exactly one <style> tag scoped to kandev-notes-richtext, hiding the accent comment button", () => {
+  const originalDocument = globalThis.document;
+  globalThis.document = createFakeDocument();
+  try {
+    injectPluginStyles();
+    const style = globalThis.document.getElementById("kandev-plugin-notes-styles");
+    assert.ok(style, "expected a style tag to be inserted");
+    assert.match(style.textContent, /\.kandev-notes-richtext/);
+    assert.match(style.textContent, /\.bg-primary\.text-primary-foreground/);
+    assert.match(style.textContent, /display:\s*none\s*!important/);
+  } finally {
+    globalThis.document = originalDocument;
+  }
+});
+
+test("injectPluginStyles is idempotent — calling it twice leaves exactly one style tag", () => {
+  const originalDocument = globalThis.document;
+  const fakeDoc = createFakeDocument();
+  globalThis.document = fakeDoc;
+  let createCount = 0;
+  const realCreateElement = fakeDoc.createElement;
+  fakeDoc.createElement = (...args) => {
+    createCount++;
+    return realCreateElement(...args);
+  };
+  try {
+    injectPluginStyles();
+    injectPluginStyles();
+    assert.equal(createCount, 1);
+  } finally {
+    globalThis.document = originalDocument;
+  }
+});
+
 // ---------------------------------------------------------------------------
 // Markdown transforms (AC3: toolbar actions insert/wrap the correct markdown
 // around the selection, or at the caret with no selection, and return an