@opentiny/fluent-editor 3.20.1 → 3.20.2

package/src/config/editor.config.ts

@@ -0,0 +1,88 @@
+import { EN_US } from './i18n/en-us'
+import { ZH_CN } from './i18n/zh-cn'
+
+// Delta数据行太多超出该限制时，加载会比较慢，需要提示用户
+export const BIG_DELTA_LIMIT = 2000
+const localLang = localStorage.getItem('lang') || 'zh-cn'
+export const LANG_CONF = localLang === 'en-us' ? EN_US : ZH_CN
+
+// Image
+export const IMAGE_UPLOADER_MIME_TYPES = [
+  'image/png',
+  'image/jpeg',
+  'image/gif',
+  'image/svg+xml',
+]
+
+// 常用文件格式
+export const OTHER_FILE_UPLOADER_MIME_TYPES = [
+  'text/plain',
+  'application/json',
+  'application/pdf',
+]
+
+export const AUDIO_VIDEO_UPLOADER_MIME_TYPES = [
+  'audio/wave',
+  'audio/wav',
+  'audio/x-wav',
+  'audio/x-pn-wav',
+  'audio/mpeg',
+  'video/mpeg',
+  'video/x-msvideo',
+]
+
+//  MS office
+export const DOC_UPLOADER_MIME_TYPES = [
+  'application/msword',
+  'application/msword',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
+  'application/vnd.ms-word.document.macroEnabled.12',
+  'application/vnd.ms-word.template.macroEnabled.12',
+]
+
+export const XSL_UPLOADER_MIME_TYPES = [
+  'application/vnd.ms-excel',
+  'application/vnd.ms-excel',
+  'application/vnd.ms-excel',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
+  'application/vnd.ms-excel.sheet.macroEnabled.12',
+  'application/vnd.ms-excel.template.macroEnabled.12',
+  'application/vnd.ms-excel.addin.macroEnabled.12',
+  'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
+]
+
+export const PPT_UPLOADER_MIME_TYPES = [
+  'application/vnd.ms-powerpoint',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  'application/vnd.openxmlformats-officedocument.presentationml.template',
+  'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
+  'application/vnd.ms-powerpoint.addin.macroEnabled.12',
+  'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
+  'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
+  'application/vnd.ms-powerpoint.slideshow.macroEnabled.12',
+]
+
+// Compressed files
+export const COMPRESSED_UPLOADER_MIME_TYPES = [
+  'application/x-tar',
+  'application/x-zip-compressed',
+  'application/zip-compressed',
+  'application/gzip',
+  '.rar',
+  '.7z',
+]
+
+// default
+export const FILE_UPLOADER_MIME_TYPES = [
+  ...OTHER_FILE_UPLOADER_MIME_TYPES,
+  ...AUDIO_VIDEO_UPLOADER_MIME_TYPES,
+  ...DOC_UPLOADER_MIME_TYPES,
+  ...XSL_UPLOADER_MIME_TYPES,
+  ...PPT_UPLOADER_MIME_TYPES,
+  ...COMPRESSED_UPLOADER_MIME_TYPES,
+]

package/src/config/editor.utils.ts

@@ -0,0 +1,199 @@
+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 insideTable(range = null, quill = this.quill) {
+  let currentRange = range
+  if (!currentRange) {
+    currentRange = quill.getSelection()
+  }
+  // fix: 原有formats方法无法判断表格内的list和head附近粘贴
+  const [line] = quill.getLine(currentRange.index)
+  return line && !!line.domNode.closest('table.quill-better-table')
+}
+
+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 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
+}
+
+// Internet Explorer 6-11
+export const isPureIE = !!document.documentMode

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

