textile/src/editors/automerge/livePreview/ at main · eagraf.dev/textile · Tangled

eagraf.dev / textile

0

A local-first note taking app

0

textile / src / editors / automerge / livePreview /

at main 15 files

Ethan Graf Add Edit/View mode toggle with per-tab state and link navigation 1d ago

blockquoteDecoration.ts

Render nested blockquotes as equal-width bars at any depth The depth styling used a single border-left with `double` for levels 2-3, so level 2 rendered as two hairlines thinner than the level-1 solid bar, level 3 as thicker lines, and levels past 3 had no class at all (depth was capped at 3). A single border can only ever be one bar. Pass the nesting depth to CSS as an inline `--quote-depth` variable and paint the bars with a repeating gradient clipped (via background-size) to exactly that many 3px bars. Every level now adds one more equal-width bar, at any depth, with a dark-theme bar color. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

4 days ago

codeDecoration.ts

Live preview Tier 1: complete partial node-type rendering Address the "recognized but marker left raw" cases from the audit, plus code syntax colors: - Headings: hide the optional closing `##` sequence, not just the opening. - Escapes / hard breaks (new escapeDecoration.ts): hide the backslash of `\x` escapes and the `\` hard-line-break form, so the escaped character renders literally. - Reference links: hide the `[ref]` label (no URL child) and mute the `[ref]: url` definition line via cm-link-def. - Fenced code: hide the language label (CodeInfo) off-block so no stray `js` floats above the box. - Code syntax colors: add a scoped tok-* palette (light + data-theme dark) so classHighlighter output is actually colored. - Nested blockquotes: cm-quote-{depth} by `>` count per line, with progressive indent/bar instead of flat styling. Extends the headless builder tests with a case per fix (146 passing). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

6 days ago

Add Edit/View mode toggle with per-tab state and link navigation Introduce a distinct read-only "view" rendering mode alongside the existing live-preview "edit" mode, toggled per-tab from a segmented control in the bottom bar. Rendering: view mode is expressed as "the cursor is nowhere" — the four cursor-proximity helpers in livePreview/context.ts short-circuit when the new editorModeFacet is 'view', so every element hides its syntax and stays rendered with no per-builder change. The editor drives the facet (plus EditorState.readOnly) through a runtime-reconfigured compartment, so toggling preserves cursor/scroll/history. State: mode lives on each TileTab so it rides along on drag/move and persists per tab (layout VERSION 2, reads v1). The toggle reads/writes the active tab's mode via the tiling workspace's tab-state hook. Links: in view mode a plain click opens a link (edit mode keeps cmd/ctrl-click); external URLs open in the browser, internal targets resolve against the current document and open in the same tile. Links show a pointer cursor in view mode. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

1 day ago

escapeDecoration.ts

Live preview Tier 1: complete partial node-type rendering Address the "recognized but marker left raw" cases from the audit, plus code syntax colors: - Headings: hide the optional closing `##` sequence, not just the opening. - Escapes / hard breaks (new escapeDecoration.ts): hide the backslash of `\x` escapes and the `\` hard-line-break form, so the escaped character renders literally. - Reference links: hide the `[ref]` label (no URL child) and mute the `[ref]: url` definition line via cm-link-def. - Fenced code: hide the language label (CodeInfo) off-block so no stray `js` floats above the box. - Code syntax colors: add a scoped tok-* palette (light + data-theme dark) so classHighlighter output is actually colored. - Nested blockquotes: cm-quote-{depth} by `>` count per line, with progressive indent/bar instead of flat styling. Extends the headless builder tests with a case per fix (146 passing). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

6 days ago

headingDecoration.ts

