FranklinWH-Toolbox/src/utils/monaco/index.ts

import './env'
import * as monaco from 'monaco-editor'
import { registerCustomTheme } from './themes'
import { registerLanguages } from './languages'
import { createEditor, createModel } from './editor'

import { watchEffect, type WatchHandle } from 'vue'
import { usePersonalization } from '@/composable/usePersonalization'

let initialized = false

const { isDark } = usePersonalization()
let stopThemeWatch: WatchHandle | undefined

function initMonaco() {
  if (initialized) return
  initialized = true

  registerCustomTheme()
  registerLanguages()

  // 统一切换 Monaco 主题
  stopThemeWatch ??= watchEffect(() => {
    monaco.editor.setTheme(isDark.value ? 'custom-dark' : 'custom')
  }, {})
}

export interface MonacoModelParam {
  initValue: string
  language: string
  uri?: string
}

export interface MonacoEditorParam {
  el: HTMLElement
  options: monaco.editor.IStandaloneEditorConstructionOptions
}

export interface MonacoEditor {
  model: monaco.editor.ITextModel
  editor: monaco.editor.IStandaloneCodeEditor
}

export function createMonacoEditor(
  model: MonacoModelParam,
  editor: MonacoEditorParam,
): MonacoEditor {
  initMonaco()

  const m = createModel(model.initValue, model.language, model.uri)
  const e = createEditor(editor.el, {
    model: m,
    ...editor.options,
  })

  return {
    model: m,
    editor: e,
  }
}