@team-monolith/cds 1.9.6 → 1.9.8

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.js

@@ -38,19 +38,19 @@ export function InputComponent(props) {
             return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, color: "default", fullWidth: true, inputProps: { readOnly: true } }));
         }
         else {
-            return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => setAnswerInput(e.target.value), 
-                // 한글 입력시에 onChange마다 update가 일어나는 것을 방지하기 위해 입력 완료후 onBlur시에 update하는 전략을 사용합니다.
-                // 이를 위해 answerInput을 state로 관리합니다.
-                inputProps: {
-                    onBlur: (_e) => {
-                        editor.update(() => {
-                            const node = $getNodeByKey(nodeKey);
-                            if (!$isProblemInputNode(node)) {
-                                return;
-                            }
-                            node.setAnswer(answerInput);
-                        });
-                    },
+            return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
+                    // SoT를 EditorState로 설정하는 경우 한글 입력시 문제가 생김.
+                    // ex) "나비" 입력시 -> "ㄴ나납ㅂ비"
+                    // SoT를 내부 State로 관리하고 EditorState를 따로 설정.
+                    // 문제를 더 파악하고 추후 개선 필요.
+                    setAnswerInput(e.target.value);
+                    editor.update(() => {
+                        const node = $getNodeByKey(nodeKey);
+                        if (!$isProblemInputNode(node)) {
+                            return;
+                        }
+                        node.setAnswer(e.target.value);
+                    });
                 }, color: "default", fullWidth: true }));
         }
     }

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

@@ -13,9 +13,13 @@ export function FormSelection(props) {
     const { index, control, field, update, rules, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => {
+    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { title: field.show.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => {
                     update(index, Object.assign(Object.assign({}, field), { show: Object.assign(Object.assign({}, field.show), { image: props }) }));
-                } }), _jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", Object.assign({ css: css `
+                }, deleteImg: field.show.image
+                    ? () => {
+                        update(index, Object.assign(Object.assign({}, field), { show: Object.assign(Object.assign({}, field.show), { image: undefined }) }));
+                    }
+                    : undefined }), _jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", Object.assign({ css: css `
             display: flex;
             flex: 1;
             flex-direction: column;

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

@@ -1,7 +1,10 @@
 import { ImageProps } from "../ProblemSelectNode";
 export interface InsertImageDialogProps {
+    title: string;
     open: boolean;
     onClose: () => void;
     updateImg: (props: ImageProps) => void;
+    /** 전달하면 "이미지 삭제하기" 버튼이 생깁니다. */
+    deleteImg?: () => void;
 }
-export declare function InsertImageDialog(props: InsertImageDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function InsertImageDialog(props: InsertImageDialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -7,10 +7,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { useTheme } from "@emotion/react";
+import { css, useTheme } from "@emotion/react";
 import { ImageFillIcon, LinkIcon, UploadLineIcon } from "../../../../../icons";
 import { AlertDialog, AlertDialogContent, AlertDialogTitle, } from "../../../../../components/AlertDialog";
 import Button from "../../../../../components/Button";
@@ -18,7 +19,7 @@ import { CodleDesignSystemContext } from "../../../../../CodleDesignSystemProvid
 import { InsertImageUriDialogBody } from "./InsertImageUriDialogBody";
 import { InsertImageUploadedDialogBody } from "./InsertImageUploadedDialogBody";
 export function InsertImageDialog(props) {
-    const { open, onClose, updateImg } = props;
+    const { title, open, onClose, updateImg, deleteImg } = props;
     const theme = useTheme();
     const [mode, setMode] = useState(null);
     const inputRef = useRef(null);
@@ -35,20 +36,26 @@ export function InsertImageDialog(props) {
         setAltText("");
         onClose();
     };
-    return (_jsxs(StyledAlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, 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) {
-                                            setSrc(yield uploadByFile(file));
-                                            setMode("file");
-                                        }
-                                    }) })] })] }) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick }))] })));
+    return (_jsxs(StyledAlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, 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) {
+                                                    setSrc(yield uploadByFile(file));
+                                                    setMode("file");
+                                                }
+                                            }) })] })] }), deleteImg && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Button, { color: "textDanger", size: "medium", fullWidth: true, label: "\uC774\uBBF8\uC9C0 \uC0AD\uC81C\uD558\uAE30", onClick: deleteImg })] }))] })) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick }))] })));
 }
 const StyledAlertDialog = styled(AlertDialog) `
   gap: 16px;
@@ -67,12 +74,15 @@ const StyledAlertDialogTitle = styled(AlertDialogTitle) `
 `;
 const Buttons = styled.div `
   display: flex;
