@opentiny/fluent-editor 3.20.1 → 3.20.2

package/src/file/modules/file-bar.ts

@@ -0,0 +1,146 @@
+import Quill from 'quill'
+// devui-internal api: utils\public-api.ts
+
+import { Range } from 'quill/core/selection'
+import { unshiftString } from '../../utils/method'
+import File from '../formats/file'
+
+const Delta = Quill.imports.delta
+
+export default class FileBar {
+  quill: any
+  file: any
+  domNode: HTMLElement
+  fileRange: any
+  template: string
+
+  constructor(quill, target) {
+    this.quill = quill
+    this.file = target
+    const fileBlot = Quill.find(target)
+    const index = this.quill.getIndex(fileBlot)
+    const [fileItem, offset] = this.quill.scroll.descendant(File, index)
+    const length = fileItem && fileItem.length()
+    this.fileRange = new Range(index - offset, length)
+
+    const timestamp = Number(this.file.dataset.lastModified)
+    const _lastModifiedDate = this.formatDate(timestamp)
+    this.template = [
+      // `<a class="ql-last-modified-date" href="${this.file.href}" target="_blank">${this.file.href}</a>`,
+      // '<span class="ql-split"></span>',
+      // `<a class="ql-file-preview"><i class="icon-preview"></i></a>`,
+      `<a class="ql-file-download"><i class="icon-download"></i></a>`,
+      '<a class="ql-file-delete"><i class="icon-delete"></i></a>',
+    ].join('')
+
+    this.createFileBar()
+  }
+
+  createFileBar() {
+    this.domNode = document.createElement('div')
+    this.domNode.className = 'ql-file-bar'
+    this.domNode.innerHTML = this.template
+    // 查看文件
+    const filePreview = this.domNode.querySelector('a.ql-file-preview')
+    if (filePreview) {
+      filePreview.addEventListener('click', (event) => {
+        this.operateFile(event, 'view')
+      })
+    }
+    // 下载文件
+    const fileDownload = this.domNode.querySelector('a.ql-file-download')
+    if (fileDownload) {
+      fileDownload.addEventListener('click', (event) => {
+        this.operateFile(event, 'download')
+      })
+    }
+    // 删除文件
+    const fileDelete = this.domNode.querySelector('a.ql-file-delete')
+    if (fileDelete) {
+      fileDelete.addEventListener('click', (event) => {
+        this.operateFile(event, 'delete')
+        const delta = new Delta()
+          .retain(this.fileRange.index)
+          .delete(this.fileRange.length)
+        this.quill.updateContents(delta, Quill.sources.USER)
+        this.quill.setSelection(this.fileRange.index)
+      })
+    }
+
+    this.setPosition()
+    this.quill.root.parentNode.appendChild(this.domNode)
+  }
+
+  destroy() {
+    if (this.domNode) {
+      this.domNode.remove()
+      this.domNode = null
+      this.file = null
+    }
+  }
+
+  operateFile(event, operate) {
+    event.preventDefault()
+    const fileId = this.file.dataset.id || ''
+    const fileDownloadUrl = this.file.href
+    if (fileId) {
+      this.quill.emitter.emit('file-change', {
+        operation: operate,
+        data: { fileId, fileDownloadUrl },
+      })
+    }
+    if (operate === 'download') {
+      const a = document.createElement('a')
+      a.href = fileDownloadUrl
+      a.target = '_blank'
+      a.id = 'exppub'
+      document.body.appendChild(a)
+      const alink = document.getElementById('exppub')
+      alink.click()
+      alink.parentNode.removeChild(a)
+    }
+    this.destroy()
+  }
+
+  setPosition() {
+    if (this.domNode && this.file) {
+      const parent = this.quill.root.parentNode
+      const child = this.file.querySelector('span')
+      const containerRect = parent.getBoundingClientRect()
+      const fileRect = child.getBoundingClientRect()
+      this.css(this.domNode, {
+        left: `${fileRect.left - containerRect.left}px`,
+        top: `${fileRect.top - containerRect.top + 10}px`,
+      })
+    }
+  }
+
+  css(domNode, rules) {
+    if (typeof rules === 'object') {
+      for (const prop in rules) {
+        if (prop) {
+          if (Array.isArray(rules[prop])) {
+            // 兼容IE11浏览器
+            rules[prop].forEach((val) => {
+              domNode.style[prop] = val
+            })
+          }
+          else {
+            domNode.style[prop] = rules[prop]
+          }
+        }
+      }
+    }
+  }
+
+  formatDate(timestamp) {
+    const date = new Date(timestamp)
+    const year = date.getFullYear()
+    // TODO
+    const month = unshiftString(`${date.getMonth() + 1}`, 2, '0')
+    const day = unshiftString(`${date.getDate()}`, 2, '0')
+    const hour = unshiftString(`${date.getHours()}`, 2, '0')
+    const minute = unshiftString(`${date.getMinutes()}`, 2, '0')
+    return Number.isNaN(year) ? '--' : `${year}/${month}/${day} ${hour}:${minute}`
+  }
+}

