yh-codemirror 1.0.5 → 1.0.7

package/.workbuddy/memory/2026-09-28.md

@@ -0,0 +1,19 @@
+# 2026-09-28
+
+## yh-codemirror 1.0.7 接入 AI 提示代码编辑
+
+- 设计取舍：该包必须保持零业务依赖（deps 仅 codemirror 系列 + js-beautify，peer 仅 vue/element-plus），
+  因此**不直接依赖 yh-ai**（会拖入 axios/yh-client/yh-pub），改为宿主通过 `aiRequest` 回调注入 AI 能力。
+  传入 `aiRequest` 即启用，未传时行为与旧版完全一致（向后兼容）。
+- 实现要点：
+  - 作用范围：有选区→选区；无选区→按 `aiScope`（默认 document）整篇或光标插入。
+  - 写回用 `view.dispatch({changes:{from,to,insert}})`，保留撤销栈；流式时区间 to 随写入长度前移。
+  - 流式：宿主调 `onChunk(chunk)` 增量返回，组件累积后整体覆盖区间；非流式则取返回值字符串。
+  - `AbortController` + signal 支持中断（停止按钮 / Esc / 卸载）。
+  - 自动剥离模型输出的 ```lang 围栏。
+  - 快捷键用 `keymap.of`（注意：`keymap` 不从 `codemirror` 导出，必须从 `@codemirror/view` 导入）。
+  - 新增事件 `ai-apply` / `ai-error`，expose `openAi/closeAi/stopAi/getView`。
+- 新增 README.md（接入示例：非流式 + SSE 流式）、CHANGELOG.md；version 1.0.6 → 1.0.7。
+- 验证：临时 .smoke 工程用 vite 4 + @vitejs/plugin-vue 构建通过（1663 modules）。
+  注意：root node_modules 的 vue 是 3.2.47，与 element-plus 内部 @vueuse 不兼容（hasInjectionContext 缺失），
+  **冒烟构建要把 vue alias 指向 web-new/node_modules/vue（3.5.13）**。

package/CHANGELOG.md

@@ -0,0 +1,40 @@
+# CHANGELOG
+
+## 1.0.7
+
+- 2026-09-30 18:54 feature: 新增 `aiPanelSize` 尺寸档位（`'normal' | 'large'`）
+  - 放大场景（window-form 的「放大」抽屉）传 `large`：面板内边距 6/8 → 10/12、字号 12 → 14px、
+    输入框 2 行 → 4 行、历史面板 max-height 62% → 72%（代码区 170px → 300px）
+  - 抽屉里的编辑区撑满整个抽屉，AI 面板还是 12px / 2 行会显得很局促
+- 2026-09-30 18:45 feature: 新增「历史问答」查看入口（AI 输入框右上角「历史」）
+  - 每次 AI 成功写入后记录 `{时间, 问题, 作用范围, 回答}`，列表可展开查看完整问答、一键复制回答、清空
+  - 历史存在新增的 `ai-history.js` **模块级单例**（上限 50 条，最新在前）；
+    不放组件内是因为配置面板里的编辑器会随切换配置项反复卸载重建，组件 ref 一卸载历史就没了
+- 2026-09-30 18:26 fix: 选中区被当前行整块盖住（真正的根因是**绘制层级**，不是配色）
+  - CM6 的选区画在 `.cm-selectionLayer` 上：`drawSelection` 内部 `above:false` → z-index 取 `-1-pos`（负数），
+    它和 `.cm-content` 同在 `.cm-scroller`（`position:relative; z-index:0`）这个层叠上下文里
+  - 按 CSS 绘制顺序「负 z-index 后代 → in-flow 块 → 行内内容」，`.cm-line` 作为普通 in-flow 块
+    **画在选区层之上**；只要给 `.cm-line` 设不透明背景，选区就被完全遮住
+  - baseTheme 自带的 `&light .cm-activeLine:#cceeff44` / `&dark:#99eeff33` 是半透明的才不会遮，
+    solarizedDark 的 `.cm-activeLine:#173541` 和它的 `selection:#173541` 一样是不透明的同色 —— 这才是最初「看不出来」的根源
+  - 解法：当前行高亮挪到 `.cm-line.cm-activeLine::before`（`z-index:-100`），
+    同时把 `.cm-activeLine` 自身清成 `transparent`；绘制顺序变成「当前行底(-100) → 选区(-2) → 文字」
+- 2026-09-28 10:04 feature: 新增 AI 提示代码编辑能力（回调注入 `aiRequest`，不引入任何 AI 服务依赖）
+  - 支持选区 / 整篇 / 光标插入三种作用范围（`aiScope`）
+  - 支持流式回写（`onChunk` 实时写入编辑器）
+  - 支持中断（`AbortSignal` + 停止按钮 / Esc）
+  - 新增 `ai-apply`、`ai-error` 事件与 `openAi / closeAi / stopAi / getView` 暴露方法
+  - 新增快捷键 `Mod-i` 唤起 AI 输入框（`aiHotkey` 可配）
+  - 回写走 dispatch，保留撤销栈；自动剥离 ```lang 代码围栏
+- 2026-09-28 10:04 docs: 新增 README.md 说明 AI 接入方式（非流式 / SSE 流式示例）
+- 2026-09-30 18:08 fix: 拖选/双击选词仍然和当前行同色（上一版权重不够）
+  - CM 6.39 的 baseTheme 用 `&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground`
+    （5 个类 + 子代选择器）给了默认色 `#d7d4f0` / `#233`，权重高于组件规则，堆类名盖不住
+  - 选区色改带 `!important`（不跟它的 DOM 结构绑死），当前行仍用选择器权重覆盖
+  - 补回浅色 `.cm-selectionMatch`（双击选词后其它同名 occurrence），改用暖色 `#ffe9c2` 与蓝色选区区分
+  - solarizedDark 的 `selection` 与 `activeLine` 都是 `#173541`，浅色主题又是 `#b3d8ff` / `#e8f4ff` 同一蓝色系
+  - 改为「当前行 = 中性色，选中 = 蓝色」，并区分聚焦/失焦两档选中色
+  - 配色统一挪到组件 `<style>`（带 `.cm-editor` / `.cm-editor.cm-focused` 前缀，权重高于外部主题），
+    `lightTheme` 里不再重复维护
+- 2026-09-30 17:54 feature: 编辑器未聚焦时隐藏右下角功能按钮栏（`.editor-operation-btn.is-hidden`）
+  - 按钮栏加 `@mousedown.prevent`，避免点按钮瞬间编辑器失焦导致按钮隐藏、click 落空

