fix(custom-uploader): fail 状态插入 \n 会破坏 表格数据结构 使用空格占位 (#345)

Author: vaebe

packages/docs/fluent-editor/demos/file-upload-handle.vue

@@ -2,6 +2,8 @@
 import type { Range } from '@opentiny/fluent-editor'
 import type FluentEditor from '@opentiny/fluent-editor'
 import { onMounted, ref } from 'vue'
+import 'quill-table-up/index.css'
+import 'quill-table-up/table-creator.css'
 
 let editor: FluentEditor
 const editorRef = ref<HTMLElement>()
@@ -12,30 +14,51 @@ const TOOLBAR_CONFIG = [
   [{ list: 'ordered' }, { list: 'bullet' }],
   ['clean'],
   ['file', 'image', 'video'],
+  [{ 'table-up': [] }],
 ]
 
 onMounted(() => {
   // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
-  import('@opentiny/fluent-editor').then(({ default: FluentEditor }) => {
-    if (!editorRef.value) return
-    const Delta = FluentEditor.import('delta')
-    editor = new FluentEditor(editorRef.value, {
-      theme: 'snow',
-      modules: {
-        toolbar: TOOLBAR_CONFIG,
-        uploader: {
-          // only allow image
-          mimetypes: ['image/*'],
-          handler(range: Range, files: File[]) {
-            return files.map((_, i) => i % 2 === 0 ? false : 'https://developer.mozilla.org/static/media/chrome.5e791c51c323fbb93c31.svg')
+  Promise.all([
+    import('@opentiny/fluent-editor'),
+    import('quill-table-up'),
+  ]).then(
+    ([
+      { default: FluentEditor, generateTableUp },
+      { defaultCustomSelect, TableMenuContextmenu, TableSelection, TableUp },
+    ]) => {
+      if (!editorRef.value) {
+        return
+      }
+
+      FluentEditor.register({ 'modules/table-up': generateTableUp(TableUp) }, true)
+
+      const Delta = FluentEditor.import('delta')
+      editor = new FluentEditor(editorRef.value, {
+        theme: 'snow',
+        modules: {
+          'toolbar': TOOLBAR_CONFIG,
+          'uploader': {
+            // only allow image
+            mimetypes: ['image/*'],
+            handler(range: Range, files: File[]) {
+              return files.map((_, i) => i % 2 === 0 ? false : 'https://developer.mozilla.org/static/media/chrome.5e791c51c323fbb93c31.svg')
+            },
+            fail(file: File, range: Range) {
+              this.quill.updateContents(new Delta().retain(range.index).delete(1).insert({ image: 'https://developer.mozilla.org/static/media/edge.741dffaf92fcae238b84.svg' }))
+            },
           },
-          fail(file: File, range: Range) {
-            this.quill.updateContents(new Delta().retain(range.index).delete(1).insert({ image: 'https://developer.mozilla.org/static/media/edge.741dffaf92fcae238b84.svg' }))
+          'table-up': {
+            customSelect: defaultCustomSelect,
+            selection: TableSelection,
+            selectionOptions: {
+              tableMenu: TableMenuContextmenu,
+            },
           },
         },
-      },
-    })
-  })
+      })
+    },
+  )
 })
 </script>
 

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

@@ -52,6 +52,7 @@ export class FileUploader extends Uploader {
   async upload(range: Range, files: FileList | File[]) {
     const uploads = []
     const fails = []
+
     for (const file of Array.from(files)) {
       if (this.validateFile(file)) {
         uploads.push(file)
@@ -60,6 +61,7 @@ export class FileUploader extends Uploader {
         fails.push(file)
       }
     }
+
     const result = await this.options.handler.call(this, range, uploads)
     const updateDelta = result.reduce((delta, url, i) => {
       if (isString(url)) {
@@ -75,15 +77,18 @@ export class FileUploader extends Uploader {
         }
       }
       else {
-        delta.insert('\n')
+        delta.insert(' ')
       }
       return delta
     }, new Delta().retain(range.index).delete(range.length))
+
     this.quill.updateContents(updateDelta, Quill.sources.USER)
     this.quill.setSelection(range.index + result.length, Quill.sources.SILENT)
+
     for (const file of fails) {
       this.options.fail.call(this, file, range)
     }
+
     for (const [i, res] of result.entries()) {
       if (isString(res)) {
         this.options.success.call(this, files[i], { index: range.index + i, length: 0 })