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

package/src/modules/table-up/index.ts

@@ -0,0 +1,83 @@
+import type Toolbar from 'quill/modules/toolbar'
+import type BaseTheme from 'quill/themes/base'
+import type Picker from 'quill/ui/picker'
+import type { Constructor } from '../../config/types'
+import type FluentEditor from '../../core/fluent-editor'
+import { CHANGE_LANGUAGE_EVENT } from '../../config'
+import { isFunction } from '../../utils/is'
+
+interface QuillTheme extends BaseTheme {
+  pickers: QuillThemePicker[]
+}
+type QuillThemePicker = (Picker & { options: HTMLElement })
+
+export function generateTableUp(QuillTableUp: Constructor) {
+  return class extends QuillTableUp {
+    constructor(public quill: FluentEditor, options: Partial<any>) {
+      super(quill, options)
+
+      if (!this.quill.options['format-painter']) this.quill.options['format-painter'] = {}
+      const currentIgnoreFormat = this.quill.options['format-painter'].ignoreFormat || []
+      this.quill.options['format-painter'].ignoreFormat = Array.from(
+        new Set([
+          ...currentIgnoreFormat,
+          'table-up-cell-inner',
+        ]),
+      )
+
+      this.quill.emitter.on(CHANGE_LANGUAGE_EVENT, () => {
+        this.options.texts = this.resolveTexts(options.texts)
+        const toolbar = this.quill.getModule('toolbar') as Toolbar
+        if (toolbar && (this.quill.theme as QuillTheme).pickers) {
+          const [, select] = (toolbar.controls as [string, HTMLElement][] || []).find(([name]) => name === this.statics.toolName) || []
+          if (select && select.tagName.toLocaleLowerCase() === 'select') {
+            const picker = (this.quill.theme as QuillTheme).pickers.find(picker => picker.select === select)
+            if (picker) {
+              this.buildCustomSelect(this.options.customSelect, picker)
+            }
+          }
+        }
+
+        Object.keys(this.modules).forEach((key) => {
+          if (isFunction(this.modules[key].destroy)) {
+            this.modules[key].destroy()
+          }
+        })
+        this.modules = {}
+        this.initModules()
+      })
+    }
+
+    resolveTexts(options: Record<string, string> = {}) {
+      return Object.assign({
+        fullCheckboxText: this.quill.getLangText('fullCheckboxText'),
+        customBtnText: this.quill.getLangText('customBtnText'),
+        confirmText: this.quill.getLangText('confirmText'),
+        cancelText: this.quill.getLangText('cancelText'),
+        rowText: this.quill.getLangText('rowText'),
+        colText: this.quill.getLangText('colText'),
+        notPositiveNumberError: this.quill.getLangText('notPositiveNumberError'),
+        custom: this.quill.getLangText('custom'),
+        clear: this.quill.getLangText('clear'),
+        transparent: this.quill.getLangText('transparent'),
+        perWidthInsufficient: this.quill.getLangText('perWidthInsufficient'),
+        CopyCell: this.quill.getLangText('CopyCell'),
+        CutCell: this.quill.getLangText('CutCell'),
+        InsertTop: this.quill.getLangText('InsertTop'),
+        InsertRight: this.quill.getLangText('InsertRight'),
+        InsertBottom: this.quill.getLangText('InsertBottom'),
+        InsertLeft: this.quill.getLangText('InsertLeft'),
+        MergeCell: this.quill.getLangText('MergeCell'),
+        SplitCell: this.quill.getLangText('SplitCell'),
+        DeleteRow: this.quill.getLangText('DeleteRow'),
+        DeleteColumn: this.quill.getLangText('DeleteColumn'),
+        DeleteTable: this.quill.getLangText('DeleteTable'),
+        BackgroundColor: this.quill.getLangText('BackgroundColor'),
+        BorderColor: this.quill.getLangText('BorderColor'),
+      }, Object.entries(options).reduce((pre, [key, value]) => {
+        pre[key] = this.quill.getLangText(value)
+        return pre
+      }, {} as Record<string, string>))
+    }
+  }
+}

package/src/modules/toolbar/better-picker.ts

@@ -0,0 +1,67 @@
+import type TypePicker from 'quill/ui/picker'
+import { EasyColorPicker } from 'quill-easy-color'
+import FluentEditor from '../../core/fluent-editor'
+
+const OriginPicker = FluentEditor.import('ui/picker') as typeof TypePicker
+export class Picker extends OriginPicker {
+  buildLabel() {
+    const label = document.createElement('span')
+    label.classList.add('ql-picker-label')
+    label.innerHTML = `<i class="icon" />`
+    label.tabIndex = 0
+    label.setAttribute('role', 'button')
+    label.setAttribute('aria-expanded', 'false')
+    this.container.appendChild(label)
+    return label
+  }
+
+  buildItem(option: HTMLOptionElement) {
+    const item = super.buildItem(option)
+    const value = option.getAttribute('value')
+    item.style.setProperty('--value', value)
+    return item
+  }
+
+  selectItem(item: HTMLElement | null, trigger = false) {
+    const selected = this.container.querySelector('.ql-selected')
+    if (item === selected || item == null) return
+    // move ql-selected clear after judge.
+    // ql-selected is the class for check mark in picker
+    if (selected != null) {
+      selected.classList.remove('ql-selected')
+    }
+    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) {
+      this.select.dispatchEvent(new Event('change'))
+      this.close()
+    }
+  }
+}
+
+export class ColorPicker extends EasyColorPicker {
+  static clearText: string
+  static customText: string
+
+  constructor(select: HTMLSelectElement, label: string, options: any) {
+    super(select, label, options)
+  }
+
+  buildItem(option: HTMLOptionElement) {
+    const item = super.buildItem(option)
+    item.setAttribute('title', option.getAttribute('value'))
+    return item
+  }
+}