package/src/fluent-editor.ts

@@ -0,0 +1,164 @@
+import type { Module, Parchment as TypeParchment } from 'quill'
+import type { IEditorConfig } from './config/types'
+import Quill from 'quill'
+import { FontStyle, LineHeightStyle, SizeStyle, TextIndentStyle } from './attributors'
+import { getListValue, ICONS_CONFIG, inputFile, TABLE_RIGHT_MENU_CONFIG } from './config'
+import Counter from './counter' // 字符统计
+import CustomClipboard from './custom-clipboard' // 粘贴板
+import CustomImage from './custom-image/BlotFormatter' // 图片
+import { CustomImageSpec } from './custom-image/specs/CustomImageSpec' // 图片拉伸模块
+import CustomUploader from './custom-uploader' // 上传
+import Emoji from './emoji' // 表情
+import FileModule from './file' // 文件
+import { FormatPainter } from './format-painter'
+import Link from './link' // 超链接
+import Mention from './mention/Mention' // @提醒
+import { Screenshot } from './screenshot'// 截图
+import SoftBreak from './soft-break' // 软回车
+import Strike from './strike' // 删除线
+import CustomSyntax from './syntax' // 代码块高亮
+import BetterTable from './table/better-table' // 表格
+import Toolbar from './toolbar' // 工具栏
+import Video from './video' // 视频
+// import GlobalLink from './global-link' // 全局链接
+// import QuickMenu from './quick-menu' // 快捷菜单
+
+class FluentEditor extends Quill {
+  constructor(container: HTMLElement | string, options: IEditorConfig = {}) {
+    super(container, options)
+  }
+}
+
+const registerModules = function () {
+  const Icons = Quill.imports['ui/icons']
+  const iconKeys = Object.keys(ICONS_CONFIG)
+  iconKeys.forEach((iconKey) => {
+    Icons[iconKey] = ICONS_CONFIG[iconKey]
+  })
+
+  const SnowTheme = Quill.imports['themes/snow'] as typeof Module
+  SnowTheme.DEFAULTS = {
+    modules: {
+      'keyboard': {
+        bindings: {
+          ...BetterTable.keyboardBindings,
+        },
+      },
+      'toolbar': {
+        handlers: {
+          ...(SnowTheme.DEFAULTS as Record<string, any>).modules.toolbar.handlers,
+          'undo': function () {
+            this.quill.history.undo()
+          },
+          'redo': function () {
+            this.quill.history.redo()
+          },
+          'better-table': function () {
+            this.quill.getModule('better-table').insertTable(3, 3)
+          },
+          'file': function () {
+            const accept = this.quill.options?.uploadOption?.fileAccept
+            inputFile.call(this, 'file', accept)
+          },
+          'image': function () {
+            const accept = this.quill.options?.uploadOption?.imageAccept
+            inputFile.call(this, 'image', accept)
+          },
+          'emoji': function () {},
+          'fullscreen': function () {},
+          'list': function (value) {
+            const range = this.quill.getSelection()
+            const formats = this.quill.getFormat(range)
+            const preListValue = Array.isArray(formats.list) ? formats.list[0]?.value : formats.list?.value
+            const curListValue = getListValue(value, preListValue)
+            // 如果设置list的选区中有表格，判断第一个table-col位置，将表格前的内容设置为list格式
+            const lines = this.quill.getLines(range.index, range.length)
+            const tableCols = lines.filter(line => line.statics.blotName === 'table-col' && !line.prev)
+            if (tableCols.length) {
+              let start = range.index
+              // 遍历table-col群组，以之获取表格，将表格前选区设置为对应list格式
+              tableCols.forEach((item, index) => {
+                const table = item.domNode.closest('table.quill-better-table')
+                const tableBlot = Quill.find(table) as TypeParchment.Blot
+                const tableLength = tableBlot.length()
+                const tableStart = this.quill.getIndex(item)
+                const tableEnd = tableStart + tableLength
+                const beforeTableRangeLength = tableStart - start
+                // 在表格前设置列表
+                this.quill.setSelection(start, beforeTableRangeLength, Quill.sources.SILENT)
+                this.quill.format('list', curListValue, Quill.sources.USER)
+                table.parentNode.classList.remove('quill-better-table-selected')
+                // 当前表格末尾为下一个选取的开始
+                start = tableEnd
+                if (index === tableCols.length - 1) {
+                  // 将最后一个表格之后所有选区内容设置list格式
+                  this.quill.setSelection(tableEnd, range.index + range.length - tableEnd)
+                  this.quill.format('list', curListValue, Quill.sources.USER)
+                }
+              })
+            }
+            else {
+              this.quill.format('list', curListValue, Quill.sources.USER)
+            }
+          },
+          [FormatPainter.toolName]: FormatPainter,
+          [Screenshot.toolName]: Screenshot,
+        },
+      },
+      'better-table': {
+        operationMenu: {
+          items: TABLE_RIGHT_MENU_CONFIG,
+          color: true,
+        },
+      },
+      'image': {
+        specs: [CustomImageSpec],
+        overlay: {
+          style: {
+            border: '1px dashed rgb(68, 68, 68)',
+          },
+        },
+        align: {
+          icons: {
+            left: '<i class="icon-text-align-left"></i>',
+            center: '<i class="icon-text-align-center"></i>',
+            right: '<i class="icon-text-align-right"></i>',
+          },
+        },
+      },
+    },
+  }
+
+  FluentEditor.register(
+    {
+      'modules/toolbar': Toolbar,
+      'modules/mention': Mention,
+      'modules/better-table': BetterTable,
+      'modules/clipboard': CustomClipboard,
+      'modules/uploader': CustomUploader, // 三者关联性最强
+      'modules/image': CustomImage, // 三者关联性最强
+      'modules/file': FileModule, // 三者关联性最强
+      'modules/counter': Counter,
+      'modules/emoji-toolbar': Emoji.ToolbarEmoji,
+      'modules/emoji-shortname': Emoji.ShortNameEmoji,
+      // 'modules/global-link': GlobalLink,//暂未开发
+      'modules/link': Link, // 报错
+      // 'modules/quickmenu': QuickMenu,//暂未开发
+      'modules/syntax': CustomSyntax,
+
+      'formats/strike': Strike,
+      'formats/softBreak': SoftBreak,
+      'formats/video': Video,
+      'formats/emoji': Emoji.EmojiBlot,
+      'formats/font': FontStyle,
+      'formats/size': SizeStyle,
+      'formats/line-height': LineHeightStyle,
+      'formats/text-indent': TextIndentStyle,
+    },
+    true, // 覆盖内部模块
+  )
+
+  return FluentEditor
+}
+
+export default registerModules()

