@opentiny/fluent-editor 4.0.0-alpha.8 → 4.0.0-beta.0

package/src/modules/custom-uploader.ts

@@ -1,101 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,230 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

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

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

@@ -1,146 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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'