@opentiny/fluent-editor 4.0.0-alpha.6 → 4.0.0-alpha.8

package/src/modules/custom-uploader.ts

@@ -0,0 +1,101 @@
+import type { Range } from 'quill'
+import type TypeUploader from 'quill/modules/uploader'
+import type FluentEditor from '../core/fluent-editor'
+import Quill from 'quill'
+import { isString } from '../utils/is'
+
+const Uploader = Quill.import('modules/uploader') as typeof TypeUploader
+const Delta = Quill.import('delta')
+
+interface UploaderOptions {
+  mimetypes: string[]
+  handler: (this: { quill: Quill }, range: Range, files: File[]) => void
+}
+export interface FileUploaderOptions {
+  mimetypes: string[]
+  maxSize: number
+  handler: (this: { quill: FluentEditor }, range: Range, files: File[]) => Promise<(string | false)[]> | (string | false)[]
+  success: (this: { quill: FluentEditor }, file: File, range: Range) => void
+  fail: (this: { quill: FluentEditor }, file: File, range: Range) => void
+}
+export class FileUploader extends Uploader {
+  static DEFAULTS = {} as any
+  // Partial<UploaderOptions> for ts type
+  declare options: Partial<UploaderOptions> & FileUploaderOptions
+  constructor(public quill: FluentEditor, options: Partial<FileUploaderOptions>) {
+    super(quill, options as any)
+    this.options = this.resolveOptions(options)
+    // paste handle in clipboard
+  }
+
+  resolveOptions(options: Partial<FileUploaderOptions> = {}) {
+    return Object.assign({
+      mimetypes: ['*'],
+      maxSize: Number.POSITIVE_INFINITY,
+      handler(range: Range, files: File[]) {
+        return files.map(file => URL.createObjectURL(file))
+      },
+      success() {},
+      fail() {},
+    }, options)
+  }
+
+  validateFile(file: File) {
+    return this.options.mimetypes.some(type => (file.type || 'text/plain').match(type.replaceAll('*', '.*'))) && file.size < this.options.maxSize
+  }
+
+  async getFileUrls(files: File[], range: Range) {
+    const uploads = files.filter(file => this.validateFile(file))
+    return this.options.handler.call(this, range, uploads)
+  }
+
+  async upload(range: Range, files: FileList | File[]) {
+    const uploads = []
+    const fails = []
+
+    for (const file of Array.from(files)) {
+      if (this.validateFile(file)) {
+        uploads.push(file)
+      }
+      else {
+        fails.push(file)
+      }
+    }
+
+    const result = await this.options.handler.call(this, range, uploads)
+    const updateDelta = result.reduce((delta, url, i) => {
+      if (isString(url)) {
+        const type = uploads[i].type
+        if (type.startsWith('image/')) {
+          delta.insert({ image: url })
+        }
+        else if (type.startsWith('video/')) {
+          delta.insert({ video: { src: url } })
+        }
+        else {
+          delta.insert({ file: { size: uploads[i].size, title: uploads[i].name, src: url } })
+        }
+      }
+      else {
+        delta.insert(' ')
+      }
+      return delta
+    }, new Delta().retain(range.index).delete(range.length))
+
+    this.quill.updateContents(updateDelta, Quill.sources.USER)
+    this.quill.setSelection(range.index + result.length, Quill.sources.SILENT)
+
+    for (const file of fails) {
+      this.options.fail.call(this, file, range)
+    }
+
+    for (const [i, res] of result.entries()) {
+      if (isString(res)) {
+        this.options.success.call(this, files[i], { index: range.index + i, length: 0 })
+      }
+      else {
+        this.options.fail.call(this, files[i], { index: range.index + i, length: 0 })
+      }
+    }
+  }
+}

package/src/modules/divider.ts

@@ -0,0 +1,15 @@
+import type { BlockEmbed as TypeBlockEmbed } from 'quill/blots/block'
+import Quill from 'quill'
+
+const BlockEmbed = Quill.import('blots/block/embed') as typeof TypeBlockEmbed
+
+export class DividerBlot extends BlockEmbed {
+  static blotName = 'divider'
+  static tagName = 'hr'
+
+  static create() {
+    const node = super.create() as HTMLElement
+    node.setAttribute('contenteditable', 'false')
+    return node
+  }
+}

package/src/modules/emoji.ts

