@opentiny/fluent-editor 3.20.1 → 3.20.2

package/src/toolbar/better-picker.ts

@@ -0,0 +1,370 @@
+import Quill from 'quill'
+import { isNullOrUndefined } from '../config/editor.utils'
+
+const SnowTheme = Quill.imports['themes/snow']
+
+let optionsCounter = 0
+
+function toggleAriaAttribute(element, attribute) {
+  element.setAttribute(
+    attribute,
+    element.getAttribute(attribute) !== 'true',
+  )
+}
+
+class Picker {
+  container: any
+  label: any
+  options: any
+  select: any
+  constructor(select) {
+    this.select = select
+    this.container = document.createElement('span')
+    this.buildPicker()
+    this.select.style.display = 'none'
+    this.select.parentNode.insertBefore(this.container, this.select)
+
+    this.label.addEventListener('mousedown', (e) => {
+      this.togglePicker()
+      e.preventDefault()
+    })
+    this.label.addEventListener('keydown', (event) => {
+      switch (event.key) {
+        case 'Enter':
+          this.togglePicker()
+          break
+        case 'Escape':
+          this.escape()
+          event.preventDefault()
+          break
+        default:
+      }
+    })
+    this.select.addEventListener('change', this.update.bind(this))
+  }
+
+  togglePicker() {
+    this.container.classList.toggle('ql-expanded')
+    // Toggle aria-expanded and aria-hidden to make the picker accessible
+    toggleAriaAttribute(this.label, 'aria-expanded')
+    toggleAriaAttribute(this.options, 'aria-hidden')
+  }
+
+  buildItem(option) {
+    const item = document.createElement('span')
+    item.tabIndex = 0
+    item.setAttribute('role', 'button')
+    item.classList.add('ql-picker-item')
+    if (option.hasAttribute('value')) {
+      item.setAttribute('data-value', option.getAttribute('value'))
+    }
+    if (option.textContent) {
+      item.setAttribute('data-label', option.textContent)
+    }
+    item.addEventListener('click', () => {
+      this.selectItem(item, true)
+    })
+    item.addEventListener('keydown', (event) => {
+      switch (event.key) {
+        case 'Enter':
+          this.selectItem(item, true)
+          event.preventDefault()
+          break
+        case 'Escape':
+          this.escape()
+          event.preventDefault()
+          break
+        default:
+      }
+    })
+
+    return item
+  }
+
+  buildLabel() {
+    const label = document.createElement('span')
+    label.classList.add('ql-picker-label')
+    label.innerHTML = `
+      <svg viewbox="0 0 18 18">
+        <polygon class="ql-stroke" points="7 11 9 13 11 11 7 11"></polygon>
+        <polygon class="ql-stroke" points="7 7 9 5 11 7 7 7"></polygon>
+      </svg>
+    `
+    label.tabIndex = 0
+    label.setAttribute('role', 'button')
+    label.setAttribute('aria-expanded', 'false')
+    this.container.appendChild(label)
+    return label
+  }
+
+  buildOptions() {
+    const options = document.createElement('span')
+    options.classList.add('ql-picker-options')
+
+    // Don't want screen readers to read this until options are visible
+    options.setAttribute('aria-hidden', 'true')
+    options.tabIndex = -1
+
+    // Need a unique id for aria-controls
+    options.id = `ql-picker-options-${optionsCounter}`
+    optionsCounter += 1
+    this.label.setAttribute('aria-controls', options.id)
+
+    this.options = options
+
+    Array.from(this.select.options).forEach((option: any) => {
+      const item = this.buildItem(option)
+      options.appendChild(item)
+      if (option.selected === true) {
+        this.selectItem(item)
+      }
+    })
+    this.container.appendChild(options)
+  }
+
+  buildPicker() {
+    Array.from(this.select.attributes).forEach((item: any) => {
+      this.container.setAttribute(item.name, item.value)
+    })
+    this.container.classList.add('ql-picker')
+    this.label = this.buildLabel()
+    this.buildOptions()
+  }
+
+  escape() {
+    // Close menu and return focus to trigger label
+    this.close()
+    // Need setTimeout for accessibility to ensure that the browser executes
+    // focus on the next process thread and after any DOM content changes
+    setTimeout(() => this.label.focus(), 1)
+  }
+
+  close() {
+    this.container.classList.remove('ql-expanded')
+    this.label.setAttribute('aria-expanded', 'false')
+    this.options.setAttribute('aria-hidden', 'true')
+  }
+
+  selectItem(item, trigger = false) {
+    const selected = this.container.querySelector('.ql-selected')
+    if (item === selected) return
+    if (!isNullOrUndefined(selected)) {
+      selected.classList.remove('ql-selected')
+    }
+    if (isNullOrUndefined(item)) return
+    item.classList.add('ql-selected')
+    this.select.selectedIndex = Array.from(item.parentNode.children).indexOf(
+      item,
+    )
+    if (item.hasAttribute('data-value')) {
+      this.label.setAttribute('data-value', item.getAttribute('data-value'))
+    }
+    else {
+      this.label.removeAttribute('data-value')
+    }
+    if (item.hasAttribute('data-label')) {
+      this.label.setAttribute('data-label', item.getAttribute('data-label'))
+    }
+    else {
+      this.label.removeAttribute('data-label')
+    }
+    if (trigger) {
+      let ev
+      if (typeof Event === 'function') {
+        ev = new Event('change')
+      }
+      else {
+        ev = document.createEvent('Event')
+        ev.initEvent('change', true, true)
+      }
+      this.select.dispatchEvent(ev)
+      this.close()
+    }
+  }
+
+  update() {
+    let option
+    if (this.select.selectedIndex > -1) {
+      const item = this.container.querySelector('.ql-picker-options').children[
+        this.select.selectedIndex
+      ]
+      option = this.select.options[this.select.selectedIndex]
+      this.selectItem(item)
+    }
+    else {
+      this.selectItem(null)
+    }
+    const isActive
+      = !isNullOrUndefined(option)
+      && option !== this.select.querySelector('option[selected]')
+
+    if (isActive) {
+      this.label.classList.add('ql-active')
+    }
+    else {
+      this.label.classList.remove('ql-active')
+    }
+  }
+}
+
+class IconPicker extends Picker {
+  defaultItem: any
+  constructor(select, icons) {
+    super(select)
+    this.container.classList.add('ql-icon-picker')
+    Array.from(this.container.querySelectorAll('.ql-picker-item')).forEach(
+      (item: any) => {
+        item.innerHTML = icons[item.getAttribute('data-value') || '']
+      },
+    )
+    this.defaultItem = this.container.querySelector('.ql-selected')
+    this.selectItem(this.defaultItem, null)
+  }
+
+  selectItem(target, trigger) {
+    super.selectItem(target, trigger)
+    const item = target || this.defaultItem
+    if (this.label.innerHTML === item.innerHTML) return
+    this.label.innerHTML = item.innerHTML
+  }
+}
+
+class ColorPicker extends Picker {
+  constructor(select, label) {
+    super(select)
+    this.label.innerHTML = label
+    this.container.classList.add('ql-color-picker')
+    Array.from(this.container.querySelectorAll('.ql-picker-item'))
+      .slice(0, 7)
+      .forEach((item: any) => {
+        item.classList.add('ql-primary')
+      })
+  }
+
+  buildItem(option) {
+    const item = super.buildItem(option)
+    item.style.backgroundColor = option.getAttribute('value') || ''
+    return item
+  }
+
+  selectItem(item, trigger) {
+    super.selectItem(item, trigger)
+    const colorLabel = this.label.querySelector('.ql-color-label')
+    const value = item ? item.getAttribute('data-value') || '' : ''
+    if (colorLabel) {
+      if (colorLabel.tagName === 'line') {
+        colorLabel.style.stroke = value
+      }
+      else {
+        colorLabel.style.fill = value
+      }
+    }
+  }
+}
+
+Quill.register('ui/picker', Picker, true)
+Quill.register('ui/icon-picker', IconPicker, true)
+Quill.register('ui/color-picker', ColorPicker, true)
+
+const ALIGNS = [false, 'center', 'right']
+
+const COLORS = [
+  '#000000',
+  '#e60000',
+  '#ff9900',
+  '#ffff00',
+  '#008a00',
+  '#0066cc',
+  '#9933ff',
+  '#ffffff',
+  '#facccc',
+  '#ffebcc',
+  '#ffffcc',
+  '#cce8cc',
+  '#cce0f5',
+  '#ebd6ff',
+  '#bbbbbb',
+  '#f06666',
+  '#ffc266',
+  '#ffff66',
+  '#66b966',
+  '#66a3e0',
+  '#c285ff',
+  '#888888',
+  '#a10000',
+  '#b26b00',
+  '#b2b200',
+  '#006100',
+  '#0047b2',
+  '#6b24b2',
+  '#444444',
+  '#5c0000',
+  '#663d00',
+  '#666600',
+  '#003700',
+  '#002966',
+  '#3d1466',
+]
+
+const FONTS = [false, 'serif', 'monospace']
+
+const HEADERS = ['1', '2', '3', false]
+
+const SIZES = ['small', false, 'large', 'huge']
+
+SnowTheme.prototype.buildPickers = function (selects, icons) {
+  this.pickers = Array.from(selects).map((select: any) => {
+    if (select.classList.contains('ql-align')) {
+      if (isNullOrUndefined(select.querySelector('option'))) {
+        fillSelect(select, ALIGNS)
+      }
+      return new IconPicker(select, icons.align)
+    }
+    if (
+      select.classList.contains('ql-background')
+      || select.classList.contains('ql-color')
+    ) {
+      const format = select.classList.contains('ql-background')
+        ? 'background'
+        : 'color'
+      if (isNullOrUndefined(select.querySelector('option'))) {
+        fillSelect(
+          select,
+          COLORS,
+        )
+      }
+      return new ColorPicker(select, icons[format])
+    }
+    if (isNullOrUndefined(select.querySelector('option'))) {
+      if (select.classList.contains('ql-font')) {
+        fillSelect(select, FONTS)
+      }
+      else if (select.classList.contains('ql-header')) {
+        fillSelect(select, HEADERS)
+      }
+      else if (select.classList.contains('ql-size')) {
+        fillSelect(select, SIZES)
+      }
+    }
+    return new Picker(select)
+  })
+  const update = () => {
+    this.pickers.forEach((picker) => {
+      picker.update()
+    })
+  }
+  this.quill.on(Quill.events.EDITOR_CHANGE, update)
+}
+
+function fillSelect(select, values, defaultValue = false) {
+  values.forEach((value) => {
+    const option = document.createElement('option')
+    if (value === defaultValue) {
+      option.setAttribute('selected', 'selected')
+    }
+    else {
+      option.setAttribute('value', value)
+    }
+    select.appendChild(option)
+  })
+}

