feat: tinymce 에디터 작업

apps/cs/src/entities/editor/lib/blob-to-base64.ts

@@ -0,0 +1,10 @@
+export const blobToBase64 = (blob: Blob): Promise<string> => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const base64 = reader.result as string;
+      resolve(base64.split(",")[1] || "");
+    };
+    reader.readAsDataURL(blob);
+  });
+};

apps/cs/src/entities/editor/lib/generate-file-info.ts

@@ -0,0 +1,16 @@
+import { blobToBase64 } from "./blob-to-base64";
+
+export const generateFileInfo = async (blobInfo: {
+  blob: () => Blob;
+  filename: () => string;
+}) => {
+  const blob = blobInfo.blob();
+  const base64 = await blobToBase64(blob);
+  return {
+    fieldName: `${blob.type.split("/")[1]}`,
+    fileType: blob.type,
+    fileBase64: base64,
+    originalName: blobInfo.filename(),
+    size: blob.size,
+  };
+};

apps/cs/src/entities/editor/ui/editor.tsx

@@ -1,66 +1,56 @@
-import { Editor as TinyEditor, type IAllProps } from "@tinymce/tinymce-react";
+import { useRef } from "react";
+import {
+  Editor as TinyEditor,
+  type Editor as TinyEditorInstance,
+  type IAllProps,
+} from "@tinymce/tinymce-react";
 import { editorBaseConfig as baseConfig } from "../model/editor-base-config";
+import { generateFileInfo } from "../lib/generate-file-info";
 import { EditorApi } from "../api/editor-service";
 
 const Editor = ({ ...props }: IAllProps) => {
+  const editorRef = useRef<TinyEditorInstance | null>(null);
+
+  const imagesUploadHandler = (blobInfo: {
+    blob: () => Blob;
+    filename: () => string;
+  }) => {
+    return new Promise(async (resolve) => {
+      const fileInfo = await generateFileInfo(blobInfo);
+      const data = await EditorApi.uploadImage(fileInfo);
+      resolve(data.url);
+    });
+  };
+
+  const filePickerCallback = (
+    callback: (base64: string, meta: { title: string }) => void,
+  ) => {
+    const input = document.createElement("input");
+    input.setAttribute("type", "file");
+    input.setAttribute("accept", "image/*");
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = async () => {
+        const base64 = reader.result as string;
+        callback(base64, { title: file.name });
+      };
+      reader.readAsDataURL(file);
+    };
+    input.click();
+  };
+
   return (
     <TinyEditor
       {...baseConfig}
+      onInit={(_: unknown, editor: TinyEditorInstance) => {
+        editorRef.current = editor;
+      }}
       init={{
         ...baseConfig.init,
-        images_upload_handler: (blobInfo: {
-          blob: () => Blob;
-          filename: () => string;
-        }) =>
-          new Promise(async (resolve) => {
-            const blob = blobInfo.blob();
-            const fileInfo = {
-              fieldName: `${blob.type.split("/")[1]}`,
-              fileType: blob.type,
-              fileBase64: "",
-              originalName: blobInfo.filename(),
-              size: blob.size,
-            };
-
-            const reader = new FileReader();
-            reader.onload = async () => {
-              const base64 = reader.result as string;
-              fileInfo.fileBase64 = base64.split(",")[1] || "";
-
-              const data = await EditorApi.uploadImage(fileInfo);
-              resolve(data.url);
-            };
-            reader.readAsDataURL(blob);
-          }),
-        file_picker_callback() {
-          const input = document.createElement("input");
-          input.setAttribute("type", "file");
-          input.setAttribute("accept", "image/*");
-
-          // input.addEventListener("change", (e) => {
-          //   const file = e.target.files[0];
-
-          //   const reader = new FileReader();
-          //   reader.addEventListener("load", () => {
-          //     /*
-          //       Note: Now we need to register the blob in TinyMCEs image blob
-          //       registry. In the next release this part hopefully won't be
-          //       necessary, as we are looking to handle it internally.
-          //     */
-          //     const id = "blobid" + new Date().getTime();
-          //     const blobCache = tinymce.activeEditor.editorUpload.blobCache;
-          //     const base64 = reader.result.split(",")[1];
-          //     const blobInfo = blobCache.create(id, file, base64);
-          //     blobCache.add(blobInfo);
-
-          //     /* call the callback and populate the Title field with the file name */
-          //     cb(blobInfo.blobUri(), { title: file.name });
-          //   });
-          //   reader.readAsDataURL(file);
-          // });
-
-          input.click();
-        },
+        images_upload_handler: imagesUploadHandler,
+        file_picker_callback: filePickerCallback,
       }}
       {...props}
     />