@opentiny/fluent-editor 3.20.2 → 3.20.3

package/src/emoji/modules/emoji.ts

@@ -1,318 +0,0 @@
-import Quill from 'quill'
-import emojiList from '../emoji-list'
-
-const Module = Quill.imports['core/module']
-
-// @dynamic
-class ShortNameEmoji extends Module {
-  static DEFAULTS: {
-    emojiList: any[]
-    fuse: {
-      shouldSort: boolean
-      threshold: number
-      location: number
-      distance: number
-      maxPatternLength: number
-      minMatchCharLength: number
-      keys: string[]
-    }
-  }
-
-  emojiList: any
-  quill: any
-  fuse: any
-  onOpen: any
-  onClose: any
-  container: HTMLUListElement
-  onSelectionChange: any
-  onTextChange: any
-  open: boolean
-  atIndex: any
-  focusedButton: any
-  isWhiteSpace: (ch: any) => boolean
-  query: any
-  buttons: any
-  options: any
-  constructor(quill, options) {
-    super(quill, options)
-
-    this.emojiList = options.emojiList
-
-    this.quill = quill
-    this.onClose = options.onClose
-    this.onOpen = options.onOpen
-    this.container = document.createElement('ul')
-    this.container.classList.add('emoji_completions')
-    this.quill.container.appendChild(this.container)
-    this.container.style.position = 'absolute'
-    this.container.style.display = 'none'
-
-    this.onSelectionChange = this.maybeUnfocus.bind(this)
-    this.onTextChange = this.update.bind(this)
-
-    this.open = false
-    this.atIndex = null
-    this.focusedButton = null
-
-    this.isWhiteSpace = function (ch) {
-      let whiteSpace = false
-      if (/\s/.test(ch)) {
-        whiteSpace = true
-      }
-      return whiteSpace
-    }
-
-    quill.keyboard.addBinding({
-      // TODO: Once Quill supports using event.key change this to ":"
-      key: 186, // ":" instead of 190 in Safari. Since it's the same key it doesn't matter if we register both.
-      shiftKey: true,
-    }, this.triggerPicker.bind(this))
-
-    quill.keyboard.addBinding({
-      // gecko based browsers (firefox) use 59 as the keycode for semicolon,
-      // which makes a colon character when combined with shift
-      key: 59,
-      shiftKey: true,
-    }, this.triggerPicker.bind(this))
-
-    quill.keyboard.addBinding({
-      key: 39, // ArrowRight
-      collapsed: true,
-    }, this.handleArrow.bind(this))
-
-    quill.keyboard.addBinding({
-      key: 40, // ArrowRight
-      collapsed: true,
-    }, this.handleArrow.bind(this))
-    // TODO: Add keybindings for Enter (13) and Tab (9) directly on the quill editor
-  }
-
-  triggerPicker(range, _context) {
-    if (this.open) return true
-    if (range.length > 0) {
-      this.quill.deleteText(range.index, range.length, Quill.sources.USER)
-    }
-
-    this.quill.insertText(range.index, ':', 'emoji-shortname', Quill.sources.USER)
-    const atSignBounds = this.quill.getBounds(range.index)
-    this.quill.setSelection(range.index + 1, Quill.sources.SILENT)
-
-    this.atIndex = range.index
-
-    const paletteMaxPos = atSignBounds.left + 250
-    if (paletteMaxPos > this.quill.container.offsetWidth) {
-      this.container.style.left = `${atSignBounds.left - 250}px`
-    }
-    else {
-      this.container.style.left = `${atSignBounds.left}px`
-    }
-
-    this.container.style.top = `${atSignBounds.top + atSignBounds.height}px`
-    this.open = true
-
-    this.quill.on('text-change', this.onTextChange)
-    this.quill.once('selection-change', this.onSelectionChange)
-    if (this.onOpen) {
-      this.onOpen()
-    }
-  }
-
-  handleArrow() {
-    if (!this.open) return true
-    this.buttons[0].classList.remove('emoji-active')
-    this.buttons[0].focus()
-    if (this.buttons.length > 1) {
-      this.buttons[1].focus()
-    }
-  }
-
-  update(event) {
-    const sel = this.quill.getSelection().index
-    if (this.atIndex >= sel) { // Deleted the at character
-      return this.close(null)
-    }
-    this.query = this.quill.getText(this.atIndex + 1, sel - this.atIndex - 1)
-
-    try {
-      if (this.isWhiteSpace(this.query)) {
-        this.close(null)
-        return
-      }
-    }
-    catch (_e) {
-      throw new Error('Close failed')
-    }
-
-    this.query = this.query.trim()
-
-    let emojis: any = this.emojiList
-    emojis.sort((a: any, b: any) => {
-      return a.emoji_order - b.emoji_order
-    })
-
-    if (this.query.length < this.options.fuse.minMatchCharLength || emojis.length === 0) {
-      this.container.style.display = 'none'
-      return
-    }
-    if (emojis.length > 15) { // return only 15
-      emojis = emojis.slice(0, 15)
-    }
-    this.renderCompletions(emojis, event)
-  }
-
-  maybeUnfocus() {
-    if (this.container.querySelector('*:focus')) return
-    this.close(null)
-  }
-
-  renderCompletions(emojis, evt) {
-    try {
-      if (evt) {
-        if (evt.key === 'Enter' || evt.keyCode === 13) {
-          this.close(emojis[0], 1)
-          this.container.style.display = 'none'
-          return
-        }
-        else if (evt.key === 'Tab' || evt.keyCode === 9) {
-          this.quill.disable()
-          this.buttons[0].classList.remove('emoji-active')
-          this.buttons[1].focus()
-          return
-        }
-      }
-      if (evt) return
-    }
-    catch (_e) {
-      throw new Error('Render failed')
-    }
-
-    while (this.container.firstChild) {
-      this.container.removeChild(this.container.firstChild)
-    }
-    const buttons = Array.from({ length: emojis.length })
-    this.buttons = buttons
-
-    const handler = (i, emoji) => (event) => {
-      const arrowLeftKey = event.key === 'ArrowLeft' || event.keyCode === 37
-      const arrowUpKey = event.key === 'ArrowUp' || event.keyCode === 38
-      const arrowRightKey = event.key === 'ArrowRight' || event.keyCode === 39
-      const arrowDownKey = event.key === 'ArrowDown' || event.keyCode === 40
-      if (arrowRightKey || arrowDownKey) {
-        event.preventDefault()
-        buttons[Math.min(buttons.length - 1, i + 1)].focus()
-      }
-      else if (event.key === 'Tab' || event.keyCode === 9) {
-        event.preventDefault()
-        if ((i + 1) === buttons.length) {
-          buttons[0].focus()
-          return
-        }
-        buttons[Math.min(buttons.length - 1, i + 1)].focus()
-      }
-      else if (arrowLeftKey || arrowUpKey) {
-        event.preventDefault()
-        buttons[Math.max(0, i - 1)].focus()
-      }
-      else if (event.key === 'Enter' || event.keyCode === 13
-        || event.key === ' ' || event.keyCode === 32
-        || event.key === 'Tab' || event.keyCode === 9) {
-        event.preventDefault()
-        this.quill.enable()
-        this.close(emoji)
-      }
-    }
-
-    emojis.forEach((emoji, i) => {
-      const li = makeElement(
-        'li',
-        {},
-        makeElement(
-          'button',
-          { type: 'button' },
-          makeElement('span', { className: `button-emoji ap ap-${emoji.name}`, innerHTML: emoji.code_decimal }),
-          makeElement('span', { className: 'unmatched' }, emoji.shortname),
-        ),
-      )
-      this.container.appendChild(li)
-      buttons[i] = li.firstChild
-      // Events will be GC-ed with button on each re-render:
-      buttons[i].addEventListener('keydown', handler(i, emoji))
-      buttons[i].addEventListener('mousedown', () => this.close(emoji))
-      buttons[i].addEventListener('focus', () => {
-        this.focusedButton = i
-      })
-      buttons[i].addEventListener('unfocus', () => {
-        this.focusedButton = null
-      })
-    })
-
-    this.container.style.display = 'block'
-    // emoji palette on top
-    if (this.quill.container.classList.contains('top-emoji')) {
-      const x = this.container.querySelectorAll('li')
-      let i
-      for (i = 0; i < x.length; i++) {
-        x[i].style.display = 'block'
-      }
-
-      const windowHeight = window.innerHeight
-      const editorPos = this.quill.container.getBoundingClientRect().top
-      if (editorPos > windowHeight / 2 && this.container.offsetHeight > 0) {
-        this.container.style.top = `-${this.container.offsetHeight}px`
-      }
-    }
-
-    buttons[0].classList.add('emoji-active')
-  }
-
-  close(value, trailingDelete = 0) {
-    this.quill.enable()
-    this.container.style.display = 'none'
-    while (this.container.firstChild) {
-      this.container.removeChild(this.container.firstChild)
-    }
-    this.quill.off('selection-change', this.onSelectionChange)
-    this.quill.off('text-change', this.onTextChange)
-    if (value) {
-      this.quill.deleteText(this.atIndex, this.query.length + 1 + trailingDelete, Quill.sources.USER)
-      this.quill.insertEmbed(this.atIndex, 'emoji', value, Quill.sources.USER)
-      setTimeout(() => this.quill.setSelection(this.atIndex + 1), 0)
-    }
-    this.quill.focus()
-    this.open = false
-    if (this.onClose) {
-      this.onClose(value)
-    }
-  }
-}
-
-ShortNameEmoji.DEFAULTS = {
-  emojiList,
-  fuse: {
-    shouldSort: true,
-    threshold: 0.1,
-    location: 0,
-    distance: 100,
-    maxPatternLength: 32,
-    minMatchCharLength: 1,
-    keys: [
-      'shortname',
-    ],
-  },
-}
-
-function makeElement(tag, attrs, ...children) {
-  const elem = document.createElement(tag)
-  Object.keys(attrs).forEach((key) => {
-    elem[key] = attrs[key]
-  })
-  children.forEach((child) => {
-    if (typeof child === 'string') {
-      child = document.createTextNode(child)
-    }
-    elem.appendChild(child)
-  })
-  return elem
-}
-
-export default ShortNameEmoji

