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

package/src/modules/mention/mention.ts

@@ -0,0 +1,404 @@
+import Quill from 'quill'
+import { isNullOrUndefined } from '../../config/editor.utils'
+import { DEFAULT_MENTION_CHAR, ON_MENTION_LINK_REMOVE } from './constants'
+import { MentionLink } from './mention-link'
+
+const Delta = Quill.import('delta')
+const Parchment = Quill.import('parchment')
+const { Scope } = Parchment
+
+export 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[]> | any[]
+  searchKey: string
+  select?: (data: any) => void
+  target?: string
+}
+
+export 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: activeMentionItem.link || this.options.defaultLink,
+          target: activeMentionItem.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)
+  }
+}

package/src/modules/shortcut-key/index.ts

@@ -0,0 +1,237 @@
+import type { Range } from 'quill'
+import type { Menu, MenuItemsGroup, QuillShortcutKeyInputOptions, QuillShortcutKeyOptions } from 'quill-shortcut-key'
+import type { Context } from 'quill/modules/keyboard'
+import type TypeToolbar from 'quill/modules/toolbar'
+import type FluentEditor from '../../fluent-editor'
+import Quill from 'quill'
+import QuillShortcutKey, { defaultShortKey, searchAndSort } from 'quill-shortcut-key'
+import { CHANGE_LANGUAGE_EVENT } from '../../config'
+
+export interface ShortCutKeyCustomOptions { isMenuItemsAdd: boolean }
+export type ShortCutKeyInputOptions = QuillShortcutKeyInputOptions & ShortCutKeyCustomOptions
+export type ShortCutKeyOptions = QuillShortcutKeyOptions & ShortCutKeyCustomOptions
+
+export class ShortCutKey extends QuillShortcutKey {
+  constructor(public quill: FluentEditor, options: Partial<ShortCutKeyInputOptions>) {
+    super(quill, options)
+
+    this.quill.emitter.on(CHANGE_LANGUAGE_EVENT, () => {
+      this.destroyMenuList()
+      this.options = this.resolveOptions(options)
+      this.menuSorter = searchAndSort.bind(this, this.getAllMenuItems()) as (searchText: string) => Menu
+      this.placeholderTip.remove()
+      this.placeholderTip = this.initPlaceholder()
+      this.placeholderUpdate()
+    })
+  }
+
+  resolveOptions(options: Partial<ShortCutKeyInputOptions>) {
+    const defaultMenuItems = this.defaultMenuList()
+    const value: ShortCutKeyOptions = Object.assign({
+      placeholder: this.quill.getLangText('input-recall-menu-placeholder'),
+      menuItems: defaultMenuItems,
+      isMenuItemsAdd: false,
+      menuKeyboardControls: () => false,
+    }, options)
+    if (value.isMenuItemsAdd) {
+      value.menuItems = [...defaultMenuItems, ...value.menuItems]
+    }
+
+    const deepCopyMenuItems = (items: Menu): Menu => {
+      return items.map((item) => {
+        const value = {
+          ...item,
+        }
+        if (item.title) {
+          value.title = this.quill.getLangText(item.title)
+        }
+        if (item.type === 'group') {
+          (value as MenuItemsGroup).children = deepCopyMenuItems(item.children)
+        }
+        return value
+      })
+    }
+    value.menuItems = deepCopyMenuItems(value.menuItems)
+    return value
+  }
+
+  defaultMenuList() {
+    const icons = Quill.import('ui/icons') as Record<string, any>
+    const toolbarHandler = (format: string) => {
+      return function (this: Quill, range: Range | null) {
+        if (!range) return
+        const toolbarModule = this.getModule('toolbar') as TypeToolbar
+        if (!toolbarModule) return
+        toolbarModule.handlers[format].call(toolbarModule, true)
+      }
+    }
+    const formatHandler = (format: string, value: any) => {
+      return function (this: Quill, range: Range | null) {
+        if (!range) return
+        this.formatLine(range.index, 0, format, value, Quill.sources.USER)
+      }
+    }
+
+    return [
+      ...new Array(6).fill(0).map((_, i) => ({
+        type: 'item' as const,
+        name: `h${i + 1}`,
+        alias: ['header', `head${i + 1}`],
+        icon: icons.header[i + 1],
+        title: this.quill.getLangText(`header-${i + 1}`),
+        onClick: formatHandler('header', i + 1),
+      })),
+      {
+        type: 'item' as const,
+        name: 'yy',
+        alias: ['blockquote'],
+        icon: icons.blockquote,
+        title: this.quill.getLangText('blockquote'),
+        onClick: formatHandler('blockquote', true),
+      },
+      {
+        type: 'item' as const,
+        name: 'dm',
+        alias: ['code', 'codeblock'],
+        icon: icons['code-block'],
+        title: this.quill.getLangText('code-block'),
+        onClick: formatHandler('code-block', true),
+      },
+      {
+        type: 'item' as const,
+        name: 'lj',
+        alias: ['link'],
+        icon: icons.link,
+        title: this.quill.getLangText('link'),
+        onClick(this: Quill, range: Range | null, _: any) {
+          if (!range) return
+          const title = 'link'
+          const link = prompt('Enter link URL')
+          if (!link) return
+          this.insertText(range.index, title, Quill.sources.USER)
+          this.formatText(range.index, range.length + title.length, 'link', link, Quill.sources.USER)
+          this.setSelection({ index: range.index, length: range.index + title.length })
+        },
+      },
+      {
+        type: 'group' as const,
+        name: 'lb',
+        alias: [],
+        hideSearch: true,
+        icon: icons.list.bullet,
+        title: this.quill.getLangText('list'),
+        children: [
+          {
+            type: 'item' as const,
+            name: 'wxlb',
+            alias: ['list', 'bullet'],
+            icon: icons.list.bullet,
+            title: this.quill.getLangText('list-bullet'),
+            onClick: formatHandler('list', 'bullet'),
+          },
+          {
+            type: 'item' as const,
+            name: 'yxlb',
+            alias: ['list', 'ordered'],
+            icon: icons.list.ordered,
+            title: this.quill.getLangText('list-ordered'),
+            onClick: formatHandler('list', 'ordered'),
+          },
+          {
+            type: 'item' as const,
+            name: 'rwlb',
+            alias: ['list', 'check'],
+            icon: icons.list.check,
+            title: this.quill.getLangText('list-check'),
+            onClick: formatHandler('list', 'unchecked'),
+          },
+        ],
+      },
+      {
+        type: 'item' as const,
+        name: 'bq',
+        alias: ['emoji'],
+        icon: icons.emoji,
+        title: this.quill.getLangText('emoji'),
+        onClick(this: Quill, range: Range | null, _: any) {
+          if (!range) return
+          const toolbarModule = this.getModule('toolbar') as TypeToolbar
+          if (!toolbarModule) return
+          // TODO: keyboard handler emoji select(in emoji module)
+          toolbarModule.handlers.emoji.call(toolbarModule, true)
+        },
+      },
+      {
+        type: 'item' as const,
+        name: 'jp',
+        alias: ['screenshot'],
+        icon: icons.screenshot,
+        title: this.quill.getLangText('screenshot'),
+        onClick: toolbarHandler('screenshot'),
+      },
+      {
+        type: 'item' as const,
+        name: 'gs',
+        alias: ['formula'],
+        icon: icons.formula,
+        title: this.quill.getLangText('formula'),
+        onClick: toolbarHandler('formula'),
+      },
+      {
+        type: 'item' as const,
+        name: 'tp',
+        alias: ['image', 'pic', 'picture'],
+        icon: icons.image,
+        title: this.quill.getLangText('image'),
+        onClick: toolbarHandler('image'),
+      },
+      {
+        type: 'item' as const,
+        name: 'sp',
+        alias: ['video'],
+        icon: icons.video,
+        title: this.quill.getLangText('video'),
+        onClick: toolbarHandler('video'),
+      },
+      {
+        type: 'item' as const,
+        name: 'wj',
+        alias: ['file'],
+        icon: icons.file,
+        title: this.quill.getLangText('file'),
+        onClick: toolbarHandler('file'),
+      },
+    ]
+  }
+}
+
+export const shortKey = {
+  ...defaultShortKey,
+  link: {
+    key: 'k',
+    shortKey: true,
+    handler(this: { quill: Quill }, _: any, context: Context) {
+      const toolbar = this.quill.getModule('toolbar') as TypeToolbar
+      if (!toolbar) return
+      toolbar.handlers.link.call(toolbar, !context.format.link)
+    },
+  },
+  color: {
+    key: 'c',
+    altKey: true,
+    shortKey: true,
+    handler(this: { quill: Quill }) {
+      const selected = (this.quill.getModule('toolbar') as TypeToolbar).container!.querySelector('.ql-color.ql-color-picker .ql-picker-options .ql-selected') as HTMLElement
+      this.quill.format('color', selected?.dataset?.value || false, Quill.sources.USER)
+    },
+  },
+  background: {
+    key: 'b',
+    altKey: true,
+    shortKey: true,
+    handler(this: { quill: Quill }) {
+      const selected = (this.quill.getModule('toolbar') as TypeToolbar).container!.querySelector('.ql-background.ql-color-picker .ql-picker-options .ql-selected') as HTMLElement
+      this.quill.format('background', selected?.dataset?.value || false, Quill.sources.USER)
+    },
+  },
+}

