ZDDC/mdedit/build.sh
ZDDC 7d4d2dc9a2 feat(browse): two-pane shell + markdown plugin + grid mode (Phases A/B/C/D)
Reshape browse from "tree-as-table with popup preview" into a unified
file-experience tool with three layered behaviors:

  Phase A — Two-pane shell
  Phase B — Markdown plugin (Toast UI inline)
  Phase C — Grid mode (classifier workflow)
  Phase D — Deprecation banners on standalone classifier + mdedit

= Phase A: two-pane shell + lightweight preview plugins =

Browse's table view becomes a tree-pane on the left + preview-pane on
the right with a draggable resizer. Click a folder → expand inline.
Click a file → render in the right pane. The previous popup window
becomes an explicit "⤴ Pop out" button in the right-pane header for
users with a second monitor.

Preview rendering reuses shared/preview-lib.js (PDF iframe, image
<img>, TIFF, ZIP listing, text <pre>). Unknown types show a download
link. browse/js/preview.js refactored into renderInline (default) +
renderInPopup (Pop out button); both share the same plugin
dispatch logic.

Filter rows were already removed earlier this session. Sort columns
likewise — the tree is alphabetical by default; the underlying
setSort API still exists for future re-introduction.

= Phase B: markdown plugin =

New browse/js/preview-markdown.js: when a .md or .markdown file is
clicked, the right pane mounts a Toast UI editor (initial-value =
file contents) with a small toolbar containing Save + dirty indicator
+ status text. Save sends PUT through the file API for server-mode
files; non-server sources are read-only for now (deferred to a
follow-up that wires zddc-source.js writes too). Ctrl+S / Cmd+S
inside the editor saves.

Toast UI Editor (~700 KB JS + ~160 KB CSS) was previously bundled
only in mdedit/vendor/. Moved to shared/vendor/ so browse and mdedit
both pull from one location.

= Phase C: grid mode =

View-mode toggle [Browse | Grid] in the toolbar. Grid mode loads the
classifier tool as an iframe scoped to the current directory (server
mode at working/staging/incoming locations) — classifier's full
bulk-rename workflow without leaving browse. v1 implementation; a
future iteration could bundle classifier's modules directly into
browse for tighter integration. Hostile cases (file:// origin, paths
outside working/staging/incoming) show a friendly explanation
instead of a blank iframe.

new browse/js/grid.js handles the activation logic.

= Phase D: deprecation banners =

mdedit and classifier standalones gain a "this tool is being absorbed
into Browse" advisory banner. Both standalones remain fully
functional and continue to ship — they're useful for offline single-
file editing and air-gapped environments. The banner just points
users toward the unified browse experience.

= Files =

  + browse/js/preview-markdown.js   (markdown plugin)
  + browse/js/grid.js               (grid-mode plugin)
  M browse/template.html            (two-pane layout, view toggle, banners)
  M browse/css/tree.css             (two-pane CSS, replaces table styles)
  M browse/js/init.js               (state additions: selectedId, viewMode)
  M browse/js/tree.js               (rowHtml: <tr>+<td> → <div>)
  M browse/js/preview.js            (renderInline / renderInPopup split)
  M browse/js/events.js             (toggle wiring, resizer, click handlers
                                     adapted from <table> to <div>)
  M browse/build.sh                 (Toast UI vendor + new modules)
  R mdedit/vendor/toastui-*         → shared/vendor/  (one bundle, two tools)
  M mdedit/build.sh                 (paths)
  M mdedit/template.html            (deprecation banner)
  M classifier/template.html        (deprecation banner)
  M tests/browse.spec.js            (selectors updated for new layout +
                                     new "click file → preview" test)

Bundle sizes after this commit:
  browse:     ~1020 KB  (was ~290 KB; added Toast UI ~700 KB)
  classifier: ~1470 KB  (unchanged from prior baseline)
  mdedit:     ~2140 KB  (unchanged; vendor location moved but not added)

What's deferred:
  - TOC + front-matter pane in browse's markdown plugin (mdedit has
    these; browse v1 uses just the editor).
  - FS-API writes from browse's markdown plugin (server PUT works).
  - Classifier modules bundled directly into browse (v1 uses iframe).
  - Sort UI in the new tree (model still supports it; no widget yet).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-10 15:46:51 -05:00

145 lines
4.2 KiB
Bash

