@team-monolith/cds 1.122.0 → 1.122.2

package/dist/patterns/LexicalEditor/components/InsertImageDialog/InsertImageDialog.js

@@ -13,15 +13,13 @@ import { ImageNotAvailable } from "../../nodes/ImageNode/ImageNotAvailable";
 import styled from "@emotion/styled";
 import { debounce } from "lodash";
 import { useTranslation } from "react-i18next";
-import { getTexts } from "../../../../texts";
-import { isDataUrl } from "../../utils/url";
 export function InsertImageDialog(props) {
+    var _a;
     const { title, open, onClose, imageProps, onChange, onDelete, shouldReset } = props;
     const theme = useTheme();
     const { t } = useTranslation();
-    const { control, setValue, watch, reset, handleSubmit, subscribe, formState: { errors }, } = useForm({
+    const { control, setValue, watch, reset, handleSubmit, subscribe } = useForm({
         defaultValues: imageProps !== null && imageProps !== void 0 ? imageProps : { src: "", altText: "" },
-        mode: "all",
     });
     const handleOnClose = () => {
         if (shouldReset) {
@@ -36,7 +34,7 @@ export function InsertImageDialog(props) {
     // src는 입력 필드에 실시간으로 반영되는 값이고 previewSrc는 입력이 끝난 뒤 미리보기 영역에 표시할 URL입니다.
     // 두 값은 시멘틱이 다르므로 독립적인 state로 관리합니다.
     const [previewSrc, setPreviewSrc] = useState(watch("src"));
-    const isDisabled = watch("src") === "" || Boolean(errors.src);
+    const isDisabled = watch("src") === "";
     const debouncedSetPreviewSrc = useMemo(() => debounce((value) => setPreviewSrc(value), 500), []);
     useEffect(() => {
         const unsubscribe = subscribe({
@@ -53,15 +51,8 @@ export function InsertImageDialog(props) {
             e.stopPropagation();
             handleSubmit(onSubmit)();
         }, disableIconPadding: true, children: [_jsx(StyledAlertDialogTitle, { onClose: handleOnClose, children: title }), _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(FileSelectInput, { onChange: (value) => {
-                                setValue("src", value, {
-                                    shouldDirty: true,
-                                    shouldValidate: true,
-                                });
-                            }, fileType: "image" }), _jsx(FormInput, { name: "src", control: control, placeholder: "https://www.pexels.com/photo/n-2848492", size: "medium", label: "URL", fullWidth: true, startIcon: _jsx(LinkIcon, {}), rules: {
-                                validate: (value) => value === "" || !isDataUrl(value)
-                                    ? true
-                                    : getTexts(t, "errorImageDataUrlNotAllowed"),
-                            } }), previewSrc && (_jsx(ImagePreview, { src: previewSrc, alt: watch("altText"), fallback: _jsx(ImageNotAvailable, {}) })), _jsx(FormInput, { name: "altText", control: control, placeholder: t("삽입하는 이미지에 관한 설명"), size: "medium", label: t("대체 텍스트"), fullWidth: true })] }) }), _jsxs(AlertDialogActions, { children: [_jsx(Button, { type: "submit", fullWidth: true, label: t("삽입하기"), size: "medium", color: "primary", disabled: isDisabled }), onDelete && (_jsx(Button, { color: "danger", size: "medium", fullWidth: true, label: t("삭제하기"), onClick: onDelete }))] })] }));
+                                setValue("src", value);
+                            }, fileType: "image" }), _jsx(FormInput, { name: "src", control: control, placeholder: "https://www.pexels.com/photo/n-2848492", size: "medium", label: "URL", fullWidth: true, startIcon: _jsx(LinkIcon, {}) }), previewSrc && (_jsx(ImagePreview, { src: previewSrc, alt: watch("altText"), fallback: _jsx(ImageNotAvailable, {}) })), _jsx(FormInput, { name: "altText", control: control, placeholder: t("삽입하는 이미지에 관한 설명"), size: "medium", label: t("대체 텍스트"), fullWidth: true })] }) }), _jsxs(AlertDialogActions, { children: [_jsx(Button, { type: "submit", fullWidth: true, label: t("삽입하기"), size: "medium", color: "primary", disabled: isDisabled }), onDelete && (_jsx(Button, { color: "danger", size: "medium", fullWidth: true, label: t("삭제하기"), onClick: onDelete }))] })] }, open ? (_a = imageProps === null || imageProps === void 0 ? void 0 : imageProps.src) !== null && _a !== void 0 ? _a : "" : undefined));
 }
 const StyledAlertDialog = styled(AlertDialog) `
   gap: 16px;

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

@@ -1,12 +1,3 @@
-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());
-    });
-};
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -16,133 +7,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
  */
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $insertNodeToNearestRoot, mergeRegister } from "@lexical/utils";
-import { $createRangeSelection, $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, createCommand, DRAGOVER_COMMAND, DRAGSTART_COMMAND, DROP_COMMAND, } from "lexical";
-import { useContext, useEffect, useRef } from "react";
-import { useTranslation } from "react-i18next";
+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 { CdsContext } from "../../../../CdsProvider";
-import { getTexts } from "../../../../texts";
-import { isDataUrl } from "../../utils/url";
+import { useImageNodeTransform } from "./imageNodeTransform";
 const CAN_USE_DOM = typeof window !== "undefined" &&
     typeof window.document !== "undefined" &&
     typeof window.document.createElement !== "undefined";
 const getDOMSelection = (targetWindow) => CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
-function parseBase64Image(dataUrl) {
-    var _a;
-    const commaIndex = dataUrl.indexOf(",");
-    if (commaIndex < 0) {
-        return null;
-    }
-    const metadata = dataUrl.slice("data:".length, commaIndex);
-    const base64 = dataUrl.slice(commaIndex + 1).trim();
-    const metadataParts = metadata.split(";");
-    const mimeType = (_a = metadataParts[0]) !== null && _a !== void 0 ? _a : "";
-    const isBase64Encoded = metadataParts.includes("base64");
-    if (!isBase64Encoded || !mimeType.startsWith("image/") || base64 === "") {
-        return null;
-    }
-    return { base64, mimeType };
-}
-function createFileFromParsedDataUrl(parsed) {
-    if (!CAN_USE_DOM || typeof File === "undefined" || !("atob" in window)) {
-        return null;
-    }
-    try {
-        const binaryString = window.atob(parsed.base64.replace(/\s/g, ""));
-        const length = binaryString.length;
-        const bytes = new Uint8Array(length);
-        for (let index = 0; index < length; index += 1) {
-            bytes[index] = binaryString.charCodeAt(index);
-        }
-        const extension = getExtensionFromMimeType(parsed.mimeType);
-        const filename = `pasted-image-${Date.now()}.${extension}`;
-        return new File([bytes], filename, { type: parsed.mimeType });
-    }
-    catch (_a) {
-        return null;
-    }
-}
-function getExtensionFromMimeType(mimeType) {
-    const match = mimeType.match(/\/([a-zA-Z0-9.+-]+)/);
-    if (!match || match.length < 2) {
-        return "png";
-    }
-    const subtype = match[1];
-    return subtype.includes("+") ? subtype.split("+")[0] : subtype;
-}
 export const INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND");
 export function ImagesPlugin({ captionsEnabled, }) {
-    var _a, _b;
     const [editor] = useLexicalComposerContext();
-    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());
+    const imageNodeTransformHandler = useImageNodeTransform(editor);
     useEffect(() => {
         if (!editor.hasNodes([ImageNode])) {
             throw new Error("ImagesPlugin: ImageNode not registered on editor");
         }
-        return mergeRegister(editor.registerNodeTransform(ImageNode, (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);
-            const parsedDataUrl = parseBase64Image(src);
-            if (!parsedDataUrl) {
-                processingNodesRef.current.delete(key);
-                node.remove();
-                showFileError === null || showFileError === void 0 ? void 0 : showFileError("upload", getTexts(t, "errorImageDataUrlNotAllowed"));
-                return;
-            }
-            if (!uploadByFile) {
-                processingNodesRef.current.delete(key);
-                node.remove();
-                showFileError === null || showFileError === void 0 ? void 0 : showFileError("upload", getTexts(t, "errorImageDataUrlNotAllowed"));
-                return;
-            }
-            void (() => __awaiter(this, void 0, void 0, function* () {
-                const file = createFileFromParsedDataUrl(parsedDataUrl);
-                if (!file) {
-                    processingNodesRef.current.delete(key);
-                    showFileError === null || showFileError === void 0 ? void 0 : showFileError("upload", getTexts(t, "errorImageDataUrlNotAllowed"));
-                    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", getTexts(t, "errorImageBase64UploadFailed"));
-                    editor.update(() => {
-                        const currentNode = $getNodeByKey(key);
-                        if ($isImageNode(currentNode)) {
-                            currentNode.remove();
-                        }
-                    });
-                }
-                finally {
-                    processingNodesRef.current.delete(key);
-                }
-            }))();
-        }), editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
+        return mergeRegister(...(imageNodeTransformHandler
+            ? [editor.registerNodeTransform(ImageNode, imageNodeTransformHandler)]
+            : []), editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
             const imageNode = $createImageNode(payload);
             // lexical의 원본코드에서는 이미지 노드를 텍스트 노드 안에 삽입하고 있었습니다.
             // 이 때문에 이미지 노드 아래에 불필요한 텍스트 라인이 생성됩니다.
@@ -152,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, showFileError, t, uploadByFile]);
+    }, [captionsEnabled, editor, imageNodeTransformHandler]);
     return null;
 }
 const TRANSPARENT_IMAGE = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";

package/dist/patterns/LexicalEditor/utils/url.d.ts

@@ -6,5 +6,4 @@
  *
  */
 export declare function sanitizeUrl(url: string): string;
-export declare function isDataUrl(url: string): boolean;
 export declare function validateUrl(url: string): boolean;

package/dist/patterns/LexicalEditor/utils/url.js

@@ -12,7 +12,6 @@ const SUPPORTED_URL_PROTOCOLS = new Set([
     "sms:",
     "tel:",
 ]);
-const DATA_URL_PATTERN = /^data:[^,]+,/i;
 export function sanitizeUrl(url) {
     try {
         const parsedUrl = new URL(url);
@@ -26,9 +25,6 @@ export function sanitizeUrl(url) {
     }
     return url;
 }
-export function isDataUrl(url) {
-    return DATA_URL_PATTERN.test(url);
-}
 // Source: https://stackoverflow.com/a/8234912/2013580
 const urlRegExp = new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/);
 export function validateUrl(url) {

package/dist/texts.d.ts

@@ -2,8 +2,6 @@ import { TFunction } from "i18next";
 type TranslationMap = {
     placeholderEnterHere: string;
     errorFileTooLarge: string;
-    errorImageDataUrlNotAllowed: string;
-    errorImageBase64UploadFailed: string;
     descriptionDefaultInputText: string;
     exampleEnterHere: string;
     placeholderEvaluationItem: string;

package/dist/texts.js

@@ -1,8 +1,6 @@
 const TRANSLATION_TEXT = {
     placeholderEnterHere: (t) => t("여기에 입력하세요."),
     errorFileTooLarge: (t) => t("용량이 너무 큽니다. 1GB 이하의 파일을 선택해 주세요."),
-    errorImageDataUrlNotAllowed: (t) => t("데이터 URL 기반 이미지는 지원되지 않습니다. 파일 업로드를 사용해 주세요."),
-    errorImageBase64UploadFailed: (t) => t("이미지를 업로드하지 못했습니다. 다시 시도해 주세요."),
     descriptionDefaultInputText: (t) => t("입력 칸에 기본으로 노출되는 텍스트입니다."),
     exampleEnterHere: (t) => t("예) 여기에 입력하세요."),
     placeholderEvaluationItem: (t) => t("평가 항목을 입력하세요."),

package/package.json

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