@opentiny/fluent-editor 3.20.2-alpha.0 → 3.20.2

package/src/screenshot/index.ts

@@ -0,0 +1,231 @@
+import type html2canvas from 'html2canvas'
+import type { Options as Html2CanvasOptions } from 'html2canvas'
+import type Toolbar from 'quill/modules/toolbar'
+import Quill from 'quill'
+import { imgToBase64 } from '../utils/image'
+import { lockScroll } from '../utils/scroll-lock'
+
+const Delta = Quill.import('delta')
+
+export type ScreenShotOptions = Partial<Html2CanvasOptions> & {
+  Html2Canvas: typeof html2canvas
+  beforeCreateCanvas: () => void | Promise<void>
+  beforeCreateImage: (canvas: HTMLCanvasElement) => HTMLCanvasElement | string | Promise<HTMLCanvasElement | string>
+}
+interface ScreenShotOptionsInQuill {
+  quill: {
+    options: {
+      screenshot: Partial<ScreenShotOptions>
+    }
+  }
+}
+
+function resolveOptions(options: Partial<ScreenShotOptions>) {
+  return Object.assign({
+    // @ts-ignore
+    Html2Canvas: window.Html2Canvas,
+    useCORS: true,
+    scale: 1,
+    foreignObjectRendering: true,
+    beforeCreateImage: undefined,
+    beforeCreateCanvas: undefined,
+  }, options)
+}
+
+function init() {
+  const maskExits = document.querySelectorAll('.ql-screenshot-mask')
+  if (maskExits) {
+    maskExits.forEach(item => item && item.remove())
+  }
+  // 创建截图图层
+  const wrapper = document.createElement('div')
+  wrapper.classList.add('ql-screenshot-wrapper')
+  const mask = document.createElement('div')
+  mask.className = 'ql-screenshot-mask'
+  const cutter = document.createElement('div')
+  cutter.className = 'ql-screenshot-cutter'
+  const coordinate = document.createElement('p')
+  coordinate.className = 'ql-screenshot-coordinate'
+  cutter.appendChild(coordinate)
+  wrapper.appendChild(mask)
+  wrapper.appendChild(cutter)
+  document.body.appendChild(wrapper)
+  return { wrapper, mask, cutter, coordinate }
+}
+
+function findParentFixed(dom: HTMLElement) {
+  if (dom.tagName === 'BODY') return false
+  if (['fixed', 'sticky'].includes(dom.parentElement.style.position)) return true
+  return findParentFixed(dom.parentElement)
+}
+async function renderImage(
+  Html2Canvas: typeof html2canvas,
+  html2canvasOptions: Partial<Html2CanvasOptions>,
+  rect: DOMRect,
+  options?: Omit<ScreenShotOptions, 'Html2Canvas' | keyof Html2CanvasOptions>,
+) {
+  if (options && options.beforeCreateCanvas) {
+    await options.beforeCreateCanvas()
+  }
+  const canvas: CanvasImageSource = await Html2Canvas(document.body, {
+    ...html2canvasOptions,
+    onclone: async (doc: Document, el: HTMLElement) => {
+      // find all fixed or sticky dom
+      const fixedDom = Array.from(doc.querySelectorAll('*[style*="position: fixed"]')) as HTMLElement[]
+      const stickyDom = Array.from(doc.querySelectorAll('*[style*="position: sticky"]')) as HTMLElement[]
+      const fixedDomList = new Set([...fixedDom, ...stickyDom])
+      for (const dom of fixedDomList) {
+        // if parent dom already has fixed or sticky style
+        // means that transform will be settle. skip
+        if (findParentFixed(dom)) continue
+        // use transform move to correct position
+        let x = 0
+        let y = 0
+        if (dom.style.top !== 'auto') {
+          y = window.scrollY
+        }
+        if (dom.style.left !== 'auto') {
+          x = window.scrollX
+        }
+        if (x !== 0 || y !== 0) {
+          dom.style.transform = `translate(${x}px, ${y}px)`
+        }
+      }
+
+      const imgs = doc.querySelectorAll('img')
+      const promises = Array.from(imgs).map(async (img) => {
+        img.src = await imgToBase64(img.src)
+      })
+      await Promise.all(promises)
+      html2canvasOptions.onclone && await html2canvasOptions.onclone(doc, el)
+    },
+  })
+  // 当前canvas为body全局截图，从当前截图中截取想要的部分重新绘制转成base64插入富文本
+  let cropCanvas: HTMLCanvasElement | string = document.createElement('canvas')
+  cropCanvas.width = rect.width
+  cropCanvas.height = rect.height
+  const cropCanvasCtx = cropCanvas.getContext('2d')
+  cropCanvasCtx.drawImage(
+    canvas,
+    rect.x + window.scrollX,
+    rect.y + window.scrollY,
+    rect.width,
+    rect.height,
+    0,
+    0,
+    rect.width,
+    rect.height,
+  )
+  if (options && options.beforeCreateImage) {
+    cropCanvas = await options.beforeCreateImage(cropCanvas)
+  }
+  return typeof cropCanvas === 'string' ? cropCanvas : cropCanvas.toDataURL()
+}
+
+export function Screenshot(this: Toolbar & ScreenShotOptionsInQuill) {
+  this.quill.options.screenshot = resolveOptions(this.quill.options.screenshot)
+  const options = this.quill.options.screenshot
+  // @ts-ignore
+  const { Html2Canvas, beforeCreateImage, beforeCreateCanvas, ...html2CanvasOptions } = options
+  if (!Html2Canvas) {
+    throw new Error('ScreenShot module requires html2canvas. Please include the library on the page before FluentEditor.')
+  }
+  const range = this.quill.getSelection()
+  const { wrapper, mask, cutter, coordinate } = init()
+  const status: {
+    leftClickLockFlag: boolean
+    start?: {
+      x: number
+      y: number
+    }
+  } = {
+    leftClickLockFlag: false,
+    start: undefined,
+  }
+  const cleanLock = lockScroll()
+
+  const removeContextmenu = (event: Event) => {
+    event.preventDefault()
+    wrapper.remove()
+    cleanLock()
+    document.removeEventListener('contextmenu', removeContextmenu)
+  }
+  const afterShotCtrl = async (event: MouseEvent) => {
+    document.removeEventListener('mousedown', toggleRect)
+    const cutterRect = cutter.getBoundingClientRect()
+    const target = event.target as HTMLElement
+    wrapper.remove()
+    cleanLock()
+    if (target && target.className === 'ql-screenshot-confirm') {
+      const image = await renderImage(Html2Canvas, html2CanvasOptions, cutterRect, { beforeCreateCanvas, beforeCreateImage })
+
+      const delta = new Delta()
+        .retain(range.index)
+        .delete(range.length)
+        .insert({ image })
+      this.quill.updateContents(delta, Quill.sources.USER)
+      this.quill.setSelection(range.index + 1, Quill.sources.SILENT)
+    }
+    status.start = undefined
+  }
+  const drawRect = (event: MouseEvent) => {
+    // 通过鼠标移动描绘截图图层
+    const startX = status.start.x
+    const startY = status.start.y
+    const endX = event.clientX
+    const endY = event.clientY
+    const width = Math.abs(endX - startX)
+    const height = Math.abs(endY - startY)
+    const top = startY < endY ? startY : endY
+    const left = startX < endX ? startX : endX
+    const bottom = window.innerHeight - height - top
+    const right = window.innerWidth - width - left
+
+    const maskPath = `
+      linear-gradient(to top, #fff, #fff) top / 100% ${top}px,
+      linear-gradient(to bottom, #fff, #fff) bottom /100% ${bottom}px,
+      linear-gradient(to left, #fff, #fff) left / ${left}px 100%,
+      linear-gradient(to right, #fff, #fff) right / ${right}px 100%
+    `
+    Object.assign(cutter.style, {
+      width: `${width}px`,
+      height: `${height}px`,
+      left: `${left}px`,
+      top: `${top}px`,
+    })
+    Object.assign(mask.style, {
+      'mask': maskPath,
+      '-webkit-mask-repeat': 'no-repeat',
+    })
+    coordinate.textContent = `${width}, ${height}`
+  }
+  const toggleRect = (event: MouseEvent) => {
+    // 右键取消截图操作
+    if (event.button === 2) {
+      document.removeEventListener('mousemove', drawRect)
+      document.removeEventListener('mousedown', toggleRect)
+      document.addEventListener('contextmenu', removeContextmenu)
+      return
+    }
+    if (!status.leftClickLockFlag) {
+      if (status.start) {
+        // 如果有起点，则当前触发坐标为终点，移除监听事件并添加确认和取消按钮
+        document.removeEventListener('mousemove', drawRect)
+        const doneBtn = document.createElement('div')
+        doneBtn.innerHTML = `<div class="ql-screenshot-confirm"></div><div class="ql-screenshot-cancel"></div>`
+        doneBtn.className = 'ql-screenshot-done'
+        doneBtn.addEventListener('click', afterShotCtrl)
+        coordinate.remove()
+        cutter.appendChild(doneBtn)
+        status.leftClickLockFlag = true
+      }
+      else {
+        // 无起点则设置起点坐标，监听鼠标移动
+        status.start = { x: event.clientX, y: event.clientY }
+        document.addEventListener('mousemove', drawRect)
+      }
+    }
+  }
+  document.addEventListener('mousedown', toggleRect)
+}
+Screenshot.toolName = 'screenshot'

