Skip to content

Commit d939f40

Browse files
shiqiWang0JackWang032
shiqiWang0
authored and
JackWang032
committed
fix(website): fix sql theme in monaco editor
1 parent 296c461 commit d939f40

5 files changed

Lines changed: 166 additions & 12 deletions

File tree

‎website/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ editor.onDidCreateEditor((editor) => {
2424
const instance = create({
2525
extensions,
2626
defaultLocale: 'zh-CN',
27-
defaultColorTheme: 'Default Dark+',
27+
defaultColorTheme: 'sql-dark',
2828
onigurumPath: '/wasm/onig.wasm'
2929
});
3030

‎website/src/components/tooltip/index.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,19 @@ const Tooltip = ({ children, values }: IProps) => {
2121
content.classList.remove('tooltip-show');
2222
});
2323
}, []);
24+
25+
const handleClick = (href: string) => {
26+
window.open(href, '_blank');
27+
};
2428
return (
2529
<div className="tooltip">
2630
<div className="tooltip-trigger">{children}</div>
2731
<ul className="tooltip-content">
2832
{values.map((item, index) => (
2933
<li key={item.href}>
30-
<a key={index} href={item.href} target="_blank" rel="noreferrer">
34+
<span key={index} onClick={() => handleClick(item.href)}>
3135
{item.title}
32-
</a>
36+
</span>
3337
<svg
3438
xmlns="http://www.w3.org/2000/svg"
3539
width="14"
@@ -38,8 +42,8 @@ const Tooltip = ({ children, values }: IProps) => {
3842
fill="none"
3943
>
4044
<path
41-
fill-rule="evenodd"
42-
clip-rule="evenodd"
45+
fillRule="evenodd"
46+
clipRule="evenodd"
4347
d="M2.84375 1.53125C2.11888 1.53125 1.53125 2.11888 1.53125 2.84375V11.1562C1.53125 11.8811 2.11888 12.4688 2.84375 12.4688H6.125C6.36662 12.4688 6.5625 12.2729 6.5625 12.0312C6.5625 11.7896 6.36662 11.5938 6.125 11.5938H2.84375C2.60213 11.5938 2.40625 11.3979 2.40625 11.1562V5.90625H11.5938V6.78125C11.5938 7.02287 11.7896 7.21875 12.0312 7.21875C12.2729 7.21875 12.4688 7.02287 12.4688 6.78125V2.84375C12.4688 2.11888 11.8811 1.53125 11.1562 1.53125H2.84375ZM11.5938 5.03125V2.84375C11.5938 2.60213 11.3979 2.40625 11.1562 2.40625H2.84375C2.60213 2.40625 2.40625 2.60213 2.40625 2.84375V5.03125H11.5938ZM3.82812 4.375C4.13016 4.375 4.375 4.13016 4.375 3.82812C4.375 3.52609 4.13016 3.28125 3.82812 3.28125C3.52609 3.28125 3.28125 3.52609 3.28125 3.82812C3.28125 4.13016 3.52609 4.375 3.82812 4.375ZM6.125 3.82812C6.125 4.13016 5.88016 4.375 5.57812 4.375C5.27609 4.375 5.03125 4.13016 5.03125 3.82812C5.03125 3.52609 5.27609 3.28125 5.57812 3.28125C5.88016 3.28125 6.125 3.52609 6.125 3.82812ZM10.1 8.85938L7.78439 11.175C7.61354 11.3459 7.61354 11.6229 7.78439 11.7937C7.95525 11.9646 8.23225 11.9646 8.40311 11.7937L10.7188 9.47809V10.6094C10.7188 10.851 10.9146 11.0469 11.1562 11.0469C11.3979 11.0469 11.5938 10.851 11.5938 10.6094V8.42188C11.5938 8.18025 11.3979 7.98438 11.1562 7.98438H8.96875C8.72713 7.98438 8.53125 8.18025 8.53125 8.42188C8.53125 8.6635 8.72713 8.85938 8.96875 8.85938H10.1Z"
4448
fill="white"
4549
/>

‎website/src/extensions/actions/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import { IContributeType, IExtension, IMenuItemProps, UniqueId } from '@dtinsight/molecule';
22
import SaveFileAction from './ saveAction';
3+
import ToggleThemeAction from './toggleTheme';
34
import { concatMenu } from '@dtinsight/molecule/esm/utils';
45

56
export const ExtendsActions: IExtension = {
67
id: 'ExtendsActions',
78
name: 'Extend Actions',
89
contributes: {
9-
[IContributeType.Commands]: [SaveFileAction]
10+
[IContributeType.Commands]: [SaveFileAction, ToggleThemeAction]
1011
},
1112
activate: function (molecule): void {
1213
appendActionGroupBy(molecule.builtin.getConstants().MENUBAR_ITEM_EDIT)
1314
.with(SaveFileAction)
15+
.with(ToggleThemeAction)
1416
.exhaust();
1517

1618
function appendActionGroupBy(parentId: UniqueId) {

‎website/src/extensions/actions/toggleTheme.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { BaseAction } from '@dtinsight/molecule/esm/glue';
2+
import { CATEGORIES, KeyChord, KeyCode, KeyMod } from '@dtinsight/molecule/esm/monaco';
3+
import { IMoleculeContext, KeybindingWeight } from '@dtinsight/molecule/esm/types';
4+
import { editor as monaco } from 'monaco-editor/esm/vs/editor/editor.api';
5+
import { vsPlusTheme } from 'monaco-sql-languages/esm/main';
6+
7+
export default class ToggleThemeAction extends BaseAction {
8+
static readonly ID = 'workbench.action.toggleTheme';
9+
10+
constructor(private molecule: IMoleculeContext) {
11+
super({
12+
id: ToggleThemeAction.ID,
13+
label: molecule.locale.localize('workbench.action.toggleTheme', 'Toggle Theme'),
14+
title: molecule.locale.localize('workbench.action.toggleTheme', 'Toggle Theme'),
15+
category: CATEGORIES.View,
16+
alias: 'Toggle Theme',
17+
precondition: undefined,
18+
f1: true,
19+
keybinding: {
20+
when: undefined,
21+
weight: KeybindingWeight.WorkbenchContrib,
22+
primary: KeyChord(KeyMod.CtrlCmd | KeyCode.KeyK)
23+
}
24+
});
25+
}
26+
27+
run() {
28+
const current = this.molecule.colorTheme.getCurrentTheme()?.id;
29+
const next = current === 'sql-dark' ? 'Default Dark+' : 'sql-dark';
30+
this.molecule.colorTheme.setCurrent(next);
31+
if (next === 'sql-dark') {
32+
monaco.defineTheme('sql-dark', vsPlusTheme.darkThemeData);
33+
monaco.setTheme('sql-dark');
34+
} else {
35+
monaco.setTheme('vs-dark');
36+
}
37+
// 强制刷新所有模型的语法高亮
38+
monaco.getModels().forEach((model) => {
39+
const lang = model.getLanguageId();
40+
monaco.setModelLanguage(model, lang);
41+
});
42+
// 同步状态栏切换按钮文本（若存在）
43+
this.molecule.statusBar.update({ id: 'toggle-theme', name: next });
44+
}
45+
}

‎website/src/extensions/main/index.tsx‎

Lines changed: 109 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
import lips from '@jcubic/lips';
1010

1111
import * as monaco from 'monaco-editor';
12+
import { vsPlusTheme } from 'monaco-sql-languages/esm/main';
1213

1314
import Welcome from '@/workbench/welcome';
1415
import {
@@ -50,6 +51,46 @@ export const mainExt: IExtension = {
5051
problemsService.toggleRoot(item);
5152
});
5253

54+
// 注册 Molecule 的 textMate sql-dark 主题（与 Monaco 使用同名 sql-dark, 其中 colors 是copy molecule vs-dark 的 colors ）
55+
molecule.colorTheme.add([
56+
{
57+
id: 'sql-dark',
58+
label: 'SQL Dark',
59+
name: 'sql-dark',
60+
uiTheme: 'vs-dark',
61+
colors: {
62+
'checkbox.border': '#6B6B6B',
63+
'editor.background': '#1E1E1E',
64+
'editor.foreground': '#D4D4D4',
65+
'editor.inactiveSelectionBackground': '#3A3D41',
66+
'editorIndentGuide.background': '#404040',
67+
'editorIndentGuide.activeBackground': '#707070',
68+
'editor.selectionHighlightBackground': '#ADD6FF26',
69+
'list.dropBackground': '#383B3D',
70+
'activityBarBadge.background': '#007ACC',
71+
'sideBarTitle.foreground': '#BBBBBB',
72+
'input.placeholderForeground': '#A6A6A6',
73+
'menu.background': '#252526',
74+
'menu.foreground': '#CCCCCC',
75+
'menu.separatorBackground': '#454545',
76+
'menu.border': '#454545',
77+
'statusBarItem.remoteForeground': '#FFF',
78+
'statusBarItem.remoteBackground': '#16825D',
79+
'ports.iconRunningProcessForeground': '#369432',
80+
'sideBarSectionHeader.background': '#0000',
81+
'sideBarSectionHeader.border': '#ccc3',
82+
'tab.lastPinnedBorder': '#ccc3',
83+
'list.activeSelectionIconForeground': '#FFF',
84+
'terminal.inactiveSelectionBackground': '#3A3D41',
85+
'widget.border': '#303031',
86+
'actionBar.toggledBackground': '#383a49',
87+
'statusBar.background': '#252526',
88+
'statusBar.border': '#333'
89+
},
90+
semanticHighlighting: true
91+
}
92+
]);
93+
5394
molecule.colorTheme.update('Default Dark+', (data) => ({
5495
colors: {
5596
...data.colors,
@@ -60,6 +101,39 @@ export const mainExt: IExtension = {
60101
'editor.background': '#161616'
61102
}
62103
}));
104+
105+
molecule.colorTheme.setCurrent('sql-dark');
106+
107+
// 拦截 Molecule 切换主题，避免其覆盖 Monaco 的 sql-dark
108+
const originalSetCurrent = molecule.colorTheme.setCurrent.bind(molecule.colorTheme);
109+
molecule.colorTheme.setCurrent = (id: string) => {
110+
originalSetCurrent(id);
111+
// Molecule 主题变化后，重新应用 Monaco 主题
112+
if (id === 'sql-dark') {
113+
monaco.editor.defineTheme('sql-dark', vsPlusTheme.darkThemeData);
114+
monaco.editor.setTheme('sql-dark');
115+
} else {
116+
monaco.editor.setTheme('vs-dark');
117+
}
118+
monaco.editor.getModels().forEach((model) => {
119+
const lang = model.getLanguageId();
120+
monaco.editor.setModelLanguage(model, lang);
121+
});
122+
};
123+
// 预定义 Monaco 主题，但推迟到编辑器创建后再应用，避免初始化阶段未就绪导致的高亮异常
124+
monaco.editor.defineTheme('sql-dark', vsPlusTheme.darkThemeData);
125+
let themeAppliedOnce = false;
126+
monaco.editor.onDidCreateEditor(() => {
127+
if (themeAppliedOnce) return;
128+
themeAppliedOnce = true;
129+
monaco.editor.setTheme('sql-dark');
130+
// 强制刷新所有模型的语法高亮
131+
monaco.editor.getModels().forEach((model) => {
132+
const lang = model.getLanguageId();
133+
monaco.editor.setModelLanguage(model, lang);
134+
});
135+
});
136+
63137
molecule.editor.setEntry(<Welcome context={molecule} />);
64138

65139
// ------- 初始化开始-----
@@ -132,8 +206,8 @@ export const mainExt: IExtension = {
132206
fill="none"
133207
>
134208
<path
135-
fill-rule="evenodd"
136-
clip-rule="evenodd"
209+
fillRule="evenodd"
210+
clipRule="evenodd"
137211
d="M9.19341 2.99998H3.31003C2.31041 3.00113 1.50137 3.81101 1.50024 4.81001V19.5641C1.50137 20.564 2.31043 21.3739 3.30918 21.375H20.6905C21.6901 21.3739 22.4991 20.564 22.5002 19.565V7.3569L22.4984 7.27626C22.4552 6.31387 21.6631 5.54714 20.6913 5.54605L12.4866 5.54585L10.4734 3.53063C10.1352 3.1903 9.67309 2.99869 9.19341 2.99998ZM9.19541 4.49997C9.27618 4.49976 9.35372 4.53191 9.41077 4.58933L11.5832 6.76392C11.7621 6.94445 12.0088 7.04687 12.266 7.04604L20.6904 7.04605C20.8609 7.04624 21 7.18551 21.0002 7.35774V9.65625H3.00023L3.00023 4.81085C3.00042 4.63945 3.13956 4.50017 3.31088 4.49997L9.19541 4.49997ZM3.00023 11.1562L3.00023 19.5633C3.00042 19.7355 3.13955 19.8748 3.31001 19.875H20.6896C20.8609 19.8748 21 19.7355 21.0002 19.5641L21.0002 11.1562H3.00023Z"
138212
fill="currentColor"
139213
/>
@@ -157,8 +231,8 @@ export const mainExt: IExtension = {
157231
>
158232
<rect opacity="0.01" width="24" height="24" fill="currentColor" />
159233
<path
160-
fill-rule="evenodd"
161-
clip-rule="evenodd"
234+
fillRule="evenodd"
235+
clipRule="evenodd"
162236
d="M17.2757 6.37641C16.8633 3.8348 14.6584 1.89438 12.0003 1.89438C9.3359 1.89438 7.12687 3.84395 6.72189 6.39438C6.72209 6.39317 6.76999 6.39204 6.85918 6.39099L17.2757 6.37641ZM9.01804 4.81131C9.7269 3.94284 10.8059 3.39439 12.0002 3.39439L12.105 3.3958C13.2545 3.42676 14.2891 3.96555 14.9773 4.80505L15.0345 4.87676L14.4286 4.87713L8.96097 4.88239L9.01804 4.81131ZM18.707 9.5003C18.3619 8.76073 17.9206 8.08549 17.4015 7.49503C16.6615 7.51336 14.7786 7.52354 12.7631 7.52918L6.56248 7.53623C6.04838 8.12908 5.61208 8.8058 5.27184 9.54609L3.85048 8.72547C3.49176 8.51836 3.03307 8.64127 2.82596 8.99999C2.61885 9.35871 2.74176 9.8174 3.10048 10.0245L4.72427 10.962C4.73515 10.9683 4.74612 10.9743 4.75717 10.9799C4.60665 11.5473 4.50865 12.1396 4.46942 12.75H2.625C2.21079 12.75 1.875 13.0858 1.875 13.5C1.875 13.9142 2.21079 14.25 2.625 14.25H4.49237C4.55598 14.9174 4.69002 15.5614 4.88608 16.1727C4.84812 16.187 4.81082 16.2045 4.77454 16.2255L3.15074 17.163C2.79202 17.3701 2.66911 17.8288 2.87622 18.1875C3.08333 18.5462 3.54202 18.6691 3.90074 18.462L5.46453 17.5592C6.77106 20.0619 9.20862 21.745 12 21.745C14.7914 21.745 17.2289 20.0619 18.5355 17.5592L20.0993 18.462C20.458 18.6691 20.9167 18.5462 21.1238 18.1875C21.3309 17.8288 21.208 17.3701 20.8493 17.163L19.2255 16.2255C19.1892 16.2045 19.1519 16.187 19.1139 16.1727C19.31 15.5614 19.444 14.9174 19.5076 14.25H21.375C21.7892 14.25 22.125 13.9142 22.125 13.5C22.125 13.0858 21.7892 12.75 21.375 12.75H19.5306C19.4902 12.1219 19.3876 11.5129 19.2296 10.9306L20.799 10.0245C21.1577 9.8174 21.2806 9.35871 21.0735 8.99999C20.8664 8.64127 20.4077 8.51836 20.049 8.72547L18.707 9.5003ZM16.6889 9.00704L16.7676 9.11804C17.5887 10.3116 18.0501 11.7891 18.0501 13.3562C18.0501 16.8994 15.7094 19.772 12.75 20.1921V16.5C12.75 16.0858 12.4142 15.75 12 15.75C11.5858 15.75 11.25 16.0858 11.25 16.5V20.1921C8.29063 19.772 5.95007 16.8993 5.95007 13.3562L5.95193 13.184C5.98412 11.695 6.43305 10.2939 7.21106 9.1495L7.28957 9.03591L8.80434 9.03557C10.7409 9.03424 12.4519 9.03116 13.8482 9.02586L16.6889 9.00704Z"
163237
fill="currentColor"
164238
/>
@@ -181,8 +255,8 @@ export const mainExt: IExtension = {
181255
fill="none"
182256
>
183257
<path
184-
fill-rule="evenodd"
185-
clip-rule="evenodd"
258+
fillRule="evenodd"
259+
clipRule="evenodd"
186260
d="M16.16 0C18.2823 0 20 1.71388 20 3.83002V16.17C20 18.2911 18.2873 20 16.17 20H3.84C1.71886 20 0.0100096 18.2873 0.0100096 16.17L0.00965667 7.03064C0.00330251 6.99136 0 6.95105 0 6.90997V3.83002C0 1.70888 1.71269 0 3.82999 0H16.16ZM18.4998 7.66998H1.51001V16.17C1.51001 17.431 2.50243 18.4536 3.75425 18.4985L3.84 18.5H16.17C17.4596 18.5 18.5 17.4619 18.5 16.17L18.4998 7.66998ZM10.8414 9.01758C11.2459 9.10674 11.5016 9.50693 11.4124 9.91144L10.0524 16.0814C9.96327 16.4859 9.56307 16.7416 9.15857 16.6524C8.75406 16.5632 8.49843 16.163 8.58759 15.7585L9.94757 9.58856C10.0367 9.18406 10.4369 8.92842 10.8414 9.01758ZM7.47033 10.3097C7.76323 10.6026 7.76323 11.0775 7.47033 11.3704L5.94937 12.891L7.47162 14.421C7.7638 14.7146 7.76264 15.1895 7.46904 15.4816C7.17543 15.7738 6.70056 15.7727 6.40838 15.479L4.35839 13.4191L4.347 13.4066L4.31587 13.3726C4.2607 13.3072 4.21851 13.2345 4.1893 13.1579L4.16983 13.0999C4.11304 12.9043 4.13738 12.6902 4.24285 12.5106C4.26006 12.4815 4.27826 12.4547 4.29837 12.429C4.31717 12.4049 4.3376 12.3818 4.35968 12.3597L6.40967 10.3097C6.70256 10.0168 7.17744 10.0168 7.47033 10.3097ZM13.6503 10.3097L15.6951 12.3545C15.6964 12.3558 15.6977 12.3571 15.6991 12.3584L15.743 12.406L15.7003 12.3597C15.7717 12.431 15.8257 12.5132 15.8623 12.6009C15.9361 12.7777 15.9392 12.9773 15.8714 13.1562C15.8391 13.2408 15.7923 13.3191 15.7302 13.3887C15.721 13.3991 15.7115 13.4092 15.7016 13.4191L13.6516 15.4791C13.3594 15.7727 12.8846 15.7738 12.591 15.4816C12.2973 15.1894 12.2962 14.7146 12.5884 14.421L14.1105 12.891L12.5897 11.3704C12.2968 11.0775 12.2968 10.6026 12.5897 10.3097C12.8826 10.0168 13.3574 10.0168 13.6503 10.3097ZM16.16 1.5H3.82999C2.54037 1.5 1.5 2.53805 1.5 3.83002V6.15975H18.5V3.83002C18.5 2.57166 17.5006 1.54648 16.2459 1.50154L16.16 1.5ZM3.82999 2.79999C4.39884 2.79999 4.85998 3.26116 4.85998 3.83002C4.85998 4.39887 4.39884 4.85998 3.82999 4.85998C3.26113 4.85998 2.79999 4.39887 2.79999 3.83002C2.79999 3.26116 3.26113 2.79999 3.82999 2.79999Z"
187261
fill="currentColor"
188262
/>
@@ -229,6 +303,35 @@ export const mainExt: IExtension = {
229303
sortIndex: 2
230304
});
231305

306+
// 主题切换按钮：在 Default Dark+ 与 sql-dark 之间切换
307+
molecule.statusBar.add({
308+
id: 'toggle-theme',
309+
alignment: 'right',
310+
sortIndex: 3,
311+
render: () => {
312+
const current = molecule.colorTheme.getCurrentTheme()?.id;
313+
const label = current === 'sql-dark' ? 'sql-dark' : 'Default Dark+';
314+
return (
315+
<span
316+
style={{ cursor: 'pointer' }}
317+
onClick={() => {
318+
const cur = molecule.colorTheme.getCurrentTheme()?.id;
319+
const next = cur === 'sql-dark' ? 'Default Dark+' : 'sql-dark';
320+
molecule.colorTheme.setCurrent(next);
321+
// 强制刷新所有模型的语法高亮
322+
monaco.editor.getModels().forEach((model) => {
323+
const lang = model.getLanguageId();
324+
monaco.editor.setModelLanguage(model, lang);
325+
});
326+
molecule.statusBar.update({ id: 'toggle-theme' });
327+
}}
328+
>
329+
{label}
330+
</span>
331+
);
332+
}
333+
});
334+
232335
molecule.activityBar.setCurrent(ACTIVITY_FOLDER);
233336
molecule.sidebar.setCurrent(ACTIVITY_FOLDER);
234337

0 commit comments

Comments
 (0)