+  flex: 1;
   align-items: flex-start;
   gap: 8px;
-
-  // Actions가 없는 경우 하단이 디자인과 맞지 않는다
-  margin-bottom: -16px;
 `;
+const Divider = styled.div(({ theme }) => css `
+    width: 100%;
+    height: 1px;
+    background: ${theme.color.background.neutralAltActive};
+  `);
 const ButtonAndDescription = styled.div `
   display: flex;
   flex-direction: column;

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

@@ -8,9 +8,12 @@ import shadows from "../../../../../foundation/shadows";
 import { AddFillIcon, AlarmWarningFillIcon, ListRadioIcon, } from "../../../../../icons";
 import Button from "../../../../../components/Button";
 import { FormSelection } from "./FormSelection";
+import Tooltip from "../../../../../components/Tooltip";
+import { useState } from "react";
 export default function SettingForm(props) {
     const { control, handleSubmit, fields, append, remove, update, nodeKey, onClose, } = props;
     const [editor] = useLexicalComposerContext();
+    const [tooltipOpen, setTooltipOpen] = useState(false);
     const onSettingSubmit = (data) => {
         editor.update(() => {
             const node = $getNodeByKey(nodeKey);
@@ -32,6 +35,7 @@ export default function SettingForm(props) {
         return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
     }
     const hasMultipleAnswers = fields.filter((field) => field.isAnswer).length > 1;
+    const hasAnswer = fields.some((field) => field.isAnswer);
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
             width: 12px;
             height: 12px;
@@ -53,7 +57,7 @@ export default function SettingForm(props) {
                         } }), hasMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
                 width: 14px;
                 height: 14px;
-              ` }), "\uC815\uB2F5\uC774 \uC5EC\uB7EC \uAC1C\uC778 \uBB38\uC81C\uC5D0\uB294 \uC815\uB2F5\uC744 \uBAA8\uB450 \uC120\uD0DD\uD574\uC57C \uD55C\uB2E4\uB294 \uC548\uB0B4\uAC00 \uC81C\uACF5\uB429\uB2C8\uB2E4."] }))] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit" })] })] })));
+              ` }), "\uC815\uB2F5\uC774 \uC5EC\uB7EC \uAC1C\uC778 \uBB38\uC81C\uC5D0\uB294 \uC815\uB2F5\uC744 \uBAA8\uB450 \uC120\uD0DD\uD574\uC57C \uD55C\uB2E4\uB294 \uC548\uB0B4\uAC00 \uC81C\uACF5\uB429\uB2C8\uB2E4."] }))] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Tooltip, Object.assign({ open: !hasAnswer && tooltipOpen, text: "\uC120\uD0DD\uC9C0 \uC911 \uC815\uB2F5\uC744 \uD45C\uC2DC\uD574\uC8FC\uC138\uC694.", onOpen: () => setTooltipOpen(true), onClose: () => setTooltipOpen(false), placement: "top-end" }, { children: _jsx("span", { children: _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit", disabled: !hasAnswer }) }) }))] })] })));
 }
 const Form = styled.form(({ theme }) => css `
     display: flex;

package/package.json

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