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

package/src/config/editor.utils.ts

@@ -0,0 +1,193 @@
+import Quill from 'quill'
+
+const Delta = Quill.import('delta')
+
+// color hex to rgba
+export function hexToRgbA(hex: string) {
+  let color
+  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+    color = hex.substring(1).split('')
+    if (color.length === 3) {
+      color = [color[0], color[0], color[1], color[1], color[2], color[2]]
+    }
+    color = `0x${color.join('')}`
+    return (
+      `rgba(${
+        [(color >> 16) & 255, (color >> 8) & 255, color & 255].join(',')
+      },1)`
+    )
+  }
+}
+
+/**
+ * 将File格式的图片转换成Url格式
+ * @param imageFile File格式的图片
+ */
+export function imageFileToUrl(imageFile) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(imageFile)
+    reader.onload = function (e) {
+      resolve(e.target.result)
+    }
+    reader.onerror = reject
+  }).catch((error) => {
+    console.error('Error reading file:', error)
+  })
+}
+
+/**
+ * 将Url格式的图片转换成File格式
+ * @param imageUrl 图片的URL
+ */
+export function imageUrlToFile(imageUrl, isErrorImage?: boolean) {
+  return new Promise((resolve, reject) => {
+    fetch(imageUrl, {
+      method: 'get',
+      mode: 'no-cors',
+    })
+      .then(res => res.blob())
+      .then((blob) => {
+        if (!blob.type.includes('image') || !blob.type) {
+          return reject()
+        }
+        const fileType = blob.type.replace(/^.*\//, '')
+        const fileName = isErrorImage
+          ? 'editorx-error-image.png'
+          : `image-${new Date().getTime()}.${fileType}`
+        const file = new File([blob], fileName, blob)
+        resolve(file)
+      })
+      .catch(reject)
+  })
+}
+
+export function isNullOrUndefined(param) {
+  return param === null || param === undefined
+}
+
+/**
+ * omit
+ * @param   obj         target Object
+ * @param   uselessKeys  keys of removed properties
+ * @return             new Object without useless properties
+ */
+export function omit(obj, uselessKeys) {
+  return (
+    obj
+    && Object.keys(obj).reduce((acc, key) => {
+      return uselessKeys.includes(key) ? acc : { ...acc, [key]: obj[key] }
+    }, {})
+  )
+}
+
+/**
+ * 将delta中的图片替换成制定的图片数组，用于图片上传到服务器的场景
+ * @param delta 原始delta
+ * @param imageUrls 图片数组
+ * @param imagePlaceholder 标识是否是占位图的数组，与图片数组一一对应
+ * @return 替换之后的delta
+ */
+export function replaceDeltaImage(delta, imageUrls, imagePlaceholder) {
+  let imageIndex = 0
+  return delta.reduce((newDelta, op) => {
+    if (op.insert.image && !op.insert.image.hasExisted) {
+      const attributes = imagePlaceholder[imageIndex]
+        ? { ...op.attributes, width: 'auto', height: 225 } // 占位图片应该固定大小
+        : op.attributes
+      newDelta.insert({ image: imageUrls[imageIndex] }, attributes)
+      imageIndex++
+    }
+    else {
+      newDelta.insert(op.insert, op.attributes)
+    }
+    return newDelta
+  }, new Delta())
+}
+
+export function splitWithBreak(insertContent: string) {
+  const lines = []
+  const insertStr = insertContent
+  let start = 0
+  for (let i = 0; i < insertContent.length; i++) {
+    if (insertStr.charAt(i) === '\n') {
+      if (i === 0) {
+        lines.push('\n')
+      }
+      else {
+        lines.push(insertStr.substring(start, i))
+        lines.push('\n')
+      }
+      start = i + 1
+    }
+  }
+
+  const tailStr = insertStr.substring(start)
+  if (tailStr) {
+    lines.push(tailStr)
+  }
+
+  return lines
+}
+
+/**
+ * getEventComposedPath
+ *  compatibility fixed for Event.path/Event.composedPath
+ *  Event.path is only for chrome/opera
+ *  Event.composedPath is for Safari, FF
+ *  Neither for Micro Edge
+ * @return an array of event.path
+ */
+export function getEventComposedPath(evt) {
+  let path
+  // chrome, opera, safari, firefox
+  path = evt.path || (evt.composedPath && evt.composedPath())
+
+  // other: edge
+  if (path === undefined && evt.target) {
+    path = []
+    let target = evt.target
+    path.push(target)
+
+    while (target && target.parentNode) {
+      target = target.parentNode
+      path.push(target)
+    }
+  }
+
+  return path
+}
+
+export function sanitize(url, protocols) {
+  const anchor = document.createElement('a')
+  anchor.href = url
+  const protocol = anchor.href.slice(0, anchor.href.indexOf(':'))
+  return protocols.includes(protocol)
+}
+
+export function hadProtocol(url: string) {
+  if (!url || !/^(?:f|ht)tps?\:\/\//.test(url)) {
+    return false
+  }
+  return true
+}
+
+export function isInside(position, dom) {
+  const areaPosition = dom.getBoundingClientRect()
+  const { pageX, pageY } = position
+  // getBoundingClientRect是不考虑窗口滚动的
+  const left = pageX - window.scrollX
+  const top = pageY - window.scrollY
+  const {
+    left: areaLeft,
+    top: areaTop,
+    width: areaWidth,
+    height: areaHeight,
+  } = areaPosition
+  const inside
+    = left > areaLeft
+      && left < areaLeft + areaWidth
+      && top > areaTop
+      && top < areaTop + areaHeight
+  return inside
+}

package/src/config/i18n/en-us.ts

@@ -0,0 +1,138 @@
+export const EN_US = {
+
+  'header': 'Paragraph Formatting',
+  'normal': 'Normal',
+  'h1': 'Heading 1',
+  'h2': 'Heading 2',
+  'h3': 'Heading 3',
+  'h4': 'Heading 4',
+  'h5': 'Heading 5',
+  'h6': 'Heading 6',
+
+  'line-height': 'Line Height',
+  'songti': 'SimSun',
+  'yahei': 'Microsoft Yahei',
+  'kaiti': 'KaiTi',
+  'heiti': 'SimHei',
+  'lishu': 'LiSu',
+
+  'left': 'Left',
+  'center': 'Centered',
+  'right': 'Right',
+
+  'codeblock': 'Code Block',
+  'globallink': 'Link',
+
+  'exit-fullscreen': 'Exit Full Screen',
+  'help': 'Help',
+  'more': 'More',
+
+  'help-format': 'Format',
+  'help-insert': 'Insert',
+  'help-operation': 'Edit',
+  'mention': 'Mention People',
+  'quick-menu': 'Shortcut',
+  'toggle-help-panel': 'Open/Close Help Panel',
+  'scroll-table': 'Horizontal Scroll',
+  'mouse-wheel': 'Mouse Wheel',
+  'save': 'Save',
+
+  'default-link-text': 'Link',
+  'basicblock': 'Card',
+  'linkplaceholder': 'Enter an address and press Enter.',
+  'counter-template': `{{count}}/{{totalCount}} {{countUnit}}`,
+  'char': 'characters',
+  'word': 'words',
+  'counter-limit-tips':
+    'The number of {{countUnit}} exceeds the maximum allowed limit.',
+  'ie-msg':
+    'In order to have a better experience, it is recommended to use the latest version of Chrome browser.',
+
+  'loading': 'Loading...',
+  'pasting': 'A large amount of content to paste. Loading...',
+  'img-error': 'Image Copy Error',
+  'img-error-info':
+    'Failed to copy the image. Save it to your local computer and then upload it by clicking Image on the toolbar.',
+
+  'last-modified': 'Last Modified Date:',
+  'screenshot': 'Screenshot',
+  'uploading': 'Uploading...',
+  'sub-title-bg-color': 'Background Color',
+
+  // blot tip name
+  'emoji': 'Emoji',
+  'fullscreen': 'Full Screen',
+  'blockquote': 'Quote',
+  'undo': 'Undo',
+  'redo': 'Redo',
+  'clean': 'Clear Formatting',
+  'bold': 'Bold',
+  'italic': 'Italic',
+  'underline': 'Underline',
+  'strike': 'Strikethrough',
+  'image': 'Image',
+  'file': 'File',
+  'link': 'Hyperlink',
+  'code': 'Inline Code',
+  'table': 'Table',
+  'table-up': 'Table',
+  'code-block': 'Code Block',
+  'formula': 'Formula',
+  'format-painter': 'Format Painter',
+  'divider': 'Divider',
+  'video': 'Video',
+  'color': 'Font Color',
+  'background': 'Background Color',
+  'font': 'Font',
+  'size': 'Size',
+  'list': 'List',
+  'list-ordered': 'Ordered List',
+  'list-bullet': 'Unordered List',
+  'list-check': 'Task List',
+  'align-left': 'Left aligned',
+  'align-center': 'Center aligned',
+  'align-right': 'Right aligned',
+  'align-justify': 'Justify aligned',
+  'direction-ltr': 'Text Direction Left To Right',
+  'direction-rtl': 'Text Direction Right To Left',
+  'indent--1': 'Minus Indent',
+  'indent-+1': 'Add Indent',
+  'script-super': 'Superscript',
+  'script-sub': 'Subscript',
+  'header-normal': 'Text',
+  'header-1': 'Heading 1',
+  'header-2': 'Heading 2',
+  'header-3': 'Heading 3',
+  'header-4': 'Heading 4',
+  'header-5': 'Heading 5',
+  'header-6': 'Heading 6',
+  'header-list': 'Heading List',
+  'input-recall-menu-placeholder': 'Input / recall menu',
+  'clear-color': 'Clear color',
+  'custom-color': 'Color picker',
+  // table-up texts
+  'fullCheckboxText': 'Insert full width table',
+  'customBtnText': 'Custom',
+  'confirmText': 'Confirm',
+  'cancelText': 'Cancel',
+  'rowText': 'Row',
+  'colText': 'Column',
+  'notPositiveNumberError': 'Please enter a positive integer',
+  'custom': 'Custom',
+  'clear': 'Clear',
+  'transparent': 'Transparent',
+  'perWidthInsufficient': 'The percentage width is insufficient. To complete the operation, the table needs to be converted to a fixed width. Do you want to continue?',
+  'CopyCell': 'Copy cell',
+  'CutCell': 'Cut cell',
+  'InsertTop': 'Insert row above',
+  'InsertRight': 'Insert column right',
+  'InsertBottom': 'Insert row below',
+  'InsertLeft': 'Insert column Left',
+  'MergeCell': 'Merge Cell',
+  'SplitCell': 'Split Cell',
+  'DeleteRow': 'Delete Row',
+  'DeleteColumn': 'Delete Column',
+  'DeleteTable': 'Delete table',
+  'BackgroundColor': 'Set background color',
+  'BorderColor': 'Set border color',
+}

package/src/config/i18n/zh-cn.ts

@@ -0,0 +1,137 @@
+export const ZH_CN = {
+
+  'header': '段落格式',
+  'normal': '正文',
+  'h1': '标题1',
+  'h2': '标题2',
+  'h3': '标题3',
+  'h4': '标题4',
+  'h5': '标题5',
+  'h6': '标题6',
+
+  'line-height': '行距',
+  'songti': '宋体',
+  'yahei': '微软雅黑',
+  'kaiti': '楷体',
+  'heiti': '黑体',
+  'lishu': '隶书',
+
+  'left': '左对齐',
+  'center': '居中对齐',
+  'right': '右对齐',
+
+  'codeblock': '代码块',
+  'globallink': '全局链接',
+
+  'exit-fullscreen': '退出全屏',
+  'help': '帮助',
+  'more': '更多',
+
+  'help-format': '格式',
+  'help-insert': '插入',
+  'help-operation': '操作',
+  'mention': '提及某人',
+  'quick-menu': '快捷菜单',
+  'toggle-help-panel': '打开/关闭帮助面板',
+  'scroll-table': '水平滚动表格',
+  'mouse-wheel': '鼠标滚轮',
+  'save': '保存',
+
+  'default-link-text': '链接',
+  'basicblock': '卡片',
+  'linkplaceholder': '请输入链接地址，按回车键确认',
+  'counter-template': '{{count}}/{{totalCount}}',
+  'char': '字符',
+  'word': '单词',
+  'counter-limit-tips': '{{countUnit}}数超出最大允许值',
+  'ie-msg': '为了有更好的体验，推荐使用最新版Chrome浏览器。',
+
+  'loading': '正在加载中...',
+  'pasting': '您粘贴的内容较多，正在努力加载中，请耐心等待...',
+  'img-error': '图片复制出错',
+  'img-error-info':
+    '此图片不支持复制，请将原图下载至本地后点击工具栏【插入图片】，重新上传。',
+
+  'last-modified': '最后修改时间：',
+  'screenshot': '截图',
+  'uploading': '上传中...',
+  'sub-title-bg-color': '背景颜色',
+
+  // blot tip name
+  'emoji': '表情',
+  'fullscreen': '全屏',
+  'blockquote': '引用',
+  'undo': '撤销',
+  'redo': '重做',
+  'clean': '清除格式',
+  'bold': '粗体',
+  'italic': '斜体',
+  'underline': '下划线',
+  'strike': '删除线',
+  'image': '图片',
+  'file': '文件',
+  'link': '超链接',
+  'divider': '分割线',
+  'code': '行内代码',
+  'table': '表格',
+  'table-up': '表格',
+  'code-block': '代码块',
+  'formula': '公式',
+  'format-painter': '格式刷',
+  'video': '视频',
+  'color': '字体颜色',
+  'background': '背景色',
+  'font': '字体',
+  'size': '字号',
+  'list': '列表',
+  'list-ordered': '有序列表',
+  'list-bullet': '无序列表',
+  'list-check': '任务列表',
+  'align-left': '左对齐',
+  'align-center': '居中对齐',
+  'align-right': '右对齐',
+  'align-justify': '两端对齐',
+  'direction-ltr': '文本方向左到右',
+  'direction-rtl': '文本方向右到左',
+  'indent--1': '减少缩进',
+  'indent-+1': '增加缩进',
+  'script-super': '上标',
+  'script-sub': '下标',
+  'header-normal': '正文',
+  'header-1': '标题1',
+  'header-2': '标题2',
+  'header-3': '标题3',
+  'header-4': '标题4',
+  'header-5': '标题5',
+  'header-6': '标题6',
+  'header-list': '标题列表',
+  'input-recall-menu-placeholder': '输入 / 唤起菜单',
+  'clear-color': '清除颜色',
+  'custom-color': '选择颜色',
+  // table-up texts
+  'fullCheckboxText': '插入满宽度表格',
+  'customBtnText': '自定义行列数',
+  'confirmText': '确认',
+  'cancelText': '取消',
+  'rowText': '行数',
+  'colText': '列数',
+  'notPositiveNumberError': '请输入正整数',
+  'custom': '自定义',
+  'clear': '清除',
+  'transparent': '透明',
+  'perWidthInsufficient': '百分比宽度不足, 如需完成操作需要转换表格为固定宽度，是否继续?',
+  'CopyCell': '复制单元格',
+  'CutCell': '剪切单元格',
+  'InsertTop': '向上插入一行',
+  'InsertRight': '向右插入一列',
+  'InsertBottom': '向下插入一行',
+  'InsertLeft': '向左插入一列',
+  'MergeCell': '合并单元格',
+  'SplitCell': '拆分单元格',
+  'DeleteRow': '删除当前行',
+  'DeleteColumn': '删除当前列',
+  'DeleteTable': '删除当前表格',
+  'BackgroundColor': '设置背景颜色',
+  'BorderColor': '设置边框颜色',
+
+}

package/src/config/index.ts

@@ -0,0 +1,44 @@
+import { isNullOrUndefined } from './editor.utils'
+
+export * from './editor.config'
+export * from './editor.utils'
+export * from './types'
+
+// 触发上传
+export function inputFile(type: 'image' | 'video' | 'file', accept: string[]) {
+  if (accept.length <= 0) return
+  let fileInput = this.container.querySelector(`input.ql-${type}[type=file]`)
+  if (isNullOrUndefined(fileInput)) {
+    fileInput = document.createElement('input')
+    fileInput.style.display = 'none'
+    fileInput.classList.add(`ql-${type}`)
+    fileInput.setAttribute('type', 'file')
+    fileInput.setAttribute('accept', accept.map(mime => mime === '*' ? `${type}/*` : mime).join(','))
+    fileInput.setAttribute('multiple', '')
+    fileInput.addEventListener('change', () => {
+      const range = this.quill.getSelection(true)
+      this.quill.uploader.upload(range, fileInput.files)
+      fileInput.value = ''
+    })
+    this.container.appendChild(fileInput)
+  }
+  fileInput.click()
+}
+
+export function getListValue(value, preListValue) {
+  let curListValue = value
+  if (preListValue && preListValue === value) {
+    curListValue = false
+  }
+  else if (value === 'check') {
+    if (preListValue === 'checked' || preListValue === 'unchecked') {
+      curListValue = false
+    }
+    else {
+      curListValue = 'unchecked'
+    }
+  }
+  return curListValue
+}
+/** css namespace */
+export const namespace = 'fe'

package/src/config/types/editor-config.interface.ts

@@ -0,0 +1,16 @@
+import type { QuillOptions } from 'quill'
+import type { ScreenShotOptions } from '../../tools/screenshot'
+import type { IEditorModules } from './editor-modules.interface'
+
+export interface IEditorConfig extends QuillOptions {
+  'modules'?: IEditorModules
+  'screenshotOnStaticPage'?: boolean
+  'scrollingContainer'?: HTMLElement | string | null
+  // Auto protocol for link
+  'autoProtocol'?: boolean | string
+  'editorPaste'?: any
+  'screenshot'?: Partial<ScreenShotOptions>
+  'format-painter'?: {
+    ignoreFormat?: string[]
+  }
+}

package/src/config/types/editor-modules.interface.ts

@@ -0,0 +1,47 @@
+import type { ToolbarProps } from 'quill/modules/toolbar'
+import type { I18NOptions, ICounterOption, MentionOption, ShortCutKeyInputOptions } from '../../modules'
+import type { BlotFormatterOptionsInput } from '../../modules/custom-image/options'
+import type { FileUploaderOptions } from '../../modules/custom-uploader'
+import type { EmojiModuleOptions } from '../../modules/emoji'
+
+export type ToolbarOptions = {
+  container?: HTMLElement | (Record<string, any>[] | string[] | (string | Record<string, any>)[])[]
+} & ToolbarProps
+export interface IEditorModules {
+  [key: string]: any
+  'clipboard'?:
+    | {
+      matchers?: any[]
+      matchVisual?: boolean
+    }
+    | boolean
+  'history'?:
+    | {
+      delay?: number
+      maxStack?: number
+      userOnly?: boolean
+    }
+    | boolean
+  'keyboard'?:
+    | {
+      bindings?: any
+    }
+    | boolean
+  'syntax'?:
+    | {
+      interval?: number
+      languages?: { key: string, label: string }[]
+      hljs?: any
+    }
+    | boolean
+  'toolbar'?: boolean | ToolbarOptions | ToolbarOptions['container'] | string[]
+  'uploader'?: boolean | Partial<FileUploaderOptions>
+  'shortcut-key'?: boolean | Partial<ShortCutKeyInputOptions>
+  'mention'?: boolean | MentionOption
+  'i18n'?: boolean | Partial<I18NOptions>
+  'counter'?: boolean | ICounterOption
+  'emoji'?: boolean | EmojiModuleOptions
+  'file'?: boolean
+  'mathlive'?: boolean
+  'image'?: boolean | Partial<BlotFormatterOptionsInput>
+}

package/src/config/types/index.ts

@@ -0,0 +1,3 @@
+export * from './editor-config.interface'
+export * from './editor-modules.interface'
+export * from './type'

package/src/config/types/type.ts

@@ -0,0 +1,2 @@
+export type AnyFunction = (...args: any[]) => any
+export type Constructor<T = any, U extends Array<any> = any[]> = new (...args: U) => T

package/src/core/fluent-editor.ts

@@ -0,0 +1,31 @@
+import type { ExpandedQuillOptions } from 'quill'
+import type { IEditorConfig } from '../config/types'
+import type { FileUploader } from '../modules/custom-uploader'
+import Quill from 'quill'
+import { defaultLanguage } from '../config'
+import I18N from '../modules/i18n'
+
+class FluentEditor extends Quill {
+  isFullscreen: boolean = false
+  declare options: IEditorConfig & ExpandedQuillOptions
+  declare uploader: FileUploader
+
+  static register(...args: any[]): void {
+    super.register(...args as Parameters<typeof Quill.register>)
+  }
+
+  get lang() {
+    const i18nModule = this.getModule('i18n') as I18N
+    return i18nModule ? i18nModule.options.lang : defaultLanguage
+  }
+
+  constructor(container: HTMLElement | string, options: IEditorConfig = {}) {
+    super(container, options)
+  }
+
+  getLangText(name: string) {
+    return I18N.parserText(name, this.lang)
+  }
+}
+
+export default FluentEditor

package/src/fluent-editor.ts

@@ -0,0 +1,72 @@
+import { FontStyle, LineHeightStyle, SizeStyle, TextIndentStyle } from './attributors'
+import { EN_US } from './config/i18n/en-us'
+import { ZH_CN } from './config/i18n/zh-cn'
+import FluentEditor from './core/fluent-editor'
+import { EmojiBlot, SoftBreak, StrikeBlot, Video } from './formats'
+import { AI } from './modules/ai' // AI
+import Counter from './modules/counter' // 字符统计
+import { CustomClipboard } from './modules/custom-clipboard' // 粘贴板
+import { BlotFormatter } from './modules/custom-image' // 图片
+import { FileUploader } from './modules/custom-uploader' // 上传
+import { DividerBlot } from './modules/divider' // 分割线
+import { EmojiModule } from './modules/emoji'
+import { FileModule } from './modules/file' // 文件
+import I18N from './modules/i18n'
+import { LinkBlot } from './modules/link' // 超链接
+import { MathliveModule } from './modules/mathlive' // latex公式
+import { Mention } from './modules/mention' // @提醒
+import { ShortCutKey } from './modules/shortcut-key'
+import Syntax from './modules/syntax' // 代码块高亮
+import { BetterToolbar } from './modules/toolbar' // 工具栏
+import { ColorPicker, Picker } from './modules/toolbar/better-picker'
+import SnowTheme from './themes/snow'
+import Icons from './ui/icons'
+
+I18N.register(
+  {
+    'en-US': EN_US,
+    'zh-CN': ZH_CN,
+  },
+  true,
+)
+FluentEditor.register(
+  {
+    'attributors/style/font': FontStyle,
+    'attributors/style/size': SizeStyle,
+    'attributors/style/line-height': LineHeightStyle,
+
+    'formats/font': FontStyle,
+    'formats/line-height': LineHeightStyle,
+    'formats/size': SizeStyle,
+    'formats/emoji': EmojiBlot,
+    'formats/softBreak': SoftBreak,
+    'formats/strike': StrikeBlot,
+    'formats/text-indent': TextIndentStyle,
+    'formats/video': Video,
+    'formats/divider': DividerBlot,
+    'formats/link': LinkBlot,
+
+    'modules/clipboard': CustomClipboard,
+    'modules/counter': Counter,
+    'modules/emoji': EmojiModule,
+    'modules/file': FileModule,
+    'modules/i18n': I18N,
+    'modules/image': BlotFormatter,
+    'modules/mathlive': MathliveModule,
+    'modules/ai': AI,
+    'modules/mention': Mention,
+    'modules/syntax': Syntax,
+    'modules/toolbar': BetterToolbar,
+    'modules/uploader': FileUploader,
+    'modules/shortcut-key': ShortCutKey,
+
+    'themes/snow': SnowTheme,
+
+    'ui/icons': Icons,
+    'ui/picker': Picker,
+    'ui/color-picker': ColorPicker,
+  },
+  true, // 覆盖内部模块
+)
+
+export default FluentEditor