@@ -0,0 +1,230 @@
+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 { debounce } from 'lodash-es'
+
+export interface EmojiModuleOptions {
+  emojiData?: EmojiMartData
+  EmojiPicker?: new (props: any) => Picker
+  emojiPickerPosition?: typeof computePosition
+  theme?: string
+  locale?: string
+  set?: string
+  skinTonePosition?: string
+  previewPosition?: string
+  searchPosition?: string
+  categories?: string[]
+  maxFrequentRows?: number
+  perLine?: number
+  navPosition?: string
+  noCountryFlags?: boolean
+  dynamicWidth?: boolean
+}
+
+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',
+  previewPosition: 'bottom',
+  searchPosition: 'sticky',
+  categories: ['frequent', 'people', 'nature', 'foods', 'activity', 'places', 'objects', 'symbols', 'flags'],
+  maxFrequentRows: 2,
+  perLine: 8,
+  navPosition: 'top',
+  noCountryFlags: false,
+  dynamicWidth: false,
+}
+
+const PICKER_DOM_ID = 'emoji-picker'
+
+const LOCALE_MAP = {
+  'zh-CN': 'zh',
+  'en-US': 'en',
+} as const
+
+class EmojiModule {
+  private readonly quill: FluentEditor
+  private readonly options: EmojiModuleOptions
+  private picker: HTMLElement | null = null
+  private isPickerVisible = false
+  private cleanupResizeObserver: (() => void) | null = null
+
+  constructor(quill: FluentEditor, options: EmojiModuleOptions = {}) {
+    this.quill = quill
+
+    this.options = { ...DEFAULT_OPTIONS, ...options }
+
+    const toolbar = this.quill.getModule('toolbar') as TypeToolbar
+
+    if (toolbar) {
+      toolbar.addHandler('emoji', () => {
+        if (this.isPickerVisible) {
+          this.closeDialog()
+        }
+        else {
+          this.openDialog()
+        }
+      })
+    }
+  }
+
+  private getEmojiButton() {
+    return document.querySelector('.ql-emoji') as HTMLElement | null
+  }
+
+  private async updatePickerPosition() {
+    const button = this.getEmojiButton()
+    const pickerElement = document.getElementById(PICKER_DOM_ID)
+
+    if (!button || !this.picker || !pickerElement) {
+      return
+    }
+
+    const { emojiPickerPosition } = this.options
+
+    try {
+      const { x, y } = await emojiPickerPosition(button, pickerElement)
+      this.picker.style.top = `${y}px`
+      this.picker.style.left = `${x}px`
+    }
+    catch (error) {
+      console.warn('Failed to compute picker position:', error)
+    }
+  }
+
+  // 监听容器大小变化，更新表情选择弹窗位置
+  private setupContainerResizeObserver() {
+    const container = this.quill.root.parentElement
+    if (!container) {
+      return null
+    }
+
+    const debouncedUpdate = debounce(() => {
+      this.updatePickerPosition()
+    }, 100)
+
+    const resizeObserver = new ResizeObserver(() => {
+      debouncedUpdate()
+    })
+
+    resizeObserver.observe(container)
+
+    return () => {
+      resizeObserver.disconnect()
+      debouncedUpdate.cancel()
+    }
+  }
+
+  // 创建表情选择弹窗
+  private createPicker() {
+    const { EmojiPicker, emojiData, ...options } = this.options
+
+    const pickerConfig = {
+      // emoji-mart 与 tiny-editor 国际化的的 locale 不一致使用 LOCALE_MAP 转换
+      locale: LOCALE_MAP[this.quill.lang] ?? 'en',
+      data: emojiData,
+      ...options,
+      onEmojiSelect: this.handleEmojiSelect.bind(this),
+      onClickOutside: this.handleClickOutside.bind(this),
+    }
+
+    const picker = new EmojiPicker(pickerConfig) as unknown as HTMLElement
+
+    // 设置样式和属性
+    picker.id = PICKER_DOM_ID
+    picker.style.position = 'absolute'
+    picker.style.zIndex = '1000'
+
+    return picker
+  }
+
+  // 打开表情弹窗
+  public openDialog() {
+    if (this.picker) {
+      return
+    }
+
+    try {
+      this.picker = this.createPicker()
+      document.body.appendChild(this.picker)
+
+      this.updatePickerPosition()
+      this.cleanupResizeObserver = this.setupContainerResizeObserver()
+      this.isPickerVisible = true
+    }
+    catch (error) {
+      console.error('Failed to open emoji picker:', error)
+      this.closeDialog()
+    }
+  }
+
+  // 关闭表情弹窗
+  public closeDialog() {
+    if (!this.picker) {
+      return
+    }
+
+    this.isPickerVisible = false
+    this.picker.remove()
+    this.picker = null
+
+    this.cleanupResizeObserver?.()
+    this.cleanupResizeObserver = null
+  }
+
+  // 处理表情选择事件
+  private handleEmojiSelect(emoji: { native: string }) {
+    const selection = this.quill.getSelection(true)
+    if (!selection) {
+      console.warn('No selection available for emoji insertion')
+      return
+    }
+
+    try {
+    // 记录插入位置
+      const insertIndex = selection.index
+      this.quill.insertText(insertIndex, emoji.native, 'user')
+
+      this.closeDialog()
+
+      // 设置光标到表情符号后面
+      this.quill.setSelection(insertIndex + emoji.native.length)
+    }
+    catch (error) {
+      console.error('Failed to insert emoji:', error)
+    }
+  }
+
+  // 处理外部点击事件
+  private handleClickOutside(event: MouseEvent) {
+    const button = this.getEmojiButton()
+
+    const target = event.target
+
+    const isClickOnButton = target === button || (target instanceof Element && button?.contains(target))
+
+    // 如果点击的是表情符号按钮或其子元素，则不关闭选择器
+    if (isClickOnButton) {
+      return
+    }
+
+    this.closeDialog()
+  }
+
+  // 销毁模块，清理资源
+  public destroy() {
+    this.cleanupResizeObserver?.()
+    this.cleanupResizeObserver = null
+    this.closeDialog()
+  }
+}
+
+export { EmojiModule }