package/CodeMirror.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="yh-code-mirror-container"
+    :class="{'is-light': props.theme === 'light', 'is-ai-large': props.aiPanelSize === 'large'}"
     ref="YhCodemirrorContainer"
     :style="codeMirrorStyle">
     <div class="code-slot">
@@ -13,7 +14,130 @@
     <div class="code-slot">
       <slot name="next-code"></slot>
     </div>
-    <div class="editor-operation-btn">
+    <div v-if="aiEnabled && aiVisible" class="ai-prompt-panel">
+      <div class="ai-panel-head">
+        <span class="ai-tag">AI</span>
+        <span class="ai-scope">将修改{{ aiScopeText }}</span>
+        <span
+          class="ai-history-entry"
+          :class="{'is-active': aiHistoryVisible}"
+          title="查看历史问答"
+          @click="aiHistoryVisible = !aiHistoryVisible"
+          >历史{{ aiHistory.length ? `(${aiHistory.length})` : '' }}</span
+        >
+        <span
+          class="ai-close"
+          title="关闭"
+          @click="closeAi"
+          >×</span
+        >
+      </div>
+      <textarea
+        ref="aiInputRef"
+        v-model="aiPrompt"
+        class="ai-input"
+        :rows="aiInputRows"
+        :disabled="aiLoading"
+        :placeholder="aiPlaceholder"
+        @keydown.enter.exact.prevent="submitAi"
+        @keydown.esc.stop.prevent="closeAi"></textarea>
+      <div class="ai-panel-foot">
+        <span class="ai-tip">{{
+          aiLoading ? (aiStreaming ? '生成中…' : 'AI 正在处理…') : 'Enter 发送 / Esc 取消'
+        }}</span>
+        <span
+          v-if="!aiLoading"
+          class="ai-btn"
+          :class="{'is-disabled': !aiPrompt.trim()}"
+          @click="submitAi"
+          >生成</span
+        >
+        <span
+          v-else
+          class="ai-btn danger"
+          @click="stopAi"
+          >停止</span
+        >
+      </div>
+      <div
+        v-if="aiError"
+        class="ai-error">
+        {{ aiError }}
+      </div>
+    </div>
+    <!-- 历史问答：和输入框互斥展示，关掉输入框时不影响单独查看 -->
+    <div
+      v-if="aiEnabled && aiHistoryVisible"
+      class="ai-history-panel">
+      <div class="ai-history-head">
+        <span class="ai-tag">历史</span>
+        <span class="ai-scope">{{ aiHistory.length ? `共 ${aiHistory.length} 条问答` : '暂无记录' }}</span>
+        <span
+          v-if="aiHistory.length"
+          class="ai-btn plain"
+          @click="clearHistory"
+          >清空</span
+        >
+        <span
+          class="ai-close"
+          title="关闭"
+          @click="aiHistoryVisible = false"
+          >×</span
+        >
+      </div>
+      <div
+        v-if="!aiHistory.length"
+        class="ai-history-empty">
+        还没有历史记录，问点什么试试
+      </div>
+      <div
+        v-else
+        class="ai-history-list">
+        <div
+          v-for="item in aiHistory"
+          :key="item.id"
+          class="ai-history-item">
+          <div
+            class="ai-history-q"
+            @click="toggleHistoryItem(item.id)">
+            <span class="ai-history-time">{{ item.time }}</span>
+            <span class="ai-history-text">{{ item.prompt }}</span>
+            <span class="ai-history-toggle">{{ expandedHistoryId === item.id ? '收起' : '展开' }}</span>
+          </div>
+          <div
+            v-if="expandedHistoryId === item.id"
+            class="ai-history-body">
+            <div class="ai-history-label">
+              问题<span class="ai-history-scope">{{ item.scope }}</span>
+            </div>
+            <pre class="ai-history-pre">{{ item.prompt }}</pre>
+            <div class="ai-history-label">
+              回答
+              <span
+                class="ai-btn plain"
+                @click="copyHistoryAnswer(item.answer)"
+                >复制</span
+              >
+            </div>
+            <pre class="ai-history-pre is-answer">{{ item.answer }}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 未聚焦时隐藏（.is-hidden）：按钮栏会挡住代码尾部，只在编辑时露出来。
+         @mousedown.prevent 阻止默认的焦点转移，否则点按钮的瞬间编辑器失焦、按钮立刻隐藏，
+         mouseup 落不到按钮上，点击会失效。 -->
+    <div
+      class="editor-operation-btn"
+      :class="{'is-hidden': !editorFocused}"
+      @mousedown.prevent>
+      <span
+        v-if="aiEnabled"
+        class="ai-entry"
+        :title="`AI 编辑（${aiHotkeyLabel}）`"
+        @click="openAi()"
+        >AI</span
+      >
       <i
         title="全屏"
         class="iconfont icon-fullscreen"
@@ -39,15 +163,19 @@
   </div>
 </template>
 <script setup lang="ts">
-import {ref, onMounted, toRaw} from 'vue';
+import {ref, onMounted, onBeforeUnmount, nextTick, toRaw} from 'vue';
 // @ts-ignore
 import type {Extension} from 'codemirror';
 import {EditorView, basicSetup} from 'codemirror';
-import {ViewUpdate} from '@codemirror/view';
+import {ViewUpdate, keymap} from '@codemirror/view';
 import {EditorState, EditorSelection} from '@codemirror/state';
 import {javascriptLanguage} from '@codemirror/lang-javascript';
 import {solarizedDark} from 'cm6-theme-solarized-dark';
