@opentiny/fluent-editor 3.20.1 → 3.20.2

package/src/config/types/index.ts

@@ -0,0 +1,22 @@
+export * from './additional-toolbar-item.interface'
+export * from './content-change.interface'
+export * from './content-save.interface'
+export * from './counter-option.interface'
+export * from './editor-config.interface'
+export * from './editor-modules.interface'
+export * from './file-operation.interface'
+export * from './focus-change.interface'
+export * from './fullscreen-module.interface'
+export * from './help-panel-option.interface'
+export * from './image-module.interface'
+export * from './image-upload.interface'
+export * from './load-on-demand-module.interface'
+export * from './mention-module.interface'
+export * from './paste-change.interface'
+export * from './quick-menu-module.interface'
+export * from './range.interface'
+export * from './registry-options.interface'
+export * from './selection-change.interface'
+export * from './toolbar-item.interface'
+export * from './type'
+export * from './validate-error.interface'

package/src/config/types/load-on-demand-module.interface.ts

@@ -0,0 +1,5 @@
+export interface ILoadOnDemandModule {
+  mode?: 'line' | 'text'
+  limit?: number
+  lazy?: boolean
+}

package/src/config/types/mention-module.interface.ts

@@ -0,0 +1,8 @@
+export interface IMentionModule {
+  data: object[]
+  itemKey: string
+  searchKey: string
+  mentionSearchFn?: (term: string) => Promise<any[]>
+  mentionSelect?: any
+  mentionRemove?: any
+}

package/src/config/types/paste-change.interface.ts

@@ -0,0 +1,6 @@
+import type { AnyFunction } from './type'
+
+export interface IPasteChange {
+  files: File[]
+  callback: AnyFunction
+}

package/src/config/types/quick-menu-module.interface.ts

@@ -0,0 +1,3 @@
+export interface IQuickMenuModule {
+  zIndex: number
+}

package/src/config/types/range.interface.ts

@@ -0,0 +1,4 @@
+export interface IRange {
+  index: number
+  length: number
+}

package/src/config/types/registry-options.interface.ts

@@ -0,0 +1,5 @@
+export interface IRegistryOption {
+  importUrl?: string
+  params?: any
+  register?: any
+}

package/src/config/types/selection-change.interface.ts

@@ -0,0 +1,8 @@
+import type { IRange } from './range.interface'
+
+export interface ISelectionChange {
+  editor: any
+  oldRange: IRange | null
+  range: IRange | null
+  source: string
+}

package/src/config/types/toolbar-item.interface.ts

@@ -0,0 +1,13 @@
+export interface IToolbarItem {
+  indent?: string
+  list?: string
+  direction?: string
+  header?: number | (boolean | number)[]
+  color?: string[]
+  background?: string[]
+  align?: string[]
+  script?: string
+  font?: string[]
+  size?: boolean[] | string[]
+  lineheight?: number[]
+}

package/src/config/types/type.ts

@@ -0,0 +1,5 @@
+import type { IToolbarItem } from './toolbar-item.interface'
+
+export type ToolbarOption = (string[] | IToolbarItem[] | string | IToolbarItem)[]
+export type EditorFormat = 'object' | 'json' | 'html' | 'text'
+export type AnyFunction = (...args: any[]) => any

package/src/config/types/validate-error.interface.ts

@@ -0,0 +1,11 @@
+export interface IValidateError {
+  minLengthError?: {
+    given: number
+    minLength: number
+  }
+  maxLengthError?: {
+    given: number
+    maxLength: number
+  }
+  requiredError?: { empty: boolean }
+}

package/src/counter/index.ts

@@ -0,0 +1,69 @@
+import type { ICounterOption } from '../config/types'
+import Quill from 'quill'
+import { LANG_CONF } from '../config'
+
+export default class Counter {
+  container: HTMLDivElement
+  options: ICounterOption
+  defaultOptions: ICounterOption = {
+    format: 'text',
+    unit: 'char',
+    template: LANG_CONF['counter-template'],
+    count: 500,
+  }
+
+  // @ts-ignore
+  constructor(private quill: Quill, options: ICounterOption) {
+    this.options = { ...this.defaultOptions, ...options }
+    this.container = quill.addContainer('ql-counter')
+    quill.on(Quill.events.TEXT_CHANGE, this.renderCount)
+    this.renderCount()
+  }
+
+  renderCount = () => {
+    setTimeout(() => {
+      // @ts-ignore
+      const { format, count: totalCount, unit, template: counterTemplate, errorTemplate } = this.options
+      const count = this.getContentLength(format)
+      const restCount = totalCount - count
+      const countUnit = unit === 'char' ? LANG_CONF.char : LANG_CONF.word
+      let template: any = counterTemplate
+      if (typeof template === 'function') {
+        template = template(count, restCount)
+      }
+      const desc = template.replace('{{count}}', count)
+        .replace('{{totalCount}}', String(totalCount))
+        .replace('{{restCount}}', String(restCount))
+        .replace(/{{countUnit}}/g, countUnit)
+
+      let limitTemplate: any = errorTemplate || LANG_CONF['counter-limit-tips']
+      if (typeof limitTemplate === 'function') {
+        limitTemplate = limitTemplate(count, restCount)
+      }
+      const limitTips = limitTemplate.replace('{{countUnit}}', countUnit)
+      if (restCount < 0) {
+        this.container.innerHTML = errorTemplate ? limitTips : `<span style="color:red">${limitTips}</span>`
+      }
+      else {
+        this.container.innerHTML = desc
+      }
+    })
+  }
+
+  getContentLength(format) {
+    let content = this.quill.getText()
+    if (format === 'html') {
+      let html = this.quill.root.innerHTML
+      // 编辑器初始时
+      if (html === '<p><br></p>' || html === '<div><br><div>') {
+        html = ''
+      }
+      content = html
+    }
+    const text = content.replace(/\s/g, '').trim()
+    if (this.options.unit === 'word') {
+      return !content.trim() ? 0 : content.trim().split(/\s+/).length
+    }
+    return text.length
+  }
+}