/* The code editor inside the Deck tab's raw HTML panel -
* src/components/editor/deck/HtmlSourceEditor.vue, and the Tidy button that
* DeckRawHtmlPanel.vue puts beside it.
*
* ── THE FILENAME IS LOAD-BEARING, TWICE OVER
*
* `scripts/bundle-css.mjs` partitions the public and the admin CSS bundles on
* the literal prefix `/css/admin` and on nothing else, so a sheet named
* `code-editor.css` would ship to every marketing visitor with a completely
* green build. And `tests/editorContentTranslation.spec.ts` reads every
* `admin-editor*.css` by name into an exact list, so this file must carry the
* `admin-editor` half too, and that list has to name it.
*
* ── EVERY BARE CLASS IN AN ADMIN SHEET IS GLOBAL
*
* All of `public/css/admin*.css` concatenates into ONE admin bundle loaded whole
* by every admin page as well as by /editor, so a bare `.foo` here lands on any
* `.foo` anywhere in the panel. The prefix is `edtd-`, the Deck tab's, and
* `tests/editorCssIsolation.spec.ts` fails any name another sheet declares or
* any name a non-editor component wears.
*
* That is also why every CodeMirror rule below is written as
* `.edtd-code .cm-...` rather than as a bare `.cm-...`. CodeMirror's class names
* are its own vocabulary, and claiming them globally from an admin sheet would
* restyle any other editor a later screen mounts. The leading compound is a
* class this sheet owns; the CodeMirror name is a descendant of it.
*
* ── CODEMIRROR SHIPS NO STYLESHEET
*
* It injects its base theme at runtime through style-mod, into , before
* any . So there is nothing to import for it and everything here is an
* override that wins by ordinary cascade order.
*
* ── AND THE ONE RULE THAT IS NOT COSMETIC
*
* `direction: ltr` on the editor. `direction: rtl` is global on this site;
* `.edt-shell` turns the editor page LTR by inheritance, and CodeMirror reads
* `getComputedStyle(...).direction` off its own content element to decide how to
* do cursor arithmetic, line ordering and selection drawing. Left to inherit
* through a stacking context that changes, the caret lands in the wrong place on
* every line that starts with Hebrew. It is stated here, on the editor itself,
* rather than relied on from four ancestors up. That is `ltr`, never `rtl`:
* `tests/editorContentTranslation.spec.ts` allows exactly one RTL island in the
* whole editor and it is the slide canvas.
*/
.edtd-code {
display: block;
}
/* The box CodeMirror is mounted into. Before the chunk resolves it is empty and
takes no room, so the textarea below is the whole widget. */
.edtd-code__host.is-idle {
display: none;
}
/* And once it is driving, the textarea stops being drawn. It is NOT removed:
it goes on mirroring the value so it can take over again if it is ever shown,
and the template drops it out of the tab order and hides it from assistive
technology at the same time. */
.edtd-code__fallback.is-hidden {
display: none;
}
.edtd-code__why,
.edtd-code__note {
margin: 0.4rem 0 0;
color: var(--edt-ink-2);
font-size: 0.76rem;
line-height: 1.55;
}
.edtd-code__why {
color: var(--edt-ink-3);
}
.edtd-code__tidy {
margin-inline-start: auto;
padding: 0.24rem 0.7rem;
font-size: 0.76rem;
}
.edtd-code__tidy:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* ── The editor's own chrome ─────────────────────────────────────────────── */
.edtd-code .cm-editor {
/* See the header: this is the load-bearing declaration in the file. */
direction: ltr;
text-align: left;
border-radius: 8px;
background: #fff;
box-shadow: inset 0 0 0 1px var(--edt-line);
color: var(--edt-ink);
font-family: var(--font-mono);
font-size: 0.76rem;
line-height: 1.55;
/* The same geometry the textarea had, so swapping widgets does not move the
panel: `min-height: 14rem`, and a ceiling so a 200,000-character body
scrolls inside its own box instead of pushing the buttons off the screen. */
min-height: 14rem;
max-height: 34rem;
overflow: hidden;
}
.edtd-code .cm-scroller {
font-family: inherit;
line-height: inherit;
overflow: auto;
}
.edtd-code .cm-editor.cm-focused {
outline: 2px solid var(--edt-accent);
outline-offset: 1px;
}
.edtd-code .cm-content {
padding: 0.55rem 0.6rem;
caret-color: var(--edt-ink);
}
.edtd-code .cm-gutters {
border-right: 1px solid var(--edt-line);
background: rgba(25, 26, 35, 0.02);
color: var(--edt-ink-3);
}
.edtd-code .cm-activeLineGutter {
background: rgba(0, 113, 227, 0.06);
color: var(--edt-ink-2);
}
.edtd-code .cm-activeLine {
background: rgba(0, 113, 227, 0.035);
}
.edtd-code .cm-selectionBackground,
.edtd-code .cm-content ::selection {
background: rgba(0, 113, 227, 0.16);
}
.edtd-code .cm-matchingBracket {
background: rgba(0, 113, 227, 0.14);
outline: 1px solid rgba(0, 113, 227, 0.35);
}
.edtd-code .cm-nonmatchingBracket {
background: rgba(178, 106, 0, 0.16);
}
/* The search panel. CodeMirror gives it a plain grey bar; this only ties it to
the editor's own type scale so it does not read as a foreign widget. */
.edtd-code .cm-panels {
border-color: var(--edt-line);
background: var(--edt-surface-solid);
color: var(--edt-ink-2);
font-size: 0.76rem;
}
.edtd-code .cm-panel input,
.edtd-code .cm-panel button {
font: inherit;
}
/* A body the panel cannot edit is still readable, and it should look it. */
.edtd-code .cm-editor:not(.cm-focused) .cm-cursor {
visibility: hidden;
}