package/src/toolbar/index.ts

@@ -0,0 +1,180 @@
+import type TypeToolbar from 'quill/modules/toolbar'
+import Quill from 'quill'
+import { isNullOrUndefined } from '../config/editor.utils'
+import './better-picker'
+
+const Delta = Quill.import('delta')
+const Parchment = Quill.import('parchment')
+const levels = ['error', 'warn', 'log', 'info'] as const
+let level = 'warn' as const
+
+function debuglogger(method: typeof levels[number], ...args) {
+  if (levels.indexOf(method) <= levels.indexOf(level)) {
+    console[method](...args) // eslint-disable-line no-console
+  }
+}
+
+function namespace(ns) {
+  return levels.reduce((logger, method) => {
+    logger[method] = debuglogger.bind(console, method, ns)
+    return logger
+  }, {} as Record<typeof levels[number], (...args: any) => void>)
+}
+
+namespace.level = (newLevel) => {
+  level = newLevel
+}
+debuglogger.level = namespace.level
+const debug = namespace('quill:toolbar')
+
+const Toolbar = Quill.import('modules/toolbar') as typeof TypeToolbar
+// let oldClean = Toolbar.DEFAULTS.handlers.clean
+
+class BetterToolbar extends Toolbar {
+  update(range) {
+    const formats = isNullOrUndefined(range) ? {} : this.quill.getFormat(range) as Record<string, any>
+    this.controls.forEach((pair) => {
+      const [format, input] = pair
+      if (input.tagName === 'SELECT') {
+        const select = input as HTMLSelectElement
+        let option
+        if (isNullOrUndefined(range)) {
+          option = null
+        }
+        else if (isNullOrUndefined(formats[format])) {
+          option = select.querySelector('option[selected]')
+        }
+        else if (!Array.isArray(formats[format])) {
+          let value = format === 'header' ? formats[format].value : formats[format]
+          if (typeof value === 'string') {
+            value = value.replace(/"/g, '\\"')
+          }
+          option = select.querySelector(`option[value="${value}"]`)
+        }
+        if (isNullOrUndefined(option)) {
+          select.value = '' // TODO make configurable?
+          select.selectedIndex = -1
+        }
+        else {
+          option.selected = true
+        }
+      }
+      else if (isNullOrUndefined(range)) {
+        input.classList.remove('ql-active')
+      }
+      else if (input.hasAttribute('value')) {
+        // both being null should match (default values)
+        // '1' should match with 1 (headers)
+        let isActive
+          = formats[format] === input.getAttribute('value')
+          || (!isNullOrUndefined(formats[format])
+            && (formats[format].value === input.getAttribute('value')
+              || formats[format].toString() === input.getAttribute('value')))
+              || (isNullOrUndefined(formats[format]) && !input.getAttribute('value'))
+
+        if (!isActive) {
+          const checkFormat = formats[format]
+          if (checkFormat === 'checked' || checkFormat === 'unchecked') {
+            isActive = input.getAttribute('value') === 'check'
+          }
+        }
+
+        if (isActive) {
+          input.classList.add('ql-active')
+        }
+        else {
+          input.classList.remove('ql-active')
+        }
+      }
+      else {
+        if (!isNullOrUndefined(formats[format])) {
+          input.classList.add('ql-active')
+        }
+        else {
+          input.classList.remove('ql-active')
+        }
+      }
+    })
+  }
+
+  attach(input: HTMLElement) {
+    let format = Array.from(input.classList).find((className) => {
+      return className.indexOf('ql-') === 0
+    })
+    if (!format) return
+    format = format.slice('ql-'.length)
+
+    if (input.tagName === 'BUTTON') {
+      input.setAttribute('type', 'button')
+    }
+
+    if (this.handlers[format] == null && this.quill.scroll.query(format) == null) {
+      debug.warn('ignoring attaching to nonexistent format', format, input)
+      return
+    }
+
+    const eventName = input.tagName === 'SELECT' ? 'change' : 'click'
+    input.addEventListener(eventName, (e) => {
+      let value: boolean | string
+
+      if (input.tagName === 'SELECT') {
+        const select = input as HTMLSelectElement
+        if (select.selectedIndex < 0) return
+        const selected = select.options[select.selectedIndex]
+
+        if (selected.hasAttribute('selected')) {
+          value = false
+        }
+        else {
+          value = selected.value || false
+        }
+      }
+      else {
+        const button = input as HTMLButtonElement
+        if (button.classList.contains('ql-active')) {
+          value = false
+        }
+        else {
+          value = button.value || !button.hasAttribute('value')
+        }
+        e.preventDefault()
+      }
+
+      this.quill.focus({ preventScroll: format === 'screenshot' })
+      const [range] = this.quill.selection.getRange()
+      if (this.handlers[format] != null) {
+        // @ts-ignore
+        if (!isNullOrUndefined(window.quillIsIntable) && window.quillIsIntable === true && (format === 'blockquote' || format === 'code-block' || format === 'list' || format === 'indent' || format === 'clean')) {
+          return
+        }
+        this.handlers[format].call(this, value)
+      }
+      else if (
+        // @ts-ignore
+        this.quill.scroll.query(format).prototype instanceof Parchment.EmbedBlot
+      ) {
+        value = prompt(`Enter ${format}`)
+        if (!value) return
+        this.quill.updateContents(
+          new Delta()
+            .retain(range.index)
+            .delete(range.length)
+            .insert({ [format]: value }),
+          Quill.sources.USER,
+        )
+      }
+      else {
+        // @ts-ignore
+        if (!isNullOrUndefined(window.quillIsIntable) && window.quillIsIntable === true && (format === 'blockquote' || format === 'code-block' || format === 'list' || format === 'indent' || format === 'clean')) {
+          return
+        }
+        this.quill.format(format, value, Quill.sources.USER)
+      }
+
+      this.update(range)
+    })
+    this.controls.push([format, input])
+  }
+}
+
+export default BetterToolbar

package/src/utils/debounce.ts

@@ -0,0 +1,149 @@
+import { isObject, root } from './method'
+
+export function debounce(func, wait, options = undefined) {
+  let lastArgs,
+    lastThis,
+    maxWait,
+    result,
+    timerId,
+    lastCallTime
+
+  let lastInvokeTime = 0
+  let leading = false
+  let maxing = false
+  let trailing = true
+
+  // Bypass `requestAnimationFrame` by explicitly setting `wait=0`.
+  const useRAF = (!wait && wait !== 0 && typeof root.requestAnimationFrame === 'function')
+
+  if (typeof func !== 'function') {
+    throw new TypeError('Expected a function')
+  }
+  wait = +wait || 0
+  if (isObject(options)) {
+    leading = !!options.leading
+    maxing = 'maxWait' in options
+    maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait
+    trailing = 'trailing' in options ? !!options.trailing : trailing
+  }
+
+  function invokeFunc(time) {
+    const args = lastArgs
+    const thisArg = lastThis
+
+    lastArgs = lastThis = undefined
+    lastInvokeTime = time
+    result = func.apply(thisArg, args)
+    return result
+  }
+
+  function startTimer(pendingFunc, wait) {
+    if (useRAF) {
+      root.cancelAnimationFrame(timerId)
+      return root.requestAnimationFrame(pendingFunc)
+    }
+    return setTimeout(pendingFunc, wait)
+  }
+
+  function cancelTimer(id) {
+    if (useRAF) {
+      return root.cancelAnimationFrame(id)
+    }
+    clearTimeout(id)
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time
+    // Start the timer for the trailing edge.
+    timerId = startTimer(timerExpired, wait)
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result
+  }
+
+  function remainingWait(time) {
+    const timeSinceLastCall = time - lastCallTime
+    const timeSinceLastInvoke = time - lastInvokeTime
+    const timeWaiting = wait - timeSinceLastCall
+
+    return maxing
+      ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting
+  }
+
+  function shouldInvoke(time) {
+    const timeSinceLastCall = time - lastCallTime
+    const timeSinceLastInvoke = time - lastInvokeTime
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait)
+      || (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait))
+  }
+
+  function timerExpired() {
+    const time = Date.now()
+    if (shouldInvoke(time)) {
+      return trailingEdge(time)
+    }
+    // Restart the timer.
+    timerId = startTimer(timerExpired, remainingWait(time))
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time)
+    }
+    lastArgs = lastThis = undefined
+    return result
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      cancelTimer(timerId)
+    }
+    lastInvokeTime = 0
+    lastArgs = lastCallTime = lastThis = timerId = undefined
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(Date.now())
+  }
+
+  function pending() {
+    return timerId !== undefined
+  }
+
+  function debounced(...args) {
+    const time = Date.now()
+    const isInvoking = shouldInvoke(time)
+
+    lastArgs = args
+    lastThis = this
+    lastCallTime = time
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime)
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        timerId = startTimer(timerExpired, wait)
+        return invokeFunc(lastCallTime)
+      }
+    }
+    if (timerId === undefined) {
+      timerId = startTimer(timerExpired, wait)
+    }
+    return result
+  }
+  debounced.cancel = cancel
+  debounced.flush = flush
+  debounced.pending = pending
+  return debounced
+}