@opentiny/fluent-editor 3.20.2-alpha.0 → 3.20.2

package/src/emoji/modules/emoji.ts

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

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

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

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

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