@opentiny/fluent-editor 3.20.2 → 3.20.3

package/src/global-link/index.ts

@@ -1,165 +0,0 @@
-import Quill from 'quill'
-import { getEventComposedPath } from '../config/editor.utils'
-import CustomerWidgetLink from './formats/customer-widget-link'
-import DocumentLink from './formats/doc-link'
-import WikiLink from './formats/wiki-link'
-import WorkItemLink from './formats/work-item-link'
-
-const Module = Quill.imports['core/module']
-const Delta = Quill.imports.delta
-
-// @dynamic
-class GlobalLink extends Module {
-  open: boolean
-  wrap: any
-  panel: any
-  quill: any
-
-  static register() {
-    Quill.register('formats/wiki-link', WikiLink)
-    Quill.register('formats/doc-link', DocumentLink)
-    Quill.register('formats/work-item-link', WorkItemLink)
-    Quill.register('formats/customer-widget-link', CustomerWidgetLink)
-  }
-
-  constructor(quill, options) {
-    super(quill, options)
-    const toolbar = quill.getModule('toolbar')
-    this.open = false
-    this.panel = options.component
-    this.wrap = options.wrap
-    const globalLinkBtn = toolbar.container && toolbar.container.querySelector('.ql-global-link')
-    toolbar.addHandler('global-link', this.handleGlobalLinkButtonClick.bind(this))
-    quill.root.addEventListener('click', this.onEditorClick.bind(this))
-    document.body.addEventListener('click', (evt) => {
-      if (!this.wrap.contains(evt.target) && !(globalLinkBtn && globalLinkBtn.contains(evt.target))) {
-        this.open = false
-        this.wrap.classList.add('global-link-hide')
-      }
-    })
-    this.panel.wikiLink.subscribe(this.addWikiLink.bind(this))
-    this.panel.docLink.subscribe(this.addDocLink.bind(this))
-    this.panel.workItemLink.subscribe(this.addWorkItemLink.bind(this))
-    if (this.panel.close) {
-      this.panel.close.subscribe(this.closePanel.bind(this))
-    }
-  }
-
-  onEditorClick(evt: any) {
-    if (!evt.ctrlKey) return
-    const path = getEventComposedPath(evt)
-    if (!path || path.length <= 0) return
-    const linkNode = path.filter((node) => {
-      return node.classList && (node.classList.contains(WikiLink.className)
-        || node.classList.contains(DocumentLink.className)
-        || node.classList.contains(WorkItemLink.className))
-    })[0]
-
-    if (!linkNode) return
-
-    if (linkNode.classList.contains(WikiLink.className)) {
-      this.handleLinkClick(linkNode)
-    }
-    else if (linkNode.classList.contains(DocumentLink.className)) {
-      this.handleLinkClick(linkNode)
-    }
-    else if (linkNode.classList.contains(WorkItemLink.className)) {
-      const tableRow = path.filter((node) => {
-        return node.tagName && node.tagName.toUpperCase() === 'TR'
-      })[0]
-
-      if (tableRow) {
-        this.handleLinkClick(tableRow)
-      }
-    }
-  }
-
-  handleLinkClick(linkNode) {
-    const href = linkNode.getAttribute('href')
-    if (href) {
-      window.open(href)
-    }
-  }
-
-  handleGlobalLinkButtonClick(_value) {
-    this.open = !this.open
-    this.triggerPanel()
-  }
-
-  triggerPanel() {
-    if (this.open) {
-      this.wrap.classList.remove('global-link-hide')
-    }
-    else {
-      this.wrap.classList.add('global-link-hide')
-    }
-  }
-
-  addWikiLink(wikiData) {
-    const index = this.quill.getSelection(true).index
-    const arr: { link: any, text: any } [] = []
-    const delta = arr.reduce.call(wikiData, (op: any, wiki) => {
-      op.insert({
-        [WikiLink.blotName]: {
-          link: wiki.link,
-          text: wiki.text,
-        },
-      })
-      return op
-    }, new Delta().retain(index))
-
-    this.quill.updateContents(delta, Quill.sources.USER)
-    this.quill.setSelection(index + 1, Quill.sources.USER)
-    if (this.panel.autoClose) {
-      this.closePanel()
-    }
-  }
-
-  addDocLink(docData) {
-    const index = this.quill.getSelection(true).index
-    const arr: { link: any, text: any, icon: any } [] = []
-    const delta = arr.reduce.call(docData, (op: any, doc) => {
-      op.insert({
-        [DocumentLink.blotName]: {
-          link: doc.link,
-          text: doc.text,
-          icon: doc.icon,
-        },
-      })
-      return op
-    }, new Delta().retain(index))
-
-    this.quill.updateContents(delta, Quill.sources.USER)
-    this.quill.setSelection(index + 1, Quill.sources.USER)
-    if (this.panel.autoClose) {
-      this.closePanel()
-    }
-  }
-
-  addWorkItemLink(workItemData) {
-    const index = this.quill.getSelection(true).index
-    const arr: { url: any, table: any } [] = []
-    const delta = arr.reduce.call(workItemData, (op: any, workItem) => {
-      op.insert({
-        [WorkItemLink.blotName]: {
-          link: workItem.url,
-          data: workItem.table,
-        },
-      })
-      return op
-    }, new Delta().retain(index))
-
-    this.quill.updateContents(delta, Quill.sources.USER)
-    this.quill.setSelection(index + 1, Quill.sources.USER)
-    if (this.panel.autoClose) {
-      this.closePanel()
-    }
-  }
-
-  closePanel() {
-    this.open = false
-    this.triggerPanel()
-  }
-}
-
-export default GlobalLink

