@opentiny/fluent-editor 3.20.2 → 3.20.3

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

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

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

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

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

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

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

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

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

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