Live preview Tier 1: complete partial node-type rendering Address the "recognized but marker left raw" cases from the audit, plus code syntax colors: - Headings: hide the optional closing `##` sequence, not just the opening. - Escapes / hard breaks (new escapeDecoration.ts): hide the backslash of `\x` escapes and the `\` hard-line-break form, so the escaped character renders literally. - Reference links: hide the `[ref]` label (no URL child) and mute the `[ref]: url` definition line via cm-link-def. - Fenced code: hide the language label (CodeInfo) off-block so no stray `js` floats above the box. - Code syntax colors: add a scoped tok-* palette (light + data-theme dark) so classHighlighter output is actually colored. - Nested blockquotes: cm-quote-{depth} by `>` count per line, with progressive indent/bar instead of flat styling. Extends the headless builder tests with a case per fix (146 passing). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

6 days ago

hiddenClasses.ts

Complete live-preview rendering for core markdown node types Restructure the Automerge editor's single livePreview.ts into per-node CodeMirror extensions composed by livePreview(), mirroring the reams reference. Extends coverage from 4 node types to the core CommonMark + GFM set (no widgets): - headings: ported as-is - bold / italic / strikethrough: content classes + proximity-revealed markers, registered atomic so cursor motion skips hidden markers - inline code + fenced code blocks: content/line styling + fence hiding - links: fix the broken handler (hide all brackets/paren/URL, style the label) + cmd/ctrl-click to open externally via a new shell.openExternal IPC bridge - blockquotes, horizontal rules, lists: line decorations + prefix hiding Splits the single cm-formatting-hidden class into idiom-correct hide classes (per the CM6 cursor-skip contract) and activates the previously dead CSS. Adds headless builder tests (pure over EditorState) covering each node type. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

1 week ago

hrDecoration.ts

Reveal raw --- (no rule) when cursor is on the HR line The cm-hr line decoration that draws the rule was applied unconditionally, so placing the cursor on a horizontal rule showed both the rule and the raw "---". Only style the line (and hide its glyphs) when the cursor is on a different line; on the rule's own line, emit nothing so the raw "---" shows for editing — matching how headings/blockquotes reveal their markers. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

4 days ago

Add Edit/View mode toggle with per-tab state and link navigation Introduce a distinct read-only "view" rendering mode alongside the existing live-preview "edit" mode, toggled per-tab from a segmented control in the bottom bar. Rendering: view mode is expressed as "the cursor is nowhere" — the four cursor-proximity helpers in livePreview/context.ts short-circuit when the new editorModeFacet is 'view', so every element hides its syntax and stays rendered with no per-builder change. The editor drives the facet (plus EditorState.readOnly) through a runtime-reconfigured compartment, so toggling preserves cursor/scroll/history. State: mode lives on each TileTab so it rides along on drag/move and persists per tab (layout VERSION 2, reads v1). The toggle reads/writes the active tab's mode via the tiling workspace's tab-state hook. Links: in view mode a plain click opens a link (edit mode keeps cmd/ctrl-click); external URLs open in the browser, internal targets resolve against the current document and open in the same tile. Links show a pointer cursor in view mode. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

1 day ago

inlineFormatDecoration.ts

Complete live-preview rendering for core markdown node types Restructure the Automerge editor's single livePreview.ts into per-node CodeMirror extensions composed by livePreview(), mirroring the reams reference. Extends coverage from 4 node types to the core CommonMark + GFM set (no widgets): - headings: ported as-is - bold / italic / strikethrough: content classes + proximity-revealed markers, registered atomic so cursor motion skips hidden markers - inline code + fenced code blocks: content/line styling + fence hiding - links: fix the broken handler (hide all brackets/paren/URL, style the label) + cmd/ctrl-click to open externally via a new shell.openExternal IPC bridge - blockquotes, horizontal rules, lists: line decorations + prefix hiding Splits the single cm-formatting-hidden class into idiom-correct hide classes (per the CM6 cursor-skip contract) and activates the previously dead CSS. Adds headless builder tests (pure over EditorState) covering each node type. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

1 week ago

linkDecoration.ts

Live preview Tier 1: complete partial node-type rendering Address the "recognized but marker left raw" cases from the audit, plus code syntax colors: - Headings: hide the optional closing `##` sequence, not just the opening. - Escapes / hard breaks (new escapeDecoration.ts): hide the backslash of `\x` escapes and the `\` hard-line-break form, so the escaped character renders literally. - Reference links: hide the `[ref]` label (no URL child) and mute the `[ref]: url` definition line via cm-link-def. - Fenced code: hide the language label (CodeInfo) off-block so no stray `js` floats above the box. - Code syntax colors: add a scoped tok-* palette (light + data-theme dark) so classHighlighter output is actually colored. - Nested blockquotes: cm-quote-{depth} by `>` count per line, with progressive indent/bar instead of flat styling. Extends the headless builder tests with a case per fix (146 passing). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

6 days ago

listDecoration.ts

