BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix error: chars in editor could end up without any color

Browse Source
This commit is contained in:
Raphaël Forment
2024-01-15 22:44:04 +01:00
parent 6dfbdbb6d4
commit 3314c089ed
1 changed files with 108 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/EditorSetup.ts
View File

@ -35,7 +35,7 @@ import { inlineHoveringTips } from "./documentation/inlineHelp";
import { toposCompletions, soundCompletions } from "./documentation/inlineHelp"; import { toposCompletions, soundCompletions } from "./documentation/inlineHelp";
import { javascriptLanguage } from "@codemirror/lang-javascript"; import { javascriptLanguage } from "@codemirror/lang-javascript";
export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension => { export const getCodeMirrorTheme = (theme: { [key: string]: string }): Extension => {
// @ts-ignore // @ts-ignore
const black = theme["black"], const black = theme["black"],
red = theme["red"], red = theme["red"],
@ -64,10 +64,9 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
cursor = theme["cursor"], cursor = theme["cursor"],
foreground = theme["foreground"], foreground = theme["foreground"],
selection_background = theme["selection_background"]; selection_background = theme["selection_background"];
const toposTheme = EditorView.theme( { const toposTheme = EditorView.theme({
"&": { "&": {
color: background, color: background,
// backgroundColor: background,
backgroundColor: "transparent", backgroundColor: "transparent",
fontSize: "24px", fontSize: "24px",
fontFamily: "IBM Plex Mono", fontFamily: "IBM Plex Mono",
@ -76,6 +75,9 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
caretColor: cursor, caretColor: cursor,
fontFamily: "IBM Plex Mono", fontFamily: "IBM Plex Mono",
}, },
".cm-line": {
color: `${brightwhite}`,
},
".cm-cursor, .cm-dropCursor": { ".cm-cursor, .cm-dropCursor": {
borderLeftColor: cursor, borderLeftColor: cursor,
}, },
@ -98,14 +100,14 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
backgroundColor: red, backgroundColor: red,
}, },
".cm-activeLine": { ".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)`, 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": { ".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)`, 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}`, outline: `1px solid ${brightwhite}`,
}, },
"&.cm-focused .cm-matchingBracket": { "&.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)`, 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": { "&.cm-focused .cm-nonmatchingBracket": {
color: yellow, color: yellow,
@ -192,7 +194,7 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
tag: [t.heading5, t.heading6], tag: [t.heading5, t.heading6],
color: red, color: red,
}, },
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: green}, { tag: [t.atom, t.bool, t.special(t.variableName)], color: green },
{ {
tag: [t.processingInstruction, t.inserted], tag: [t.processingInstruction, t.inserted],
color: green, color: green,
@ -215,8 +217,8 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
color: brightwhite, color: brightwhite,
} }
]); ]);
return [ toposTheme, syntaxHighlighting(toposHighlightStyle), return [toposTheme, syntaxHighlighting(toposHighlightStyle),
] ]
} }
const debugTheme = EditorView.theme({ const debugTheme = EditorView.theme({