/ segment. The
one whose source range contains the caret carries .md-seg-active and
is contenteditable=true; others carry contenteditable=false and show
rendered HTML. */
.md-editor.md-editing > .md-seg {
/* Nothing by default — segment-type classes below configure layout. */
}
.md-editor.md-editing > .md-seg-block,
.md-editor.md-editing > .md-seg-list-item {
display: block;
}
.md-editor.md-editing > .md-seg-block-raw {
display: block;
white-space: pre-wrap;
font-family: var(--font-mono, 'Inconsolata', monospace);
margin: 0;
}
.md-editor.md-editing > .md-seg-plain,
.md-editor.md-editing > .md-seg-inline,
.md-editor.md-editing > .md-seg-latex {
display: inline;
}
.md-editor.md-editing > .md-seg-plain {
white-space: pre-wrap;
}
.md-editor.md-editing > .md-seg-break {
display: none;
}
/* Active-segment affordance: subtle highlight + monospace so the user
sees they're editing raw markdown syntax. Scoped to token-style
segments only — plain prose looks like normal prose even when it
holds the caret, so the "raw zone" never extends beyond the token
the user is actually editing. */
.md-editor.md-editing > .md-seg-inline.md-seg-active,
.md-editor.md-editing > .md-seg-latex.md-seg-active,
.md-editor.md-editing > .md-seg-block-raw.md-seg-active {
background: rgba(33, 150, 243, 0.08);
border-radius: 2px;
font-family: var(--font-mono, 'Inconsolata', monospace);
white-space: pre-wrap;
outline: none;
}
.md-editor.md-editing > .md-seg-plain.md-seg-active,
.md-editor.md-editing > .md-seg-list-item.md-seg-active {
outline: none;
}
/* When the active segment has no rendered content (the user has
deleted everything during editing, or focus just entered an empty
field), inject a zero-width-space via a pseudo-element. Without
this, an empty inline contenteditable establishes no line box and
the .md-editor parent collapses to 0 height despite min-height —
visibly shrinking the kanban scope / action item description fields
on iPhone Safari. The zero-width space is invisible to the user and
is not part of textContent, so _collectRawText still treats the
segment as empty. */
.md-editor.md-editing > .md-seg-active:empty::before {
content: '\200B';
}
.md-editor.md-editing > .md-seg-latex {
cursor: text;
}
/* Rendered inline markdown inside segments should flow naturally. */
.md-editor.md-editing > .md-seg-inline > * {
display: inline;
}