package/src/format-painter/index.ts

@@ -0,0 +1,79 @@
+import type { Range } from 'quill'
+import type Toolbar from 'quill/modules/toolbar'
+import Quill from 'quill'
+
+interface FormatData {
+  formatPainter: {
+    rangeFormat: Record<string, any>
+    isFormatterLock: boolean
+    isFormating: boolean
+    prepareLock: boolean
+  }
+}
+export function FormatPainter(this: Toolbar & FormatData) {
+  if (!this.formatPainter) {
+    this.formatPainter = {
+      rangeFormat: {},
+      isFormatterLock: false,
+      isFormating: false,
+      prepareLock: false,
+    }
+  }
+  const [, formatterBtn] = this.controls.find(([name]) => name === FormatPainter.toolName)
+  const formatRange = (range: Range | null) => {
+    if (!range) return
+    this.quill.removeFormat(range.index, range.length)
+    for (const format in this.formatPainter.rangeFormat) {
+      this.quill.format(format, this.formatPainter.rangeFormat[format], Quill.sources.USER)
+    }
+    if (!this.formatPainter.isFormatterLock) {
+      unbindFormatSelect()
+    }
+    else {
+      btnActive()
+    }
+  }
+  // setTime for Toolbar.update
+  const btnActive = () => {
+    setTimeout(() => {
+      formatterBtn.classList.add('ql-active')
+    }, 0)
+  }
+  const btnRemoveActive = () => {
+    setTimeout(() => {
+      formatterBtn.classList.remove('ql-active')
+    }, 0)
+  }
+  const bindFormatSelect = () => {
+    const range = this.quill.getSelection()
+    if (range.length === 0) return
+    this.formatPainter.rangeFormat = this.quill.getFormat(range)
+    this.formatPainter.isFormating = true
+    this.quill.on(Quill.events.SELECTION_CHANGE, formatRange)
+    btnActive()
+  }
+  const unbindFormatSelect = () => {
+    this.quill.off(Quill.events.SELECTION_CHANGE, formatRange)
+    this.formatPainter.rangeFormat = undefined
+    btnRemoveActive()
+    this.formatPainter.isFormating = false
+    this.formatPainter.isFormatterLock = false
+  }
+
+  if (this.formatPainter.isFormatterLock || (this.formatPainter.isFormating && !this.formatPainter.prepareLock)) {
+    unbindFormatSelect()
+  }
+  else if (this.formatPainter.isFormating && this.formatPainter.prepareLock) {
+    this.formatPainter.isFormatterLock = true
+    btnActive()
+  }
+  else {
+    // imitate double click
+    this.formatPainter.prepareLock = true
+    setTimeout(() => {
+      this.formatPainter.prepareLock = false
+    }, 200)
+    bindFormatSelect()
+  }
+}
+FormatPainter.toolName = 'format-painter'

