fix(monaco-editor): fix theme conflict

emqx · Dec 27, 2024 · 7386dbf · 7386dbf
1 parent fe32110
commit 7386dbf
Show file tree

Hide file tree

Showing 11 changed files with 159 additions and 174 deletions.
diff --git a/apps/desktop/src/renderer/src/pages/log.vue b/apps/desktop/src/renderer/src/pages/log.vue
@@ -11,7 +11,5 @@ logger.mark('mark')
 </script>
 
 <template>
-  <div>
-    <LogView :log="logMemory" />
-  </div>
+  <LogView :log="logMemory" />
 </template>
diff --git a/apps/web/auto-imports.d.ts b/apps/web/auto-imports.d.ts
@@ -7,6 +7,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
@@ -98,6 +99,7 @@ declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>

diff --git a/apps/web/src/pages/log.vue b/apps/web/src/pages/log.vue
@@ -11,7 +11,5 @@ logger.mark('mark')
 </script>
 
 <template>
-  <div>
-    <LogView :log="logMemory" />
-  </div>
+  <LogView :log="logMemory" />
 </template>
diff --git a/packages/ui/auto-imports.d.ts b/packages/ui/auto-imports.d.ts
@@ -7,6 +7,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
@@ -96,6 +97,7 @@ declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>

diff --git a/packages/ui/components.d.ts b/packages/ui/components.d.ts
@@ -22,16 +22,19 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCascaderPanel: typeof import('element-plus/es')['ElCascaderPanel']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconDownload: typeof import('@element-plus/icons-vue')['Download']
     ElIconPrinter: typeof import('@element-plus/icons-vue')['Printer']
+    ElIconRight: typeof import('@element-plus/icons-vue')['Right']
     ElIconUpload: typeof import('@element-plus/icons-vue')['Upload']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']

diff --git a/packages/ui/src/components/MonacoEditor.vue b/packages/ui/src/components/MonacoEditor.vue
@@ -5,9 +5,7 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 
 import { useSettingsStore } from '../stores'
 
