@icreate/minimal-ai-editor

一个基于 Vue 3 + TipTap 的最小 AI 编辑器组件库，内含演示站点。

组件库入口为 src/minimal-ai-editor.js，默认导出与命名导出都指向 MinimalAiEditor.vue。

打包与产物

环境变量

请先复制模板并填写：

cp .env.production.example .env.production

生产环境推荐配置 VITE_AI_COMPLETION_ENDPOINT 指向后端代理，不建议在浏览器直接暴露模型密钥。

构建命令

pnpm run build

• pnpm run build:lib：仅构建组件库（输出到 lib/）
• pnpm run build:site：仅构建演示站点（输出到 dist/）
• pnpm run check：执行 lint + typecheck + test

组件库产物（lib/）

• minimal-ai-editor.es.js（ESM）
• minimal-ai-editor.cjs（CommonJS）
• minimal-ai-editor.umd.js（UMD，对应子路径 @icreate/minimal-ai-editor/umd）
• minimal-ai-editor.css（样式文件，对应子路径 @icreate/minimal-ai-editor/style.css）

package.json 导出映射

• main -> ./lib/minimal-ai-editor.cjs
• module -> ./lib/minimal-ai-editor.es.js
• types -> ./types/index.d.ts
• exports["."] -> import/require/types
• exports["./style.css"] -> ./lib/minimal-ai-editor.css
• exports["./umd"] -> ./lib/minimal-ai-editor.umd.js

发布包包含内容

• lib/
• types/
• README.md
• INTEGRATION.md
• CHANGELOG.md
• RELEASE.md

项目中如何引入使用

安装

pnpm add @icreate/minimal-ai-editor vue@^3.5

基础用法

import '@icreate/minimal-ai-editor/style.css'
import { MinimalAiEditor } from '@icreate/minimal-ai-editor'

<template>
  <MinimalAiEditor />
</template>

注入自定义 AI 请求

<script setup>
import '@icreate/minimal-ai-editor/style.css'
import { MinimalAiEditor } from '@icreate/minimal-ai-editor'

async function requestAi({ prompt, system, abortSignal }) {
  const res = await fetch('/api/ai/completion', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt, system }),
    signal: abortSignal,
  })
  return res
}
</script>

<template>
  <MinimalAiEditor :ai-completion="requestAi" />
</template>

配置 AI 流式渲染模式

默认是 smooth（打字机效果）。如需更快响应可切到 fast。

<script setup>
import '@icreate/minimal-ai-editor/style.css'
import { MinimalAiEditor } from '@icreate/minimal-ai-editor'
</script>

<template>
  <MinimalAiEditor
    ai-stream-mode="fast"
    :ai-stream-chunk-size="8"
    :ai-stream-chunk-delay-ms="10"
  />
</template>

• ai-stream-mode：smooth | fast
• ai-stream-chunk-size：仅 smooth 生效，每次推进字符数
• ai-stream-chunk-delay-ms：仅 smooth 生效，每次推进延迟（ms）

常用参数（详见 types/index.d.ts）：

• ai-completion：注入自定义 AI 请求方法
• toolbar-preset：document | comment | note | custom
• disabled-tools：按工具 ID 禁用工具栏按钮
• features：按分组开关功能（markdown、search、export、page、table）

Markdown 模式切换说明

MinimalAiEditor 的 Markdown 切换行为与 umo-editor 对齐：

1. 弹出应用内确认对话框
2. 保存当前文档内容
3. 切换 Markdown 开关状态
4. 刷新页面并重建编辑器实例

由于会重建编辑器实例，切换后撤销/重做历史会被重置。

低层导出组件

除了 MinimalAiEditor，还导出了以下组件：

• MinimalEditor
• EditorToolbar
• EditorStatusBar
• EditorTocPanel
• EditorAiPanel
• PageCanvas
• PrintExportIframe
• SearchReplacePanel

更多发布流程与集成细节见 INTEGRATION.md。

Example 项目

• Vue3 集成示例：examples/vue3-integration