fix(editor): toggle blocks not functioning as actual toggles (#206)

[zacharias-ona]

Closes #206

What

Toggle blocks (collapsible sections) inserted via the / menu were broken in three ways: clicking the summary to edit the title text toggled the section open/closed, select-none on the summary prevented cursor placement and text selection, and there was no visual indicator (chevron/arrow) showing the block was collapsible or its current state.

How

• Added a dedicated chevron <button> (with contentEditable="false") inside the <summary> as the visual toggle affordance. The chevron rotates 90° when open via CSS (details[open] > summary > .collapsible-toggle).
• Prevented the native <details> toggle on summary clicks so Lexical can handle text editing normally. Only the chevron button triggers expand/collapse.
• Removed select-none and cursor-pointer from the summary, replaced with flex layout for chevron + text alignment.
• Used instanceof Node guard on e.target instead of as HTMLElement cast to satisfy the node-contains-safety convention.

Testing

• Added 8 static analysis regression tests in collapsible-toggle.test.ts verifying:
  • Summary does not use select-none
  • Chevron button exists with proper aria-label and contentEditable="false"
  • Summary uses flex layout
  • Plugin prevents native summary click toggle
  • Plugin toggles via chevron only
  • DOM open state is synced after chevron toggle
  • CSS rotation rule exists for open state
• All 230 tests pass (pnpm lint && pnpm typecheck && pnpm test)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
memo	Ready	Preview, Comment	Apr 17, 2026 11:04pm

[zacharias-ona]

✅ UI verification passed — design spec compliance confirmed.

Static analysis (code review against .agents/design.md):

Check	Result
Color tokens	✅ All colors use CSS variables or white/ opacity scale
Typography	✅ text-sm font-medium matches UI labels spec
Spacing	✅ p-3, gap-1.5, mt-3, w-5 h-5 — all Tailwind scale
Corners	✅ rounded-sm on <details> and chevron (editor block exception)
Transitions	✅ duration-150 matches spec for interactive elements
Accessibility	✅ aria-label="Toggle section" on icon button
Dark mode	✅ Token variables only, no hardcoded light colors
Borders	✅ border-white/[0.06] matches invisible border pattern
Custom CSS	✅ details[open] rotation rule justified — Tailwind cannot target this selector

Visual verification (Playwright screenshots — desktop dark + mobile):

• Editor page layout renders correctly on both viewports
• No broken layouts, overlapping elements, or horizontal scroll
• Mobile: sidebar collapsed, hamburger visible, proper padding

Note: The collapsible toggle block itself was not present on the test page, so the chevron rendering could not be visually verified. Static analysis confirms the implementation matches spec conventions.

[zacharias-ona]

✅ Post-merge verification passed.

E2E suite: 49/54 passed, 2 known flaky failures, 3 skipped (serial dependents).

The 2 failures are pre-existing and unrelated to this PR:

• members.spec.ts:139 — "owner can re-invite and invited user can accept" (strict mode violation, tracked in bug: E2E flake — "owner can re-invite and invited user can accept" strict mode violation #215)
• search.spec.ts:188 — "search with no matches shows empty state" (intermittent, tracked since bug: flaky E2E tests — member invite revocation and search results #118)

Ad-hoc smoke tests: All passed.

Route	Result
/ (landing page)	✅ Loaded, title present
/sign-in	✅ Email input rendered
/api/health	✅ Healthy
/dashboard	Skipped (not yet built)
Authenticated login flow	✅ Sign-in → workspace redirect
Workspace page load	✅ Fully loaded
Editor navigation	Skipped (no page buttons with timestamps found in workspace)
Console errors (unauth)	✅ None
Console errors (auth)	✅ None