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