eagraf.dev / textile
A local-first note taking app
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

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>

authored by

Ethan Graf
Claude Opus 4.8 and committed by
Tangled (Jul 22, 2026, 4:19 AM +0300) 1b9605da 2e4a5036

+12 -3
+5 -3
src/editors/automerge/livePreview/hrDecoration.ts
··· 37 37 enter(node) { 38 38 if (node.name !== 'HorizontalRule') return; 39 39 const line = state.doc.lineAt(node.from); 40 + // When the cursor is on the rule's line, show the raw `---` and draw 41 + // no rule at all — so editing the line is unambiguous. Off the line, 42 + // apply the line style and hide the glyphs so the rule alone shows. 43 + if (line.number === cursorLine) return; 40 44 decos.push({ from: line.from, to: line.from, deco: hrLine }); 41 - // Hide the whole line's text (including any leading whitespace) so 42 - // the border alone reads as the rule. 43 - if (line.number !== cursorLine && line.to > line.from) { 45 + if (line.to > line.from) { 44 46 decos.push({ from: line.from, to: line.to, deco: hrLineHiddenMark }); 45 47 } 46 48 },
+7
src/editors/automerge/livePreview/livePreview.test.ts
··· 251 251 expect(hidden).toHaveLength(1); 252 252 expect(hidden[0].text).toBe('---'); 253 253 }); 254 + 255 + it('shows raw --- with no rule when the cursor is on the line', () => { 256 + const state = makeState('para\n\n---\n\nmore', 7); // on the "---" line 257 + const list = decos(state, buildHrDecorations(state)); 258 + expect(withClass(list, 'cm-hr')).toHaveLength(0); 259 + expect(withClass(list, 'cm-hr-line-hidden')).toHaveLength(0); 260 + }); 254 261 }); 255 262 256 263 describe('listDecoration', () => {