-import EditorDark from '../styles/themes/custom/editor-dark'
-import EditorNight from '../styles/themes/custom/editor-night'
-import { logEditorDark, logEditorLight, logEditorNight } from '../styles/themes/custom/log-themes'
+import { editorDark, editorLight, editorNight } from '../styles/themes/custom/editor-themes'
 
 const props = withDefaults(
   defineProps<{
@@ -36,6 +34,7 @@ let editor: monaco.editor.IStandaloneCodeEditor | null = null
 const defaultOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
   lineHeight: 1,
   fontSize: 14,
+  tabSize: 2,
   automaticLayout: true,
   scrollBeyondLastLine: false,
   lineNumbers: 'off',
@@ -64,21 +63,10 @@ const editorTheme = computed(() => {
     dark: 'editor-dark',
     night: 'editor-night',
   }
-  const logThemeOptions: Record<Theme, string> = {
-    light: 'editor-log',
-    dark: 'editor-log-dark',
-    night: 'editor-log-night',
-  }
-  if (language.value === 'log') {
-    return logThemeOptions[settings!.currentTheme]
-  }
   return themeOptions[settings!.currentTheme]
 })
 
 function defineLogLanguage() {
-  monaco.editor.defineTheme('editor-log', logEditorLight)
-  monaco.editor.defineTheme('editor-log-dark', logEditorDark)
-  monaco.editor.defineTheme('editor-log-night', logEditorNight)
   languages.register({ id: 'log' })
   languages.setMonarchTokensProvider('log', {
     tokenizer: {
@@ -97,8 +85,12 @@ function defineLogLanguage() {
 }
 
 function defineDefaultTheme() {
-  monaco.editor.defineTheme('editor-dark', EditorDark)
-  monaco.editor.defineTheme('editor-night', EditorNight)
+  // Multiple editors cannot have different themes because Monaco Editor sets the theme styles globally
+  // Therefore, an additional Log theme cannot be defined, and the Log theme styles need to be merged into the default theme
+  // Issue: https://github.com/Microsoft/monaco-editor/issues/338
+  monaco.editor.defineTheme('vs', editorLight)
+  monaco.editor.defineTheme('editor-dark', editorDark)
+  monaco.editor.defineTheme('editor-night', editorNight)
 }
 
 function initMonacoEditor() {
@@ -124,9 +116,10 @@ watch(value, (newValue) => {
   }
 })
 
+defineDefaultTheme()
+defineLogLanguage()
+
 onMounted(() => {
-  defineDefaultTheme()
-  defineLogLanguage()
   initMonacoEditor()
 })
 

diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -1,20 +1,43 @@
 import type { App } from 'vue'
 
+import AboutDataCollectionPolicy from './components/about/DataCollectionPolicy.vue'
+import AboutFooter from './components/about/Footer.vue'
+import AboutInfo from './components/about/Info.vue'
+import AboutView from './components/about/View.vue'
 import EmptyView from './components/common/EmptyView.vue'
 import LeftMenu from './components/common/LeftMenu.vue'
 import MainView from './components/common/MainView.vue'
 import SplitView from './components/common/SplitView.vue'
 import ConnectionDetailsView from './components/connections/DetailsView.vue'
 import ConnectionListView from './components/connections/ListView.vue'
 import HelpView from './components/HelpView.vue'
+import LogView from './components/LogView.vue'
+import MonacoEditor from './components/MonacoEditor.vue'
+import MyDialog from './components/MyDialog.vue'
 import SettingsView from './components/SettingsView.vue'
 
 export * from './components/monacoEnvironment'
 
 export * from './i18n'
 export * from './stores'
 
-export { ConnectionDetailsView, ConnectionListView, EmptyView, HelpView, LeftMenu, MainView, SettingsView, SplitView }
+export {
+  AboutDataCollectionPolicy,
+  AboutFooter,
+  AboutInfo,
+  AboutView,
+  ConnectionDetailsView,
+  ConnectionListView,
+  EmptyView,
+  HelpView,
+  LeftMenu,
+  LogView,
+  MainView,
+  MonacoEditor,
+  MyDialog,
+  SettingsView,
+  SplitView,
+}
 
 export default {
   install: (app: App) => {

diff --git a/packages/ui/src/styles/themes/custom/editor-dark.ts b/packages/ui/src/styles/themes/custom/editor-dark.ts
diff --git a/packages/ui/src/styles/themes/custom/editor-night.ts b/packages/ui/src/styles/themes/custom/editor-night.ts
diff --git a/packages/ui/src/styles/themes/custom/editor-themes.ts b/packages/ui/src/styles/themes/custom/editor-themes.ts
@@ -0,0 +1,115 @@
+import type { editor } from 'monaco-editor/esm/vs/editor/editor.api'
+
+export const logRules: editor.ITokenThemeRule[] = [
+  { token: 'log-TRACE', foreground: 'a9a9a9', background: '1e1e1e' },
+  { token: 'log-DEBUG', foreground: '00aaaa', background: '1e1e1e' },
+  { token: 'log-INFO', foreground: '00aa00', background: '1e1e1e' },
+  { token: 'log-WARN', foreground: 'aa5500', background: '1e1e1e' },
+  { token: 'log-ERROR', foreground: 'ff5555', background: '1e1e1e' },
+  { token: 'log-FATAL', foreground: 'aa00aa', background: '1e1e1e' },
+  { token: 'log-MARK', foreground: '555555', background: '1e1e1e' },
+  { token: 'log-date', foreground: '008888', background: '2d2d2d' },
+]
+
+export const editorLight: editor.IStandaloneThemeData = {
+  base: 'vs',
+  inherit: true,
+  rules: [
+    ...logRules,
+  ],
+  colors: {},
+}
+
+export const editorDark: editor.IStandaloneThemeData = {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    ...logRules,
+    { foreground: '75715e', token: 'comment' },
+    { foreground: 'e6db74', token: 'string' },
+    { foreground: 'ae81ff', token: 'constant.numeric' },
+    { foreground: 'ae81ff', token: 'constant.language' },
+    { foreground: 'ae81ff', token: 'constant.character' },
+    { foreground: 'ae81ff', token: 'constant.other' },
+    { foreground: 'f92672', token: 'keyword' },
+    { foreground: 'f92672', token: 'storage' },
+    { foreground: '66d9ef', fontStyle: 'italic', token: 'storage.type' },
+    { foreground: 'a6e22e', fontStyle: 'underline', token: 'entity.name.class' },
+    { foreground: 'a6e22e', fontStyle: 'italic underline', token: 'entity.other.inherited-class' },
+    { foreground: 'a6e22e', token: 'entity.name.function' },
+    { foreground: 'fd971f', fontStyle: 'italic', token: 'variable.parameter' },
+    { foreground: 'f92672', token: 'entity.name.tag' },
+    { foreground: 'a6e22e', token: 'entity.other.attribute-name' },
+    { foreground: '66d9ef', token: 'support.function' },
+    { foreground: '66d9ef', token: 'support.constant' },
+    { foreground: '66d9ef', fontStyle: 'italic', token: 'support.type' },
+    { foreground: '66d9ef', fontStyle: 'italic', token: 'support.class' },
+    { foreground: 'f8f8f0', background: 'f92672', token: 'invalid' },
+    { foreground: 'f8f8f0', background: 'ae81ff', token: 'invalid.deprecated' },
+    { foreground: 'cfcfc2', token: 'meta.structure.dictionary.json string.quoted.double.json' },
+    { foreground: '75715e', token: 'meta.diff' },
+    { foreground: '75715e', token: 'meta.diff.header' },
+    { foreground: 'f92672', token: 'markup.deleted' },
+    { foreground: 'a6e22e', token: 'markup.inserted' },
+    { foreground: 'e6db74', token: 'markup.changed' },
+    { foreground: 'ae81ffa0', token: 'constant.numeric.line-number.find-in-files - match' },
+    { foreground: 'e6db74', token: 'entity.name.filename.find-in-files' },
+  ],
+  colors: {
+    'editor.foreground': '#F8F8F2',
+    'editor.background': '#282828',
+    'editor.selectionBackground': '#49483E',
+    'editor.lineHighlightBackground': '#3E3D32',
+    'editorCursor.foreground': '#F8F8F0',
+    'editorWhitespace.foreground': '#3B3A32',
+    'editorIndentGuide.activeBackground': '#9D550FB0',
+    'editor.selectionHighlightBorder': '#222218',
+  },
+}
+
+export const editorNight: editor.IStandaloneThemeData = {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    ...logRules,
+    { foreground: '75715e', token: 'comment' },
+    { foreground: 'e6db74', token: 'string' },
+    { foreground: 'ae81ff', token: 'constant.numeric' },
+    { foreground: 'ae81ff', token: 'constant.language' },
+    { foreground: 'ae81ff', token: 'constant.character' },
+    { foreground: 'ae81ff', token: 'constant.other' },
+    { foreground: 'f92672', token: 'keyword' },
+    { foreground: 'f92672', token: 'storage' },
+    { foreground: '66d9ef', fontStyle: 'italic', token: 'storage.type' },
+    { foreground: 'a6e22e', fontStyle: 'underline', token: 'entity.name.class' },
+    { foreground: 'a6e22e', fontStyle: 'italic underline', token: 'entity.other.inherited-class' },
+    { foreground: 'a6e22e', token: 'entity.name.function' },
+    { foreground: 'fd971f', fontStyle: 'italic', token: 'variable.parameter' },
+    { foreground: 'f92672', token: 'entity.name.tag' },
+    { foreground: 'a6e22e', token: 'entity.other.attribute-name' },
+    { foreground: '66d9ef', token: 'support.function' },
+    { foreground: '66d9ef', token: 'support.constant' },
+    { foreground: '66d9ef', fontStyle: 'italic', token: 'support.type' },
+    { foreground: '66d9ef', fontStyle: 'italic', token: 'support.class' },
+    { foreground: 'f8f8f0', background: 'f92672', token: 'invalid' },
+    { foreground: 'f8f8f0', background: 'ae81ff', token: 'invalid.deprecated' },
+    { foreground: 'cfcfc2', token: 'meta.structure.dictionary.json string.quoted.double.json' },
+    { foreground: '75715e', token: 'meta.diff' },
+    { foreground: '75715e', token: 'meta.diff.header' },
+    { foreground: 'f92672', token: 'markup.deleted' },
+    { foreground: 'a6e22e', token: 'markup.inserted' },
+    { foreground: 'e6db74', token: 'markup.changed' },
+    { foreground: 'ae81ffa0', token: 'constant.numeric.line-number.find-in-files - match' },
+    { foreground: 'e6db74', token: 'entity.name.filename.find-in-files' },
+  ],
+  colors: {
+    'editor.foreground': '#F8F8F2',
+    'editor.background': '#292B33',
+    'editor.selectionBackground': '#49483E',
+    'editor.lineHighlightBackground': '#3E3D32',
+    'editorCursor.foreground': '#F8F8F0',
+    'editorWhitespace.foreground': '#3B3A32',
+    'editorIndentGuide.activeBackground': '#9D550FB0',
+    'editor.selectionHighlightBorder': '#222218',
+  },
+}