davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Editor UX: zero horizontal shift for headings and bullets (Bear-style)

Browse Source 
Three CSS fixes for the codemirror-live-markdown live preview:

1. Remove header underlines (border-bottom: none on .cm-heading-line)
2. Heading markers (## etc) positioned absolutely in left gutter area
   so they never push heading text horizontally when revealed
3. List bullets always occupy fixed width (font-size: 1em, not collapsed),
   showing • when inactive and source char (-) when active

Verified via Playwright: 0px horizontal shift on both headings and bullets.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
2026-02-15 19:18:08 +01:00
parent 81fe9418ce
commit fdd7a248b2
2 changed files with 150 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/Editor.css
View File

@@ -237,3 +237,73 @@
.diff-view__line--context .diff-view__line-content {
color: var(--text-secondary);
}
/* =============================================
Bear-style live preview: zero horizontal shift
============================================= */
/* FIX 1: Remove header underlines */
.cm-heading-line {
border-bottom: none !important;
text-decoration: none !important;
}
/* FIX 2: Heading markers in left gutter area
The ## markers are absolutely positioned in the content's left padding (40px),
so they never affect text flow — zero horizontal shift. */
.cm-heading-line {
position: relative;
}
.cm-heading-line .cm-formatting-block {
position: absolute !important;
top: 50%;
transform: translateY(-50%);
right: 100%;
padding-right: 4px;
font-size: 0.75rem !important;
line-height: 1;
opacity: 0;
transition: opacity 0.15s ease-out !important;
white-space: nowrap;
pointer-events: none;
color: var(--text-faint);
}
.cm-heading-line .cm-formatting-block.cm-formatting-block-visible {
font-size: 0.75rem !important;
opacity: 0.5;
pointer-events: auto;
}
/* FIX 3: List/block bullets — always visible, fixed width, zero shift
Override the library's font-size animation so the marker always occupies
the same space regardless of cursor position. */
.cm-line:not(.cm-heading-line) .cm-formatting-block {
font-size: 1em !important;
display: inline-block !important;
min-width: 1.5em !important;
vertical-align: baseline;
transition: color 0.15s ease-out, opacity 0.15s ease-out !important;
}
/* Inactive state: hide source text, show bullet dot via ::before */
.cm-line:not(.cm-heading-line) .cm-formatting-block:not(.cm-formatting-block-visible) {
color: transparent !important;
opacity: 1 !important;
position: relative;
overflow: visible !important;
}
.cm-line:not(.cm-heading-line) .cm-formatting-block:not(.cm-formatting-block-visible)::before {
content: '\2022';
position: absolute;
left: 0;
color: var(--text-tertiary);
}
/* Active state: show source marker (-, *, +, etc.) */
.cm-line:not(.cm-heading-line) .cm-formatting-block.cm-formatting-block-visible {
color: var(--text-faint) !important;
opacity: 1 !important;
}