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/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/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`.
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.
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,
diff --git a/src/index.css b/src/index.css
index 1200c33..7edf5f8 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,38 @@ 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, -2px);
   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;
 }
 
+/* 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-code { --slice-handle-top: 13px; } /* <pre> padding-top 16 + 85% * 1.45 ≈ 17, center y=24.5 */
+
 .slice-handle-btn {
   display: flex;
   align-items: center;
@@ -1760,37 +1776,47 @@ 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;
 }
 
 .slice.slice-editing .slice-content {
-  box-shadow: 0 0 0 2px var(--link-color);
   background-color: var(--bg-color);
 }
 
-/* Reset margins on rendered content inside slices */
-.slice-content > :first-child {
-  margin-top: 0;
+/* 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 straight 2px bar in the gutter, 6px from the text. */
+.slice.slice-editing .slice-content::before {
+  content: '';
+  position: absolute;
+  left: -8px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--link-color);
+  pointer-events: none;
 }
 
-.slice-content > :last-child {
-  margin-bottom: 0;
+.slice-content[contenteditable='true'] {
+  outline: none;
+  cursor: text;
 }
 
-/* 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 +1827,7 @@ button:focus:not(:focus-visible) {
   overflow: hidden;
 }
 
-.slice-editor:focus {
+.slice-raw-editor:focus {
   outline: none;
 }
 
@@ -1920,6 +1946,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;
@@ -1929,11 +1993,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. */
diff --git a/src/renderer/components/EditModeController.ts b/src/renderer/components/EditModeController.ts
index f3633ac..be41f18 100644
--- a/src/renderer/components/EditModeController.ts
+++ b/src/renderer/components/EditModeController.ts
@@ -7,6 +7,10 @@
  */
 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';
 
 /**
  * Callbacks for EditModeController events
@@ -21,7 +25,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
@@ -39,6 +45,10 @@ export class EditModeController {
   private rawMarkdown = '';
   private callbacks: EditModeCallbacks = {};
   private activeEditIndex: number | null = null;
+  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();
 
@@ -63,6 +73,7 @@ export class EditModeController {
     this.slices = this.slicer.slice(markdown);
     await this.renderSlices();
     document.addEventListener('click', this.handleDocumentClick);
+    document.addEventListener('keydown', this.onGlobalKeyDown);
   }
 
   /**
@@ -72,6 +83,10 @@ export class EditModeController {
     this.commitActiveEdit();
     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;
     return this.rawMarkdown;
@@ -85,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();
 
@@ -97,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);
   }
 
@@ -153,37 +175,110 @@ 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;
 
+    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);
+      },
+      onRequestLink: () => {
+        if (this.activeInlineEditor) this.promptAndApplyLink(this.activeInlineEditor);
+      },
+      onSplit: (beforeMd, afterMd) => {
+        this.splitActiveSlice(sliceIndex, beforeMd, afterMd);
+      },
+      onNavigate: (direction) => {
+        this.navigateFromSlice(sliceIndex, direction);
+      },
+    });
+    this.activeInlineEditor.start();
+    if (this.toolbarVisible) {
+      this.getToolbar().show(contentEl);
+      this.refreshToolbarState();
+    }
+  }
+
+  /**
+   * 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);
+    }
+  }
+
+  /**
+   * 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;
 
-    // Replace rendered HTML with textarea
+    this.activeEditIndex = sliceIndex;
+    el.classList.add('slice-editing');
+
     const textarea = document.createElement('textarea');
-    textarea.className = 'slice-editor';
+    textarea.className = 'slice-raw-editor';
     textarea.value = slice.raw;
     textarea.spellcheck = false;
 
-    // Auto-resize
     const resize = (): void => {
       textarea.style.height = 'auto';
-      textarea.style.height = textarea.scrollHeight + 'px';
+      textarea.style.height = `${textarea.scrollHeight}px`;
     };
-
     textarea.addEventListener('input', resize);
-
-    // Handle keyboard shortcuts
     textarea.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
         e.preventDefault();
@@ -191,63 +286,285 @@ export class EditModeController {
       }
     });
 
-    contentEl.innerHTML = '';
-    contentEl.appendChild(textarea);
-
-    // Focus and resize
+    contentEl.replaceChildren(textarea);
+    this.activeRawTextarea = textarea;
     textarea.focus();
     resize();
   }
 
   /**
-   * Commit the active edit and re-render the slice
+   * Commit a raw-textarea edit: the textarea value is the slice's markdown
+   * verbatim — no block-prefix reconciliation needed.
    */
-  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 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 (!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);
-
-    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);
     }
   }
 
+  /**
+   * 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);
+    }
+  }
+
+  /**
+   * 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');
+
+    // 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);
+
+    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);
+
+    // 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.renderSlicesSync();
+    this.startEdit(newSlice.index);
+    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
+   * 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.
+   */
+  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;
+    this.toolbar?.hide();
+    editor?.commit();
+  }
+
+  /** Test-only: deterministically commit the active edit. */
+  commitActiveEditForTest(): void {
+    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. 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);
+  }
+
   /**
    * Toggle the options menu for a slice handle
    */
@@ -329,6 +646,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"/>
@@ -508,6 +838,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/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/src/renderer/components/InlineEditor.ts b/src/renderer/components/InlineEditor.ts
new file mode 100644
index 0000000..0352c43
--- /dev/null
+++ b/src/renderer/components/InlineEditor.ts
@@ -0,0 +1,319 @@
+/**
+ * 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;
+  /** 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;
+  /**
+   * 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. */
+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;
+  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.addEventListener('keydown', this.onKeyDown);
+    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;
+    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;
+    }
+    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;
+    }
+    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;
+
+    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();
+    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.
+  /**
+   * 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);
+  }
+
+  /**
+   * 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();
+    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;
+    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);
+  }
+
+  /**
+   * 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);
+    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/src/renderer/services/inlineMarkdownSerializer.ts b/src/renderer/services/inlineMarkdownSerializer.ts
new file mode 100644
index 0000000..0924d92
--- /dev/null
+++ b/src/renderer/services/inlineMarkdownSerializer.ts
@@ -0,0 +1,94 @@
+/**
+ * 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;
+}
+
+/** 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':
+      return `\`${el.textContent ?? ''}\``;
+    case 'A': {
+      const href = el.getAttribute('href') ?? '';
+      return `[${inner}](${href})`;
+    }
+    case 'BR':
+      // 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;
+  }
+}
+
+/** 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',
+]);
+
+/**
+ * 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/components/EditModeController.test.ts b/tests/unit/renderer/components/EditModeController.test.ts
new file mode 100644
index 0000000..e3aec2d
--- /dev/null
+++ b/tests/unit/renderer/components/EditModeController.test.ts
@@ -0,0 +1,285 @@
+/**
+ * @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');
+  });
+});
+
+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');
+  });
+});
+
+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);
+  });
+});
+
+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<HTMLElement>('.inline-format-toolbar');
+    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');
+    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');
+    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();
+    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');
+    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);
+  });
+});
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);
+  });
+});
diff --git a/tests/unit/renderer/components/InlineEditor.test.ts b/tests/unit/renderer/components/InlineEditor.test.ts
new file mode 100644
index 0000000..31cb3f1
--- /dev/null
+++ b/tests/unit/renderer/components/InlineEditor.test.ts
@@ -0,0 +1,256 @@
+/**
+ * @vitest-environment jsdom
+ */
+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');
+  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);
+  });
+});
+
+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);
+  });
+});
+
+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);
+  });
+});
+
+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);
+  });
+});
+
+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 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');
+    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
new file mode 100644
index 0000000..494d604
--- /dev/null
+++ b/tests/unit/renderer/services/inlineMarkdownSerializer.test.ts
@@ -0,0 +1,87 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect } from 'vitest';
+import { serializeInline, canSerialize } 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');
+  });
+});
+
+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 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', () => {
+    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');
+  });
+});
+
+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);
+  });
+});