feat(custom-image): 增加 allowInvalid 用于支持特定场景（比如：Electron）需要返回原始 url (#354)

* feat(custom-image): 增加 allowInvalid 用于支持特定场景（比如：Electron）需要返回原始 url

* docs: add image options doc

* chore: release v4.0.0-alpha.5

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: kagol

packages/docs/fluent-editor/docs/demo/file-upload.md

@@ -32,3 +32,81 @@
 
 > 上传文件被 `mimetypes` 或 `maxSize` 筛选而上传失败的文件不会出现在 `handler` 回调参数中。
 > 若文件是被`mimetypes` 或 `maxSize` 筛选而上传失败，fail 回调中的 `range` 则为上传初始位置，而不是上传失败的位置。
+
+## 图片(image)模块的 Options
+
+```typescript
+const DefaultOptions = {
+  // 默认情况下，`file://` 格式的本地文件路径在浏览器环境无法读取，因此会被转换成 `//:0`，但是在一些特殊的场景下（比如：Electron），需要获取到图片的原始路径，进行后续的上传处理
+  // 注意：该选项一旦设置为 true，本地磁盘路径会暴露出去，这可能会带来安全风险，请确保你了解相关的安全隐患
+  allowInvalidUrl: false,
+
+  specs: [
+    ImageSpec,
+  ],
+  overlay: {
+    className: 'blot-formatter__overlay',
+    style: {
+      position: 'absolute',
+      boxSizing: 'border-box',
+      border: '1px dashed #444',
+    },
+  },
+  toolbar: {
+    mainClassName: 'blot-formatter__toolbar',
+    mainStyle: {
+      position: 'absolute',
+      top: '-12px',
+      right: '0',
+      left: '0',
+      height: '0',
+      minWidth: '120px',
+      font: '12px/1.0 Arial, Helvetica, sans-serif',
+      textAlign: 'center',
+      color: '#333',
+      boxSizing: 'border-box',
+      cursor: 'default',
+      zIndex: '1',
+    },
+    buttonClassName: 'blot-formatter__toolbar-button',
+    addButtonSelectStyle: true,
+    buttonStyle: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '24px',
+      height: '24px',
+      background: 'white',
+      border: '1px solid #999',
+      verticalAlign: 'middle',
+      cursor: 'pointer',
+    },
+    svgStyle: {
+      display: 'inline-block',
+      width: '16px',
+      height: '16px',
+      background: 'white',
+      verticalAlign: 'middle',
+    },
+    buttons: {
+      'align-left': true,
+      'align-center': true,
+      'align-right': true,
+      'copy': true,
+      'download': true,
+    },
+  },
+  resize: {
+    handleClassName: 'blot-formatter__resize-handle',
+    handleStyle: {
+      position: 'absolute',
+      height: '12px',
+      width: '12px',
+      backgroundColor: 'white',
+      border: '1px solid #777',
+      boxSizing: 'border-box',
+      opacity: '0.80',
+    },
+  },
+}
+```

packages/fluent-editor/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/fluent-editor",
   "type": "module",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.5",
   "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.",
   "author": "OpenTiny Team",
   "license": "MIT",

packages/fluent-editor/src/modules/custom-image/blot-formatter.ts

@@ -27,6 +27,10 @@ export class BlotFormatter {
 
   constructor(public quill: FluentEditor, options: Partial<BlotFormatterOptions> = {}) {
     this.options = deepmerge({}, DefaultOptions, options, { arrayMerge: dontMerge })
+    if (options.allowInvalidUrl !== undefined) {
+      this.options.allowInvalidUrl = options.allowInvalidUrl
+    }
+    CustomImage.setOptions(this.options.allowInvalidUrl)
     this.currentSpec = null
     this.actions = []
     this.overlay = document.createElement('div')

packages/fluent-editor/src/modules/custom-image/image.ts

@@ -18,7 +18,13 @@ export class CustomImage extends Embed {
   static blotName = 'image'
   static tagName = 'IMG'
   static ID_SEED = 0
+  static allowInvalidUrl: boolean = false
   declare domNode: HTMLElement
+
+  static setOptions(allowInvalidUrl: boolean) {
+    this.allowInvalidUrl = allowInvalidUrl
+  }
+
   static create(value: ImageValue) {
     const node = super.create(value) as HTMLElement
     const url = typeof value === 'string' ? value : value.src
@@ -69,7 +75,10 @@ export class CustomImage extends Embed {
   }
 
   static sanitize(url: string) {
-    return sanitize(url, ['http', 'https', 'blob', 'data']) ? url : '//:0'
+    if (sanitize(url, ['http', 'https', 'blob', 'data']) || this.allowInvalidUrl) {
+      return url
+    }
+    return '//:0'
   }
 
   static value(domNode: HTMLElement) {

packages/fluent-editor/src/modules/custom-image/options.ts

@@ -54,6 +54,7 @@ export interface BlotFormatterOptions {
   overlay: OverlayOptions
   resize: ResizeOptions
   toolbar: ToolbarOptions
+  allowInvalidUrl: boolean
 }
 
 export const LEFT_ALIGN = 'align-left'
@@ -62,6 +63,10 @@ export const RIGHT_ALIGN = 'align-right'
 export const COPY = 'copy'
 export const DOWNLOAD = 'download'
 const DefaultOptions: BlotFormatterOptions = {
+  // 默认情况下，`file://` 格式的本地文件路径在浏览器环境无法读取，因此会被转换成 `//:0`，但是在一些特殊的场景下（比如：Electron），需要获取到图片的原始路径，进行后续的上传处理
+  // 注意：该选项一旦设置为 true，本地磁盘路径会暴露出去，这可能会带来安全风险，请确保你了解相关的安全隐患
+  allowInvalidUrl: false,
+
   specs: [
     ImageSpec,
   ],