fixing more highligting issues

This commit is contained in:
2023-12-20 14:48:49 +01:00
parent fd634ee85f
commit d4fed334ab
2 changed files with 53 additions and 31 deletions

View File

@ -123,7 +123,7 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
".cm-foldPlaceholder": { ".cm-foldPlaceholder": {
border: "none", border: "none",
color: `${blue}`, color: `${brightwhite}`,
}, },
".cm-tooltip": { ".cm-tooltip": {
border: "none", border: "none",
@ -137,7 +137,7 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
".cm-tooltip-autocomplete": { ".cm-tooltip-autocomplete": {
"& > ul > li[aria-selected]": { "& > ul > li[aria-selected]": {
backgroundColor: background, backgroundColor: background,
color: background, color: brightwhite,
}, },
}, },
}, },
@ -201,39 +201,57 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
tag: [t.contentSeparator], tag: [t.contentSeparator],
color: green, color: green,
}, },
{ tag: t.invalid, color: red, borderBottom: `1px dotted ${red}` }, {
tag: [t.content],
color: brightwhite
},
{
tag: t.invalid,
color: red,
borderBottom: `1px dotted ${red}`
},
{
tag: t.null,
color: brightwhite,
}
]); ]);
return [ toposTheme, syntaxHighlighting(toposHighlightStyle), return [ toposTheme, syntaxHighlighting(toposHighlightStyle),
] ]
} }
// const debugTheme = EditorView.theme({ const debugTheme = EditorView.theme({
// ".cm-line span": { ".cm-line span": {
// position: "relative", position: "relative",
// }, },
// ".cm-line span:hover::after": { ".cm-line span:hover::after": {
// position: "absolute", position: "absolute",
// bottom: "100%", bottom: "100%",
// left: 0, left: 0,
// background: "black", background: "black",
// color: "white", color: "white",
// border: "solid 2px", border: "solid 2px",
// borderRadius: "5px", borderRadius: "5px",
// content: "var(--tags)", content: "var(--tags)",
// width: `max-content`, width: `max-content`,
// padding: "1px 4px", padding: "1px 4px",
// zIndex: 10, zIndex: 10,
// pointerEvents: "none", pointerEvents: "none",
// }, },
// }); });
//
// const debugHighlightStyle = HighlightStyle.define( const debugHighlightStyle = HighlightStyle.define(
// // @ts-ignore // @ts-ignore
// Object.entries(t).map(([key, value]) => { Object.entries(t).map(([key, value]) => {
// return { tag: value, "--tags": `"tag.${key}"` }; return { tag: value, "--tags": `"tag.${key}"` };
// }) })
// ); );
// const debug = [debugTheme, syntaxHighlighting(debugHighlightStyle)]; const debug = [debugTheme, syntaxHighlighting(debugHighlightStyle)];
export const switchToDebugTheme = (app: Editor) => {
app.view.dispatch({
effects: app.themeCompartment.reconfigure(debug),
});
}
export const jsCompletions = javascriptLanguage.data.of({ export const jsCompletions = javascriptLanguage.data.of({

View File

@ -5,7 +5,7 @@ import { javascript } from "@codemirror/lang-javascript";
import { markdown } from "@codemirror/lang-markdown"; import { markdown } from "@codemirror/lang-markdown";
import { Extension } from "@codemirror/state"; import { Extension } from "@codemirror/state";
import { outputSocket } from "./IO/OSC"; import { outputSocket } from "./IO/OSC";
import { getCodeMirrorTheme } from "./EditorSetup"; import { getCodeMirrorTheme, switchToDebugTheme } from "./EditorSetup";
import { import {
initializeSelectedUniverse, initializeSelectedUniverse,
AppSettings, AppSettings,
@ -629,6 +629,10 @@ export class Editor {
readTheme(theme_name: string): void { readTheme(theme_name: string): void {
// Check if the theme exists in colors.json // Check if the theme exists in colors.json
if (theme_name == "debug") {
switchToDebugTheme(this);
return
}
let themes: Record<string, { [key: string]: any }> = colors; let themes: Record<string, { [key: string]: any }> = colors;
let selected_theme = themes[theme_name]; let selected_theme = themes[theme_name];
if (selected_theme) { if (selected_theme) {