niuma-ui 1.0.0

package/src/monaco/languages/types.ts

@@ -0,0 +1,55 @@
+/** Monaco 内置语言与扩展方言 ID。后续 SQL / YAML 方言在 languages/ 下新增并在此登记。 */
+export type MonacoBuiltinLanguage =
+  | 'json'
+  | 'javascript'
+  | 'typescript'
+  | 'sql'
+  | 'yaml'
+  | 'plaintext'
+
+/** SQL 方言 languageId（业务侧注册：Worker 或 Bridge LSP）。
+ * 新增方言时在此扩展；Worker 方言另在 setupMonacoWorkers 挂对应 worker。
+ */
+export type MonacoSqlLanguageId =
+  | 'pgsql'
+  | 'mysql'
+  | 'genericsql'
+  | 'dameng'
+  | 'kingbase'
+  | 'clickhouse'
+  | 'sqlite'
+  | 'sqlserver'
+  | 'oracle'
+
+/** 编辑器 language prop 可传入的全部语言 ID。 */
+export type MonacoLanguage = MonacoBuiltinLanguage | 'mongodb-shell' | MonacoSqlLanguageId
+
+/** Vastbase / PostgreSQL 在 Monaco 中的 languageId（与 LanguageIdEnum.PG 一致）。 */
+export const MONACO_PGSQL_LANGUAGE = 'pgsql' as const
+
+/** MySQL 在 Monaco 中的 languageId（与 LanguageIdEnum.MYSQL 一致）。 */
+export const MONACO_MYSQL_LANGUAGE = 'mysql' as const
+
+/** Dameng 在 Monaco 中的 languageId（Bridge LSP）。 */
+export const MONACO_DAMENG_LANGUAGE = 'dameng' as const
+
+/** Kingbase 在 Monaco 中的 languageId（Bridge LSP）。 */
+export const MONACO_KINGBASE_LANGUAGE = 'kingbase' as const
+
+/** ClickHouse 在 Monaco 中的 languageId（Bridge LSP）。 */
+export const MONACO_CLICKHOUSE_LANGUAGE = 'clickhouse' as const
+
+/** SQLite 在 Monaco 中的 languageId（Bridge LSP）。 */
+export const MONACO_SQLITE_LSP_LANGUAGE = 'sqlite' as const
+
+/** SQL Server 在 Monaco 中的 languageId（Bridge LSP）。 */
+export const MONACO_SQLSERVER_LANGUAGE = 'sqlserver' as const
+
+/** Oracle 在 Monaco 中的 languageId（Bridge LSP）。 */
+export const MONACO_ORACLE_LANGUAGE = 'oracle' as const
+
+/** Generic SQL / 旧 Worker 在 Monaco 中的 languageId（与 LanguageIdEnum.GENERIC 一致）。 */
+export const MONACO_GENERIC_SQL_LANGUAGE = 'genericsql' as const
+
+/** @deprecated 使用 MONACO_GENERIC_SQL_LANGUAGE；Wire ID 同为 genericsql */
+export const MONACO_SQLITE_LANGUAGE = MONACO_GENERIC_SQL_LANGUAGE

package/src/monaco/setup.ts

@@ -0,0 +1,101 @@
+const hoverContainerPatchKey = '__rsHoverFixedContainerPatch'
+
+type HoverShowOptions = { container?: HTMLElement }
+type HoverServiceProto = {
+  [hoverContainerPatchKey]?: boolean
+  _showHover?(
+    hover: unknown,
+    options: HoverShowOptions | undefined,
+    focus: boolean,
+  ): unknown
+}
+
+type WorkerCtor = new () => Worker
+
+/** 各 label 只动态 import 一次 Worker 构造器；实例按需 new。 */
+const workerCtorCache = new Map<string, Promise<WorkerCtor>>()
+
+function loadWorkerCtor(
+  key: string,
+  loader: () => Promise<{ default?: WorkerCtor } | WorkerCtor>,
+): Promise<WorkerCtor> {
+  let pending = workerCtorCache.get(key)
+  if (!pending) {
+    pending = loader().then((mod) => {
+      const Ctor =
+        typeof mod === 'function'
+          ? mod
+          : (mod as { default?: WorkerCtor }).default
+      if (typeof Ctor !== 'function') {
+        throw new Error(`[monaco] Worker constructor missing for "${key}"`)
+      }
+      return Ctor
+    })
+    workerCtorCache.set(key, pending)
+  }
+  return pending
+}
+
+/**
+ * Find Widget 按钮的 hover tooltip 默认挂在编辑器容器内并以 absolute 定位。
+ * 外层若有 overflow:hidden / 滚动容器，tooltip 会被裁剪或坐标偏移。
+ * 改为挂到 document.body 并走 fixed 定位（Monaco ContextView 内置逻辑）。
+ */
+function patchMonacoHoverContainer(HoverService: {
+  prototype: HoverServiceProto
+}): void {
+  const proto = HoverService.prototype
+  if (proto[hoverContainerPatchKey] || !proto._showHover) return
+
+  const original = proto._showHover
+  proto._showHover = function (
+    hover: unknown,
+    options: HoverShowOptions | undefined,
+    focus: boolean,
+  ) {
+    if (options) {
+      options.container = document.body
+    }
+    return original.call(this, hover, options, focus)
+  }
+  proto[hoverContainerPatchKey] = true
+}
+
+async function ensureHoverPatch(): Promise<void> {
+  // @ts-expect-error Monaco 内部 ESM 路径无类型声明
+  const mod = await import('monaco-editor/esm/vs/platform/hover/browser/hoverService.js')
+  patchMonacoHoverContainer(mod.HoverService)
+}
+
+/**
+ * 配置 Monaco Editor Web Worker 环境（仅注册工厂，不预创建线程、不预拉 Worker 脚本）。
+ *
+ * SQL 方言不再使用 monaco-sql-languages Worker：
+ * MySQL → Bridge LSP；其余方言静默内置 `sql`（仅 editor.worker）。
+ *
+ * 必须在任何 Monaco Editor 实例创建前调用一次（通常在应用入口 main.ts 顶部）。
+ */
+export function setupMonacoWorkers(): void {
+  if (typeof window === 'undefined') return
+
+  void ensureHoverPatch()
+
+  window.MonacoEnvironment = {
+    getWorker(_workerId: string, label: string): Promise<Worker> {
+      if (label === 'json') {
+        return loadWorkerCtor('json', () =>
+          import('monaco-editor/esm/vs/language/json/json.worker?worker'),
+        ).then((Ctor) => new Ctor())
+      }
+      if (label === 'typescript' || label === 'javascript') {
+        return loadWorkerCtor('typescript', () =>
+          import('monaco-editor/esm/vs/language/typescript/ts.worker?worker'),
+        ).then((Ctor) => new Ctor())
+      }
+      // 任意遗留 pgsql/mysql/genericsql label 也回落到 editor.worker（静默）
+      return loadWorkerCtor('editor', () =>
+        import('monaco-editor/esm/vs/editor/editor.worker?worker'),
+      ).then((Ctor) => new Ctor())
+    },
+  }
+}