package/src/modules/file/formats/file.ts

@@ -0,0 +1,61 @@
+import type TypeEmbed from 'quill/blots/embed'
+import Quill from 'quill'
+import { sanitize } from '../../../config/editor.utils'
+
+const Embed = Quill.import('blots/embed') as typeof TypeEmbed
+const FILE_ATTRIBUTES = ['id', 'title', 'size', 'lastModified']
+
+export interface FileValue {
+  size: number
+  src: string
+  title: string
+}
+export class File extends Embed {
+  static blotName = 'file'
+  static tagName = 'A'
+  static className = 'ql-file-item'
+  static PROTOCOL_WHITELIST = ['http', 'https', 'blob']
+
+  static create(value: FileValue) {
+    const node = super.create(value) as HTMLAnchorElement
+    const size = value.size / 1024
+    const fixSize = !size ? 0 : size < 1 ? 1 : size.toFixed(0)
+    node.classList.add('icon-file')
+    node.setAttribute('contenteditable', 'false')
+    const fileSvg = '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326z m1.8 562H232V136h302v216c0 23.2 18.8 42 42 42h216v494z" p-id="2307"></path></svg>'
+    node.innerHTML = `${fileSvg} ${value.title} (${fixSize} KB)`
+    const src = this.sanitize(value.src)
+    if (src) {
+      node.href = src
+      node.target = '_blank'
+    }
+    FILE_ATTRIBUTES.forEach((key) => {
+      if (value[key]) {
+        node.dataset[key] = value[key]
+      }
+    })
+    return node
+  }
+
+  static value(domNode: HTMLAnchorElement) {
+    return this.getFormats(domNode)
+  }
+
+  static getFormats(domNode: HTMLAnchorElement) {
+    const formats: Record<string, string> = {}
+    const href = this.sanitize(domNode.href)
+    if (href) {
+      formats.src = href
+    }
+    FILE_ATTRIBUTES.forEach((key) => {
+      if (domNode.dataset[key]) {
+        formats[key] = domNode.dataset[key]
+      }
+    })
+    return formats
+  }
+
+  static sanitize(url: string) {
+    return (sanitize(url, this.PROTOCOL_WHITELIST) && url) || ''
+  }
+}

package/src/modules/file/index.ts

@@ -0,0 +1,3 @@
+export * from './formats/file'
+export * from './modules/file-bar'
+export * from './modules/file-module'

package/src/modules/file/modules/file-bar.ts