package/src/global-link/utils/createTable.ts

@@ -1,54 +0,0 @@
-const tableConfig = [
-  { title: 'Number', field: 'id', width: '100' },
-  { title: 'Title', field: 'subject', width: '200' },
-  { title: 'Priority', field: 'priority', width: '100' },
-  { title: 'Iteration', field: 'iteration', width: '100' },
-  { title: 'Status', field: 'status', width: '100' },
-  { title: 'Conductor', field: 'assigned_to', width: '100' },
-]
-
-export function createTable(data: any[]) {
-  const table = document.createElement<'table'>('table')
-  createColGroup(table)
-  createTableHead(table)
-  createTableBody(table, data)
-  return table
-}
-
-function createColGroup(table: HTMLTableElement) {
-  const colGroup = document.createElement<'colgroup'>('colgroup')
-  tableConfig.forEach(({ width }) => {
-    const col = document.createElement<'col'>('col')
-    col.setAttribute('width', width)
-    colGroup.appendChild(col)
-  })
-  table.insertAdjacentElement('afterbegin', colGroup)
-}
-
-function createTableHead(table: HTMLTableElement) {
-  const tHead = table.createTHead()
-  const tRow = tHead.insertRow()
-  tableConfig.forEach(({ title }) => {
-    const tCell = tRow.insertCell()
-    tCell.textContent = title
-  })
-  return tHead
-}
-
-function createTableBody(table: HTMLTableElement, data: any[]) {
-  const tBody = table.createTBody();
-
-  [].forEach.call(data, (d) => {
-    const tRow = tBody.insertRow()
-    // @ts-ignore
-    tRow.setAttribute('href', d.url)
-    tableConfig.forEach(({ field }) => {
-      const tCell = tRow.insertCell()
-      tCell.classList.add(`work-item-${field}`)
-      // @ts-ignore
-      tCell.textContent = d[field]
-    })
-  })
-
-  return tBody
-}

package/src/index.ts

@@ -1,5 +0,0 @@
-import FluentEditor from './fluent-editor'
-
-export * from './config'
-
-export default FluentEditor

package/src/link/formats/link.ts

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

package/src/link/index.ts

