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

package/src/modules/link/formats/link.ts

@@ -0,0 +1,43 @@
+import type TypeInline from 'quill/blots/inline'
+import Quill from 'quill'
+import { hadProtocol, sanitize } from '../../../config/editor.utils'
+
+const Inline = Quill.import('blots/inline') as typeof TypeInline
+
+export class LinkBlot extends Inline {
+  static blotName = 'link'
+  static tagName = 'A'
+  static SANITIZED_URL = 'about:blank'
+  static PROTOCOL_WHITELIST = ['http', 'https', 'mailto', 'tel']
+  static className = 'ql-normal-link'
+
+  static autoProtocol: string = ''
+  static create(value: string) {
+    const node = super.create(value)
+    let href = value
+    if (!hadProtocol(href) && this.autoProtocol) {
+      href = `${this.autoProtocol}://${value}`
+    }
+    href = this.sanitize(href)
+    node.setAttribute('href', href)
+    node.setAttribute('target', '_blank')
+    return node
+  }
+
+  static formats(domNode: HTMLElement): string | null {
+    return domNode.getAttribute('href')
+  }
+
+  static sanitize(url: string) {
+    return sanitize(url, this.PROTOCOL_WHITELIST) ? url : this.SANITIZED_URL
+  }
+
+  format(name: string, value: any) {
+    if (name !== this.statics.blotName || [false, null].includes(value)) {
+      super.format(name, value)
+    }
+    else {
+      this.domNode.setAttribute('href', LinkBlot.sanitize(value))
+    }
+  }
+}

package/src/modules/link/index.ts

@@ -0,0 +1,2 @@
+export * from './formats/link'
+export * from './modules/tooltip'

package/src/modules/link/modules/tooltip.ts