package/src/global-link/constants.ts

@@ -0,0 +1,3 @@
+export const ON_WIKI_LINK_REMOVE = 'wiki-link/remove'
+export const ON_DOC_LINK_REMOVE = 'doc-link/remove'
+export const ON_WORK_ITEM_LINK_REMOVE = 'work-item-link/remove'

package/src/global-link/formats/customer-widget-link.ts

@@ -0,0 +1,36 @@
+import Quill from 'quill'
+
+const BlockEmbed = Quill.imports['blots/block/embed']
+
+// @dynamic
+class CustomerWidgetLink extends BlockEmbed {
+  static blotName: string
+  static tagName: string
+  static className: string
+
+  static create(value) {
+    const node = super.create(value)
+    node.setAttribute('data-widget-type', value.type)
+    node.setAttribute('data-widget-id', value.id)
+    node.setAttribute('src', value.value)
+    return node
+  }
+
+  static value(domNode) {
+    return {
+      type: domNode.getAttribute('data-widget-type'),
+      id: domNode.getAttribute('data-widget-id'),
+      value: domNode.getAttribute('src'),
+    }
+  }
+
+  constructor(scroll, domNode, data) {
+    super(scroll, domNode, data)
+  }
+}
+
+CustomerWidgetLink.blotName = 'customer-widget-link'
+CustomerWidgetLink.tagName = 'img'
+CustomerWidgetLink.className = 'ql-customer-widget-link'
+
+export default CustomerWidgetLink

package/src/global-link/formats/doc-link.ts

