@team-monolith/cds 1.47.0 → 1.47.1

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export type LexicalCustomConfig = {
     freezeProblemNode: boolean;
+    showQuizSolution: boolean;
 };
 declare const LexicalCustomConfigContext: import("react").Context<LexicalCustomConfig>;
 export { LexicalCustomConfigContext };

package/dist/patterns/LexicalEditor/LexicalCustomConfigContext.js

@@ -1,5 +1,6 @@
 import { createContext } from "react";
 const LexicalCustomConfigContext = createContext({
     freezeProblemNode: false,
+    showQuizSolution: false,
 });
 export { LexicalCustomConfigContext };

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

@@ -12,6 +12,8 @@ export interface LexicalEditorProps {
     /** freeze. 문제 블록을 수정하지 못하도록 함
      */
     freezeProblemNode?: boolean;
+    /** 퀴즈 정답이 공개되는지 여부. false가 default입니다. 공개하고자 하는곳에서 true로 설정해야 합니다. */
+    showQuizSolution?: boolean;
     /** 퀴즈 노드가 허용되는지 여부. false가 디폴트이고, 전달하지 않아도 로컬스토리지 devMode로도 노출시킬 수 있습니다. */
     isQuizEnabled?: boolean;
     /** 외부에서 플러그인을 주입하는 경우 활용함 */

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -32,7 +32,7 @@ function validateValue(value) {
     return true;
 }
 export function LexicalEditor(props) {
-    const { className, contentEditableClassName, value, onChange, editable = true, freezeProblemNode, isQuizEnabled = false, children, } = props;
+    const { className, contentEditableClassName, value, onChange, editable = true, showQuizSolution = false, freezeProblemNode = false, isQuizEnabled = false, children, } = props;
     const theme = useTheme();
     const initialConfig = {
         namespace: "CodleLexicalEditor",
@@ -67,5 +67,5 @@ export function LexicalEditor(props) {
         editorState: validateValue(value) ? JSON.stringify(value) : undefined,
         editable: editable,
     };
-    return (_jsx(LexicalCustomConfigContext.Provider, Object.assign({ value: { freezeProblemNode: freezeProblemNode !== null && freezeProblemNode !== void 0 ? freezeProblemNode : false } }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, contentEditableClassName: contentEditableClassName, onChange: onChange, isQuizEnabled: isQuizEnabled }), _jsx(_Fragment, { children: children })] })) })));
+    return (_jsx(LexicalCustomConfigContext.Provider, Object.assign({ value: { freezeProblemNode, showQuizSolution } }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, contentEditableClassName: contentEditableClassName, onChange: onChange, isQuizEnabled: isQuizEnabled }), _jsx(_Fragment, { children: children })] })) })));
 }

package/dist/patterns/LexicalEditor/Plugins.js

@@ -29,7 +29,7 @@ import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
 import styled from "@emotion/styled";
 import ProblemInputPlugin from "./plugins/ProblemInputPlugin";
 import ProblemSelectPlugin from "./plugins/ProblemSelectPlugin";
