@opentiny/fluent-editor 4.0.0-alpha.11 → 4.0.0-alpha.12

package/scripts/apply-patches.cjs

@@ -0,0 +1,248 @@
+const { execSync } = require('node:child_process')
+const fs = require('node:fs')
+const path = require('node:path')
+
+/*
+ * 应用 Quill 补丁脚本
+ * 功能：修复 Quill 编辑器输入法状态下的批处理问题，提升中文输入体验
+ *
+ * 自动应用：安装包时 postinstall 脚本自动应用，支持所有包管理器-受限于 postinstall 规则暂未实现
+ *
+ * 手动应用：在项目根目录执行
+ *   node node_modules/@opentiny/fluent-editor/scripts/apply-patches.cjs
+ *
+ * 工作原理：
+ *   1. 检测包管理器类型（pnpm/npm/yarn）
+ *   2. 自动检测 Quill 安装位置
+ *   3. 根据包管理器类型应用不同的补丁策略
+ *
+ * 注意事项：
+ *   - 补丁是幂等的，多次运行无副作用
+ *   - 需要 node_modules 写入权限
+ *   - 不影响其他包或项目的补丁
+ */
+
+// 获取包管理器
+function detectPackageManager() {
+  try {
+    const lockFiles = {
+      'pnpm-lock.yaml': 'pnpm',
+      'yarn.lock': 'yarn',
+      'package-lock.json': 'npm',
+    }
+
+    for (const [file, manager] of Object.entries(lockFiles)) {
+      if (fs.existsSync(file)) return manager
+    }
+
+    const userAgent = process.env.npm_config_user_agent || ''
+    if (userAgent.includes('pnpm')) return 'pnpm'
+    if (userAgent.includes('yarn')) return 'yarn'
+    if (userAgent.includes('npm')) return 'npm'
+  }
+  catch {
+    return 'npm'
+  }
+
+  return 'npm'
+}
+
+// 拷贝 patches 文件
+function copyPatchFile() {
+  const packageManager = detectPackageManager()
+  // 把 patch 文件复制到哪里
+  const dest = `patches/${packageManager === 'pnpm' ? 'quill@2.0.3.patch' : 'quill+2.0.3.patch'}`
+
+  // 文件存在直接返回
+  if (fs.existsSync(dest)) {
+    return true
+  }
+
+  // 复制 patch 文件的路径
+  const src = path.resolve(__dirname, '../patches/quill@2.0.3.patch')
+
+  if (fs.existsSync(src)) {
+    fs.mkdirSync('patches', { recursive: true })
+
+    if (packageManager === 'pnpm') {
+      fs.copyFileSync(src, dest)
+    }
+    else {
+      let content = fs.readFileSync(src, 'utf-8')
+      content = content.replaceAll('core/editor.js', 'node_modules/quill/core/editor.js')
+      fs.writeFileSync(dest, content)
+    }
+
+    console.log(`✅ 已复制 patch 文件到 ${dest}`)
+    return true
+  }
+  else {
+    console.log(`⚠️  未找到 patch 文件，请手动创建 ${dest}`)
+    return false
+  }
+}
+
+// pnpm 应用 patch 文件
+function setupPnpmPatch() {
+  try {
+    const packageJsonPath = 'package.json'
+    if (!fs.existsSync(packageJsonPath)) {
+      console.log('⚠️  未找到 package.json')
+      return false
+    }
+
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
+
+    // 检查是否已经有 pnpm.patchedDependencies 配置
+    if (packageJson.pnpm?.patchedDependencies?.['quill@2.0.3']) {
+      console.log('✅ pnpm patchedDependencies 已配置')
+      return true
+    }
+
+    // 添加 pnpm.patchedDependencies 配置
+    if (!packageJson.pnpm) {
+      packageJson.pnpm = {}
+    }
+
+    if (!packageJson.pnpm.patchedDependencies) {
+      packageJson.pnpm.patchedDependencies = {}
+    }
+
+    packageJson.pnpm.patchedDependencies['quill@2.0.3'] = 'patches/quill@2.0.3.patch'
+
+    fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
+    console.log('✅ 已添加 pnpm patchedDependencies 配置')
+
+    try {
+      execSync('pnpm install', { stdio: 'inherit' })
+      console.log('✅ pnpm patch quill@2.0.3 应用成功！')
+    }
+    catch (error) {
+      console.warn('❌ pnpm patch 命令执行失败：', error.message)
+    }
+
+    return true
+  }
+  catch (error) {
+    console.error('❌ pnpm 补丁配置失败:', error.message)
+    return false
+  }
+}
+
+// npm、yarn 应用 patch 文件
+function applyPatchPackage() {
+  try {
+    const packageManager = detectPackageManager()
+
+    // 检查 patch-package 是否安装
+    let patchPackageInstalled = false
+    try {
+      require.resolve('patch-package')
+      patchPackageInstalled = true
+    }
+    catch (e) {
+      // patch-package 未安装
+    }
+
+    if (!patchPackageInstalled) {
+      console.log('📦 正在安装 patch-package...')
+      try {
+        const installCommand = packageManager === 'yarn' ? 'yarn add --dev patch-package' : 'npm install --save-dev patch-package'
+        execSync(installCommand, { stdio: 'inherit' })
+        console.log('✅ patch-package 安装成功')
+      }
+      catch (error) {
+        console.error('❌ patch-package 安装失败:', error.message)
+        return false
+      }
+    }
+
+    // 应用补丁
+    console.log('🔄 正在应用 patch...')
+    try {
+      execSync('npx patch-package', { stdio: 'inherit' })
+      console.log('✅ 补丁应用成功')
+    }
+    catch (error) {
+      console.error('❌ 补丁应用失败:', error.message)
+      return false
+    }
+
+    // 添加 postinstall 脚本
+    const packageJsonPath = 'package.json'
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
+
+    if (!packageJson.scripts) {
+      packageJson.scripts = {}
+    }
+
+    if (!packageJson.scripts.postinstall || !packageJson.scripts.postinstall.includes('patch-package')) {
+      const existingPostinstall = packageJson.scripts.postinstall || ''
+      packageJson.scripts.postinstall = existingPostinstall ? `${existingPostinstall} && npx patch-package` : 'npx patch-package'
+
+      fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
+      console.log('✅ 已更新 postinstall 脚本')
+    }
+
+    return true
+  }
+  catch (error) {
+    console.error('❌ patch-package 应用失败:', error.message)
+    return false
+  }
+}
+
+function handlePatchFailure() {
+  console.log(`
+❌ 补丁处理失败，请尝试手动安装
+
+🔧 手动安装：
+   在项目根目录执行：
+   node node_modules/@opentiny/fluent-editor/scripts/apply-patches.cjs
+
+⚠️  注意：未应用补丁可能影响中文输入体验
+`)
+}
+
+function applyQuillPatch() {
+  const packageManager = detectPackageManager()
+  console.log(`🔍 检测到包管理器: ${packageManager}`)
+  console.log('📋 准备 patch 文件...')
+
+  if (!copyPatchFile()) return handlePatchFailure()
+
+  let strategy
+  if (packageManager == 'pnpm') {
+    strategy = {
+      label: '📦 使用 pnpm 补丁策略...',
+      handler: setupPnpmPatch,
+      successMsg: '✅ quill@2.0.3.patch 补丁配置已完成',
+    }
+  }
+  else {
+    strategy = {
+      label: '📦 使用 patch-package 补丁策略...',
+      handler: applyPatchPackage,
+      successMsg: '🎉 补丁处理完成',
+    }
+  }
+
+  if (!strategy) {
+    console.log('❌ 不支持的包管理器，仅支持 pnpm、yarn、npm')
+    handlePatchFailure()
+    return
+  }
+
+  console.log(strategy.label)
+  // 调用处理函数
+  const success = strategy.handler()
+
+  if (success) {
+    console.log(strategy.successMsg)
+  }
+  else {
+    handlePatchFailure()
+  }
+}
+
+applyQuillPatch()

