@team-monolith/cds 1.9.3 → 1.9.4

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

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

package/dist/patterns/LexicalEditor/LexicalCustomConfigContext.js

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

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

@@ -8,6 +8,9 @@ export interface LexicalEditorProps {
      *  initialConfig에 전달되므로 마운트 된 이후 수정해도 반영되지 않음
      */
     editable?: boolean;
+    /** freeze. 문제 블록을 수정하지 못하도록 함
+     */
+    freezeProblemNode?: boolean;
     /** 외부에서 플러그인을 주입하는 경우 활용함 */
     children?: JSX.Element | string | (JSX.Element | string)[];
 }

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -11,6 +11,7 @@ import { getTheme } from "./theme";
 import { useTheme } from "@emotion/react";
 import Plugins from "./Plugins";
 import { ColoredQuoteNode, ProblemInputNode } from "./nodes";
+import { LexicalCustomConfigContext } from "./LexicalCustomConfigContext";
 import { ProblemSelectNode } from "./nodes/ProblemSelectNode";
 function validateValue(value) {
     var _a, _b;
@@ -29,7 +30,7 @@ function validateValue(value) {
     return true;
 }
 export function LexicalEditor(props) {
-    const { className, value, onChange, editable = true, children } = props;
+    const { className, value, onChange, editable = true, freezeProblemNode, children, } = props;
     const theme = useTheme();
     const initialConfig = {
         namespace: "CodleLexicalEditor",
@@ -62,5 +63,5 @@ export function LexicalEditor(props) {
         editorState: validateValue(value) ? JSON.stringify(value) : undefined,
         editable: editable,
     };
-    return (_jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, onChange: onChange }), _jsx(_Fragment, { children: children })] })));
+    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, onChange: onChange }), _jsx(_Fragment, { children: children })] })) })));
 }

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

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import Input from "../../../../components/Input";
 import SquareButton from "../../../../components/SquareButton";
 import { Settings3FillIcon } from "../../../../icons";
@@ -22,6 +22,7 @@ import useLexicalEditable from "@lexical/react/useLexicalEditable";
 import { $isProblemInputNode } from "./ProblemInputNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey } from "lexical";
+import { LexicalCustomConfigContext, } from "../../LexicalCustomConfigContext";
 export function InputComponent(props) {
     const { answer } = props, settingFormProps = __rest(props, ["answer"]);
     const { placeholder, nodeKey } = settingFormProps;
@@ -29,23 +30,29 @@ export function InputComponent(props) {
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
     const [answerInput, setAnswerInput] = useState(answer);
+    const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
     // 학생 view
     // TODO: "글자 수대로" 옵션시에 글자 수대로 입력칸을 표시해야 합니다.
     if (!isEditable) {
-        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);
-                    });
-                },
-            }, color: "default", fullWidth: true }));
+        if (lexicalCustomConfig.freezeProblemNode) {
+            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);
+                        });
+                    },
+                }, color: "default", fullWidth: true }));
+        }
     }
     // 교사 edit view
     return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `

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

@@ -0,0 +1,9 @@
+/**
+ * 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 { ReactElement } from "react";
+export default function ActionsPlugin(): ReactElement;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { mergeRegister } from "@lexical/utils";
+import { useEffect, useState } from "react";
+import { Button, LockFillIcon, LockUnlockFillIcon } from "../../../..";
+export default function ActionsPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+    useEffect(() => {
+        return mergeRegister(editor.registerEditableListener((editable) => {
+            setIsEditable(editable);
+        }));
+    }, [editor]);
+    return (_jsx(Button, { color: "primary", size: "small", startIcon: isEditable ? _jsx(LockFillIcon, {}) : _jsx(LockUnlockFillIcon, {}), onClick: () => {
+            editor.setEditable(!editor.isEditable());
+        }, title: "Read-Only Mode", label: `${!isEditable ? "수정 모드" : "읽기 모드"}로 변경`, "aria-label": `${!isEditable ? "Unlock" : "Lock"} read-only mode` }));
+}

package/package.json

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