@@ -0,0 +1,146 @@
+import Quill from 'quill'
+import { Range } from 'quill/core/selection'
+import { unshiftString } from '../../../utils/method'
+import { File } from '../formats/file'
+
+const Delta = Quill.import('delta')
+
+export class FileBar {
+  quill: any
+  file: any
+  domNode: HTMLElement
+  fileRange: any
+  template: string
+
+  constructor(quill, target) {
+    this.quill = quill
+    this.file = target
+    const fileBlot = Quill.find(target)
+    const index = this.quill.getIndex(fileBlot)
+    const [fileItem, offset] = this.quill.scroll.descendant(File, index)
+    const length = fileItem && fileItem.length()
+    this.fileRange = new Range(index - offset, length)
+
+    const timestamp = Number(this.file.dataset.lastModified)
+    const _lastModifiedDate = this.formatDate(timestamp)
+    this.template = [
+      // `<a class="ql-last-modified-date" href="${this.file.href}" target="_blank">${this.file.href}</a>`,
+      // '<span class="ql-split"></span>',
+      // `<a class="ql-file-preview"><i class="icon-preview"></i></a>`,
+      `<a class="ql-file-download"><i class="icon-download"></i></a>`,
+      '<a class="ql-file-delete"><i class="icon-delete"></i></a>',
+    ].join('')
+
+    this.createFileBar()
+  }
+
+  createFileBar() {
+    this.domNode = document.createElement('div')
+    this.domNode.className = 'ql-file-bar'
+    this.domNode.innerHTML = this.template
+    // 查看文件
+    const filePreview = this.domNode.querySelector('a.ql-file-preview')
+    if (filePreview) {
+      filePreview.addEventListener('click', (event) => {
+        this.operateFile(event, 'view')
+      })
+    }
+    // 下载文件
+    const fileDownload = this.domNode.querySelector('a.ql-file-download')
+    if (fileDownload) {
+      fileDownload.addEventListener('click', (event) => {
+        this.operateFile(event, 'download')
+      })
+    }
+    // 删除文件
+    const fileDelete = this.domNode.querySelector('a.ql-file-delete')
+    if (fileDelete) {
+      fileDelete.addEventListener('click', (event) => {
+        this.operateFile(event, 'delete')
+        const delta = new Delta()
+          .retain(this.fileRange.index)
+          .delete(this.fileRange.length)
+        this.quill.updateContents(delta, Quill.sources.USER)
+        this.quill.setSelection(this.fileRange.index)
+      })
+    }
+
+    this.setPosition()
+    this.quill.root.parentNode.appendChild(this.domNode)
+  }
+
+  destroy() {
+    if (this.domNode) {
+      this.domNode.remove()
+      this.domNode = null
+      this.file = null
+    }
+  }
+
+  operateFile(event, operate) {
+    event.preventDefault()
+    const fileId = this.file.dataset.id || ''
+    const fileName = this.file.dataset.title || ''
+    const fileDownloadUrl = this.file.href || ''
+    if (fileId) {
+      this.quill.emitter.emit('file-change', {
+        operation: operate,
+        data: { fileId, fileDownloadUrl },
+      })
+    }
+    if (operate === 'download') {
+      const a = document.createElement('a')
+      a.href = fileDownloadUrl
+      a.target = '_blank'
+      a.id = 'exppub'
+      a.download = fileName
+      document.body.appendChild(a)
+      const alink = document.getElementById('exppub')
+      alink.click()
+      alink.parentNode.removeChild(a)
+    }
+    this.destroy()
+  }
+
+  setPosition() {
+    if (this.domNode && this.file) {
+      const parent = this.quill.root.parentNode
+      const child = this.file.querySelector('span')
+      const containerRect = parent.getBoundingClientRect()
+      const fileRect = child.getBoundingClientRect()
+      this.css(this.domNode, {
+        left: `${fileRect.left - containerRect.left}px`,
+        top: `${fileRect.top - containerRect.top + 10}px`,
+      })
+    }
+  }
+
+  css(domNode, rules) {
+    if (typeof rules === 'object') {
+      for (const prop in rules) {
+        if (prop) {
+          if (Array.isArray(rules[prop])) {
+            // 兼容IE11浏览器
+            rules[prop].forEach((val) => {
+              domNode.style[prop] = val
+            })
+          }
+          else {
+            domNode.style[prop] = rules[prop]
+          }
+        }
+      }
+    }
+  }
+
+  formatDate(timestamp) {
+    const date = new Date(timestamp)
+    const year = date.getFullYear()
+    // TODO
+    const month = unshiftString(`${date.getMonth() + 1}`, 2, '0')
+    const day = unshiftString(`${date.getDate()}`, 2, '0')
+    const hour = unshiftString(`${date.getHours()}`, 2, '0')
+    const minute = unshiftString(`${date.getMinutes()}`, 2, '0')
+    return Number.isNaN(year) ? '--' : `${year}/${month}/${day} ${hour}:${minute}`
+  }
+}

