Skip to content

feat(editor): add Document Outline and configurable Copy TOC - #258

Merged
ThisIs-Developer merged 14 commits into
mainfrom
feat/document-outline
Sep 27, 2026
Merged

ThisIs-Developer merged 14 commits into
mainfrom
feat/document-outline

Conversation

@ThisIs-Developer

@ThisIs-Developer ThisIs-Developer commented Sep 22, 2026 •

Copy link
Copy Markdown
Owner

Adds a resizable Document Outline for navigating Markdown and copying a table of contents without leaving Editor, Preview, or Split mode.

  • Place toolbar controls immediately after Emoji in the order Emoji | Find & Replace | Full Screen | Document Outline, using the bundled book-text icon and existing button styles.
  • Show an automatically updated H1–H6 tree with parent chevrons, hierarchy lines, Collapse/Expand All, wrapping titles, active-section highlighting, and section navigation.
  • Add Copy TOC and a compact settings drawer. Default to H2–H4; allow H1–H6 limits, bulleted or hierarchical numbered links, plain text, optional normalization of skipped levels, and a collapsible details wrapper. Disabled copy and an empty-range message handle documents without matching headings.
  • Generate the TOC from the current Markdown AST, independently of preview completion or collapsed branches. Exclude YAML metadata and code examples; preserve plain heading text. Use GitHub-compatible Unicode slugs and assign duplicate suffixes across all headings before filtering. Share heading IDs with the main preview and worker, so pasted links reach the correct section.
  • Reuse Find & Replace header, field, and button styles. Keep text-only header titles and matching 340px defaults; share the File Sidebar resize controls for both panels. Header buttons highlight only on hover or while pressed.
  • Include translations, offline/desktop assets, dependency licenses, inline API/slug documentation, and updated README, changelog, and wiki.

The pure generator is in src/document-toc.mjs; npm run build:toc creates the committed browser/worker bundle. Symbol-only headings use the documented heading fallback; raw HTML heading blocks are outside the AST-generated TOC. Existing headings named “Table of Contents” are included when they fall within the selected depth range.

Validation:

  • npm run test:unit: 22 tests covering nesting, depth, formatting/entities, code and front matter, collisions and per-document reset, output modes, Unicode/emoji, skipped levels, wrappers, empty input, and shared preview anchors.
  • 56 distinct Chromium checks passed across Copy TOC, Document Outline, formatting regressions, and rich-content suites, including focused reruns. Coverage includes Editor/Preview/Split at desktop, tablet, mobile, and narrow widths; long H1–H6 headings; worker rendering; keyboard controls; neutral focus styling; and translated settings.
  • npm run build and git diff --check passed; desktop resources regenerated.
  • The supplied example document produced 14 default TOC entries from 15 headings. Emoji leading-hyphen behavior was checked against GitHub-rendered outlines; source references are in the unit tests.
    On screens up to 767px, Document Outline uses width: calc(80% - 24px) to leave more of the document visible. This CSS-only adjustment was not tested, as requested; the validation above covers the preceding implementation.

@vercel

vercel Bot commented Sep 22, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
markdown-viwer Ready Ready Preview Sep 27, 2026 9:46am UTC

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Sep 22, 2026 •

Copy link
Copy Markdown

Deploying markdownviewer with  Cloudflare Pages  Cloudflare Pages

Latest commit: 758e558
Status: ✅  Deploy successful!
Preview URL: https://ddbd7c37.markdownviewer.pages.dev
Branch Preview URL: https://feat-document-outline.markdownviewer.pages.dev

View logs

@ThisIs-Developer ThisIs-Developer added the enhancement New feature, improvement, or usability enhancement. label Sep 27, 2026
@ThisIs-Developer ThisIs-Developer changed the title feat(editor): add Document Outline sidebar feat(editor): add Document Outline and configurable Copy TOC Sep 27, 2026
@ThisIs-Developer
ThisIs-Developer merged commit 598dbdc into main Sep 27, 2026
5 checks passed
@ThisIs-Developer
ThisIs-Developer deleted the feat/document-outline branch September 27, 2026 18:39
@ThisIs-Developer ThisIs-Developer added the ui/ux User interface, layout, interaction, usability, or visual improvements. label Oct 2, 2026 — with ChatGPT Codex Connector

This branch was successfully deployed

1 active deployment
Preview — 758e5583 Deployed Sep 27, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature, improvement, or usability enhancement. ui/ux User interface, layout, interaction, usability, or visual improvements.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant