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

206
src/EditorSetup.ts
View File

@ -35,112 +35,114 @@ 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"],
green = theme["green"], green = theme["green"],
yellow = theme["yellow"], yellow = theme["yellow"],
blue = theme["blue"], blue = theme["blue"],
magenta = theme["magenta"], magenta = theme["magenta"],
cyan = theme["cyan"], cyan = theme["cyan"],
white = theme["white"], white = theme["white"],
// @ts-ignore // @ts-ignore
brightblack = theme["brightblack"], brightblack = theme["brightblack"],
// @ts-ignore // @ts-ignore
brightred = theme["brightred"], brightred = theme["brightred"],
brightgreen = theme["brightgreen"], brightgreen = theme["brightgreen"],
// @ts-ignore // @ts-ignore
brightyellow = theme["brightyellow"], brightyellow = theme["brightyellow"],
// @ts-ignore // @ts-ignore
brightblue = theme["brightblue"], brightblue = theme["brightblue"],
// @ts-ignore // @ts-ignore
brightmagenta = theme["brightmagenta"], brightmagenta = theme["brightmagenta"],
// @ts-ignore // @ts-ignore
brightcyan = theme["brightcyan"], brightcyan = theme["brightcyan"],
brightwhite = theme["brightwhite"], brightwhite = theme["brightwhite"],
background = theme["background"], background = theme["background"],
selection_foreground = theme["selection_foreground"], selection_foreground = theme["selection_foreground"],
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", },
}, ".cm-content": {
".cm-content": { caretColor: cursor,
caretColor: cursor, fontFamily: "IBM Plex Mono",
fontFamily: "IBM Plex Mono", },
}, ".cm-line": {
".cm-cursor, .cm-dropCursor": { color: `${brightwhite}`,
borderLeftColor: cursor, },
}, ".cm-cursor, .cm-dropCursor": {
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": borderLeftColor: cursor,
{ },
backgroundColor: brightwhite, "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
border: `1px solid ${brightwhite}`, {
}, backgroundColor: brightwhite,
".cm-panels": { border: `1px solid ${brightwhite}`,
backgroundColor: selection_background, },
color: red, ".cm-panels": {
}, backgroundColor: selection_background,
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" }, color: red,
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" }, },
".cm-search.cm-panel": { backgroundColor: "transparent" }, ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
".cm-searchMatch": { ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
outline: `1px solid ${magenta}`, ".cm-search.cm-panel": { backgroundColor: "transparent" },
}, ".cm-searchMatch": {
".cm-searchMatch.cm-searchMatch-selected": { outline: `1px solid ${magenta}`,
backgroundColor: red, },
}, ".cm-searchMatch.cm-searchMatch-selected": {
".cm-activeLine": { backgroundColor: red,
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-activeLine": {
".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-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)`,
"&.cm-focused .cm-matchingBracket": { outline: `1px solid ${brightwhite}`,
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-matchingBracket": {
"&.cm-focused .cm-nonmatchingBracket": { 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: yellow, },
}, "&.cm-focused .cm-nonmatchingBracket": {
color: yellow,
},
".cm-gutters": { ".cm-gutters": {
//backgroundColor: base00, //backgroundColor: base00,
backgroundColor: "transparent", backgroundColor: "transparent",
color: foreground, color: foreground,
}, },
".cm-activeLineGutter": { ".cm-activeLineGutter": {
backgroundColor: selection_background, backgroundColor: selection_background,
color: selection_foreground, color: selection_foreground,
}, },
".cm-foldPlaceholder": { ".cm-foldPlaceholder": {
border: "none", border: "none",
color: `${brightwhite}`, color: `${brightwhite}`,
}, },
".cm-tooltip": { ".cm-tooltip": {
border: "none", 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, backgroundColor: background,
}, color: brightwhite,
".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 }, { dark: true },
); );
@ -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({