107 lines
3.7 KiB
JavaScript
107 lines
3.7 KiB
JavaScript
// CodeMirror 6 bundle entry point.
|
|
//
|
|
// Imports only the CM packages the editor needs (keep the bundle small for the
|
|
// mobile/VPN path) and exposes them on window.CM for the global-style editor
|
|
// scripts. The editor theme and markdown highlight palette draw from the app's
|
|
// :root CSS variables so there are no hardcoded colors/spacing here.
|
|
import { EditorState, EditorSelection, Compartment, Prec } from "@codemirror/state";
|
|
import { EditorView, keymap, drawSelection } from "@codemirror/view";
|
|
import { history, historyKeymap, defaultKeymap, indentWithTab, undo, redo } from "@codemirror/commands";
|
|
import { markdown, markdownLanguage, markdownKeymap } from "@codemirror/lang-markdown";
|
|
import { syntaxHighlighting, HighlightStyle, indentOnInput } from "@codemirror/language";
|
|
import {
|
|
autocompletion,
|
|
closeBrackets,
|
|
closeBracketsKeymap,
|
|
completionKeymap,
|
|
startCompletion,
|
|
} from "@codemirror/autocomplete";
|
|
import { tags } from "@lezer/highlight";
|
|
|
|
// Editor chrome. Colors/spacing/fonts come from :root variables; var() works
|
|
// here because HighlightStyle/theme emit real CSS rules.
|
|
const theme = EditorView.theme(
|
|
{
|
|
"&": {
|
|
backgroundColor: "var(--bg)",
|
|
color: "var(--text)",
|
|
fontSize: "0.9rem",
|
|
border: "var(--border)",
|
|
borderTop: "none",
|
|
},
|
|
"&.cm-focused": { outline: "none" },
|
|
".cm-scroller": {
|
|
fontFamily: '"Iosevka Slab", monospace',
|
|
lineHeight: "1.6",
|
|
minHeight: "60vh",
|
|
},
|
|
".cm-content": {
|
|
padding: "var(--space-4)",
|
|
caretColor: "var(--text)",
|
|
},
|
|
".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--text)" },
|
|
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
|
|
{ backgroundColor: "var(--bg-panel-hover)" },
|
|
".cm-activeLine": { backgroundColor: "transparent" },
|
|
".cm-tooltip": {
|
|
backgroundColor: "var(--bg-panel)",
|
|
border: "var(--border-dashed)",
|
|
color: "var(--text)",
|
|
},
|
|
".cm-tooltip.cm-tooltip-autocomplete > ul": {
|
|
fontFamily: '"Iosevka Slab", monospace',
|
|
fontSize: "var(--font-sm)",
|
|
},
|
|
".cm-tooltip-autocomplete ul li[aria-selected]": {
|
|
backgroundColor: "var(--bg-panel-hover)",
|
|
color: "var(--text)",
|
|
},
|
|
".cm-completionDetail": {
|
|
color: "var(--text-muted)",
|
|
fontStyle: "normal",
|
|
marginLeft: "var(--space-3)",
|
|
},
|
|
},
|
|
{ dark: true }
|
|
);
|
|
|
|
const highlightStyle = HighlightStyle.define([
|
|
{ tag: [tags.heading1, tags.heading2, tags.heading3, tags.heading4, tags.heading5, tags.heading6], color: "var(--secondary)", fontWeight: "bold" },
|
|
{ tag: tags.strong, fontWeight: "bold", color: "var(--text)" },
|
|
{ tag: tags.emphasis, fontStyle: "italic" },
|
|
{ tag: tags.strikethrough, textDecoration: "line-through" },
|
|
{ tag: [tags.link, tags.url], color: "var(--link)" },
|
|
{ tag: tags.monospace, color: "var(--primary-hover)" },
|
|
{ tag: tags.quote, color: "var(--text-muted)", fontStyle: "italic" },
|
|
{ tag: [tags.list, tags.contentSeparator], color: "var(--secondary)" },
|
|
{ tag: [tags.processingInstruction, tags.meta], color: "var(--text-muted)" },
|
|
]);
|
|
|
|
window.CM = {
|
|
EditorState,
|
|
EditorSelection,
|
|
Compartment,
|
|
Prec,
|
|
EditorView,
|
|
keymap,
|
|
drawSelection,
|
|
history,
|
|
historyKeymap,
|
|
defaultKeymap,
|
|
indentWithTab,
|
|
undo,
|
|
redo,
|
|
markdown,
|
|
markdownLanguage,
|
|
markdownKeymap,
|
|
syntaxHighlighting,
|
|
indentOnInput,
|
|
autocompletion,
|
|
closeBrackets,
|
|
closeBracketsKeymap,
|
|
completionKeymap,
|
|
startCompletion,
|
|
theme,
|
|
highlightStyle,
|
|
};
|