@opentiny/fluent-editor 3.19.2 → 3.20.0

package/lib/screenshot/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/screenshot/index.ts"],"sourcesContent":["import Quill from 'quill'\r\nimport { isPureIE } from '../config/editor.utils'\r\n\r\nconst Delta = Quill.import('delta')\r\n\r\ninterface ScreenShotOptions {\r\n  Html2Canvas: any\r\n  screenshotOnStaticPage?: boolean\r\n}\r\n\r\nclass Screenshot {\r\n  static DEFAULTS = {\r\n    Html2Canvas: (() => {\r\n      // @ts-ignore\r\n      return window.Html2Canvas\r\n    })(),\r\n    screenshotOnStaticPage: false,\r\n  }\r\n\r\n  range: any\r\n  cutter: HTMLDivElement\r\n  mask: HTMLDivElement\r\n  coordinate: HTMLDivElement\r\n  width: number\r\n  height: number\r\n  leftClickLockFlag = false\r\n  start: {\r\n    x: number\r\n    y: number\r\n  }\r\n\r\n  constructor(public quill, protected options: Partial<ScreenShotOptions> = {}, range) {\r\n    if (this.options.Html2Canvas == null) {\r\n      throw new Error(\r\n        'ScreenShot module requires html2canvas. Please include the library on the page before FluentEditor.',\r\n      )\r\n    }\r\n    this.range = range\r\n  }\r\n\r\n  init() {\r\n    const maskExits = document.querySelectorAll('.ql-screenshot-mask')\r\n    if (maskExits) {\r\n      maskExits.forEach(item => item && item.remove())\r\n    }\r\n    // 创建截图图层\r\n    this.mask = document.createElement('div')\r\n    this.mask.className = 'ql-screenshot-mask'\r\n    this.cutter = document.createElement('div')\r\n    this.cutter.className = 'ql-screenshot-cutter'\r\n    this.coordinate = document.createElement('p')\r\n    this.coordinate.className = 'ql-screenshot-coordinate'\r\n    this.insertBlock()\r\n    this.cutter.appendChild(this.coordinate)\r\n    this.mask.appendChild(this.cutter)\r\n    document.body.appendChild(this.mask)\r\n    document.addEventListener('mousedown', this.toggleRect)\r\n  }\r\n\r\n  insertBlock() {\r\n    for (let i = 0; i < 7; i++) {\r\n      const blockItem = document.createElement('div')\r\n      blockItem.className = 'ql-screenshot-border-block'\r\n      this.cutter.appendChild(blockItem)\r\n    }\r\n  }\r\n\r\n  removeContextmenu = (event) => {\r\n    event.preventDefault()\r\n    this.mask.remove()\r\n    document.removeEventListener('contextmenu', this.removeContextmenu)\r\n  }\r\n\r\n  toggleRect = (event: MouseEvent) => {\r\n    // 右键取消截图操作\r\n    if (event.button === 2) {\r\n      document.removeEventListener('mousemove', this.drawRect)\r\n      document.removeEventListener('mousedown', this.toggleRect)\r\n      document.addEventListener('contextmenu', this.removeContextmenu)\r\n      return\r\n    }\r\n    if (!this.leftClickLockFlag) {\r\n      if (this.start) {\r\n        // 如果有起点，则当前触发坐标为终点，移除监听事件并添加确认和取消按钮\r\n        document.removeEventListener('mousemove', this.drawRect)\r\n        const doneBtn = document.createElement('div')\r\n        doneBtn.innerHTML = `<span class=\"ql-screenshot-ok\"></span><span class=\"ql-screenshot-cancel\"></span>`\r\n        doneBtn.className = 'ql-screenshot-done'\r\n        doneBtn.addEventListener('click', this.afterShotCtrl)\r\n        this.coordinate.remove()\r\n        this.cutter.appendChild(doneBtn)\r\n        this.leftClickLockFlag = true\r\n      }\r\n      else {\r\n        // 无起点则设置起点坐标，监听鼠标移动\r\n        this.start = { x: event.clientX, y: event.clientY }\r\n        this.cutter.style.left = `${this.start.x}px`\r\n        this.cutter.style.top = `${this.start.y}px`\r\n        document.addEventListener('mousemove', this.drawRect)\r\n      }\r\n    }\r\n  }\r\n\r\n  drawRect = (event: MouseEvent) => {\r\n    // 通过鼠标移动描绘截图图层\r\n    this.width = event.clientX - this.start.x\r\n    this.height = event.clientY - this.start.y\r\n    this.cutter.style.width = `${this.width}px`\r\n    this.cutter.style.height = `${this.height}px`\r\n    this.coordinate.innerHTML = `${this.width}<br>${this.height}`\r\n  }\r\n\r\n  afterShotCtrl = (event) => {\r\n    document.removeEventListener('mousedown', this.toggleRect)\r\n    this.mask.remove()\r\n    const target = event.target\r\n    if (target && target.className === 'ql-screenshot-ok') {\r\n      const rect = {\r\n        x: this.start.x,\r\n        y: this.start.y,\r\n        width: this.width,\r\n        height: this.height,\r\n        scrollX: document.body.scrollLeft,\r\n        scrollY: document.body.scrollTop,\r\n        allowTaint: true, // 是否允许跨域图片渲染\r\n        logging: false, // 是否启用日志记录\r\n      }\r\n      this.renderImage(rect)\r\n    }\r\n    this.start = undefined\r\n  }\r\n\r\n  renderImage(rect) {\r\n    if (isPureIE) {\r\n      this.options.Html2Canvas(document.body, rect).then(canvas => this.insertEditor(canvas))\r\n    }\r\n    else {\r\n      this.options.Html2Canvas(document.body, {\r\n        allowTaint: true, // 是否允许跨域图片渲染\r\n        foreignObjectRendering: this.quill.options.screenshotOnStaticPage, // 是否使用svg方式\r\n        logging: false, // 是否启用日志记录\r\n      }).then((canvas) => {\r\n        // 当前canvas为body全局截图，从当前截图中截取想要的部分重新绘制转成base64插入富文本\r\n        const cropCanvas = document.createElement('canvas')\r\n        cropCanvas.width = this.width\r\n        cropCanvas.height = this.height\r\n        const cropCanvasCtx = cropCanvas.getContext('2d')\r\n        cropCanvasCtx.drawImage(\r\n          canvas,\r\n          rect.x + window.scrollX,\r\n          rect.y + window.scrollY,\r\n          this.width,\r\n          this.height,\r\n          0,\r\n          0,\r\n          this.width,\r\n          this.height,\r\n        )\r\n        this.insertEditor(cropCanvas)\r\n        cropCanvas.remove()\r\n      })\r\n    }\r\n  }\r\n\r\n  insertEditor(canvas) {\r\n    const image = canvas.toDataURL()\r\n    const delta = new Delta()\r\n      .retain(this.range.index)\r\n      .delete(this.range.length)\r\n      .insert({ image })\r\n    this.quill.updateContents(delta, Quill.sources.USER)\r\n    this.quill.setSelection(this.range.index + 1, Quill.sources.SILENT)\r\n  }\r\n}\r\n\r\nexport default Screenshot\r\n"],"names":["isPureIE"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/screenshot/index.ts"],"sourcesContent":["import Quill from 'quill'\r\nimport type Toolbar from 'quill/modules/toolbar'\r\nimport type html2canvas from 'html2canvas'\r\nimport type { Options as Html2CanvasOptions } from 'html2canvas'\r\n\r\nconst Delta = Quill.import('delta')\r\n\r\nexport type ScreenShotOptions = Partial<Html2CanvasOptions> & {\r\n  Html2Canvas: typeof html2canvas\r\n  beforeCreateCanvas: () => void | Promise<void>\r\n  beforeCreateImage: (canvas: HTMLCanvasElement) => HTMLCanvasElement | string | Promise<HTMLCanvasElement | string>\r\n}\r\ntype ScreenShotOptionsInQuill = {\r\n  quill: {\r\n    options: {\r\n      screenshot: Partial<ScreenShotOptions>\r\n    }\r\n  }\r\n}\r\n\r\nconst resolveOptions = (options: Partial<ScreenShotOptions>) => {\r\n  return Object.assign({\r\n    // @ts-ignore\r\n    Html2Canvas: window.Html2Canvas,\r\n    useCORS: true,\r\n    foreignObjectRendering: true,\r\n    beforeCreateImage: undefined,\r\n    beforeCreateCanvas: undefined,\r\n  }, options)\r\n}\r\n\r\nfunction init() {\r\n  const maskExits = document.querySelectorAll('.ql-screenshot-mask')\r\n  if (maskExits) {\r\n    maskExits.forEach(item => item && item.remove())\r\n  }\r\n  // 创建截图图层\r\n  const wrapper = document.createElement('div')\r\n  wrapper.classList.add('ql-screenshot-wrapper')\r\n  const mask = document.createElement('div')\r\n  mask.className = 'ql-screenshot-mask'\r\n  const cutter = document.createElement('div')\r\n  cutter.className = 'ql-screenshot-cutter'\r\n  const coordinate = document.createElement('p')\r\n  coordinate.className = 'ql-screenshot-coordinate'\r\n  cutter.appendChild(coordinate)\r\n  wrapper.appendChild(mask)\r\n  wrapper.appendChild(cutter)\r\n  document.body.appendChild(wrapper)\r\n  document.body.style.overflow = 'hidden'\r\n  return { wrapper, mask, cutter, coordinate }\r\n}\r\n\r\nasync function renderImage(\r\n  Html2Canvas: typeof html2canvas,\r\n  html2canvasOptions: Partial<Html2CanvasOptions>,\r\n  rect: DOMRect,\r\n  options?: Omit<ScreenShotOptions, 'Html2Canvas' | keyof Html2CanvasOptions>,\r\n) {\r\n  if (options && options.beforeCreateCanvas) {\r\n    await options.beforeCreateCanvas()\r\n  }\r\n  const canvas: CanvasImageSource = await Html2Canvas(document.body, html2canvasOptions)\r\n  // 当前canvas为body全局截图，从当前截图中截取想要的部分重新绘制转成base64插入富文本\r\n  let cropCanvas: HTMLCanvasElement | string = document.createElement('canvas')\r\n  cropCanvas.width = rect.width\r\n  cropCanvas.height = rect.height\r\n  const cropCanvasCtx = cropCanvas.getContext('2d')\r\n  cropCanvasCtx.drawImage(\r\n    canvas,\r\n    rect.x + window.scrollX,\r\n    rect.y + window.scrollY,\r\n    rect.width,\r\n    rect.height,\r\n    0,\r\n    0,\r\n    rect.width,\r\n    rect.height,\r\n  )\r\n  if (options && options.beforeCreateImage) {\r\n    cropCanvas = await options.beforeCreateImage(cropCanvas)\r\n  }\r\n  return typeof cropCanvas === 'string' ? cropCanvas : cropCanvas.toDataURL()\r\n}\r\n\r\nexport function Screenshot(this: Toolbar & ScreenShotOptionsInQuill) {\r\n  this.quill.options.screenshot = resolveOptions(this.quill.options.screenshot)\r\n  const options = this.quill.options.screenshot\r\n  // @ts-ignore\r\n  const { Html2Canvas, beforeCreateImage, beforeCreateCanvas, ...html2CanvasOptions } = options\r\n  if (!Html2Canvas) {\r\n    throw new Error('ScreenShot module requires html2canvas. Please include the library on the page before FluentEditor.')\r\n  }\r\n  const range = this.quill.getSelection(true)\r\n  const { wrapper, mask, cutter, coordinate } = init()\r\n  const status: {\r\n    leftClickLockFlag: boolean\r\n    start?: {\r\n      x: number\r\n      y: number\r\n    }\r\n  } = {\r\n    leftClickLockFlag: false,\r\n    start: undefined,\r\n  }\r\n\r\n  const removeContextmenu = (event: Event) => {\r\n    event.preventDefault()\r\n    wrapper.remove()\r\n    document.removeEventListener('contextmenu', removeContextmenu)\r\n  }\r\n  const afterShotCtrl = async (event: MouseEvent) => {\r\n    document.removeEventListener('mousedown', toggleRect)\r\n    Object.assign(document.body.style, { overflow: null })\r\n    const cutterRect = cutter.getBoundingClientRect()\r\n    const target = event.target as HTMLElement\r\n    wrapper.remove()\r\n    if (target && target.className === 'ql-screenshot-confirm') {\r\n      const image = await renderImage(Html2Canvas, html2CanvasOptions, cutterRect, { beforeCreateCanvas, beforeCreateImage })\r\n\r\n      const delta = new Delta()\r\n        .retain(range.index)\r\n        .delete(range.length)\r\n        .insert({ image })\r\n      this.quill.updateContents(delta, Quill.sources.USER)\r\n      this.quill.setSelection(range.index + 1, Quill.sources.SILENT)\r\n    }\r\n    status.start = undefined\r\n  }\r\n  const drawRect = (event: MouseEvent) => {\r\n    // 通过鼠标移动描绘截图图层\r\n    const startX = status.start.x\r\n    const startY = status.start.y\r\n    const endX = event.clientX\r\n    const endY = event.clientY\r\n    const width = Math.abs(endX - startX)\r\n    const height = Math.abs(endY - startY)\r\n    const top = startY < endY ? startY : endY\r\n    const left = startX < endX ? startX : endX\r\n    const bottom = window.innerHeight - height - top\r\n    const right = window.innerWidth - width - left\r\n\r\n    const maskPath = `\r\n      linear-gradient(to top, #fff, #fff) top / 100% ${top}px,\r\n      linear-gradient(to bottom, #fff, #fff) bottom /100% ${bottom}px,\r\n      linear-gradient(to left, #fff, #fff) left / ${left}px 100%,\r\n      linear-gradient(to right, #fff, #fff) right / ${right}px 100%\r\n    `\r\n    Object.assign(cutter.style, {\r\n      width: `${width}px`,\r\n      height: `${height}px`,\r\n      left: `${left}px`,\r\n      top: `${top}px`,\r\n    })\r\n    Object.assign(mask.style, {\r\n      'mask': maskPath,\r\n      '-webkit-mask-repeat': 'no-repeat',\r\n    })\r\n    coordinate.textContent = `${width}, ${height}`\r\n  }\r\n  const toggleRect = (event: MouseEvent) => {\r\n    // 右键取消截图操作\r\n    if (event.button === 2) {\r\n      document.removeEventListener('mousemove', drawRect)\r\n      document.removeEventListener('mousedown', toggleRect)\r\n      console.log('right')\r\n      document.addEventListener('contextmenu', removeContextmenu)\r\n      return\r\n    }\r\n    if (!status.leftClickLockFlag) {\r\n      if (status.start) {\r\n        // 如果有起点，则当前触发坐标为终点，移除监听事件并添加确认和取消按钮\r\n        document.removeEventListener('mousemove', drawRect)\r\n        const doneBtn = document.createElement('div')\r\n        doneBtn.innerHTML = `<div class=\"ql-screenshot-confirm\"></div><div class=\"ql-screenshot-cancel\"></div>`\r\n        doneBtn.className = 'ql-screenshot-done'\r\n        doneBtn.addEventListener('click', afterShotCtrl)\r\n        coordinate.remove()\r\n        cutter.appendChild(doneBtn)\r\n        status.leftClickLockFlag = true\r\n      }\r\n      else {\r\n        // 无起点则设置起点坐标，监听鼠标移动\r\n        status.start = { x: event.clientX, y: event.clientY }\r\n        document.addEventListener('mousemove', drawRect)\r\n      }\r\n    }\r\n  }\r\n  document.addEventListener('mousedown', toggleRect)\r\n}\r\nScreenshot.toolName = 'screenshot'\r\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/fluent-editor",
-  "version": "3.19.2",
+  "version": "3.20.0",
   "description": "A rich text editor based on Quill 2.0, which extends rich modules and formats on the basis of Quill. It's powerful and out-of-the-box.",
   "homepage": "https://opentiny.github.io/fluent-editor/",
   "keywords": [
@@ -48,7 +48,7 @@
     "commander": "^6.2.0",
     "glob": "^11.0.0",
     "highlight.js": "^10.2.0",
-    "html2canvas": "^1.0.0-rc.7",
+    "html2canvas": "^1.4.1",
     "jest": "^26.6.3",
     "prettier": "^2.3.0",
     "sass": "^1.47.0",

package/theme/style.css

@@ -3440,6 +3440,80 @@ li.unchecked > .ql-ui {
 :fullscreen {
   background-color: white !important;
 }
+.ql-screenshot-wrapper {
+  --ql-screenshot-color-bg: rgba(0, 0, 0, 0.5);
+  --ql-screenshot-color-confirm: #2196F3;
+  --ql-screenshot-color-cancel: #ef1749;
+}
+.ql-screenshot-wrapper .ql-screenshot-cancel,
+.ql-screenshot-wrapper .ql-screenshot-confirm {
+  position: relative;
+  height: 16px;
+  width: 16px;
+  cursor: pointer;
+}
+.ql-screenshot-wrapper .ql-screenshot-confirm {
+  background-color: var(--ql-screenshot-color-confirm);
+}
+.ql-screenshot-wrapper .ql-screenshot-confirm::after {
+  content: "";
+  position: absolute;
+  left: 6px;
+  top: 3px;
+  width: 5px;
+  height: 10px;
+  border: solid #fff;
+  border-width: 0 3px 3px 0;
+  transform: rotate(45deg);
+}
+.ql-screenshot-wrapper .ql-screenshot-cancel {
+  background-color: var(--ql-screenshot-color-cancel);
+}
+.ql-screenshot-wrapper .ql-screenshot-cancel::after {
+  content: "";
+  position: absolute;
+  left: 7px;
+  top: 2px;
+  width: 2px;
+  height: 12px;
+  border: solid #fff;
+  border-width: 0 3px 3px 0;
+  transform: rotate(45deg);
+}
+.ql-screenshot-wrapper .ql-screenshot-cancel::before {
+  content: "";
+  position: absolute;
+  left: 7px;
+  top: 2px;
+  width: 2px;
+  height: 12px;
+  border: solid #fff;
+  border-width: 0 3px 3px 0;
+  transform: rotate(-45deg);
+}
+.ql-screenshot-mask {
+  position: fixed;
+  inset: 0;
+  background-color: var(--ql-screenshot-color-bg);
+  z-index: 50;
+}
+.ql-screenshot-cutter {
+  position: fixed;
+  border: 1px solid #fff;
+  z-index: 50;
+}
+.ql-screenshot-coordinate, .ql-screenshot-done {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  font-size: 14px;
+  white-space: nowrap;
+}
+.ql-screenshot-done {
+  display: flex;
+  border-top: 1px solid #333;
+  border-left: 1px solid #333;
+}
 .ql-counter {
   width: 100%;
   bottom: 0;
@@ -3666,22 +3740,22 @@ li.unchecked > .ql-ui {
 .ql-toolbar.toolbar-bottom {
   border-top: 0;
 }
-.ql-toolbar .ql-active,
-.ql-toolbar .ql-picker-label.ql-active,
-.ql-toolbar .ql-picker-label:hover,
-.ql-toolbar .ql-picker-item.ql-selected,
-.ql-toolbar .ql-picker-item:hover,
-.ql-toolbar button.ql-active,
-.ql-toolbar button:hover {
+.ql-toolbar.ql-snow .ql-active,
+.ql-toolbar.ql-snow .ql-picker-label.ql-active,
+.ql-toolbar.ql-snow .ql-picker-label:hover,
+.ql-toolbar.ql-snow .ql-picker-item.ql-selected,
+.ql-toolbar.ql-snow .ql-picker-item:hover,
+.ql-toolbar.ql-snow button.ql-active,
+.ql-toolbar.ql-snow button:hover {
   color: #5e7ce0;
 }
-.ql-toolbar .ql-active .icon-triangle-down,
-.ql-toolbar .ql-picker-label.ql-active .icon-triangle-down,
-.ql-toolbar .ql-picker-label:hover .icon-triangle-down,
-.ql-toolbar .ql-picker-item.ql-selected .icon-triangle-down,
-.ql-toolbar .ql-picker-item:hover .icon-triangle-down,
-.ql-toolbar button.ql-active .icon-triangle-down,
-.ql-toolbar button:hover .icon-triangle-down {
+.ql-toolbar.ql-snow .ql-active .icon-triangle-down,
+.ql-toolbar.ql-snow .ql-picker-label.ql-active .icon-triangle-down,
+.ql-toolbar.ql-snow .ql-picker-label:hover .icon-triangle-down,
+.ql-toolbar.ql-snow .ql-picker-item.ql-selected .icon-triangle-down,
+.ql-toolbar.ql-snow .ql-picker-item:hover .icon-triangle-down,
+.ql-toolbar.ql-snow button.ql-active .icon-triangle-down,
+.ql-toolbar.ql-snow button:hover .icon-triangle-down {
   border-top-color: #5e7ce0;
 }
 .ql-toolbar .ql-picker-item:focus,