@team-monolith/cds 1.121.2 → 1.122.1

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/imageNodeTransform.d.ts

@@ -0,0 +1,8 @@
+import { LexicalEditor } from "lexical";
+import { ImageNode } from "../../nodes";
+/**
+ * ImageNode의 transform 핸들러를 반환하는 커스텀 훅
+ * base64 data URL을 감지하고 파일로 변환하여 업로드한 후 실제 URL로 교체합니다.
+ * uploadByFile이 없으면 null을 반환합니다.
+ */
+export declare function useImageNodeTransform(editor: LexicalEditor): ((node: ImageNode) => void) | null;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/imageNodeTransform.js

@@ -0,0 +1,100 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { $getNodeByKey } from "lexical";
+import { useContext, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { $isImageNode } from "../../nodes";
+import { CdsContext } from "../../../../CdsProvider";
+const DATA_URL_PATTERN = /^data:[^,]+,/i;
+function isDataUrl(url) {
+    return DATA_URL_PATTERN.test(url);
+}
+function getExtensionFromMimeType(mimeType) {
+    var _a;
+    const extension = (_a = mimeType.split("/")[1]) === null || _a === void 0 ? void 0 : _a.split("+")[0];
+    return extension || "png";
+}
+function convertDataUrlToFile(dataUrl) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const response = yield fetch(dataUrl);
+            const blob = yield response.blob();
+            const extension = getExtensionFromMimeType(blob.type);
+            const filename = `pasted-image-${Date.now()}.${extension}`;
+            return new File([blob], filename, { type: blob.type });
+        }
+        catch (_a) {
+            return null;
+        }
+    });
+}
+/**
+ * ImageNode의 transform 핸들러를 반환하는 커스텀 훅
+ * base64 data URL을 감지하고 파일로 변환하여 업로드한 후 실제 URL로 교체합니다.
+ * uploadByFile이 없으면 null을 반환합니다.
+ */
+export function useImageNodeTransform(editor) {
+    var _a, _b;
+    const cdsContext = useContext(CdsContext);
+    const uploadByFile = (_a = cdsContext.lexical) === null || _a === void 0 ? void 0 : _a.uploadByFile;
+    const showFileError = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.showFileError;
+    const { t } = useTranslation();
+    const processingNodesRef = useRef(new Set());
+    if (!uploadByFile) {
+        return null;
+    }
+    return (node) => {
+        const key = node.getKey();
+        const src = node.getSrc();
+        if (!isDataUrl(src)) {
+            processingNodesRef.current.delete(key);
+            return;
+        }
+        if (processingNodesRef.current.has(key)) {
+            return;
+        }
+        processingNodesRef.current.add(key);
+        (() => __awaiter(this, void 0, void 0, function* () {
+            const file = yield convertDataUrlToFile(src);
+            if (!file) {
+                processingNodesRef.current.delete(key);
+                showFileError === null || showFileError === void 0 ? void 0 : showFileError("upload", t("지원되지 않는 이미지입니다. 파일 업로드를 사용해 주세요."));
+                editor.update(() => {
+                    const currentNode = $getNodeByKey(key);
+                    if ($isImageNode(currentNode)) {
+                        currentNode.remove();
+                    }
+                });
+                return;
+            }
+            try {
+                const uploadedUrl = yield uploadByFile(file);
+                editor.update(() => {
+                    const currentNode = $getNodeByKey(key);
+                    if ($isImageNode(currentNode)) {
+                        currentNode.setSrc(uploadedUrl);
+                    }
+                });
+            }
+            catch (_a) {
+                showFileError === null || showFileError === void 0 ? void 0 : showFileError("upload", t("이미지를 업로드하지 못했습니다. 다시 시도해 주세요."));
+                editor.update(() => {
+                    const currentNode = $getNodeByKey(key);
+                    if ($isImageNode(currentNode)) {
+                        currentNode.remove();
+                    }
+                });
+            }
+            finally {
+                processingNodesRef.current.delete(key);
+            }
+        }))();
+    };
+}

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/index.js

@@ -10,6 +10,7 @@ import { $insertNodeToNearestRoot, mergeRegister } from "@lexical/utils";
 import { $createRangeSelection, $getSelection, $isNodeSelection, $setSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, createCommand, DRAGOVER_COMMAND, DRAGSTART_COMMAND, DROP_COMMAND, } from "lexical";
 import { useEffect } from "react";
 import { $createImageNode, $isImageNode, ImageNode, } from "../../nodes";
+import { useImageNodeTransform } from "./imageNodeTransform";
 const CAN_USE_DOM = typeof window !== "undefined" &&
     typeof window.document !== "undefined" &&
     typeof window.document.createElement !== "undefined";
@@ -17,11 +18,14 @@ const getDOMSelection = (targetWindow) => CAN_USE_DOM ? (targetWindow || window)
 export const INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND");
 export function ImagesPlugin({ captionsEnabled, }) {
     const [editor] = useLexicalComposerContext();
+    const imageNodeTransformHandler = useImageNodeTransform(editor);
     useEffect(() => {
         if (!editor.hasNodes([ImageNode])) {
             throw new Error("ImagesPlugin: ImageNode not registered on editor");
         }
-        return mergeRegister(editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
+        return mergeRegister(...(imageNodeTransformHandler
+            ? [editor.registerNodeTransform(ImageNode, imageNodeTransformHandler)]
+            : []), editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
             const imageNode = $createImageNode(payload);
             // lexical의 원본코드에서는 이미지 노드를 텍스트 노드 안에 삽입하고 있었습니다.
             // 이 때문에 이미지 노드 아래에 불필요한 텍스트 라인이 생성됩니다.
@@ -31,7 +35,7 @@ export function ImagesPlugin({ captionsEnabled, }) {
             $insertNodeToNearestRoot(imageNode);
             return true;
         }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(DRAGSTART_COMMAND, (event) => onDragStart(event), COMMAND_PRIORITY_HIGH), editor.registerCommand(DRAGOVER_COMMAND, (event) => onDragover(event), COMMAND_PRIORITY_LOW), editor.registerCommand(DROP_COMMAND, (event) => onDrop(event, editor), COMMAND_PRIORITY_HIGH));
-    }, [captionsEnabled, editor]);
+    }, [captionsEnabled, editor, imageNodeTransformHandler]);
     return null;
 }
 const TRANSPARENT_IMAGE = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.121.2",
+  "version": "1.122.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,