package/src/modules/file/modules/file-module.ts

@@ -0,0 +1,33 @@
+import type FluentEditor from '../../../core/fluent-editor'
+import Quill from 'quill'
+import { File } from '../formats/file'
+import { FileBar } from './file-bar'
+
+export class FileModule {
+  fileBar: FileBar
+
+  static register() {
+    Quill.register('formats/file', File, true)
+  }
+
+  constructor(public quill: FluentEditor) {
+    this.quill = quill
+    quill.root.addEventListener('click', event => this.clickEvent(event), false)
+  }
+
+  clickEvent(event: MouseEvent) {
+    event.preventDefault()
+    const target = event.target as HTMLElement
+    const fileDom = target.closest('a.ql-file-item')
+    if (fileDom) {
+      if (this.fileBar) {
+        this.fileBar.destroy()
+      }
+      this.fileBar = new FileBar(this.quill, fileDom)
+    }
+    else if (this.fileBar && !target.closest('.ql-file-bar')) {
+      this.fileBar.destroy()
+      this.fileBar = null
+    }
+  }
+}

package/src/modules/i18n.ts

@@ -0,0 +1,66 @@
+import type FluentEditor from '../fluent-editor'
+import { CHANGE_LANGUAGE_EVENT, defaultLanguage } from '../config'
+import { isUndefined } from '../utils/is'
+
+const langs: Record<string, Record<string, string>> = {}
+
+export interface I18NOptions {
+  lang: string
+}
+export class I18N {
+  static register(inputLangs: Record<string, Record<string, string>>, isCover: boolean = true) {
+    for (const lang in inputLangs) {
+      const texts = inputLangs[lang]
+      if (isCover) {
+        langs[lang] = texts
+      }
+      else {
+        if (!langs[lang]) langs[lang] = {}
+        Object.assign(langs[lang], texts)
+      }
+    }
+  }
+
+  static parserText(text: string, lang: string): string {
+    const i18nPattern = /^_i18n"([^"]*)"/
+    const match = text.match(i18nPattern)
+    let key = text
+    if (match) {
+      key = match[1]
+    }
+    return langs[lang]?.[key] || key
+  }
+
+  options: I18NOptions = {
+    lang: '',
+  }
+
+  constructor(public quill: FluentEditor, options: Partial<I18NOptions>) {
+    this.options = Object.assign({}, options, this.resolveLanguageOption(options || {}))
+    // wait until all module registed
+    Promise.resolve().then(() => this.changeLanguage(this.options, true))
+  }
+
+  resolveLanguageOption(options: Partial<I18NOptions>): I18NOptions {
+    if (isUndefined(options.lang)) {
+      options.lang = defaultLanguage
+    }
+    if (!(options.lang in langs)) {
+      console.warn(`The language ${options.lang} is not supported. Use the default language: ${defaultLanguage}`)
+      options.lang = defaultLanguage
+    }
+    return {
+      lang: options.lang,
+    }
+  }
+
+  changeLanguage(options: Partial<I18NOptions>, force: boolean = false) {
+    const currentLang = this.options.lang
+    const langOps = this.resolveLanguageOption(options)
+    if (langOps.lang === currentLang && !force) return
+    this.options.lang = langOps.lang
+    this.quill.emitter.emit(CHANGE_LANGUAGE_EVENT, this.options.lang, langs[langOps.lang])
+  }
+}
+
+export default I18N

package/src/modules/index.ts

@@ -0,0 +1,16 @@
+export * from './collaborative-editing'
+export * from './counter'
+export * from './custom-clipboard'
+export * from './custom-image'
+export * from './custom-uploader'
+export * from './divider'
+export * from './emoji'
+export * from './file'
+export * from './i18n'
+export * from './link'
+export * from './mathlive'
+export * from './mention'
+export * from './shortcut-key'
+export * from './syntax'
+export * from './table-up'
+export * from './toolbar'