@@ -1,35 +0,0 @@
-import Quill from 'quill'
-import LinkBlot from './formats/link'
-import Tooltip from './modules/tooltip'
-
-const icons = Quill.imports['ui/icons']
-const SnowTheme = Quill.imports['themes/snow']
-const Module = Quill.imports['core/module']
-
-// @dynamic
-class Link extends Module {
-  static register() {
-    Quill.register('blots/link', LinkBlot, true)
-  }
-
-  constructor(quill, options) {
-    super(quill, options)
-  }
-}
-
-SnowTheme.prototype.extendToolbar = function (toolbar) {
-  toolbar.container.classList.add('ql-snow')
-  this.buildButtons(toolbar.container.querySelectorAll('button'), icons)
-  this.buildPickers(toolbar.container.querySelectorAll('select'), icons)
-  this.tooltip = new Tooltip(this.quill, this.options.bounds)
-  if (toolbar.container.querySelector('.ql-link')) {
-    this.quill.keyboard.addBinding(
-      { key: 'k', shortKey: true },
-      (_range, context) => {
-        toolbar.handlers.link.call(toolbar, !context.format.link)
-      },
-    )
-  }
-}
-
-export default Link

package/src/link/modules/tooltip.ts

@@ -1,318 +0,0 @@
-import Quill from 'quill'
-import Emitter from 'quill/core/emitter'
-import { Range } from 'quill/core/selection'
-import { BaseTooltip } from 'quill/themes/base'
-import { debounce } from '../../../src/utils/debounce'
-import { LANG_CONF } from '../../config/editor.config'
-import { isNullOrUndefined } from '../../config/editor.utils'
-import LinkBlot from '../formats/link'
-
-// const Emitter = Quill.imports['core/emitter'];
-// const BaseTooltip = Quill.imports['themes/BaseTooltip'];
-// const Range = Quill.imports['core/selection/range'];
-
-// @dynamic
-export default class Tooltip extends BaseTooltip {
-  static TEMPLATE: string
-  isInputFocus: boolean
-  isHover: boolean
-  debouncedHideToolTip: any
-  debouncedShowToolTip: any
-  hide: any
-  linkRange: any
-  quill: any
-  root: any
-  restoreFocus: any
-  textbox: any
-  boundsContainer: any
-
-  constructor(quill, bounds) {
-    super(quill, bounds)
-    this.isInputFocus = false
-    this.isHover = false
-
-    this.debouncedHideToolTip = debounce(this.hideToolTip, 300)
-    this.debouncedShowToolTip = debounce(this.showToolTip, 300)
-  }
-
-  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) {
-    const isTooltipShow = !this.root.classList.contains('ql-hidden')
-    if (isTooltipShow) {
-      return
-    }
-
-    if (this.isInputFocus) {
-      this.save()
-    }
-    this.isHover = true
-    const linkNode = event.target
-    const preview = LinkBlot.formats(linkNode)
-    if (preview.startsWith('#')) {
-      return
-    }
-    const linkBlot = Quill.find(linkNode)
-    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) => {
-        if (
-          (event.target.tagName.toUpperCase() !== 'A'
-            || !event.target.classList.contains(LinkBlot.className))
-            && !event.target.closest(`a.${LinkBlot.className}`)
-        ) {
-          return
-        }
-        this.handleMouseEnter(event)
-      },
-      false,
-    )
-
-    this.quill.root.addEventListener(
-      'mouseout',
-      (event) => {
-        if (event.target.tagName.toUpperCase() !== 'A' && !event.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
-        const { autoProtocol } = this.quill.options
-        if (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
-  }
-
-  edit(mode = '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) {
-    let result = url
-    if (!url) {
-      return ''
-    }
-    if (!/^(?:f|ht)tps?\:\/\//.test(url)) {
-      result = `http://${url}`
-    }
-    return result
-  }
-}
-
-Tooltip.TEMPLATE = [
-  `<input type="text" data-formula="e=mc^2" data-link="${LANG_CONF.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('')