Bulleted & numbered list editing: glyphs, tight continuation, nesting Improve the CodeMirror live-preview editor's list support: - Bullets render as a • glyph (widget) instead of a literal -/*/+, with the raw marker revealed on the cursor's line for editing. Ordered markers keep their digits. - List indentation (and the glyph) only apply once the marker is followed by a space, so a marker mid-typing no longer indents then un-indents. - New listKeymap.ts supplies Enter/Backspace/Tab/Shift-Tab for list items, replacing @codemirror/lang-markdown's addKeymap (which turns lists "loose", inserting a blank line between items — the "new item two lines below" bug): - Enter: tight continuation with the next marker + trailing space, auto-incrementing ordered lists; exits the list on an empty item. - Tab/Shift-Tab: nest/outdent aligned to the parent's content column, with ordered-list renumbering (reset to 1 on indent, continue parent on outdent). Falls through to the default indent outside a list. Headless tests cover the decoration builder and every list command (168 passing). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

3 days ago

listKeymap.test.ts

Bulleted & numbered list editing: glyphs, tight continuation, nesting Improve the CodeMirror live-preview editor's list support: - Bullets render as a • glyph (widget) instead of a literal -/*/+, with the raw marker revealed on the cursor's line for editing. Ordered markers keep their digits. - List indentation (and the glyph) only apply once the marker is followed by a space, so a marker mid-typing no longer indents then un-indents. - New listKeymap.ts supplies Enter/Backspace/Tab/Shift-Tab for list items, replacing @codemirror/lang-markdown's addKeymap (which turns lists "loose", inserting a blank line between items — the "new item two lines below" bug): - Enter: tight continuation with the next marker + trailing space, auto-incrementing ordered lists; exits the list on an empty item. - Tab/Shift-Tab: nest/outdent aligned to the parent's content column, with ordered-list renumbering (reset to 1 on indent, continue parent on outdent). Falls through to the default indent outside a list. Headless tests cover the decoration builder and every list command (168 passing). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

3 days ago

Bulleted & numbered list editing: glyphs, tight continuation, nesting Improve the CodeMirror live-preview editor's list support: - Bullets render as a • glyph (widget) instead of a literal -/*/+, with the raw marker revealed on the cursor's line for editing. Ordered markers keep their digits. - List indentation (and the glyph) only apply once the marker is followed by a space, so a marker mid-typing no longer indents then un-indents. - New listKeymap.ts supplies Enter/Backspace/Tab/Shift-Tab for list items, replacing @codemirror/lang-markdown's addKeymap (which turns lists "loose", inserting a blank line between items — the "new item two lines below" bug): - Enter: tight continuation with the next marker + trailing space, auto-incrementing ordered lists; exits the list on an empty item. - Tab/Shift-Tab: nest/outdent aligned to the parent's content column, with ordered-list renumbering (reset to 1 on indent, continue parent on outdent). Falls through to the default indent outside a list. Headless tests cover the decoration builder and every list command (168 passing). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

3 days ago

livePreview.test.ts

Add Edit/View mode toggle with per-tab state and link navigation Introduce a distinct read-only "view" rendering mode alongside the existing live-preview "edit" mode, toggled per-tab from a segmented control in the bottom bar. Rendering: view mode is expressed as "the cursor is nowhere" — the four cursor-proximity helpers in livePreview/context.ts short-circuit when the new editorModeFacet is 'view', so every element hides its syntax and stays rendered with no per-builder change. The editor drives the facet (plus EditorState.readOnly) through a runtime-reconfigured compartment, so toggling preserves cursor/scroll/history. State: mode lives on each TileTab so it rides along on drag/move and persists per tab (layout VERSION 2, reads v1). The toggle reads/writes the active tab's mode via the tiling workspace's tab-state hook. Links: in view mode a plain click opens a link (edit mode keeps cmd/ctrl-click); external URLs open in the browser, internal targets resolve against the current document and open in the same tile. Links show a pointer cursor in view mode. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

1 day ago

Add Edit/View mode toggle with per-tab state and link navigation Introduce a distinct read-only "view" rendering mode alongside the existing live-preview "edit" mode, toggled per-tab from a segmented control in the bottom bar. Rendering: view mode is expressed as "the cursor is nowhere" — the four cursor-proximity helpers in livePreview/context.ts short-circuit when the new editorModeFacet is 'view', so every element hides its syntax and stays rendered with no per-builder change. The editor drives the facet (plus EditorState.readOnly) through a runtime-reconfigured compartment, so toggling preserves cursor/scroll/history. State: mode lives on each TileTab so it rides along on drag/move and persists per tab (layout VERSION 2, reads v1). The toggle reads/writes the active tab's mode via the tiling workspace's tab-state hook. Links: in view mode a plain click opens a link (edit mode keeps cmd/ctrl-click); external URLs open in the browser, internal targets resolve against the current document and open in the same tile. Links show a pointer cursor in view mode. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

1 day ago