@team-monolith/cds 1.57.0 → 1.58.1

package/dist/patterns/LexicalEditor/components/FileSelectInput.d.ts

@@ -0,0 +1,11 @@
+interface FileSelectInputProps {
+    accept?: string;
+    onChange: (value: string) => void;
+}
+/**
+ * 파일 탐색기를 열어 특정 파일을 업로드 한 후, 그 경로를 onChange로 전달합니다.
+ * @param props
+ * @returns
+ */
+export declare function FileSelectInput(props: FileSelectInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,40 @@
+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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useRef } from "react";
+import { Button, CodleDesignSystemContext } from "../../..";
+import { UploadLineIcon } from "../../../icons";
+import styled from "@emotion/styled";
+/**
+ * 파일 탐색기를 열어 특정 파일을 업로드 한 후, 그 경로를 onChange로 전달합니다.
+ * @param props
+ * @returns
+ */
+export function FileSelectInput(props) {
+    const { onChange, accept } = props;
+    const inputRef = useRef(null);
+    const cdsContext = useContext(CodleDesignSystemContext);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", onClick: () => {
+                    var _a;
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                }, startIcon: _jsx(UploadLineIcon, {}) }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: accept, onChange: (event) => __awaiter(this, void 0, void 0, function* () {
+                    var _a, _b;
+                    const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                    if (!file)
+                        return;
+                    const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
+                    if (uploadByFile) {
+                        onChange(yield uploadByFile(file));
+                    }
+                }) })] }));
+}
+const HiddenInput = styled.input `
+  display: none;
+`;

package/dist/patterns/LexicalEditor/components/InsertImageDialog/ImagePreview.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export interface ImagePreviewProps {
+    src: string;
+    alt: string;
+    fallback?: ReactNode;
+}
+export declare function ImagePreview(props: ImagePreviewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useState } from "react";
+export function ImagePreview(props) {
+    const { src, alt, fallback } = props;
+    const [erroredSrc, setErroredSrc] = useState(null);
+    return (_jsxs(Container, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", erroredSrc === src ? (fallback) : (_jsx("img", { src: src, alt: alt, onError: () => setErroredSrc(src) }))] }));
+}
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;

package/dist/patterns/LexicalEditor/{nodes/insertImageDialog → components/InsertImageDialog}/InsertImageDialog.d.ts

@@ -6,8 +6,11 @@ export interface InsertImageDialogProps {
     title: string;
     open: boolean;
     onClose: () => void;
-    updateImg: (props: ImageProps | null) => void;
+    imageProps?: ImageProps;
+    onChange: (props: ImageProps) => void;
     /** 전달하면 "이미지 삭제하기" 버튼이 생깁니다. */
-    deleteButton?: boolean;
+    onDelete?: () => void;
+    /** 닫을 때마다 폼을 최초 상태로 초기화합니다. */
+    shouldReset?: boolean;
 }
 export declare function InsertImageDialog(props: InsertImageDialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+import { useTheme } from "@emotion/react";
+import { ImageFillIcon, LinkIcon } from "../../../../icons";
+import { AlertDialog, AlertDialogActions, AlertDialogContent, AlertDialogTitle, } from "../../../../components/AlertDialog";
+import { useForm } from "react-hook-form";
+import { FileSelectInput } from "../FileSelectInput";
+import { Button } from "../../../..";
+import { FormInput } from "../../nodes/Form";
+import { useState } from "react";
+import { ImagePreview } from "./ImagePreview";
+import { ImageNotAvailable } from "../../nodes/ImageNode/ImageNotAvailable";
+export function InsertImageDialog(props) {
+    const { title, open, onClose, imageProps, onChange, onDelete, shouldReset } = props;
+    const theme = useTheme();
+    const { control, setValue, watch, reset, handleSubmit } = useForm({
+        defaultValues: imageProps !== null && imageProps !== void 0 ? imageProps : { src: "", altText: "" },
+    });
+    const handleOnClose = () => {
+        if (shouldReset)
+            reset();
+        onClose();
+    };
+    const onSubmit = (data) => {
+        onChange(data);
+        handleOnClose();
+    };
+    // 미리보기할 src를 저장합니다. watch("src")는 너무 자주 바뀌기 때문에 사용하지 않습니다.
+    const [previewSrc, setPreviewSrc] = useState(watch("src"));
+    const isDisabled = watch("src") === "";
+    return (_jsxs(StyledAlertDialog, Object.assign({ component: "form", icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, onSubmit: (e) => {
+            // nested form 구조라서 submit이벤트 전파를 막습니다.
+            e.stopPropagation();
+            handleSubmit(onSubmit)();
+        }, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: title })), _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(FileSelectInput, { onChange: (value) => {
+                                setValue("src", value);
+                                setPreviewSrc(value);
+                            }, accept: "image/*" }), _jsx(FormInput, { name: "src", control: control, placeholder: "https://www.pexels.com/photo/n-2848492", size: "medium", label: "URL", fullWidth: true, startIcon: _jsx(LinkIcon, {}), inputProps: {
+                                onBlur: () => {
+                                    setPreviewSrc(watch("src"));
+                                },
+                            } }), previewSrc && (_jsx(ImagePreview, { src: previewSrc, alt: watch("altText"), fallback: _jsx(ImageNotAvailable, {}) })), _jsx(FormInput, { name: "altText", control: control, placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", size: "medium", label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", fullWidth: true })] }) }), _jsxs(AlertDialogActions, { children: [_jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }), onDelete && (_jsx(Button, { color: "danger", size: "medium", fullWidth: true, label: "\uC0AD\uC81C\uD558\uAE30", onClick: onDelete }))] })] })));
+}
+const StyledAlertDialog = styled(AlertDialog) `
+  gap: 16px;
+`;
+const StyledAlertDialogTitle = styled(AlertDialogTitle) `
+  color: ${({ theme }) => theme.color.foreground.neutralBase};
+  text-align: center;
+
+  /* Default/Heading/20px-Bd */
+  font-family: ${({ theme }) => theme.fontFamily.ui};
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px; /* 140% */
+  letter-spacing: 0.25px;
+`;
+const Inputs = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;