package/types/modules/collaborative-editing/awareness/awareness.d.ts

@@ -1,7 +1,7 @@
 import { default as QuillCursors } from 'quill-cursors';
 import { Awareness } from 'y-protocols/awareness';
 import { default as FluentEditor } from '../../../core/fluent-editor';
-import * as Y from 'yjs';
+import type * as Y from 'yjs';
 export interface AwarenessState {
     name?: string;
     color?: string;
@@ -25,4 +25,4 @@ export interface AwarenessOptions {
     timeout?: number | undefined;
 }
 export declare function setupAwareness(options?: AwarenessOptions, defaultAwareness?: Awareness): Awareness | null;
-export declare function bindAwarenessToCursors(awareness: Awareness, cursorsModule: QuillCursors, quill: FluentEditor, yText: Y.Text): (() => void) | void;
+export declare function bindAwarenessToCursors(awareness: Awareness, cursorsModule: QuillCursors, quill: FluentEditor, yText: Y.Text, Yjs: typeof Y): (() => void) | void;

package/types/modules/collaborative-editing/awareness/y-indexeddb.d.ts

@@ -1,2 +1,3 @@
-import { Doc } from 'yjs';
-export declare function setupIndexedDB(doc: Doc): () => void;
+import { IndexeddbPersistence } from 'y-indexeddb';
+import type * as Y from 'yjs';
+export declare function setupIndexedDB(doc: Y.Doc, IndexeddbPersistenceClass?: typeof IndexeddbPersistence): () => void;

package/types/modules/collaborative-editing/collaborative-editing.d.ts

@@ -1,9 +1,9 @@
+import { default as QuillCursors } from 'quill-cursors';
+import { Awareness } from 'y-protocols/awareness';
 import { default as FluentEditor } from '../../fluent-editor';
 import { UnifiedProvider } from './provider/providerRegistry';
 import { YjsOptions } from './types';
-import { default as QuillCursors } from 'quill-cursors';
-import { Awareness } from 'y-protocols/awareness';
-import * as Y from 'yjs';
+import type * as Y from 'yjs';
 export declare class CollaborativeEditor {
     quill: FluentEditor;
     options: YjsOptions;
@@ -13,6 +13,7 @@ export declare class CollaborativeEditor {
     private cursors;
     private cleanupBindings;
     private clearIndexedDB;
+    private deps;
     constructor(quill: FluentEditor, options: YjsOptions);
     getAwareness(): Awareness;
     getProvider(): UnifiedProvider;

package/types/modules/collaborative-editing/provider/providerRegistry.d.ts

@@ -1,5 +1,5 @@
 import { Awareness } from 'y-protocols/awareness';
-import { ProviderEventHandlers } from '../types';
+import { CollaborativeEditingDeps, ProviderEventHandlers } from '../types';
 import type * as Y from 'yjs';
 export type ProviderRegistry = Record<string, ProviderConstructor>;
 export type ProviderConstructor<T = any> = new (props: ProviderConstructorProps<T>) => UnifiedProvider;
@@ -7,6 +7,7 @@ export type ProviderConstructorProps<T = any> = {
     options: T;
     awareness?: Awareness;
     doc?: Y.Doc;
+    deps?: CollaborativeEditingDeps;
 } & ProviderEventHandlers;
 export interface UnifiedProvider extends ProviderEventHandlers {
     awareness: Awareness;

package/types/modules/collaborative-editing/provider/webrtc.d.ts

@@ -1,8 +1,8 @@
 import { Awareness } from 'y-protocols/awareness';
-import { ProviderEventHandlers } from '../types';
-import { UnifiedProvider } from './providerRegistry';
 import { WebrtcProvider } from 'y-webrtc';
-import * as Y from 'yjs';
+import { CollaborativeEditingDeps, ProviderEventHandlers } from '../types';
+import { UnifiedProvider } from './providerRegistry';
+import type * as Y from 'yjs';
 export interface WebRTCProviderOptions {
     roomName: string;
     filterBcConns?: boolean;
@@ -25,10 +25,11 @@ export declare class WebRTCProviderWrapper implements UnifiedProvider {
     connect: () => void;
     destroy: () => void;
     disconnect: () => void;
-    constructor({ awareness, doc, options, onConnect, onDisconnect, onError, onSyncChange, }: {
+    constructor({ awareness, doc, options, onConnect, onDisconnect, onError, onSyncChange, deps, }: {
         options: WebRTCProviderOptions;
         awareness?: Awareness;
         doc?: Y.Doc;
+        deps?: CollaborativeEditingDeps;
     } & ProviderEventHandlers);
     get isConnected(): boolean;
     get isSynced(): boolean;

package/types/modules/collaborative-editing/provider/websocket.d.ts

@@ -1,13 +1,13 @@
-import { ProviderEventHandlers } from '../types';
-import { UnifiedProvider } from './providerRegistry';
 import { Awareness } from 'y-protocols/awareness';
 import { WebsocketProvider } from 'y-websocket';
-import * as Y from 'yjs';
+import { CollaborativeEditingDeps, ProviderEventHandlers } from '../types';
+import { UnifiedProvider } from './providerRegistry';
+import type * as Y from 'yjs';
 export interface WebsocketProviderOptions {
     serverUrl: string;
     roomName: string;
     connect?: boolean;
-    awareness?: any;
+    awareness?: Awareness;
     params?: Record<string, string>;
     protocols?: string[];
     WebSocketPolyfill?: typeof WebSocket;
@@ -29,10 +29,11 @@ export declare class WebsocketProviderWrapper implements UnifiedProvider {
     connect: () => void;
     destroy: () => void;
     disconnect: () => void;
-    constructor({ awareness, doc, options, onConnect, onDisconnect, onError, onSyncChange, }: {
+    constructor({ awareness, doc, options, onConnect, onDisconnect, onError, onSyncChange, deps, }: {
         options: WebsocketProviderOptions;
         awareness?: Awareness;
         doc?: Y.Doc;
+        deps?: CollaborativeEditingDeps;
     } & ProviderEventHandlers);
     get isConnected(): boolean;
     get isSynced(): boolean;

package/types/modules/collaborative-editing/types.d.ts

@@ -1,3 +1,9 @@
+import { default as QuillCursors } from 'quill-cursors';
+import { IndexeddbPersistence } from 'y-indexeddb';
+import { Awareness } from 'y-protocols/awareness';
+import { QuillBinding } from 'y-quill';
+import { WebrtcProvider } from 'y-webrtc';
+import { WebsocketProvider } from 'y-websocket';
 import { AwarenessOptions } from './awareness';
 import { WebRTCProviderOptions, WebsocketProviderOptions } from './provider';
 import type * as Y from 'yjs';
@@ -24,14 +30,24 @@ export type CustomProviderConfig = BaseYjsProviderConfig & {
     type: string;
 };
 export type CursorsConfig = boolean | object;
+export interface CollaborativeEditingDeps {
+    Y: typeof Y;
+    Awareness: typeof Awareness;
+    QuillBinding: typeof QuillBinding;
+    QuillCursors: typeof QuillCursors;
+    WebsocketProvider?: typeof WebsocketProvider;
+    WebrtcProvider?: typeof WebrtcProvider;
+    IndexeddbPersistence?: typeof IndexeddbPersistence;
+}
 export interface YjsOptions {
     ydoc?: Y.Doc;
     provider: (WebRTCProviderConfig | WebsocketProviderConfig | CustomProviderConfig);
     awareness?: AwarenessOptions;
     offline?: boolean;
     cursors?: CursorsConfig;
+    deps?: CollaborativeEditingDeps;
     onConnect?: () => void;
     onDisconnect?: () => void;
-    onError?: (error: any) => void;
+    onError?: (error: Error) => void;
     onSyncChange?: (isSynced: boolean) => void;
 }

package/types/modules/mind-map/options.d.ts

@@ -16,6 +16,7 @@ export interface MindMapDeps {
     Themes: any;
     Drag: any;
     Export: any;
+    nodeIconList: any;
 }
 export interface MindMapOptions {
     background?: boolean | BackgroundConfig;

package/lib/modules/flow-chart/style/flow-chart.css

@@ -1,185 +0,0 @@
-.ql-flow-chart-item {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.ql-flow-chart-control {
-  position: absolute;
-  top: 8px;
-  right: 50px;
-  display: none;
-  gap: 6px;
-  white-space: nowrap;
-  pointer-events: auto;
-  padding: 5px 5px;
-  background-color: rgba(255, 255, 255, 0.85);
-  border-radius: 8px;
-  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
-}
-.ql-flow-chart-control .ql-flow-chart-control-item {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 5px 5px;
-  border-radius: inherit;
-  transition: all 0.2s ease;
-}
-
-.ql-flow-chart-item .lf-dndpanel {
-  display: none;
-  top: 15%;
-}
-.ql-flow-chart-item .lf-dndpanel .ql-flow-chart-control-item {
-  height: 35.99px;
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 5px 5px;
-  border-radius: inherit;
-  transition: all 0.2s ease;
-}
-
-.ql-flow-chart-control-icon {
-  width: 16px;
-  height: 16px;
-  margin-right: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ql-flow-chart-control-item i {
-  background-size: cover;
-  display: inline-block;
-  height: 20px;
-  vertical-align: middle;
-  width: 20px;
-}
-
-.ql-flow-chart-control-item.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.ql-flow-chart-control-item:hover {
-  background-color: #efefef;
-}
-
-.ql-flow-chart .lf-dndpanel .lf-dnd-text {
-  font-size: 12px;
-}
-
-.ql-flow-chart-edge-panel {
-  width: 130px;
-  position: absolute;
-  left: 50px;
-  top: 220px;
-  padding: 3px;
-  z-index: 1000;
-  max-height: 400px;
-  background-color: rgba(255, 255, 255, 0.85);
-  border-radius: 8px;
-  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
-}
-.ql-flow-chart-edge-panel .ql-flow-chart-edge-item {
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  border: 1px solid #eee;
-  border-radius: inherit;
-  padding: 2px;
-  transition: box-shadow 0.3s ease;
-}
-.ql-flow-chart-edge-panel .ql-flow-chart-edge-item .ql-flow-chart-edge-type-icon {
-  width: 20px;
-  height: 20px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.ql-flow-chart-edge-panel .ql-flow-chart-edge-item:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.ql-flow-chart-item .lf-text-input {
-  display: none !important;
-}
-
-.ql-flow-chart-right-up-control {
-  position: absolute;
-  top: 8px;
-  right: 6px;
-  display: inline-flex;
-  gap: 6px;
-  white-space: nowrap;
-  pointer-events: auto;
-  padding: 5px 5px;
-  background-color: rgba(255, 255, 255, 0.85);
-  border-radius: 8px;
-  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
-}
-.ql-flow-chart-right-up-control .ql-flow-chart-control-item {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 5px 5px;
-  border-radius: inherit;
-  transition: all 0.2s ease;
-}
-
-.lf-shape-dashed {
-  margin: 10px auto 0px auto;
-  width: 20px;
-  height: 20px;
-  background-color: transparent;
-  border: 1.5px dashed #000;
-  border-radius: 2px;
-}
-
-.lf-shape-rect {
-  margin: 10px auto 0px auto;
-  width: 20px;
-  height: 20px;
-  background-color: transparent;
-  border: 1.5px solid #000;
-  border-radius: 2px;
-}
-
-.lf-shape-circle {
-  margin: 10px auto 0px auto;
-  width: 20px;
-  height: 20px;
-  background-color: transparent;
-  border: 1.5px solid #000;
-  border-radius: 50%;
-}
-
-.lf-shape-ellipse {
-  margin: 10px auto 0px 3px;
-  width: 26px;
-  height: 20px;
-  background-color: transparent;
-  border: 1.5px solid #000;
-  border-radius: 50%;
-}
-
-.lf-shape-diamond {
-  margin: 10px auto 10px auto;
-  width: 20px;
-  height: 20px;
-  background-color: transparent;
-  border: 1.5px solid #000;
-  transform: rotate(45deg);
-}