-import { LayoutPlugin } from "./plugins/LayoutPlugin/LayoutPlugin";
+import { LayoutPlugin } from "./plugins/LayoutPlugin";
 export default function Plugins(props) {
     const { className, contentEditableClassName, onChange, isQuizEnabled } = props;
     const isEditable = useLexicalEditable();

package/dist/patterns/LexicalEditor/nodes/LayoutContainerNode.js

@@ -30,6 +30,7 @@ export class LayoutContainerNode extends ElementNode {
     createDOM(config) {
         const dom = document.createElement("div");
         dom.style.display = "grid";
+        dom.style.gap = "24px";
         dom.style.gridTemplateColumns = this.__templateColumns;
         if (typeof config.theme.layoutContainer === "string") {
             addClassNamesToElement(dom, config.theme.layoutContainer);

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

@@ -35,7 +35,7 @@ export function InputComponent(props) {
     // SoT를 내부 State로 관리하고 EditorState를 따로 설정.
     // 문제를 더 파악하고 추후 개선 필요.
     const [answerInput, setAnswerInput] = useState(answer);
-    const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
+    const { freezeProblemNode } = useContext(LexicalCustomConfigContext);
     // "** ***" 같은 형태입니다.
     const answerFormat = solutions[0].value;
     const handleChange = (value) => {
@@ -51,9 +51,9 @@ export function InputComponent(props) {
     // 학생 view
     if (!isEditable) {
         if (showCharacterNumber) {
-            return (_jsx(SegmentedInput, { readOnly: lexicalCustomConfig.freezeProblemNode, isCorrect: isCorrect, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: handleChange }));
+            return (_jsx(SegmentedInput, { readOnly: freezeProblemNode, isCorrect: isCorrect, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: handleChange }));
         }
-        return (_jsx(TextInput, { readOnly: lexicalCustomConfig.freezeProblemNode, isCorrect: isCorrect, size: "small", color: "default", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
+        return (_jsx(TextInput, { readOnly: freezeProblemNode, isCorrect: isCorrect, size: "small", color: "default", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
                 handleChange(e.target.value);
             }, fullWidth: true }));
     }

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxView.js

@@ -29,9 +29,7 @@ export function SelectBoxView(props) {
         : undefined;
     return (_jsx(SelectBoxComponent, { css: css `
         width: 100%;
-      `, type: selectBoxType, index: selectBoxType ? TYPE_TO_INDEX_ICON(selectBoxType) : index, image: image, text: text, 
-        // isAnswer가 존재하면 채점 후의 상태이므로 unclickable을 위해 onClick을 전달하지 않음
-        onClick: isAnswer === undefined ? onClick : undefined, 
+      `, type: selectBoxType, index: selectBoxType ? TYPE_TO_INDEX_ICON(selectBoxType) : index, image: image, text: text, onClick: onClick, 
         // 선택되지 않았으나 정답일 때 정답 태그를 표시
         endIcon: isAnswer &&
             !isSelected && (_jsx(Tag, { label: "\uC815\uB2F5", icon: _jsx(CheckboxCircleFillIcon, {}), color: "green", css: css `

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

@@ -29,40 +29,40 @@ export function SelectComponent(props) {
     const [editor] = useLexicalComposerContext();
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
-    const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
-    // 학생 view
+    const { freezeProblemNode, showQuizSolution } = useContext(LexicalCustomConfigContext);
+    // view
     if (!isEditable) {
         return (_jsxs(_Fragment, { children: [hasMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
                 width: 14px;
                 height: 14px;
-              ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uC81C\uC785\uB2C8\uB2E4."] })), selections.map((selection, index) => (_jsx(SelectBoxView, { index: index + 1, isAnswer: selection.isAnswer, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: () => {
-                        if (lexicalCustomConfig.freezeProblemNode)
-                            return;
-                        const isSelected = selected.includes(selection.value);
-                        if (isSelected) {
-                            editor.update(() => {
-                                const node = $getNodeByKey(nodeKey);
-                                if (!$isProblemSelectNode(node)) {
-                                    return;
-                                }
-                                node.setSelected(selected.filter((v) => v !== selection.value));
-                            });
-                        }
-                        else {
-                            editor.update(() => {
-                                const node = $getNodeByKey(nodeKey);
-                                if (!$isProblemSelectNode(node)) {
-                                    return;
-                                }
-                                if (hasMultipleAnswers) {
-                                    node.setSelected([...selected, selection.value]);
-                                }
-                                else {
-                                    node.setSelected([selection.value]);
-                                }
-                            });
-                        }
-                    } }, index)))] }));
+              ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uC81C\uC785\uB2C8\uB2E4."] })), selections.map((selection, index) => (_jsx(SelectBoxView, { index: index + 1, isAnswer: showQuizSolution ? selection.isAnswer : undefined, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: freezeProblemNode
+                        ? undefined
+                        : () => {
+                            const isSelected = selected.includes(selection.value);
+                            if (isSelected) {
+                                editor.update(() => {
+                                    const node = $getNodeByKey(nodeKey);
+                                    if (!$isProblemSelectNode(node)) {
+                                        return;
+                                    }
+                                    node.setSelected(selected.filter((v) => v !== selection.value));
+                                });
+                            }
+                            else {
+                                editor.update(() => {
+                                    const node = $getNodeByKey(nodeKey);
+                                    if (!$isProblemSelectNode(node)) {
+                                        return;
+                                    }
+                                    if (hasMultipleAnswers) {
+                                        node.setSelected([...selected, selection.value]);
+                                    }
+                                    else {
+                                        node.setSelected([selection.value]);
+                                    }
+                                });
+                            }
+                        } }, index)))] }));
     }
     // 교사 edit view
     return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `

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

@@ -21,12 +21,12 @@ 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, } from "../../../../icons";
+import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, } from "../../../../icons";
 import { ZINDEX } from "../../../../utils/zIndex";
 import { css, useTheme } from "@emotion/react";
 import { INSERT_PROBLEM_INPUT_COMMAND } from "../ProblemInputPlugin";
 import { INSERT_PROBLEM_SELECT_COMMAND } from "../ProblemSelectPlugin";
-import { INSERT_LAYOUT_COMMAND } from "../LayoutPlugin/LayoutPlugin";
+import { INSERT_LAYOUT_COMMAND } from "../LayoutPlugin";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
@@ -197,11 +197,11 @@ export function getBaseOptions(props) {
             onSelect: () => setImageOpen(true),
         }),
     ];
-    // 로컬스토리지 devMode가 true이면 칼럼 나누기 컨텍스트 메뉴를 추가합니다.
+    // 로컬스토리지 devMode가 true이면 칼럼 컨텍스트 메뉴를 추가합니다.
     const isDevMode = localStorage.getItem("devMode") === "true";
     if (isDevMode) {
-        baseOptions.push(new ComponentPickerOption("칼럼 나누기", {
-            icon: _jsx("i", { className: "icon columns" }),
+        baseOptions.push(new ComponentPickerOption("칼럼", {
+            icon: _jsx(LayoutColumnLineIcon, {}),
             keywords: ["columns", "layout", "grid"],
             onSelect: () => editor.dispatchCommand(INSERT_LAYOUT_COMMAND, "1fr 1fr"),
         }));

package/package.json

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

package/dist/patterns/LexicalEditor/plugins/LayoutPlugin/InsertLayoutDialog.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import { LexicalEditor } from "lexical";
-export declare const LAYOUTS: {
-    label: string;
-    value: string;
-}[];
-export default function InsertLayoutDialog({ activeEditor, onClose, }: {
-    activeEditor: LexicalEditor;
-    onClose: () => void;
-}): JSX.Element;

package/dist/patterns/LexicalEditor/plugins/LayoutPlugin/InsertLayoutDialog.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { INSERT_LAYOUT_COMMAND } from "./LayoutPlugin";
-import Button from "../../../../components/Button";
-export const LAYOUTS = [
-    { label: "2 columns (equal width)", value: "1fr 1fr" },
-    { label: "2 columns (25% - 75%)", value: "1fr 3fr" },
-    { label: "3 columns (equal width)", value: "1fr 1fr 1fr" },
-    { label: "3 columns (25% - 50% - 25%)", value: "1fr 2fr 1fr" },
-    { label: "4 columns (equal width)", value: "1fr 1fr 1fr 1fr" },
-];
-export default function InsertLayoutDialog({ activeEditor, onClose, }) {
-    var _a;
-    const [layout, setLayout] = useState(LAYOUTS[0].value);
-    const buttonLabel = (_a = LAYOUTS.find((item) => item.value === layout)) === null || _a === void 0 ? void 0 : _a.label;
-    const onClick = () => {
-        activeEditor.dispatchCommand(INSERT_LAYOUT_COMMAND, LAYOUTS[0].value);
-        onClose();
-    };
-    return (_jsx(_Fragment, { children: _jsx(Button, Object.assign({ onClick: onClick, color: "grey", size: "small", label: undefined }, { children: "Insert" })) }));
-}