#!/bin/sh
set -eu
root_dir=$(cd "$(dirname "$0")" && pwd)
. "$root_dir/../shared/build-lib.sh"
src_html="$root_dir/template.html"
output_dir="$root_dir/dist"
output_html="$output_dir/mdedit.html"
# Vendor files (bundled dependencies — no CDN required at runtime)
# Note: Tailwind is NOT a vendor file — it's replaced by css/tailwind-utils.css,
# a hand-written subset of only the utility classes used in template.html.
toastui_js="$root_dir/../shared/vendor/toastui-editor-all.min.js"
toastui_css="$root_dir/../shared/vendor/toastui-editor.min.css"
mkdir -p "$output_dir"
ensure_exists "$src_html"
ensure_exists "$toastui_js"
ensure_exists "$toastui_css"
css_temp=$(mktemp)
js_raw=$(mktemp)
js_temp=$(mktemp)
toastui_js_safe=$(mktemp)
cleanup() { rm -f "$css_temp" "$js_raw" "$js_temp" "$toastui_js_safe"; }
trap cleanup EXIT
# CSS files to concatenate in order
concat_files \
"css/tailwind-utils.css" \
"../shared/base.css" \
"../shared/toast.css" \
"../shared/nav.css" \
"../shared/logo.css" \
"css/base.css" \
"css/editor.css" \
"css/toc.css" \
"css/markdown.css" \
> "$css_temp"
# JavaScript files to concatenate in order
concat_files \
"../shared/vendor/jszip.min.js" \
"../shared/vendor/docx-preview.min.js" \
"../shared/vendor/xlsx.full.min.js" \
"../shared/vendor/utif.min.js" \
"../shared/zddc.js" \
"../shared/zddc-source.js" \
"../shared/theme.js" \
"../shared/toast.js" \
"../shared/nav.js" \
"../shared/logo.js" \
"../shared/preview-lib.js" \
"js/app.js" \
"js/utils.js" \
"js/front-matter.js" \
"js/file-ops.js" \
"js/file-system.js" \
"js/file-tree.js" \
"js/editor.js" \
"js/toc.js" \
"js/resizer.js" \
"js/events.js" \
"js/main.js" \
"../shared/help.js" \
> "$js_raw"
# Escape '</' in app JS and the Toast UI vendor JS so neither can prematurely
# close the inline <script> blocks they get embedded in.
escape_js_close_tags "$js_raw" "$js_temp"
escape_js_close_tags "$toastui_js" "$toastui_js_safe"
compute_build_label "mdedit" "${1:-}" "${2:-}"
# Process template:
# - Strip the Tailwind CDN <script> tag (css/tailwind-utils.css replaces it)
# - Replace CDN <link> for Toast UI CSS with inline bundled CSS
# - Replace CDN <script src="...toastui..."> with inline bundled Toast UI JS
# - Inject custom CSS/JS at {{CSS_PLACEHOLDER}} and {{JS_PLACEHOLDER}}
# - Substitute {{BUILD_LABEL}}
awk \
-v css_file="$css_temp" \
-v js_file="$js_temp" \
-v toastui_js="$toastui_js_safe" \
-v toastui_css="$toastui_css" \
-v build_label="$build_label" \
-v is_red="$is_red" \
-v favicon_uri="$favicon_data_uri" \
'
/\{\{CSS_PLACEHOLDER\}\}/ {
while ((getline line < css_file) > 0) print line
close(css_file)
next
}
/\{\{JS_PLACEHOLDER\}\}/ {
while ((getline line < js_file) > 0) print line
close(js_file)
next
}
/\{\{BUILD_LABEL\}\}/ {
if (is_red == "1") {
gsub(/\{\{BUILD_LABEL\}\}/, "<span style=\"color:red;font-weight:bold\">" build_label "</span>")
} else {
gsub(/\{\{BUILD_LABEL\}\}/, build_label)
}
print
next
}
/\{\{FAVICON\}\}/ {
gsub(/\{\{FAVICON\}\}/, favicon_uri)
print
next
}
/<script src="https:\/\/cdn\.tailwindcss\.com"/ {
# Stripped: Tailwind utility classes are in css/tailwind-utils.css instead
next
}
/<link rel="stylesheet" href="https:\/\/uicdn\.toast\.com\/editor\/[^"]*\/toastui-editor\.min\.css"/ {
# Inline the bundled Toast UI CSS
print "<style>"
while ((getline line < toastui_css) > 0) print line
close(toastui_css)
print "</style>"
next
}
/<script src="https:\/\/uicdn\.toast\.com\/editor\/[^"]*\/toastui-editor/ {
# Inline the bundled Toast UI JS (already passed through escape_js_close_tags
# so its content cannot contain a literal </script> sequence). We close with
# the real </script> because only that exact string terminates a script
# block per the HTML5 spec.
print "<script>"
while ((getline line < toastui_js) > 0) print line
close(toastui_js)
print "</script>"
next
}
{ print }
' "$src_html" > "$output_html"
echo "Wrote $output_html ($(wc -c < "$output_html") bytes)"
if [ "$is_release" = "1" ]; then
promote_release "mdedit"
fi