feat: 编辑器: 图片上传到 WAFileUpload, 正文使用链接

src/components/LexicalEditor/plugins/ImagesPlugin/index.tsx

@@ -42,6 +42,8 @@ import {DialogActions, DialogButtonsList} from '../../ui/Dialog';
 import FileInput from '../../ui/FileInput';
 import TextInput from '../../ui/TextInput';
 
+import { postUploadFileItem } from '../../../../actions/CommonActions.js';
+
 export type InsertImagePayload = Readonly<ImagePayload>;
 
 // const getDOMSelection = (targetWindow: Window | null): Selection | null =>
@@ -100,17 +102,28 @@ export function InsertImageUploadedDialogBody({
 
   const isDisabled = src === '';
 
-  const loadImage = (files: FileList | null) => {
-    const reader = new FileReader();
-    reader.onload = function () {
-      if (typeof reader.result === 'string') {
-        setSrc(reader.result);
-      }
-      return '';
-    };
-    if (files !== null) {
-      reader.readAsDataURL(files[0]);
+  const [uploading, setUploading] = useState(false);
+  const loadImage = async (files: FileList | null) => {
+    setUploading(true);
+    const _tmpFile = files[0];
+    const suffix = _tmpFile.name.slice(_tmpFile.name.lastIndexOf('.') + 1).toLocaleLowerCase();
+    const newName = `${Date.now().toString(32)}.${suffix}`;
+    const { file_url } = await postUploadFileItem(_tmpFile, newName);
+    setUploading(false);
+    if (file_url) {
+        setSrc(file_url);
+        return file_url;
     }
+    // const reader = new FileReader();
+    // reader.onload = function () {
+    //   if (typeof reader.result === 'string') {
+    //     setSrc(reader.result);
+    //   }
+    //   return '';
+    // };
+    // if (files !== null) {
+    //   reader.readAsDataURL(files[0]);
+    // }
   };
 
   return (
@@ -133,7 +146,7 @@ export function InsertImageUploadedDialogBody({
           data-test-id="image-modal-file-upload-btn"
           disabled={isDisabled}
           onClick={() => onClick({altText, src})}>
-          Confirm
+          {uploading ? 'Pls wait...' : 'Confirm'}
         </Button>
       </DialogActions>
     </>

src/components/LexicalEditor/plugins/InlineImagePlugin/index.tsx

@@ -45,6 +45,8 @@ import FileInput from '../../ui/FileInput';
 // import Select from '../../ui/Select';
 import TextInput from '../../ui/TextInput';
 
+import { postUploadFileItem } from '../../../../actions/CommonActions.js';
+
 export type InsertInlineImagePayload = Readonly<InlineImagePayload>;
 
 const getDOMSelection = (targetWindow: Window | null): Selection | null =>
@@ -78,17 +80,28 @@ export function InsertInlineImageDialog({
     setPosition(e.target.value as Position);
   };
 
-  const loadImage = (files: FileList | null) => {
-    const reader = new FileReader();
-    reader.onload = function () {
-      if (typeof reader.result === 'string') {
-        setSrc(reader.result);
-      }
-      return '';
-    };
-    if (files !== null) {
-      reader.readAsDataURL(files[0]);
+  const [uploading, setUploading] = useState(false);
+  const loadImage = async (files: FileList | null) => {
+    setUploading(true);
+    const _tmpFile = files[0];
+    const suffix = _tmpFile.name.slice(_tmpFile.name.lastIndexOf('.') + 1).toLocaleLowerCase();
+    const newName = `${Date.now().toString(32)}.${suffix}`;
+    const { file_url } = await postUploadFileItem(_tmpFile, newName);
+    setUploading(false);
+    if (file_url) {
+        setSrc(file_url);
+        return file_url;
     }
+    // const reader = new FileReader();
+    // reader.onload = function () {
+    //   if (typeof reader.result === 'string') {
+    //     setSrc(reader.result);
+    //   }
+    //   return '';
+    // };
+    // if (files !== null) {
+    //   reader.readAsDataURL(files[0]);
+    // }
   };
 
   useEffect(() => {