@opentiny/fluent-editor 3.20.1 → 3.20.2

package/src/mention/Mention.ts

@@ -0,0 +1,406 @@
+import Quill from 'quill'
+import { isNullOrUndefined } from '../config/editor.utils'
+import { DEFAULT_MENTION_CHAR, ON_MENTION_LINK_REMOVE } from './constants'
+import MentionLink from './MentionLink'
+
+const { Scope } = Quill.imports.parchment
+const Delta = Quill.imports.delta
+
+interface MentionOption {
+  containerClass?: string
+  dataAttributes?: string[]
+  defaultLink?: string
+  itemActiveClass?: string
+  itemKey: string
+  itemClass?: string
+  listClass?: string
+  listHideClass?: string
+  maxHeight?: number
+  mentionChar?: string
+  remove?: (data: any) => void
+  renderMentionItem?: (data: any) => string | HTMLElement
+  renderMentionText?: (data: any) => string | HTMLElement
+  search?: (term: string) => Promise<any[]>
+  searchKey: string
+  select?: (data: any) => void
+  target?: string
+}
+
+// @dynamic
+class Mention {
+  private readonly options: MentionOption
+  private readonly mentionListEL: HTMLUListElement
+  private activeMentionIndex = 0
+  private latestMentionList: any[]
+  private latestMentionCharPos: number
+  private latestCaretPos: number
+  private searchTerm = ''
+  private needInsertBr = true
+  private readonly defaultOptions: MentionOption = {
+    defaultLink: '#',
+    target: '_blank',
+    mentionChar: DEFAULT_MENTION_CHAR,
+    maxHeight: 200,
+    renderMentionItem(data: any) {
+      let mentionItem = data.name || data.id
+      if (this.itemKey) {
+        mentionItem = data[this.itemKey]
+      }
+      const dom = document.createElement('SPAN')
+      dom.textContent = mentionItem
+      return dom
+    },
+    renderMentionText(data: any) {
+      let mentionText = data.name || data.id
+      if (this.itemKey) {
+        mentionText = data[this.itemKey]
+      }
+      return `${mentionText}`
+    },
+    containerClass: 'ql-mention-list-container',
+    listClass: 'ql-mention-list',
+    listHideClass: 'ql-mention-list--hide',
+    itemClass: 'ql-mention-item',
+    itemActiveClass: 'ql-mention-item--active',
+    itemKey: 'name',
+    searchKey: 'name',
+    dataAttributes: ['id'],
+    select(_data: any) {},
+    remove(_data: any) {},
+  }
+
+  static register() {
+    Quill.register(MentionLink)
+  }
+
+  // @ts-ignore
+  constructor(private quill: Quill, options: MentionOption) {
+    if (!options.search) {
+      console.warn('please provide a search function!')
+      return
+    }
+
+    this.options = Object.assign(this.defaultOptions, options)
+    const container = document.createElement('div')
+    container.classList.add('ql-mention-list-container')
+    if (this.options.containerClass !== 'ql-mention-list-container') {
+      container.classList.add(this.options.containerClass)
+    }
+    this.mentionListEL = document.createElement('ul')
+    this.mentionListEL.classList.add(this.options.listClass, this.options.listHideClass)
+    this.mentionListEL.style.cssText += `
+      max-height: ${this.options.maxHeight}px;
+    `
+
+    quill.on(Quill.events.TEXT_CHANGE, this.handleTextChange)
+    quill.keyboard.addBinding({ key: 'ArrowUp' }, this.handleArrowUpKey)
+    quill.keyboard.addBinding({ key: 'ArrowDown' }, this.handleArrowDownKey)
+    quill.keyboard.addBinding({ key: 'Enter' }, this.handleEnterKey)
+    quill.keyboard.addBinding({ key: 'Tab' }, this.handleEnterKey)
+    quill.keyboard.addBinding({ key: 'Escape' }, this.handleEscapeKey)
+    quill.keyboard.bindings.Enter.unshift(quill.keyboard.bindings.Enter.pop())
+    quill.keyboard.bindings.Tab.unshift(quill.keyboard.bindings.Tab.pop())
+    quill.keyboard.bindings.Escape.unshift(quill.keyboard.bindings.Escape.pop())
+
+    const customKeyboardEnter = {
+      key: 'Enter',
+      shiftKey: null,
+      handler: (range, context) => {
+        const lineFormats = Object.keys(context.format).reduce(
+          (formats, format) => {
+            if (
+              this.quill.scroll.query(format, Scope.BLOCK)
+              && !Array.isArray(context.format[format])
+            ) {
+              formats[format] = context.format[format]
+            }
+            return formats
+          },
+          {},
+        )
+
+        // fix: 解决@提醒之后插入多余空行和光标位置不对的问题
+        let selectionIndex = range.index - this.searchTerm.length
+        let delta = new Delta()
+          .retain(range.index)
+          .delete(range.length)
+        if (this.needInsertBr) {
+          delta = delta.insert('\n', lineFormats)
+          selectionIndex = range.index + 1
+        }
+
+        this.quill.updateContents(delta, Quill.sources.USER)
+        this.quill.setSelection(selectionIndex, Quill.sources.SILENT)
+        this.quill.focus()
+
+        Object.keys(context.format).forEach((name) => {
+          if (!isNullOrUndefined(lineFormats[name])) return
+          if (Array.isArray(context.format[name])) return
+          if (name === 'code' || name === 'link') return
+          this.quill.format(name, context.format[name], Quill.sources.USER)
+        })
+
+        this.needInsertBr = true // 标记是否是输入@提醒的Enter
+      },
+    }
+
+    // 用自定义的Enter替换内置的Enter
+    quill.keyboard.bindings.Enter = quill.keyboard.bindings.Enter.map((item) => {
+      const buildinKeyboardEnter = item.format === undefined && item.shiftKey === null
+      if (buildinKeyboardEnter) {
+        return customKeyboardEnter
+      }
+      else {
+        return item
+      }
+    })
+
+    this.on('click', this.handleMouseClick)
+    this.on('mouseover', this.handleMouseEnter)
+    quill.emitter.on(ON_MENTION_LINK_REMOVE, async ({ mention, name }) => {
+      const [result] = (mention && [mention]) || (await this.options.search(name))
+      this.options.remove(result)
+    })
+    container.appendChild(this.mentionListEL)
+    quill.container.parentElement.insertBefore(container, quill.container)
+  }
+
+  on(eventName, callback) {
+    this.mentionListEL.addEventListener(eventName, (evt) => {
+      let
+        target = evt.target
+      let targetItemEL
+
+      while (this.mentionListEL.contains(target) && target !== this.mentionListEL) {
+        if (target.classList.contains(this.options.itemClass)) {
+          targetItemEL = target
+        }
+        target = target.parentElement
+      }
+
+      if (targetItemEL) {
+        callback.call(this, targetItemEL, this.getMentionItemIndex(targetItemEL))
+      }
+    })
+  }
+
+  getMentionItemIndex(itemEl: Element) {
+    return [].reduce.call(this.mentionListEL.children, (index, item, idx) => item === itemEl ? idx : index, -1)
+  }
+
+  handleTextChange = (_delta, _oldDelta, source) => {
+    // defer handler to make sure that we can get correct quill selection range.
+    setTimeout(() => {
+      if (Quill.sources.USER === source) {
+        const range = this.quill.getSelection()
+        if (!range) {
+          return
+        }
+
+        const caretPos = this.latestCaretPos = range.index
+        // beforeCaretText的计算有问题，没有把图片内容和@提醒内容的非字符内容算进去
+        const content = this.quill.getContents()
+        const beforeCaretText = content.reduce((newText, op) => {
+          if (typeof op.insert === 'string') {
+            return (newText += op.insert)
+          }
+          else {
+            return (newText += ' ') // 将图片内容和@提醒内容的非字符内容置为' '，算一个位置
+          }
+        }, '')
+        const mentionCharPos = beforeCaretText.lastIndexOf(this.options.mentionChar)
+
+        if (mentionCharPos > -1) {
+          const searchTerm = beforeCaretText.substring(mentionCharPos + this.options.mentionChar.length, caretPos)
+          this.searchTerm = searchTerm
+          if (!''.startsWith.call(searchTerm, ' ')) {
+            this.latestMentionCharPos = mentionCharPos
+            this.searchMentionListByTerm(searchTerm)
+          }
+          else {
+            this.hideMentionList()
+          }
+        }
+        else {
+          this.hideMentionList()
+        }
+      }
+    })
+  }
+
+  handleMouseClick(_itemEl: HTMLLIElement, index: number) {
+    this.selectMentionItem(index, true)
+    this.quill.focus()
+  }
+
+  handleMouseEnter(_itemEl: HTMLLIElement, index: number) {
+    this.activeMentionIndex = index
+    this.highlightMentionItem(index)
+  }
+
+  handleArrowUpKey = () => {
+    if (this.isOpen()) {
+      this.activeMentionIndex
+        = (this.activeMentionIndex + this.latestMentionList.length - 1) % this.latestMentionList.length
+      this.highlightMentionItem(this.activeMentionIndex)
+      return false
+    }
+    return true
+  }
+
+  handleArrowDownKey = () => {
+    if (this.isOpen()) {
+      this.activeMentionIndex = (this.activeMentionIndex + 1) % this.latestMentionList.length
+      this.highlightMentionItem(this.activeMentionIndex)
+      return false
+    }
+    return true
+  }
+
+  handleEnterKey = () => {
+    if (this.isOpen()) {
+      this.selectMentionItem()
+      this.needInsertBr = false
+    }
+    return true
+  }
+
+  handleEscapeKey = () => {
+    if (this.isOpen()) {
+      this.hideMentionList()
+      return false
+    }
+    return true
+  }
+
+  getActiveMentionItem() {
+    return this.mentionListEL.querySelector(`.${this.options.itemActiveClass}`)
+  }
+
+  isOpen() {
+    return !this.mentionListEL.classList.contains(this.options.listHideClass)
+  }
+
+  async searchMentionListByTerm(term: string) {
+    const mentionList = await this.options.search(term)
+    this.latestMentionList = mentionList
+    if (!mentionList || mentionList.length === 0) {
+      return this.hideMentionList()
+    }
+
+    this.showMentionList(mentionList)
+  }
+
+  showMentionList(mentionList: any[]) {
+    if (!this.isOpen()) {
+      this.mentionListEL.classList.remove(this.options.listHideClass)
+    }
+    this.activeMentionIndex = 0
+    this.setMentionListPos()
+    this.render(mentionList)
+  }
+
+  hideMentionList() {
+    if (this.isOpen()) {
+      this.activeMentionIndex = 0
+      this.mentionListEL.classList.add(this.options.listHideClass)
+    }
+  }
+
+  setMentionListPos() {
+    const cursorIndex = this.quill.selection.savedRange.index
+    const cursorBounds = this.quill.getBounds(cursorIndex)
+    const { left, top } = cursorBounds
+    const container = this.quill.container
+    const hostElement = container.parentNode as HTMLDivElement
+    const { left: editorLeft, top: editorTop } = container.getBoundingClientRect()
+    const { left: hostElementLeft, top: hostElementTop } = hostElement.getBoundingClientRect()
+    const relativeLeft = editorLeft - hostElementLeft
+    const relativeTop = editorTop - hostElementTop
+    const menuLeft = left + relativeLeft - 5
+    const menuTop = top + relativeTop + 20
+    this.mentionListEL.style.cssText += `
+      left: ${menuLeft}px;
+      top: ${menuTop}px;
+    `
+  }
+
+  render(mentionList: any[]) {
+    const wrapEl = document.createElement('div');
+
+    [].forEach.call(mentionList, (mentionItem, index) => {
+      const mentionItemEl = document.createElement('li')
+      mentionItemEl.classList.add(this.options.itemClass)
+      if (index === this.activeMentionIndex) {
+        mentionItemEl.classList.add(this.options.itemActiveClass)
+      }
+      const renderResult = this.options.renderMentionItem(mentionItem)
+      if (typeof renderResult === 'string') {
+        mentionItemEl.insertAdjacentHTML('afterbegin', renderResult)
+      }
+      else {
+        mentionItemEl.insertAdjacentElement('afterbegin', renderResult)
+      }
+      wrapEl.appendChild(mentionItemEl)
+    })
+
+    this.mentionListEL.innerHTML = wrapEl.innerHTML
+  }
+
+  highlightMentionItem(index: number) {
+    const oldActiveItem = this.getActiveMentionItem()
+    if (oldActiveItem) {
+      oldActiveItem.classList.remove(this.options.itemActiveClass)
+    }
+
+    const newActiveItem = this.mentionListEL.querySelector(`.${this.options.itemClass}:nth-of-type(${index + 1})`)
+    if (newActiveItem) {
+      newActiveItem.classList.add(this.options.itemActiveClass)
+      this.scrollIntoView(newActiveItem)
+    }
+  }
+
+  scrollIntoView(node: Element): void {
+    const nodeAsAny: any = node
+    if (nodeAsAny.scrollIntoViewIfNeeded) {
+      nodeAsAny.scrollIntoViewIfNeeded(false)
+      return
+    }
+    if (node.scrollIntoView) {
+      node.scrollIntoView(false)
+    }
+  }
+
+  selectMentionItem(index = this.activeMentionIndex, isClick?: boolean) {
+    const activeMentionItem = this.latestMentionList[index]
+    this.insertMentionBlot(activeMentionItem, isClick)
+    this.options.select(activeMentionItem)
+    this.hideMentionList()
+  }
+
+  insertMentionBlot(activeMentionItem: any, isClick?: boolean) {
+    const mention = this.options.renderMentionText(activeMentionItem)
+    const delta = new Delta()
+      .retain(this.latestMentionCharPos)
+      .delete(this.latestCaretPos - this.latestMentionCharPos)
+      .insert({
+        [MentionLink.blotName]: {
+          char: this.options.mentionChar,
+          text: mention,
+          mention: activeMentionItem,
+          link: this.options.defaultLink,
+          target: this.options.target,
+          searchKey: this.options.searchKey,
+        },
+      })
+    if (isClick) {
+      this.quill.updateContents(delta, Quill.sources.USER)
+    }
+    else {
+      this.quill.updateContents(delta, Quill.sources.API)
+    }
+    this.quill.setSelection(this.latestMentionCharPos + 1, Quill.sources.API)
+  }
+}
+
+export { Mention as default }

