feat: 增加AI模块

Author: chenxi-20

packages/docs/fluent-editor/.vitepress/sidebar.ts

@@ -25,6 +25,7 @@ export function sidebar() {
         { text: '工具栏提示', link: '/docs/demo/toolbar-tip' },
         { text: '只读模式', link: '/docs/demo/readonly' },
         { text: '模拟语雀文档', link: 'https://opentiny.github.io/tiny-editor/projects' },
+        { text: 'AI', link: '/docs/demo/ai' },
       ],
     },
     {

packages/docs/fluent-editor/demos/ai.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type FluentEditor from '@opentiny/fluent-editor'
+import { onMounted } from 'vue'
+
+const TOOLBAR_CONFIG = [
+  ['ai', { header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ list: 'ordered' }, { list: 'bullet' }],
+  ['clean'],
+]
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then((module) => {
+    const FluentEditor = module.default
+
+    editor = new FluentEditor('#editor-add-toolbar-item', {
+      theme: 'snow',
+      modules: {
+        toolbar: {
+          container: TOOLBAR_CONFIG,
+        },
+        ai: {
+          host: 'http://localhost:11434',
+          model: 'deepseek-r1:8b',
+          apiKey: '',
+        },
+      },
+    })
+  })
+})
+</script>
+
+<template>
+  <div id="editor-add-toolbar-item">
+    <h3>标题：</h3>
+    <p>内容：</p>
+    <p>署名：</p>
+  </div>
+</template>

packages/docs/fluent-editor/docs/demo/ai.md

@@ -0,0 +1,6 @@
+# AI
+
+通过工具栏配置AI。
+
+:::demo src=demos/ai.vue
+:::

packages/fluent-editor/package.json

@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.15",
+    "ollama": "0.5.14",
     "quill": "^2.0.0",
     "quill-easy-color": "^0.0.9",
     "quill-shortcut-key": "^0.0.5"

packages/fluent-editor/src/assets/ai.scss

@@ -0,0 +1,101 @@
+.ql-ai-dialog {
+  position: absolute;
+  left: 15px;
+}
+
+.ql-ai-wrapper {
+  position: relative;
+  width: 100%;
+  z-index: 1000;
+}
+
+.ql-ai-tip {
+  flex-shrink: 0;
+}
+
+.ql-ai-input {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  background: white;
+  border: 1px solid #c2c2c2;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
+}
+
+.ql-ai-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ql-ai-icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.ql-ai-input input {
+  flex: 1;
+  padding: 8px;
+  border: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.ql-ai-result {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 0;
+  right: 0;
+  padding: 10px;
+  background: white;
+  border: 1px solid #c2c2c2;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.ql-ai-dropdown-button {
+  padding: 4px 8px;
+  background: #f0f0f0;
+  border: 1px solid #ddd;
+  cursor: pointer;
+}
+
+.ql-ai-actions {
+  position: absolute;
+  top: calc(100% + 10px);
+  left: 0;
+  background: white;
+  border: 1px solid #c2c2c2;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
+  z-index: 1001;
+  min-width: 100px;
+}
+
+.ql-ai-action-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  &:hover {
+    background: #f5f5f5;
+  }
+}
+
+.ql-ai-send {
+  margin-left: 8px;
+  padding: 2px 8px;
+  background: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  &:hover {
+    background: #40a9ff;
+  }
+}

packages/fluent-editor/src/assets/style.scss

@@ -25,6 +25,7 @@
 @import './fullscreen';
 @import './screenshot';
 @import './mathlive';
+@import './ai.scss';
 
 // 模块：字数统计 counter
 @include counter;

packages/fluent-editor/src/fluent-editor.ts

@@ -3,6 +3,7 @@ import { EN_US } from './config/i18n/en-us'
 import { ZH_CN } from './config/i18n/zh-cn'
 import FluentEditor from './core/fluent-editor'
 import { SoftBreak, StrikeBlot, Video } from './formats'
+import { AI } from './modules/ai' // AI
 import Counter from './modules/counter' // 字符统计
 import { CustomClipboard } from './modules/custom-clipboard' // 粘贴板
 import { BlotFormatter } from './modules/custom-image' // 图片
@@ -53,6 +54,7 @@ FluentEditor.register(
     'modules/i18n': I18N,
     'modules/image': BlotFormatter,
     'modules/mathlive': MathliveModule,
+    'modules/ai': AI,
     'modules/mention': Mention,
     'modules/syntax': Syntax,
     'modules/toolbar': BetterToolbar,