@@ -0,0 +1,341 @@
+import type { Parchment as TypeParchment } from 'quill'
+import type FluentEditor from '../../../core/fluent-editor'
+import Quill, { Range } from 'quill'
+import Emitter from 'quill/core/emitter'
+import { BaseTooltip } from 'quill/themes/base'
+import { CHANGE_LANGUAGE_EVENT } from '../../../config'
+import { hadProtocol, isNullOrUndefined } from '../../../config/editor.utils'
+import { EN_US } from '../../../config/i18n/en-us'
+import { debounce } from '../../../utils/debounce'
+import { LinkBlot } from '../formats/link'
+
+export class LinkTooltip extends BaseTooltip {
+  static TEMPLATE: string = [
+    `<input type="text" data-formula="e=mc^2" data-link="${EN_US.linkplaceholder}" data-video="Embed URL" style="width: 225px;">`,
+    '<span class="ql-split"></span>',
+    '<a class="ql-preview"><i class="icon-share"></i></a>',
+    '<a class="ql-remove"><i class="icon-delete"></i></a>',
+  ].join('')
+
+  isInputFocus: boolean
+  isHover: boolean
+  debouncedHideToolTip: any
+  debouncedShowToolTip: any
+  options: { autoProtocol: string } = {
+    autoProtocol: 'https',
+  }
+
+  constructor(public quill: FluentEditor, bounds) {
+    super(quill, bounds)
+    this.setTemplate()
+    this.isInputFocus = false
+    this.isHover = false
+
+    this.resolveOptions()
+    LinkBlot.autoProtocol = this.options.autoProtocol
+    this.debouncedHideToolTip = debounce(this.hideToolTip, 300)
+    this.debouncedShowToolTip = debounce(this.showToolTip, 300)
+    this.quill.emitter.on(CHANGE_LANGUAGE_EVENT, () => {
+      this.setTemplate()
+    })
+  }
+
+  setTemplate() {
+    this.root.innerHTML = [
+      `<input type="text" data-formula="e=mc^2" data-link="${this.quill.getLangText('linkplaceholder')}" data-video="Embed URL" style="width: 225px;">`,
+      '<span class="ql-split"></span>',
+      '<a class="ql-preview"><i class="icon-share"></i></a>',
+      '<a class="ql-remove"><i class="icon-delete"></i></a>',
+    ].join('')
+    this.textbox = this.root.querySelector('input[type="text"]')
+    this.listen()
+  }
+
+  resolveOptions() {
+    this.options = {
+      autoProtocol: 'https',
+    }
+    const value = this.quill.options.autoProtocol
+    if (value && typeof value === 'string') {
+      this.options.autoProtocol = value
+    }
+    else if (typeof value === 'boolean' && !value) {
+      this.options.autoProtocol = ''
+    }
+  }
+
+  shouldHide() {
+    return !this.isHover && !this.isInputFocus
+  }
+
+  hideToolTip() {
+    if (this.shouldHide()) {
+      this.hide()
+    }
+  }
+
+  showToolTip(name, value, range) {
+    if (!this.shouldHide()) {
+      this.edit(name, value, range)
+    }
+  }
+
+  handleMouseLeave() {
+    this.isHover = false
+    this.debouncedHideToolTip()
+  }
+
+  handleMouseEnter(event: MouseEvent) {
+    const isTooltipShow = !this.root.classList.contains('ql-hidden')
+    if (isTooltipShow) {
+      return
+    }
+
+    if (this.isInputFocus) {
+      this.save()
+    }
+    this.isHover = true
+    const linkNode = event.target as HTMLElement
+    const preview = LinkBlot.formats(linkNode)
+    if (!preview || preview.startsWith('#')) {
+      return
+    }
+    const linkBlot = Quill.find(linkNode) as TypeParchment.Blot
+    const index = this.quill.getIndex(linkBlot)
+    const [link, offset] = this.quill.scroll.descendant(
+      LinkBlot,
+      index,
+    )
+    const length = link && link.length()
+    this.linkRange = new Range(index - offset, length)
+    this.debouncedShowToolTip('link', preview, this.linkRange)
+  }
+
+  listen() {
+    super.listen()
+    this.root.querySelector('a.ql-remove').addEventListener('click', (event) => {
+      if (!isNullOrUndefined(this.linkRange)) {
+        const range = this.linkRange
+        this.restoreFocus()
+        this.quill.formatText(range, 'link', false, Emitter.sources.API)
+        delete this.linkRange
+      }
+      event.preventDefault()
+      this.hide()
+    })
+
+    this.quill.root.addEventListener(
+      'mouseover',
+      (event) => {
+        const target = event.target as HTMLElement
+        if (
+          (target.tagName.toUpperCase() !== 'A'
+            || !target.classList.contains(LinkBlot.className))
+          && !target.closest(`a.${LinkBlot.className}`)
+        ) {
+          return
+        }
+        this.handleMouseEnter(event)
+      },
+      false,
+    )
+
+    this.quill.root.addEventListener(
+      'mouseout',
+      (event) => {
+        const target = event.target as HTMLElement
+        if (target.tagName.toUpperCase() !== 'A' && !target.closest(`a.${LinkBlot.className}`)) {
+          return
+        }
+        this.handleMouseLeave()
+      },
+      false,
+    )
+
+    this.root.addEventListener(
+      'mouseenter',
+      () => {
+        this.isHover = true
+      },
+      false,
+    )
+
+    this.root.addEventListener('mouseleave', this.handleMouseLeave.bind(this), false)
+
+    this.root.querySelector('a.ql-preview').addEventListener('click', (event) => {
+      const link = LinkBlot.sanitize(this.textbox.value)
+      window.open(link, '_blank')
+      event.preventDefault()
+    })
+    this.root.querySelector('input[type="text"]').addEventListener('focus', () => {
+      this.isInputFocus = true
+    })
+    this.root.querySelector('input[type="text"]').addEventListener('blur', () => {
+      this.isInputFocus = false
+      this.save()
+    })
+    this.quill.on(
+      Emitter.events.SELECTION_CHANGE,
+      (range, _oldRange, source) => {
+        if (isNullOrUndefined(range)) return
+        if (source === Emitter.sources.USER) {
+          const [link, offset] = this.quill.scroll.descendant(
+            LinkBlot,
+            range.index,
+          )
+
+          if (!isNullOrUndefined(link)) {
+            this.linkRange = new Range(range.index - offset, link.length())
+            const preview = LinkBlot.formats(link.domNode)
+            if (!preview.startsWith('#')) {
+              this.edit('link', preview, this.linkRange)
+            }
+            return
+          }
+        }
+        if (this.shouldHide()) {
+          this.hide()
+        }
+      },
+    )
+    this.quill.on(
+      Emitter.events.TEXT_CHANGE,
+      () => {
+        const selection = this.quill.getSelection()
+        const index = selection && selection.index
+        setTimeout(() => {
+          const link = this.quill.scroll.descendant(
+            LinkBlot,
+            index,
+          )[0]
+          if (!link) {
+            this.handleMouseLeave()
+          }
+        })
+      },
+    )
+  }
+
+  save() {
+    let value = this.textbox.value
+    if (!value) return
+    this.textbox.value = ''
+    switch (this.root.getAttribute('data-mode')) {
+      case 'link': {
+        const { scrollTop } = this.quill.root
+        if (this.options.autoProtocol) {
+          value = this.addHttpProtocol(value)
+        }
+
+        if (this.linkRange) {
+          this.quill.formatText(
+            this.linkRange,
+            'link',
+            value,
+            Emitter.sources.USER,
+          )
+          this.restoreFocus()
+        }
+        else {
+          this.restoreFocus()
+          this.quill.format('link', value, Emitter.sources.USER)
+        }
+        this.quill.root.scrollTop = scrollTop
+        break
+      }
+      case 'formula': {
+        const range = this.quill.getSelection(true)
+        if (!isNullOrUndefined(range)) {
+          const index = range.index + range.length
+          this.quill.insertEmbed(
+            index,
+            this.root.getAttribute('data-mode'),
+            value,
+            Emitter.sources.USER,
+          )
+          if (this.root.getAttribute('data-mode') === 'formula') {
+            this.quill.insertText(index + 1, ' ', Emitter.sources.USER)
+          }
+          this.quill.setSelection(index + 2, Emitter.sources.USER)
+        }
+        break
+      }
+      case 'video': {
+        const range = this.quill.getSelection(true)
+        this.quill.insertText(range.index, '\n', Emitter.sources.USER)
+        this.quill.insertEmbed(range.index + 1, 'video', { src: value }, Emitter.sources.USER)
+        this.quill.insertText(range.index + 2, '\n', Emitter.sources.USER)
+        this.quill.setSelection(range.index + 3, Emitter.sources.SILENT)
+        this.textbox.value = ''
+        this.hide()
+        break
+      }
+      default:
+    }
+  }
+
+  position(reference) {
+    const left = reference.left
+    const top = reference.bottom + this.quill.root.scrollTop
+    this.root.style.left = `${left}px`
+    this.root.style.top = `${top}px`
+    this.root.classList.remove('ql-flip')
+    const containerBounds = this.boundsContainer.getBoundingClientRect()
+    const rootBounds = this.root.getBoundingClientRect()
+    let shift = 0
+    if (rootBounds.right > containerBounds.right) {
+      shift = containerBounds.right - rootBounds.right
+      this.root.style.left = `${left + shift}px`
+    }
+    if (rootBounds.left < containerBounds.left) {
+      shift = containerBounds.left - rootBounds.left
+      this.root.style.left = `${left + shift}px`
+    }
+    if (rootBounds.bottom > containerBounds.bottom) {
+      const height = rootBounds.bottom - rootBounds.top
+      const verticalShift = reference.bottom - reference.top + height
+      const fixedTop = top - verticalShift
+      this.root.style.top = `${fixedTop < 0 ? this.quill.root.scrollTop + reference.top : fixedTop}px`
+      this.root.classList.add('ql-flip')
+    }
+    return shift
+  }
+
+  // @ts-expect-error
+  edit(mode: string = 'link', preview = null, range) {
+    this.linkRange = range || this.quill.selection.savedRange
+    this.root.classList.remove('ql-hidden')
+    this.root.classList.add('ql-editing')
+    if (!isNullOrUndefined(preview)) {
+      this.textbox.value = preview
+    }
+    else if (mode !== this.root.getAttribute('data-mode')) {
+      this.textbox.value = ''
+    }
+    this.position(this.quill.getBounds(range || this.quill.selection.savedRange))
+    if (this.textbox.value === '') {
+      this.textbox.focus()
+    }
+    this.textbox.setAttribute(
+      'placeholder',
+      this.textbox.getAttribute(`data-${mode}`) || '',
+    )
+    this.root.setAttribute('data-mode', mode)
+  }
+
+  show() {
+    super.show()
+    this.root.removeAttribute('data-mode')
+  }
+
+  addHttpProtocol(url: string) {
+    let result = url
+    if (!url) {
+      return ''
+    }
+    if (!hadProtocol(url)) {
+      result = `${this.options.autoProtocol}://${url}`
+    }
+    return result
+  }
+}

package/src/modules/mathlive/formats.ts

@@ -0,0 +1,39 @@
+import type { MathfieldElement } from 'mathlive'
+import type { Root } from 'parchment'
+import Quill from 'quill'
+
+const Parchment = Quill.import('parchment')
+export type MathliveBlotMode = 'dialog' | 'only-read'
+export class MathliveBlot extends Parchment.EmbedBlot {
+  static blotName = 'mathlive'
+  static tagName = 'math-field'
+  static className = 'ql-math-field'
+  mode: MathliveBlotMode
+
+  static create(obj: { value: string, mode: MathliveBlotMode }) {
+    const el = super.create() as MathfieldElement
+    el.setAttribute('mode', obj.mode)
+    el.classList.add('view')
+    el.innerHTML = obj.value
+    el.setValue(obj.value)
+    return el
+  }
+
+  static value(domNode: MathfieldElement) {
+    return {
+      value: domNode.value,
+      mode: domNode.getAttribute('mode'),
+    }
+  }
+
+  constructor(scroll: Root, public domNode: MathfieldElement) {
+    super(scroll, domNode)
+    domNode.setAttribute('contenteditable', 'false')
+    this.mode = (domNode.getAttribute('mode') || 'only-read') as MathliveBlotMode
+  }
+
+  html() {
+    const formula = this.domNode.value
+    return `<math-field class="ql-math-field view" contenteditable="false" mode="${this.mode}">${formula}</math-field>`
+  }
+}

package/src/modules/mathlive/index.ts

@@ -0,0 +1,3 @@
+export * from './formats'
+export * from './module'
+export * from './tooltip'

package/src/modules/mathlive/module.ts

@@ -0,0 +1,37 @@
+import Quill from 'quill'
+import { MathliveBlot } from './formats'
+import { MathliveTooltip } from './tooltip'
+
+export class MathliveModule {
+  tooltip: MathliveTooltip
+  static register() {
+    Quill.register({ [`formats/${MathliveBlot.blotName}`]: MathliveBlot }, true)
+  }
+
+  constructor(public quill: Quill) {
+    this.tooltip = new MathliveTooltip(quill)
+
+    this.quill.root.addEventListener(
+      'click',
+      (e: MouseEvent) => {
+        if (!this.quill.isEnabled()) return
+        const path = e.composedPath() as HTMLElement[]
+        if (!path || path.length <= 0) return
+
+        const mathliveNode = path.find(node => node.tagName && node.tagName.toUpperCase() === MathliveBlot.tagName.toUpperCase() && node.classList.contains(MathliveBlot.className))
+        const mathliveBlot = Quill.find(mathliveNode) as MathliveBlot | null
+        if (mathliveBlot) {
+          const { value, mode } = MathliveBlot.value(mathliveBlot.domNode)
+          if (mode === 'dialog') {
+            this.createDialog(value)
+          }
+        }
+      },
+      true,
+    )
+  }
+
+  createDialog(value?: string) {
+    this.tooltip.edit(value)
+  }
+}

package/src/modules/mathlive/tooltip.ts

@@ -0,0 +1,87 @@
+import type { MathfieldElement } from 'mathlive'
+import type { Bounds } from 'quill/core/selection'
+import type TypeTooltip from 'quill/ui/tooltip'
+import Quill from 'quill'
+import { isString } from '../../utils/is'
+
+const Delta = Quill.import('delta')
+const Tooltip = Quill.import('ui/tooltip') as typeof TypeTooltip
+export class MathliveTooltip extends Tooltip {
+  static TEMPLATE = ``
+
+  mathliveDom: MathfieldElement
+  editValue?: string
+
+  constructor(quill: Quill, boundsContainer?: HTMLElement) {
+    super(quill, boundsContainer)
+    this.mathliveDom = document.createElement('math-field') as MathfieldElement
+    this.mathliveDom.classList.add('ql-math-field')
+    this.root.appendChild(this.mathliveDom)
+    this.root.classList.add('math-field-tooltip')
+    this.listen()
+  }
+
+  listen() {
+    this.mathliveDom.addEventListener('blur', (event) => {
+      this.hide()
+    })
+    this.root.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        this.save()
+      }
+      else if (event.key === 'Escape') {
+        event.preventDefault()
+        this.cancel()
+      }
+    })
+  }
+
+  cancel() {
+    this.hide()
+    this.restoreFocus()
+  }
+
+  edit(value?: string) {
+    this.editValue = value
+    this.root.classList.remove('ql-hidden')
+    this.root.classList.add('ql-editing')
+    this.mathliveDom.setValue(value || '')
+    const range = this.quill.getSelection()
+    const bounds = range ? this.quill.getBounds(range) : null
+    if (bounds != null) {
+      this.position(bounds)
+    }
+    this.show()
+    this.mathliveDom.focus()
+  }
+
+  restoreFocus() {
+    this.mathliveDom.blur()
+    this.quill.focus({ preventScroll: true })
+  }
+
+  save() {
+    const range = this.quill.getSelection(true)
+    const inputValue = this.mathliveDom.value
+    if (!inputValue) return
+    const contentData = this.quill.getContents(range.index, 1).ops[0].insert
+    let deleteCount = 0
+    if (!isString(contentData) && contentData.mathlive) {
+      deleteCount += 1
+    }
+    const delta = new Delta()
+      .retain(range.index)
+      .delete(Math.max(deleteCount, range.length))
+      .insert({ mathlive: { value: inputValue, mode: 'dialog' } })
+    this.quill.updateContents(delta, Quill.sources.USER)
+    this.quill.setSelection(range.index + 1, Quill.sources.SILENT)
+    this.hide()
+  }
+
+  position(reference: Bounds) {
+    const adjustedReference = { ...reference }
+    adjustedReference.left = reference.left + this.root.offsetWidth / 2 - reference.width / 2
+    return super.position(adjustedReference)
+  }
+}

package/src/modules/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/modules/mention/index.ts

@@ -0,0 +1,2 @@
+export * from './mention'
+export * from './mention-link'

package/src/modules/mention/mention-link.ts

@@ -0,0 +1,64 @@
+import type TypeEmbed from 'quill/blots/embed'
+import type TypeScroll from 'quill/blots/scroll'
+import Quill from 'quill'
+import { DEFAULT_MENTION_CHAR, MENTION_CHAR, ON_MENTION_LINK_REMOVE } from './constants'
+
+const Embed = Quill.import('blots/embed') as typeof TypeEmbed
+
+export class MentionLink extends Embed {
+  static blotName: string
+  static tagName: string
+  static className: string
+  mentionData: any
+
+  static create(data) {
+    let node: HTMLElement
+    if (data.link) {
+      node = document.createElement('a')
+      node.setAttribute('href', data.link)
+      node.setAttribute('target', data.target)
+    }
+    else {
+      node = document.createElement(this.tagName)
+    }
+    node.classList.add(this.className)
+    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: HTMLElement) {
+    const value: Record<string, any> = {
+      char: domNode.getAttribute(MENTION_CHAR) || DEFAULT_MENTION_CHAR,
+      text: domNode.getAttribute('title'),
+      name: domNode.dataset.mentionId,
+    }
+    if (domNode.tagName.toLowerCase() === 'a' && domNode.hasAttribute('href')) {
+      value.link = domNode.getAttribute('href')
+      value.target = domNode.getAttribute('target')
+    }
+    return value
+  }
+
+  constructor(public scroll: TypeScroll, domNode, data) {
+    super(scroll, domNode)
+    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'