VARASYS/ZDDC
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ZDDC/mdedit
History
ZDDC 7ced0395b6 feat(shared): lateral project-stage strip in every tool's header 
Adds a thin nav strip directly under the app-header showing the four
canonical lifecycle stages from the transmittal-workflow spec:
archive · working · staging · reviewing. Each is a link to that
stage's directory under the current project. Current stage is
highlighted (bold + primary color, aria-current="page"). Strip
mounts as a sibling of .app-header on DOMContentLoaded — no
template changes needed in any tool.

Render rules (shared/nav.js shouldRender):
- location.protocol must be http: or https: (file:// has no project
  structure to navigate within)
- a project segment must be detectable as the first path segment
  (when it isn't a tool HTML file like /index.html or
  /archive.html?projects=A,B). Multi-project view at the deployment
  root therefore shows no strip.

Stage URL targets:
- Archive   → <project>/archive.html       (project-root archive view)
- Working   → <project>/working/           (directory listing — mdedit auto-served)
- Staging   → <project>/staging/           (directory listing — transmittal auto-served)
- Reviewing → <project>/reviewing/         (directory listing)

Convention-driven, not probed: if a deployment doesn't have one of
these folders the link returns 404. Operators on non-standard layouts
can opt out by setting window.zddc.nav.disabled = true before
DOMContentLoaded.

This pairs with the previous landing-tool change (single-project
click → <project>/archive.html). Together they give the user
both URL-bar manipulation AND visible navigation across the four
canonical project stages.

Five Playwright tests in tests/nav.spec.js exercise:
- non-render at deployment root
- render + active stage on <project>/archive.html
- render + active stage deep inside <project>/working/foo/mdedit.html
- canonical link targets
- mount position is sibling of .app-header

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-09 19:50:30 -05:00
..
css style(shared,archive,browse,mdedit): replace inline styles with CSS 2026-05-09 18:48:44 -05:00
js refactor(mdedit): drop window.* TOC globals, call functions directly 2026-05-09 18:39:10 -05:00
vendor Initial commit 2026-04-27 11:05:47 -05:00
build.sh feat(shared): lateral project-stage strip in every tool's header 2026-05-09 19:50:30 -05:00
README.md docs(mdedit): fix stale 'Select Directory' reference in README 2026-05-04 18:07:37 -05:00
template.html style(shared,archive,browse,mdedit): replace inline styles with CSS 2026-05-09 18:48:44 -05:00

README.md

ZDDC Markdown Editor

← Back to ZDDC

A lightweight, browser-based markdown editor with YAML front matter support.

🔗 Open Markdown Editor - Click to use online, or right-click → "Save Link As" to keep your own copy.

Reliability

This tool follows the "record player with the record" philosophy - the application and your data travel together. The single HTML file contains everything needed to edit markdown files locally in your browser.

Quick Start

  1. Open the editor in your browser
  2. Click Add Local Directory to choose a folder with markdown files
  3. Navigate the file tree on the left
  4. Click any .md file to edit it
  5. Click Save File or Save All to save changes

Features

📂 File Navigation

  • Browse directories using the File System Access API
  • Collapsible folder tree with file type icons
  • Files sorted alphabetically with directories grouped

✏️ Markdown Editing

  • Toast UI Editor with live preview
  • Split view (markdown + preview)
  • Full toolbar for formatting

📋 YAML Front Matter

  • Separate front matter section at top of editor
  • Auto-parsed and preserved on save
  • Collapsible for more editing space

📑 Table of Contents

  • Auto-generated from headings
  • Adjustable depth (H1 only through H6)
  • Click to jump to heading in preview

💾 File Operations

  • Save individual files or Save All
  • Reload from disk (discards unsaved changes)
  • External change detection with reload prompt
  • Unsaved change warnings before leaving

🖼️ File Previews

  • Image preview for common formats
  • HTML preview in sandboxed iframe
  • Plain text editing for non-markdown files

Build

The editor is built from modular source files using a bash script:

cd mdedit
./build.sh

This concatenates CSS and JS files into dist/mdedit.html.

Project Structure

mdedit/
├── css/
│   ├── base.css                  # Core styles and layout
│   ├── editor.css                # Toast UI Editor overrides
│   ├── toc.css                   # Table of Contents styles
│   └── markdown.css              # Markdown rendering styles
├── js/
│   ├── app.js                    # Global state
│   ├── utils.js                  # Utility functions
│   ├── front-matter.js           # YAML parsing
│   ├── file-system.js            # File operations
│   ├── file-tree.js              # Tree rendering
│   ├── editor.js                 # Toast UI setup
│   ├── toc.js                    # TOC generation
│   ├── resizer.js                # Pane resizing
│   ├── events.js                 # Event listeners
│   └── main.js                   # Initialization
├── vendor/
│   ├── toastui-editor-all.min.js # Toast UI Editor JS (bundled)
│   └── toastui-editor.min.css    # Toast UI Editor CSS (bundled)
├── template.html                 # HTML structure (uses CDN for local dev convenience)
├── build.sh                      # Build script (inlines vendor files, strips CDN refs)
└── dist/
    └── mdedit.html               # Built self-contained file

Technical Details

  • No server required - runs entirely in browser
  • File System Access API - direct local file access
  • Toast UI Editor v3.2.2 - bundled from vendor/ into the built output (no CDN required)
  • Tailwind CSS - replaced at build time by css/tailwind-utils.css, a hand-written static subset containing only the ~80 utility classes actually used in template.html (no runtime overhead, no console warnings)
  • Fully self-contained - dist/mdedit.html (~850 KB) works offline with no external dependencies

Development note: template.html loads Toast UI and Tailwind from CDN for a faster local development experience (open template.html directly in a browser). The build.sh script replaces the Tailwind CDN <script> tag with nothing (utilities come from css/tailwind-utils.css instead) and replaces the Toast UI CDN tags with the locally bundled vendor/ files when producing dist/mdedit.html.

Modules

CSS and JS modules live under css/ and js/. The canonical load order is in build.sh. See the root ARCHITECTURE.md for the build/module pattern and AGENTS.md for shared helpers.

mdedit-specific notes:

  • css/tailwind-utils.css is a hand-curated static subset of Tailwind v3 — there is no Tailwind build step. Add a class here when adding it to template.html.
  • Toast UI Editor v3.2.2 ships pre-bundled in vendor/. template.html loads it from CDN for dev convenience; build.sh swaps the CDN tag for the bundled file.
  • File operations (create, rename, delete) live in js/file-ops.js.

Build Process

The build script (build.sh):

  1. Concatenates all local CSS and JS files in dependency order
  2. Replaces the CDN <script>/<link> tags for Tailwind and Toast UI with the locally bundled files from vendor/
  3. Injects everything into template.html to produce dist/mdedit.html

The final HTML file (~850 KB) is fully self-contained and works offline.

Architecture Notes

  • All local CSS/JS files are inlined into the output HTML
  • Vendor dependencies (Toast UI, Tailwind) are bundled from vendor/ — no runtime CDN access
  • template.html loads dependencies from CDN for convenient local development, but build.sh replaces these
  • No npm dependencies required at runtime
  • File System Access API requires Chromium-based browsers