package/src/soft-break/index.ts

@@ -0,0 +1,34 @@
+import Quill from 'quill'
+
+const Embed = Quill.imports['blots/embed']
+
+class SoftBreak extends Embed {
+  static blotName: string
+  static tagName: string
+  static className: string
+  domNode: any
+  prev: any
+  next: any
+  remove: () => void
+
+  static create() {
+    const node = super.create()
+    return node
+  }
+
+  optimize() {
+    // li的开头结尾，移除软回车
+    if (this.prev === null) {
+      this.remove()
+    }
+  }
+
+  length() {
+    return 1
+  }
+}
+SoftBreak.blotName = 'soft-break'
+SoftBreak.tagName = 'BR'
+SoftBreak.className = 'ql-soft-break'
+
+export default SoftBreak

package/src/strike/index.ts

@@ -0,0 +1,16 @@
+import Quill from 'quill'
+
+const Inline = Quill.imports['blots/inline']
+
+// @dynamic
+class StrikeBlot extends Inline {
+  static blotName: string
+  static className: string
+  static tagName: string
+  // 此处删除了formats方法，当前tag非span，则并不需要进行特殊处理去重写formats方法
+}
+StrikeBlot.blotName = 'strike'
+StrikeBlot.tagName = 'u'
+StrikeBlot.className = 'ql-custom-strike'
+
+export default StrikeBlot

