defuss-shadcn / Application / Scaffolds / scaffold-document-editor
Document Editor
A Google-Docs-style editor as a clickdummy - "Margin". Three Markdown documents open in the Editor.js block editor, the Toolbar formats the selection and the current block, and the Document Comments column on the right scrolls on its own: select text and press Comment to open a thread on it, click a highlight to find its card, click a card to find its text, walk the comments with ↑ ↓, reply in place, follow a quote to another span. Every control is a shipped component. Part of the Application Scaffolds.
On this page (2)
§Document editor
The whole editor in one source. The documents are Markdown in a JSON script; opening one renders it in Editor.js and loads its comments; switching keeps the edits. Comments are a JSON model - comment on a selection with the toolbar's Comment button, reply under a card, follow a quote.
§How it works
A page, not a component: it composes the library and keeps its own glue small - open a document, comment on a selection, a status bar, the narrow layout.
- Documents - Markdown. The open one is the Editor.js element's source; the others wait in a JSON script and are rendered with
setMarkdownwhen their Sidebar link is clicked. Switching keeps the edits: the current document is read back as Markdown first. Block ids are deterministic (b1,b2, ...), so a comment can name the block its text lives in. - Formatting - the Toolbar is bound with
data-toolbar; every button carries adata-editor-command, and the toggles follow the caret (bold, italic, the current block's type). A toolbar button never takes the selection away. - Comments - the Document Comments column is a JSON model per document: author, colour, the anchored span (block + text), a Markdown body, quotes to other spans, replies. Select text and press Comment (or ⌘ K): a Dialog shows the quote, takes the text and a colour from a Toggle Group, and
docComments.add()places the mark and the card. Marks are re-placed after every editor change. - Navigation - click a mark to find its card, the card's excerpt to find its mark, ↑ ↓ to walk the comments, a quote to flash another span. Reply opens the Textarea composer under the card.
- Toasts - a Toast confirms a copied link and a new comment.
- Autosave and words -
editorjs-changeflips the badge to Editing... and back to Saved with the time; the word count comes from the Markdown read-back, debounced. - Narrow - the document list is open or closed (no icon rail) and sits in the flow, so the page narrows instead of being covered; below 56rem the comment column becomes an overlay toggled from the header.
- Full screen - app-document-editor.html is generated from this page's example at build time and loads only this scaffold's bundle; the Editor.js builds come from jsDelivr, pinned.
Comments, ideas or improvements? Edit this page's source on GitHub