Custom rules too.

thesoftwarephilosopher · Aug 22, 2024 · 98a3dea · 98a3dea
1 parent 34e7ccc
commit 98a3dea
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 13 deletions.
diff --git a/site/load-samples.tsx b/site/load-samples.tsx
@@ -1,7 +1,7 @@
 import monaco from '@imlib/monaco-esm';
 import type monacoTypes from 'monaco-editor';
 import { setupTheme } from './theme.js';
-import { tokenProvider } from './token-provider.js';
+import { rules, tokenProvider } from './token-provider.js';
 import { Mod, modules } from './vanillajsx/compiler.js';
 
 monaco.languages.typescript.typescriptDefaults.addExtraLib(jsxlib(), `ts:filename/jsx.d.ts`);
@@ -10,7 +10,7 @@ monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
   target: monaco.languages.typescript.ScriptTarget.ESNext,
 });
 
-setupTheme();
+setupTheme(rules);
 
 monaco.languages.setMonarchTokensProvider('typescript', tokenProvider as monacoTypes.languages.IMonarchLanguage);
 

diff --git a/site/monarch/monarch-playground.tsx b/site/monarch/monarch-playground.tsx
@@ -1,7 +1,8 @@
 import monaco from '@imlib/monaco-esm';
 import { setupTheme } from '../theme.js';
+import { rules } from '../token-provider.js';
 
-setupTheme();
+setupTheme(rules);
 
 // monaco.languages.typescript.typescriptDefaults.addExtraLib(jsxlib(), `ts:filename/jsx.d.ts`);
 monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
@@ -50,8 +51,8 @@ const editor2 = monaco.editor.create(editorContainer2, {
   tabSize: 2,
 });
 
-editor1.layout({ width: 700, height: 900 });
-editor2.layout({ width: 700, height: 900 });
+editor1.layout({ width: 700, height: 1250 });
+editor2.layout({ width: 700, height: 1250 });
 
 updateTokenProvider();
 editor1.onDidChangeModelContent(updateTokenProvider);
@@ -62,5 +63,7 @@ async function updateTokenProvider() {
   const url = URL.createObjectURL(blob);
   const mod = await import(url);
   URL.revokeObjectURL(url);
+
   monaco.languages.setMonarchTokensProvider('typescript', mod.tokenProvider);
+  setupTheme(mod.rules);
 }
diff --git a/site/theme.ts b/site/theme.ts
@@ -1,16 +1,11 @@
 import monaco from '@imlib/monaco-esm';
+import monacoTypes from 'monaco-editor';
 
-export function setupTheme() {
+export function setupTheme(rules: monacoTypes.editor.ITokenThemeRule[]) {
   monaco.editor.defineTheme('vsc2', {
     base: 'vs-dark',
     inherit: true,
-    rules: [
-      // { token: "identifier.ts", foreground: "9CDCFE" },
-      { token: "property.ts", foreground: "9CDCFE" },
-      { token: "function.ts", foreground: "DCDCAA" },
-      { token: "method.ts", foreground: "DCDCAA" },
-      // { token: "delimiter.ts", foreground: "569CD6" },
-    ],
+    rules: rules,
     colors: {
       "editor.background": '#1b1f25',
     },

diff --git a/site/token-provider.ts b/site/token-provider.ts
@@ -2,6 +2,14 @@
 // vs-dark monaco: https://github.com/microsoft/vscode/blob/main/src/vs/editor/standalone/common/themes.ts#L82
 // dark-plus vscode: https://github.com/microsoft/vscode/blob/main/extensions/theme-defaults/themes/dark_plus.json
 
+export const rules = [
+  // { token: "identifier.ts", foreground: "9CDCFE" },
+  { token: "property.ts", foreground: "9CDCFE" },
+  { token: "function.ts", foreground: "DCDCAA" },
+  { token: "method.ts", foreground: "DCDCAA" },
+  { token: "delimiter.ts", foreground: "569CD6" },
+];
+
 export const tokenProvider = {
 
   defaultToken: 'invalid',