package/src/syntax/index.ts

@@ -0,0 +1,35 @@
+import type TypeSyntax from 'quill/modules/syntax'
+import Quill from 'quill'
+
+const Syntax = Quill.import('modules/syntax') as typeof TypeSyntax
+
+// @dynamic
+class CustomSyntax extends Syntax {
+  static DEFAULTS: { hljs: any, interval: number, languages: { key: string, label: string }[] }
+}
+
+CustomSyntax.DEFAULTS = {
+  hljs: (() => {
+    // @ts-ignore
+    return window.hljs
+  })(),
+  interval: 1000,
+  languages: [
+    { key: 'plain', label: 'Plain' },
+    { key: 'bash', label: 'Bash' },
+    { key: 'cpp', label: 'C++' },
+    { key: 'cs', label: 'C#' },
+    { key: 'css', label: 'CSS' },
+    { key: 'diff', label: 'Diff' },
+    { key: 'xml', label: 'HTML/XML' },
+    { key: 'java', label: 'Java' },
+    { key: 'javascript', label: 'Javascript' },
+    { key: 'markdown', label: 'Markdown' },
+    { key: 'php', label: 'PHP' },
+    { key: 'python', label: 'Python' },
+    { key: 'ruby', label: 'Ruby' },
+    { key: 'sql', label: 'SQL' },
+  ],
+}
+
+export default CustomSyntax