@aiao/code-editor-vue

@aiao/code-editor-vue

基于 CodeMirror 6 的 Vue 3 代码编辑器组件。

安装

pnpm add @aiao/code-editor-vue

使用

<script lang="ts" setup>
import { ref } from 'vue';
import { CodeEditor } from '@aiao/code-editor-vue';

const code = ref('const answer = 42;');
</script>

<template>
  <CodeEditor
    v-model:value="code"
    @blur="console.log('blur')"
    @focus="console.log('focus')"
    language="typescript"
    theme="dark"
  />
</template>

v-model:value 同步 value / update:value。change 只在用户修改文档时触发，外部 value 更新不会反向触发。

Props

空字符串或 plaintext 会清空语言扩展。未知语言和加载失败会降级为纯文本并发出 language-error （见下），编辑器本身继续可用。快速切换语言时，只有最后一次请求可以更新当前编辑器。

自定义语言列表使用核心包的公开类型：

import type { CodeEditorLanguageDescription } from '@aiao/code-editor';

declare const myLanguage: CodeEditorLanguageDescription;
const languages: readonly CodeEditorLanguageDescription[] = [myLanguage];

<CodeEditor v-model:value="code" :languages="languages" language="my-language" />

Events

语言错误

降级为纯文本时编辑器仍然可用，但宿主需要能观测到这件事 —— language-error 就是这个通道：

<script lang="ts" setup>
import type { CodeEditorLanguageError } from '@aiao/code-editor';
import { CodeEditor } from '@aiao/code-editor-vue';

function onLanguageError(error: CodeEditorLanguageError) {
  // 'not-found' 是配置错误，重试没有意义；'load-failed' 通常是网络或分包问题，可以重试。
  if (error.kind === 'load-failed') retry(error.language);
}
</script>

<template>
  <CodeEditor :language="lang" @language-error="onLanguageError" />
</template>

载荷形状（kind / language / message / cause）由核心包定义，三端一致： Angular 是 (aoLanguageError) 输出，React 是 onLanguageError 回调。

模板 ref 用法

组件通过 defineExpose 暴露命令式 API，供模板 ref 访问底层 EditorView：

<script lang="ts" setup>
import { ref } from 'vue';
import { CodeEditor } from '@aiao/code-editor-vue';
import type { CodeEditorExpose } from '@aiao/code-editor-vue';

const editorRef = ref<CodeEditorExpose | null>(null);
const code = ref('const answer = 42;');

function focusEditor() {
  editorRef.value?.focus();
}
</script>

<template>
  <CodeEditor v-model:value="code" ref="editorRef" />
</template>

四个成员与 React 的 CodeEditorHandle、Angular 组件实例上的同名成员逐字对齐，跨端迁移时命令式面不需要改写：

公开类型

import type {
  CodeEditorEmits,
  CodeEditorExpose,
  CodeEditorProps,
  CodeEditorSetup,
  CodeEditorTheme
} from '@aiao/code-editor-vue';