jason.woltje
9353675d1c
Jason's Q168: a visual editor for the Console's project documents, held to row 148's rendering rules. Library. ProseMirror with prosemirror-markdown and markdown-it, chosen in the phase 1 library report (LIBRARY.md, REPORT.md in the packet). packages/webui/third_party/editor/ holds 19 upstream packages as source, byte for byte, each with its license, plus NOTICE and PROVENANCE.json. Build. packages/webui/editor/ holds the model, view, entry and build.mjs. esbuild 0.28.2 is an exact devDependency of packages/webui with its own lock; editor/toolchain.mjs checks the version and the binary's sha256 before any build. MOSAIC_REQUIRE_EDITOR_BUILD=1 turns a missing or different esbuild into a failure, and the rebuild test then checks the committed src/public/editor.js and editor.css match a fresh build. The built bundle is committed under Mos's conditions (mos-0755, mos-0765). Console. The docs view gets Visual and Source modes. A save still writes Markdown through the existing project write path, with the same stale-base and read-only handling. A mode switch reuses the draft and reads nothing from the project. Links and images keep row 148's target rules, and no raw HTML runs. serve.mjs serves /editor.js and /editor.css; index.html loads them. Owner Researcher, brief docs/plans/2026-10-16_q168-wysiwyg-editor.md. Round 5 is a rebase ontod88613bac(row 155); only docs/TOOLS.md, webui/README.md, public/bus.js and serve.mjs differ from the round before. Reviewers on candidate manifest 3a4bc21c...3b05: Dewey (security) approve 29027, Filbert approve 29026. Mos's decision 123 go for public.diff 902f0244 (handwritten part ea59079e): mos-0824. Sage gate on72c3fa598with MOSAIC_REQUIRE_EDITOR_BUILD=1: GATE_PASSED 25/25 (node 2397, selftests 422), 22:07:29Z to 22:13:50Z; the rebuild test ran and passed. Nothing live.
35 lines
3.0 KiB
CSS
35 lines
3.0 KiB
CSS
/* Row 154 (#1648, Q168): the Console's visual editor. Colours come from the Console's own variables. */
|
|
.ed-wrap { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
|
|
.ed-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); }
|
|
.ed-btn { font: inherit; font-size: 12px; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; }
|
|
.ed-btn:hover:not(:disabled) { background: rgba(127, 127, 127, 0.18); }
|
|
.ed-btn.on { background: rgba(127, 127, 127, 0.32); font-weight: 600; }
|
|
.ed-btn:disabled { opacity: 0.4; cursor: default; }
|
|
.ed-linkbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; border-bottom: 1px solid var(--line); }
|
|
.ed-linkbar[hidden] { display: none; }
|
|
.ed-link-input { flex: 1 1 18em; min-width: 8em; font: inherit; padding: 3px 6px; }
|
|
.ed-link-note { font-size: 12px; opacity: 0.85; }
|
|
.ed-surface { min-width: 0; overflow: auto; }
|
|
.ed-surface .ProseMirror { min-height: 16em; max-height: 70vh; overflow: auto; padding: 10px 14px; outline: none; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
|
|
.ed-surface .ProseMirror p { margin: 0 0 0.8em; }
|
|
.ed-surface .ProseMirror h1, .ed-surface .ProseMirror h2, .ed-surface .ProseMirror h3,
|
|
.ed-surface .ProseMirror h4, .ed-surface .ProseMirror h5, .ed-surface .ProseMirror h6 { margin: 0.9em 0 0.4em; line-height: 1.25; }
|
|
.ed-surface .ProseMirror h1 { font-size: 1.6em; }
|
|
.ed-surface .ProseMirror h2 { font-size: 1.35em; }
|
|
.ed-surface .ProseMirror h3 { font-size: 1.15em; }
|
|
.ed-surface .ProseMirror blockquote { margin: 0 0 0.8em; padding-left: 12px; border-left: 3px solid var(--line); opacity: 0.92; }
|
|
.ed-surface .ProseMirror ul, .ed-surface .ProseMirror ol { margin: 0 0 0.8em; padding-left: 1.6em; }
|
|
.ed-surface .ProseMirror li > p { margin-bottom: 0.3em; }
|
|
.ed-surface .ProseMirror code { font-family: ui-monospace, monospace; font-size: 0.92em; padding: 0 3px; border-radius: 3px; background: rgba(127, 127, 127, 0.2); }
|
|
.ed-surface .ProseMirror pre { margin: 0 0 0.8em; padding: 8px 10px; border-radius: 4px; background: rgba(127, 127, 127, 0.16); overflow: auto; white-space: pre; }
|
|
.ed-surface .ProseMirror pre code { padding: 0; background: none; }
|
|
.ed-surface .ProseMirror pre.md-raw { border-left: 3px solid #b8860b; }
|
|
.ed-surface .ProseMirror hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
|
|
.ed-surface .ProseMirror a { color: inherit; text-decoration: underline; }
|
|
.ed-surface .ProseMirror .md-image { font-family: ui-monospace, monospace; font-size: 0.9em; padding: 0 3px; border: 1px dashed var(--line); border-radius: 3px; }
|
|
.ed-surface .ProseMirror .md-bad-link { text-decoration: line-through; }
|
|
.ed-surface .ProseMirror-selectednode { outline: 2px solid #5b9bd5; }
|
|
.doc-mode { display: flex; gap: 6px; margin: 8px 0; }
|
|
.doc-mode .btn[aria-pressed="true"] { background: var(--raised); font-weight: 600; }
|
|
.doc-edit.one { grid-template-columns: minmax(0, 1fr); }
|