feat(ui): add c-monaco-editor to ui lib

Author: sharevb

components.d.ts

@@ -50,6 +50,7 @@ declare module '@vue/runtime-core' {
     'CModal.demo': typeof import('./src/ui/c-modal/c-modal.demo.vue')['default']
     CModalValue: typeof import('./src/ui/c-modal-value/c-modal-value.vue')['default']
     'CModalValue.demo': typeof import('./src/ui/c-modal-value/c-modal-value.demo.vue')['default']
+    CMonacoEditor: typeof import('./src/ui/c-monaco-editor/c-monaco-editor.vue')['default']
     CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
     ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']
     ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']

package.json

@@ -35,6 +35,7 @@
     "release": "node ./scripts/release.mjs"
   },
   "dependencies": {
+    "@guolao/vue-monaco-editor": "^1.4.1",
     "@it-tools/bip39": "^0.0.4",
     "@it-tools/oggen": "^1.3.0",
     "@sindresorhus/slugify": "^2.2.1",

pnpm-lock.yaml

@@ -2,6 +2,9 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { createHead } from '@vueuse/head';
 
+import { install as VueMonacoEditorPlugin, loader } from '@guolao/vue-monaco-editor';
+import * as monaco from 'monaco-editor';
+
 import { registerSW } from 'virtual:pwa-register';
 import { plausible } from './plugins/plausible.plugin';
 
@@ -13,10 +16,14 @@ import App from './App.vue';
 import router from './router';
 import { i18nPlugin } from './plugins/i18n.plugin';
 
+// loaded monaco-editor from `node_modules`
+loader.config({ monaco });
+
 registerSW();
 
 const app = createApp(App);
 
+app.use(VueMonacoEditorPlugin);
 app.use(createPinia());
 app.use(createHead());
 app.use(i18nPlugin);

src/main.ts

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import * as monacoEditor from 'monaco-editor';
+import type { MonacoEditor } from '@guolao/vue-monaco-editor';
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import { useStyleStore } from '@/stores/style.store';
+
+const props = withDefaults(defineProps<EditorProps>(), {
+  theme: 'vs',
+  options: () => ({}),
+  overrideServices: () => ({}),
+  saveViewState: true,
+  width: '100%',
+  height: '100%',
+});
+
+const emits = defineEmits<{
+  (e: 'update:value', value: string | undefined): void
+  (e: 'beforeMount', monaco: MonacoEditor): void
+  (e: 'mount', editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: MonacoEditor): void
+  (e: 'change', value: string | undefined, event: monacoEditor.editor.IModelContentChangedEvent): void
+  (e: 'validate', markers: monacoEditor.editor.IMarker[]): void
+}>();
+
+interface MonacoEnvironment {
+  getWorker(_: any, label: string): Worker
+}
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare module globalThis {
+  let MonacoEnvironment: MonacoEnvironment;
+}
+
+const value = useVModel(props, 'value', emits);
+
+globalThis.MonacoEnvironment = {
+  getWorker(_: any, label: string) {
+    if (label === 'json') {
+      return new JsonWorker();
+    }
+    if (label === 'css' || label === 'scss' || label === 'less') {
+      return new CssWorker();
+    }
+    if (label === 'html' || label === 'handlebars' || label === 'razor') {
+      return new HtmlWorker();
+    }
+    if (label === 'typescript' || label === 'javascript') {
+      return new TsWorker();
+    }
+    return new EditorWorker();
+  },
+};
+
+export interface EditorProps {
+  defaultValue?: string
+  defaultPath?: string
+  defaultLanguage?: string
+  value?: string
+  language?: string
+  path?: string
+
+  /* === */
+
+  theme: 'vs' | string
+  line?: number
+  options?: monacoEditor.editor.IStandaloneEditorConstructionOptions
+  overrideServices?: monacoEditor.editor.IEditorOverrideServices
+  saveViewState?: boolean
+
+  /* === */
+
+  width?: number | string
+  height?: number | string
+  className?: string
+}
+
+monacoEditor.editor.defineTheme('it-tools-dark', {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.background': '#00000000',
+  },
+});
+
+monacoEditor.editor.defineTheme('it-tools-light', {
+  base: 'vs',
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.background': '#00000000',
+  },
+});
+
+const styleStore = useStyleStore();
+
+watch(
+  () => styleStore.isDarkTheme,
+  isDarkTheme => monacoEditor.editor.setTheme(isDarkTheme ? 'it-tools-dark' : 'it-tools-light'),
+  { immediate: true },
+);
+
+const attrs = useAttrs();
+const inheritedAttrs = { ...attrs, ...props };
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<template>
+  <vue-monaco-editor
+    v-bind="inheritedAttrs"
+    v-model:value="value"
+    @before-mount="(monaco: MonacoEditor) => emits('beforeMount', monaco)"
+    @mount="(editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: MonacoEditor) => emits('mount', editor, monaco)"
+    @change="(value: string | undefined, event: monacoEditor.editor.IModelContentChangedEvent) => emits('change', value, event)"
+    @validate="(markers: monacoEditor.editor.IMarker[]) => emits('validate', markers)"
+  />
+</template>