feat(emoji): @emoji-mart/data 、@floating-ui/dom 依赖外部化 (#364)

* feat(emoji): @emoji-mart/data 、@floating-ui/dom 依赖外部化

* feat(emoji): emojiData、EmojiPicker、emojiPickerPosition 支持通过 window 传入

* feat(emoji): options 默认参数

Author: vaebe

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

@@ -1,5 +1,11 @@
 <script setup lang="ts">
+import type { EmojiMartData } from '@emoji-mart/data'
 import type FluentEditor from '@opentiny/fluent-editor'
+// 这里实际导入的是一个 json 文件，包含了 emoji-mart 所需的所有表情数据，类型是 EmojiMartData
+import data from '@emoji-mart/data'
+// computePosition 函数用于计算 emoji picker显示的位置，你可以根据需要自定义位置计算逻辑
+import { computePosition } from '@floating-ui/dom'
+import { Picker } from 'emoji-mart'
 import { onMounted } from 'vue'
 
 let editor: FluentEditor
@@ -21,7 +27,11 @@ onMounted(() => {
       theme: 'snow',
       modules: {
         toolbar: TOOLBAR_CONFIG,
-        emoji: true,
+        emoji: {
+          emojiData: data as EmojiMartData,
+          EmojiPicker: Picker,
+          emojiPickerPosition: computePosition,
+        },
       },
     })
   })

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

@@ -10,7 +10,9 @@ npm i @floating-ui/dom @emoji-mart/data emoji-mart
 
 ## 集成示例
 
-工具栏配置增加 `emoji`，modules 增加 `emoji` 为 true, 即可开始使用。
+工具栏配置增加 `emoji`，modules 增加 `emoji` 按照如下代码所示配置进行配置后即可使用
+
+> `emojiData`、`EmojiPicker`、`emojiPickerPosition` 支持通过 window 传入
 
 :::demo src=demos/emoji.vue
 :::
@@ -34,3 +36,5 @@ npm i @floating-ui/dom @emoji-mart/data emoji-mart
 | `dynamicWidth`     | `boolean`  | `false`                                                                                            | 是否根据容器宽度动态决定 `perLine` 的值。                                    |
 
 > 💡 以上配置项最终会传递给 [`<EmojiPicker>`](https://github.com/missive/emoji-mart#-emoji-component) 组件，你可以根据项目实际需要进行覆盖。
+>
+> 更多配置可参考 [emoji-mart Options / Props](https://github.com/missive/emoji-mart#options--props)

packages/docs/types/global.d.ts

@@ -1,3 +1,6 @@
+import type { EmojiMartData } from '@emoji-mart/data'
+import type { computePosition } from '@floating-ui/dom'
+import type { Picker } from 'emoji-mart'
 import type hljs from 'highlight.js'
 import type Html2Canvas from 'html2canvas'
 import type katex from 'katex'
@@ -7,6 +10,9 @@ declare global {
     hljs: typeof hljs
     katex: typeof katex
     Html2Canvas: typeof Html2Canvas
+    emojiData: EmojiMartData
+    EmojiPicker: new (props: any) => Picker
+    emojiPickerPosition: typeof computePosition
   }
 }
 

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

@@ -1,11 +1,14 @@
+import type { EmojiMartData } from '@emoji-mart/data'
+import type { computePosition } from '@floating-ui/dom'
+import type { Picker } from 'emoji-mart'
 import type TypeToolbar from 'quill/modules/toolbar'
 import type FluentEditor from '../fluent-editor'
-import data from '@emoji-mart/data'
-import { computePosition } from '@floating-ui/dom'
-import { Picker } from 'emoji-mart'
 import { debounce } from 'lodash-es'
 
 export interface EmojiModuleOptions {
+  emojiData?: EmojiMartData
+  EmojiPicker?: new (props: any) => Picker
+  emojiPickerPosition?: typeof computePosition
   theme?: string
   locale?: string
   set?: string
@@ -21,6 +24,12 @@ export interface EmojiModuleOptions {
 }
 
 const DEFAULT_OPTIONS: EmojiModuleOptions = {
+  // @ts-ignore
+  emojiData: window.emojiData,
+  // @ts-ignore
+  EmojiPicker: window.EmojiPicker,
+  // @ts-ignore
+  emojiPickerPosition: window.emojiPickerPosition,
   theme: 'light',
   set: 'native',
   skinTonePosition: 'none',
@@ -51,7 +60,7 @@ class EmojiModule {
   constructor(quill: FluentEditor, options: EmojiModuleOptions = {}) {
     this.quill = quill
 
-    this.options = options
+    this.options = { ...DEFAULT_OPTIONS, ...options }
 
     const toolbar = this.quill.getModule('toolbar') as TypeToolbar
 
@@ -79,8 +88,10 @@ class EmojiModule {
       return
     }
 
+    const { emojiPickerPosition } = this.options
+
     try {
-      const { x, y } = await computePosition(button, pickerElement)
+      const { x, y } = await emojiPickerPosition(button, pickerElement)
       this.picker.style.top = `${y}px`
       this.picker.style.left = `${x}px`
     }
@@ -114,17 +125,18 @@ class EmojiModule {
 
   // 创建表情选择弹窗
   private createPicker() {
+    const { EmojiPicker, emojiData, ...options } = this.options
+
     const pickerConfig = {
-      ...DEFAULT_OPTIONS,
       // emoji-mart 与 tiny-editor 国际化的的 locale 不一致使用 LOCALE_MAP 转换
       locale: LOCALE_MAP[this.quill.lang] ?? 'en',
-      ...this.options,
-      data,
+      data: emojiData,
+      ...options,
       onEmojiSelect: this.handleEmojiSelect.bind(this),
       onClickOutside: this.handleClickOutside.bind(this),
     }
 
-    const picker = new Picker(pickerConfig) as unknown as HTMLElement
+    const picker = new EmojiPicker(pickerConfig) as unknown as HTMLElement
 
     // 设置样式和属性
     picker.id = PICKER_DOM_ID