package/src/modules/toolbar/better-toolbar.ts

@@ -0,0 +1,176 @@
+import type TypeToolbar from 'quill/modules/toolbar'
+import Quill from 'quill'
+import { isNullOrUndefined } from '../../config/editor.utils'
+
+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
+
+export 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 = 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])
+  }
+}

package/src/modules/toolbar/index.ts

@@ -0,0 +1,3 @@
+export * from './better-picker'
+export * from './better-toolbar'
+export * from './toolbar-tip'

package/src/modules/toolbar/toolbar-tip.ts

@@ -0,0 +1,142 @@
+import type { Constructor } from '../../config/types'
+import type FluentEditor from '../../fluent-editor'
+import { CHANGE_LANGUAGE_EVENT } from '../../config'
+import { isString } from '../../utils/is'
+
+export function generateToolbarTip(QuillToolbarTip: Constructor) {
+  return class extends QuillToolbarTip {
+    constructor(public quill: FluentEditor, options: Partial<Record<string, any>>) {
+      if (!options?.tipTextMap) {
+        options.tipTextMap = {}
+      }
+      super(quill, options)
+
+      this.quill.emitter.on(CHANGE_LANGUAGE_EVENT, () => {
+        this.destroyAllTips()
+        this.options = this.resolveOptions(options)
+        this.createToolbarTip()
+      })
+    }
+
+    resolveOptions(options: Partial<Record<string, any>>): Record<string, any> {
+      const result = super.resolveOptions(options)
+      if (!this.quill.lang) return result
+      const shortKeyMap = {
+        'bold': 'Ctrl + B',
+        'italic': 'Ctrl + I',
+        'underline': 'Ctrl + U',
+        'strike': 'Ctrl + D',
+        'clean': 'Ctrl + /',
+        'align-left': 'Alt + L',
+        'align-center': 'Alt + C',
+        'align-right': 'Alt + R',
+        'align-justify': 'Alt + J',
+        'indent-+1': 'Ctrl + ]',
+        'indent--1': 'Ctrl + [',
+        'script-sub': 'Ctrl + ;',
+        'script-super': 'Ctrl + \'',
+        'code': 'Ctrl + E',
+        'direction-rtl': 'Ctrl + R',
+        'direction-ltr': 'Ctrl + L',
+        'undo': 'Ctrl + Z',
+        'redo': 'Ctrl + shift + Z',
+        'color': 'Ctrl + Alt + C',
+        'background': 'Ctrl + Alt + B',
+        'link': 'Ctrl + K',
+      }
+      const shortcutModule = this.quill.getModule('shortcut-key')
+      const getShortKey = (name: string) => {
+        if (!shortcutModule) return ''
+        const shortKey = shortKeyMap[name]
+        return shortKey ? `\n${shortKey}` : ''
+      }
+      const btnTips = [
+        'color',
+        'background',
+        'bold',
+        'italic',
+        'strike',
+        'underline',
+        'undo',
+        'redo',
+        'clean',
+        'link',
+        'divider',
+        'blockquote',
+        'code',
+        'image',
+        'file',
+        'emoji',
+        'video',
+        'screenshot',
+        'code-block',
+        'formula',
+        'format-painter',
+        'header-list',
+        'table-up',
+      ].reduce((map, name) => {
+        map[name] = this.quill.getLangText(name) + getShortKey(name)
+        return map
+      }, {} as Record<string, string>)
+      const selectTips = [
+        'font',
+        'size',
+        'line-height',
+      ].reduce((map, name) => {
+        map[name] = {
+          onShow: () => {
+            return this.quill.getLangText(name) + getShortKey(name)
+          },
+        }
+        return map
+      }, {})
+      const valueControlTips = [
+        'list',
+        'align',
+        'script',
+        'indent',
+        'header',
+        'direction',
+      ].reduce((map, name) => {
+        map[name] = {
+          onShow: (target: HTMLElement, value: string) => {
+            if (name === 'direction') {
+              value = target.classList.contains('ql-active') ? 'rtl' : 'ltr'
+            }
+            if (!value) {
+              if (name === 'align') {
+                value = 'left'
+              }
+              else if (name === 'header') {
+                value = 'normal'
+              }
+            }
+            return this.quill.getLangText(`${name}-${value}`) + getShortKey(`${name}-${value}`)
+          },
+        }
+        return map
+      }, {})
+      const textMap = {
+        ...btnTips,
+        ...valueControlTips,
+        ...selectTips,
+        fullscreen: {
+          onShow: () => {
+            return this.quill.getLangText(this.quill.isFullscreen ? 'exit-fullscreen' : 'fullscreen')
+          },
+        },
+      }
+      const inputTipTextMap = Object.entries(options.tipTextMap).reduce((pre, [key, value]) => {
+        pre[key] = isString(value) ? this.quill.getLangText(value) : value
+        return pre
+      }, {})
+      return {
+        ...result,
+        tipTextMap: {
+          ...textMap,
+          ...inputTipTextMap,
+        },
+      }
+    }
+  }
+}