@@ -0,0 +1,55 @@
+import Quill from 'quill'
+import { ON_DOC_LINK_REMOVE } from '../constants'
+
+const Embed = Quill.imports['blots/embed']
+
+// @dynamic
+class DocumentLink extends Embed {
+  static blotName: string
+  static tagName: string
+  static className: string
+  docData: any
+  scroll: any
+
+  static create(value) {
+    const node = super.create(value)
+    node.setAttribute('href', value.link)
+    node.setAttribute('title', value.text)
+    node.setAttribute('target', '_blank')
+    node.setAttribute('icon-link', value.icon)
+
+    const icon = document.createElement('span')
+    icon.classList.add('ql-doc-link-icon')
+    icon.style.background = `url(${value.icon}) no-repeat center`
+    icon.style.backgroundSize = 'contain'
+
+    node.insertAdjacentElement('afterbegin', icon)
+    const text = document.createTextNode(value.text)
+    node.appendChild(text)
+    return node
+  }
+
+  static value(domNode) {
+    return {
+      link: domNode.getAttribute('href'),
+      icon: domNode.getAttribute('icon-link'),
+      text: domNode.textContent,
+    }
+  }
+
+  constructor(scroll, domNode, data) {
+    super(scroll, domNode, data)
+    this.docData = data
+  }
+
+  remove() {
+    this.scroll.emitter.emit(ON_DOC_LINK_REMOVE, this.docData)
+    return super.remove()
+  }
+}
+
+DocumentLink.blotName = 'doc-link'
+DocumentLink.tagName = 'A'
+DocumentLink.className = 'ql-doc-link'
+
+export default DocumentLink

package/src/global-link/formats/wiki-link.ts

@@ -0,0 +1,45 @@
+import Quill from 'quill'
+import { ON_WIKI_LINK_REMOVE } from '../constants'
+
+const Embed = Quill.imports['blots/embed']
+
+// @dynamic
+class WikiLink extends Embed {
+  static blotName: string
+  static tagName: string
+  static className: string
+  wikiData: any
+  scroll: any
+
+  static create(value) {
+    const node = super.create(value)
+    node.setAttribute('href', value.link)
+    node.setAttribute('target', '_blank')
+    node.setAttribute('title', value.text)
+    node.textContent = value.text
+    return node
+  }
+
+  static value(domNode) {
+    return {
+      link: domNode.getAttribute('href'),
+      text: domNode.textContent,
+    }
+  }
+
+  constructor(scroll, domNode, data) {
+    super(scroll, domNode, data)
+    this.wikiData = data
+  }
+
+  remove() {
+    this.scroll.emitter.emit(ON_WIKI_LINK_REMOVE, this.wikiData)
+    return super.remove()
+  }
+}
+
+WikiLink.blotName = 'wiki-link'
+WikiLink.tagName = 'A'
+WikiLink.className = 'ql-wiki-link'
+
+export default WikiLink

package/src/global-link/formats/work-item-link.ts

@@ -0,0 +1,47 @@
+import Quill from 'quill'
+import { ON_WORK_ITEM_LINK_REMOVE } from '../constants'
+import { createTable } from '../utils/createTable'
+
+const BlockEmbed = Quill.imports['blots/block/embed']
+
+// @dynamic
+class WorkItemLink extends BlockEmbed {
+  static blotName: string
+  static tagName: string
+  static className: string
+  workItemData: any
+  scroll: any
+
+  static create(value) {
+    const node = super.create(value)
+    node.setAttribute('contenteditable', 'false')
+    node.setAttribute('href', value.link)
+    node.setAttribute('__work_item_data__', JSON.stringify(value.data))
+    const table = createTable(value.data)
+    node.appendChild(table)
+    return node
+  }
+
+  static value(domNode) {
+    return {
+      link: domNode.getAttribute('href'),
+      data: JSON.parse(domNode.getAttribute('__work_item_data__')),
+    }
+  }
+
+  constructor(scroll, domNode, data) {
+    super(scroll, domNode, data)
+    this.workItemData = data
+  }
+
+  remove() {
+    this.scroll.emitter.emit(ON_WORK_ITEM_LINK_REMOVE, this.workItemData)
+    return super.remove()
+  }
+}
+
+WorkItemLink.blotName = 'work-item-link'
+WorkItemLink.tagName = 'div'
+WorkItemLink.className = 'ql-work-item-link'
+
+export default WorkItemLink

package/src/global-link/global-link-panel.ts

@@ -0,0 +1,20 @@
+import type { EventEmitter } from '@angular/core'
+
+interface WikiLink {
+  link: string
+  text: string
+}
+
+interface DocLink {
+  link: string
+  text: string
+  icon: string
+}
+
+export interface GlobalLinkPanel {
+  wikiLink: EventEmitter<WikiLink[]>
+  docLink: EventEmitter<DocLink[]>
+  workItemLink: EventEmitter<any>
+  close?: EventEmitter<any>
+  autoClose?: boolean
+}