Skip to content

feat: toggle syntax, UI fixes, demos, screenshots & CI#22

Merged
nsheaps merged 23 commits intomainfrom
claude/add-toggle-syntax-d7zPi
Mar 8, 2026
Merged

feat: toggle syntax, UI fixes, demos, screenshots & CI#22
nsheaps merged 23 commits intomainfrom
claude/add-toggle-syntax-d7zPi

Conversation

@nsheaps
Copy link
Copy Markdown
Owner

@nsheaps nsheaps commented Mar 6, 2026

Summary

Comprehensive set of fixes and improvements to toggles, editor UI, demo content, documentation, spaces, and CI:

Space Persistence (Bug Fix)

  • Creating a new space no longer destroys the demo space — Current space state is saved to per-space workspace files before switching
  • Per-space storage — Each space gets its own workspace-state.json and pages/ directory under .cept/spaces/{id}/
  • Space switching loads saved state — Switching back to a space restores its pages, favorites, recent pages, and selected page
  • Spaces manifest in settings — All spaces from the manifest are shown (not just a hardcoded "default")
  • Demo space registered in manifest — On first init, the demo space name is written to the manifest

Toggle Fixes

  • > creates a toggle, not a blockquote — Input rule with priority 110 (higher than blockquote's 100)
  • Toggles are now clickable — ProseMirror plugin handles click events on summary elements
  • Markdown serialization — Toggles serialize to > summary / indented content via addStorage() markdown config
  • Nested toggle support — Both in parser preprocessing and editor rendering

Editor UI Fixes

  • Cursor underline removed — Added text-decoration-line: none and disabled browser writing suggestions
  • Links now look like links — Proper underline, color, thickness, and hover transitions
  • 6-dot drag handle — Replaced vertical dots character with a 2×3 radial-gradient dot grid

Demo Content

  • Working toggle demos — Features page includes nested toggles, heading toggles, list-in-toggle examples
  • Working callout demos — Using HTML <div data-type="callout"> syntax
  • All block types demoed — Tables, code blocks, task lists, blockquotes, text formatting
  • Reset button recreates demohandleClearAllData resets spaces manifest, recreates demo space

Documentation with Screenshots

  • Screenshots embedded in docs — Features and Introduction pages include screenshots of the editor, toggles, code blocks, blockquotes, slash menu, inline toolbar, command palette, and drag handle
  • {{base}} placeholder system — Asset URLs in docs content use {{base}} placeholders resolved at read time via resolveDocsContent() using document.baseURI
  • Screenshots served via Vitepackages/web/public/screenshots symlinks to docs/screenshots so Vite includes them in builds
  • Toggle Syntax guide — Full reference with editor shortcuts, standalone/nested examples
  • Markdown Extensions guide — Standard markdown vs Cept extensions reference

Screenshots & CI

  • Playwright screenshot tests — 15 features covered: landing page, editor, sidebar, toggles, callouts, code blocks, tables, task lists, blockquotes, text formatting, drag handle, slash menu, inline toolbar, command palette, settings
  • Screenshot CI workflow — Captures and auto-commits screenshots on push/PR
  • Cascade prevention — Skip-check stops infinite screenshot-commit loops
  • Detached HEAD and non-fast-forward fixes — Workflow creates a local branch and rebases before pushing

Test Plan

  • All unit tests pass (1592/1592)
  • Toggle, parser, and space manager tests pass
  • Typecheck passes across all packages
  • Playwright screenshot tests pass
  • CI: Build, Lint, Typecheck, Unit, Integration, E2E, Screenshots, Deploy all green
  • Screenshot cascade prevention verified (skip-check works)

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj

…ed content

Replace HTML comment syntax (`<!-- cept:block -->`) for toggles with a cleaner
Markdown-native syntax:

  > Toggle summary
    Indented content inside the toggle

The preprocessor distinguishes toggles from blockquotes by checking whether
the continuation lines are indented (toggle) or prefixed with `>` (blockquote).
Two consecutive blank lines end a toggle.

Includes:
- Preprocessor that converts toggle syntax to cept:block comments before remark
- Enhanced list item conversion for nested toggle support
- Updated serializer to output the new syntax
- 14 new test cases covering all documented scenarios
- Documentation page with syntax reference and all test cases

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
@nsheaps nsheaps self-assigned this Mar 6, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 6, 2026

Preview Deployment

The web app for this PR has been deployed:

Open Preview

Use this to verify the app works correctly, especially for dependency updates.

github-actions bot added a commit that referenced this pull request Mar 6, 2026
The changelog output from release-it can contain backticks, which break
the JavaScript template literal interpolation in the GitHub Actions script.
Pass all step outputs through environment variables instead.

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 6, 2026

Release Version Check

🟡 MINOR version bump

Version
Current 0.1.0
Next 0.2.0

This version will be released automatically when this PR is merged to main.

Changelog preview

0.2.0 (2026-03-07)

Features

  • add toggle syntax using blockquote-like > prefix with indented content (14aa841)
  • comprehensive demo content with working toggles, callouts, links (5d507b4)
  • comprehensive screenshot tests and CI workflow (0936789)
  • docs improvements, GitHub icon, icons/toggle/extensions pages (af37570)

Bug Fixes

  • ci: handle non-fast-forward push in screenshot workflow (759746c)
  • ci: prevent screenshot workflow cascade (452cdc3)
  • ci: push from detached HEAD in screenshot workflow (4cd616b)
  • cursor underline, link styling, 6-dot drag handle (a7e6939)
  • make > always create a toggle, support nested toggles (b91b663)
  • make screenshot tests resilient to missing sidebar pages (d7f6654)
  • make toggles clickable and serialize to markdown properly (bd8b9b7)
  • pass changelog via env var to avoid template literal breakage in CI (87468e8)
  • persist spaces properly so creating a new space preserves demo (7917e8a)
  • retry element screenshots on DOM detachment (827e021)
  • screenshot tests use .first() and waitFor to avoid strict/detach errors (9df3776)
  • screenshot workflow on drafts, add markdown-extensions doc, fix paths (128e56d)
  • screenshot workflow working directory for playwright (699b42e)

Documentation

  • screenshots: update feature screenshots (3d102c6)
  • screenshots: update feature screenshots (dea43d2)
  • screenshots: update feature screenshots (0a803db)
  • screenshots: update feature screenshots (3b2a06f)
  • screenshots: update feature screenshots [skip ci] (41227a1)

CI/CD

  • use automation bot for screenshot commits, run CI on them (64d5323)

github-actions bot added a commit that referenced this pull request Mar 6, 2026
- `> text` is now always a toggle (even without indented continuation)
- Only `> text` followed immediately by another `> ` line is a blockquote
- Toggle content is preprocessed recursively, enabling toggle-in-toggle
- Added `> ` input rule to Toggle extension (priority 110, above blockquote)
  so typing `> ` in the editor creates a toggle like Notion
- Added toggle demo section to features page with nested toggle examples
- Updated docs and test cases for new behavior

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
github-actions bot added a commit that referenced this pull request Mar 6, 2026
- Add ProseMirror plugin to handle click events on toggle summaries,
  toggling the open/close state via transaction (native <details>
  click behavior is suppressed in contenteditable)
- Add markdown serialization via tiptap-markdown storage, outputting
  `> summary` + 2-space-indented content instead of raw HTML
- Add toggleToggleOpen command for programmatic toggle control

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
@nsheaps nsheaps changed the title feat: add toggle syntax with blockquote-like prefix feat: toggle syntax, interaction fixes, and comprehensive feature demos Mar 6, 2026
github-actions bot added a commit that referenced this pull request Mar 6, 2026
- Prevent spurious text underlines from browser writing suggestions
  by setting text-decoration-line: none on text elements and disabling
  writingsuggestions/autocorrect attributes
- Enhance link styling with visible underline color, thickness, and
  hover transition so links clearly stand out from text
- Replace braille dots drag handle (\2807) with a proper 2x3 dot grid
  using radial-gradient for a Notion-like grip handle appearance

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
github-actions bot added a commit that referenced this pull request Mar 6, 2026
- Rewrite demo features page with actual working examples of ALL
  implemented features: toggles (with nesting), callouts, links,
  code blocks, tables, task lists, blockquotes, math, formatting
- Use proper HTML syntax for callouts and toggles in demo content
  (required because tiptap-markdown loads content, not CeptMarkdownParser)
- Add link demo to welcome page
- Add keyboard shortcuts table to getting started page
- Add space management section with toggle examples
- Fix reset all data to also recreate demo space (not leave empty)

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
github-actions bot added a commit that referenced this pull request Mar 6, 2026
- Replace "View source" text link with GitHub logo icon in docs banner
- Add Toggle Syntax docs page with comprehensive examples
- Add Markdown Extensions docs page explaining standard vs Cept syntax
- Add Icons Reference docs page for all custom icons in the app
- Add source paths for new docs pages
- Update guides and reference index pages

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
github-actions bot added a commit that referenced this pull request Mar 6, 2026
- Add feature-screenshots.spec.ts with tests for every feature:
  landing page, editor, sidebar, toggles, callouts, code blocks,
  tables, task lists, blockquotes, text formatting, drag handle,
  slash command menu, inline toolbar, command palette, settings,
  docs space, and getting started page
- Add update-screenshots.yml CI workflow that captures screenshots
  and commits them back to the branch (following nsheaps/private-pages
  pattern)
- Screenshots saved to docs/screenshots/features/ for documentation

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
@nsheaps nsheaps changed the title feat: toggle syntax, interaction fixes, and comprehensive feature demos feat: toggle fixes, UI improvements, comprehensive demos and screenshots Mar 6, 2026
github-actions bot added a commit that referenced this pull request Mar 6, 2026
…paths

- Allow screenshot CI workflow to run on draft PRs
- Add docs/content/guides/markdown-extensions.md source file
- Fix docs-icons source path to match existing icon-reference.md

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
github-actions bot added a commit that referenced this pull request Mar 6, 2026
github-actions bot added a commit that referenced this pull request Mar 6, 2026
@nsheaps nsheaps changed the title feat: toggle fixes, UI improvements, comprehensive demos and screenshots feat: toggle syntax, UI fixes, demos, screenshots & CI Mar 6, 2026
Use navigateToPage helper with timeout-based detection instead of
getByText which can fail in CI when demo pages aren't loaded yet.
Tests now skip gracefully instead of failing.

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
github-actions bot added a commit that referenced this pull request Mar 7, 2026
… errors

- screenshot-utils: use .first() for selectors matching multiple elements
- screenshot-utils: waitFor attached state before taking element screenshots
- callout test: add try/catch for DOM detachment during re-renders

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
github-actions bot added a commit that referenced this pull request Mar 7, 2026
github-actions bot added a commit that referenced this pull request Mar 7, 2026
@nsheaps nsheaps marked this pull request as ready for review March 7, 2026 21:35
Screenshot commits now use the GitHub App automation bot instead of
github-actions[bot], and CI is no longer skipped for these commits.

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
@nsheaps nsheaps force-pushed the claude/add-toggle-syntax-d7zPi branch from d89a324 to 64d5323 Compare March 7, 2026 22:05
github-actions bot added a commit that referenced this pull request Mar 7, 2026
actions/checkout with a ref creates a detached HEAD, so
`git push origin <branch>` fails because no local branch exists.
Use `HEAD:refs/heads/<branch>` refspec to push correctly.

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
github-actions bot added a commit that referenced this pull request Mar 7, 2026
Create a local branch from detached HEAD and pull --rebase before
pushing to handle cases where the branch advanced after checkout.

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
github-actions bot added a commit that referenced this pull request Mar 7, 2026
- Add per-space save/load functions in StorageContext (saveSpaceState,
  loadSpaceState, readSpacePageContent, writeSpacePageContent, etc.)
- Save current space state before switching or creating a new space
- Load space state from per-space workspace files on switch
- Show all spaces from manifest in settings (not just hardcoded default)
- Register demo space in manifest on first init
- Use space-aware page content helpers throughout App.tsx

Also embed screenshots in documentation pages:
- Add {{base}} placeholder system for asset URLs in docs content
- resolveDocsContent() resolves placeholders at read time using
  document.baseURI for correct paths in dev and preview deploys
- Symlink docs/screenshots into packages/web/public/ for Vite builds
- Add screenshots to Features and Introduction docs pages

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
github-actions bot added a commit that referenced this pull request Mar 7, 2026
github-actions bot added a commit that referenced this pull request Mar 7, 2026
github-actions bot added a commit that referenced this pull request Mar 7, 2026
github-actions bot added a commit that referenced this pull request Mar 7, 2026
Skip all expensive steps (install, playwright, commit) when the last
commit is itself a screenshot update, breaking the infinite loop of
screenshot commit → synchronize event → screenshot run → commit → ...

https://claude.ai/code/session_012XssQPvVcyAQwMJbQHyMkj
github-actions bot added a commit that referenced this pull request Mar 7, 2026
github-actions bot added a commit that referenced this pull request Mar 7, 2026
@nsheaps nsheaps merged commit 2f0b8ed into main Mar 8, 2026
9 checks passed
@nsheaps nsheaps deleted the claude/add-toggle-syntax-d7zPi branch March 8, 2026 18:44
github-actions bot added a commit that referenced this pull request Mar 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants