@opentiny/fluent-editor 4.0.0-alpha.8 → 4.0.0-beta.0

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

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

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

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

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

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

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

package/src/modules/mathlive/module.ts

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

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

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

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

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

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