package/src/modules/syntax.ts

@@ -0,0 +1,35 @@
+import type TypeSyntax from 'quill/modules/syntax'
+import Quill from 'quill'
+
+const Syntax = Quill.import('modules/syntax') as typeof TypeSyntax
+
+// @dynamic
+class CustomSyntax extends Syntax {
+  static DEFAULTS: { hljs: any, interval: number, languages: { key: string, label: string }[] }
+}
+
+CustomSyntax.DEFAULTS = {
+  hljs: (() => {
+    // @ts-ignore
+    return window.hljs
+  })(),
+  interval: 1000,
+  languages: [
+    { key: 'plain', label: 'Plain' },
+    { key: 'bash', label: 'Bash' },
+    { key: 'cpp', label: 'C++' },
+    { key: 'cs', label: 'C#' },
+    { key: 'css', label: 'CSS' },
+    { key: 'diff', label: 'Diff' },
+    { key: 'xml', label: 'HTML/XML' },
+    { key: 'java', label: 'Java' },
+    { key: 'javascript', label: 'Javascript' },
+    { key: 'markdown', label: 'Markdown' },
+    { key: 'php', label: 'PHP' },
+    { key: 'python', label: 'Python' },
+    { key: 'ruby', label: 'Ruby' },
+    { key: 'sql', label: 'SQL' },
+  ],
+}
+
+export default CustomSyntax