package/dist/patterns/LexicalEditor/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./LexicalEditor";
-export * from "./nodes/ImageNode";
 export * from "./plugins/MarkdownTransformers";

package/dist/patterns/LexicalEditor/index.js

@@ -1,3 +1,2 @@
 export * from "./LexicalEditor";
-export * from "./nodes/ImageNode";
 export * from "./plugins/MarkdownTransformers";

package/dist/patterns/LexicalEditor/nodes/Form/FormInput.js

@@ -29,11 +29,18 @@ export function FormInput(props) {
                         ? "activeDanger"
                         : inputFocused
                             ? "activePrimary"
-                            : baseColor, onChange: onChangeHandler, value: value !== null && value !== void 0 ? value : "", hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, inputProps: Object.assign(Object.assign({ name }, inputProps), { onFocus: () => {
+                            : baseColor, onChange: onChangeHandler, value: value !== null && value !== void 0 ? value : "", hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, inputProps: Object.assign(Object.assign({ name }, inputProps), { onFocus: (e) => {
+                            var _a;
+                            (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
                             setInputFocused(true);
-                        }, onBlur: () => {
+                        }, onBlur: (e) => {
+                            var _a;
+                            (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
                             setInputFocused(false);
-                        } }) }, other)));
+                        } }) }, other, { 
+                    // other에 multiline이 포함되고, 그게 true임이 자명하지만
+                    // 명시적으로 넣지 않으면, 타입 추론이 되지 않음.
+                    multiline: true })));
             }
             else {
                 const { inputProps } = inputComponentProps, other = __rest(inputComponentProps, ["inputProps"]);
@@ -41,9 +48,13 @@ export function FormInput(props) {
                         ? "activeDanger"
                         : inputFocused
                             ? "activePrimary"
-                            : baseColor, onChange: onChangeHandler, value: value !== null && value !== void 0 ? value : "", hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, inputProps: Object.assign(Object.assign({ name }, inputProps), { onFocus: () => {
+                            : baseColor, onChange: onChangeHandler, value: value !== null && value !== void 0 ? value : "", hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, inputProps: Object.assign(Object.assign({ name }, inputProps), { onFocus: (e) => {
+                            var _a;
+                            (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
                             setInputFocused(true);
-                        }, onBlur: () => {
+                        }, onBlur: (e) => {
+                            var _a;
+                            (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
                             setInputFocused(false);
                         } }) }, other)));
             }

package/dist/patterns/LexicalEditor/nodes/{ImageComponent.js → ImageNode/ImageComponent.js}

@@ -1,10 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
 import { mergeRegister } from "@lexical/utils";
 import { $getNodeByKey, $getSelection, $isNodeSelection, $isRangeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, createCommand, DRAGSTART_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from "lexical";
 import { Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { $isImageNode } from "./ImageNode";
+import SquareButton from "../../../../components/SquareButton";
+import { Settings3FillIcon } from "../../../../icons";
+import styled from "@emotion/styled";
+import { InsertImageDialog } from "../../components/InsertImageDialog";
+import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { ImageNotAvailable } from "./ImageNotAvailable";
 const imageCache = new Set();
 export const RIGHT_CLICK_IMAGE_COMMAND = createCommand("RIGHT_CLICK_IMAGE_COMMAND");
 function useSuspenseImage(src) {
@@ -141,7 +147,40 @@ export default function ImageComponent({ src, altText, nodeKey, width, height, m
     ]);
     const draggable = isSelected && $isNodeSelection(selection);
     const isFocused = isSelected;
-    return (_jsx(Suspense, Object.assign({ fallback: null }, { children: _jsx("div", Object.assign({ draggable: draggable }, { children: _jsx(LazyImage, { className: isFocused
-                    ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}`
-                    : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth }) })) })));
+    const [open, setOpen] = useState(false);
+    const isEditable = useLexicalEditable();
+    if (!isEditable) {
+        return (_jsx(Suspense, Object.assign({ fallback: _jsx(ImageNotAvailable, {}) }, { children: _jsx("div", Object.assign({ draggable: draggable }, { children: _jsx(LazyImage, { className: isFocused
+                        ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}`
+                        : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth }) })) })));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(Suspense, Object.assign({ fallback: _jsx(ImageNotAvailable, {}) }, { children: _jsx("div", Object.assign({ draggable: draggable }, { children: _jsx(LazyImage, { className: isFocused
+                                    ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}`
+                                    : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth }) })) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+                            setOpen(true);
+                        } })] }), _jsx(InsertImageDialog, { open: open, title: "\uC774\uBBF8\uC9C0 \uC218\uC815\uD558\uAE30", onClose: () => setOpen(false), imageProps: {
+                    src,
+                    altText,
+                }, onChange: (props) => {
+                    editor.update(() => {
+                        const node = $getNodeByKey(nodeKey);
+                        if (!$isImageNode(node)) {
+                            return;
+                        }
+                        node.setSrc(props.src);
+                        node.setAltText(props.altText);
+                    });
+                }, onDelete: () => {
+                    editor.update(() => {
+                        const node = $getNodeByKey(nodeKey);
+                        if (!$isImageNode(node)) {
+                            return;
+                        }
+                        node.remove();
+                    });
+                } })] }));
 }
+const EditContainer = styled.div `
+  display: flex;
+  gap: 4px;
+`;

package/dist/patterns/LexicalEditor/nodes/{ImageNode.d.ts → ImageNode/ImageNode.d.ts}

@@ -46,6 +46,8 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     exportJSON(): SerializedImageNode;
     setWidthAndHeight(width: "inherit" | number, height: "inherit" | number): void;
     setShowCaption(showCaption: boolean): void;
+    setSrc(src: string): void;
+    setAltText(altText: string): void;
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): false;
     getSrc(): string;

package/dist/patterns/LexicalEditor/nodes/{ImageNode.js → ImageNode/ImageNode.js}

@@ -86,6 +86,14 @@ export class ImageNode extends DecoratorNode {
         const writable = this.getWritable();
         writable.__showCaption = showCaption;
     }
+    setSrc(src) {
+        const writable = this.getWritable();
+        writable.__src = src;
+    }
+    setAltText(altText) {
+        const writable = this.getWritable();
+        writable.__altText = altText;
+    }
     // View
     createDOM(config) {
         const span = document.createElement("span");

package/dist/patterns/LexicalEditor/nodes/ImageNode/ImageNotAvailable.d.ts

@@ -0,0 +1 @@
+export declare function ImageNotAvailable(): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ImageNode/ImageNotAvailable.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ImageNotAvailable() {
+    return (_jsxs("svg", Object.assign({ width: "400", height: "300", viewBox: "0 0 1200 900", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("rect", { width: "1200", height: "900", fill: "#F6F9FC" }), _jsx("path", { d: "M519 369H537V387H519V369ZM555 369H573V387H555V369ZM591 369H609V387H591V369ZM627 369H645V387H627V369ZM663 369H681V387H663V369ZM663 405H681V423H663V405ZM519 513H537V531H519V513ZM519 477H537V495H519V477ZM519 441H537V459H519V441ZM519 405H537V423H519V405Z", fill: "black", "fill-opacity": "0.301961" }), _jsx("path", { d: "M623.183 422.382L680.197 521.134C681.85 523.997 680.869 527.657 678.006 529.31C677.097 529.835 676.065 530.112 675.014 530.112H560.985C557.68 530.112 555 527.432 555 524.127C555 523.076 555.277 522.044 555.802 521.134L612.816 422.382C614.469 419.519 618.129 418.539 620.992 420.191C621.902 420.717 622.657 421.472 623.183 422.382ZM612.014 500.187V512.157H623.984V500.187H612.014ZM612.014 458.292V488.217H623.984V458.292H612.014Z", fill: "black", "fill-opacity": "0.301961" })] })));
+}

package/dist/patterns/LexicalEditor/nodes/ImageNode/index.d.ts

@@ -0,0 +1 @@
+export * from "./ImageNode";

package/dist/patterns/LexicalEditor/nodes/ImageNode/index.js

@@ -0,0 +1 @@
+export * from "./ImageNode";

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/ProblemSelectNode.d.ts

@@ -1,6 +1,6 @@
 import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
 import { ReactNode } from "react";
-import { ImageProps } from "../insertImageDialog";
+import { ImageProps } from "../../components/InsertImageDialog";
 export interface SelectionWithoutSolution {
     show: {
         image: ImageProps | null;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxComponent.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ImageProps } from "../../insertImageDialog";
+import { ImageProps } from "../../../components/InsertImageDialog";
 export type SelectBoxType = "primary" | "success" | "danger";
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
 export declare function SelectBoxComponent(props: {

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxEdit.d.ts

@@ -1,4 +1,4 @@
-import { ImageProps } from "../../insertImageDialog";
+import { ImageProps } from "../../../components/InsertImageDialog";
 export interface SelectBoxEditProps {
     index: number;
     isAnswer: boolean;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxView.d.ts

@@ -1,4 +1,4 @@
-import { ImageProps } from "../../insertImageDialog";
+import { ImageProps } from "../../../components/InsertImageDialog";
 export interface SelectBoxViewProps {
     index: number;
     isSelected: boolean;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/FormSelection.js

@@ -8,8 +8,9 @@ import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFil
 import SquareButton from "../../../../../components/SquareButton";
 import Switch from "../../../../../components/Switch";
 import { useState } from "react";
-import { InsertImageDialog } from "../../insertImageDialog";
+import { InsertImageDialog } from "../../../components/InsertImageDialog";
 export function FormSelection(props) {
+    var _a;
     const { index, control, rules, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
@@ -23,7 +24,11 @@ export function FormSelection(props) {
           flex: 1;
           flex-direction: column;
           gap: 4px;
-        ` }, { children: [_jsx(InsertImageDialog, { title: value.show.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(Object.assign(Object.assign({}, value), { show: Object.assign(Object.assign({}, value.show), { image: props }) })), deleteButton: Boolean(value.show.image) }), value.show.image && (_jsx("img", { src: value.show.image.src, alt: value.show.image.altText, css: css `
+        ` }, { children: [_jsx(InsertImageDialog, { title: value.show.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, imageProps: (_a = value.show.image) !== null && _a !== void 0 ? _a : undefined, onClose: () => setImageOpen(false), onChange: (props) => onChange(Object.assign(Object.assign({}, value), { show: Object.assign(Object.assign({}, value.show), { image: props }) })), onDelete: value.show.image
+                            ? () => {
+                                onChange(Object.assign(Object.assign({}, value), { show: Object.assign(Object.assign({}, value.show), { image: null }) }));
+                            }
+                            : undefined }), value.show.image && (_jsx("img", { src: value.show.image.src, alt: value.show.image.altText, css: css `
               height: auto;
               // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
               max-width: min(400px, 100%);

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxComponent.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ImageProps } from "../../../insertImageDialog";
+import { ImageProps } from "../../../../components/InsertImageDialog";
 export declare const SelectBoxClasses: {
     readonly container: "SheetSelectNode-SelectBox-container";
     readonly index: "SheetSelectNode-SelectBox-index";

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxEdit.d.ts

@@ -1,4 +1,4 @@
-import { ImageProps } from "../../../insertImageDialog";
+import { ImageProps } from "../../../../components/InsertImageDialog";
 /** SheetSelectNode의 하나의 선택지 edit모드 컴포넌트입니다. */
 export declare function SelectBoxEdit(props: {
     index: number;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxView.d.ts

@@ -1,4 +1,4 @@
-import { ImageProps } from "../../../insertImageDialog";
+import { ImageProps } from "../../../../components/InsertImageDialog";
 /** SheetSelectNode의 하나의 선택지 view모드 컴포넌트입니다. */
 export declare function SelectBoxView(props: {
     index: number;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/FormSelection.js

@@ -4,10 +4,11 @@ import { useController } from "react-hook-form";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { useState } from "react";
-import { InsertImageDialog } from "../../../insertImageDialog";
 import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFillIcon, Input, SquareButton, } from "../../../../../..";
+import { InsertImageDialog, } from "../../../../components/InsertImageDialog";
 /** SheetSelectNode SettingForm의 단일 선택지 폼입니다. */
 export default function FormSelection(props) {
+    var _a;
     const { index, control, rules, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
@@ -21,7 +22,11 @@ export default function FormSelection(props) {
           flex: 1;
           flex-direction: column;
           gap: 4px;
-        ` }, { children: [_jsx(InsertImageDialog, { title: value.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(Object.assign(Object.assign({}, value), { image: props })), deleteButton: Boolean(value.image) }), value.image && (_jsx("img", { src: value.image.src, alt: value.image.altText, css: css `
+        ` }, { children: [_jsx(InsertImageDialog, { title: value.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, imageProps: (_a = value.image) !== null && _a !== void 0 ? _a : undefined, onClose: () => setImageOpen(false), onChange: (props) => onChange(Object.assign(Object.assign({}, value), { image: props })), onDelete: value.image
+                            ? () => {
+                                onChange(Object.assign(Object.assign({}, value), { image: null }));
+                            }
+                            : undefined }), value.image && (_jsx("img", { src: value.image.src, alt: value.image.altText, css: css `
               height: auto;
               // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
               max-width: min(400px, 100%);

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SheetSelectNode.d.ts

@@ -1,6 +1,6 @@
 import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
 import { ReactNode } from "react";
-import { ImageProps } from "../insertImageDialog";
+import { ImageProps } from "../../components/InsertImageDialog";
 export interface Selection {
     show: {
         image: ImageProps | null;

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/ComponentAdderPlugin.js

@@ -27,9 +27,10 @@ import { useFloatingMenu } from "./useFloatingMenu";
 import ComponentAdder from "./ComponentAdder";
 import styled from "@emotion/styled";
 import { useContextMenuOptions } from "./useContextMenuOptions";
-import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
 import { ZINDEX } from "../../../../utils/zIndex";
 import { useTheme } from "@emotion/react";
+import { InsertImageDialog, } from "../../components/InsertImageDialog";
+import { INSERT_IMAGE_COMMAND } from "../ImagesPlugin";
 export const COMPONENT_ADDER_MENU_CLASSNAME = "component-adder-menu";
 function isOnMenu(element) {
     return !!element.closest(`.${COMPONENT_ADDER_MENU_CLASSNAME}`);
@@ -151,7 +152,9 @@ export function ComponentAdderPlugin(props) {
                 option.keywords.some((keyword) => regex.test(keyword))));
     });
     const { onDragStart, onDragEnd, targetLineRef } = useDraggableBlockMenu(editor, anchorElem, blockElem, setBlockElem);
-    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: imageOpen, activeEditor: editor, onClose: () => setImageOpen(false) }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
+    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: imageOpen, title: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30", onClose: () => setImageOpen(false), onChange: (props) => {
+                    editor.dispatchCommand(INSERT_IMAGE_COMMAND, props);
+                }, shouldReset: true }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
           z-index: ${ZINDEX.DIALOG + 1};
         `, options: filteredOptions, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && filteredOptions.length
                     ? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: filteredOptions, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.js

@@ -20,7 +20,6 @@ import { useCallback, useMemo, useState } from "react";
 import * as ReactDOM from "react-dom";
 import { css as cssToClassName } from "@emotion/css";
 import { ComponentPickerMenuList } from "./ComponentPickerMenuList";
-import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
 import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, FileList2LineIcon, EmojiStickerLineIcon, } from "../../../../icons";
 import { ZINDEX } from "../../../../utils/zIndex";
 import { css, useTheme } from "@emotion/react";
@@ -30,6 +29,8 @@ import { INSERT_LAYOUT_COMMAND } from "../LayoutPlugin";
 import { INSERT_SHEET_SELECT_COMMAND } from "../SheetSelectPlugin";
 import { INSERT_SHEET_INPUT_COMMAND } from "../SheetInputPlugin";
 import { INSERT_SELF_EVALUATION_COMMAND } from "../SelfEvaluationPlugin";
+import { InsertImageDialog, } from "../../components/InsertImageDialog";
+import { INSERT_IMAGE_COMMAND } from "../ImagesPlugin";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
@@ -318,7 +319,9 @@ export function ComponentPickerMenuPlugin(props) {
             closeMenu();
         });
     }, [editor]);
-    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: open, activeEditor: editor, onClose: () => setOpen(false) }), _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, anchorClassName: cssToClassName `
+    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { title: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30", open: open, onChange: (props) => {
+                    editor.dispatchCommand(INSERT_IMAGE_COMMAND, props);
+                }, onClose: () => setOpen(false), shouldReset: true }), _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, anchorClassName: cssToClassName `
           z-index: ${ZINDEX.DIALOG + 1};
         `, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && options.length
                     ? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: options, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { LexicalCommand } from "lexical";
-import { ImagePayload } from "../../nodes/ImageNode";
+import { ImagePayload } from "../../nodes";
 export type InsertImagePayload = Readonly<ImagePayload>;
 export declare const INSERT_IMAGE_COMMAND: LexicalCommand<InsertImagePayload>;
 export default function ImagesPlugin({ captionsEnabled, }: {

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

@@ -9,7 +9,7 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { $wrapNodeInElement, mergeRegister } from "@lexical/utils";
 import { $createParagraphNode, $createRangeSelection, $getSelection, $insertNodes, $isNodeSelection, $isRootOrShadowRoot, $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/ImageNode";
+import { $createImageNode, $isImageNode, ImageNode, } from "../../nodes";
 const CAN_USE_DOM = typeof window !== "undefined" &&
     typeof window.document !== "undefined" &&
     typeof window.document.createElement !== "undefined";

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

@@ -9,7 +9,7 @@ import { $convertFromMarkdownString, $convertToMarkdownString, CHECK_LIST, ELEME
 import { $createHorizontalRuleNode, $isHorizontalRuleNode, HorizontalRuleNode, } from "@lexical/react/LexicalHorizontalRuleNode";
 import { $createTableCellNode, $createTableNode, $createTableRowNode, $isTableCellNode, $isTableNode, $isTableRowNode, TableCellHeaderStates, TableCellNode, TableNode, TableRowNode, } from "@lexical/table";
 import { $isParagraphNode, $isTextNode } from "lexical";
-import { $createImageNode, $isImageNode, ImageNode, } from "../../nodes/ImageNode";
+import { $createImageNode, $isImageNode, ImageNode } from "../../nodes";
 export const HR = {
     dependencies: [HorizontalRuleNode],
     export: (node) => {

package/package.json

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

package/dist/patterns/LexicalEditor/nodes/insertImageDialog/InsertImageDialog.js

@@ -1,114 +0,0 @@
-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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { useContext, useRef, useState } from "react";
-import styled from "@emotion/styled";
-import { css, useTheme } from "@emotion/react";
-import { ImageFillIcon, LinkIcon, UploadLineIcon } from "../../../../icons";
-import { AlertDialog, AlertDialogContent, AlertDialogTitle, } from "../../../../components/AlertDialog";
-import Button from "../../../../components/Button";
-import { CodleDesignSystemContext } from "../../../../CodleDesignSystemProvider";
-import { InsertImageUriDialogBody } from "./InsertImageUriDialogBody";
-import { InsertImageUploadedDialogBody } from "./InsertImageUploadedDialogBody";
-import { useForm } from "react-hook-form";
-export function InsertImageDialog(props) {
-    const { title, open, onClose, updateImg, deleteButton } = props;
-    const theme = useTheme();
-    const [mode, setMode] = useState(null);
-    const inputRef = useRef(null);
-    const cdsContext = useContext(CodleDesignSystemContext);
-    const { control, setValue, watch, reset, handleSubmit } = useForm({
-        defaultValues: { src: "", altText: "" },
-    });
-    const handleOnClose = () => {
-        setMode(null);
-        reset();
-        onClose();
-    };
-    const onSubmit = (data) => {
-        updateImg(data);
-        handleOnClose();
-    };
-    return (_jsxs(StyledAlertDialog, Object.assign({ component: "form", icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, onSubmit: (e) => {
-            // nested form 구조라서 submit이벤트 전파를 막습니다.
-            e.stopPropagation();
-            handleSubmit(onSubmit)();
-        }, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: title })), !mode && (_jsx(AlertDialogContent, { children: _jsxs("div", Object.assign({ css: css `
-              display: flex;
-              flex-direction: column;
-              gap: 16px;
-              // Actions가 없는 경우 하단이 디자인과 맞지 않는다
-              margin-bottom: -16px;
-            ` }, { children: [_jsxs(Buttons, { children: [_jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uC774\uBBF8\uC9C0 URL\uC744 \uC54C\uACE0 \uC788\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL\uB85C \uC0BD\uC785\uD558\uAE30", startIcon: _jsx(LinkIcon, {}), onClick: () => setMode("url") })] }), _jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uAC16\uACE0 \uC788\uB294 \uC774\uBBF8\uC9C0\uB97C \uC0BD\uC785\uD558\uACE0 \uC2F6\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", startIcon: _jsx(UploadLineIcon, {}), onClick: () => {
-                                                var _a;
-                                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                                            } }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
-                                                var _a, _b;
-                                                const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
-                                                if (!file)
-                                                    return;
-                                                const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
-                                                if (uploadByFile) {
-                                                    setValue("src", yield uploadByFile(file));
-                                                    setMode("file");
-                                                }
-                                            }) })] })] }), deleteButton && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Button, { color: "textDanger", size: "medium", fullWidth: true, label: "\uC774\uBBF8\uC9C0 \uC0AD\uC81C\uD558\uAE30", onClick: () => {
-                                        updateImg(null);
-                                        handleOnClose();
-                                    } })] }))] })) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { control: control, watch: watch })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { control: control, watch: watch, setValue: setValue }))] })));
-}
-const StyledAlertDialog = styled(AlertDialog) `
-  gap: 16px;
-`;
-const StyledAlertDialogTitle = styled(AlertDialogTitle) `
-  color: ${({ theme }) => theme.color.foreground.neutralBase};
-  text-align: center;
-
-  /* Default/Heading/20px-Bd */
-  font-family: ${({ theme }) => theme.fontFamily.ui};
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 28px; /* 140% */
-  letter-spacing: 0.25px;
-`;
-const Buttons = styled.div `
-  display: flex;
-  flex: 1;
-  align-items: flex-start;
-  gap: 8px;
-`;
-const Divider = styled.div(({ theme }) => css `
-    width: 100%;
-    height: 1px;
-    background: ${theme.color.background.neutralAltActive};
-  `);
-const ButtonAndDescription = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  flex: 1 0 0;
-`;
-const Description = styled.div `
-  color: ${({ theme }) => theme.color.foreground.neutralBaseDisabled};
-  text-align: center;
-
-  /* Default/Label/12px-Md */
-  font-family: ${({ theme }) => theme.fontFamily.ui};
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 16px; /* 133.333% */
-`;
-const HiddenInput = styled.input `
-  display: none;
-`;

package/dist/patterns/LexicalEditor/nodes/insertImageDialog/InsertImageUploadedDialogBody.d.ts

@@ -1,8 +0,0 @@
-import { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
-import { ImageProps } from "./InsertImageDialog";
-export interface InsertImageUploadedDialogBodyProps {
-    control: Control<ImageProps, any>;
-    watch: UseFormWatch<ImageProps>;
-    setValue: UseFormSetValue<ImageProps>;
-}
-export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/insertImageDialog/InsertImageUploadedDialogBody.js

@@ -1,50 +0,0 @@
-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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useRef } from "react";
-import styled from "@emotion/styled";
-import { CodleDesignSystemContext } from "../../../../CodleDesignSystemProvider";
-import { AlertDialogActions, AlertDialogContent, } from "../../../../components/AlertDialog";
-import Button from "../../../../components/Button";
-import { RefreshLineIcon } from "../../../../icons";
-import Input from "../../../../components/Input";
-import { Controller, } from "react-hook-form";
-export function InsertImageUploadedDialogBody(props) {
-    const { control, watch, setValue } = props;
-    const inputRef = useRef(null);
-    const cdsContext = useContext(CodleDesignSystemContext);
-    const isDisabled = watch("src") === "";
-    return (_jsxs(_Fragment, { children: [_jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uBC14\uAFB8\uAE30", onClick: () => {
-                                var _a;
-                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                            }, startIcon: _jsx(RefreshLineIcon, {}) }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
-                                var _a, _b;
-                                const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
-                                if (!file)
-                                    return;
-                                const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
-                                if (uploadByFile) {
-                                    setValue("src", yield uploadByFile(file));
-                                }
-                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: watch("src"), alt: watch("altText") })] }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
-}
-const Inputs = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-const HiddenInput = styled.input `
-  display: none;
-`;
-const ImagePreview = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;

package/dist/patterns/LexicalEditor/nodes/insertImageDialog/InsertImageUriDialogBody.d.ts

@@ -1,7 +0,0 @@
-import { Control, UseFormWatch } from "react-hook-form";
-import { ImageProps } from "./InsertImageDialog";
-export interface InsertImageUriDialogBodyProps {
-    control: Control<ImageProps, any>;
-    watch: UseFormWatch<ImageProps>;
-}
-export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/insertImageDialog/InsertImageUriDialogBody.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import styled from "@emotion/styled";
-import { AlertDialogActions, AlertDialogContent, } from "../../../../components/AlertDialog";
-import Input from "../../../../components/Input";
-import { LinkIcon } from "../../../../icons";
-import Button from "../../../../components/Button";
-import { Controller } from "react-hook-form";
-export function InsertImageUriDialogBody(props) {
-    const { control, watch } = props;
-    const isDisabled = watch("src") === "";
-    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Controller, { name: "src", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: onChange, value: value, startIcon: _jsx(LinkIcon, {}) })) }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
-}
-const Inputs = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;

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

@@ -1,7 +0,0 @@
-import { LexicalEditor } from "lexical";
-export interface InsertImageDialogProps {
-    open: boolean;
-    activeEditor: LexicalEditor;
-    onClose: () => void;
-}
-export declare function InsertImageDialog(props: InsertImageDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,109 +0,0 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useRef, useState } from "react";
-import { INSERT_IMAGE_COMMAND } from ".";
-import { InsertImageUriDialogBody } from "./InsertImageUriDialogBody";
-import { InsertImageUploadedDialogBody } from "./InsertImageUploadedDialogBody";
-import styled from "@emotion/styled";
-import { AlertDialog, AlertDialogContent, AlertDialogTitle, } from "../../../../components/AlertDialog";
-import { ImageFillIcon, LinkIcon, UploadLineIcon } from "../../../../icons";
-import Button from "../../../../components/Button";
-import { useTheme } from "@emotion/react";
-import { CodleDesignSystemContext } from "../../../../CodleDesignSystemProvider";
-import { useForm } from "react-hook-form";
-export function InsertImageDialog(props) {
-    const { open, activeEditor, onClose } = props;
-    const theme = useTheme();
-    const [mode, setMode] = useState(null);
-    const hasModifier = useRef(false);
-    const inputRef = useRef(null);
-    const cdsContext = useContext(CodleDesignSystemContext);
-    const { control, setValue, watch, reset, handleSubmit } = useForm({
-        defaultValues: { src: "", altText: "" },
-    });
-    const onSubmit = (data) => {
-        activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
-        handleOnClose();
-    };
-    useEffect(() => {
-        hasModifier.current = false;
-        const handler = (e) => {
-            hasModifier.current = e.altKey;
-        };
-        document.addEventListener("keydown", handler);
-        return () => {
-            document.removeEventListener("keydown", handler);
-        };
-    }, [activeEditor]);
-    const handleOnClose = () => {
-        setMode(null);
-        reset();
-        onClose();
-    };
-    return (_jsxs(StyledAlertDialog, Object.assign({ component: "form", icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, onSubmit: handleSubmit(onSubmit), disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30" })), !mode && (_jsx(AlertDialogContent, { children: _jsxs(Buttons, { children: [_jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uC774\uBBF8\uC9C0 URL\uC744 \uC54C\uACE0 \uC788\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL\uB85C \uC0BD\uC785\uD558\uAE30", startIcon: _jsx(LinkIcon, {}), onClick: () => setMode("url") })] }), _jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uAC16\uACE0 \uC788\uB294 \uC774\uBBF8\uC9C0\uB97C \uC0BD\uC785\uD558\uACE0 \uC2F6\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", startIcon: _jsx(UploadLineIcon, {}), onClick: () => {
-                                        var _a;
-                                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                                    } }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
-                                        var _a, _b;
-                                        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
-                                        if (!file)
-                                            return;
-                                        const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
-                                        if (uploadByFile) {
-                                            setValue("src", yield uploadByFile(file));
-                                            setMode("file");
-                                        }
-                                    }) })] })] }) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { control: control, watch: watch })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { control: control, watch: watch, setValue: setValue }))] })));
-}
-const StyledAlertDialog = styled(AlertDialog) `
-  gap: 16px;
-`;
-const StyledAlertDialogTitle = styled(AlertDialogTitle) `
-  color: ${({ theme }) => theme.color.foreground.neutralBase};
-  text-align: center;
-
-  /* Default/Heading/20px-Bd */
-  font-family: ${({ theme }) => theme.fontFamily.ui};
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 28px; /* 140% */
-  letter-spacing: 0.25px;
-`;
-const Buttons = styled.div `
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-
-  // Actions가 없는 경우 하단이 디자인과 맞지 않는다
-  margin-bottom: -16px;
-`;
-const ButtonAndDescription = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  flex: 1 0 0;
-`;
-const Description = styled.div `
-  color: ${({ theme }) => theme.color.foreground.neutralBaseDisabled};
-  text-align: center;
-
-  /* Default/Label/12px-Md */
-  font-family: ${({ theme }) => theme.fontFamily.ui};
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 16px; /* 133.333% */
-`;
-const HiddenInput = styled.input `
-  display: none;
-`;

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

@@ -1,16 +0,0 @@
-import { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
-export interface InsertImageUploadedDialogBodyProps {
-    control: Control<{
-        src: string;
-        altText: string;
-    }, any>;
-    watch: UseFormWatch<{
-        src: string;
-        altText: string;
-    }>;
-    setValue: UseFormSetValue<{
-        src: string;
-        altText: string;
-    }>;
-}
-export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,50 +0,0 @@
-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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useRef } from "react";
-import styled from "@emotion/styled";
-import { CodleDesignSystemContext } from "../../../../CodleDesignSystemProvider";
-import { AlertDialogContent, AlertDialogActions, } from "../../../../components/AlertDialog";
-import Button from "../../../../components/Button";
-import Input from "../../../../components/Input";
-import { RefreshLineIcon } from "../../../../icons";
-import { Controller, } from "react-hook-form";
-export function InsertImageUploadedDialogBody(props) {
-    const { control, watch, setValue } = props;
-    const inputRef = useRef(null);
-    const cdsContext = useContext(CodleDesignSystemContext);
-    const isDisabled = watch("src") === "";
-    return (_jsxs(_Fragment, { children: [_jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uBC14\uAFB8\uAE30", onClick: () => {
-                                var _a;
-                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                            }, startIcon: _jsx(RefreshLineIcon, {}) }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
-                                var _a, _b;
-                                const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
-                                if (!file)
-                                    return;
-                                const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
-                                if (uploadByFile) {
-                                    setValue("src", yield uploadByFile(file));
-                                }
-                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: watch("src"), alt: watch("altText") })] }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
-}
-const Inputs = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-const HiddenInput = styled.input `
-  display: none;
-`;
-const ImagePreview = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;

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

@@ -1,12 +0,0 @@
-import { Control, UseFormWatch } from "react-hook-form";
-export interface InsertImageUriDialogBodyProps {
-    control: Control<{
-        src: string;
-        altText: string;
-    }, any>;
-    watch: UseFormWatch<{
-        src: string;
-        altText: string;
-    }>;
-}
-export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import styled from "@emotion/styled";
-import { AlertDialogActions, AlertDialogContent, } from "../../../../components/AlertDialog";
-import Input from "../../../../components/Input";
-import { LinkIcon } from "../../../../icons";
-import Button from "../../../../components/Button";
-import { Controller } from "react-hook-form";
-export function InsertImageUriDialogBody(props) {
-    const { control, watch } = props;
-    const isDisabled = watch("src") === "";
-    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Controller, { name: "src", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: onChange, value: value, startIcon: _jsx(LinkIcon, {}) })) }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }) })] }));
-}
-const Inputs = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;