@@ -0,0 +1,106 @@
+export const EN_US = {
+  'undo': 'Undo',
+  'redo': 'Redo',
+  'clean': 'Clear Formatting',
+
+  'header': 'Paragraph Formatting',
+  'normal': 'Normal',
+  'h1': 'Heading 1',
+  'h2': 'Heading 2',
+  'h3': 'Heading 3',
+  'h4': 'Heading 4',
+  'h5': 'Heading 5',
+  'h6': 'Heading 6',
+
+  'font': 'Font',
+  'size': 'Size',
+  'lineheight': 'Line Height',
+  'songti': 'SimSun',
+  'yahei': 'Microsoft Yahei',
+  'kaiti': 'KaiTi',
+  'heiti': 'SimHei',
+  'lishu': 'LiSu',
+
+  'bold': 'Bold',
+  'italic': 'Italic',
+  'underline': 'Underline',
+  'strike': 'Strikethrough',
+
+  'color': 'Font Color',
+  'background': 'Background Color',
+
+  'orderedlist': 'Ordered List',
+  'bulletlist': 'Unordered List',
+  'checklist': 'Task List',
+
+  'left': 'Left',
+  'center': 'Centered',
+  'right': 'Right',
+
+  'image': 'Image',
+  'file': 'File',
+  'table': 'Table',
+  'link': 'Hyperlink',
+
+  'code': 'Inline Code',
+  'codeblock': 'Code Block',
+  'blockquote': 'Quote',
+  'superscript': 'Superscript',
+  'subscript': 'Subscript',
+  'globallink': 'Link',
+
+  'emoji': 'Emoji',
+  'fullscreen': 'Full Screen',
+  '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',
+
+  'copy-cells': 'Copy',
+  'copy-table': 'Copy Table',
+  'cut-cells': 'Cut',
+  'empty-cells': 'Clear Contents',
+
+  'insert-row-up': 'Insert Rows Above',
+  'insert-row-down': 'Insert Rows Below',
+  'insert-column-left': 'Insert Columns to the Left',
+  'insert-column-right': 'Insert Columns to the Right',
+
+  'merge-cells': 'Merge Cells',
+  'unmerge-cells': 'Split Cells',
+
+  'delete-row': 'Delete Entire Row',
+  'delete-column': 'Delete Entire Column',
+  'delete-table': 'Delete Table',
+
+  '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.',
+
+  'lastModified': 'Last Modified Date:',
+  'screenshot': 'Screenshot',
+  'uploading': 'Uploading...',
+  'subTitleBgColor': 'BackgroundColor',
+}

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

@@ -0,0 +1,104 @@
+export const ZH_CN = {
+  'undo': '撤销',
+  'redo': '重做',
+  'clean': '清除格式',
+
+  'header': '段落格式',
+  'normal': '正文',
+  'h1': '标题1',
+  'h2': '标题2',
+  'h3': '标题3',
+  'h4': '标题4',
+  'h5': '标题5',
+  'h6': '标题6',
+
+  'font': '字体',
+  'size': '字号',
+  'lineheight': '行距',
+  'songti': '宋体',
+  'yahei': '微软雅黑',
+  'kaiti': '楷体',
+  'heiti': '黑体',
+  'lishu': '隶书',
+
+  'bold': '粗体',
+  'italic': '斜体',
+  'underline': '下划线',
+  'strike': '删除线',
+
+  'color': '字体颜色',
+  'background': '背景色',
+
+  'orderedlist': '有序列表',
+  'bulletlist': '无序列表',
+  'checklist': '任务列表',
+
+  'left': '左对齐',
+  'center': '居中对齐',
+  'right': '右对齐',
+
+  'image': '图片',
+  'file': '文件',
+  'table': '表格',
+  'link': '超链接',
+
+  'code': '行内代码',
+  'codeblock': '代码块',
+  'blockquote': '引用',
+  'superscript': '上标',
+  'subscript': '下标',
+  'globallink': '全局链接',
+
+  'emoji': '表情',
+  'fullscreen': '全屏',
+  'exit-fullscreen': '退出全屏',
+  'help': '帮助',
+  'more': '更多',
+
+  'help-format': '格式',
+  'help-insert': '插入',
+  'help-operation': '操作',
+  'mention': '提及某人',
+  'quick-menu': '快捷菜单',
+  'toggle-help-panel': '打开/关闭帮助面板',
+  'scroll-table': '水平滚动表格',
+  'mouse-wheel': '鼠标滚轮',
+  'save': '保存',
+
+  'copy-cells': '复制',
+  'copy-table': '复制表格',
+  'cut-cells': '剪切',
+  'empty-cells': '清空内容',
+
+  'insert-row-up': '上插入行',
+  'insert-row-down': '下插入行',
+  'insert-column-left': '左插入列',
+  'insert-column-right': '右插入列',
+
+  'merge-cells': '合并单元格',
+  'unmerge-cells': '拆分单元格',
+
+  'delete-row': '删除当前行',
+  'delete-column': '删除当前列',
+  'delete-table': '删除表格',
+
+  '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':
+    '此图片不支持复制，请将原图下载至本地后点击工具栏【插入图片】，重新上传。',
+
+  'lastModified': '最后修改时间：',
+  'screenshot': '截图',
+  'uploading': '上传中...',
+  'subTitleBgColor': '背景颜色',
+}