package/src/emoji/modules/toolbar-emoji.ts

@@ -1,182 +0,0 @@
-import Quill from 'quill'
-import { EMOJI_SPRITE as emojiSprite } from '../../config/base64-image'
-import emojiList from '../emoji-list'
-
-const Module = Quill.imports['core/module']
-
-class ToolbarEmoji extends Module {
-  quill: any
-  toolbar: any
-  constructor(quill, options) {
-    super(quill, options)
-
-    this.quill = quill
-    this.toolbar = quill.getModule('toolbar')
-    if (typeof this.toolbar !== 'undefined') {
-      this.toolbar.addHandler('emoji', this.checkPalatteExist)
-    }
-
-    // 在emoji模块加载时判断并插入emoji精灵图样式，防止重复插入
-    let emojiStyle = document.querySelector('style#devui-emoji-sprite')
-    if (!emojiStyle) {
-      emojiStyle = document.createElement('style')
-      emojiStyle.setAttribute('id', 'devui-emoji-sprite')
-      emojiStyle.innerHTML = `.ap{background-image:url(${emojiSprite})}`
-      document.head.appendChild(emojiStyle)
-    }
-  }
-
-  checkPalatteExist() {
-    const quill = this.quill
-    fnCheckDialogOpen(quill)
-    this.quill.on('text-change', (_delta, _oldDelta, source) => {
-      if (source === 'user') {
-        fnClose()
-        fnUpdateRange(quill)
-      }
-    })
-  }
-}
-
-function fnClose() {
-  const eleEmojiPlate = document.getElementById('emoji-palette')
-  document.getElementById('emoji-close-div').style.display = 'none'
-  if (eleEmojiPlate) {
-    eleEmojiPlate.remove()
-  }
-}
-
-function fnCheckDialogOpen(quill) {
-  const elementExists = document.getElementById('emoji-palette')
-  if (elementExists) {
-    elementExists.remove()
-  }
-  else {
-    fnShowEmojiPalatte(quill)
-  }
-}
-
-function fnUpdateRange(quill) {
-  const range = quill.getSelection()
-  return range
-}
-
-function fnShowEmojiPalatte(quill) {
-  const eleEmojiArea = document.createElement('div')
-  const range = quill.getSelection()
-  const atSignBounds = quill.getBounds(range.index)
-
-  quill.container.appendChild(eleEmojiArea)
-  const containerRect = quill.container.getBoundingClientRect()
-  const paletteMaxPos = atSignBounds.left + 250 // palette max width is 250
-  eleEmojiArea.id = 'emoji-palette'
-  eleEmojiArea.style.top = `${10 + atSignBounds.top + atSignBounds.height + containerRect.top}px`
-  if (paletteMaxPos > quill.container.offsetWidth) {
-    eleEmojiArea.style.left = `${atSignBounds.left + containerRect.left - 250}px`
-  }
-  else {
-    eleEmojiArea.style.left = `${atSignBounds.left + containerRect.left}px`
-  }
-
-  const tabToolbar = document.createElement('div')
-  tabToolbar.id = 'tab-toolbar'
-  eleEmojiArea.appendChild(tabToolbar)
-
-  // panel
-  const panel = document.createElement('div')
-  panel.id = 'tab-panel'
-  eleEmojiArea.appendChild(panel)
-
-  const emojiType = [
-    { type: 'p', name: 'people', content: '<div class="i-people"></div>' },
-    { type: 'n', name: 'nature', content: '<div class="i-nature"></div>' },
-    { type: 'd', name: 'food', content: '<div class="i-food"></div>' },
-    { type: 's', name: 'symbols', content: '<div class="i-symbols"></div>' },
-    { type: 'a', name: 'activity', content: '<div class="i-activity"></div>' },
-    { type: 't', name: 'travel', content: '<div class="i-travel"></div>' },
-    { type: 'o', name: 'objects', content: '<div class="i-objects"></div>' },
-    { type: 'f', name: 'flags', content: '<div class="i-flags"></div>' },
-  ]
-
-  const tabElementHolder = document.createElement('ul')
-  tabToolbar.appendChild(tabElementHolder)
-
-  if (document.getElementById('emoji-close-div') === null) {
-    const closeDiv = document.createElement('div')
-    closeDiv.id = 'emoji-close-div'
-    closeDiv.addEventListener('click', fnClose, false)
-    document.getElementsByTagName('body')[0].appendChild(closeDiv)
-  }
-  else {
-    document.getElementById('emoji-close-div').style.display = 'block'
-  }
-
-  emojiType.forEach((emojiTypeItem) => {
-    // add tab bar
-    const tabElement = document.createElement('li')
-    tabElement.classList.add('emoji-tab')
-    tabElement.classList.add(`filter-${emojiTypeItem.name}`)
-    const tabValue = emojiTypeItem.content
-    tabElement.innerHTML = tabValue
-    tabElement.dataset.filter = emojiTypeItem.type
-    tabElementHolder.appendChild(tabElement)
-
-    const emojiFilter = document.querySelector(`.filter-${emojiTypeItem.name}`)
-    emojiFilter.addEventListener('click', () => {
-      const tab = document.querySelector('.emoji-tab.active')
-      if (tab) {
-        tab.classList.remove('active')
-      }
-      emojiFilter.classList.toggle('active')
-      fnUpdateEmojiContainer(emojiFilter, panel, quill)
-    })
-  })
-  fnEmojiPanelInit(panel, quill)
-}
-
-function fnEmojiPanelInit(panel, quill) {
-  fnEmojiElementsToPanel('p', panel, quill)
-  document.querySelector('.filter-people').classList.add('active')
-}
-
-function fnEmojiElementsToPanel(_type, panel, quill) {
-  const result = emojiList
-  result.sort((a: any, b: any) => {
-    return a.emoji_order - b.emoji_order
-  })
-
-  quill.focus()
-  const range = fnUpdateRange(quill)
-
-  result.forEach((emoji: any) => {
-    const span = document.createElement('span')
-    const t = document.createTextNode(emoji.shortname)
-    span.appendChild(t)
-    span.classList.add('bem')
-    span.classList.add(`bem-${emoji.name}`)
-    span.classList.add('ap')
-    span.classList.add(`ap-${emoji.name}`)
-    const output = String(String(emoji.code_decimal))
-    span.innerHTML = `${output} `
-    panel.appendChild(span)
-
-    const customButton = document.querySelector(`.bem-${emoji.name}`)
-    if (customButton) {
-      customButton.addEventListener('click', () => {
-        quill.insertEmbed(range.index, 'emoji', emoji, Quill.sources.USER)
-        setTimeout(() => quill.setSelection(range.index + 1), 0)
-        fnClose()
-      })
-    }
-  })
-}
-
-function fnUpdateEmojiContainer(emojiFilter, panel, quill) {
-  while (panel.firstChild) {
-    panel.removeChild(panel.firstChild)
-  }
-  const type = emojiFilter.dataset.filter
-  fnEmojiElementsToPanel(type, panel, quill)
-}
-
-export default ToolbarEmoji

