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.

Include backticks in inline-code highlight

cm-inline-code was applied only to the text between the backticks, so
when the markers were visible (cursor near) the highlight box stopped
short of them. Style the whole InlineCode node instead — backticks
included — matching the bold/italic content-mark pattern. When the
backticks are hidden they collapse to zero width inside the same box, so
the far-cursor appearance is unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

authored by

Ethan Graf
Claude Opus 4.8 and committed by
Tangled (Jul 19, 2026, 5:59 PM +0300) 8a4fb30d bdd3e1e9

+19 -11
+6 -9
src/editors/automerge/livePreview/codeDecoration.ts
··· 47 47 node.to, 48 48 PROXIMITY_CHARS, 49 49 ); 50 - const first = node.node.firstChild; 51 - const last = node.node.lastChild; 52 - // Content class spans between the backticks (or the whole node if 53 - // markers are missing on malformed input). 54 - const contentFrom = first?.name === 'CodeMark' ? first.to : node.from; 55 - const contentTo = last?.name === 'CodeMark' ? last.from : node.to; 56 - if (contentTo > contentFrom) { 57 - out.push(contentFrom, contentTo, inlineCodeMark); 58 - } 50 + // Highlight the whole span, backticks included, so the code 51 + // styling wraps the markers when they are visible (and when they 52 + // are hidden they collapse to zero width inside the same box). 53 + out.push(node.from, node.to, inlineCodeMark); 59 54 if (!near) { 55 + const first = node.node.firstChild; 56 + const last = node.node.lastChild; 60 57 if (first?.name === 'CodeMark') { 61 58 out.push(first.from, first.to, inlineFormattingHiddenMark, true); 62 59 }
+13 -2
src/editors/automerge/livePreview/livePreview.test.ts
··· 144 144 }); 145 145 146 146 describe('codeDecoration', () => { 147 - it('styles inline code and hides backticks when far', () => { 147 + it('styles the whole inline-code span and hides backticks when far', () => { 148 148 const state = makeState('hello world `code` end', 0); 149 149 const list = decos(state, buildCodeDecorations(state)); 150 150 const code = withClass(list, 'cm-inline-code'); 151 151 expect(code).toHaveLength(1); 152 - expect(code[0].text).toBe('code'); 152 + // Highlight covers the backticks too, not just the content. 153 + expect(code[0].text).toBe('`code`'); 153 154 expect( 154 155 withClass(list, 'cm-inline-formatting-hidden').map((h) => h.text), 155 156 ).toEqual(['`', '`']); 157 + }); 158 + 159 + it('keeps the backticks highlighted (and visible) when cursor is near', () => { 160 + const state = makeState('hello world `code` end', 18); // just past closing ` 161 + const list = decos(state, buildCodeDecorations(state)); 162 + const code = withClass(list, 'cm-inline-code'); 163 + expect(code).toHaveLength(1); 164 + expect(code[0].text).toBe('`code`'); 165 + // Backticks are visible (not hidden) while the cursor touches the span. 166 + expect(withClass(list, 'cm-inline-formatting-hidden')).toHaveLength(0); 156 167 }); 157 168 158 169 it('paints codeblock lines and hides fences when cursor is outside', () => {