package/src/mention/MentionLink.ts

@@ -0,0 +1,51 @@
+import Quill from 'quill'
+import { DEFAULT_MENTION_CHAR, MENTION_CHAR, ON_MENTION_LINK_REMOVE } from './constants'
+
+const Embed = Quill.imports['blots/embed']
+
+// @dynamic
+class MentionLink extends Embed {
+  static blotName: string
+  static tagName: string
+  static className: string
+  scroll: any
+  mentionData: any
+
+  static create(data) {
+    const node = super.create(data)
+    node.dataset.mentionId = data.name || (data.mention && data.mention[data.searchKey || 'name']) || ''
+    node.setAttribute('title', data.text)
+    node.setAttribute(MENTION_CHAR, data.char)
+    node.textContent = data.char + data.text
+    return node
+  }
+
+  static value(domNode) {
+    const
+      char = domNode.getAttribute(MENTION_CHAR) || DEFAULT_MENTION_CHAR
+    const text = domNode.getAttribute('title')
+    const name = domNode.dataset.mentionId
+    return { char, text, name }
+  }
+
+  constructor(scroll, domNode, data) {
+    super(scroll, domNode, data)
+    this.mentionData = data
+  }
+
+  value() {
+    // fix: 将@提醒内容加入到 Delta 里，以解决输入空格，@提醒内容被删除的问题
+    // return ' ';
+    return super.value()
+  }
+
+  remove() {
+    this.scroll.emitter.emit(ON_MENTION_LINK_REMOVE, this.mentionData)
+    return super.remove()
+  }
+}
+
+MentionLink.blotName = 'mention'
+MentionLink.tagName = 'span'
+MentionLink.className = 'ql-mention-link'
+export { MentionLink as default }