package/src/emoji/utils.ts

@@ -1,15 +0,0 @@
-export function createEmoji(emojiArr) {
-  const emojiList = []
-  emojiArr.forEach((emojiItem) => {
-    const [name, unicode, shortname, codeDecimal, category, emojiOrder] = emojiItem
-    emojiList.push({
-      name,
-      unicode,
-      shortname,
-      codeDecimal,
-      category,
-      emojiOrder,
-    })
-  })
-  return emojiList
-}

package/src/file/formats/file.ts

@@ -1,67 +0,0 @@
-import Quill from 'quill'
-import { sanitize } from '../../config/editor.utils'
-
-const Embed = Quill.imports['blots/embed']
-const FILE_ATTRIBUTES = ['id', 'title', 'size', 'lastModified']
-
-class File extends Embed {
-  static blotName: string
-  static tagName: string
-  static className: string
-  static PROTOCOL_WHITELIST: string[]
-  statics: any
-  domNode: any
-
-  static create(value) {
-    const node = super.create(value)
-    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 = File.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) {
-    return File.getFormats(domNode)
-  }
-
-  static formats(domNode) {
-    return File.getFormats(domNode)
-  }
-
-  static getFormats(domNode) {
-    const formats: any = {}
-    const href = File.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) {
-    return (sanitize(url, this.PROTOCOL_WHITELIST) && url) || ''
-  }
-}
-File.blotName = 'file'
-File.tagName = 'A'
-File.className = 'ql-file-item'
-File.PROTOCOL_WHITELIST = ['http', 'https']
-
-export default File

package/src/file/index.ts

@@ -1,38 +0,0 @@
-import Quill from 'quill'
-import File from './formats/file'
-import FileBar from './modules/file-bar'
-
-const Module = Quill.imports['core/module']
-
-class FileModule extends Module {
-  quill: any
-  fileBar: FileBar
-
-  static register() {
-    Quill.register('formats/file', File, true)
-  }
-
-  constructor(quill, options) {
-    super(quill, options)
-    this.quill = quill
-    quill.root.addEventListener('click', event => this.clickEvent(event), false)
-  }
-
-  clickEvent(event) {
-    event.preventDefault()
-    const target = event.target
-    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
-    }
-  }
-}
-
-export default FileModule