@team-monolith/cds 1.121.2 → 1.122.0

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

@@ -13,12 +13,15 @@ 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) {
     const { title, open, onClose, imageProps, onChange, onDelete, shouldReset } = props;
     const theme = useTheme();
     const { t } = useTranslation();
-    const { control, setValue, watch, reset, handleSubmit, subscribe } = useForm({
+    const { control, setValue, watch, reset, handleSubmit, subscribe, formState: { errors }, } = useForm({
         defaultValues: imageProps !== null && imageProps !== void 0 ? imageProps : { src: "", altText: "" },
+        mode: "all",
     });
     const handleOnClose = () => {
         if (shouldReset) {
@@ -33,7 +36,7 @@ export function InsertImageDialog(props) {
     // src는 입력 필드에 실시간으로 반영되는 값이고 previewSrc는 입력이 끝난 뒤 미리보기 영역에 표시할 URL입니다.
     // 두 값은 시멘틱이 다르므로 독립적인 state로 관리합니다.
     const [previewSrc, setPreviewSrc] = useState(watch("src"));
-    const isDisabled = watch("src") === "";
+    const isDisabled = watch("src") === "" || Boolean(errors.src);
     const debouncedSetPreviewSrc = useMemo(() => debounce((value) => setPreviewSrc(value), 500), []);
     useEffect(() => {
         const unsubscribe = subscribe({
@@ -50,8 +53,15 @@ 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);
-                            }, 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 }))] })] }));
+                                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 }))] })] }));
 }
 const StyledAlertDialog = styled(AlertDialog) `
   gap: 16px;

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

@@ -1,3 +1,12 @@
+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.
  *
@@ -7,21 +16,133 @@
  */
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 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 { $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 { $createImageNode, $isImageNode, ImageNode, } from "../../nodes";
+import { CdsContext } from "../../../../CdsProvider";
+import { getTexts } from "../../../../texts";
+import { isDataUrl } from "../../utils/url";
 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());
     useEffect(() => {
         if (!editor.hasNodes([ImageNode])) {
             throw new Error("ImagesPlugin: ImageNode not registered on editor");
         }
-        return mergeRegister(editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
+        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) => {
             const imageNode = $createImageNode(payload);
             // lexical의 원본코드에서는 이미지 노드를 텍스트 노드 안에 삽입하고 있었습니다.
             // 이 때문에 이미지 노드 아래에 불필요한 텍스트 라인이 생성됩니다.
@@ -31,7 +152,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, showFileError, t, uploadByFile]);
     return null;
 }
 const TRANSPARENT_IMAGE = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";

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

@@ -6,4 +6,5 @@
  *
  */
 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,6 +12,7 @@ const SUPPORTED_URL_PROTOCOLS = new Set([
     "sms:",
     "tel:",
 ]);
+const DATA_URL_PATTERN = /^data:[^,]+,/i;
 export function sanitizeUrl(url) {
     try {
         const parsedUrl = new URL(url);
@@ -25,6 +26,9 @@ 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,6 +2,8 @@ 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,6 +1,8 @@
 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.121.2",
+  "version": "1.122.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,