package/src/mention/constants.ts

@@ -0,0 +1,3 @@
+export const ON_MENTION_LINK_REMOVE = 'mention-link/remove'
+export const MENTION_CHAR = 'mentionChar'
+export const DEFAULT_MENTION_CHAR = '@'

package/src/quick-menu/index.ts

@@ -0,0 +1,100 @@
+import type Quill from 'quill'
+
+interface QuickMenuOptions {
+  container: string
+  component: any
+}
+
+class QuickMenu {
+  private container: HTMLDivElement
+  private hostElement: HTMLDivElement
+  private quickMenu: HTMLDivElement
+  private quickMenuContainer: HTMLDivElement
+
+  // @ts-ignore
+  constructor(private quill: Quill, private options: QuickMenuOptions) {
+    this.quill = quill
+    this.options = options
+    this.container = this.quill.container
+    this.hostElement = this.container.parentNode as HTMLDivElement
+    this.quickMenu = this.hostElement.querySelector('.quick-menu')
+    this.quickMenuContainer = this.quickMenu.querySelector('.quick-menu-container')
+    quill.keyboard.addBinding({ key: '/' }, this.handleSlashKeyDown)
+    quill.keyboard.addBinding({ key: 'ArrowUp' }, this.handleArrowUpKey)
+    quill.keyboard.addBinding({ key: 'ArrowDown' }, this.handleArrowDownKey)
+    quill.keyboard.addBinding({ key: 'Enter' }, this.handleEnterKey)
+    quill.keyboard.bindings.Enter.unshift(quill.keyboard.bindings.Enter.pop())
+    document.body.addEventListener('click', this.hideQuickMenu.bind(this))
+  }
+
+  handleSlashKeyDown = (_range, context) => {
+    const index = this.quill.selection.savedRange.index
+    this.quill.insertText(index, '/')
+
+    // 一行的第一个字符为 '/'，且没有格式化，则触发快捷菜单
+    const shouldTriggerQuickMenu = context.prefix === '' && Object.keys(context.format).length === 0
+    if (shouldTriggerQuickMenu) {
+      const cursorIndex = this.quill.selection.savedRange.index
+      const cursorBounds = this.quill.getBounds(cursorIndex)
+      const { left, top } = cursorBounds
+      const { left: editorLeft, top: editorTop } = this.container.getBoundingClientRect()
+      const { left: hostElementLeft, top: hostElementTop } = this.hostElement.getBoundingClientRect()
+      const relativeLeft = editorLeft - hostElementLeft
+      const relativeTop = editorTop - hostElementTop
+      const menuLeft = left + relativeLeft - 5
+      const menuTop = top + relativeTop + 20
+
+      this.quickMenu.style.display = 'block'
+      const zIndex = this.quill.options.modules.quickmenu.zIndex
+      let style = `left:${menuLeft}px;top:${menuTop}px;`
+      if (zIndex || zIndex === 0) {
+        style += `z-index:${zIndex}`
+      }
+      this.quickMenuContainer.setAttribute('style', style)
+      this.options.component.activeIndex = 0
+    }
+    else {
+      this.quickMenu.style.display = 'none'
+    }
+  }
+
+  private isOpen() {
+    return this.quickMenuContainer.style.display !== 'none' && this.quickMenu.style.display === 'block'
+  }
+
+  hideQuickMenu = (event) => {
+    if (this.quickMenuContainer && !this.quickMenuContainer.contains(event.target)) {
+      this.quickMenuContainer.style.display = 'none'
+    }
+  }
+
+  handleArrowUpKey = (_range, _context) => {
+    if (this.isOpen()) {
+      const index = this.options.component.activeIndex
+      const total = this.options.component.quickMenus.length
+      this.options.component.activeIndex = (index + total - 1) % total
+      return false
+    }
+    return true
+  }
+
+  handleArrowDownKey = (_range, _context) => {
+    if (this.isOpen()) {
+      const index = this.options.component.activeIndex
+      const total = this.options.component.quickMenus.length
+      this.options.component.activeIndex = (index + 1) % total
+      return false
+    }
+    return true
+  }
+
+  handleEnterKey = (_range, _context) => {
+    if (this.isOpen()) {
+      this.options.component.onEnter()
+      return false
+    }
+    return true
+  }
+}
+
+export default QuickMenu