@opentiny/fluent-editor 3.20.1 → 3.20.2

package/src/global-link/index.ts

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

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

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

package/src/link/formats/link.ts

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

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

@@ -0,0 +1,318 @@
+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('')