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

package/src/config/editor.utils.ts

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

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

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

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

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

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

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

package/src/config/types/type.ts

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

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

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