+import {HighlightStyle, syntaxHighlighting} from '@codemirror/language';
+import {tags} from '@lezer/highlight';
 import {getCodeLanguagePlugin} from './util';
+import type {AiCodeEditParams, AiCodeEditRequest} from './util';
+import {aiHistory, pushAiHistory, clearAiHistory} from './ai-history';
 import {watch, computed} from 'vue';
 // @ts-ignore
 import {js_beautify} from 'js-beautify';
@@ -63,6 +191,8 @@ function fullscreen() {
 }
 
 const codeMirrorEditorRef = ref();
+/** 编辑器是否持有焦点：决定右下角功能按钮栏是否显示 */
+const editorFocused = ref(false);
 
 let view: null | EditorView = null;
 let state: null | EditorState = null;
@@ -77,14 +207,78 @@ const props = withDefaults(
     language?: string | string[];
     autocomplete?: any;
     height?: number;
+    /** AI 请求函数；传入即启用 AI 提示编辑。返回完整替换文本，流式输出时通过 onChunk 回调 */
+    aiRequest?: AiCodeEditRequest;
+    /** 唤起 AI 输入框的快捷键（CodeMirror 键位语法），默认 Mod-i（Win: Ctrl+I / Mac: Cmd+I） */
+    aiHotkey?: string;
+    /** AI 输入框占位提示 */
+    aiPlaceholder?: string;
+    /** 无选中时 AI 的作用范围：document 整个文档 / cursor 光标处插入 */
+    aiScope?: 'document' | 'cursor';
+    /** 编辑器主题：dark（默认）或 light */
+    theme?: 'dark' | 'light';
+    /**
+     * AI 输入框/历史面板的尺寸档位。编辑区被放大时（如 window-form 的「放大」抽屉）传 'large'，
+     * 否则 12px 字号 + 2 行输入框在大面板里会显得很局促。
+     */
+    aiPanelSize?: 'normal' | 'large';
   }>(),
   {
     modelValue: '',
     language: 'javascript',
     autocomplete: {},
+    aiHotkey: 'Mod-i',
+    aiPlaceholder: '描述你想要的修改，如：给这个函数加上异常处理',
+    aiScope: 'document',
+    theme: 'dark',
+    aiPanelSize: 'normal',
   }
 );
 
