From e7213465492db1279bc02ef39030d6ac937e8a52 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Thu, 14 May 2026 20:40:54 +0300
Subject: [PATCH 01/30] docs: add design spec for inline WYSIWYG edit mode

Notion-style per-segment WYSIWYG editor to replace the chunky textarea:
contenteditable surface, scoped inline-markdown serializer, floating
format toolbar, and a raw-markdown escape-hatch toggle.

Also gitignore the .superpowers/ brainstorm scratch directory.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .gitignore                                    |   1 +
 ...6-05-14-edit-mode-inline-wysiwyg-design.md | 174 ++++++++++++++++++
 2 files changed, 175 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-05-14-edit-mode-inline-wysiwyg-design.md

diff --git a/.gitignore b/.gitignore
index a8256b4..5650f13 100644
--- a/.gitignore
+++ b/.gitignore
@@ -161,3 +161,4 @@ fastlane/keys/
 fastlane/report.xml
 fastlane/README.md
 resources/provisioning/
+.superpowers/
diff --git a/docs/superpowers/specs/2026-05-14-edit-mode-inline-wysiwyg-design.md b/docs/superpowers/specs/2026-05-14-edit-mode-inline-wysiwyg-design.md
new file mode 100644
index 0000000..1098f0d
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-14-edit-mode-inline-wysiwyg-design.md
@@ -0,0 +1,174 @@
+# Edit Mode: Inline WYSIWYG Editor — Design
+
+**Date:** 2026-05-14
+**Status:** Approved
+
+## Problem
+
+In edit mode, clicking a segment swaps its rendered HTML for a monospace
+`<textarea>` (`EditModeController.startEdit`). The textarea's `min-height: 40px`,
+padding, and focus ring make it a chunky box that breaks the flow of the
+Notion-style "islands" layout. The editing surface also shows raw markdown
+syntax rather than the rendered content the rest of edit mode presents.
+
+## Goal
+
+Replace the per-segment textarea with a **slim, inline, Notion-style WYSIWYG
+editor**: the user edits the rendered content directly, formatting shortcuts
+toggle real visual marks, and the segment never turns into a bordered box.
+The constraint is "only do what markdown can express." A per-segment toggle
+drops into raw-markdown editing as an optional escape hatch.
+
+This feature is **inline-only**. Block-level structure (headings, lists,
+quotes, code blocks) is untouched and stays in the existing "Turn into"
+handle menu.
+
+## Approach
+
+contenteditable + a scoped inline serializer. The `.slice-content` element
+becomes `contenteditable`; formatting operations toggle marks via direct DOM
+Range manipulation; on commit a small purpose-built serializer walks the
+inline DOM and emits markdown for a fixed set of marks. The slice's raw
+markdown string remains the single source of truth — WYSIWYG is a different
+editing surface over it.
+
+Rejected alternatives:
+
+- **Turndown (HTML→MD library):** a general-purpose sledgehammer for ~5
+  inline marks; new dependency; output won't match the app's markdown style
+  without configuration.
+- **ProseMirror / TipTap / Milkdown:** a large dependency and a major
+  architectural rewrite; overkill for a per-segment slim inline editor; fights
+  the existing slice model.
+
+Approach 1 is the only contained change. The scoped serializer is tractable
+because edit mode already knows each slice's block type and only five inline
+marks are supported; the raw-markdown toggle covers everything else.
+
+## Components
+
+### New
+
+| Component | Responsibility | Location |
+|---|---|---|
+| `InlineEditor` | Manages one segment's WYSIWYG session: makes `.slice-content` `contenteditable`, places the caret, handles formatting shortcuts, toggles marks via DOM Range manipulation, owns the link popover. | `src/renderer/components/` |
+| `inlineMarkdownSerializer` | Pure module. `serializeInline(root)` walks the inline DOM → markdown. `canSerialize(root)` guards against unsupported content. No DOM mutation, no state. | `src/renderer/services/` |
+| `FloatingFormatToolbar` | The mini toolbar: renders buttons, positions itself above the active segment, reflects active-mark state for the current selection, calls into `InlineEditor`. | `src/renderer/components/` |
+
+### Modified
+
+- **`EditModeController`** — orchestrates. `startEdit()` stops creating a
+  `<textarea>`; it opens an `InlineEditor` (WYSIWYG, the default) or the raw
+  editor. Tracks per-segment raw/WYSIWYG state and global toolbar-visible
+  state. Adds two handle-menu items ("Edit as markdown", "Show/hide formatting
+  toolbar") and wires the `Cmd+/` and `Cmd+Shift+F` shortcuts.
+- **Raw editor** — today's `<textarea>` path is kept but slimmed (loses the
+  `min-height: 40px` + padding box). It is what the "Edit as markdown" toggle
+  drops into.
+
+## Data flow
+
+Entering edit mode renders slices as today (rendered HTML in `.slice-content`).
+
+Clicking a segment (default WYSIWYG):
+
+1. `EditModeController.startEdit(index)` runs `canSerialize` on the segment's
+   inline DOM. If it fails, the segment opens in raw mode instead (see Safety).
+2. Otherwise an `InlineEditor` is bound to that slice's `.slice-content`.
+3. `.slice-content` gets `contenteditable=true`, focus, caret placed.
+4. If the global toolbar-visible state is on, `FloatingFormatToolbar`
+   positions above the segment.
+
+Formatting (shortcut or toolbar button): `InlineEditor` toggles the mark in
+the DOM via Range manipulation (selection-based wrap/unwrap); the toolbar
+updates active state from the current selection.
+
+Commit (blur / `Esc` / click-away / switch segment):
+
+```
+serializeInline(.slice-content)        →  inline markdown string
+re-apply block prefix                  →  uses the slice's known block type
+                                          (existing strip/applyBlockPrefix logic)
+slicer.updateSlice(...)                →  rawMarkdown updated, onContentChange fired
+.slice-content re-rendered to HTML     (exactly as today)
+```
+
+## Serializer scope and safety
+
+`serializeInline` handles exactly:
+
+- text nodes (literal markdown characters backslash-escaped so plain text
+  does not become syntax on re-render)
+- `<strong>` / `<b>` → `**`
+- `<em>` / `<i>` → `*`
+- `<del>` / `<s>` → `~~`
+- `<code>` → `` ` ``
+- `<a href>` → `[text](url)`
+- `<br>` → newline
+
+Nested marks produce nested syntax.
+
+**Safety guard:** `canSerialize(root)` runs before a segment opens in WYSIWYG.
+If the rendered inline DOM contains anything outside the supported set — an
+inline `<img>`, `<sup>`, a styled `<span>`, raw HTML — the segment opens in
+raw mode instead. Source that cannot be faithfully round-tripped is never
+silently mangled.
+
+## Raw-mode toggle
+
+`Cmd+/` or the handle-menu "Edit as markdown" item flips the *current* edit
+session to the slim raw textarea. It is momentary: leaving the segment and
+clicking back in returns to WYSIWYG. It is a "show me the source" escape
+hatch, not a sticky per-segment mode. (Could be made sticky later.)
+
+## Floating toolbar
+
+- Floats just above the active segment; follows the user between segments;
+  hides when no segment is active.
+- Global visibility state, **starts hidden** every edit-mode session. Toggled
+  by `Cmd+Shift+F` or the handle-menu item.
+- Buttons: bold, italic, strikethrough, inline code, link, clear-formatting.
+  Each reflects whether the mark is active for the current selection.
+- The link button and `Cmd+K` open a small URL-input popover anchored to the
+  toolbar.
+
+## Keyboard shortcuts (active WYSIWYG segment)
+
+| Shortcut | Action |
+|---|---|
+| `Cmd+B` | Bold |
+| `Cmd+I` | Italic |
+| `Cmd+Shift+X` | Strikethrough |
+| `Cmd+E` | Inline code |
+| `Cmd+K` | Link (opens URL popover) |
+| `Cmd+/` | Toggle raw markdown for the active segment |
+| `Cmd+Shift+F` | Toggle the floating toolbar |
+| `Esc` | Commit and exit the segment (unchanged) |
+
+## Error handling and edge cases
+
+- Empty segment → serializes to an empty string, handled as today.
+- Selection spanning a partial mark → toggle unwraps only the selected run.
+- Switching segments mid-edit → commit the previous segment (existing pattern).
+- Unsupported inline content → segment auto-opens in raw mode (the
+  `canSerialize` guard).
+
+## Testing
+
+- **`inlineMarkdownSerializer`** — the bulk of the coverage, since it is pure:
+  every mark, nested marks, links, text escaping, and `canSerialize` rejecting
+  each unsupported node type. Round-trip tests:
+  `markdown → pluginManager.render → serializeInline → expect original`
+  (modulo normalization).
+- **`InlineEditor`** — mark toggle wraps/unwraps a selection correctly;
+  partial-selection unwrap; shortcuts dispatch the right command.
+- **`EditModeController`** — raw↔WYSIWYG toggle, toolbar toggle, and the commit
+  flow still updates `rawMarkdown` and fires `onContentChange`; a
+  `canSerialize` failure routes to raw mode.
+
+## Out of scope
+
+- Block-level editing (headings, lists, quotes, code blocks) — stays in the
+  existing "Turn into" handle menu.
+- General HTML→markdown conversion — only the five inline marks above.
+- Sticky per-segment raw mode — the toggle is momentary for now.

From 9bc230c7e8538067a1af9ad2c22405d910bb3675 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Thu, 14 May 2026 20:53:16 +0300
Subject: [PATCH 02/30] docs: add implementation plan for inline WYSIWYG edit
 mode

14 TDD tasks: scoped inline-markdown serializer, InlineEditor
contenteditable surface, FloatingFormatToolbar, and EditModeController
wiring (WYSIWYG/raw routing, shortcuts, handle-menu toggles).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../2026-05-14-edit-mode-inline-wysiwyg.md    | 1914 +++++++++++++++++
 1 file changed, 1914 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-05-14-edit-mode-inline-wysiwyg.md

diff --git a/docs/superpowers/plans/2026-05-14-edit-mode-inline-wysiwyg.md b/docs/superpowers/plans/2026-05-14-edit-mode-inline-wysiwyg.md
new file mode 100644
index 0000000..a6477e5
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-14-edit-mode-inline-wysiwyg.md
@@ -0,0 +1,1914 @@
+# Edit Mode: Inline WYSIWYG Editor Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace edit mode's chunky per-segment `<textarea>` with a slim, inline, Notion-style WYSIWYG editor whose formatting shortcuts and floating toolbar produce proper markdown.
+
+**Architecture:** A clicked segment's `.slice-content` becomes `contenteditable`. Formatting operations toggle DOM marks; on commit a scoped serializer walks the inline DOM and emits markdown for five marks (bold, italic, strikethrough, inline code, link). The slice's raw markdown string stays the source of truth. A `canSerialize` guard routes any segment with unsupported inline content to a slim raw-markdown editor instead; a per-segment `Cmd+/` toggle does the same on demand. A floating toolbar (hidden by default) gives button access to the same marks.
+
+**Tech Stack:** TypeScript, Vitest (`environment: 'node'`, opt into jsdom per-file via `// @vitest-environment jsdom`), no new runtime dependencies.
+
+**Reference spec:** `docs/superpowers/specs/2026-05-14-edit-mode-inline-wysiwyg-design.md`
+
+---
+
+## File Structure
+
+| File | Responsibility |
+|---|---|
+| `src/renderer/services/inlineMarkdownSerializer.ts` (create) | Pure functions: `serializeInline(root)` DOM→markdown, `canSerialize(root)` guard. No DOM mutation, no state. |
+| `src/renderer/components/InlineEditor.ts` (create) | One segment's WYSIWYG session: contenteditable lifecycle, caret, mark toggle via Range, keyboard shortcuts, link insertion. |
+| `src/renderer/components/FloatingFormatToolbar.ts` (create) | Floating toolbar: renders buttons, positions above active segment, reflects active-mark state, calls into `InlineEditor`. |
+| `src/renderer/components/EditModeController.ts` (modify) | Orchestration: opens `InlineEditor` (WYSIWYG default) or slim raw editor, per-segment raw state, global toolbar-visible state, handle-menu items, `Cmd+/` and `Cmd+Shift+F` shortcuts. |
+| `src/index.css` (modify) | Styles for the inline editor caret/focus, the slimmed raw editor, and the floating toolbar. |
+| `tests/unit/renderer/services/inlineMarkdownSerializer.test.ts` (create) | Serializer coverage incl. round-trip and `canSerialize`. |
+| `tests/unit/renderer/components/InlineEditor.test.ts` (create) | Mark toggle, shortcuts, commit. |
+| `tests/unit/renderer/components/FloatingFormatToolbar.test.ts` (create) | Button render, active state, callbacks. |
+| `tests/unit/renderer/components/EditModeController.test.ts` (create) | Raw/WYSIWYG routing, toggles, commit flow. |
+
+`tests/unit/renderer/components/` does not exist yet — the first test task that needs it creates it implicitly via the file path.
+
+**DOM-construction note:** test fixtures build DOM with `element.insertAdjacentHTML('afterbegin', html)` and production re-renders use `replaceChildren()` + `insertAdjacentHTML('afterbegin', html)`. This matches the existing `EditModeController` slice-menu code and avoids a raw `innerHTML` assignment.
+
+---
+
+## Task 1: Serializer — text nodes and flat marks
+
+**Files:**
+- Create: `src/renderer/services/inlineMarkdownSerializer.ts`
+- Test: `tests/unit/renderer/services/inlineMarkdownSerializer.test.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+```ts
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect } from 'vitest';
+import { serializeInline } from '../../../../src/renderer/services/inlineMarkdownSerializer';
+
+function div(html: string): HTMLElement {
+  const el = document.createElement('div');
+  el.insertAdjacentHTML('afterbegin', html);
+  return el;
+}
+
+describe('serializeInline — text and flat marks', () => {
+  it('returns plain text unchanged', () => {
+    expect(serializeInline(div('Scala 2.13 is supported.'))).toBe('Scala 2.13 is supported.');
+  });
+
+  it('serializes strong and b to **', () => {
+    expect(serializeInline(div('a <strong>bold</strong> b'))).toBe('a **bold** b');
+    expect(serializeInline(div('a <b>bold</b> b'))).toBe('a **bold** b');
+  });
+
+  it('serializes em and i to *', () => {
+    expect(serializeInline(div('a <em>it</em> b'))).toBe('a *it* b');
+    expect(serializeInline(div('a <i>it</i> b'))).toBe('a *it* b');
+  });
+
+  it('serializes del and s to ~~', () => {
+    expect(serializeInline(div('a <del>x</del> b'))).toBe('a ~~x~~ b');
+    expect(serializeInline(div('a <s>x</s> b'))).toBe('a ~~x~~ b');
+  });
+
+  it('serializes code to backticks using raw text content', () => {
+    expect(serializeInline(div('use <code>npm i</code> now'))).toBe('use `npm i` now');
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm exec vitest run tests/unit/renderer/services/inlineMarkdownSerializer.test.ts`
+Expected: FAIL — cannot resolve `inlineMarkdownSerializer`.
+
+- [ ] **Step 3: Write minimal implementation**
+
+```ts
+/**
+ * inlineMarkdownSerializer - Converts a segment's inline DOM back into markdown.
+ *
+ * Edit mode's WYSIWYG surface lets the user toggle a fixed set of inline marks
+ * (bold, italic, strikethrough, inline code, link). On commit, the inline DOM
+ * of a slice's `.slice-content` is walked here and emitted as markdown. Only
+ * the supported tag set is handled; `canSerialize` (added later) guards against
+ * anything else so source is never silently mangled.
+ */
+
+/**
+ * Serialize the inline children of `root` to a markdown string.
+ */
+export function serializeInline(root: HTMLElement): string {
+  let out = '';
+  root.childNodes.forEach((node) => {
+    out += serializeNode(node);
+  });
+  return out;
+}
+
+function serializeNode(node: Node): string {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent ?? '';
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return '';
+  }
+  const el = node as HTMLElement;
+  const inner = Array.from(el.childNodes).map(serializeNode).join('');
+  switch (el.tagName) {
+    case 'STRONG':
+    case 'B':
+      return `**${inner}**`;
+    case 'EM':
+    case 'I':
+      return `*${inner}*`;
+    case 'DEL':
+    case 'S':
+      return `~~${inner}~~`;
+    case 'CODE':
+      return `\`${el.textContent ?? ''}\``;
+    default:
+      return inner;
+  }
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm exec vitest run tests/unit/renderer/services/inlineMarkdownSerializer.test.ts`
+Expected: PASS (5 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/renderer/services/inlineMarkdownSerializer.ts tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
+git commit -m "feat: serialize inline DOM text and flat marks to markdown"
+```
+
+---
+
+## Task 2: Serializer — links, line breaks, nesting, escaping
+
+**Files:**
+- Modify: `src/renderer/services/inlineMarkdownSerializer.ts`
+- Test: `tests/unit/renderer/services/inlineMarkdownSerializer.test.ts`
+
+- [ ] **Step 1: Write the failing test (append to the existing test file)**
+
+```ts
+describe('serializeInline — links, breaks, nesting, escaping', () => {
+  it('serializes anchors to [text](href)', () => {
+    expect(serializeInline(div('see <a href="https://x.com">the site</a>')))
+      .toBe('see [the site](https://x.com)');
+  });
+
+  it('serializes br to a newline', () => {
+    expect(serializeInline(div('line one<br>line two'))).toBe('line one\nline two');
+  });
+
+  it('serializes nested marks', () => {
+    expect(serializeInline(div('<strong>bold <em>and italic</em></strong>')))
+      .toBe('**bold *and italic***');
+  });
+
+  it('escapes literal markdown characters in text nodes', () => {
+    expect(serializeInline(div('a literal * and _ and ` and ~ and [ and ]')))
+      .toBe('a literal \\* and \\_ and \\` and \\~ and \\[ and \\]');
+  });
+
+  it('does not escape inside inline code', () => {
+    expect(serializeInline(div('<code>a * b</code>'))).toBe('`a * b`');
+  });
+
+  it('round-trips: emphasis text survives markdown -> render -> serialize', () => {
+    // markdown-it would render "**only**" as <strong>only</strong>; serializing
+    // returns the original syntax.
+    expect(serializeInline(div('the <strong>only</strong> version')))
+      .toBe('the **only** version');
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm exec vitest run tests/unit/renderer/services/inlineMarkdownSerializer.test.ts`
+Expected: FAIL — anchors return inner text only, `<br>` returns `''`, escaping not applied.
+
+- [ ] **Step 3: Update the implementation**
+
+Replace the body of `serializeNode` and add `escapeText`:
+
+```ts
+/** Characters that, appearing literally in rendered text, would be re-parsed
+ *  as markdown syntax. Block-level characters (#, -, etc.) are intentionally
+ *  not escaped — they are inert inside inline content. */
+const ESCAPE_RE = /([\\`*_~[\]])/g;
+
+function escapeText(text: string): string {
+  return text.replace(ESCAPE_RE, '\\$1');
+}
+
+function serializeNode(node: Node): string {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return escapeText(node.textContent ?? '');
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return '';
+  }
+  const el = node as HTMLElement;
+  const inner = Array.from(el.childNodes).map(serializeNode).join('');
+  switch (el.tagName) {
+    case 'STRONG':
+    case 'B':
+      return `**${inner}**`;
+    case 'EM':
+    case 'I':
+      return `*${inner}*`;
+    case 'DEL':
+    case 'S':
+      return `~~${inner}~~`;
+    case 'CODE':
+      // Raw text content — markdown inside code spans is not interpreted.
+      return `\`${el.textContent ?? ''}\``;
+    case 'A': {
+      const href = el.getAttribute('href') ?? '';
+      return `[${inner}](${href})`;
+    }
+    case 'BR':
+      return '\n';
+    default:
+      return inner;
+  }
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm exec vitest run tests/unit/renderer/services/inlineMarkdownSerializer.test.ts`
+Expected: PASS (11 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/renderer/services/inlineMarkdownSerializer.ts tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
+git commit -m "feat: serialize links, breaks, nested marks, escape literal markdown"
+```
+
+---
+
+## Task 3: Serializer — `canSerialize` guard
+
+**Files:**
+- Modify: `src/renderer/services/inlineMarkdownSerializer.ts`
+- Test: `tests/unit/renderer/services/inlineMarkdownSerializer.test.ts`
+
+- [ ] **Step 1: Write the failing test (append)**
+
+```ts
+import { canSerialize } from '../../../../src/renderer/services/inlineMarkdownSerializer';
+
+describe('canSerialize', () => {
+  it('accepts content with only supported inline tags', () => {
+    expect(canSerialize(div('a <strong>b <em>c</em></strong> <a href="x">d</a>'))).toBe(true);
+    expect(canSerialize(div('plain text'))).toBe(true);
+    expect(canSerialize(div('line<br>break'))).toBe(true);
+  });
+
+  it('rejects content with an inline image', () => {
+    expect(canSerialize(div('text <img src="x.png"> more'))).toBe(false);
+  });
+
+  it('rejects content with unsupported elements', () => {
+    expect(canSerialize(div('text <sup>2</sup>'))).toBe(false);
+    expect(canSerialize(div('text <span style="color:red">x</span>'))).toBe(false);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm exec vitest run tests/unit/renderer/services/inlineMarkdownSerializer.test.ts`
+Expected: FAIL — `canSerialize` is not exported.
+
+- [ ] **Step 3: Add the implementation**
+
+Append to `src/renderer/services/inlineMarkdownSerializer.ts`:
+
+```ts
+/** Element tags the serializer knows how to faithfully emit. */
+const SUPPORTED_TAGS = new Set([
+  'STRONG', 'B', 'EM', 'I', 'DEL', 'S', 'CODE', 'A', 'BR',
+]);
+
+/**
+ * Returns true when every element inside `root` is one the serializer can
+ * faithfully round-trip. When false, the caller must fall back to raw-markdown
+ * editing rather than risk mangling the source.
+ */
+export function canSerialize(root: HTMLElement): boolean {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  let node = walker.nextNode();
+  while (node) {
+    if (!SUPPORTED_TAGS.has((node as Element).tagName)) {
+      return false;
+    }
+    node = walker.nextNode();
+  }
+  return true;
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm exec vitest run tests/unit/renderer/services/inlineMarkdownSerializer.test.ts`
+Expected: PASS (15 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/renderer/services/inlineMarkdownSerializer.ts tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
+git commit -m "feat: add canSerialize guard for unsupported inline content"
+```
+
+---
+
+## Task 4: `InlineEditor` — contenteditable lifecycle and commit
+
+**Files:**
+- Create: `src/renderer/components/InlineEditor.ts`
+- Test: `tests/unit/renderer/components/InlineEditor.test.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+```ts
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { InlineEditor } from '../../../../src/renderer/components/InlineEditor';
+
+function contentEl(html: string): HTMLElement {
+  const el = document.createElement('div');
+  el.className = 'slice-content';
+  el.insertAdjacentHTML('afterbegin', html);
+  document.body.appendChild(el);
+  return el;
+}
+
+describe('InlineEditor lifecycle', () => {
+  it('makes the element editable on start and focuses it', () => {
+    const el = contentEl('hello');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    expect(el.getAttribute('contenteditable')).toBe('true');
+    expect(document.activeElement).toBe(el);
+  });
+
+  it('commit() passes serialized markdown to onCommit and clears editable', () => {
+    const el = contentEl('a <strong>bold</strong> word');
+    const onCommit = vi.fn();
+    const editor = new InlineEditor(el, { onCommit });
+    editor.start();
+    editor.commit();
+    expect(onCommit).toHaveBeenCalledWith('a **bold** word');
+    expect(el.getAttribute('contenteditable')).toBe(null);
+  });
+
+  it('commit() is idempotent — a second call does not fire onCommit again', () => {
+    const el = contentEl('text');
+    const onCommit = vi.fn();
+    const editor = new InlineEditor(el, { onCommit });
+    editor.start();
+    editor.commit();
+    editor.commit();
+    expect(onCommit).toHaveBeenCalledTimes(1);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/InlineEditor.test.ts`
+Expected: FAIL — cannot resolve `InlineEditor`.
+
+- [ ] **Step 3: Write minimal implementation**
+
+```ts
+/**
+ * InlineEditor - Manages one segment's WYSIWYG editing session.
+ *
+ * Makes a slice's `.slice-content` element `contenteditable`, owns the caret
+ * and keyboard shortcuts, toggles inline marks via DOM Range manipulation, and
+ * on commit hands the serialized markdown back to the caller. It deliberately
+ * knows nothing about slices or markdown blocks — `EditModeController` adapts
+ * between this and the slice model.
+ */
+import { serializeInline } from '../services/inlineMarkdownSerializer';
+
+export interface InlineEditorCallbacks {
+  /** Called once when the session commits, with the segment's inline markdown. */
+  onCommit: (markdown: string) => void;
+}
+
+export class InlineEditor {
+  private el: HTMLElement;
+  private callbacks: InlineEditorCallbacks;
+  private committed = false;
+
+  constructor(el: HTMLElement, callbacks: InlineEditorCallbacks) {
+    this.el = el;
+    this.callbacks = callbacks;
+  }
+
+  /** Begin the session: make the element editable and focus it. */
+  start(): void {
+    this.el.setAttribute('contenteditable', 'true');
+    this.el.spellcheck = false;
+    this.el.focus();
+  }
+
+  /** Serialize the current DOM, hand it to the caller, and end the session. */
+  commit(): void {
+    if (this.committed) return;
+    this.committed = true;
+    const markdown = serializeInline(this.el);
+    this.el.removeAttribute('contenteditable');
+    this.callbacks.onCommit(markdown);
+  }
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/InlineEditor.test.ts`
+Expected: PASS (3 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/renderer/components/InlineEditor.ts tests/unit/renderer/components/InlineEditor.test.ts
+git commit -m "feat: add InlineEditor contenteditable lifecycle and commit"
+```
+
+---
+
+## Task 5: `InlineEditor` — mark toggle (wrap / unwrap selection)
+
+**Files:**
+- Modify: `src/renderer/components/InlineEditor.ts`
+- Test: `tests/unit/renderer/components/InlineEditor.test.ts`
+
+- [ ] **Step 1: Write the failing test (append)**
+
+```ts
+import type { InlineMark } from '../../../../src/renderer/components/InlineEditor';
+
+function selectAll(el: HTMLElement): void {
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  const sel = window.getSelection()!;
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+describe('InlineEditor mark toggle', () => {
+  it('wraps the selection in <strong> when bold is toggled on', () => {
+    const el = contentEl('hello');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    editor.toggleMark('bold' as InlineMark);
+    expect(el.querySelector('strong')?.textContent).toBe('hello');
+  });
+
+  it('unwraps when the same mark is toggled off over an identical selection', () => {
+    const el = contentEl('<strong>hello</strong>');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    editor.toggleMark('bold' as InlineMark);
+    expect(el.querySelector('strong')).toBe(null);
+    expect(el.textContent).toBe('hello');
+  });
+
+  it('isMarkActive reflects whether the selection is fully inside a mark', () => {
+    const el = contentEl('<em>x</em>');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    expect(editor.isMarkActive('italic' as InlineMark)).toBe(true);
+    expect(editor.isMarkActive('bold' as InlineMark)).toBe(false);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/InlineEditor.test.ts`
+Expected: FAIL — `toggleMark` / `isMarkActive` / `InlineMark` not defined.
+
+- [ ] **Step 3: Add the implementation**
+
+Add the `InlineMark` type and tag maps at module scope in `InlineEditor.ts`:
+
+```ts
+/** The inline marks the editor can toggle. */
+export type InlineMark = 'bold' | 'italic' | 'strikethrough' | 'code';
+
+/** Maps a mark to the element tag it is represented by in the DOM. */
+const MARK_TAG: Record<InlineMark, string> = {
+  bold: 'STRONG',
+  italic: 'EM',
+  strikethrough: 'DEL',
+  code: 'CODE',
+};
+
+/** Tags treated as equivalent to the canonical tag for a mark. */
+const MARK_ALIASES: Record<InlineMark, string[]> = {
+  bold: ['STRONG', 'B'],
+  italic: ['EM', 'I'],
+  strikethrough: ['DEL', 'S'],
+  code: ['CODE'],
+};
+```
+
+Add these methods to the `InlineEditor` class:
+
+```ts
+  /** Toggle an inline mark over the current selection. */
+  toggleMark(mark: InlineMark): void {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    if (!this.el.contains(range.commonAncestorContainer)) return;
+
+    if (this.isMarkActive(mark)) {
+      this.unwrapMark(range, mark);
+    } else {
+      this.wrapMark(range, mark);
+    }
+    this.el.focus();
+  }
+
+  /** True when the whole selection sits inside an element for `mark`. */
+  isMarkActive(mark: InlineMark): boolean {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return false;
+    const range = sel.getRangeAt(0);
+    const aliases = MARK_ALIASES[mark];
+    let node: Node | null = range.commonAncestorContainer;
+    while (node && node !== this.el) {
+      if (node.nodeType === Node.ELEMENT_NODE
+          && aliases.includes((node as Element).tagName)) {
+        return true;
+      }
+      node = node.parentNode;
+    }
+    return false;
+  }
+
+  private wrapMark(range: Range, mark: InlineMark): void {
+    const wrapper = document.createElement(MARK_TAG[mark]);
+    wrapper.appendChild(range.extractContents());
+    range.insertNode(wrapper);
+    // Re-select the wrapped content so a follow-up toggle sees it.
+    const sel = window.getSelection()!;
+    const newRange = document.createRange();
+    newRange.selectNodeContents(wrapper);
+    sel.removeAllRanges();
+    sel.addRange(newRange);
+  }
+
+  private unwrapMark(range: Range, mark: InlineMark): void {
+    const aliases = MARK_ALIASES[mark];
+    let node: Node | null = range.commonAncestorContainer;
+    while (node && node !== this.el) {
+      if (node.nodeType === Node.ELEMENT_NODE
+          && aliases.includes((node as Element).tagName)) {
+        const markEl = node as HTMLElement;
+        const parent = markEl.parentNode!;
+        while (markEl.firstChild) {
+          parent.insertBefore(markEl.firstChild, markEl);
+        }
+        parent.removeChild(markEl);
+        return;
+      }
+      node = node.parentNode;
+    }
+  }
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/InlineEditor.test.ts`
+Expected: PASS (6 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/renderer/components/InlineEditor.ts tests/unit/renderer/components/InlineEditor.test.ts
+git commit -m "feat: add inline mark wrap/unwrap toggle to InlineEditor"
+```
+
+---
+
+## Task 6: `InlineEditor` — keyboard shortcuts
+
+**Files:**
+- Modify: `src/renderer/components/InlineEditor.ts`
+- Test: `tests/unit/renderer/components/InlineEditor.test.ts`
+
+- [ ] **Step 1: Write the failing test (append)**
+
+```ts
+function keydown(el: HTMLElement, key: string, mods: Partial<KeyboardEventInit> = {}): void {
+  el.dispatchEvent(new KeyboardEvent('keydown', {
+    key, bubbles: true, cancelable: true, ...mods,
+  }));
+}
+
+describe('InlineEditor keyboard shortcuts', () => {
+  it('Cmd+B toggles bold over the selection', () => {
+    const el = contentEl('hello');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    keydown(el, 'b', { metaKey: true });
+    expect(el.querySelector('strong')?.textContent).toBe('hello');
+  });
+
+  it('Cmd+I toggles italic, Cmd+E toggles code', () => {
+    const el = contentEl('hello');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    keydown(el, 'i', { metaKey: true });
+    expect(el.querySelector('em')?.textContent).toBe('hello');
+    selectAll(el.querySelector('em')!);
+    keydown(el, 'e', { metaKey: true });
+    expect(el.querySelector('code')).not.toBe(null);
+  });
+
+  it('Cmd+Shift+X toggles strikethrough', () => {
+    const el = contentEl('hello');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    keydown(el, 'x', { metaKey: true, shiftKey: true });
+    expect(el.querySelector('del')?.textContent).toBe('hello');
+  });
+
+  it('Escape commits the session', () => {
+    const el = contentEl('hello');
+    const onCommit = vi.fn();
+    const editor = new InlineEditor(el, { onCommit });
+    editor.start();
+    keydown(el, 'Escape');
+    expect(onCommit).toHaveBeenCalledWith('hello');
+  });
+
+  it('stops listening for shortcuts after commit', () => {
+    const el = contentEl('hello');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    editor.commit();
+    selectAll(el);
+    keydown(el, 'b', { metaKey: true });
+    expect(el.querySelector('strong')).toBe(null);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/InlineEditor.test.ts`
+Expected: FAIL — no keydown handling; shortcuts do nothing.
+
+- [ ] **Step 3: Add the implementation**
+
+Extend the callbacks interface (the `onRequestLink` field is used in Task 7; declaring it now keeps the type stable):
+
+```ts
+export interface InlineEditorCallbacks {
+  /** Called once when the session commits, with the segment's inline markdown. */
+  onCommit: (markdown: string) => void;
+  /** Called when the user requests link insertion (Cmd+K). Optional. */
+  onRequestLink?: () => void;
+}
+```
+
+Add a bound handler to the class:
+
+```ts
+  private readonly onKeyDown = (e: KeyboardEvent): void => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      this.commit();
+      return;
+    }
+    const mod = e.metaKey || e.ctrlKey;
+    if (!mod) return;
+
+    const key = e.key.toLowerCase();
+    if (key === 'b') {
+      e.preventDefault();
+      this.toggleMark('bold');
+    } else if (key === 'i') {
+      e.preventDefault();
+      this.toggleMark('italic');
+    } else if (key === 'e') {
+      e.preventDefault();
+      this.toggleMark('code');
+    } else if (key === 'x' && e.shiftKey) {
+      e.preventDefault();
+      this.toggleMark('strikethrough');
+    } else if (key === 'k') {
+      e.preventDefault();
+      this.callbacks.onRequestLink?.();
+    }
+  };
+```
+
+Update `start()` and `commit()` to add/remove the listener:
+
+```ts
+  start(): void {
+    this.el.setAttribute('contenteditable', 'true');
+    this.el.spellcheck = false;
+    this.el.addEventListener('keydown', this.onKeyDown);
+    this.el.focus();
+  }
+
+  commit(): void {
+    if (this.committed) return;
+    this.committed = true;
+    this.el.removeEventListener('keydown', this.onKeyDown);
+    const markdown = serializeInline(this.el);
+    this.el.removeAttribute('contenteditable');
+    this.callbacks.onCommit(markdown);
+  }
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/InlineEditor.test.ts`
+Expected: PASS (11 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/renderer/components/InlineEditor.ts tests/unit/renderer/components/InlineEditor.test.ts
+git commit -m "feat: add formatting keyboard shortcuts to InlineEditor"
+```
+
+---
+
+## Task 7: `InlineEditor` — link insertion
+
+**Files:**
+- Modify: `src/renderer/components/InlineEditor.ts`
+- Test: `tests/unit/renderer/components/InlineEditor.test.ts`
+
+- [ ] **Step 1: Write the failing test (append)**
+
+```ts
+describe('InlineEditor link insertion', () => {
+  it('applyLink wraps the selection in an anchor with the given href', () => {
+    const el = contentEl('click here');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    editor.applyLink('https://example.com');
+    const a = el.querySelector('a');
+    expect(a?.getAttribute('href')).toBe('https://example.com');
+    expect(a?.textContent).toBe('click here');
+  });
+
+  it('applyLink with an empty href unwraps an existing anchor over the selection', () => {
+    const el = contentEl('<a href="https://x.com">link</a>');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    editor.applyLink('');
+    expect(el.querySelector('a')).toBe(null);
+    expect(el.textContent).toBe('link');
+  });
+
+  it('Cmd+K invokes the onRequestLink callback', () => {
+    const el = contentEl('hello');
+    const onRequestLink = vi.fn();
+    const editor = new InlineEditor(el, { onCommit: vi.fn(), onRequestLink });
+    editor.start();
+    keydown(el, 'k', { metaKey: true });
+    expect(onRequestLink).toHaveBeenCalledTimes(1);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/InlineEditor.test.ts`
+Expected: FAIL — `applyLink` not defined. (The Cmd+K test passes already from Task 6.)
+
+- [ ] **Step 3: Add the implementation**
+
+Add to the `InlineEditor` class:
+
+```ts
+  /**
+   * Wrap the current selection in an anchor pointing at `href`. An empty
+   * `href` unwraps an existing anchor over the selection instead.
+   */
+  applyLink(href: string): void {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    if (!this.el.contains(range.commonAncestorContainer)) return;
+
+    const existing = this.findAncestorTag(range, 'A') as HTMLAnchorElement | null;
+    if (existing) {
+      const parent = existing.parentNode!;
+      while (existing.firstChild) {
+        parent.insertBefore(existing.firstChild, existing);
+      }
+      parent.removeChild(existing);
+    }
+    if (!href) return;
+
+    const anchor = document.createElement('a');
+    anchor.setAttribute('href', href);
+    anchor.appendChild(range.extractContents());
+    range.insertNode(anchor);
+    this.el.focus();
+  }
+
+  private findAncestorTag(range: Range, tag: string): Element | null {
+    let node: Node | null = range.commonAncestorContainer;
+    while (node && node !== this.el) {
+      if (node.nodeType === Node.ELEMENT_NODE
+          && (node as Element).tagName === tag) {
+        return node as Element;
+      }
+      node = node.parentNode;
+    }
+    return null;
+  }
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/InlineEditor.test.ts`
+Expected: PASS (14 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/renderer/components/InlineEditor.ts tests/unit/renderer/components/InlineEditor.test.ts
+git commit -m "feat: add link insertion to InlineEditor"
+```
+
+---
+
+## Task 8: `FloatingFormatToolbar` — render, position, active state
+
+**Files:**
+- Create: `src/renderer/components/FloatingFormatToolbar.ts`
+- Test: `tests/unit/renderer/components/FloatingFormatToolbar.test.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+```ts
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { FloatingFormatToolbar } from '../../../../src/renderer/components/FloatingFormatToolbar';
+
+describe('FloatingFormatToolbar', () => {
+  it('renders a button for each formatting action', () => {
+    const tb = new FloatingFormatToolbar({ onAction: vi.fn() });
+    const root = tb.getElement();
+    const actions = Array.from(root.querySelectorAll('button'))
+      .map((b) => b.dataset.action);
+    expect(actions).toEqual([
+      'bold', 'italic', 'strikethrough', 'code', 'link', 'clear',
+    ]);
+  });
+
+  it('is hidden until show() is called', () => {
+    const tb = new FloatingFormatToolbar({ onAction: vi.fn() });
+    expect(tb.getElement().hidden).toBe(true);
+    tb.show(document.createElement('div'));
+    expect(tb.getElement().hidden).toBe(false);
+    tb.hide();
+    expect(tb.getElement().hidden).toBe(true);
+  });
+
+  it('clicking a button fires onAction with that action name', () => {
+    const onAction = vi.fn();
+    const tb = new FloatingFormatToolbar({ onAction });
+    tb.getElement().querySelector<HTMLButtonElement>('[data-action="italic"]')!.click();
+    expect(onAction).toHaveBeenCalledWith('italic');
+  });
+
+  it('setActiveMarks toggles the is-active class on matching buttons', () => {
+    const tb = new FloatingFormatToolbar({ onAction: vi.fn() });
+    tb.setActiveMarks(['bold', 'code']);
+    const root = tb.getElement();
+    expect(root.querySelector('[data-action="bold"]')!.classList.contains('is-active')).toBe(true);
+    expect(root.querySelector('[data-action="code"]')!.classList.contains('is-active')).toBe(true);
+    expect(root.querySelector('[data-action="italic"]')!.classList.contains('is-active')).toBe(false);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/FloatingFormatToolbar.test.ts`
+Expected: FAIL — cannot resolve `FloatingFormatToolbar`.
+
+- [ ] **Step 3: Write minimal implementation**
+
+```ts
+/**
+ * FloatingFormatToolbar - A small toolbar that floats above the segment being
+ * edited and exposes the inline formatting actions as buttons.
+ *
+ * It is purely presentational: it renders buttons, positions itself, and
+ * reflects active-mark state. All behaviour is delegated through `onAction`.
+ * Visibility (global, default hidden) is owned by `EditModeController`.
+ */
+
+/** Actions a toolbar button can request. */
+export type ToolbarAction =
+  | 'bold' | 'italic' | 'strikethrough' | 'code' | 'link' | 'clear';
+
+export interface FloatingFormatToolbarCallbacks {
+  onAction: (action: ToolbarAction) => void;
+}
+
+interface ButtonSpec {
+  action: ToolbarAction;
+  label: string;
+  title: string;
+}
+
+const BUTTONS: ButtonSpec[] = [
+  { action: 'bold', label: 'B', title: 'Bold (Cmd+B)' },
+  { action: 'italic', label: 'I', title: 'Italic (Cmd+I)' },
+  { action: 'strikethrough', label: 'S', title: 'Strikethrough (Cmd+Shift+X)' },
+  { action: 'code', label: '<>', title: 'Inline code (Cmd+E)' },
+  { action: 'link', label: 'Link', title: 'Link (Cmd+K)' },
+  { action: 'clear', label: 'Tx', title: 'Clear formatting' },
+];
+
+export class FloatingFormatToolbar {
+  private el: HTMLElement;
+  private callbacks: FloatingFormatToolbarCallbacks;
+
+  constructor(callbacks: FloatingFormatToolbarCallbacks) {
+    this.callbacks = callbacks;
+    this.el = document.createElement('div');
+    this.el.className = 'inline-format-toolbar';
+    this.el.hidden = true;
+    for (const spec of BUTTONS) {
+      const btn = document.createElement('button');
+      btn.dataset.action = spec.action;
+      btn.textContent = spec.label;
+      btn.title = spec.title;
+      btn.addEventListener('mousedown', (e) => {
+        // Prevent the contenteditable from losing selection on button press.
+        e.preventDefault();
+      });
+      btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.callbacks.onAction(spec.action);
+      });
+      this.el.appendChild(btn);
+    }
+  }
+
+  /** The toolbar's root element — caller appends it to the DOM once. */
+  getElement(): HTMLElement {
+    return this.el;
+  }
+
+  /** Show the toolbar positioned just above `segment`. */
+  show(segment: HTMLElement): void {
+    this.el.hidden = false;
+    const rect = segment.getBoundingClientRect();
+    this.el.style.position = 'absolute';
+    this.el.style.left = `${rect.left + window.scrollX}px`;
+    this.el.style.top = `${rect.top + window.scrollY - this.el.offsetHeight - 6}px`;
+  }
+
+  hide(): void {
+    this.el.hidden = true;
+  }
+
+  /** Light up the buttons whose marks are active for the current selection. */
+  setActiveMarks(active: ToolbarAction[]): void {
+    for (const btn of Array.from(this.el.querySelectorAll<HTMLButtonElement>('button'))) {
+      const action = btn.dataset.action as ToolbarAction;
+      btn.classList.toggle('is-active', active.includes(action));
+    }
+  }
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/FloatingFormatToolbar.test.ts`
+Expected: PASS (4 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/renderer/components/FloatingFormatToolbar.ts tests/unit/renderer/components/FloatingFormatToolbar.test.ts
+git commit -m "feat: add FloatingFormatToolbar component"
+```
+
+---
+
+## Task 9: `EditModeController` — open `InlineEditor` for WYSIWYG segments
+
+**Files:**
+- Modify: `src/renderer/components/EditModeController.ts`
+- Test: `tests/unit/renderer/components/EditModeController.test.ts`
+
+This task replaces the `<textarea>` path in `startEdit` / `commitActiveEdit` with `InlineEditor`. The slice's block type is stripped before editing and re-applied after, reusing the existing `detectBlockType` / `applyBlockPrefix` helpers already in the file.
+
+- [ ] **Step 1: Write the failing test**
+
+```ts
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { EditModeController } from '../../../../src/renderer/components/EditModeController';
+import type { PluginManager } from '../../../../src/plugins/core/PluginManager';
+
+/** Minimal PluginManager stub: render wraps content in <p>, bold/italic
+ *  markdown becomes tags. Good enough for edit-mode orchestration tests. */
+function makePluginManager(): PluginManager {
+  return {
+    render: (md: string): string => {
+      const html = md
+        .replace(/^#{1,6}\s+/, '')
+        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+        .replace(/(?<!\*)\*(?!\*)(.+?)\*(?!\*)/g, '<em>$1</em>');
+      return `<p>${html}</p>`;
+    },
+    postRender: vi.fn(() => Promise.resolve()),
+  } as unknown as PluginManager;
+}
+
+function setup(): { container: HTMLElement; controller: EditModeController } {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const controller = new EditModeController(container, makePluginManager());
+  return { container, controller };
+}
+
+describe('EditModeController — WYSIWYG editing', () => {
+  it('clicking a slice makes its content contenteditable, not a textarea', async () => {
+    const { container, controller } = setup();
+    await controller.enter('Hello **world**');
+    const content = container.querySelector<HTMLElement>('.slice-content')!;
+    content.click();
+    expect(content.getAttribute('contenteditable')).toBe('true');
+    expect(container.querySelector('textarea')).toBe(null);
+  });
+
+  it('committing an edited slice re-applies the block prefix and updates markdown', async () => {
+    const { container, controller } = setup();
+    const onContentChange = vi.fn();
+    controller.setCallbacks({ onContentChange });
+    await controller.enter('# Title');
+    const content = container.querySelector<HTMLElement>('.slice-content')!;
+    content.click();
+    // Simulate the user editing the rendered heading text.
+    content.textContent = 'New Title';
+    controller.commitActiveEditForTest();
+    expect(onContentChange).toHaveBeenCalledWith('# New Title');
+    expect(controller.getMarkdown()).toBe('# New Title');
+  });
+});
+```
+
+> Note: `commitActiveEditForTest()` is a thin test-only accessor added in Step 3
+> because `commitActiveEdit` is private. It keeps the test deterministic instead
+> of relying on a simulated outside-click.
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/EditModeController.test.ts`
+Expected: FAIL — clicking still creates a `<textarea>`; `commitActiveEditForTest` undefined.
+
+- [ ] **Step 3: Modify `EditModeController`**
+
+At the top of the file, add imports:
+
+```ts
+import { InlineEditor } from './InlineEditor';
+import { canSerialize } from '../services/inlineMarkdownSerializer';
+```
+
+Add a field next to `activeEditIndex`:
+
+```ts
+  private activeInlineEditor: InlineEditor | null = null;
+```
+
+Replace the entire existing `startEdit` method with the WYSIWYG version. The
+slice's rendered HTML is already in `.slice-content`; attach an `InlineEditor`
+to it unless `canSerialize` rejects it (`startRawEdit` is added in Task 10):
+
+```ts
+  /**
+   * Start inline editing of a slice using the WYSIWYG InlineEditor.
+   */
+  private startEdit(sliceIndex: number): void {
+    this.commitActiveEdit();
+
+    const slice = this.slices.find((s) => s.index === sliceIndex);
+    const el = this.sliceElements.get(sliceIndex);
+    if (!slice || !el) return;
+
+    const contentEl = el.querySelector<HTMLElement>('.slice-content');
+    if (!contentEl) return;
+
+    // Unsupported inline content is handled by the raw editor (Task 10).
+    if (!canSerialize(contentEl)) {
+      this.startRawEdit(sliceIndex);
+      return;
+    }
+
+    this.activeEditIndex = sliceIndex;
+    el.classList.add('slice-editing');
+
+    this.activeInlineEditor = new InlineEditor(contentEl, {
+      onCommit: (inlineMarkdown) => {
+        this.applyInlineCommit(sliceIndex, inlineMarkdown);
+      },
+    });
+    this.activeInlineEditor.start();
+  }
+
+  /**
+   * Apply the markdown produced by an InlineEditor commit: re-attach the
+   * slice's block prefix, push it through the slicer, and re-render the slice.
+   */
+  private applyInlineCommit(sliceIndex: number, inlineMarkdown: string): void {
+    const slice = this.slices.find((s) => s.index === sliceIndex);
+    const el = this.sliceElements.get(sliceIndex);
+    if (!slice || !el) return;
+
+    const blockType = this.detectBlockType(slice.raw);
+    const newRaw = this.applyBlockPrefix(inlineMarkdown, blockType);
+
+    if (newRaw !== slice.raw) {
+      const result = this.slicer.updateSlice(this.slices, sliceIndex, newRaw);
+      this.rawMarkdown = result.markdown;
+      this.slices = result.slices;
+      this.callbacks.onContentChange?.(this.rawMarkdown);
+    }
+
+    el.classList.remove('slice-editing');
+    const contentEl = el.querySelector('.slice-content');
+    const updatedSlice = this.slices.find((s) => s.index === sliceIndex);
+    if (contentEl) {
+      const html = this.pluginManager.render(updatedSlice?.raw ?? slice.raw);
+      contentEl.replaceChildren();
+      contentEl.insertAdjacentHTML('afterbegin', html);
+      contentEl.addEventListener('click', (e) => {
+        if ((e.target as HTMLElement).closest('a')) return;
+        e.stopPropagation();
+        this.startEdit(sliceIndex);
+      });
+      void this.pluginManager.postRender(contentEl as HTMLElement);
+    }
+  }
+```
+
+Replace the body of `commitActiveEdit` so it drives the `InlineEditor`:
+
+```ts
+  /**
+   * Commit the active edit. The InlineEditor's onCommit callback does the
+   * markdown reconciliation; this just triggers it and clears local state.
+   */
+  private commitActiveEdit(): void {
+    if (this.activeEditIndex === null) return;
+    this.activeEditIndex = null;
+    const editor = this.activeInlineEditor;
+    this.activeInlineEditor = null;
+    editor?.commit();
+  }
+```
+
+Add the test-only accessor near the bottom of the class:
+
+```ts
+  /** Test-only: deterministically commit the active edit. */
+  commitActiveEditForTest(): void {
+    this.commitActiveEdit();
+  }
+```
+
+`stripBlockPrefix` stays in the file — still used by `convertSlice`.
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/EditModeController.test.ts`
+Expected: PASS (2 tests).
+
+- [ ] **Step 5: Run the full suite to catch regressions in existing slice tests**
+
+Run: `pnpm test`
+Expected: PASS — all suites green. If a pre-existing edit-mode test asserted on `<textarea>` / `.slice-editor`, update it to assert on `[contenteditable]` instead, then re-run.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/renderer/components/EditModeController.ts tests/unit/renderer/components/EditModeController.test.ts
+git commit -m "feat: open segments in the WYSIWYG InlineEditor"
+```
+
+---
+
+## Task 10: `EditModeController` — slim raw editor and `Cmd+/` toggle
+
+**Files:**
+- Modify: `src/renderer/components/EditModeController.ts`
+- Test: `tests/unit/renderer/components/EditModeController.test.ts`
+
+- [ ] **Step 1: Write the failing test (append)**
+
+```ts
+describe('EditModeController — raw markdown editing', () => {
+  it('startRawEdit puts a slim textarea in the slice with the raw markdown', async () => {
+    const { container, controller } = setup();
+    await controller.enter('# Title');
+    container.querySelector<HTMLElement>('.slice-content')!.click(); // WYSIWYG
+    controller.toggleRawForActiveSlice();
+    const textarea = container.querySelector<HTMLTextAreaElement>('textarea.slice-raw-editor');
+    expect(textarea).not.toBe(null);
+    expect(textarea!.value).toBe('# Title');
+  });
+
+  it('committing a raw edit updates the markdown verbatim', async () => {
+    const { container, controller } = setup();
+    const onContentChange = vi.fn();
+    controller.setCallbacks({ onContentChange });
+    await controller.enter('# Title');
+    container.querySelector<HTMLElement>('.slice-content')!.click();
+    controller.toggleRawForActiveSlice();
+    const textarea = container.querySelector<HTMLTextAreaElement>('textarea.slice-raw-editor')!;
+    textarea.value = '## Changed';
+    controller.commitActiveEditForTest();
+    expect(onContentChange).toHaveBeenCalledWith('## Changed');
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/EditModeController.test.ts`
+Expected: FAIL — `startRawEdit` / `toggleRawForActiveSlice` not defined.
+
+- [ ] **Step 3: Add the implementation**
+
+Add a field next to `activeInlineEditor`:
+
+```ts
+  private activeRawTextarea: HTMLTextAreaElement | null = null;
+```
+
+Add these methods to the class:
+
+```ts
+  /**
+   * Open a slice in the slim raw-markdown textarea. Used as the fallback for
+   * unsupported inline content and as the target of the Cmd+/ toggle.
+   */
+  private startRawEdit(sliceIndex: number): void {
+    this.commitActiveEdit();
+
+    const slice = this.slices.find((s) => s.index === sliceIndex);
+    const el = this.sliceElements.get(sliceIndex);
+    if (!slice || !el) return;
+
+    const contentEl = el.querySelector<HTMLElement>('.slice-content');
+    if (!contentEl) return;
+
+    this.activeEditIndex = sliceIndex;
+    el.classList.add('slice-editing');
+
+    const textarea = document.createElement('textarea');
+    textarea.className = 'slice-raw-editor';
+    textarea.value = slice.raw;
+    textarea.spellcheck = false;
+
+    const resize = (): void => {
+      textarea.style.height = 'auto';
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    };
+    textarea.addEventListener('input', resize);
+    textarea.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this.commitActiveEdit();
+      }
+    });
+
+    contentEl.replaceChildren(textarea);
+    this.activeRawTextarea = textarea;
+    textarea.focus();
+    resize();
+  }
+
+  /**
+   * Commit a raw-textarea edit: the textarea value is the slice's markdown
+   * verbatim — no block-prefix reconciliation needed.
+   */
+  private commitRawEdit(sliceIndex: number): void {
+    const textarea = this.activeRawTextarea;
+    this.activeRawTextarea = null;
+    if (!textarea) return;
+
+    const slice = this.slices.find((s) => s.index === sliceIndex);
+    const el = this.sliceElements.get(sliceIndex);
+    if (!slice || !el) return;
+
+    const newRaw = textarea.value;
+    if (newRaw !== slice.raw) {
+      const result = this.slicer.updateSlice(this.slices, sliceIndex, newRaw);
+      this.rawMarkdown = result.markdown;
+      this.slices = result.slices;
+      this.callbacks.onContentChange?.(this.rawMarkdown);
+    }
+
+    el.classList.remove('slice-editing');
+    const contentEl = el.querySelector('.slice-content');
+    const updatedSlice = this.slices.find((s) => s.index === sliceIndex);
+    if (contentEl) {
+      const html = this.pluginManager.render(updatedSlice?.raw ?? slice.raw);
+      contentEl.replaceChildren();
+      contentEl.insertAdjacentHTML('afterbegin', html);
+      contentEl.addEventListener('click', (e) => {
+        if ((e.target as HTMLElement).closest('a')) return;
+        e.stopPropagation();
+        this.startEdit(sliceIndex);
+      });
+      void this.pluginManager.postRender(contentEl as HTMLElement);
+    }
+  }
+
+  /**
+   * Toggle the active slice between WYSIWYG and raw-markdown editing.
+   * Bound to Cmd+/ and the "Edit as markdown" handle-menu item.
+   */
+  toggleRawForActiveSlice(): void {
+    const sliceIndex = this.activeEditIndex;
+    if (sliceIndex === null) return;
+    const wasRaw = this.activeRawTextarea !== null;
+    this.commitActiveEdit();
+    if (wasRaw) {
+      this.startEdit(sliceIndex);
+    } else {
+      this.startRawEdit(sliceIndex);
+    }
+  }
+```
+
+Update `commitActiveEdit` to route to the raw committer when a raw textarea is active:
+
+```ts
+  private commitActiveEdit(): void {
+    if (this.activeEditIndex === null) return;
+    const sliceIndex = this.activeEditIndex;
+    this.activeEditIndex = null;
+
+    if (this.activeRawTextarea) {
+      this.commitRawEdit(sliceIndex);
+      return;
+    }
+    const editor = this.activeInlineEditor;
+    this.activeInlineEditor = null;
+    editor?.commit();
+  }
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/EditModeController.test.ts`
+Expected: PASS (4 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/renderer/components/EditModeController.ts tests/unit/renderer/components/EditModeController.test.ts
+git commit -m "feat: add slim raw-markdown editor and Cmd+/ toggle"
+```
+
+---
+
+## Task 11: `EditModeController` — global shortcuts and handle-menu items
+
+**Files:**
+- Modify: `src/renderer/components/EditModeController.ts`
+- Test: `tests/unit/renderer/components/EditModeController.test.ts`
+
+- [ ] **Step 1: Write the failing test (append)**
+
+```ts
+describe('EditModeController — global shortcuts and menu', () => {
+  it('Cmd+/ toggles the active slice to raw editing', async () => {
+    const { container, controller } = setup();
+    await controller.enter('# Title');
+    container.querySelector<HTMLElement>('.slice-content')!.click();
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key: '/', metaKey: true, bubbles: true, cancelable: true,
+    }));
+    expect(container.querySelector('textarea.slice-raw-editor')).not.toBe(null);
+  });
+
+  it('Cmd+Shift+F toggles the floating toolbar visibility flag', async () => {
+    const { controller } = setup();
+    await controller.enter('# Title');
+    expect(controller.isToolbarVisible()).toBe(false);
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'f', metaKey: true, shiftKey: true, bubbles: true, cancelable: true,
+    }));
+    expect(controller.isToolbarVisible()).toBe(true);
+  });
+
+  it('exit() removes the global key listener', async () => {
+    const { controller } = setup();
+    await controller.enter('# Title');
+    controller.exit();
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'f', metaKey: true, shiftKey: true, bubbles: true, cancelable: true,
+    }));
+    expect(controller.isToolbarVisible()).toBe(false);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/EditModeController.test.ts`
+Expected: FAIL — no global key listener; `isToolbarVisible` undefined.
+
+- [ ] **Step 3: Add the implementation**
+
+Add a field:
+
+```ts
+  private toolbarVisible = false;
+```
+
+Add the bound global key handler and the visibility accessors:
+
+```ts
+  private readonly onGlobalKeyDown = (e: KeyboardEvent): void => {
+    const mod = e.metaKey || e.ctrlKey;
+    if (!mod) return;
+    if (e.key === '/') {
+      e.preventDefault();
+      this.toggleRawForActiveSlice();
+    } else if (e.key.toLowerCase() === 'f' && e.shiftKey) {
+      e.preventDefault();
+      this.setToolbarVisible(!this.toolbarVisible);
+    }
+  };
+
+  /** Whether the floating toolbar is currently enabled (global state). */
+  isToolbarVisible(): boolean {
+    return this.toolbarVisible;
+  }
+
+  /** Enable/disable the floating toolbar. Toolbar UI wiring is Task 12. */
+  setToolbarVisible(visible: boolean): void {
+    this.toolbarVisible = visible;
+  }
+```
+
+In `enter()`, register the listener next to the existing `document` click listener:
+
+```ts
+    document.addEventListener('click', this.handleDocumentClick);
+    document.addEventListener('keydown', this.onGlobalKeyDown);
+```
+
+In `exit()`, remove it and reset state:
+
+```ts
+    document.removeEventListener('click', this.handleDocumentClick);
+    document.removeEventListener('keydown', this.onGlobalKeyDown);
+    this.toolbarVisible = false;
+```
+
+Extend `SliceAction` to include the new actions:
+
+```ts
+export type SliceAction =
+  | 'delete' | 'duplicate' | 'move-up' | 'move-down' | 'add-above' | 'add-below'
+  | 'edit-as-markdown' | 'toggle-toolbar';
+```
+
+In `toggleMenu`, append two items to the existing `menu.insertAdjacentHTML('beforeend', ...)` template — insert this block immediately after the `add-below` button and before the `slice-menu-divider` that precedes Duplicate:
+
+```html
+      <div class="slice-menu-divider"></div>
+      <button data-action="edit-as-markdown" class="slice-menu-item">
+        <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2z"/>
+        </svg>
+        Edit as markdown
+      </button>
+      <button data-action="toggle-toolbar" class="slice-menu-item">
+        <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M2 4h12v2H2V4zm0 4h8v2H2V8z"/>
+        </svg>
+        Show/hide formatting toolbar
+      </button>
+```
+
+In `handleSliceAction`, handle the two new actions at the very top — place these
+two `if` blocks immediately after the existing `this.commitActiveEdit();` call
+and before the `const idx = ...` line, so the structural-action code below is
+not reached for them:
+
+```ts
+    if (action === 'edit-as-markdown') {
+      if (this.activeEditIndex === sliceIndex) {
+        this.toggleRawForActiveSlice();
+      } else {
+        this.startRawEdit(sliceIndex);
+      }
+      return;
+    }
+    if (action === 'toggle-toolbar') {
+      this.setToolbarVisible(!this.toolbarVisible);
+      return;
+    }
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/EditModeController.test.ts`
+Expected: PASS (7 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/renderer/components/EditModeController.ts tests/unit/renderer/components/EditModeController.test.ts
+git commit -m "feat: add Cmd+/ , Cmd+Shift+F and handle-menu toggles to edit mode"
+```
+
+---
+
+## Task 12: `EditModeController` — wire the `FloatingFormatToolbar`
+
+**Files:**
+- Modify: `src/renderer/components/EditModeController.ts`
+- Test: `tests/unit/renderer/components/EditModeController.test.ts`
+
+- [ ] **Step 1: Write the failing test (append)**
+
+```ts
+describe('EditModeController — floating toolbar wiring', () => {
+  it('shows the toolbar above a slice being edited when toolbar is enabled', async () => {
+    const { container, controller } = setup();
+    await controller.enter('Hello world');
+    controller.setToolbarVisible(true);
+    container.querySelector<HTMLElement>('.slice-content')!.click();
+    const toolbar = container.querySelector('.inline-format-toolbar') as HTMLElement;
+    expect(toolbar).not.toBe(null);
+    expect(toolbar.hidden).toBe(false);
+  });
+
+  it('keeps the toolbar hidden when toolbar is disabled', async () => {
+    const { container, controller } = setup();
+    await controller.enter('Hello world');
+    container.querySelector<HTMLElement>('.slice-content')!.click();
+    const toolbar = container.querySelector('.inline-format-toolbar') as HTMLElement | null;
+    expect(toolbar === null || toolbar.hidden).toBe(true);
+  });
+
+  it('a toolbar bold action wraps the selection in the active editor', async () => {
+    const { container, controller } = setup();
+    await controller.enter('Hello world');
+    controller.setToolbarVisible(true);
+    const content = container.querySelector<HTMLElement>('.slice-content')!;
+    content.click();
+    const range = document.createRange();
+    range.selectNodeContents(content);
+    const sel = window.getSelection()!;
+    sel.removeAllRanges();
+    sel.addRange(range);
+    container
+      .querySelector<HTMLButtonElement>('.inline-format-toolbar [data-action="bold"]')!
+      .click();
+    expect(content.querySelector('strong')).not.toBe(null);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/EditModeController.test.ts`
+Expected: FAIL — no toolbar element is ever created.
+
+- [ ] **Step 3: Add the implementation**
+
+Add imports:
+
+```ts
+import { FloatingFormatToolbar, type ToolbarAction } from './FloatingFormatToolbar';
+import type { InlineMark } from './InlineEditor';
+```
+
+Add a field:
+
+```ts
+  private toolbar: FloatingFormatToolbar | null = null;
+```
+
+Add the lazy getter and toolbar-action handling:
+
+```ts
+  private getToolbar(): FloatingFormatToolbar {
+    if (!this.toolbar) {
+      this.toolbar = new FloatingFormatToolbar({
+        onAction: (action) => this.handleToolbarAction(action),
+      });
+      this.container.appendChild(this.toolbar.getElement());
+    }
+    return this.toolbar;
+  }
+
+  private handleToolbarAction(action: ToolbarAction): void {
+    const editor = this.activeInlineEditor;
+    if (!editor) return;
+    if (action === 'link') {
+      this.promptAndApplyLink(editor);
+      return;
+    }
+    if (action === 'clear') {
+      (['bold', 'italic', 'strikethrough', 'code'] as InlineMark[]).forEach((m) => {
+        if (editor.isMarkActive(m)) editor.toggleMark(m);
+      });
+      this.refreshToolbarState();
+      return;
+    }
+    editor.toggleMark(action as InlineMark);
+    this.refreshToolbarState();
+  }
+
+  /** Prompt for a URL and apply it as a link on the editor's selection. */
+  private promptAndApplyLink(editor: InlineEditor): void {
+    const href = window.prompt('Link URL') ?? '';
+    editor.applyLink(href.trim());
+  }
+
+  private refreshToolbarState(): void {
+    if (!this.toolbar || !this.activeInlineEditor) return;
+    const editor = this.activeInlineEditor;
+    const active: ToolbarAction[] = [];
+    (['bold', 'italic', 'strikethrough', 'code'] as InlineMark[]).forEach((m) => {
+      if (editor.isMarkActive(m)) active.push(m);
+    });
+    this.toolbar.setActiveMarks(active);
+  }
+```
+
+> `window.prompt` keeps the link flow minimal and dependency-free. Replacing it
+> with the anchored popover described in the spec is a follow-up — `InlineEditor.applyLink`
+> is the stable seam, so the swap is contained and needs no other changes.
+
+In `startEdit`, construct the `InlineEditor` with the `onRequestLink` callback,
+and after `this.activeInlineEditor.start();` show the toolbar when enabled:
+
+```ts
+    this.activeInlineEditor = new InlineEditor(contentEl, {
+      onCommit: (inlineMarkdown) => {
+        this.applyInlineCommit(sliceIndex, inlineMarkdown);
+      },
+      onRequestLink: () => {
+        if (this.activeInlineEditor) this.promptAndApplyLink(this.activeInlineEditor);
+      },
+    });
+    this.activeInlineEditor.start();
+    if (this.toolbarVisible) {
+      this.getToolbar().show(contentEl);
+      this.refreshToolbarState();
+    }
+```
+
+In `commitActiveEdit`, hide the toolbar on the inline-editor path:
+
+```ts
+    const editor = this.activeInlineEditor;
+    this.activeInlineEditor = null;
+    this.toolbar?.hide();
+    editor?.commit();
+```
+
+Replace `setToolbarVisible` so it reflects the change immediately for the active slice:
+
+```ts
+  setToolbarVisible(visible: boolean): void {
+    this.toolbarVisible = visible;
+    if (!visible) {
+      this.toolbar?.hide();
+      return;
+    }
+    if (this.activeEditIndex !== null && this.activeInlineEditor) {
+      const el = this.sliceElements.get(this.activeEditIndex);
+      const contentEl = el?.querySelector<HTMLElement>('.slice-content');
+      if (contentEl) {
+        this.getToolbar().show(contentEl);
+        this.refreshToolbarState();
+      }
+    }
+  }
+```
+
+In `exit()`, tear down the toolbar:
+
+```ts
+    this.toolbar?.getElement().remove();
+    this.toolbar = null;
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm exec vitest run tests/unit/renderer/components/EditModeController.test.ts`
+Expected: PASS (10 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/renderer/components/EditModeController.ts tests/unit/renderer/components/EditModeController.test.ts
+git commit -m "feat: wire the floating format toolbar into edit mode"
+```
+
+---
+
+## Task 13: Styling
+
+**Files:**
+- Modify: `src/index.css`
+
+No automated test — visual styling, verified manually in Task 14.
+
+- [ ] **Step 1: Replace the chunky `.slice-editor` rules with a slim raw editor rule**
+
+Find the `.slice-editor` and `.slice-editor:focus` rules (around line 1788) and replace them with:
+
+```css
+/* Slim raw-markdown editor (used by the "Edit as markdown" toggle) */
+.slice-raw-editor {
+  width: 100%;
+  min-height: 1.6em;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text-color);
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  resize: none;
+  outline: none;
+  overflow: hidden;
+}
+
+.slice-raw-editor:focus {
+  outline: none;
+}
+```
+
+- [ ] **Step 2: Slim the WYSIWYG editing affordance**
+
+Replace the `.slice.slice-editing .slice-content` rule (around line 1773) with a subtler treatment — a quiet left bar instead of a heavy ring:
+
+```css
+.slice.slice-editing .slice-content {
+  background-color: var(--bg-color);
+  box-shadow: inset 2px 0 0 var(--link-color);
+}
+
+.slice-content[contenteditable='true'] {
+  outline: none;
+  cursor: text;
+}
+```
+
+- [ ] **Step 3: Add the floating toolbar styles**
+
+Append after the `.slice-block-type-badge` rule:
+
+```css
+/* Floating inline-format toolbar */
+.inline-format-toolbar {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 6px;
+  background: var(--bg-color);
+  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 200;
+}
+
+.inline-format-toolbar[hidden] {
+  display: none;
+}
+
+.inline-format-toolbar button {
+  min-width: 26px;
+  height: 26px;
+  padding: 0 6px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-color);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.inline-format-toolbar button:hover {
+  background: var(--hover-bg, rgba(0, 0, 0, 0.06));
+}
+
+.inline-format-toolbar button.is-active {
+  background: var(--link-color);
+  color: #fff;
+}
+```
+
+- [ ] **Step 4: Verify no `.ts` regressions snuck in**
+
+Run: `pnpm typecheck`
+Expected: PASS — no type errors.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/index.css
+git commit -m "style: slim inline editor and add floating toolbar styles"
+```
+
+---
+
+## Task 14: Integration verification
+
+**Files:** none (verification only)
+
+- [ ] **Step 1: Full type check**
+
+Run: `pnpm typecheck`
+Expected: PASS — no errors.
+
+- [ ] **Step 2: Full test suite**
+
+Run: `pnpm test`
+Expected: PASS — all suites green, including the four new test files and the pre-existing `MarkdownSlicer` / edit-mode suites.
+
+- [ ] **Step 3: Lint**
+
+Run: `pnpm lint`
+Expected: PASS. Fix any issues (e.g. an unused import left in `EditModeController.ts` after the textarea path was removed).
+
+- [ ] **Step 4: Manual smoke check**
+
+Run: `pnpm start`
+In the app: open a markdown file, enter edit mode, then verify:
+- Clicking a paragraph makes it a slim inline editable line — no chunky box.
+- `Cmd+B` / `Cmd+I` / `Cmd+Shift+X` / `Cmd+E` toggle marks; `Esc` commits and the slice re-renders with correct markdown.
+- `Cmd+Shift+F` reveals the floating toolbar above the active slice; its buttons format the selection; it starts hidden each session.
+- `Cmd+/` and the handle-menu "Edit as markdown" item swap the slice to the slim raw textarea and back.
+- A slice containing an inline image opens directly in the raw editor (the `canSerialize` fallback).
+
+- [ ] **Step 5: Final commit (only if Step 3 required lint fixes)**
+
+```bash
+git add -A
+git commit -m "chore: lint fixes for inline WYSIWYG edit mode"
+```
+
+---
+
+## Self-Review Notes
+
+- **Spec coverage:** contenteditable surface (Task 4); scoped serializer + escaping (Tasks 1–2); `canSerialize` guard + raw fallback routing (Tasks 3, 9, 10); five inline marks (Tasks 5, 7); shortcuts incl. `Cmd+Shift+X` (Task 6); `Cmd+/` raw toggle + `Cmd+Shift+F` toolbar toggle + handle-menu items (Tasks 10, 11); floating toolbar with clear-formatting + active state (Tasks 8, 12); block prefix re-application via existing helpers (Task 9); styling (Task 13); testing in every task; integration (Task 14).
+- **Known spec deviation:** the link URL input is `window.prompt`, not the anchored popover the spec describes. Called out inline in Task 12 — `InlineEditor.applyLink` is the stable seam, so upgrading later is contained.
+- **Type consistency:** `InlineMark` (`InlineEditor.ts`) = `'bold' | 'italic' | 'strikethrough' | 'code'`; `ToolbarAction` (`FloatingFormatToolbar.ts`) = that set plus `'link' | 'clear'`. `handleToolbarAction` narrows `ToolbarAction` to `InlineMark` only after handling `'link'` and `'clear'`. `serializeInline` / `canSerialize` signatures match their call sites. `commitActiveEdit`, `startEdit`, `startRawEdit`, `toggleRawForActiveSlice`, `setToolbarVisible` are referenced consistently across Tasks 9–12.
+- **DOM construction:** no raw `innerHTML` assignment — fixtures and re-renders use `insertAdjacentHTML('afterbegin', …)` / `replaceChildren()`, matching the existing slice-menu code in `EditModeController`.

From 92c9c5f90df8f11947431f7424bdc427a4840c71 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Fri, 15 May 2026 11:23:52 +0300
Subject: [PATCH 03/30] feat: serialize inline DOM text and flat marks to
 markdown

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../services/inlineMarkdownSerializer.ts      | 46 +++++++++++++++++++
 .../services/inlineMarkdownSerializer.test.ts | 36 +++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 src/renderer/services/inlineMarkdownSerializer.ts
 create mode 100644 tests/unit/renderer/services/inlineMarkdownSerializer.test.ts

diff --git a/src/renderer/services/inlineMarkdownSerializer.ts b/src/renderer/services/inlineMarkdownSerializer.ts
new file mode 100644
index 0000000..0d9fa34
--- /dev/null
+++ b/src/renderer/services/inlineMarkdownSerializer.ts
@@ -0,0 +1,46 @@
+/**
+ * inlineMarkdownSerializer - Converts a segment's inline DOM back into markdown.
+ *
+ * Edit mode's WYSIWYG surface lets the user toggle a fixed set of inline marks
+ * (bold, italic, strikethrough, inline code, link). On commit, the inline DOM
+ * of a slice's `.slice-content` is walked here and emitted as markdown. Only
+ * the supported tag set is handled; `canSerialize` (added later) guards against
+ * anything else so source is never silently mangled.
+ */
+
+/**
+ * Serialize the inline children of `root` to a markdown string.
+ */
+export function serializeInline(root: HTMLElement): string {
+  let out = '';
+  root.childNodes.forEach((node) => {
+    out += serializeNode(node);
+  });
+  return out;
+}
+
+function serializeNode(node: Node): string {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent ?? '';
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return '';
+  }
+  const el = node as HTMLElement;
+  const inner = Array.from(el.childNodes).map(serializeNode).join('');
+  switch (el.tagName) {
+    case 'STRONG':
+    case 'B':
+      return `**${inner}**`;
+    case 'EM':
+    case 'I':
+      return `*${inner}*`;
+    case 'DEL':
+    case 'S':
+      return `~~${inner}~~`;
+    case 'CODE':
+      return `\`${el.textContent ?? ''}\``;
+    default:
+      return inner;
+  }
+}
diff --git a/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts b/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
new file mode 100644
index 0000000..00ac637
--- /dev/null
+++ b/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
@@ -0,0 +1,36 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect } from 'vitest';
+import { serializeInline } from '../../../../src/renderer/services/inlineMarkdownSerializer';
+
+function div(html: string): HTMLElement {
+  const el = document.createElement('div');
+  el.insertAdjacentHTML('afterbegin', html);
+  return el;
+}
+
+describe('serializeInline — text and flat marks', () => {
+  it('returns plain text unchanged', () => {
+    expect(serializeInline(div('Scala 2.13 is supported.'))).toBe('Scala 2.13 is supported.');
+  });
+
+  it('serializes strong and b to **', () => {
+    expect(serializeInline(div('a <strong>bold</strong> b'))).toBe('a **bold** b');
+    expect(serializeInline(div('a <b>bold</b> b'))).toBe('a **bold** b');
+  });
+
+  it('serializes em and i to *', () => {
+    expect(serializeInline(div('a <em>it</em> b'))).toBe('a *it* b');
+    expect(serializeInline(div('a <i>it</i> b'))).toBe('a *it* b');
+  });
+
+  it('serializes del and s to ~~', () => {
+    expect(serializeInline(div('a <del>x</del> b'))).toBe('a ~~x~~ b');
+    expect(serializeInline(div('a <s>x</s> b'))).toBe('a ~~x~~ b');
+  });
+
+  it('serializes code to backticks using raw text content', () => {
+    expect(serializeInline(div('use <code>npm i</code> now'))).toBe('use `npm i` now');
+  });
+});

From 6aa3b3e5f4664d2f09c7f4c3558f32e8536e897d Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Fri, 15 May 2026 11:29:15 +0300
Subject: [PATCH 04/30] feat: serialize links, breaks, nested marks, escape
 literal markdown

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../services/inlineMarkdownSerializer.ts      | 17 +++++++++-
 .../services/inlineMarkdownSerializer.test.ts | 32 +++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/renderer/services/inlineMarkdownSerializer.ts b/src/renderer/services/inlineMarkdownSerializer.ts
index 0d9fa34..c1c021f 100644
--- a/src/renderer/services/inlineMarkdownSerializer.ts
+++ b/src/renderer/services/inlineMarkdownSerializer.ts
@@ -19,9 +19,18 @@ export function serializeInline(root: HTMLElement): string {
   return out;
 }
 
+/** Characters that, appearing literally in rendered text, would be re-parsed
+ *  as markdown syntax. Block-level characters (#, -, etc.) are intentionally
+ *  not escaped — they are inert inside inline content. */
+const ESCAPE_RE = /([\\`*_~[\]])/g;
+
+function escapeText(text: string): string {
+  return text.replace(ESCAPE_RE, '\\$1');
+}
+
 function serializeNode(node: Node): string {
   if (node.nodeType === Node.TEXT_NODE) {
-    return node.textContent ?? '';
+    return escapeText(node.textContent ?? '');
   }
   if (node.nodeType !== Node.ELEMENT_NODE) {
     return '';
@@ -40,6 +49,12 @@ function serializeNode(node: Node): string {
       return `~~${inner}~~`;
     case 'CODE':
       return `\`${el.textContent ?? ''}\``;
+    case 'A': {
+      const href = el.getAttribute('href') ?? '';
+      return `[${inner}](${href})`;
+    }
+    case 'BR':
+      return '\n';
     default:
       return inner;
   }
diff --git a/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts b/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
index 00ac637..973cdfd 100644
--- a/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
+++ b/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
@@ -34,3 +34,35 @@ describe('serializeInline — text and flat marks', () => {
     expect(serializeInline(div('use <code>npm i</code> now'))).toBe('use `npm i` now');
   });
 });
+
+describe('serializeInline — links, breaks, nesting, escaping', () => {
+  it('serializes anchors to [text](href)', () => {
+    expect(serializeInline(div('see <a href="https://x.com">the site</a>')))
+      .toBe('see [the site](https://x.com)');
+  });
+
+  it('serializes br to a newline', () => {
+    expect(serializeInline(div('line one<br>line two'))).toBe('line one\nline two');
+  });
+
+  it('serializes nested marks', () => {
+    expect(serializeInline(div('<strong>bold <em>and italic</em></strong>')))
+      .toBe('**bold *and italic***');
+  });
+
+  it('escapes literal markdown characters in text nodes', () => {
+    expect(serializeInline(div('a literal * and _ and ` and ~ and [ and ]')))
+      .toBe('a literal \\* and \\_ and \\` and \\~ and \\[ and \\]');
+  });
+
+  it('does not escape inside inline code', () => {
+    expect(serializeInline(div('<code>a * b</code>'))).toBe('`a * b`');
+  });
+
+  it('round-trips: emphasis text survives markdown -> render -> serialize', () => {
+    // markdown-it would render "**only**" as <strong>only</strong>; serializing
+    // returns the original syntax.
+    expect(serializeInline(div('the <strong>only</strong> version')))
+      .toBe('the **only** version');
+  });
+});

From c1412fb4b850ad8dac7a483c37288441534dfc84 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Fri, 15 May 2026 11:48:19 +0300
Subject: [PATCH 05/30] feat: add canSerialize guard for unsupported inline
 content

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../services/inlineMarkdownSerializer.ts      | 22 +++++++++++++++++++
 .../services/inlineMarkdownSerializer.test.ts | 19 +++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/renderer/services/inlineMarkdownSerializer.ts b/src/renderer/services/inlineMarkdownSerializer.ts
index c1c021f..b5d5a70 100644
--- a/src/renderer/services/inlineMarkdownSerializer.ts
+++ b/src/renderer/services/inlineMarkdownSerializer.ts
@@ -59,3 +59,25 @@ function serializeNode(node: Node): string {
       return inner;
   }
 }
+
+/** Element tags the serializer knows how to faithfully emit. */
+const SUPPORTED_TAGS = new Set([
+  'STRONG', 'B', 'EM', 'I', 'DEL', 'S', 'CODE', 'A', 'BR',
+]);
+
+/**
+ * Returns true when every element inside `root` is one the serializer can
+ * faithfully round-trip. When false, the caller must fall back to raw-markdown
+ * editing rather than risk mangling the source.
+ */
+export function canSerialize(root: HTMLElement): boolean {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  let node = walker.nextNode();
+  while (node) {
+    if (!SUPPORTED_TAGS.has((node as Element).tagName)) {
+      return false;
+    }
+    node = walker.nextNode();
+  }
+  return true;
+}
diff --git a/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts b/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
index 973cdfd..1fabdd0 100644
--- a/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
+++ b/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
@@ -2,7 +2,7 @@
  * @vitest-environment jsdom
  */
 import { describe, it, expect } from 'vitest';
-import { serializeInline } from '../../../../src/renderer/services/inlineMarkdownSerializer';
+import { serializeInline, canSerialize } from '../../../../src/renderer/services/inlineMarkdownSerializer';
 
 function div(html: string): HTMLElement {
   const el = document.createElement('div');
@@ -66,3 +66,20 @@ describe('serializeInline — links, breaks, nesting, escaping', () => {
       .toBe('the **only** version');
   });
 });
+
+describe('canSerialize', () => {
+  it('accepts content with only supported inline tags', () => {
+    expect(canSerialize(div('a <strong>b <em>c</em></strong> <a href="x">d</a>'))).toBe(true);
+    expect(canSerialize(div('plain text'))).toBe(true);
+    expect(canSerialize(div('line<br>break'))).toBe(true);
+  });
+
+  it('rejects content with an inline image', () => {
+    expect(canSerialize(div('text <img src="x.png"> more'))).toBe(false);
+  });
+
+  it('rejects content with unsupported elements', () => {
+    expect(canSerialize(div('text <sup>2</sup>'))).toBe(false);
+    expect(canSerialize(div('text <span style="color:red">x</span>'))).toBe(false);
+  });
+});

From 286abb2095700f1b1fb3495baf2edc6292ab97e8 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Fri, 15 May 2026 12:04:27 +0300
Subject: [PATCH 06/30] feat: add InlineEditor contenteditable lifecycle and
 commit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/InlineEditor.ts       | 42 ++++++++++++++++++
 .../renderer/components/InlineEditor.test.ts  | 43 +++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 src/renderer/components/InlineEditor.ts
 create mode 100644 tests/unit/renderer/components/InlineEditor.test.ts

diff --git a/src/renderer/components/InlineEditor.ts b/src/renderer/components/InlineEditor.ts
new file mode 100644
index 0000000..e790104
--- /dev/null
+++ b/src/renderer/components/InlineEditor.ts
@@ -0,0 +1,42 @@
+/**
+ * InlineEditor - Manages one segment's WYSIWYG editing session.
+ *
+ * Makes a slice's `.slice-content` element `contenteditable`, owns the caret
+ * and keyboard shortcuts, toggles inline marks via DOM Range manipulation, and
+ * on commit hands the serialized markdown back to the caller. It deliberately
+ * knows nothing about slices or markdown blocks — `EditModeController` adapts
+ * between this and the slice model.
+ */
+import { serializeInline } from '../services/inlineMarkdownSerializer';
+
+export interface InlineEditorCallbacks {
+  /** Called once when the session commits, with the segment's inline markdown. */
+  onCommit: (markdown: string) => void;
+}
+
+export class InlineEditor {
+  private el: HTMLElement;
+  private callbacks: InlineEditorCallbacks;
+  private committed = false;
+
+  constructor(el: HTMLElement, callbacks: InlineEditorCallbacks) {
+    this.el = el;
+    this.callbacks = callbacks;
+  }
+
+  /** Begin the session: make the element editable and focus it. */
+  start(): void {
+    this.el.setAttribute('contenteditable', 'true');
+    this.el.spellcheck = false;
+    this.el.focus();
+  }
+
+  /** Serialize the current DOM, hand it to the caller, and end the session. */
+  commit(): void {
+    if (this.committed) return;
+    this.committed = true;
+    const markdown = serializeInline(this.el);
+    this.el.removeAttribute('contenteditable');
+    this.callbacks.onCommit(markdown);
+  }
+}
diff --git a/tests/unit/renderer/components/InlineEditor.test.ts b/tests/unit/renderer/components/InlineEditor.test.ts
new file mode 100644
index 0000000..29e5549
--- /dev/null
+++ b/tests/unit/renderer/components/InlineEditor.test.ts
@@ -0,0 +1,43 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { InlineEditor } from '../../../../src/renderer/components/InlineEditor';
+
+function contentEl(html: string): HTMLElement {
+  const el = document.createElement('div');
+  el.className = 'slice-content';
+  el.insertAdjacentHTML('afterbegin', html);
+  document.body.appendChild(el);
+  return el;
+}
+
+describe('InlineEditor lifecycle', () => {
+  it('makes the element editable on start and focuses it', () => {
+    const el = contentEl('hello');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    expect(el.getAttribute('contenteditable')).toBe('true');
+    expect(document.activeElement).toBe(el);
+  });
+
+  it('commit() passes serialized markdown to onCommit and clears editable', () => {
+    const el = contentEl('a <strong>bold</strong> word');
+    const onCommit = vi.fn();
+    const editor = new InlineEditor(el, { onCommit });
+    editor.start();
+    editor.commit();
+    expect(onCommit).toHaveBeenCalledWith('a **bold** word');
+    expect(el.getAttribute('contenteditable')).toBe(null);
+  });
+
+  it('commit() is idempotent — a second call does not fire onCommit again', () => {
+    const el = contentEl('text');
+    const onCommit = vi.fn();
+    const editor = new InlineEditor(el, { onCommit });
+    editor.start();
+    editor.commit();
+    editor.commit();
+    expect(onCommit).toHaveBeenCalledTimes(1);
+  });
+});

From acf1c1015c2edba1c8d258b6da9bb79c6590a4c7 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Fri, 15 May 2026 12:40:42 +0300
Subject: [PATCH 07/30] feat: add inline mark wrap/unwrap toggle to
 InlineEditor

Plan deviation: isMarkActive and unwrapMark walk from a deepestStart
helper rather than range.commonAncestorContainer. selectNodeContents
puts commonAncestorContainer at the parent, above the mark element,
so the upward walk would miss the mark entirely. The helper descends
into the first selected child so the ancestor walk starts inside the
selection.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/InlineEditor.ts       | 96 +++++++++++++++++++
 .../renderer/components/InlineEditor.test.ts  | 39 ++++++++
 2 files changed, 135 insertions(+)

diff --git a/src/renderer/components/InlineEditor.ts b/src/renderer/components/InlineEditor.ts
index e790104..9d057fd 100644
--- a/src/renderer/components/InlineEditor.ts
+++ b/src/renderer/components/InlineEditor.ts
@@ -14,6 +14,25 @@ export interface InlineEditorCallbacks {
   onCommit: (markdown: string) => void;
 }
 
+/** The inline marks the editor can toggle. */
+export type InlineMark = 'bold' | 'italic' | 'strikethrough' | 'code';
+
+/** Maps a mark to the element tag it is represented by in the DOM. */
+const MARK_TAG: Record<InlineMark, string> = {
+  bold: 'STRONG',
+  italic: 'EM',
+  strikethrough: 'DEL',
+  code: 'CODE',
+};
+
+/** Tags treated as equivalent to the canonical tag for a mark. */
+const MARK_ALIASES: Record<InlineMark, string[]> = {
+  bold: ['STRONG', 'B'],
+  italic: ['EM', 'I'],
+  strikethrough: ['DEL', 'S'],
+  code: ['CODE'],
+};
+
 export class InlineEditor {
   private el: HTMLElement;
   private callbacks: InlineEditorCallbacks;
@@ -39,4 +58,81 @@ export class InlineEditor {
     this.el.removeAttribute('contenteditable');
     this.callbacks.onCommit(markdown);
   }
+
+  /** Toggle an inline mark over the current selection. */
+  toggleMark(mark: InlineMark): void {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    if (!this.el.contains(range.commonAncestorContainer)) return;
+
+    if (this.isMarkActive(mark)) {
+      this.unwrapMark(range, mark);
+    } else {
+      this.wrapMark(range, mark);
+    }
+    this.el.focus();
+  }
+
+  /** True when the whole selection sits inside an element for `mark`. */
+  isMarkActive(mark: InlineMark): boolean {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return false;
+    const range = sel.getRangeAt(0);
+    const aliases = MARK_ALIASES[mark];
+    let node: Node | null = this.deepestStart(range);
+    while (node && node !== this.el) {
+      if (node.nodeType === Node.ELEMENT_NODE
+          && aliases.includes((node as Element).tagName)) {
+        return true;
+      }
+      node = node.parentNode;
+    }
+    return false;
+  }
+
+  // commonAncestorContainer can be a parent above the mark element when the
+  // selection covers all of an element's contents (selectNodeContents). Descend
+  // into the deepest node actually inside the selection so the ancestor walk
+  // starts from somewhere the mark element can be reached upward.
+  private deepestStart(range: Range): Node {
+    let node: Node = range.startContainer;
+    let offset = range.startOffset;
+    while (node.nodeType === Node.ELEMENT_NODE) {
+      const child = node.childNodes[offset];
+      if (!child) break;
+      node = child;
+      offset = 0;
+    }
+    return node;
+  }
+
+  private wrapMark(range: Range, mark: InlineMark): void {
+    const wrapper = document.createElement(MARK_TAG[mark]);
+    wrapper.appendChild(range.extractContents());
+    range.insertNode(wrapper);
+    const sel = window.getSelection()!;
+    const newRange = document.createRange();
+    newRange.selectNodeContents(wrapper);
+    sel.removeAllRanges();
+    sel.addRange(newRange);
+  }
+
+  private unwrapMark(range: Range, mark: InlineMark): void {
+    const aliases = MARK_ALIASES[mark];
+    let node: Node | null = this.deepestStart(range);
+    while (node && node !== this.el) {
+      if (node.nodeType === Node.ELEMENT_NODE
+          && aliases.includes((node as Element).tagName)) {
+        const markEl = node as HTMLElement;
+        const parent = markEl.parentNode!;
+        while (markEl.firstChild) {
+          parent.insertBefore(markEl.firstChild, markEl);
+        }
+        parent.removeChild(markEl);
+        return;
+      }
+      node = node.parentNode;
+    }
+  }
 }
diff --git a/tests/unit/renderer/components/InlineEditor.test.ts b/tests/unit/renderer/components/InlineEditor.test.ts
index 29e5549..818481a 100644
--- a/tests/unit/renderer/components/InlineEditor.test.ts
+++ b/tests/unit/renderer/components/InlineEditor.test.ts
@@ -3,6 +3,7 @@
  */
 import { describe, it, expect, vi } from 'vitest';
 import { InlineEditor } from '../../../../src/renderer/components/InlineEditor';
+import type { InlineMark } from '../../../../src/renderer/components/InlineEditor';
 
 function contentEl(html: string): HTMLElement {
   const el = document.createElement('div');
@@ -41,3 +42,41 @@ describe('InlineEditor lifecycle', () => {
     expect(onCommit).toHaveBeenCalledTimes(1);
   });
 });
+
+function selectAll(el: HTMLElement): void {
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  const sel = window.getSelection()!;
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+describe('InlineEditor mark toggle', () => {
+  it('wraps the selection in <strong> when bold is toggled on', () => {
+    const el = contentEl('hello');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    editor.toggleMark('bold' as InlineMark);
+    expect(el.querySelector('strong')?.textContent).toBe('hello');
+  });
+
+  it('unwraps when the same mark is toggled off over an identical selection', () => {
+    const el = contentEl('<strong>hello</strong>');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    editor.toggleMark('bold' as InlineMark);
+    expect(el.querySelector('strong')).toBe(null);
+    expect(el.textContent).toBe('hello');
+  });
+
+  it('isMarkActive reflects whether the selection is fully inside a mark', () => {
+    const el = contentEl('<em>x</em>');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    expect(editor.isMarkActive('italic' as InlineMark)).toBe(true);
+    expect(editor.isMarkActive('bold' as InlineMark)).toBe(false);
+  });
+});

From 762ce1fad4adcded4c425a379ef2babc65138f2c Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Fri, 15 May 2026 14:15:19 +0300
Subject: [PATCH 08/30] feat: add formatting keyboard shortcuts to InlineEditor

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/InlineEditor.ts       | 32 +++++++++++
 .../renderer/components/InlineEditor.test.ts  | 57 +++++++++++++++++++
 2 files changed, 89 insertions(+)

diff --git a/src/renderer/components/InlineEditor.ts b/src/renderer/components/InlineEditor.ts
index 9d057fd..006b4f1 100644
--- a/src/renderer/components/InlineEditor.ts
+++ b/src/renderer/components/InlineEditor.ts
@@ -12,6 +12,8 @@ import { serializeInline } from '../services/inlineMarkdownSerializer';
 export interface InlineEditorCallbacks {
   /** Called once when the session commits, with the segment's inline markdown. */
   onCommit: (markdown: string) => void;
+  /** Called when the user requests link insertion (Cmd+K). Optional. */
+  onRequestLink?: () => void;
 }
 
 /** The inline marks the editor can toggle. */
@@ -47,6 +49,7 @@ export class InlineEditor {
   start(): void {
     this.el.setAttribute('contenteditable', 'true');
     this.el.spellcheck = false;
+    this.el.addEventListener('keydown', this.onKeyDown);
     this.el.focus();
   }
 
@@ -54,11 +57,40 @@ export class InlineEditor {
   commit(): void {
     if (this.committed) return;
     this.committed = true;
+    this.el.removeEventListener('keydown', this.onKeyDown);
     const markdown = serializeInline(this.el);
     this.el.removeAttribute('contenteditable');
     this.callbacks.onCommit(markdown);
   }
 
+  private readonly onKeyDown = (e: KeyboardEvent): void => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      this.commit();
+      return;
+    }
+    const mod = e.metaKey || e.ctrlKey;
+    if (!mod) return;
+
+    const key = e.key.toLowerCase();
+    if (key === 'b') {
+      e.preventDefault();
+      this.toggleMark('bold');
+    } else if (key === 'i') {
+      e.preventDefault();
+      this.toggleMark('italic');
+    } else if (key === 'e') {
+      e.preventDefault();
+      this.toggleMark('code');
+    } else if (key === 'x' && e.shiftKey) {
+      e.preventDefault();
+      this.toggleMark('strikethrough');
+    } else if (key === 'k') {
+      e.preventDefault();
+      this.callbacks.onRequestLink?.();
+    }
+  };
+
   /** Toggle an inline mark over the current selection. */
   toggleMark(mark: InlineMark): void {
     const sel = window.getSelection();
diff --git a/tests/unit/renderer/components/InlineEditor.test.ts b/tests/unit/renderer/components/InlineEditor.test.ts
index 818481a..29ef75f 100644
--- a/tests/unit/renderer/components/InlineEditor.test.ts
+++ b/tests/unit/renderer/components/InlineEditor.test.ts
@@ -80,3 +80,60 @@ describe('InlineEditor mark toggle', () => {
     expect(editor.isMarkActive('bold' as InlineMark)).toBe(false);
   });
 });
+
+function keydown(el: HTMLElement, key: string, mods: Partial<KeyboardEventInit> = {}): void {
+  el.dispatchEvent(new KeyboardEvent('keydown', {
+    key, bubbles: true, cancelable: true, ...mods,
+  }));
+}
+
+describe('InlineEditor keyboard shortcuts', () => {
+  it('Cmd+B toggles bold over the selection', () => {
+    const el = contentEl('hello');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    keydown(el, 'b', { metaKey: true });
+    expect(el.querySelector('strong')?.textContent).toBe('hello');
+  });
+
+  it('Cmd+I toggles italic, Cmd+E toggles code', () => {
+    const el = contentEl('hello');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    keydown(el, 'i', { metaKey: true });
+    expect(el.querySelector('em')?.textContent).toBe('hello');
+    selectAll(el.querySelector('em')!);
+    keydown(el, 'e', { metaKey: true });
+    expect(el.querySelector('code')).not.toBe(null);
+  });
+
+  it('Cmd+Shift+X toggles strikethrough', () => {
+    const el = contentEl('hello');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    keydown(el, 'x', { metaKey: true, shiftKey: true });
+    expect(el.querySelector('del')?.textContent).toBe('hello');
+  });
+
+  it('Escape commits the session', () => {
+    const el = contentEl('hello');
+    const onCommit = vi.fn();
+    const editor = new InlineEditor(el, { onCommit });
+    editor.start();
+    keydown(el, 'Escape');
+    expect(onCommit).toHaveBeenCalledWith('hello');
+  });
+
+  it('stops listening for shortcuts after commit', () => {
+    const el = contentEl('hello');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    editor.commit();
+    selectAll(el);
+    keydown(el, 'b', { metaKey: true });
+    expect(el.querySelector('strong')).toBe(null);
+  });
+});

From b5566201cd3ba320a6d053ad9531f71b7331b42b Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Fri, 15 May 2026 14:21:38 +0300
Subject: [PATCH 09/30] feat: add link insertion to InlineEditor

Plan deviation: findAncestorTag walks from deepestStart(range) rather
than range.commonAncestorContainer, matching the Task 5 fix. Without
this, selectAll over a sole anchor would miss the existing <a> and
the unwrap branch in applyLink would never fire.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/InlineEditor.ts       | 39 +++++++++++++++++++
 .../renderer/components/InlineEditor.test.ts  | 32 +++++++++++++++
 2 files changed, 71 insertions(+)

diff --git a/src/renderer/components/InlineEditor.ts b/src/renderer/components/InlineEditor.ts
index 006b4f1..808d877 100644
--- a/src/renderer/components/InlineEditor.ts
+++ b/src/renderer/components/InlineEditor.ts
@@ -150,6 +150,45 @@ export class InlineEditor {
     sel.addRange(newRange);
   }
 
+  /**
+   * Wrap the current selection in an anchor pointing at `href`. An empty
+   * `href` unwraps an existing anchor over the selection instead.
+   */
+  applyLink(href: string): void {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    if (!this.el.contains(range.commonAncestorContainer)) return;
+
+    const existing = this.findAncestorTag(range, 'A') as HTMLAnchorElement | null;
+    if (existing) {
+      const parent = existing.parentNode!;
+      while (existing.firstChild) {
+        parent.insertBefore(existing.firstChild, existing);
+      }
+      parent.removeChild(existing);
+    }
+    if (!href) return;
+
+    const anchor = document.createElement('a');
+    anchor.setAttribute('href', href);
+    anchor.appendChild(range.extractContents());
+    range.insertNode(anchor);
+    this.el.focus();
+  }
+
+  private findAncestorTag(range: Range, tag: string): Element | null {
+    let node: Node | null = this.deepestStart(range);
+    while (node && node !== this.el) {
+      if (node.nodeType === Node.ELEMENT_NODE
+          && (node as Element).tagName === tag) {
+        return node as Element;
+      }
+      node = node.parentNode;
+    }
+    return null;
+  }
+
   private unwrapMark(range: Range, mark: InlineMark): void {
     const aliases = MARK_ALIASES[mark];
     let node: Node | null = this.deepestStart(range);
diff --git a/tests/unit/renderer/components/InlineEditor.test.ts b/tests/unit/renderer/components/InlineEditor.test.ts
index 29ef75f..44a19b5 100644
--- a/tests/unit/renderer/components/InlineEditor.test.ts
+++ b/tests/unit/renderer/components/InlineEditor.test.ts
@@ -137,3 +137,35 @@ describe('InlineEditor keyboard shortcuts', () => {
     expect(el.querySelector('strong')).toBe(null);
   });
 });
+
+describe('InlineEditor link insertion', () => {
+  it('applyLink wraps the selection in an anchor with the given href', () => {
+    const el = contentEl('click here');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    editor.applyLink('https://example.com');
+    const a = el.querySelector('a');
+    expect(a?.getAttribute('href')).toBe('https://example.com');
+    expect(a?.textContent).toBe('click here');
+  });
+
+  it('applyLink with an empty href unwraps an existing anchor over the selection', () => {
+    const el = contentEl('<a href="https://x.com">link</a>');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    selectAll(el);
+    editor.applyLink('');
+    expect(el.querySelector('a')).toBe(null);
+    expect(el.textContent).toBe('link');
+  });
+
+  it('Cmd+K invokes the onRequestLink callback', () => {
+    const el = contentEl('hello');
+    const onRequestLink = vi.fn();
+    const editor = new InlineEditor(el, { onCommit: vi.fn(), onRequestLink });
+    editor.start();
+    keydown(el, 'k', { metaKey: true });
+    expect(onRequestLink).toHaveBeenCalledTimes(1);
+  });
+});

From 8abc7700974396bcc9694499c31c28475487e5f2 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Fri, 15 May 2026 14:23:50 +0300
Subject: [PATCH 10/30] feat: add FloatingFormatToolbar component

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/FloatingFormatToolbar.ts       | 84 +++++++++++++++++++
 .../components/FloatingFormatToolbar.test.ts  | 42 ++++++++++
 2 files changed, 126 insertions(+)
 create mode 100644 src/renderer/components/FloatingFormatToolbar.ts
 create mode 100644 tests/unit/renderer/components/FloatingFormatToolbar.test.ts

diff --git a/src/renderer/components/FloatingFormatToolbar.ts b/src/renderer/components/FloatingFormatToolbar.ts
new file mode 100644
index 0000000..c0d3603
--- /dev/null
+++ b/src/renderer/components/FloatingFormatToolbar.ts
@@ -0,0 +1,84 @@
+/**
+ * FloatingFormatToolbar - A small toolbar that floats above the segment being
+ * edited and exposes the inline formatting actions as buttons.
+ *
+ * It is purely presentational: it renders buttons, positions itself, and
+ * reflects active-mark state. All behaviour is delegated through `onAction`.
+ * Visibility (global, default hidden) is owned by `EditModeController`.
+ */
+
+/** Actions a toolbar button can request. */
+export type ToolbarAction =
+  | 'bold' | 'italic' | 'strikethrough' | 'code' | 'link' | 'clear';
+
+export interface FloatingFormatToolbarCallbacks {
+  onAction: (action: ToolbarAction) => void;
+}
+
+interface ButtonSpec {
+  action: ToolbarAction;
+  label: string;
+  title: string;
+}
+
+const BUTTONS: ButtonSpec[] = [
+  { action: 'bold', label: 'B', title: 'Bold (Cmd+B)' },
+  { action: 'italic', label: 'I', title: 'Italic (Cmd+I)' },
+  { action: 'strikethrough', label: 'S', title: 'Strikethrough (Cmd+Shift+X)' },
+  { action: 'code', label: '<>', title: 'Inline code (Cmd+E)' },
+  { action: 'link', label: 'Link', title: 'Link (Cmd+K)' },
+  { action: 'clear', label: 'Tx', title: 'Clear formatting' },
+];
+
+export class FloatingFormatToolbar {
+  private el: HTMLElement;
+  private callbacks: FloatingFormatToolbarCallbacks;
+
+  constructor(callbacks: FloatingFormatToolbarCallbacks) {
+    this.callbacks = callbacks;
+    this.el = document.createElement('div');
+    this.el.className = 'inline-format-toolbar';
+    this.el.hidden = true;
+    for (const spec of BUTTONS) {
+      const btn = document.createElement('button');
+      btn.dataset.action = spec.action;
+      btn.textContent = spec.label;
+      btn.title = spec.title;
+      btn.addEventListener('mousedown', (e) => {
+        // Prevent the contenteditable from losing selection on button press.
+        e.preventDefault();
+      });
+      btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.callbacks.onAction(spec.action);
+      });
+      this.el.appendChild(btn);
+    }
+  }
+
+  /** The toolbar's root element — caller appends it to the DOM once. */
+  getElement(): HTMLElement {
+    return this.el;
+  }
+
+  /** Show the toolbar positioned just above `segment`. */
+  show(segment: HTMLElement): void {
+    this.el.hidden = false;
+    const rect = segment.getBoundingClientRect();
+    this.el.style.position = 'absolute';
+    this.el.style.left = `${rect.left + window.scrollX}px`;
+    this.el.style.top = `${rect.top + window.scrollY - this.el.offsetHeight - 6}px`;
+  }
+
+  hide(): void {
+    this.el.hidden = true;
+  }
+
+  /** Light up the buttons whose marks are active for the current selection. */
+  setActiveMarks(active: ToolbarAction[]): void {
+    for (const btn of Array.from(this.el.querySelectorAll<HTMLButtonElement>('button'))) {
+      const action = btn.dataset.action as ToolbarAction;
+      btn.classList.toggle('is-active', active.includes(action));
+    }
+  }
+}
diff --git a/tests/unit/renderer/components/FloatingFormatToolbar.test.ts b/tests/unit/renderer/components/FloatingFormatToolbar.test.ts
new file mode 100644
index 0000000..b01c2d4
--- /dev/null
+++ b/tests/unit/renderer/components/FloatingFormatToolbar.test.ts
@@ -0,0 +1,42 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { FloatingFormatToolbar } from '../../../../src/renderer/components/FloatingFormatToolbar';
+
+describe('FloatingFormatToolbar', () => {
+  it('renders a button for each formatting action', () => {
+    const tb = new FloatingFormatToolbar({ onAction: vi.fn() });
+    const root = tb.getElement();
+    const actions = Array.from(root.querySelectorAll<HTMLButtonElement>('button'))
+      .map((b) => b.dataset.action);
+    expect(actions).toEqual([
+      'bold', 'italic', 'strikethrough', 'code', 'link', 'clear',
+    ]);
+  });
+
+  it('is hidden until show() is called', () => {
+    const tb = new FloatingFormatToolbar({ onAction: vi.fn() });
+    expect(tb.getElement().hidden).toBe(true);
+    tb.show(document.createElement('div'));
+    expect(tb.getElement().hidden).toBe(false);
+    tb.hide();
+    expect(tb.getElement().hidden).toBe(true);
+  });
+
+  it('clicking a button fires onAction with that action name', () => {
+    const onAction = vi.fn();
+    const tb = new FloatingFormatToolbar({ onAction });
+    tb.getElement().querySelector<HTMLButtonElement>('[data-action="italic"]')!.click();
+    expect(onAction).toHaveBeenCalledWith('italic');
+  });
+
+  it('setActiveMarks toggles the is-active class on matching buttons', () => {
+    const tb = new FloatingFormatToolbar({ onAction: vi.fn() });
+    tb.setActiveMarks(['bold', 'code']);
+    const root = tb.getElement();
+    expect(root.querySelector('[data-action="bold"]')!.classList.contains('is-active')).toBe(true);
+    expect(root.querySelector('[data-action="code"]')!.classList.contains('is-active')).toBe(true);
+    expect(root.querySelector('[data-action="italic"]')!.classList.contains('is-active')).toBe(false);
+  });
+});

From 07874f48c803a52cdd50faf6c22ea7a1c2372a4d Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Fri, 15 May 2026 14:31:50 +0300
Subject: [PATCH 11/30] feat: open segments in the WYSIWYG InlineEditor

Replaces EditModeController's per-segment textarea with InlineEditor.
canSerialize routes unsupported inline content to startRawEdit (stubbed
here, wired in Task 10). commitActiveEdit now drives the InlineEditor;
applyInlineCommit reattaches the slice's block prefix and re-renders.

Plan deviation: SUPPORTED_TAGS now includes block wrappers (P, H1-H6,
UL/OL/LI, BLOCKQUOTE). markdown-it always wraps a slice's inline content
in one of these, so the prior set would reject every slice and fall
through to raw mode. serializeInline's default switch case already
descends into these wrappers transparently; the controller re-applies
the block prefix from slice.raw on commit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/EditModeController.ts | 113 +++++++++---------
 .../services/inlineMarkdownSerializer.ts      |  10 +-
 .../components/EditModeController.test.ts     |  52 ++++++++
 3 files changed, 116 insertions(+), 59 deletions(-)
 create mode 100644 tests/unit/renderer/components/EditModeController.test.ts

diff --git a/src/renderer/components/EditModeController.ts b/src/renderer/components/EditModeController.ts
index f3633ac..fe2de88 100644
--- a/src/renderer/components/EditModeController.ts
+++ b/src/renderer/components/EditModeController.ts
@@ -7,6 +7,8 @@
  */
 import { MarkdownSlicer, type MarkdownSlice } from '../services/MarkdownSlicer';
 import type { PluginManager } from '@plugins/core/PluginManager';
+import { InlineEditor } from './InlineEditor';
+import { canSerialize } from '../services/inlineMarkdownSerializer';
 
 /**
  * Callbacks for EditModeController events
@@ -39,6 +41,7 @@ export class EditModeController {
   private rawMarkdown = '';
   private callbacks: EditModeCallbacks = {};
   private activeEditIndex: number | null = null;
+  private activeInlineEditor: InlineEditor | null = null;
   private activeMenu: HTMLElement | null = null;
   private sliceElements: Map<number, HTMLElement> = new Map();
 
@@ -153,101 +156,95 @@ export class EditModeController {
   }
 
   /**
-   * Start inline editing of a slice
+   * Start inline editing of a slice using the WYSIWYG InlineEditor.
    */
   private startEdit(sliceIndex: number): void {
-    // Commit any previous edit
     this.commitActiveEdit();
 
-    const slice = this.slices.find(s => s.index === sliceIndex);
+    const slice = this.slices.find((s) => s.index === sliceIndex);
     const el = this.sliceElements.get(sliceIndex);
     if (!slice || !el) return;
 
-    this.activeEditIndex = sliceIndex;
-    el.classList.add('slice-editing');
-
-    const contentEl = el.querySelector('.slice-content');
+    const contentEl = el.querySelector<HTMLElement>('.slice-content');
     if (!contentEl) return;
 
-    // Replace rendered HTML with textarea
-    const textarea = document.createElement('textarea');
-    textarea.className = 'slice-editor';
-    textarea.value = slice.raw;
-    textarea.spellcheck = false;
-
-    // Auto-resize
-    const resize = (): void => {
-      textarea.style.height = 'auto';
-      textarea.style.height = textarea.scrollHeight + 'px';
-    };
+    // Unsupported inline content is handled by the raw editor (Task 10).
+    if (!canSerialize(contentEl)) {
+      this.startRawEdit(sliceIndex);
+      return;
+    }
 
-    textarea.addEventListener('input', resize);
+    this.activeEditIndex = sliceIndex;
+    el.classList.add('slice-editing');
 
-    // Handle keyboard shortcuts
-    textarea.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        this.commitActiveEdit();
-      }
+    this.activeInlineEditor = new InlineEditor(contentEl, {
+      onCommit: (inlineMarkdown) => {
+        this.applyInlineCommit(sliceIndex, inlineMarkdown);
+      },
     });
-
-    contentEl.innerHTML = '';
-    contentEl.appendChild(textarea);
-
-    // Focus and resize
-    textarea.focus();
-    resize();
+    this.activeInlineEditor.start();
   }
 
   /**
-   * Commit the active edit and re-render the slice
+   * Apply the markdown produced by an InlineEditor commit: re-attach the
+   * slice's block prefix, push it through the slicer, and re-render the slice.
    */
-  private commitActiveEdit(): void {
-    if (this.activeEditIndex === null) return;
-
-    const sliceIndex = this.activeEditIndex;
-    // Clear immediately to prevent race conditions with async postRender
-    this.activeEditIndex = null;
-
+  private applyInlineCommit(sliceIndex: number, inlineMarkdown: string): void {
+    const slice = this.slices.find((s) => s.index === sliceIndex);
     const el = this.sliceElements.get(sliceIndex);
-    if (!el) return;
-
-    const textarea = el.querySelector<HTMLTextAreaElement>('.slice-editor');
-    if (!textarea) return;
+    if (!slice || !el) return;
 
-    const newRaw = textarea.value;
-    const slice = this.slices.find(s => s.index === sliceIndex);
+    const blockType = this.detectBlockType(slice.raw);
+    const newRaw = this.applyBlockPrefix(inlineMarkdown, blockType);
 
-    if (slice && newRaw !== slice.raw) {
-      // Update the slice and recalculate
+    if (newRaw !== slice.raw) {
       const result = this.slicer.updateSlice(this.slices, sliceIndex, newRaw);
       this.rawMarkdown = result.markdown;
       this.slices = result.slices;
-
-      // Notify of content change
       this.callbacks.onContentChange?.(this.rawMarkdown);
     }
 
-    // Re-render just this slice's content
     el.classList.remove('slice-editing');
     const contentEl = el.querySelector('.slice-content');
-    if (contentEl && slice) {
-      const updatedSlice = this.slices.find(s => s.index === sliceIndex);
+    const updatedSlice = this.slices.find((s) => s.index === sliceIndex);
+    if (contentEl) {
       const html = this.pluginManager.render(updatedSlice?.raw ?? slice.raw);
-      contentEl.innerHTML = html;
-
-      // Re-attach click handler
+      contentEl.replaceChildren();
+      contentEl.insertAdjacentHTML('afterbegin', html);
       contentEl.addEventListener('click', (e) => {
         if ((e.target as HTMLElement).closest('a')) return;
         e.stopPropagation();
         this.startEdit(sliceIndex);
       });
-
-      // Run post-render asynchronously (non-blocking)
       void this.pluginManager.postRender(contentEl as HTMLElement);
     }
   }
 
+  /**
+   * Placeholder for the slim raw-markdown editor wired up in Task 10. Today
+   * it falls back to leaving the slice untouched; Task 10 replaces the body.
+   */
+  private startRawEdit(_sliceIndex: number): void {
+    // Implemented in Task 10.
+  }
+
+  /**
+   * Commit the active edit. The InlineEditor's onCommit callback does the
+   * markdown reconciliation; this just triggers it and clears local state.
+   */
+  private commitActiveEdit(): void {
+    if (this.activeEditIndex === null) return;
+    this.activeEditIndex = null;
+    const editor = this.activeInlineEditor;
+    this.activeInlineEditor = null;
+    editor?.commit();
+  }
+
+  /** Test-only: deterministically commit the active edit. */
+  commitActiveEditForTest(): void {
+    this.commitActiveEdit();
+  }
+
   /**
    * Toggle the options menu for a slice handle
    */
diff --git a/src/renderer/services/inlineMarkdownSerializer.ts b/src/renderer/services/inlineMarkdownSerializer.ts
index b5d5a70..8a6cc69 100644
--- a/src/renderer/services/inlineMarkdownSerializer.ts
+++ b/src/renderer/services/inlineMarkdownSerializer.ts
@@ -60,9 +60,17 @@ function serializeNode(node: Node): string {
   }
 }
 
-/** Element tags the serializer knows how to faithfully emit. */
+/** Element tags the serializer knows how to faithfully emit. The block-level
+ *  tags (P, H1-H6, UL/OL/LI, BLOCKQUOTE) appear as the markdown-it-rendered
+ *  wrappers around a slice's inline content; serializeNode's default case
+ *  descends into them transparently, and the controller re-applies the slice's
+ *  block prefix on commit. Anything outside this set (inline <img>, <sup>,
+ *  styled <span>, raw HTML, tables, <pre>/code-block, <hr>) routes to the raw
+ *  editor so source is never silently mangled. */
 const SUPPORTED_TAGS = new Set([
   'STRONG', 'B', 'EM', 'I', 'DEL', 'S', 'CODE', 'A', 'BR',
+  'P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
+  'UL', 'OL', 'LI', 'BLOCKQUOTE',
 ]);
 
 /**
diff --git a/tests/unit/renderer/components/EditModeController.test.ts b/tests/unit/renderer/components/EditModeController.test.ts
new file mode 100644
index 0000000..1ad4906
--- /dev/null
+++ b/tests/unit/renderer/components/EditModeController.test.ts
@@ -0,0 +1,52 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { EditModeController } from '../../../../src/renderer/components/EditModeController';
+import type { PluginManager } from '../../../../src/plugins/core/PluginManager';
+
+/** Minimal PluginManager stub: render wraps content in <p>, bold/italic
+ *  markdown becomes tags. Good enough for edit-mode orchestration tests. */
+function makePluginManager(): PluginManager {
+  return {
+    render: (md: string): string => {
+      const html = md
+        .replace(/^#{1,6}\s+/, '')
+        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+        .replace(/(?<!\*)\*(?!\*)(.+?)\*(?!\*)/g, '<em>$1</em>');
+      return `<p>${html}</p>`;
+    },
+    postRender: vi.fn(() => Promise.resolve()),
+  } as unknown as PluginManager;
+}
+
+function setup(): { container: HTMLElement; controller: EditModeController } {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const controller = new EditModeController(container, makePluginManager());
+  return { container, controller };
+}
+
+describe('EditModeController — WYSIWYG editing', () => {
+  it('clicking a slice makes its content contenteditable, not a textarea', async () => {
+    const { container, controller } = setup();
+    await controller.enter('Hello **world**');
+    const content = container.querySelector<HTMLElement>('.slice-content')!;
+    content.click();
+    expect(content.getAttribute('contenteditable')).toBe('true');
+    expect(container.querySelector('textarea')).toBe(null);
+  });
+
+  it('committing an edited slice re-applies the block prefix and updates markdown', async () => {
+    const { container, controller } = setup();
+    const onContentChange = vi.fn();
+    controller.setCallbacks({ onContentChange });
+    await controller.enter('# Title');
+    const content = container.querySelector<HTMLElement>('.slice-content')!;
+    content.click();
+    content.textContent = 'New Title';
+    controller.commitActiveEditForTest();
+    expect(onContentChange).toHaveBeenCalledWith('# New Title');
+    expect(controller.getMarkdown()).toBe('# New Title');
+  });
+});

From b77228d1084db3bee883aa2aa9cb06d70a83c3f3 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Fri, 15 May 2026 17:34:23 +0300
Subject: [PATCH 12/30] feat: add slim raw-markdown editor and Cmd+/ toggle

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/EditModeController.ts | 100 +++++++++++++++++-
 .../components/EditModeController.test.ts     |  25 +++++
 2 files changed, 121 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/EditModeController.ts b/src/renderer/components/EditModeController.ts
index fe2de88..2ca79d7 100644
--- a/src/renderer/components/EditModeController.ts
+++ b/src/renderer/components/EditModeController.ts
@@ -42,6 +42,7 @@ export class EditModeController {
   private callbacks: EditModeCallbacks = {};
   private activeEditIndex: number | null = null;
   private activeInlineEditor: InlineEditor | null = null;
+  private activeRawTextarea: HTMLTextAreaElement | null = null;
   private activeMenu: HTMLElement | null = null;
   private sliceElements: Map<number, HTMLElement> = new Map();
 
@@ -221,11 +222,96 @@ export class EditModeController {
   }
 
   /**
-   * Placeholder for the slim raw-markdown editor wired up in Task 10. Today
-   * it falls back to leaving the slice untouched; Task 10 replaces the body.
+   * Open a slice in the slim raw-markdown textarea. Used as the fallback for
+   * unsupported inline content and as the target of the Cmd+/ toggle.
    */
-  private startRawEdit(_sliceIndex: number): void {
-    // Implemented in Task 10.
+  private startRawEdit(sliceIndex: number): void {
+    this.commitActiveEdit();
+
+    const slice = this.slices.find((s) => s.index === sliceIndex);
+    const el = this.sliceElements.get(sliceIndex);
+    if (!slice || !el) return;
+
+    const contentEl = el.querySelector<HTMLElement>('.slice-content');
+    if (!contentEl) return;
+
+    this.activeEditIndex = sliceIndex;
+    el.classList.add('slice-editing');
+
+    const textarea = document.createElement('textarea');
+    textarea.className = 'slice-raw-editor';
+    textarea.value = slice.raw;
+    textarea.spellcheck = false;
+
+    const resize = (): void => {
+      textarea.style.height = 'auto';
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    };
+    textarea.addEventListener('input', resize);
+    textarea.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this.commitActiveEdit();
+      }
+    });
+
+    contentEl.replaceChildren(textarea);
+    this.activeRawTextarea = textarea;
+    textarea.focus();
+    resize();
+  }
+
+  /**
+   * Commit a raw-textarea edit: the textarea value is the slice's markdown
+   * verbatim — no block-prefix reconciliation needed.
+   */
+  private commitRawEdit(sliceIndex: number): void {
+    const textarea = this.activeRawTextarea;
+    this.activeRawTextarea = null;
+    if (!textarea) return;
+
+    const slice = this.slices.find((s) => s.index === sliceIndex);
+    const el = this.sliceElements.get(sliceIndex);
+    if (!slice || !el) return;
+
+    const newRaw = textarea.value;
+    if (newRaw !== slice.raw) {
+      const result = this.slicer.updateSlice(this.slices, sliceIndex, newRaw);
+      this.rawMarkdown = result.markdown;
+      this.slices = result.slices;
+      this.callbacks.onContentChange?.(this.rawMarkdown);
+    }
+
+    el.classList.remove('slice-editing');
+    const contentEl = el.querySelector('.slice-content');
+    const updatedSlice = this.slices.find((s) => s.index === sliceIndex);
+    if (contentEl) {
+      const html = this.pluginManager.render(updatedSlice?.raw ?? slice.raw);
+      contentEl.replaceChildren();
+      contentEl.insertAdjacentHTML('afterbegin', html);
+      contentEl.addEventListener('click', (e) => {
+        if ((e.target as HTMLElement).closest('a')) return;
+        e.stopPropagation();
+        this.startEdit(sliceIndex);
+      });
+      void this.pluginManager.postRender(contentEl as HTMLElement);
+    }
+  }
+
+  /**
+   * Toggle the active slice between WYSIWYG and raw-markdown editing.
+   * Bound to Cmd+/ and the "Edit as markdown" handle-menu item.
+   */
+  toggleRawForActiveSlice(): void {
+    const sliceIndex = this.activeEditIndex;
+    if (sliceIndex === null) return;
+    const wasRaw = this.activeRawTextarea !== null;
+    this.commitActiveEdit();
+    if (wasRaw) {
+      this.startEdit(sliceIndex);
+    } else {
+      this.startRawEdit(sliceIndex);
+    }
   }
 
   /**
@@ -234,7 +320,13 @@ export class EditModeController {
    */
   private commitActiveEdit(): void {
     if (this.activeEditIndex === null) return;
+    const sliceIndex = this.activeEditIndex;
     this.activeEditIndex = null;
+
+    if (this.activeRawTextarea) {
+      this.commitRawEdit(sliceIndex);
+      return;
+    }
     const editor = this.activeInlineEditor;
     this.activeInlineEditor = null;
     editor?.commit();
diff --git a/tests/unit/renderer/components/EditModeController.test.ts b/tests/unit/renderer/components/EditModeController.test.ts
index 1ad4906..70bf98a 100644
--- a/tests/unit/renderer/components/EditModeController.test.ts
+++ b/tests/unit/renderer/components/EditModeController.test.ts
@@ -50,3 +50,28 @@ describe('EditModeController — WYSIWYG editing', () => {
     expect(controller.getMarkdown()).toBe('# New Title');
   });
 });
+
+describe('EditModeController — raw markdown editing', () => {
+  it('startRawEdit puts a slim textarea in the slice with the raw markdown', async () => {
+    const { container, controller } = setup();
+    await controller.enter('# Title');
+    container.querySelector<HTMLElement>('.slice-content')!.click(); // WYSIWYG
+    controller.toggleRawForActiveSlice();
+    const textarea = container.querySelector<HTMLTextAreaElement>('textarea.slice-raw-editor');
+    expect(textarea).not.toBe(null);
+    expect(textarea!.value).toBe('# Title');
+  });
+
+  it('committing a raw edit updates the markdown verbatim', async () => {
+    const { container, controller } = setup();
+    const onContentChange = vi.fn();
+    controller.setCallbacks({ onContentChange });
+    await controller.enter('# Title');
+    container.querySelector<HTMLElement>('.slice-content')!.click();
+    controller.toggleRawForActiveSlice();
+    const textarea = container.querySelector<HTMLTextAreaElement>('textarea.slice-raw-editor')!;
+    textarea.value = '## Changed';
+    controller.commitActiveEditForTest();
+    expect(onContentChange).toHaveBeenCalledWith('## Changed');
+  });
+});

From 523b3bc3369d5c30ffdb8ab23b44eee885d37d86 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Fri, 15 May 2026 18:16:01 +0300
Subject: [PATCH 13/30] feat: add Cmd+/ , Cmd+Shift+F and handle-menu toggles
 to edit mode

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/EditModeController.ts | 56 ++++++++++++++++++-
 .../components/EditModeController.test.ts     | 32 +++++++++++
 2 files changed, 87 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/EditModeController.ts b/src/renderer/components/EditModeController.ts
index 2ca79d7..611c076 100644
--- a/src/renderer/components/EditModeController.ts
+++ b/src/renderer/components/EditModeController.ts
@@ -23,7 +23,9 @@ export interface EditModeCallbacks {
 /**
  * Actions available from the slice handle menu
  */
-export type SliceAction = 'delete' | 'duplicate' | 'move-up' | 'move-down' | 'add-above' | 'add-below';
+export type SliceAction =
+  | 'delete' | 'duplicate' | 'move-up' | 'move-down' | 'add-above' | 'add-below'
+  | 'edit-as-markdown' | 'toggle-toolbar';
 
 /**
  * Block types a slice can be converted to
@@ -43,6 +45,7 @@ export class EditModeController {
   private activeEditIndex: number | null = null;
   private activeInlineEditor: InlineEditor | null = null;
   private activeRawTextarea: HTMLTextAreaElement | null = null;
+  private toolbarVisible = false;
   private activeMenu: HTMLElement | null = null;
   private sliceElements: Map<number, HTMLElement> = new Map();
 
@@ -67,6 +70,7 @@ export class EditModeController {
     this.slices = this.slicer.slice(markdown);
     await this.renderSlices();
     document.addEventListener('click', this.handleDocumentClick);
+    document.addEventListener('keydown', this.onGlobalKeyDown);
   }
 
   /**
@@ -76,6 +80,8 @@ export class EditModeController {
     this.commitActiveEdit();
     this.closeMenu();
     document.removeEventListener('click', this.handleDocumentClick);
+    document.removeEventListener('keydown', this.onGlobalKeyDown);
+    this.toolbarVisible = false;
     this.sliceElements.clear();
     this.activeEditIndex = null;
     return this.rawMarkdown;
@@ -337,6 +343,28 @@ export class EditModeController {
     this.commitActiveEdit();
   }
 
+  private readonly onGlobalKeyDown = (e: KeyboardEvent): void => {
+    const mod = e.metaKey || e.ctrlKey;
+    if (!mod) return;
+    if (e.key === '/') {
+      e.preventDefault();
+      this.toggleRawForActiveSlice();
+    } else if (e.key.toLowerCase() === 'f' && e.shiftKey) {
+      e.preventDefault();
+      this.setToolbarVisible(!this.toolbarVisible);
+    }
+  };
+
+  /** Whether the floating toolbar is currently enabled (global state). */
+  isToolbarVisible(): boolean {
+    return this.toolbarVisible;
+  }
+
+  /** Enable/disable the floating toolbar. Toolbar UI wiring is Task 12. */
+  setToolbarVisible(visible: boolean): void {
+    this.toolbarVisible = visible;
+  }
+
   /**
    * Toggle the options menu for a slice handle
    */
@@ -418,6 +446,19 @@ export class EditModeController {
         Add block below
       </button>
       <div class="slice-menu-divider"></div>
+      <button data-action="edit-as-markdown" class="slice-menu-item">
+        <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2z"/>
+        </svg>
+        Edit as markdown
+      </button>
+      <button data-action="toggle-toolbar" class="slice-menu-item">
+        <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M2 4h12v2H2V4zm0 4h8v2H2V8z"/>
+        </svg>
+        Show/hide formatting toolbar
+      </button>
+      <div class="slice-menu-divider"></div>
       <button data-action="duplicate" class="slice-menu-item">
         <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
           <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
@@ -597,6 +638,19 @@ export class EditModeController {
   private handleSliceAction(action: SliceAction, sliceIndex: number): void {
     this.commitActiveEdit();
 
+    if (action === 'edit-as-markdown') {
+      if (this.activeEditIndex === sliceIndex) {
+        this.toggleRawForActiveSlice();
+      } else {
+        this.startRawEdit(sliceIndex);
+      }
+      return;
+    }
+    if (action === 'toggle-toolbar') {
+      this.setToolbarVisible(!this.toolbarVisible);
+      return;
+    }
+
     const idx = this.slices.findIndex(s => s.index === sliceIndex);
     if (idx === -1) return;
 
diff --git a/tests/unit/renderer/components/EditModeController.test.ts b/tests/unit/renderer/components/EditModeController.test.ts
index 70bf98a..bbc6161 100644
--- a/tests/unit/renderer/components/EditModeController.test.ts
+++ b/tests/unit/renderer/components/EditModeController.test.ts
@@ -75,3 +75,35 @@ describe('EditModeController — raw markdown editing', () => {
     expect(onContentChange).toHaveBeenCalledWith('## Changed');
   });
 });
+
+describe('EditModeController — global shortcuts and menu', () => {
+  it('Cmd+/ toggles the active slice to raw editing', async () => {
+    const { container, controller } = setup();
+    await controller.enter('# Title');
+    container.querySelector<HTMLElement>('.slice-content')!.click();
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key: '/', metaKey: true, bubbles: true, cancelable: true,
+    }));
+    expect(container.querySelector('textarea.slice-raw-editor')).not.toBe(null);
+  });
+
+  it('Cmd+Shift+F toggles the floating toolbar visibility flag', async () => {
+    const { controller } = setup();
+    await controller.enter('# Title');
+    expect(controller.isToolbarVisible()).toBe(false);
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'f', metaKey: true, shiftKey: true, bubbles: true, cancelable: true,
+    }));
+    expect(controller.isToolbarVisible()).toBe(true);
+  });
+
+  it('exit() removes the global key listener', async () => {
+    const { controller } = setup();
+    await controller.enter('# Title');
+    controller.exit();
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'f', metaKey: true, shiftKey: true, bubbles: true, cancelable: true,
+    }));
+    expect(controller.isToolbarVisible()).toBe(false);
+  });
+});

From 852d33fa85e993d7bc4705fb956300060e2a0f83 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Fri, 15 May 2026 23:26:48 +0300
Subject: [PATCH 14/30] feat: wire the floating format toolbar into edit mode

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/EditModeController.ts | 71 ++++++++++++++++++-
 .../components/EditModeController.test.ts     | 37 ++++++++++
 2 files changed, 107 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/EditModeController.ts b/src/renderer/components/EditModeController.ts
index 611c076..bf999f5 100644
--- a/src/renderer/components/EditModeController.ts
+++ b/src/renderer/components/EditModeController.ts
@@ -8,6 +8,8 @@
 import { MarkdownSlicer, type MarkdownSlice } from '../services/MarkdownSlicer';
 import type { PluginManager } from '@plugins/core/PluginManager';
 import { InlineEditor } from './InlineEditor';
+import type { InlineMark } from './InlineEditor';
+import { FloatingFormatToolbar, type ToolbarAction } from './FloatingFormatToolbar';
 import { canSerialize } from '../services/inlineMarkdownSerializer';
 
 /**
@@ -46,6 +48,7 @@ export class EditModeController {
   private activeInlineEditor: InlineEditor | null = null;
   private activeRawTextarea: HTMLTextAreaElement | null = null;
   private toolbarVisible = false;
+  private toolbar: FloatingFormatToolbar | null = null;
   private activeMenu: HTMLElement | null = null;
   private sliceElements: Map<number, HTMLElement> = new Map();
 
@@ -81,6 +84,8 @@ export class EditModeController {
     this.closeMenu();
     document.removeEventListener('click', this.handleDocumentClick);
     document.removeEventListener('keydown', this.onGlobalKeyDown);
+    this.toolbar?.getElement().remove();
+    this.toolbar = null;
     this.toolbarVisible = false;
     this.sliceElements.clear();
     this.activeEditIndex = null;
@@ -188,8 +193,15 @@ export class EditModeController {
       onCommit: (inlineMarkdown) => {
         this.applyInlineCommit(sliceIndex, inlineMarkdown);
       },
+      onRequestLink: () => {
+        if (this.activeInlineEditor) this.promptAndApplyLink(this.activeInlineEditor);
+      },
     });
     this.activeInlineEditor.start();
+    if (this.toolbarVisible) {
+      this.getToolbar().show(contentEl);
+      this.refreshToolbarState();
+    }
   }
 
   /**
@@ -335,6 +347,7 @@ export class EditModeController {
     }
     const editor = this.activeInlineEditor;
     this.activeInlineEditor = null;
+    this.toolbar?.hide();
     editor?.commit();
   }
 
@@ -360,9 +373,65 @@ export class EditModeController {
     return this.toolbarVisible;
   }
 
-  /** Enable/disable the floating toolbar. Toolbar UI wiring is Task 12. */
+  /** Enable/disable the floating toolbar. Reflects immediately for the active slice. */
   setToolbarVisible(visible: boolean): void {
     this.toolbarVisible = visible;
+    if (!visible) {
+      this.toolbar?.hide();
+      return;
+    }
+    if (this.activeEditIndex !== null && this.activeInlineEditor) {
+      const el = this.sliceElements.get(this.activeEditIndex);
+      const contentEl = el?.querySelector<HTMLElement>('.slice-content');
+      if (contentEl) {
+        this.getToolbar().show(contentEl);
+        this.refreshToolbarState();
+      }
+    }
+  }
+
+  private getToolbar(): FloatingFormatToolbar {
+    if (!this.toolbar) {
+      this.toolbar = new FloatingFormatToolbar({
+        onAction: (action) => this.handleToolbarAction(action),
+      });
+      this.container.appendChild(this.toolbar.getElement());
+    }
+    return this.toolbar;
+  }
+
+  private handleToolbarAction(action: ToolbarAction): void {
+    const editor = this.activeInlineEditor;
+    if (!editor) return;
+    if (action === 'link') {
+      this.promptAndApplyLink(editor);
+      return;
+    }
+    if (action === 'clear') {
+      (['bold', 'italic', 'strikethrough', 'code'] as InlineMark[]).forEach((m) => {
+        if (editor.isMarkActive(m)) editor.toggleMark(m);
+      });
+      this.refreshToolbarState();
+      return;
+    }
+    editor.toggleMark(action as InlineMark);
+    this.refreshToolbarState();
+  }
+
+  /** Prompt for a URL and apply it as a link on the editor's selection. */
+  private promptAndApplyLink(editor: InlineEditor): void {
+    const href = window.prompt('Link URL') ?? '';
+    editor.applyLink(href.trim());
+  }
+
+  private refreshToolbarState(): void {
+    if (!this.toolbar || !this.activeInlineEditor) return;
+    const editor = this.activeInlineEditor;
+    const active: ToolbarAction[] = [];
+    (['bold', 'italic', 'strikethrough', 'code'] as InlineMark[]).forEach((m) => {
+      if (editor.isMarkActive(m)) active.push(m);
+    });
+    this.toolbar.setActiveMarks(active);
   }
 
   /**
diff --git a/tests/unit/renderer/components/EditModeController.test.ts b/tests/unit/renderer/components/EditModeController.test.ts
index bbc6161..8b82079 100644
--- a/tests/unit/renderer/components/EditModeController.test.ts
+++ b/tests/unit/renderer/components/EditModeController.test.ts
@@ -107,3 +107,40 @@ describe('EditModeController — global shortcuts and menu', () => {
     expect(controller.isToolbarVisible()).toBe(false);
   });
 });
+
+describe('EditModeController — floating toolbar wiring', () => {
+  it('shows the toolbar above a slice being edited when toolbar is enabled', async () => {
+    const { container, controller } = setup();
+    await controller.enter('Hello world');
+    controller.setToolbarVisible(true);
+    container.querySelector<HTMLElement>('.slice-content')!.click();
+    const toolbar = container.querySelector('.inline-format-toolbar') as HTMLElement;
+    expect(toolbar).not.toBe(null);
+    expect(toolbar.hidden).toBe(false);
+  });
+
+  it('keeps the toolbar hidden when toolbar is disabled', async () => {
+    const { container, controller } = setup();
+    await controller.enter('Hello world');
+    container.querySelector<HTMLElement>('.slice-content')!.click();
+    const toolbar = container.querySelector('.inline-format-toolbar') as HTMLElement | null;
+    expect(toolbar === null || toolbar.hidden).toBe(true);
+  });
+
+  it('a toolbar bold action wraps the selection in the active editor', async () => {
+    const { container, controller } = setup();
+    await controller.enter('Hello world');
+    controller.setToolbarVisible(true);
+    const content = container.querySelector<HTMLElement>('.slice-content')!;
+    content.click();
+    const range = document.createRange();
+    range.selectNodeContents(content);
+    const sel = window.getSelection()!;
+    sel.removeAllRanges();
+    sel.addRange(range);
+    container
+      .querySelector<HTMLButtonElement>('.inline-format-toolbar [data-action="bold"]')!
+      .click();
+    expect(content.querySelector('strong')).not.toBe(null);
+  });
+});

From d37b117e224eae01fa6e435c8cb64cc6bcb4d23f Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Fri, 15 May 2026 23:41:49 +0300
Subject: [PATCH 15/30] style: slim inline editor and add floating toolbar
 styles

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.css | 57 ++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/index.css b/src/index.css
index 1200c33..1729f23 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1771,8 +1771,13 @@ button:focus:not(:focus-visible) {
 }
 
 .slice.slice-editing .slice-content {
-  box-shadow: 0 0 0 2px var(--link-color);
   background-color: var(--bg-color);
+  box-shadow: inset 2px 0 0 var(--link-color);
+}
+
+.slice-content[contenteditable='true'] {
+  outline: none;
+  cursor: text;
 }
 
 /* Reset margins on rendered content inside slices */
@@ -1784,13 +1789,13 @@ button:focus:not(:focus-visible) {
   margin-bottom: 0;
 }
 
-/* Slice editor textarea */
-.slice-editor {
+/* Slim raw-markdown editor (used by the "Edit as markdown" toggle) */
+.slice-raw-editor {
   width: 100%;
-  min-height: 40px;
-  padding: 8px;
+  min-height: 1.6em;
+  padding: 0;
   border: none;
-  border-radius: 4px;
+  border-radius: 0;
   background: transparent;
   color: var(--text-color);
   font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
@@ -1801,7 +1806,7 @@ button:focus:not(:focus-visible) {
   overflow: hidden;
 }
 
-.slice-editor:focus {
+.slice-raw-editor:focus {
   outline: none;
 }
 
@@ -1920,6 +1925,44 @@ button:focus:not(:focus-visible) {
   flex-shrink: 0;
 }
 
+/* Floating inline-format toolbar */
+.inline-format-toolbar {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 6px;
+  background: var(--bg-color);
+  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 200;
+}
+
+.inline-format-toolbar[hidden] {
+  display: none;
+}
+
+.inline-format-toolbar button {
+  min-width: 26px;
+  height: 26px;
+  padding: 0 6px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-color);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.inline-format-toolbar button:hover {
+  background: var(--hover-bg, rgba(0, 0, 0, 0.06));
+}
+
+.inline-format-toolbar button.is-active {
+  background: var(--link-color);
+  color: #fff;
+}
+
 /* Edit mode badge in status bar */
 .status-edit-mode {
   display: flex;

From b52121cd887d7977034c3690c01998250c9677e4 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 00:01:47 +0300
Subject: [PATCH 16/30] chore: lint fixes for inline WYSIWYG edit mode

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 tests/unit/renderer/components/EditModeController.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/unit/renderer/components/EditModeController.test.ts b/tests/unit/renderer/components/EditModeController.test.ts
index 8b82079..591a539 100644
--- a/tests/unit/renderer/components/EditModeController.test.ts
+++ b/tests/unit/renderer/components/EditModeController.test.ts
@@ -123,7 +123,7 @@ describe('EditModeController — floating toolbar wiring', () => {
     const { container, controller } = setup();
     await controller.enter('Hello world');
     container.querySelector<HTMLElement>('.slice-content')!.click();
-    const toolbar = container.querySelector('.inline-format-toolbar') as HTMLElement | null;
+    const toolbar = container.querySelector<HTMLElement>('.inline-format-toolbar');
     expect(toolbar === null || toolbar.hidden).toBe(true);
   });
 

From 5fbe7570d4f9eb8ab210e1c58d90d2a23eff0820 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 14:44:53 +0300
Subject: [PATCH 17/30] feat: Notion-style Enter splits slice; Shift+Enter
 inserts hard break

Pressing Enter inside the WYSIWYG editor now ends the current slice
at the caret and opens a new paragraph slice below with the after-caret
content, focused for typing. Shift+Enter inserts a <br> (soft line
break) inside the same slice.

InlineEditor: new onSplit callback. splitAtCaret extracts the after-caret
DOM, serializes both halves, ends the session (idempotent commit) and
hands the markdown to the controller. insertLineBreak handles
Shift+Enter.

EditModeController: splitActiveSlice re-applies the slice's block prefix
to the "before" half, inserts a new paragraph slice with the "after"
half, re-slices, re-renders synchronously (factored renderSlicesSync
so startEdit on the new slice runs before async plugin post-render),
and opens the new slice for editing.

Serializer: <br> now emits "  \n" (markdown hard-break syntax) instead
of bare "\n". The previous output round-tripped lossily because
markdown-it is configured with breaks:false, so soft breaks were
silently dropped on re-render.

Sidesteps a pre-existing MarkdownSlicer.reassemble bug that joins
slices with a single newline (collapsing paragraphs on re-slice) by
building the rawMarkdown directly with "\n\n" between slices in the
split path. The reassemble fix is out of scope here.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/EditModeController.ts | 62 ++++++++++++++++--
 src/renderer/components/InlineEditor.ts       | 65 +++++++++++++++++++
 .../services/inlineMarkdownSerializer.ts      |  5 +-
 .../components/EditModeController.test.ts     | 26 ++++++++
 .../renderer/components/InlineEditor.test.ts  | 53 +++++++++++++++
 .../services/inlineMarkdownSerializer.test.ts |  6 +-
 6 files changed, 210 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/EditModeController.ts b/src/renderer/components/EditModeController.ts
index bf999f5..b6ce817 100644
--- a/src/renderer/components/EditModeController.ts
+++ b/src/renderer/components/EditModeController.ts
@@ -100,10 +100,12 @@ export class EditModeController {
   }
 
   /**
-   * Render all slices into the container
+   * Synchronously rebuild the slice DOM. Post-render plugin hooks run after,
+   * so callers that need to interact with the DOM (e.g. startEdit on a newly
+   * inserted slice) can do so immediately and not wait for plugin async work.
    */
-  private async renderSlices(): Promise<void> {
-    this.container.innerHTML = '';
+  private renderSlicesSync(): void {
+    this.container.replaceChildren();
     this.container.classList.add('edit-mode');
     this.sliceElements.clear();
 
@@ -112,8 +114,13 @@ export class EditModeController {
       this.container.appendChild(el);
       this.sliceElements.set(slice.index, el);
     }
+  }
 
-    // Run post-render for plugins (e.g., Mermaid diagrams)
+  /**
+   * Render all slices into the container, then run plugin post-render hooks.
+   */
+  private async renderSlices(): Promise<void> {
+    this.renderSlicesSync();
     await this.pluginManager.postRender(this.container);
   }
 
@@ -196,6 +203,9 @@ export class EditModeController {
       onRequestLink: () => {
         if (this.activeInlineEditor) this.promptAndApplyLink(this.activeInlineEditor);
       },
+      onSplit: (beforeMd, afterMd) => {
+        this.splitActiveSlice(sliceIndex, beforeMd, afterMd);
+      },
     });
     this.activeInlineEditor.start();
     if (this.toolbarVisible) {
@@ -332,6 +342,50 @@ export class EditModeController {
     }
   }
 
+  /**
+   * Split the active slice at the caret. The InlineEditor produced before/after
+   * markdown; here we re-apply the slice's block prefix to the "before" half,
+   * insert a new paragraph slice with the "after" half, and open editing on it.
+   * Mirrors the Notion behaviour of Enter creating a new block below.
+   */
+  private splitActiveSlice(sliceIndex: number, beforeMd: string, afterMd: string): void {
+    const idx = this.slices.findIndex((s) => s.index === sliceIndex);
+    const slice = this.slices[idx];
+    const el = this.sliceElements.get(sliceIndex);
+    if (idx === -1 || !slice || !el) return;
+
+    // The InlineEditor has already torn down its session; clear our refs too.
+    this.activeEditIndex = null;
+    this.activeInlineEditor = null;
+    this.toolbar?.hide();
+    el.classList.remove('slice-editing');
+
+    const blockType = this.detectBlockType(slice.raw);
+    slice.raw = this.applyBlockPrefix(beforeMd, blockType);
+
+    const newSlice: MarkdownSlice = {
+      index: Math.max(...this.slices.map((s) => s.index)) + 1,
+      type: 'paragraph',
+      raw: afterMd,
+      startLine: slice.endLine,
+      endLine: slice.endLine,
+    };
+    this.slices.splice(idx + 1, 0, newSlice);
+
+    // MarkdownSlicer.reassemble joins slices with a single '\n', which would
+    // collapse two adjacent paragraphs into one soft-break paragraph on
+    // re-slice. Join with '\n\n' here so block boundaries survive the round
+    // trip. (Pre-existing reassemble bug; out of scope to fix globally.)
+    this.rawMarkdown = this.slices.map((s) => s.raw).join('\n\n');
+    this.callbacks.onContentChange?.(this.rawMarkdown);
+
+    this.slices = this.slicer.slice(this.rawMarkdown);
+    this.renderSlicesSync();
+    const newSliceAtPos = this.slices[idx + 1];
+    if (newSliceAtPos) this.startEdit(newSliceAtPos.index);
+    void this.pluginManager.postRender(this.container);
+  }
+
   /**
    * Commit the active edit. The InlineEditor's onCommit callback does the
    * markdown reconciliation; this just triggers it and clears local state.
diff --git a/src/renderer/components/InlineEditor.ts b/src/renderer/components/InlineEditor.ts
index 808d877..98a5bd5 100644
--- a/src/renderer/components/InlineEditor.ts
+++ b/src/renderer/components/InlineEditor.ts
@@ -14,6 +14,14 @@ export interface InlineEditorCallbacks {
   onCommit: (markdown: string) => void;
   /** Called when the user requests link insertion (Cmd+K). Optional. */
   onRequestLink?: () => void;
+  /**
+   * Called when Enter is pressed inside the editor. `beforeMd` is everything
+   * to the left of the caret, `afterMd` everything to the right. The editor
+   * has already torn down its session; the caller is responsible for splitting
+   * the slice and opening a new edit on the new content. If absent, Enter
+   * falls back to browser default behaviour.
+   */
+  onSplit?: (beforeMd: string, afterMd: string) => void;
 }
 
 /** The inline marks the editor can toggle. */
@@ -69,6 +77,16 @@ export class InlineEditor {
       this.commit();
       return;
     }
+    if (e.key === 'Enter' && !e.shiftKey && this.callbacks.onSplit) {
+      e.preventDefault();
+      this.splitAtCaret();
+      return;
+    }
+    if (e.key === 'Enter' && e.shiftKey) {
+      e.preventDefault();
+      this.insertLineBreak();
+      return;
+    }
     const mod = e.metaKey || e.ctrlKey;
     if (!mod) return;
 
@@ -127,6 +145,53 @@ export class InlineEditor {
   // selection covers all of an element's contents (selectNodeContents). Descend
   // into the deepest node actually inside the selection so the ancestor walk
   // starts from somewhere the mark element can be reached upward.
+  /**
+   * Split the editor's DOM at the caret. Serializes the two halves to markdown
+   * and hands them to `onSplit`. Ends this editor session (without firing
+   * onCommit again) — the caller drives the slice split and re-opens editing.
+   */
+  private splitAtCaret(): void {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    if (!this.el.contains(range.commonAncestorContainer)) return;
+
+    range.deleteContents();
+
+    const afterRange = document.createRange();
+    afterRange.setStart(range.endContainer, range.endOffset);
+    afterRange.setEnd(this.el, this.el.childNodes.length);
+    const afterFrag = afterRange.extractContents();
+
+    const afterWrapper = document.createElement('div');
+    afterWrapper.appendChild(afterFrag);
+    const afterMd = serializeInline(afterWrapper);
+    const beforeMd = serializeInline(this.el);
+
+    this.committed = true;
+    this.el.removeEventListener('keydown', this.onKeyDown);
+    this.el.removeAttribute('contenteditable');
+
+    this.callbacks.onSplit?.(beforeMd, afterMd);
+  }
+
+  /** Insert a <br> at the caret (Shift+Enter — soft line break inside the slice). */
+  private insertLineBreak(): void {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    if (!this.el.contains(range.commonAncestorContainer)) return;
+
+    range.deleteContents();
+    const br = document.createElement('br');
+    range.insertNode(br);
+
+    range.setStartAfter(br);
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+
   private deepestStart(range: Range): Node {
     let node: Node = range.startContainer;
     let offset = range.startOffset;
diff --git a/src/renderer/services/inlineMarkdownSerializer.ts b/src/renderer/services/inlineMarkdownSerializer.ts
index 8a6cc69..0924d92 100644
--- a/src/renderer/services/inlineMarkdownSerializer.ts
+++ b/src/renderer/services/inlineMarkdownSerializer.ts
@@ -54,7 +54,10 @@ function serializeNode(node: Node): string {
       return `[${inner}](${href})`;
     }
     case 'BR':
-      return '\n';
+      // markdown-it has breaks:false, so a bare '\n' renders as whitespace
+      // and would silently lose the line break on re-render. "  \n" is the
+      // markdown hard-break syntax that survives the round trip.
+      return '  \n';
     default:
       return inner;
   }
diff --git a/tests/unit/renderer/components/EditModeController.test.ts b/tests/unit/renderer/components/EditModeController.test.ts
index 591a539..c07504d 100644
--- a/tests/unit/renderer/components/EditModeController.test.ts
+++ b/tests/unit/renderer/components/EditModeController.test.ts
@@ -127,6 +127,32 @@ describe('EditModeController — floating toolbar wiring', () => {
     expect(toolbar === null || toolbar.hidden).toBe(true);
   });
 
+  it('Enter inside a slice splits it and the new slice gets focus', async () => {
+    const { container, controller } = setup();
+    const onContentChange = vi.fn();
+    controller.setCallbacks({ onContentChange });
+    await controller.enter('Hello world');
+    const content = container.querySelector<HTMLElement>('.slice-content')!;
+    content.click();
+    // .slice-content > <p>Hello world</p> — caret between "Hello" and " world"
+    const textNode = content.firstChild!.firstChild!;
+    const range = document.createRange();
+    range.setStart(textNode, 5);
+    range.collapse(true);
+    const sel = window.getSelection()!;
+    sel.removeAllRanges();
+    sel.addRange(range);
+    content.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Enter', bubbles: true, cancelable: true,
+    }));
+    expect(controller.getMarkdown()).toBe('Hello\n\n world');
+    expect(onContentChange).toHaveBeenCalledWith('Hello\n\n world');
+    // The new slice should be the active edit.
+    const slices = container.querySelectorAll<HTMLElement>('.slice');
+    expect(slices.length).toBe(2);
+    expect(slices[1]!.classList.contains('slice-editing')).toBe(true);
+  });
+
   it('a toolbar bold action wraps the selection in the active editor', async () => {
     const { container, controller } = setup();
     await controller.enter('Hello world');
diff --git a/tests/unit/renderer/components/InlineEditor.test.ts b/tests/unit/renderer/components/InlineEditor.test.ts
index 44a19b5..7bad420 100644
--- a/tests/unit/renderer/components/InlineEditor.test.ts
+++ b/tests/unit/renderer/components/InlineEditor.test.ts
@@ -169,3 +169,56 @@ describe('InlineEditor link insertion', () => {
     expect(onRequestLink).toHaveBeenCalledTimes(1);
   });
 });
+
+function caretAt(node: Node, offset: number): void {
+  const range = document.createRange();
+  range.setStart(node, offset);
+  range.collapse(true);
+  const sel = window.getSelection()!;
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+describe('InlineEditor Enter handling', () => {
+  it('Enter calls onSplit with the markdown before and after the caret', () => {
+    const el = contentEl('hello world');
+    const onSplit = vi.fn();
+    const editor = new InlineEditor(el, { onCommit: vi.fn(), onSplit });
+    editor.start();
+    caretAt(el.firstChild!, 5); // between "hello" and " world"
+    keydown(el, 'Enter');
+    expect(onSplit).toHaveBeenCalledWith('hello', ' world');
+  });
+
+  it('Enter at the very end calls onSplit with an empty after', () => {
+    const el = contentEl('hello');
+    const onSplit = vi.fn();
+    const editor = new InlineEditor(el, { onCommit: vi.fn(), onSplit });
+    editor.start();
+    caretAt(el.firstChild!, 5);
+    keydown(el, 'Enter');
+    expect(onSplit).toHaveBeenCalledWith('hello', '');
+  });
+
+  it('Enter does not fire onCommit after the split', () => {
+    const el = contentEl('hello world');
+    const onCommit = vi.fn();
+    const editor = new InlineEditor(el, { onCommit, onSplit: vi.fn() });
+    editor.start();
+    caretAt(el.firstChild!, 5);
+    keydown(el, 'Enter');
+    editor.commit(); // explicit follow-up commit should be a no-op
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+
+  it('Shift+Enter inserts a <br> at the caret without firing onSplit', () => {
+    const el = contentEl('hello world');
+    const onSplit = vi.fn();
+    const editor = new InlineEditor(el, { onCommit: vi.fn(), onSplit });
+    editor.start();
+    caretAt(el.firstChild!, 5);
+    keydown(el, 'Enter', { shiftKey: true });
+    expect(el.querySelector('br')).not.toBe(null);
+    expect(onSplit).not.toHaveBeenCalled();
+  });
+});
diff --git a/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts b/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
index 1fabdd0..494d604 100644
--- a/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
+++ b/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
@@ -41,8 +41,10 @@ describe('serializeInline — links, breaks, nesting, escaping', () => {
       .toBe('see [the site](https://x.com)');
   });
 
-  it('serializes br to a newline', () => {
-    expect(serializeInline(div('line one<br>line two'))).toBe('line one\nline two');
+  it('serializes br to a markdown hard line break (two spaces + newline)', () => {
+    // markdown-it has breaks:false, so a bare '\n' renders as whitespace.
+    // "  \n" is the markdown hard-break syntax that round-trips back to <br>.
+    expect(serializeInline(div('line one<br>line two'))).toBe('line one  \nline two');
   });
 
   it('serializes nested marks', () => {

From a5a528b5ffc1bc42082da843517e1fc7cf9448b0 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 15:02:33 +0300
Subject: [PATCH 18/30] fix: Enter at end of slice inserts new empty slice, not
 jump to next
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pressing Enter at the end of a slice was navigating to the next existing
slice instead of inserting a new empty paragraph below the current one.

Root cause: splitActiveSlice fed the spliced slice array through
slicer.slice() to recompute line numbers. But markdown can't express an
empty paragraph — slicer.slice() collapsed the new empty slice away,
shifting the next existing slice into its position. startEdit on
this.slices[idx + 1] then opened that wrong slice.

Fix: skip the slicer round-trip. Recompute startLine/endLine manually
based on '\n\n'-joined raw content so the slice array remains
internally consistent (reassemble's startLine-sort still works for
later structural actions) without the empty-slice collapse.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/EditModeController.ts | 31 ++++++++++++++-----
 .../components/EditModeController.test.ts     | 27 ++++++++++++++++
 2 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/EditModeController.ts b/src/renderer/components/EditModeController.ts
index b6ce817..8bc9393 100644
--- a/src/renderer/components/EditModeController.ts
+++ b/src/renderer/components/EditModeController.ts
@@ -372,20 +372,37 @@ export class EditModeController {
     };
     this.slices.splice(idx + 1, 0, newSlice);
 
-    // MarkdownSlicer.reassemble joins slices with a single '\n', which would
-    // collapse two adjacent paragraphs into one soft-break paragraph on
-    // re-slice. Join with '\n\n' here so block boundaries survive the round
-    // trip. (Pre-existing reassemble bug; out of scope to fix globally.)
+    // Skip slicer.slice() round-trip: an empty afterMd (Enter at end of slice)
+    // is a valid paragraph in our model but markdown can't express an empty
+    // paragraph, so slicer.slice() would collapse it away and startEdit would
+    // land on the next existing slice instead of the new empty one. We rebuild
+    // rawMarkdown with '\n\n' separators (paragraph break — single '\n' would
+    // soft-break) and recompute line numbers manually so reassemble's
+    // startLine-sort still works for later structural actions.
     this.rawMarkdown = this.slices.map((s) => s.raw).join('\n\n');
+    this.recomputeLineNumbers();
     this.callbacks.onContentChange?.(this.rawMarkdown);
 
-    this.slices = this.slicer.slice(this.rawMarkdown);
     this.renderSlicesSync();
-    const newSliceAtPos = this.slices[idx + 1];
-    if (newSliceAtPos) this.startEdit(newSliceAtPos.index);
+    this.startEdit(newSlice.index);
     void this.pluginManager.postRender(this.container);
   }
 
+  /**
+   * Walk this.slices in order and assign startLine/endLine values consistent
+   * with a '\n\n'-joined reassembly. Each slice occupies its own line range
+   * plus one blank-line separator before the next.
+   */
+  private recomputeLineNumbers(): void {
+    let line = 0;
+    for (const s of this.slices) {
+      s.startLine = line;
+      const lineCount = s.raw === '' ? 1 : s.raw.split('\n').length;
+      s.endLine = line + lineCount;
+      line = s.endLine + 1; // +1 for the blank separator between slices
+    }
+  }
+
   /**
    * Commit the active edit. The InlineEditor's onCommit callback does the
    * markdown reconciliation; this just triggers it and clears local state.
diff --git a/tests/unit/renderer/components/EditModeController.test.ts b/tests/unit/renderer/components/EditModeController.test.ts
index c07504d..50b5078 100644
--- a/tests/unit/renderer/components/EditModeController.test.ts
+++ b/tests/unit/renderer/components/EditModeController.test.ts
@@ -127,6 +127,33 @@ describe('EditModeController — floating toolbar wiring', () => {
     expect(toolbar === null || toolbar.hidden).toBe(true);
   });
 
+  it('Enter at the end of a slice inserts a new empty slice — does not jump to the next existing one', async () => {
+    const { container, controller } = setup();
+    await controller.enter('First\n\nSecond');
+    const slicesBefore = container.querySelectorAll<HTMLElement>('.slice');
+    expect(slicesBefore.length).toBe(2);
+    // Click into the FIRST slice and put caret at the end of "First".
+    const firstContent = slicesBefore[0]!.querySelector<HTMLElement>('.slice-content')!;
+    firstContent.click();
+    const textNode = firstContent.firstChild!.firstChild!;
+    const range = document.createRange();
+    range.setStart(textNode, 5); // end of "First"
+    range.collapse(true);
+    const sel = window.getSelection()!;
+    sel.removeAllRanges();
+    sel.addRange(range);
+    firstContent.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Enter', bubbles: true, cancelable: true,
+    }));
+    const slicesAfter = container.querySelectorAll<HTMLElement>('.slice');
+    expect(slicesAfter.length).toBe(3); // First, NEW EMPTY, Second
+    // The new empty slice (position 1) should be the active edit, not Second.
+    expect(slicesAfter[1]!.classList.contains('slice-editing')).toBe(true);
+    expect(slicesAfter[1]!.querySelector('.slice-content')!.textContent).toBe('');
+    // Second slice content untouched.
+    expect(slicesAfter[2]!.querySelector('.slice-content')!.textContent).toContain('Second');
+  });
+
   it('Enter inside a slice splits it and the new slice gets focus', async () => {
     const { container, controller } = setup();
     const onContentChange = vi.fn();

From 627f2e83bb5334f2fc5edebf155b72864df0c2d3 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 15:11:59 +0300
Subject: [PATCH 19/30] fix: Enter at start of slice preserves block prefix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously, Enter at the start of a heading/list/quote rewrote the
current slice's raw to '' (stripping its block prefix like '#' or
'- ') and put the content into a new plain paragraph below. So
'# Title' + Enter-at-start produced '# \n\nTitle' (empty heading +
plain paragraph) instead of '\n\n# Title' (empty paragraph above,
heading intact).

For paragraphs the bug was invisible because both shapes render
identically, but block-typed slices lost their type.

Fix: when beforeMd is empty and afterMd is non-empty, take the
"insert empty above" branch — splice an empty paragraph at the
current slice's position (pushing it to idx+1) and re-open editing
on the unchanged original. The current slice's raw, type, and block
prefix all stay intact.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/EditModeController.ts | 25 +++++++++++++++++
 .../components/EditModeController.test.ts     | 27 +++++++++++++++++++
 2 files changed, 52 insertions(+)

diff --git a/src/renderer/components/EditModeController.ts b/src/renderer/components/EditModeController.ts
index 8bc9393..4ee9bfc 100644
--- a/src/renderer/components/EditModeController.ts
+++ b/src/renderer/components/EditModeController.ts
@@ -360,6 +360,31 @@ export class EditModeController {
     this.toolbar?.hide();
     el.classList.remove('slice-editing');
 
+    // Enter at the start of a non-empty slice: insert an empty paragraph
+    // ABOVE without modifying the current slice. Without this branch, the
+    // generic split would rewrite the current slice's raw to '' (losing any
+    // block prefix like '#' for headings, '- ' for lists) and move the
+    // content into a new plain paragraph below.
+    if (beforeMd === '' && afterMd !== '') {
+      const empty: MarkdownSlice = {
+        index: Math.max(...this.slices.map((s) => s.index)) + 1,
+        type: 'paragraph',
+        raw: '',
+        startLine: slice.startLine,
+        endLine: slice.startLine,
+      };
+      this.slices.splice(idx, 0, empty);
+
+      this.rawMarkdown = this.slices.map((s) => s.raw).join('\n\n');
+      this.recomputeLineNumbers();
+      this.callbacks.onContentChange?.(this.rawMarkdown);
+
+      this.renderSlicesSync();
+      this.startEdit(slice.index);
+      void this.pluginManager.postRender(this.container);
+      return;
+    }
+
     const blockType = this.detectBlockType(slice.raw);
     slice.raw = this.applyBlockPrefix(beforeMd, blockType);
 
diff --git a/tests/unit/renderer/components/EditModeController.test.ts b/tests/unit/renderer/components/EditModeController.test.ts
index 50b5078..c4163f0 100644
--- a/tests/unit/renderer/components/EditModeController.test.ts
+++ b/tests/unit/renderer/components/EditModeController.test.ts
@@ -127,6 +127,33 @@ describe('EditModeController — floating toolbar wiring', () => {
     expect(toolbar === null || toolbar.hidden).toBe(true);
   });
 
+  it('Enter at the start of a heading inserts an empty paragraph above and preserves the heading', async () => {
+    const { container, controller } = setup();
+    await controller.enter('# Title');
+    const content = container.querySelector<HTMLElement>('.slice-content')!;
+    content.click();
+    // Caret at offset 0 of "Title" (the inside of the <h1>).
+    const textNode = content.firstChild!.firstChild!;
+    const range = document.createRange();
+    range.setStart(textNode, 0);
+    range.collapse(true);
+    const sel = window.getSelection()!;
+    sel.removeAllRanges();
+    sel.addRange(range);
+    content.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Enter', bubbles: true, cancelable: true,
+    }));
+    // Two slices: empty paragraph + the original heading. The heading's raw
+    // must still start with '#' — the previous implementation rewrote the
+    // current slice's raw to '' (losing the heading prefix) and put the
+    // heading text in a new plain paragraph below.
+    expect(controller.getMarkdown()).toBe('\n\n# Title');
+    const slicesAfter = container.querySelectorAll<HTMLElement>('.slice');
+    expect(slicesAfter.length).toBe(2);
+    // Cursor returns to the (unchanged) heading slice.
+    expect(slicesAfter[1]!.classList.contains('slice-editing')).toBe(true);
+  });
+
   it('Enter at the end of a slice inserts a new empty slice — does not jump to the next existing one', async () => {
     const { container, controller } = setup();
     await controller.enter('First\n\nSecond');

From 1d2418781d04f9f54959248913eb56539e6b26d3 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 15:20:08 +0300
Subject: [PATCH 20/30] feat: cross-slice arrow navigation in edit mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ArrowUp on the first visual line of a slice commits the current edit
and opens the previous slice for editing, with the caret placed at
the end. ArrowDown on the last visual line does the symmetric thing
to the next slice, caret at the start. Within a slice, arrows fall
through to browser default (caret moves within the contenteditable).

InlineEditor: new onNavigate callback fired when the caret is on the
edge line and an adjacent move is requested. Edge detection uses the
caret's Range.getBoundingClientRect against the editor's element rect
with a 4px threshold; falls back to a zero-rect when the runtime
lacks Range.getBoundingClientRect (older jsdom), which makes both
edge checks pass — convenient for unit tests where the cross-slice
path is the interesting behaviour.

EditModeController: navigateFromSlice commits and opens the adjacent
slice, then placeCaretInActiveSlice positions the caret. No-ops at
slice boundaries (first slice + ArrowUp, last slice + ArrowDown).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer/components/EditModeController.ts | 35 +++++++++++
 src/renderer/components/InlineEditor.ts       | 45 ++++++++++++++
 .../components/EditModeController.test.ts     | 59 +++++++++++++++++++
 .../renderer/components/InlineEditor.test.ts  | 32 ++++++++++
 4 files changed, 171 insertions(+)

diff --git a/src/renderer/components/EditModeController.ts b/src/renderer/components/EditModeController.ts
index 4ee9bfc..be41f18 100644
--- a/src/renderer/components/EditModeController.ts
+++ b/src/renderer/components/EditModeController.ts
@@ -206,6 +206,9 @@ export class EditModeController {
       onSplit: (beforeMd, afterMd) => {
         this.splitActiveSlice(sliceIndex, beforeMd, afterMd);
       },
+      onNavigate: (direction) => {
+        this.navigateFromSlice(sliceIndex, direction);
+      },
     });
     this.activeInlineEditor.start();
     if (this.toolbarVisible) {
@@ -413,6 +416,38 @@ export class EditModeController {
     void this.pluginManager.postRender(this.container);
   }
 
+  /**
+   * Cross-slice arrow navigation. Commits the current edit and opens the
+   * adjacent slice, placing the caret at the end (for 'up') or start (for
+   * 'down') so the cursor lands as close as possible to where it was visually.
+   */
+  private navigateFromSlice(sliceIndex: number, direction: 'up' | 'down'): void {
+    const idx = this.slices.findIndex((s) => s.index === sliceIndex);
+    const targetIdx = direction === 'up' ? idx - 1 : idx + 1;
+    const target = this.slices[targetIdx];
+    if (!target) return;
+
+    this.commitActiveEdit();
+    this.startEdit(target.index);
+    this.placeCaretInActiveSlice(direction === 'up' ? 'end' : 'start');
+  }
+
+  /** Place the caret at the start or end of the active slice's contenteditable. */
+  private placeCaretInActiveSlice(at: 'start' | 'end'): void {
+    if (this.activeEditIndex === null) return;
+    const el = this.sliceElements.get(this.activeEditIndex);
+    const contentEl = el?.querySelector<HTMLElement>('.slice-content');
+    if (!contentEl) return;
+    const range = document.createRange();
+    range.selectNodeContents(contentEl);
+    range.collapse(at === 'start');
+    const sel = window.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+  }
+
   /**
    * Walk this.slices in order and assign startLine/endLine values consistent
    * with a '\n\n'-joined reassembly. Each slice occupies its own line range
diff --git a/src/renderer/components/InlineEditor.ts b/src/renderer/components/InlineEditor.ts
index 98a5bd5..0352c43 100644
--- a/src/renderer/components/InlineEditor.ts
+++ b/src/renderer/components/InlineEditor.ts
@@ -22,6 +22,14 @@ export interface InlineEditorCallbacks {
    * falls back to browser default behaviour.
    */
   onSplit?: (beforeMd: string, afterMd: string) => void;
+  /**
+   * Called when the user presses ArrowUp on the first visual line, or
+   * ArrowDown on the last visual line — i.e. would otherwise have nowhere
+   * to go inside this slice. The caller commits the current session and
+   * opens editing on the adjacent slice. If absent, falls back to browser
+   * default (caret stays put or scrolls).
+   */
+  onNavigate?: (direction: 'up' | 'down') => void;
 }
 
 /** The inline marks the editor can toggle. */
@@ -87,6 +95,14 @@ export class InlineEditor {
       this.insertLineBreak();
       return;
     }
+    if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && this.callbacks.onNavigate) {
+      const dir = e.key === 'ArrowUp' ? 'up' : 'down';
+      if (this.isCaretOnEdgeLine(dir)) {
+        e.preventDefault();
+        this.callbacks.onNavigate(dir);
+        return;
+      }
+    }
     const mod = e.metaKey || e.ctrlKey;
     if (!mod) return;
 
@@ -175,6 +191,35 @@ export class InlineEditor {
     this.callbacks.onSplit?.(beforeMd, afterMd);
   }
 
+  /**
+   * Is the caret on the first (for 'up') or last (for 'down') visual line of
+   * the editor? Used to decide whether ArrowUp/Down should stay inside the
+   * slice or cross the boundary to an adjacent slice.
+   *
+   * In jsdom all bounding rects are zero, so both checks return true — that's
+   * fine for unit tests that exercise the cross-slice path; the geometric
+   * branching matters only in a real layout engine.
+   */
+  private isCaretOnEdgeLine(dir: 'up' | 'down'): boolean {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return false;
+    const range = sel.getRangeAt(0);
+    if (!this.el.contains(range.commonAncestorContainer)) return false;
+
+    // Range.getBoundingClientRect is on the DOM spec but missing from older
+    // jsdom builds — fall back to a zero-rect (which makes both edge checks
+    // pass, the behaviour we want under jsdom-driven tests anyway).
+    const caretRect = typeof range.getBoundingClientRect === 'function'
+      ? range.getBoundingClientRect()
+      : { top: 0, bottom: 0 } as DOMRect;
+    const elRect = this.el.getBoundingClientRect();
+    const threshold = 4;
+
+    return dir === 'up'
+      ? caretRect.top - elRect.top < threshold
+      : elRect.bottom - caretRect.bottom < threshold;
+  }
+
   /** Insert a <br> at the caret (Shift+Enter — soft line break inside the slice). */
   private insertLineBreak(): void {
     const sel = window.getSelection();
diff --git a/tests/unit/renderer/components/EditModeController.test.ts b/tests/unit/renderer/components/EditModeController.test.ts
index c4163f0..e3aec2d 100644
--- a/tests/unit/renderer/components/EditModeController.test.ts
+++ b/tests/unit/renderer/components/EditModeController.test.ts
@@ -127,6 +127,65 @@ describe('EditModeController — floating toolbar wiring', () => {
     expect(toolbar === null || toolbar.hidden).toBe(true);
   });
 
+  it('ArrowUp at the top of a slice moves edit focus to the previous slice', async () => {
+    const { container, controller } = setup();
+    await controller.enter('First\n\nSecond');
+    const slices = container.querySelectorAll<HTMLElement>('.slice');
+    const secondContent = slices[1]!.querySelector<HTMLElement>('.slice-content')!;
+    secondContent.click();
+    const textNode = secondContent.firstChild!.firstChild!;
+    const range = document.createRange();
+    range.setStart(textNode, 0);
+    range.collapse(true);
+    const sel = window.getSelection()!;
+    sel.removeAllRanges();
+    sel.addRange(range);
+    secondContent.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'ArrowUp', bubbles: true, cancelable: true,
+    }));
+    const slicesAfter = container.querySelectorAll<HTMLElement>('.slice');
+    expect(slicesAfter[0]!.classList.contains('slice-editing')).toBe(true);
+    expect(slicesAfter[1]!.classList.contains('slice-editing')).toBe(false);
+  });
+
+  it('ArrowDown at the bottom of a slice moves edit focus to the next slice', async () => {
+    const { container, controller } = setup();
+    await controller.enter('First\n\nSecond');
+    const slices = container.querySelectorAll<HTMLElement>('.slice');
+    const firstContent = slices[0]!.querySelector<HTMLElement>('.slice-content')!;
+    firstContent.click();
+    const textNode = firstContent.firstChild!.firstChild!;
+    const range = document.createRange();
+    range.setStart(textNode, 5);
+    range.collapse(true);
+    const sel = window.getSelection()!;
+    sel.removeAllRanges();
+    sel.addRange(range);
+    firstContent.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'ArrowDown', bubbles: true, cancelable: true,
+    }));
+    const slicesAfter = container.querySelectorAll<HTMLElement>('.slice');
+    expect(slicesAfter[0]!.classList.contains('slice-editing')).toBe(false);
+    expect(slicesAfter[1]!.classList.contains('slice-editing')).toBe(true);
+  });
+
+  it('ArrowUp on the first slice is a no-op', async () => {
+    const { container, controller } = setup();
+    await controller.enter('Only');
+    const content = container.querySelector<HTMLElement>('.slice-content')!;
+    content.click();
+    const range = document.createRange();
+    range.setStart(content.firstChild!.firstChild!, 0);
+    range.collapse(true);
+    const sel = window.getSelection()!;
+    sel.removeAllRanges();
+    sel.addRange(range);
+    content.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'ArrowUp', bubbles: true, cancelable: true,
+    }));
+    expect(container.querySelector('.slice')!.classList.contains('slice-editing')).toBe(true);
+  });
+
   it('Enter at the start of a heading inserts an empty paragraph above and preserves the heading', async () => {
     const { container, controller } = setup();
     await controller.enter('# Title');
diff --git a/tests/unit/renderer/components/InlineEditor.test.ts b/tests/unit/renderer/components/InlineEditor.test.ts
index 7bad420..31cb3f1 100644
--- a/tests/unit/renderer/components/InlineEditor.test.ts
+++ b/tests/unit/renderer/components/InlineEditor.test.ts
@@ -179,6 +179,38 @@ function caretAt(node: Node, offset: number): void {
   sel.addRange(range);
 }
 
+describe('InlineEditor arrow navigation', () => {
+  it('ArrowUp fires onNavigate("up") when caret is on the first line', () => {
+    const el = contentEl('hello');
+    const onNavigate = vi.fn();
+    const editor = new InlineEditor(el, { onCommit: vi.fn(), onNavigate });
+    editor.start();
+    caretAt(el.firstChild!, 0);
+    keydown(el, 'ArrowUp');
+    expect(onNavigate).toHaveBeenCalledWith('up');
+  });
+
+  it('ArrowDown fires onNavigate("down") when caret is on the last line', () => {
+    const el = contentEl('hello');
+    const onNavigate = vi.fn();
+    const editor = new InlineEditor(el, { onCommit: vi.fn(), onNavigate });
+    editor.start();
+    caretAt(el.firstChild!, 5);
+    keydown(el, 'ArrowDown');
+    expect(onNavigate).toHaveBeenCalledWith('down');
+  });
+
+  it('does not preventDefault for arrows when onNavigate is absent', () => {
+    const el = contentEl('hello');
+    const editor = new InlineEditor(el, { onCommit: vi.fn() });
+    editor.start();
+    caretAt(el.firstChild!, 0);
+    const e = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true, cancelable: true });
+    el.dispatchEvent(e);
+    expect(e.defaultPrevented).toBe(false);
+  });
+});
+
 describe('InlineEditor Enter handling', () => {
   it('Enter calls onSplit with the markdown before and after the caret', () => {
     const el = contentEl('hello world');

From 48b8035c05c19d35968994b49175ed1b2f461bd8 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 15:43:37 +0300
Subject: [PATCH 21/30] style: edit mode preserves view-mode layout exactly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switching to edit mode was visibly shifting content horizontally and
changing the vertical rhythm between blocks. Three structural
differences caused this:

  1. .markdown-body.edit-mode added padding-left: 8px and .slice-content
     added padding: 2px 8px — net +8px horizontal indent of every line
     relative to view mode.
  2. .slice was display:flex, making .slice-content a flex item (BFC
     root). Margins inside it could not collapse with adjacent slices,
     so block-to-block spacing differed from view mode's collapsed
     margins.
  3. .slice-content > :first-child {margin-top: 0} + :last-child
     {margin-bottom: 0} stripped each slice's natural heading/paragraph
     margins, shortening the gap between blocks by ~20-40px per heading.

Fix: switch .slice to plain block layout so adjacent slices' margins
collapse like view mode, drop the slice-content padding and margin
resets, and float the handle absolutely in the negative-x gutter so it
no longer consumes flow space. Handle's vertical offset is tied to a
CSS variable (--slice-handle-top) overridden per slice type so it
still aligns with the first line of text inside headings (which sit
24px below the slice top due to their margin-top).

Net result: with no slice selected, view mode and edit mode are
visually identical except for the handle that fades in on hover.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.css | 51 +++++++++++++++++++++------------------------------
 1 file changed, 21 insertions(+), 30 deletions(-)

diff --git a/src/index.css b/src/index.css
index 1729f23..403247c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1702,15 +1702,14 @@ button:focus:not(:focus-visible) {
   position: relative;
 }
 
-/* Slice wrapper */
+/* Slice wrapper. Block layout (not flex) so the rendered content inside
+ * behaves identically to view mode — adjacent slices' margins collapse and
+ * each slice's vertical rhythm matches its un-wrapped counterpart. The handle
+ * is positioned absolutely in the left gutter so it doesn't consume flow. */
 .slice {
   position: relative;
-  display: flex;
-  align-items: stretch;
   border-radius: 4px;
   transition: background-color 0.15s ease;
-  margin-left: -40px;
-  padding-left: 0;
 }
 
 .slice:hover {
@@ -1721,21 +1720,28 @@ button:focus:not(:focus-visible) {
   opacity: 1;
 }
 
-/* Slice handle (left side, Notion-style grip) */
+/* Slice handle — floats in the negative-x gutter so it sits outside the
+ * content box. Vertical offset depends on the slice's block type because
+ * headings push their content down by margin-top; the per-type overrides
+ * below align the handle with the first line of text. */
 .slice-handle {
-  position: relative;
-  flex-shrink: 0;
+  position: absolute;
+  left: -32px;
+  top: var(--slice-handle-top, 4px);
   width: 32px;
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  padding-top: 4px;
   opacity: 0;
   transition: opacity 0.15s ease;
   user-select: none;
   -webkit-user-select: none;
 }
 
+.slice-h1, .slice-h2, .slice-h3, .slice-h4, .slice-h5, .slice-h6 {
+  --slice-handle-top: 28px; /* heading margin-top (24px) + 4px gutter */
+}
+
 .slice-handle-btn {
   display: flex;
   align-items: center;
@@ -1760,13 +1766,13 @@ button:focus:not(:focus-visible) {
   cursor: grabbing;
 }
 
-/* Slice content area */
+/* Slice content area. Zero-padding and no margin resets so the inner
+ * markdown layout is byte-identical to view mode — headings keep their
+ * top/bottom margins, paragraphs their bottom margin, lists their padding,
+ * etc. The slice wrapper adds no spacing of its own. */
 .slice-content {
-  flex: 1;
-  min-width: 0;
   cursor: text;
   border-radius: 4px;
-  padding: 2px 8px;
   transition: box-shadow 0.15s ease;
 }
 
@@ -1780,15 +1786,6 @@ button:focus:not(:focus-visible) {
   cursor: text;
 }
 
-/* Reset margins on rendered content inside slices */
-.slice-content > :first-child {
-  margin-top: 0;
-}
-
-.slice-content > :last-child {
-  margin-bottom: 0;
-}
-
 /* Slim raw-markdown editor (used by the "Edit as markdown" toggle) */
 .slice-raw-editor {
   width: 100%;
@@ -1972,11 +1969,5 @@ button:focus:not(:focus-visible) {
   font-weight: 500;
 }
 
-/* Smooth transition between view and edit modes */
-.markdown-body {
-  transition: padding-left 0.2s ease;
-}
-
-.markdown-body.edit-mode {
-  padding-left: 8px;
-}
+/* Edit mode adds no padding of its own — the slice wrappers don't shift the
+ * content's horizontal position relative to view mode. */

From 418588b4c3b31ad244e182339ba24aa257bbfb9b Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 16:02:15 +0300
Subject: [PATCH 22/30] style: align slice handle to first-line center for each
 block type

The handle button (24px tall) was offset 4px below the slice top
regardless of block type, leaving it visibly below the first text
line's center for paragraphs and inconsistently aligned across
heading levels (h6 was ~9px below center, h1 ~1.5px above).

Compute per-type --slice-handle-top so the button center matches
the first-line center: 0 for paragraphs/lists/blockquotes (body
line-height ~21px), and 19-30px for h6..h1 (each heading's
margin-top of 24px plus half the heading's line-height minus the
button's half-height). Values assume default font sizes; if those
change via preferences the alignment will drift but stay close.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.css | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/index.css b/src/index.css
index 403247c..6e92d43 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1727,7 +1727,7 @@ button:focus:not(:focus-visible) {
 .slice-handle {
   position: absolute;
   left: -32px;
-  top: var(--slice-handle-top, 4px);
+  top: var(--slice-handle-top, 0px);
   width: 32px;
   display: flex;
   align-items: flex-start;
@@ -1738,9 +1738,18 @@ button:focus:not(:focus-visible) {
   -webkit-user-select: none;
 }
 
-.slice-h1, .slice-h2, .slice-h3, .slice-h4, .slice-h5, .slice-h6 {
-  --slice-handle-top: 28px; /* heading margin-top (24px) + 4px gutter */
-}
+/* Per-block-type vertical offsets so the 24px handle button centers on the
+ * first text line. Default (0px) targets paragraphs, lists, blockquotes —
+ * their content sits at slice-top with body line-height (~21px); button
+ * center at y=12 ≈ text center at y=10.5. Heading values combine each
+ * heading's margin-top (24px) with the heading's line-height / 2 minus the
+ * button's half-height — i.e. 24 + (line-height-px − 24) / 2. */
+.slice-h1 { --slice-handle-top: 30px; } /* 2em * 1.25 = 35px line, center y=41.5 */
+.slice-h2 { --slice-handle-top: 25px; } /* 1.5em * 1.25 = 26.25, center y=37 */
+.slice-h3 { --slice-handle-top: 23px; } /* 1.25em * 1.25 = 21.9, center y=35 */
+.slice-h4 { --slice-handle-top: 21px; } /* 1em * 1.25 = 17.5, center y=32.75 */
+.slice-h5 { --slice-handle-top: 20px; } /* 0.875em * 1.25 = 15.3, center y=31.65 */
+.slice-h6 { --slice-handle-top: 19px; } /* 0.85em * 1.25 = 14.9, center y=31.45 */
 
 .slice-handle-btn {
   display: flex;

From 6f135b5b857ec68836b4c544da6f432f15861dc1 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 16:03:53 +0300
Subject: [PATCH 23/30] style: align slice handle for code blocks

<pre> has 16px top padding before the code text plus 85% font-size
with 1.45 line-height (~17px line), so the first code line centers at
y=24.5. Set --slice-handle-top: 13px so the 24px handle button
centers on that line instead of sitting near the top of the pre's
padding.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.css b/src/index.css
index 6e92d43..4267ad5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1750,6 +1750,7 @@ button:focus:not(:focus-visible) {
 .slice-h4 { --slice-handle-top: 21px; } /* 1em * 1.25 = 17.5, center y=32.75 */
 .slice-h5 { --slice-handle-top: 20px; } /* 0.875em * 1.25 = 15.3, center y=31.65 */
 .slice-h6 { --slice-handle-top: 19px; } /* 0.85em * 1.25 = 14.9, center y=31.45 */
+.slice-code { --slice-handle-top: 13px; } /* <pre> padding-top 16 + 85% * 1.45 ≈ 17, center y=24.5 */
 
 .slice-handle-btn {
   display: flex;

From 49f7edc164a06bdaacbc6185e7b1a49d6dd5a40b Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 17:01:38 +0300
Subject: [PATCH 24/30] style: move slice-editing bar to gutter so it does not
 hide the caret
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The inset box-shadow drew a 2px blue indicator inside the content
box's left edge, where it overlapped the caret whenever the cursor
landed at the start of a line. Replace it with an absolutely
positioned ::before pseudo-element 8px to the left of the content —
the bar lives in the slice handle's gutter, the caret has clearance,
and the layout is unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.css | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index 4267ad5..4f8981b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1788,7 +1788,21 @@ button:focus:not(:focus-visible) {
 
 .slice.slice-editing .slice-content {
   background-color: var(--bg-color);
-  box-shadow: inset 2px 0 0 var(--link-color);
+}
+
+/* Editing affordance: a 2px bar in the gutter, 6px away from the text. Drawn
+ * via a pseudo-element instead of inset box-shadow so it sits outside the
+ * content box and never overlaps the caret when it lands at the line start. */
+.slice.slice-editing .slice-content::before {
+  content: '';
+  position: absolute;
+  left: -8px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--link-color);
+  border-radius: 1px;
+  pointer-events: none;
 }
 
 .slice-content[contenteditable='true'] {

From 5845a0398b7535018e4092e5b5561534ccd9bcc9 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 17:04:58 +0300
Subject: [PATCH 25/30] style: round slice-editing bar ends, nudge paragraph
 handle up 2px

- border-radius on the editing indicator is now 2px, matching the bar
  width so its top/bottom render as semicircles instead of square ends.
- Default --slice-handle-top is -2px (was 0) so the 24px handle button
  centers on a paragraph's 21px first line (button center y=10, text
  center y=10.5). Heading offsets already accounted for line-heights
  per type; only the default needed tuning.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/index.css b/src/index.css
index 4f8981b..e0de3ea 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1727,7 +1727,7 @@ button:focus:not(:focus-visible) {
 .slice-handle {
   position: absolute;
   left: -32px;
-  top: var(--slice-handle-top, 0px);
+  top: var(--slice-handle-top, -2px);
   width: 32px;
   display: flex;
   align-items: flex-start;
@@ -1801,7 +1801,7 @@ button:focus:not(:focus-visible) {
   bottom: 0;
   width: 2px;
   background-color: var(--link-color);
-  border-radius: 1px;
+  border-radius: 2px;
   pointer-events: none;
 }
 

From 3fc54b4c8ec6cf5a854b2f2223ea5921b8166dff Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 17:07:02 +0300
Subject: [PATCH 26/30] style: widen editing bar to 3px so the rounded ends
 actually show
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A 2px-wide bar with border-radius:2px renders 1px-effective curves
per corner (two corners on the same 2px edge can only sum to 2px),
which is below the visibility threshold at typical zoom. Widen to
3px so border-radius:3px gives 1.5px curves at the ends — visibly
pill-shaped. Bumped left from -8 to -9 so the gap from text stays
at 6px.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/index.css b/src/index.css
index e0de3ea..3101943 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1796,12 +1796,12 @@ button:focus:not(:focus-visible) {
 .slice.slice-editing .slice-content::before {
   content: '';
   position: absolute;
-  left: -8px;
+  left: -9px;
   top: 0;
   bottom: 0;
-  width: 2px;
+  width: 3px;
   background-color: var(--link-color);
-  border-radius: 2px;
+  border-radius: 3px;
   pointer-events: none;
 }
 

From d661491ec83795b4b25e604c7bf3b7326d003962 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 17:09:37 +0300
Subject: [PATCH 27/30] style: revert editing bar to 2px, isolate caps with
 top/bottom inset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 3px width was thicker than wanted. Geometric limit: a 2px-wide
bar can only have 1px-radius corners (border-radius is clamped by
half the smaller edge), so the rounded caps will always be small.
Compensate by leaving 3px of space above and below the bar — the
caps stand visually distinct from the slice edges instead of sitting
flush, which makes the rounding readable even at small radius.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.css | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/index.css b/src/index.css
index 3101943..9d04a4b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1796,12 +1796,16 @@ button:focus:not(:focus-visible) {
 .slice.slice-editing .slice-content::before {
   content: '';
   position: absolute;
-  left: -9px;
-  top: 0;
-  bottom: 0;
-  width: 3px;
+  left: -8px;
+  top: 3px;
+  bottom: 3px;
+  width: 2px;
   background-color: var(--link-color);
-  border-radius: 3px;
+  /* border-radius is clamped to half the shorter dimension (1px on a 2px
+   * bar), so use a large value to opt into the maximum. Combined with the
+   * 3px top/bottom inset, the rounded caps are visible because they don't
+   * meet the slice edges flush. */
+  border-radius: 999px;
   pointer-events: none;
 }
 

From 907ff3aa0cf7b7509c56d63d5a0d92c75d41cf41 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 17:16:36 +0300
Subject: [PATCH 28/30] style: editing bar uses SVG-masked barbell shape (thin
 shaft + round caps)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous border-radius approach was geometrically capped at 1px
curves on a 2px-wide bar — too small to read as "rounded". Replace
with a barbell shape built from three composited mask layers: an SVG
upper-semicircle at the top, a matching lower-semicircle at the
bottom, and a 2px-wide vertical stripe between them. background-color
paints the whole element in --link-color; the masks carve out the
visible shape.

Net visual: a 2px-wide shaft with 5px-diameter round caps at top and
bottom. Caps stay round at any slice height (masks are fixed pixel
sizes, not stretched).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.css | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/index.css b/src/index.css
index 9d04a4b..335cd9d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1793,19 +1793,28 @@ button:focus:not(:focus-visible) {
 /* Editing affordance: a 2px bar in the gutter, 6px away from the text. Drawn
  * via a pseudo-element instead of inset box-shadow so it sits outside the
  * content box and never overlaps the caret when it lands at the line start. */
+/* Editing indicator: a thin (2px) shaft with wider round caps. The caps are
+ * 5px-diameter half-circles drawn via SVG masks so they stay round at any
+ * slice height; the shaft is a centered 2px stripe between them. background-
+ * color paints the whole element in --link-color and the mask layers carve
+ * out the visible shape (top half-circle + middle stripe + bottom half-circle).
+ * Result: a clearly-curved "pill with neck" at the slice's left gutter. */
 .slice.slice-editing .slice-content::before {
   content: '';
   position: absolute;
-  left: -8px;
-  top: 3px;
-  bottom: 3px;
-  width: 2px;
+  left: -10px;
+  top: 0;
+  bottom: 0;
+  width: 5px;
   background-color: var(--link-color);
-  /* border-radius is clamped to half the shorter dimension (1px on a 2px
-   * bar), so use a large value to opt into the maximum. Combined with the
-   * 3px top/bottom inset, the rounded caps are visible because they don't
-   * meet the slice edges flush. */
-  border-radius: 999px;
+  -webkit-mask:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2.5'><path d='M0 2.5 A2.5 2.5 0 0 1 5 2.5 Z' fill='black'/></svg>") top center / 5px 2.5px no-repeat,
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2.5'><path d='M0 0 A2.5 2.5 0 0 0 5 0 Z' fill='black'/></svg>") bottom center / 5px 2.5px no-repeat,
+    linear-gradient(to right, transparent 1.5px, black 1.5px, black 3.5px, transparent 3.5px) center / 5px calc(100% - 5px) no-repeat;
+  mask:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2.5'><path d='M0 2.5 A2.5 2.5 0 0 1 5 2.5 Z' fill='black'/></svg>") top center / 5px 2.5px no-repeat,
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2.5'><path d='M0 0 A2.5 2.5 0 0 0 5 0 Z' fill='black'/></svg>") bottom center / 5px 2.5px no-repeat,
+    linear-gradient(to right, transparent 1.5px, black 1.5px, black 3.5px, transparent 3.5px) center / 5px calc(100% - 5px) no-repeat;
   pointer-events: none;
 }
 

From 2723739e9a90a499239082d21caa8f39bf803435 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 17:21:43 +0300
Subject: [PATCH 29/30] style: simplify editing bar to a straight 2px stripe

Drop the curve attempts (border-radius variations, SVG-mask barbell)
and keep the indicator as a plain 2px-wide bar in the gutter, 6px
from the text. Functional behaviour (cursor not concealed, layout
unchanged) is preserved.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.css | 19 +++----------------
 1 file changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/index.css b/src/index.css
index 335cd9d..7edf5f8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1793,28 +1793,15 @@ button:focus:not(:focus-visible) {
 /* Editing affordance: a 2px bar in the gutter, 6px away from the text. Drawn
  * via a pseudo-element instead of inset box-shadow so it sits outside the
  * content box and never overlaps the caret when it lands at the line start. */
-/* Editing indicator: a thin (2px) shaft with wider round caps. The caps are
- * 5px-diameter half-circles drawn via SVG masks so they stay round at any
- * slice height; the shaft is a centered 2px stripe between them. background-
- * color paints the whole element in --link-color and the mask layers carve
- * out the visible shape (top half-circle + middle stripe + bottom half-circle).
- * Result: a clearly-curved "pill with neck" at the slice's left gutter. */
+/* Editing indicator: a straight 2px bar in the gutter, 6px from the text. */
 .slice.slice-editing .slice-content::before {
   content: '';
   position: absolute;
-  left: -10px;
+  left: -8px;
   top: 0;
   bottom: 0;
-  width: 5px;
+  width: 2px;
   background-color: var(--link-color);
-  -webkit-mask:
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2.5'><path d='M0 2.5 A2.5 2.5 0 0 1 5 2.5 Z' fill='black'/></svg>") top center / 5px 2.5px no-repeat,
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2.5'><path d='M0 0 A2.5 2.5 0 0 0 5 0 Z' fill='black'/></svg>") bottom center / 5px 2.5px no-repeat,
-    linear-gradient(to right, transparent 1.5px, black 1.5px, black 3.5px, transparent 3.5px) center / 5px calc(100% - 5px) no-repeat;
-  mask:
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2.5'><path d='M0 2.5 A2.5 2.5 0 0 1 5 2.5 Z' fill='black'/></svg>") top center / 5px 2.5px no-repeat,
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2.5'><path d='M0 0 A2.5 2.5 0 0 0 5 0 Z' fill='black'/></svg>") bottom center / 5px 2.5px no-repeat,
-    linear-gradient(to right, transparent 1.5px, black 1.5px, black 3.5px, transparent 3.5px) center / 5px calc(100% - 5px) no-repeat;
   pointer-events: none;
 }
 

From cb4f59e67f279bbc453a7c2e9e8491ff67909ff6 Mon Sep 17 00:00:00 2001
From: Paris Theofanidis <ptheofan@gmail.com>
Date: Sat, 16 May 2026 17:32:40 +0300
Subject: [PATCH 30/30] chore: release 1.4.0

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md | 15 +++++++++++++++
 package.json |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0895a04..3c580f6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.4.0] - 2026-05-16
+
+### Added
+
+- **Inline WYSIWYG edit mode**: clicking a slice now opens a slim inline editor (no more chunky textarea). Bold / italic / strikethrough / inline code / link are toggled directly via shortcuts or a floating toolbar.
+- **Notion-style block flow**: `Enter` splits the current slice into two paragraphs (the new one gets focus); `Shift+Enter` inserts a soft line break inside the slice.
+- **Cross-slice arrow navigation**: `ArrowUp` at the top of a slice moves to the previous slice; `ArrowDown` at the bottom moves to the next.
+- **Raw-markdown escape hatch**: `Cmd+/` or the handle menu's "Edit as markdown" item toggles a slice to a slim raw-markdown editor. Slices containing unsupported inline content (e.g. inline `<img>`, `<sup>`) automatically open in raw mode.
+- **Floating format toolbar**: `Cmd+Shift+F` reveals a small toolbar above the active slice with buttons for the five inline marks.
+
+### Changed
+
+- Edit-mode layout now matches view-mode exactly — no horizontal shift, identical vertical rhythm between blocks.
+- Slice handle is positioned per block type so it aligns with the first line of text instead of the slice's top edge.
+
 ## [1.3.3] - 2026-05-14
 
 ### Added
diff --git a/package.json b/package.json
index d79ed65..fbbc4b6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "markdown-viewer",
   "productName": "Open Markdown",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "A macOS desktop markdown viewer with GitHub-style rendering and plugin support",
   "main": ".vite/build/index.js",
   "private": true,