components/markdown-editor/markdown-editor.view.ts

Functions

Imports

It imports components/markdown-editor/markdown-editor.ts. Imported by components/markdown-editor/markdown-editor.ts.

Source

1// The CodeMirror half of the markdown editor. Only this file imports CodeMirror, and only
2// markdown-editor.ts's dynamic import() reaches it, so the editor stays its own chunk and a
3// bundle that never mounts one never carries it. It exposes a small `Surface` and nothing of
4// CodeMirror's own types, so the chrome (toolbar, link palette, slash menu, image prompt)
5// stays plain DOM in markdown-editor.ts.
6//
7// CodeMirror writes its styles into the page unlayered, and an unlayered rule beats a
8// `@layer cap.components` one. So the theme for CodeMirror's own parts is written through its
9// theme API below, from Capsomer's tokens only; everything else is in markdown-editor.css.
10import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
11import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
12import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
13import { Compartment, EditorState } from "@codemirror/state";
14import { EditorView, ViewPlugin, keymap, lineNumbers, placeholder as cmPlaceholder } from "@codemirror/view";
15import { tags } from "@lezer/highlight";
16
17import type { Edit } from "./markdown-editor.ts";
18
19// A scroller that overflows must be reachable by keyboard (WCAG 2.1.1, axe's
20// scrollable-region-focusable): it takes tabindex="0" while it overflows and gives CodeMirror's
21// own -1 back when it does not, as the dialog body does. The text inside is focusable too, so a
22// keyboard user meets the scroller first (arrow keys scroll it), then the text.
23function syncScroller(view: EditorView): void {
24  const sc = view.scrollDOM;
25  const over = sc.scrollHeight > sc.clientHeight + 1;
26  if (over && sc.getAttribute("tabindex") !== "0") sc.tabIndex = 0;
27  else if (!over && sc.getAttribute("tabindex") === "0") sc.tabIndex = -1;
28}
29
30const scrollerStop = ViewPlugin.fromClass(
31  class {
32    private readonly observer: ResizeObserver | null;
33    constructor(readonly view: EditorView) {
34      this.observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => syncScroller(view));
35      this.observer?.observe(view.scrollDOM);
36      this.observer?.observe(view.contentDOM);
37      queueMicrotask(() => syncScroller(view));
38    }
39    update(u: { docChanged: boolean; geometryChanged: boolean; viewportChanged: boolean }) {
40      if (u.docChanged || u.geometryChanged || u.viewportChanged) queueMicrotask(() => syncScroller(this.view));
41    }
42    destroy() {
43      this.observer?.disconnect();
44    }
45  },
46);
47
48export type KeyName = "bold" | "italic" | "link" | "code" | "save" | "escape" | "down";
49
50export interface SurfaceConfig {
51  parent: HTMLElement;
52  doc: string;
53  placeholder: string;
54  nonce: string;
55  lineNumbers: boolean;
56  readOnly: boolean;
57  disabled: boolean;
58  // Attributes on the editable element: its name, aria-invalid, aria-describedby, and so on.
59  attrs: Record<string, string>;
60  onDocChange(value: string): void;
61  onCaret(): void;
62  // Return true when the key was used, so CodeMirror does nothing more with it.
63  onKey(name: KeyName): boolean;
64  // Return true to take a dropped or pasted image file.
65  onFile(file: File): boolean;
66}
67
68export interface Caret {
69  head: number;
70  lineFrom: number;
71  lineTo: number;
72  lineText: string;
73}
74
75export interface Surface {
76  getValue(): string;
77  setValue(value: string): void;
78  focus(): void;
79  hasFocus(): boolean;
80  selection(): { from: number; to: number };
81  caret(): Caret;
82  coords(pos: number): { top: number; bottom: number; left: number } | null;
83  select(from: number, to: number): void;
84  apply(edit: Edit): void;
85  configure(c: { placeholder: string; readOnly: boolean; disabled: boolean; attrs: Record<string, string> }): void;
86  destroy(): void;
87}
88
89// Every colour, font and size is a Capsomer token, so both themes and every density follow
90// without a second copy. The focus ring sits inside the surface, which clips overflow: an
91// outside ring would be cut off (WCAG 2.4.7).
92const capTheme = EditorView.theme({
93  "&": {
94    // Colour and ground come from the frame around it (markdown-editor.css), so read-only and
95    // disabled change them there, in one place.
96    color: "inherit",
97    backgroundColor: "transparent",
98    fontSize: "var(--text-size)",
99    maxHeight: "var(--cap-md-max, min(70vh, 48rem))",
100  },
101  "&.cm-focused": {
102    outline: "var(--ring-width) solid var(--ring)",
103    outlineOffset: "calc(-1 * var(--ring-width))",
104  },
105  ".cm-scroller": {
106    overflow: "auto",
107    fontFamily: "var(--mono)",
108    lineHeight: "1.65",
109  },
110  ".cm-content": {
111    caretColor: "var(--accent)",
112    padding: "var(--pad-y) 0",
113    minHeight: "var(--cap-md-min, 16rem)",
114  },
115  ".cm-line": { padding: "0 var(--pad-x)" },
116  ".cm-gutters": {
117    backgroundColor: "var(--sunken)",
118    color: "var(--muted)",
119    border: "none",
120    borderRight: "1px solid var(--line)",
121  },
122  // The selection is the accent mixed into the surface: the pale --sel token is nearly the
123  // surface colour and would not show where the selection is.
124  "& .cm-content ::selection, & .cm-content::selection": {
125    backgroundColor: "color-mix(in srgb, var(--accent) 36%, var(--surface))",
126    color: "var(--text)",
127  },
128  ".cm-placeholder": { color: "var(--dim)" },
129});
130
131// Meaning is never colour alone: headings and strong are bold, emphasis is italic, links are
132// underlined, quotes are italic. Each colour is a token chosen to reach 4.5:1 on --surface.
133const capHighlight = HighlightStyle.define([
134  { tag: tags.heading, color: "var(--text)", fontWeight: "700" },
135  { tag: tags.strong, color: "var(--text)", fontWeight: "700" },
136  { tag: tags.emphasis, color: "var(--text)", fontStyle: "italic" },
137  { tag: tags.link, color: "var(--accent-text)", textDecoration: "underline" },
138  { tag: tags.url, color: "var(--accent-text)" },
139  { tag: tags.monospace, color: "var(--info)" },
140  { tag: tags.quote, color: "var(--muted)", fontStyle: "italic" },
141  { tag: tags.list, color: "var(--muted)" },
142  { tag: tags.meta, color: "var(--muted)" },
143  { tag: tags.processingInstruction, color: "var(--muted)" },
144  { tag: tags.contentSeparator, color: "var(--muted)" },
145  { tag: tags.strikethrough, color: "var(--muted)", textDecoration: "line-through" },
146]);
147
148export function createSurface(cfg: SurfaceConfig): Surface {
149  const attrsSlot = new Compartment();
150  const editableSlot = new Compartment();
151  const placeholderSlot = new Compartment();
152
153  const attrExt = (attrs: Record<string, string>) =>
154    EditorView.contentAttributes.of({ role: "textbox", "aria-multiline": "true", spellcheck: "true", ...attrs });
155  const editableExt = (readOnly: boolean, disabled: boolean) => [
156    EditorView.editable.of(!disabled),
157    EditorState.readOnly.of(readOnly || disabled),
158  ];
159
160  const view: EditorView = new EditorView({
161    parent: cfg.parent,
162    state: EditorState.create({
163      doc: cfg.doc,
164      extensions: [
165        // Without the nonce a strict style-src drops every style CodeMirror injects.
166        EditorView.cspNonce.of(cfg.nonce),
167        history(),
168        markdown({ base: markdownLanguage }),
169        syntaxHighlighting(capHighlight),
170        capTheme,
171        scrollerStop,
172        EditorView.lineWrapping,
173        cfg.lineNumbers ? lineNumbers() : [],
174        attrsSlot.of(attrExt(cfg.attrs)),
175        editableSlot.of(editableExt(cfg.readOnly, cfg.disabled)),
176        placeholderSlot.of(cmPlaceholder(cfg.placeholder)),
177        EditorView.updateListener.of((u) => {
178          if (u.docChanged) cfg.onDocChange(u.state.doc.toString());
179          if (u.docChanged || u.selectionSet) cfg.onCaret();
180        }),
181        EditorView.domEventHandlers({
182          paste(event) {
183            const item = [...(event.clipboardData?.items ?? [])].find((i) => i.type.startsWith("image/"));
184            const file = item?.getAsFile();
185            if (!file || !cfg.onFile(file)) return false;
186            event.preventDefault();
187            return true;
188          },
189          drop(event) {
190            const file = [...(event.dataTransfer?.files ?? [])].find((f) => f.type.startsWith("image/"));
191            if (!file || !cfg.onFile(file)) return false;
192            event.preventDefault();
193            return true;
194          },
195        }),
196        // Tab is not bound: it leaves the editor, so the surface is no keyboard trap (WCAG 2.1.2).
197        keymap.of([
198          { key: "Mod-b", run: () => cfg.onKey("bold"), preventDefault: true },
199          { key: "Mod-i", run: () => cfg.onKey("italic"), preventDefault: true },
200          { key: "Mod-k", run: () => cfg.onKey("link"), preventDefault: true },
201          { key: "Mod-e", run: () => cfg.onKey("code"), preventDefault: true },
202          { key: "Mod-s", run: () => cfg.onKey("save"), preventDefault: true },
203          { key: "Escape", run: () => cfg.onKey("escape") },
204          { key: "ArrowDown", run: () => cfg.onKey("down") },
205          ...historyKeymap,
206          ...defaultKeymap,
207        ]),
208      ],
209    }),
210  });
211
212  return {
213    getValue: () => view.state.doc.toString(),
214    setValue(value) {
215      const current = view.state.doc.toString();
216      if (current === value) return;
217      view.dispatch({ changes: { from: 0, to: current.length, insert: value } });
218    },
219    focus: () => view.focus(),
220    hasFocus: () => view.hasFocus,
221    selection() {
222      const { from, to } = view.state.selection.main;
223      return { from, to };
224    },
225    caret() {
226      const head = view.state.selection.main.head;
227      const line = view.state.doc.lineAt(head);
228      return { head, lineFrom: line.from, lineTo: line.to, lineText: line.text };
229    },
230    coords(pos) {
231      const c = view.coordsAtPos(pos);
232      return c ? { top: c.top, bottom: c.bottom, left: c.left } : null;
233    },
234    select(from, to) {
235      view.dispatch({ selection: { anchor: from, head: to } });
236    },
237    apply(edit) {
238      view.dispatch({
239        changes: edit.changes,
240        selection: { anchor: edit.anchor, head: edit.head ?? edit.anchor },
241        scrollIntoView: true,
242        userEvent: "input",
243      });
244      view.focus();
245    },
246    configure(c) {
247      view.dispatch({
248        effects: [
249          attrsSlot.reconfigure(attrExt(c.attrs)),
250          editableSlot.reconfigure(editableExt(c.readOnly, c.disabled)),
251          placeholderSlot.reconfigure(cmPlaceholder(c.placeholder)),
252        ],
253      });
254    },
255    destroy: () => view.destroy(),
256  };
257}