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

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

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

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

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

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

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

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