111 lines
2.2 KiB
TypeScript
111 lines
2.2 KiB
TypeScript
import { EditorView } from "@codemirror/view"
|
|
import { Extension } from "@codemirror/state"
|
|
import {
|
|
HighlightStyle,
|
|
TagStyle,
|
|
syntaxHighlighting,
|
|
} from "@codemirror/language"
|
|
|
|
interface Options {
|
|
/**
|
|
* Theme variant. Determines which styles CodeMirror will apply by default.
|
|
*/
|
|
variant: Variant
|
|
|
|
/**
|
|
* Settings to customize the look of the editor, like background, gutter, selection and others.
|
|
*/
|
|
settings: Settings
|
|
|
|
/**
|
|
* Syntax highlighting styles.
|
|
*/
|
|
styles: TagStyle[]
|
|
}
|
|
|
|
type Variant = "light" | "dark"
|
|
|
|
interface Settings {
|
|
/**
|
|
* Editor background.
|
|
*/
|
|
background: string
|
|
|
|
/**
|
|
* Default text color.
|
|
*/
|
|
foreground: string
|
|
|
|
/**
|
|
* Caret color.
|
|
*/
|
|
caret: string
|
|
|
|
/**
|
|
* Selection background.
|
|
*/
|
|
selection: string
|
|
|
|
/**
|
|
* Background of highlighted lines.
|
|
*/
|
|
lineHighlight: string
|
|
|
|
/**
|
|
* Gutter background.
|
|
*/
|
|
gutterBackground: string
|
|
|
|
/**
|
|
* Text color inside gutter.
|
|
*/
|
|
gutterForeground: string
|
|
|
|
gutterBorderRight: string
|
|
}
|
|
|
|
export const createTheme = ({
|
|
variant,
|
|
settings,
|
|
styles,
|
|
}: Options): Extension => {
|
|
const theme = EditorView.theme(
|
|
{
|
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
"&": {
|
|
backgroundColor: settings.background,
|
|
color: settings.foreground,
|
|
},
|
|
".cm-content": {
|
|
caretColor: settings.caret,
|
|
},
|
|
".cm-cursor, .cm-dropCursor": {
|
|
borderLeftColor: settings.caret,
|
|
},
|
|
"&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection":
|
|
{
|
|
backgroundColor: settings.selection,
|
|
},
|
|
".cm-activeLine": {
|
|
backgroundColor: settings.lineHighlight,
|
|
},
|
|
".cm-gutters": {
|
|
backgroundColor: settings.gutterBackground,
|
|
borderRight: settings.gutterBorderRight,
|
|
color: settings.gutterForeground,
|
|
},
|
|
".cm-activeLineGutter": {
|
|
backgroundColor: settings.lineHighlight,
|
|
},
|
|
},
|
|
{
|
|
dark: variant === "dark",
|
|
},
|
|
)
|
|
|
|
const highlightStyle = HighlightStyle.define(styles)
|
|
const extension = [theme, syntaxHighlighting(highlightStyle)]
|
|
|
|
return extension
|
|
}
|