Moving more files around
This commit is contained in:
370
src/Editor/EditorSetup.ts
Normal file
370
src/Editor/EditorSetup.ts
Normal file
@ -0,0 +1,370 @@
|
||||
import { Prec } from "@codemirror/state";
|
||||
import { indentWithTab } from "@codemirror/commands";
|
||||
import { tags as t } from "@lezer/highlight";
|
||||
import {
|
||||
keymap,
|
||||
lineNumbers,
|
||||
highlightSpecialChars,
|
||||
drawSelection,
|
||||
highlightActiveLine,
|
||||
dropCursor,
|
||||
highlightActiveLineGutter,
|
||||
} from "@codemirror/view";
|
||||
import { Extension, EditorState } from "@codemirror/state";
|
||||
import { vim } from "@replit/codemirror-vim";
|
||||
import {
|
||||
defaultHighlightStyle,
|
||||
syntaxHighlighting,
|
||||
indentOnInput,
|
||||
bracketMatching,
|
||||
HighlightStyle,
|
||||
} from "@codemirror/language";
|
||||
import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
|
||||
import { highlightSelectionMatches } from "@codemirror/search";
|
||||
import {
|
||||
autocompletion,
|
||||
closeBrackets,
|
||||
closeBracketsKeymap,
|
||||
} from "@codemirror/autocomplete";
|
||||
import { lintKeymap } from "@codemirror/lint";
|
||||
import { Compartment } from "@codemirror/state";
|
||||
import { Editor } from "../main";
|
||||
import { EditorView } from "codemirror";
|
||||
import { javascript } from "@codemirror/lang-javascript";
|
||||
import { inlineHoveringTips, toposCompletions, soundCompletions } from "../documentation/inlineHelp";
|
||||
import { javascriptLanguage } from "@codemirror/lang-javascript";
|
||||
|
||||
export const getCodeMirrorTheme = (theme: { [key: string]: string }): Extension => {
|
||||
// @ts-ignore
|
||||
const black = theme["black"],
|
||||
red = theme["red"],
|
||||
green = theme["green"],
|
||||
yellow = theme["yellow"],
|
||||
blue = theme["blue"],
|
||||
magenta = theme["magenta"],
|
||||
cyan = theme["cyan"],
|
||||
white = theme["white"],
|
||||
// @ts-ignore
|
||||
brightblack = theme["brightblack"],
|
||||
// @ts-ignore
|
||||
brightred = theme["brightred"],
|
||||
brightgreen = theme["brightgreen"],
|
||||
// @ts-ignore
|
||||
brightyellow = theme["brightyellow"],
|
||||
// @ts-ignore
|
||||
brightblue = theme["brightblue"],
|
||||
// @ts-ignore
|
||||
brightmagenta = theme["brightmagenta"],
|
||||
// @ts-ignore
|
||||
brightcyan = theme["brightcyan"],
|
||||
brightwhite = theme["brightwhite"],
|
||||
background = theme["background"],
|
||||
selection_foreground = theme["selection_foreground"],
|
||||
cursor = theme["cursor"],
|
||||
foreground = theme["foreground"],
|
||||
selection_background = theme["selection_background"];
|
||||
const toposTheme = EditorView.theme({
|
||||
"&": {
|
||||
color: background,
|
||||
backgroundColor: "transparent",
|
||||
fontSize: "24px",
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-content": {
|
||||
caretColor: cursor,
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-line": {
|
||||
color: `${brightwhite}`,
|
||||
},
|
||||
".cm-cursor, .cm-dropCursor": {
|
||||
borderLeftColor: cursor,
|
||||
},
|
||||
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
|
||||
{
|
||||
backgroundColor: brightwhite,
|
||||
border: `1px solid ${brightwhite}`,
|
||||
},
|
||||
".cm-panels": {
|
||||
backgroundColor: selection_background,
|
||||
color: red,
|
||||
},
|
||||
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
|
||||
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
|
||||
".cm-search.cm-panel": { backgroundColor: "transparent" },
|
||||
".cm-searchMatch": {
|
||||
outline: `1px solid ${magenta}`,
|
||||
},
|
||||
".cm-searchMatch.cm-searchMatch-selected": {
|
||||
backgroundColor: red,
|
||||
},
|
||||
".cm-activeLine": {
|
||||
backgroundColor: `rgba(${(parseInt(selection_background.slice(1, 3), 16))}, ${(parseInt(selection_background.slice(3, 5), 16))}, ${(parseInt(selection_background.slice(5, 7), 16))}, 0.25)`,
|
||||
},
|
||||
".cm-selectionMatch": {
|
||||
backgroundColor: `rgba(${(parseInt(selection_background.slice(1, 3), 16))}, ${(parseInt(selection_background.slice(3, 5), 16))}, ${(parseInt(selection_background.slice(5, 7), 16))}, 0.25)`,
|
||||
outline: `1px solid ${brightwhite}`,
|
||||
},
|
||||
"&.cm-focused .cm-matchingBracket": {
|
||||
color: `rgba(${(parseInt(selection_background.slice(1, 3), 16))}, ${(parseInt(selection_background.slice(3, 5), 16))}, ${(parseInt(selection_background.slice(5, 7), 16))}, 0.25)`,
|
||||
},
|
||||
"&.cm-focused .cm-nonmatchingBracket": {
|
||||
color: yellow,
|
||||
},
|
||||
|
||||
".cm-gutters": {
|
||||
//backgroundColor: base00,
|
||||
backgroundColor: "transparent",
|
||||
color: foreground,
|
||||
},
|
||||
".cm-activeLineGutter": {
|
||||
backgroundColor: selection_background,
|
||||
color: selection_foreground,
|
||||
},
|
||||
|
||||
".cm-foldPlaceholder": {
|
||||
border: "none",
|
||||
color: `${brightwhite}`,
|
||||
},
|
||||
".cm-tooltip": {
|
||||
border: "none",
|
||||
backgroundColor: background,
|
||||
},
|
||||
".cm-tooltip .cm-tooltip-arrow:before": {},
|
||||
".cm-tooltip .cm-tooltip-arrow:after": {
|
||||
borderTopColor: background,
|
||||
borderBottomColor: background,
|
||||
},
|
||||
".cm-tooltip-autocomplete": {
|
||||
"& > ul > li[aria-selected]": {
|
||||
backgroundColor: background,
|
||||
color: brightwhite,
|
||||
},
|
||||
},
|
||||
},
|
||||
{ dark: true },
|
||||
);
|
||||
|
||||
let toposHighlightStyle = HighlightStyle.define([
|
||||
{ tag: t.paren, color: brightwhite },
|
||||
{ tag: [t.propertyName, t.punctuation, t.variableName], color: brightwhite },
|
||||
{ tag: t.keyword, color: yellow },
|
||||
{ tag: [t.name, t.deleted, t.character, t.macroName], color: red, },
|
||||
{ tag: [t.function(t.variableName)], color: blue },
|
||||
{ tag: [t.labelName], color: brightwhite },
|
||||
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: cyan, },
|
||||
{ tag: [t.definition(t.name), t.separator], color: brightwhite },
|
||||
{ tag: [t.brace], color: white },
|
||||
{ tag: [t.annotation], color: blue, },
|
||||
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: yellow, },
|
||||
{ tag: [t.typeName, t.className], color: magenta, },
|
||||
{ tag: [t.operator, t.operatorKeyword], color: blue, },
|
||||
{ tag: [t.tagName], color: blue, },
|
||||
{ tag: [t.squareBracket], color: blue, },
|
||||
{ tag: [t.angleBracket], color: blue, },
|
||||
{ tag: [t.attributeName], color: red, },
|
||||
{ tag: [t.regexp], color: brightgreen, },
|
||||
{ tag: [t.quote], color: green, },
|
||||
{ tag: [t.string], color: green },
|
||||
{
|
||||
tag: t.link,
|
||||
color: green,
|
||||
textDecoration: "underline",
|
||||
textUnderlinePosition: "under",
|
||||
},
|
||||
{
|
||||
tag: [t.url, t.escape, t.special(t.string)],
|
||||
color: green,
|
||||
},
|
||||
{ tag: [t.meta], color: brightwhite },
|
||||
{ tag: [t.comment], color: brightwhite, fontStyle: "italic" },
|
||||
{ tag: t.monospace, color: brightwhite },
|
||||
{ tag: t.strong, fontWeight: "bold", color: white },
|
||||
{ tag: t.emphasis, fontStyle: "italic", color: white },
|
||||
{ tag: t.strikethrough, textDecoration: "line-through" },
|
||||
{ tag: t.heading, fontWeight: "bold", color: white },
|
||||
{ tag: t.heading1, fontWeight: "bold", color: white },
|
||||
{
|
||||
tag: [t.heading2, t.heading3, t.heading4],
|
||||
fontWeight: "bold",
|
||||
color: yellow,
|
||||
},
|
||||
{
|
||||
tag: [t.heading5, t.heading6],
|
||||
color: red,
|
||||
},
|
||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: green },
|
||||
{
|
||||
tag: [t.processingInstruction, t.inserted],
|
||||
color: green,
|
||||
},
|
||||
{
|
||||
tag: [t.contentSeparator],
|
||||
color: green,
|
||||
},
|
||||
{
|
||||
tag: [t.content],
|
||||
color: brightwhite
|
||||
},
|
||||
{
|
||||
tag: t.invalid,
|
||||
color: red,
|
||||
borderBottom: `1px dotted ${red}`
|
||||
},
|
||||
{
|
||||
tag: t.null,
|
||||
color: brightwhite,
|
||||
}
|
||||
]);
|
||||
return [toposTheme, syntaxHighlighting(toposHighlightStyle),
|
||||
]
|
||||
}
|
||||
|
||||
const debugTheme = EditorView.theme({
|
||||
".cm-line span": {
|
||||
position: "relative",
|
||||
},
|
||||
".cm-line span:hover::after": {
|
||||
position: "absolute",
|
||||
bottom: "100%",
|
||||
left: 0,
|
||||
background: "black",
|
||||
color: "white",
|
||||
border: "solid 2px",
|
||||
borderRadius: "5px",
|
||||
content: "var(--tags)",
|
||||
width: `max-content`,
|
||||
padding: "1px 4px",
|
||||
zIndex: 10,
|
||||
pointerEvents: "none",
|
||||
},
|
||||
});
|
||||
|
||||
const debugHighlightStyle = HighlightStyle.define(
|
||||
// @ts-ignore
|
||||
Object.entries(t).map(([key, value]) => {
|
||||
return { tag: value, "--tags": `"tag.${key}"` };
|
||||
})
|
||||
);
|
||||
const debug = [debugTheme, syntaxHighlighting(debugHighlightStyle)];
|
||||
|
||||
export const switchToDebugTheme = (app: Editor) => {
|
||||
app.view.dispatch({
|
||||
effects: app.themeCompartment.reconfigure(debug),
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export const jsCompletions = javascriptLanguage.data.of({
|
||||
autocomplete: toposCompletions,
|
||||
});
|
||||
|
||||
export const toposSoundCompletions = javascriptLanguage.data.of({
|
||||
autocomplete: soundCompletions,
|
||||
});
|
||||
|
||||
export const editorSetup: Extension = (() => [
|
||||
highlightActiveLineGutter(),
|
||||
highlightSpecialChars(),
|
||||
history(),
|
||||
drawSelection(),
|
||||
dropCursor(),
|
||||
EditorState.allowMultipleSelections.of(true),
|
||||
indentOnInput(),
|
||||
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
|
||||
bracketMatching(),
|
||||
closeBrackets(),
|
||||
autocompletion(),
|
||||
highlightActiveLine(),
|
||||
highlightSelectionMatches(),
|
||||
keymap.of([
|
||||
// ...searchKeymap,
|
||||
...closeBracketsKeymap,
|
||||
...defaultKeymap,
|
||||
...historyKeymap,
|
||||
...lintKeymap,
|
||||
]),
|
||||
])();
|
||||
|
||||
export const installEditor = (app: Editor) => {
|
||||
app.vimModeCompartment = new Compartment();
|
||||
app.hoveringCompartment = new Compartment();
|
||||
app.themeCompartment = new Compartment();
|
||||
app.completionsCompartment = new Compartment();
|
||||
app.withLineNumbers = new Compartment();
|
||||
app.chosenLanguage = new Compartment();
|
||||
app.fontSize = new Compartment();
|
||||
const vimPlugin = app.settings.vimMode ? vim() : [];
|
||||
const lines = app.settings.line_numbers ? lineNumbers() : [];
|
||||
|
||||
const fontModif = EditorView.theme({
|
||||
"&": {
|
||||
fontSize: `${app.settings.font_size}px`,
|
||||
},
|
||||
$content: {
|
||||
fontFamily: `${app.settings.font}`,
|
||||
fontSize: `${app.settings.font_size}px`,
|
||||
},
|
||||
".cm-gutters": {
|
||||
fontSize: `${app.settings.font_size}px`,
|
||||
},
|
||||
});
|
||||
|
||||
app.editorExtensions = [
|
||||
app.vimModeCompartment.of(vimPlugin),
|
||||
app.withLineNumbers.of(lines),
|
||||
app.fontSize.of(fontModif),
|
||||
app.hoveringCompartment.of(app.settings.tips ? inlineHoveringTips : []),
|
||||
app.completionsCompartment.of(
|
||||
app.settings.completions ? [jsCompletions, toposSoundCompletions] : [],
|
||||
),
|
||||
editorSetup,
|
||||
app.themeCompartment.of(
|
||||
getCodeMirrorTheme(app.getColorScheme("Batman")),
|
||||
// debug
|
||||
),
|
||||
app.chosenLanguage.of(javascript()),
|
||||
];
|
||||
app.dynamicPlugins = new Compartment();
|
||||
app.state = EditorState.create({
|
||||
extensions: [
|
||||
...app.editorExtensions,
|
||||
EditorView.lineWrapping,
|
||||
app.dynamicPlugins.of(app.userPlugins),
|
||||
Prec.highest(
|
||||
keymap.of([
|
||||
{
|
||||
key: "Ctrl-Enter",
|
||||
run: () => {
|
||||
return true;
|
||||
},
|
||||
},
|
||||
]),
|
||||
),
|
||||
keymap.of([indentWithTab]),
|
||||
],
|
||||
doc: app.universes[app.selected_universe].global.candidate,
|
||||
});
|
||||
app.view = new EditorView({
|
||||
parent: document.getElementById("editor") as HTMLElement,
|
||||
state: app.state,
|
||||
});
|
||||
|
||||
// Re-apply font size and font family change
|
||||
app.view.dispatch({
|
||||
effects: app.fontSize.reconfigure(
|
||||
EditorView.theme({
|
||||
"&": {
|
||||
fontSize: `${app.settings.font_size}px`,
|
||||
},
|
||||
$content: {
|
||||
fontFamily: `${app.settings.font}`,
|
||||
fontSize: `${app.settings.font_size}px`,
|
||||
},
|
||||
".cm-gutters": {
|
||||
fontSize: `${app.settings.font_size}px`,
|
||||
},
|
||||
}),
|
||||
),
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user