+// 浅色主题（匹配原 window-form.vue 的浅色调）
+const lightTheme = EditorView.theme(
+  {
+    '&': {color: '#333', backgroundColor: '#fff'},
+    '.cm-content': {caretColor: '#333'},
+    '.cm-cursor, .cm-dropCursor': {borderLeftColor: '#333'},
+    // 选中区/当前行的配色不在这里写：solarizedDark 这类外部主题要靠更高权重的选择器覆盖，
+    // 统一放在组件 <style> 里的 ".cm-editor .cm-selectionBackground / .cm-activeLine" 规则中，避免两处维护。
+    '.cm-panels': {backgroundColor: '#f5f5f5', color: '#333'},
+    '.cm-gutters': {
+      backgroundColor: '#f5f5f5',
+      color: '#888',
+      borderRight: '1px solid #e0e0e0',
+    },
+    // .cm-activeLineGutter 同 .cm-activeLine，见上面注释，统一在 <style> 里维护
+    '.cm-tooltip': {border: '1px solid #ddd', backgroundColor: '#fff'},
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+      borderTopColor: '#fff',
+      borderBottomColor: '#fff',
+    },
+    '.cm-tooltip-autocomplete': {
+      '& > ul > li[aria-selected]': {backgroundColor: '#e8f4ff', color: '#333'},
+    },
+  },
+  {dark: false}
+);
+
+const lightHighlightStyle = HighlightStyle.define([
+  {tag: tags.keyword, color: '#0000ff'},
+  {tag: tags.string, color: '#008000'},
+  {tag: tags.comment, color: '#808080', fontStyle: 'italic'},
+  {tag: tags.function(tags.variableName), color: '#795e26'},
+  {tag: tags.number, color: '#098658'},
+  {tag: tags.operator, color: '#333'},
+  {tag: tags.className, color: '#267f99'},
+  {tag: tags.tagName, color: '#0000ff'},
+  {tag: tags.attributeName, color: '#e50000'},
+  {tag: [tags.variableName], color: '#333'},
+  {tag: tags.bool, color: '#0000ff'},
+  {tag: tags.null, color: '#0000ff'},
+]);
+
+const lightThemeExtension = [lightTheme, syntaxHighlighting(lightHighlightStyle)];
+
 const codeMirrorStyle = computed(() => {
   let style: any = {};
   if (props.height !== undefined && !isNaN(props.height)) {
@@ -107,7 +301,7 @@ const codeMirrorEditorStyle = computed(() => {
 watch(
   () => props.modelValue,
   (val) => {
-    if (view && state && typeof val === 'string' && val != view.state.doc.toString()) {
+    if (view && state && val != view.state.doc.toString()) {
       let end = view.state.doc.toString().length;
       view.dispatch({
         changes: [
@@ -119,14 +313,193 @@ watch(
         ],
       });
     }
-  },
-  {
-    deep: true,
-    immediate: true,
   }
 );
 
-const emits = defineEmits(['update:modelValue']);
+const emits = defineEmits(['update:modelValue', 'ai-apply', 'ai-error']);
+
+/* ------------------------------ AI 提示编辑 ------------------------------ */
+const aiEnabled = computed(() => typeof props.aiRequest === 'function');
+const aiHotkeyLabel = computed(() =>
+  props.aiHotkey.replace('Mod-', navigator.platform.toLowerCase().includes('mac') ? '⌘' : 'Ctrl+')
+);
+const aiVisible = ref(false);
+const aiPrompt = ref('');
+const aiLoading = ref(false);
+const aiStreaming = ref(false);
+const aiError = ref('');
+const aiScopeText = ref('');
+const aiInputRef = ref();
+// 放大档位下输入框多给两行，配合 .is-ai-large 的字号提升
+const aiInputRows = computed(() => (props.aiPanelSize === 'large' ? 4 : 2));
+// 历史问答（模块级单例，见 ./ai-history）
+const aiHistoryVisible = ref(false);
+const expandedHistoryId = ref<number | null>(null);
+const toggleHistoryItem = (id: number) => {
+  expandedHistoryId.value = expandedHistoryId.value === id ? null : id;
+};
+const clearHistory = () => {
+  clearAiHistory();
+  expandedHistoryId.value = null;
+};
+const copyHistoryAnswer = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text || '');
+    ElMessage({message: '已复制回答', type: 'success'});
+  } catch (e) {
+    ElMessage({message: '复制失败，请手动选中复制', type: 'warning'});
+  }
+};
+// 当前 AI 作用区间（流式过程中 to 会随写入推进）
+let aiRange: {from: number; to: number} | null = null;
+let aiAbort: AbortController | null = null;
+
+/** 打开 AI 输入框：有选区则作用于选区，否则按 aiScope 处理 */
+const openAi = (presetPrompt?: string) => {
+  if (!aiEnabled.value || !view) {
+    return;
+  }
+  const st = toRaw(view.state);
+  const sel = st.selection.main;
+  if (!sel.empty) {
+    aiRange = {from: sel.from, to: sel.to};
+    const lines = st.doc.lineAt(sel.to).number - st.doc.lineAt(sel.from).number + 1;
+    aiScopeText.value = `选中的 ${lines} 行代码`;
+  } else if (props.aiScope === 'cursor') {
+    aiRange = {from: sel.head, to: sel.head};
+    aiScopeText.value = '在光标处插入';
+  } else {
+    aiRange = {from: 0, to: st.doc.length};
+    aiScopeText.value = '整个文档';
+  }
+  aiPrompt.value = presetPrompt || '';
+  aiError.value = '';
+  aiLoading.value = false;
+  aiVisible.value = true;
+  nextTick(() => {
+    aiInputRef.value && aiInputRef.value.focus();
+  });
+};
+
+const closeAi = () => {
+  if (!aiVisible.value) {
+    return;
+  }
+  stopAi();
+  aiVisible.value = false;
+  aiRange = null;
+  view && view.focus();
+};
+
+const stopAi = () => {
+  if (aiAbort) {
+    aiAbort.abort();
+    aiAbort = null;
+  }
+  aiLoading.value = false;
+  aiStreaming.value = false;
+};
+
+/** 把文本写入区间；流式场景下区间终点随写入长度前移 */
+const writeRange = (range: {from: number; to: number}, text: string) => {
+  if (!view) {
+    return;
+  }
+  const to = Math.min(range.to, view.state.doc.length);
+  view.dispatch({
+    changes: {from: range.from, to, insert: text},
+    selection: EditorSelection.range(range.from, range.from + text.length),
+    scrollIntoView: true,
+  });
+  range.to = range.from + text.length;
+};
+
+/** 兼容模型常见的 ```lang ... ``` 包裹输出 */
+const stripCodeFence = (text: string) => {
+  const trimmed = (text || '').replace(/\r\n/g, '\n').trim();
+  const matched = trimmed.match(/^```[a-zA-Z0-9_+\-]*[ \t]*\n([\s\S]*?)\n?```$/);
+  return matched ? matched[1] : trimmed;
+};
+
+const submitAi = async () => {
+  const prompt = aiPrompt.value.trim();
+  if (!prompt || !view || !aiRange || !props.aiRequest || aiLoading.value) {
+    return;
+  }
+  const range = {...aiRange};
+  const st = toRaw(view.state);
+  range.from = Math.max(0, Math.min(range.from, st.doc.length));
+  range.to = Math.max(range.from, Math.min(range.to, st.doc.length));
+  const selectedCode = st.sliceDoc(range.from, range.to);
+
+  aiLoading.value = true;
+  aiStreaming.value = false;
+  aiError.value = '';
+  const controller = new AbortController();
+  aiAbort = controller;
+  let streamed = false;
+  let acc = '';
+  const onChunk = (chunk: string) => {
+    if (chunk === undefined || chunk === null) {
+      return;
+    }
+    streamed = true;
+    aiStreaming.value = true;
+    acc += chunk;
+    writeRange(range, acc);
+  };
+
+  const params: AiCodeEditParams = {
+    prompt,
+    code: st.doc.toString(),
+    selectedCode,
+    language: props.language,
+    signal: controller.signal,
+    onChunk,
+  };
+
+  try {
+    const res: any = await props.aiRequest(params);
+    if (controller.signal.aborted) {
+      return;
+    }
+    if (!streamed) {
+      const text = typeof res === 'string' ? res : res?.text ?? res?.code ?? res?.content ?? '';
+      writeRange(range, stripCodeFence(text));
+    } else {
+      writeRange(range, stripCodeFence(acc));
+    }
+    aiLoading.value = false;
+    aiStreaming.value = false;
+    aiVisible.value = false;
+    aiRange = null;
+    view.focus();
+    const appliedText = view.state.sliceDoc(range.from, range.to);
+    // 记录历史问答（含 AI 最终写入编辑器的完整文本，撤销了也能在这里找回原文）
+    pushAiHistory({prompt, scope: aiScopeText.value, answer: appliedText});
+    emits('ai-apply', {prompt, text: appliedText});
+    ElMessage({
+      message: 'AI 修改已应用',
+      type: 'success',
+    });
+  } catch (err: any) {
+    aiLoading.value = false;
+    aiStreaming.value = false;
+    if (err?.name === 'AbortError' || controller.signal.aborted) {
+      aiError.value = '已取消';
+      return;
+    }
+    const message = err?.message || 'AI 请求失败';
+    aiError.value = message;
+    emits('ai-error', err);
+    ElMessage({
+      message,
+      type: 'error',
+    });
+  } finally {
+    aiAbort = null;
+  }
+};
 
 // 代码编辑器操作按钮
 const onEditorBtnClick = (type) => {
@@ -182,12 +555,15 @@ const onEditorBtnClick = (type) => {
 onMounted(() => {
   const extensions: Extension[] = [
     basicSetup,
-    solarizedDark,
+    props.theme === 'light' ? lightThemeExtension : solarizedDark,
     EditorView.lineWrapping,
     EditorView.updateListener.of((v: ViewUpdate) => {
       if (v.docChanged) {
         emits('update:modelValue', v.state.doc.toString());
       }
+      if (v.focusChanged) {
+        editorFocused.value = v.view.hasFocus;
+      }
     }),
   ];
   const language = props.language;
@@ -214,44 +590,217 @@ onMounted(() => {
       }
     }
   }
-  if (!state) {
-    let doc = props.modelValue;
-    if (typeof doc !== 'string') {
-      doc = '';
-    }
-    state = EditorState.create({
-      doc,
-      extensions,
-    });
+
+  if (aiEnabled.value) {
+    extensions.push(
+      keymap.of([
+        {
+          key: props.aiHotkey,
+          run: () => {
+            openAi();
+            return true;
+          },
+        },
+        {
+          key: 'Escape',
+          run: () => {
+            if (aiVisible.value) {
+              closeAi();
+              return true;
+            }
+            return false;
+          },
+        },
+      ])
+    );
   }
+
+  state = EditorState.create({
+    doc: props.modelValue,
+    extensions,
+  });
   if (state) {
     view = new EditorView({
       state: state,
       parent: codeMirrorEditorRef.value,
     });
+    editorFocused.value = view.hasFocus;
   }
 });
+
+onBeforeUnmount(() => {
+  stopAi();
+});
+
+defineExpose({
+  /** 唤起 AI 编辑输入框（可预填提示词） */
+  openAi,
+  /** 关闭 AI 编辑输入框 */
+  closeAi,
+  /** 中断进行中的 AI 请求 */
+  stopAi,
+  /** 获取 CodeMirror 实例 */
+  getView: () => view,
+});
 </script>
 <style lang="scss">
 .yh-code-mirror-container {
   width: 100%;
   position: relative;
   background-color: #173541;
-  min-height: 70px;
+  &.is-light {
+    background-color: #fff;
+    .cm-editor {
+      .cm-line.cm-activeLine::before {
+        background-color: #f0f2f5;
+      }
+      .cm-activeLineGutter {
+        background-color: #f0f2f5;
+      }
+      .cm-selectionBackground {
+        background-color: #d4e7f9 !important;
+      }
+      &.cm-focused .cm-selectionBackground {
+        background-color: #b3d8ff !important;
+      }
+      // 双击选词后其它同名 occurrence（highlightSelectionMatches）：用暖色，和蓝色选区、中性当前行都区分开
+      .cm-selectionMatch {
+        background-color: #ffe9c2;
+      }
+    }
+    .code-slot {
+      color: #333;
+    }
+    .codemirror-editor {
+      &::-webkit-scrollbar {
+        background-color: #f5f5f5;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #c1c1c1;
+        &:hover {
+          background-color: #a8a8a8;
+        }
+      }
+    }
+    .ai-prompt-panel {
+      background: rgba(255, 255, 255, 0.98);
+      border-color: #409eff;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+      .ai-panel-head {
+        color: #333;
+      }
+      .ai-input {
+        border-color: #dcdfe6;
+        background: #fff;
+        color: #333;
+        &:focus {
+          border-color: #409eff;
+        }
+      }
+      .ai-panel-foot {
+        color: #606266;
+        .ai-btn.is-disabled {
+          background: #c0c4cc;
+        }
+      }
+      .ai-error {
+        color: #f56c6c;
+      }
+      .ai-history-entry {
+        border-color: #dcdfe6;
+        color: #606266;
+        &:hover,
+        &.is-active {
+          color: #fff;
+        }
+      }
+    }
+    .ai-history-panel {
+      background: rgba(255, 255, 255, 0.98);
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+      .ai-history-head {
+        color: #333;
+      }
+      .ai-btn.plain {
+        border-color: #dcdfe6;
+        color: #606266;
+      }
+      .ai-history-empty {
+        color: #606266;
+      }
+      .ai-history-item {
+        border-top-color: #ebeef5;
+      }
+      .ai-history-q {
+        color: #333;
+      }
+      .ai-history-label .ai-history-scope {
+        color: #606266;
+      }
+      .ai-history-pre {
+        background: #f5f7fa;
+        color: #333;
+      }
+    }
+  }
   .code-slot {
     width: 100%;
     font-family: 'Fira Code', 'Roboto Mono', Consolas, 'Microsoft Yahei';
     line-height: 25px;
-    font-size: 16px;
+    font-size: 12px;
     padding-left: 29.77px;
     color: #ffffff;
   }
   .cm-editor {
     .cm-line {
+      // 给下面的 .cm-activeLine::before 当定位父级
+      position: relative;
       font-size: 16px;
       line-height: 25px;
       font-family: 'Fira Code', 'Roboto Mono', Consolas, 'Microsoft Yahei';
     }
+    /* 当前行高亮 vs 选中区，必须一眼能区分 —— 这里真正的坑不是配色而是**绘制层级**：
+       CM6 的选区画在 .cm-selectionLayer 上（drawSelection 内部 above:false，z-index 取 -1-pos，是负数），
+       它和 .cm-content 同在 .cm-scroller 这个层叠上下文里；而 .cm-line 是普通 in-flow 块，
+       按 CSS 绘制顺序「负 z-index 后代 → in-flow 块 → 行内内容」，**in-flow 块画在选区层之上**。
+       所以给 .cm-line 设不透明背景会把选区整块盖掉 —— baseTheme 自带的
+       &light .cm-activeLine: #cceeff44 / &dark: #99eeff33 是半透明的，才不会盖住，
+       之前改成了不透明色，选区就被糊掉了。
+       解法：把当前行高亮挪到 ::before 上并压到 z-index:-100，绘制顺序变成
+         当前行底(-100) → 选区层(-2) → 文字
+       选中区永远压在当前行高亮之上，同时仍然在文字之下。 */
+    .cm-line.cm-activeLine::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: -100;
+      pointer-events: none;
+      background-color: #173541;
+    }
+    // 当前行高亮改由上面的 ::before 承载；这里必须把主题自带的**不透明**底色清掉，
+    // 否则它作为 in-flow 块的背景仍然会盖住选区层（solarizedDark 的 .cm-activeLine 就是 #173541，
+    // 和它的 selection 同色，这正是最初「选中区看不出来」的根源）。
+    .cm-activeLine {
+      background-color: transparent;
+    }
+    .cm-activeLineGutter {
+      background-color: #173541;
+    }
+    /* 选区色必须带 !important：CM 6.39 的 baseTheme 把默认色写成了
+       "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground"
+       这种「5 个类 + 子代选择器」，权重高于本组件、也高于 solarizedDark 自带的主题，
+       光堆类名盖不住；用 !important 也不用跟它的 DOM 结构绑死。 */
+    .cm-selectionBackground {
+      /* 失焦：压暗一档 */
+      background-color: #204a5a !important;
+    }
+    &.cm-focused .cm-selectionBackground {
+      /* 双击选词、拖选都走这个色，和当前行的中性色明确区分 */
+      background-color: #2c6076 !important;
+    }
   }
   .codemirror-editor {
     &::-webkit-scrollbar {
@@ -266,6 +815,312 @@ onMounted(() => {
       }
     }
   }
+  .ai-prompt-panel {
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    bottom: 34px;
+    z-index: 10;
+    padding: 6px 8px;
+    border: 1px solid #409eff;
+    border-radius: 4px;
+    background: rgba(15, 43, 54, 0.96);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+    .ai-panel-head {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      color: #fff;
+      .ai-tag {
+        margin-right: 6px;
+        padding: 0 4px;
+        border-radius: 2px;
+        background: #409eff;
+        font-size: 11px;
+        line-height: 16px;
+      }
+      .ai-scope {
+        flex: 1;
+        opacity: 0.7;
+      }
+      .ai-history-entry {
+        margin-right: 8px;
+        padding: 0 4px;
+        border: 1px solid rgba(255, 255, 255, 0.35);
+        border-radius: 2px;
+        font-size: 11px;
+        line-height: 15px;
+        cursor: pointer;
+        opacity: 0.8;
+        &:hover,
+        &.is-active {
+          border-color: #409eff;
+          background: #409eff;
+          opacity: 1;
+        }
+      }
+      .ai-close {
+        cursor: pointer;
+        font-size: 16px;
+        line-height: 16px;
+        opacity: 0.7;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+    .ai-input {
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
+      margin: 5px 0;
+      padding: 4px 6px;
+      border: 1px solid #2f5d6c;
+      border-radius: 3px;
+      background: #173541;
+      color: #fff;
+      font-size: 12px;
+      line-height: 18px;
+      resize: vertical;
+      outline: none;
+      overflow-wrap: break-word;
+      word-break: break-all;
+      &:focus {
+        border-color: #409eff;
+      }
+      &:disabled {
+        opacity: 0.6;
+      }
+    }
+    .ai-panel-foot {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 12px;
+      color: #fff;
+      .ai-tip {
+        opacity: 0.6;
+      }
+      .ai-btn {
+        padding: 1px 10px;
+        border-radius: 3px;
+        background: #409eff;
+        cursor: pointer;
+        &.danger {
+          background: #f56c6c;
+        }
+        &.is-disabled {
+          background: #6b7c85;
+          cursor: not-allowed;
+        }
+      }
+    }
+    .ai-error {
+      margin-top: 4px;
+      font-size: 12px;
+      color: #f56c6c;
+      word-break: break-all;
+    }
+  }
+  .ai-history-panel {
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    bottom: 34px;
+    z-index: 11;
+    display: flex;
+    flex-direction: column;
+    max-height: 62%;
+    padding: 6px 8px;
+    border: 1px solid #409eff;
+    border-radius: 4px;
+    background: rgba(15, 43, 54, 0.98);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+    .ai-history-head {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      color: #fff;
+      .ai-tag {
+        margin-right: 6px;
+        padding: 0 4px;
+        border-radius: 2px;
+        background: #409eff;
+        font-size: 11px;
+        line-height: 16px;
+      }
+      .ai-scope {
+        flex: 1;
+        opacity: 0.7;
+      }
+      .ai-btn.plain {
+        margin-right: 8px;
+      }
+      .ai-close {
+        cursor: pointer;
+        font-size: 16px;
+        line-height: 16px;
+        opacity: 0.7;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+    .ai-btn.plain {
+      padding: 1px 6px;
+      border: 1px solid rgba(255, 255, 255, 0.35);
+      border-radius: 3px;
+      background: transparent;
+      font-size: 11px;
+      cursor: pointer;
+      &:hover {
+        border-color: #409eff;
+        color: #409eff;
+      }
+    }
+    .ai-history-empty {
+      padding: 12px 0;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      opacity: 0.6;
+    }
+    .ai-history-list {
+      flex: 1;
+      margin-top: 4px;
+      overflow-y: auto;
+    }
+    .ai-history-item {
+      border-top: 1px solid rgba(255, 255, 255, 0.12);
+      &:first-child {
+        border-top: none;
+      }
+    }
+    .ai-history-q {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 0;
+      color: #fff;
+      font-size: 12px;
+      cursor: pointer;
+      &:hover {
+        background: rgba(64, 158, 255, 0.15);
+      }
+      .ai-history-time {
+        flex: none;
+        font-size: 11px;
+        opacity: 0.55;
+      }
+      .ai-history-text {
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .ai-history-toggle {
+        flex: none;
+        font-size: 11px;
+        color: #409eff;
+      }
+    }
+    .ai-history-body {
+      padding-bottom: 6px;
+    }
+    .ai-history-label {
+      display: flex;
+      align-items: center;
+      margin: 2px 0;
+      color: #409eff;
+      font-size: 11px;
+      .ai-history-scope {
+        margin-left: 6px;
+        color: #fff;
+        opacity: 0.6;
+      }
+      .ai-btn.plain {
+        margin-left: auto;
+      }
+    }
+    .ai-history-pre {
+      max-height: 170px;
+      margin: 0 0 6px;
+      padding: 4px 6px;
+      overflow: auto;
+      border-radius: 3px;
+      background: #173541;
+      color: #fff;
+      font-family: 'Fira Code', 'Roboto Mono', Consolas, 'Microsoft Yahei';
+      font-size: 12px;
+      line-height: 18px;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+  }
+  /* 放大场景（window-form 的「放大」抽屉）：编辑区撑满整个抽屉，AI 面板仍是 12px / 2 行会显得很局促，
+     这里整体提一档字号、加两行输入高度、面板内边距与历史面板高度同步放大。
+     选择器带 .is-ai-large 是为了权重高于上面 .is-light 里的同名规则，不依赖书写顺序。 */
+  &.is-ai-large {
+    .ai-prompt-panel,
+    .ai-history-panel {
+      left: 12px;
+      right: 12px;
+      bottom: 46px;
+      padding: 10px 12px;
+      border-radius: 6px;
+      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
+    }
+    .ai-prompt-panel {
+      .ai-panel-head,
+      .ai-panel-foot {
+        font-size: 14px;
+      }
+      .ai-tag {
+        font-size: 12px;
+        line-height: 18px;
+      }
+      .ai-history-entry {
+        font-size: 12px;
+        line-height: 18px;
+      }
+      .ai-input {
+        margin: 8px 0;
+        padding: 6px 8px;
+        font-size: 14px;
+        line-height: 22px;
+      }
+      .ai-btn {
+        padding: 3px 14px;
+        font-size: 14px;
+      }
+      .ai-error {
+        font-size: 14px;
+      }
+    }
+    .ai-history-panel {
+      max-height: 72%;
+      .ai-history-head,
+      .ai-history-q {
+        font-size: 14px;
+      }
+      .ai-history-toggle,
+      .ai-history-time {
+        font-size: 12px;
+      }
+      .ai-history-label {
+        font-size: 12px;
+        .ai-btn.plain {
+          font-size: 12px;
+        }
+      }
+      .ai-history-pre {
+        max-height: 300px;
+        padding: 6px 8px;
+        font-size: 13px;
+        line-height: 21px;
+      }
+    }
+  }
   .editor-operation-btn {
     position: absolute;
     bottom: 1px;
@@ -284,10 +1139,26 @@ onMounted(() => {
       cursor: pointer;
       line-height: 24px;
     }
+    .ai-entry {
+      margin: 0 5px;
+      padding: 0 4px;
+      border-radius: 2px;
+      background: rgba(255, 255, 255, 0.22);
+      color: #fff;
+      font-size: 12px;
+      font-weight: bolder;
+      line-height: 18px;
+      cursor: pointer;
+    }
     &:hover {
       opacity: 1;
       background: #409eff;
     }
+    /* 未聚焦：淡出并停止接收事件（仅用 opacity:0 会留下一个看不见但能点到的区域） */
+    &.is-hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
   }
 }
 </style>

package/README.md

@@ -0,0 +1,100 @@
+# yh-codemirror
+
+Vue3 的 CodeMirror6 封装，在全屏 / 美化 / 全选 / 复制 / 清空 等基础能力之上，提供 **AI 提示编辑**（选中或整篇代码 → 自然语言描述 → AI 改写回写）。
+
+## 基础用法
+
+```vue
+<yh-codemirror
+  v-model="code"
+  :height="500"
+  language="javascript"
+  :autocomplete="{javascript: myCompletionSource}">
+</yh-codemirror>
+```
+
+## AI 提示编辑
+
+组件本身**不内置任何 AI 服务**（保持零业务依赖），由宿主通过 `aiRequest` 注入请求实现。传入 `aiRequest` 即自动启用：
+
+- 编辑器右下角出现 `AI` 入口按钮
+- 快捷键 `Ctrl+I`（Mac `Cmd+I`，可通过 `aiHotkey` 改）唤起输入框
+- 有选区 → 只改写选中代码；无选区 → 按 `aiScope` 作用于整个文档或光标处插入
+- `Enter` 发送、`Esc` 取消；请求中按钮变「停止」，可中断
+- 支持流式：调用 `onChunk` 逐段返回，编辑器实时写入；非流式则直接返回完整替换文本
+- 自动剥离模型常见的 ` ```lang ... ``` ` 包裹
+- 通过 dispatch 写入，保留 CodeMirror 撤销栈，可 `Ctrl+Z` 回退
+- **历史问答**：输入框右上角「历史」可查看本轮会话问过的问题与 AI 的完整回答（可展开、可复制、可清空）
+
+历史记录存在 `ai-history.js` 的模块级单例里（上限 50 条，最新在前）。之所以不放组件内：
+配置面板里的编辑器会随切换配置项反复卸载重建，组件内的 ref 一卸载就没了。
+代价是同一页面所有编辑器共用一份（未做分组），所以每条都带时间与问题原文；需要按字段分组时再给 `pushAiHistory` 加 key 维度。
+
+### Props
+
+| 参数            | 类型                              | 默认值     | 说明                                                   |
+| --------------- | --------------------------------- | ---------- | ------------------------------------------------------ |
+| `aiRequest`     | `AiCodeEditRequest`               | -          | AI 请求函数，传入即启用 AI 编辑                        |
+| `aiHotkey`      | `string`                          | `'Mod-i'`  | 唤起输入框的快捷键（CodeMirror 键位语法）              |
+| `aiPlaceholder` | `string`                          | 见源码     | 输入框占位提示                                         |
+| `aiScope`       | `'document' \| 'cursor'`          | `'document'` | 无选区时的作用范围                                   |
+| `aiPanelSize`   | `'normal' \| 'large'`             | `'normal'` | AI 输入框 / 历史面板的尺寸档位。编辑区被放大时（如 window-form 的「放大」抽屉）传 `large` |
+
+### Events
+
+| 事件             | 参数                          | 说明                     |
+| ---------------- | ----------------------------- | ------------------------ |
+| `update:modelValue` | `string`                   | 代码变更（原有）         |
+| `ai-apply`       | `{prompt, text}`              | AI 结果已写入编辑器      |
+| `ai-error`       | `Error`                       | AI 请求失败              |
+
+### Expose
+
+`openAi(prompt?)`、`closeAi()`、`stopAi()`、`getView()`。
+
+### 接入示例（非流式）
+
+```ts
+import {YhCodemirror} from 'yh-codemirror';
+import type {AiCodeEditRequest} from 'yh-codemirror';
+
+const aiRequest: AiCodeEditRequest = async ({prompt, code, selectedCode, language, signal}) => {
+  const res = await fetch('/api/ai/code-edit', {
+    method: 'POST',
+    signal,
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({prompt, code, selectedCode, language}),
+  });
+  if (!res.ok) {
+    throw new Error('AI 请求失败');
+  }
+  const data = await res.json();
+  // 返回「作用范围的完整替换文本」，组件负责写入
+  return data.code;
+};
+```
+
+### 接入示例（流式 SSE）
+
+```ts
+const aiRequest: AiCodeEditRequest = async ({prompt, selectedCode, signal, onChunk}) => {
+  const res = await fetch('/api/ai/code-edit/stream', {
+    method: 'POST',
+    signal,
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({prompt, code: selectedCode}),
+  });
+  const reader = res.body!.getReader();
+  const decoder = new TextDecoder();
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      break;
+    }
+    onChunk?.(decoder.decode(value, {stream: true}));
+  }
+  // 走 onChunk 时返回值可为空，组件已实时写入编辑器
+};
+```
+
+> 提示：流式场景下 `onChunk` 传入的是增量片段，组件按累积文本整体覆盖作用区间，因此服务端无需自行做 diff。

package/ai-history.js

@@ -0,0 +1,42 @@
+/**
+ * AI 问答历史（模块级单例）。
+ *
+ * 为什么放模块级而不是组件内：window-form 这类配置面板里，代码编辑器会随着切换配置项/关闭抽屉
+ * 反复卸载重建，组件内的 ref 一卸载就没了，历史根本留不住。放在模块级只要页面不刷新就一直在。
+ *
+ * 代价是同一页面里所有编辑器共用一份历史（未做分组），所以每条都带上时间与问题原文，
+ * 靠问题内容本身区分是哪个字段的提问。需要按字段分组时再给 pushAiHistory 加 key 维度。
+ */
+import {ref} from 'vue';
+
+/** 最多保留多少条（超出丢最旧的） */
+const MAX_HISTORY = 50;
+
+/**
+ * @type {import('vue').Ref<Array<{id:number, time:string, prompt:string, scope:string, answer:string}>>}
+ * 最新的排在最前面
+ */
+export const aiHistory = ref([]);
+
+let seed = 0;
+
+const nowText = () => {
+  const d = new Date();
+  const pad = (n) => String(n).padStart(2, '0');
+  return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(
+    d.getSeconds()
+  )}`;
+};
+
+/** 追加一条：{prompt, scope, answer} */
+export const pushAiHistory = ({prompt, scope = '', answer = ''}) => {
+  if (!prompt && !answer) return;
+  aiHistory.value = [{id: ++seed, time: nowText(), prompt, scope, answer}, ...aiHistory.value].slice(
+    0,
+    MAX_HISTORY
+  );
+};
+
+export const clearAiHistory = () => {
+  aiHistory.value = [];
+};

package/index.ts

@@ -0,0 +1,3 @@
+import YhCodemirror from './CodeMirror.vue';
+export {YhCodemirror};
+export type {AiCodeEditParams, AiCodeEditRequest} from './util';

package/package.json

@@ -1,10 +1,16 @@
 {
   "name": "yh-codemirror",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "wraper codemirror with vue3",
-  "main": "index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "types": "./index.ts"
+    }
+  },
   "scripts": {
-    "pub": "npm publish --registry https://registry.npmjs.org/ --no-git-checks && npm publish --registry https://packages.aliyun.com/60765e0161a945067837bb5f/npm/npm-registry/ --no-git-checks"
+    "pub": "npm publish --registry https://registry.npmjs.org/ && npm publish --registry https://packages.aliyun.com/60765e0161a945067837bb5f/npm/npm-registry/"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.16.3",
@@ -15,13 +21,15 @@
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/language": "^6.10.2",
     "@codemirror/view": "^6.28.2",
+    "@lezer/highlight": "^1.2.0",
+    "cm6-theme-solarized-dark": "^0.1.0",
     "codemirror": "^6.0.1",
     "js-beautify": "^1.15.1"
   },
   "peerDependencies": {
-    "vue-i18n": "9.8.0",
-    "vue": "3.2.47",
-    "element-plus": "2.3.8"
+    "vue-i18n": "^9.8.0",
+    "vue": "^3.5.0",
+    "element-plus": "^2.9.0"
   },
   "author": "Liubin"
 }

package/util.ts

@@ -12,6 +12,32 @@ const plugins = {
   html: () => html(),
 };
 
+/**
+ * AI 提示编辑：宿主注入的请求参数
+ */
+export interface AiCodeEditParams {
+  /** 用户输入的提示词 */
+  prompt: string;
+  /** 编辑器全文代码 */
+  code: string;
+  /** 本次作用范围的代码（有选区=选中内容；无选区=全文或空串） */
+  selectedCode: string;
+  /** 当前编辑器语言 */
+  language?: string | string[];
+  /** 用于中断请求（用户点“停止”/关闭面板时触发） */
+  signal: AbortSignal;
+  /** 流式输出回调：逐段返回内容，组件会实时写入编辑器 */
+  onChunk?: (chunk: string) => void;
+}
+
+/**
+ * AI 提示编辑：宿主注入的请求函数。
+ * 返回值需为「作用范围的完整替换文本」；若走流式（onChunk 逐段返回），返回值可为空。
+ */
+export type AiCodeEditRequest = (
+  params: AiCodeEditParams
+) => Promise<string | void | {text?: string; code?: string; content?: string}>;
+
 export const getCodeLanguagePlugin = function (language) {
   return plugins[language]();
 };