@team-monolith/cds 1.47.1 → 1.49.0

package/dist/CodleDesignSystemProvider.js

@@ -30,11 +30,11 @@ export const light = {
             success: COLOR.green07,
             successActive: COLOR.green08,
             successDisabled: COLOR.green03,
-            info: COLOR.teal08,
-            infoActive: COLOR.teal09,
+            info: COLOR.teal06,
+            infoActive: COLOR.teal08,
             infoDisabled: COLOR.teal02,
-            warning: COLOR.yellow08,
-            warningActive: COLOR.yellow09,
+            warning: COLOR.yellow06,
+            warningActive: COLOR.yellow08,
             warningDisabled: COLOR.yellow02,
             inverse: COLOR.black,
             inverseActive: COLOR.grey08,
@@ -141,11 +141,11 @@ export const dark = {
             success: COLOR.green04,
             successActive: COLOR.green03,
             successDisabled: COLOR.green08,
-            info: COLOR.teal03,
-            infoActive: COLOR.teal02,
-            infoDisabled: COLOR.teal09,
-            warning: COLOR.yellow03,
-            warningActive: COLOR.yellow02,
+            info: COLOR.teal06,
+            infoActive: COLOR.teal08,
+            infoDisabled: COLOR.teal02,
+            warning: COLOR.yellow08,
+            warningActive: COLOR.yellow06,
             warningDisabled: COLOR.yellow09,
             inverse: COLOR.white,
             inverseActive: COLOR.grey03,

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -15,6 +15,7 @@ import { LexicalCustomConfigContext } from "./LexicalCustomConfigContext";
 import { ProblemSelectNode } from "./nodes/ProblemSelectNode";
 import { LayoutContainerNode } from "./nodes/LayoutContainerNode";
 import { LayoutItemNode } from "./nodes/LayoutItemNode";
+import _ from "lodash";
 function validateValue(value) {
     var _a, _b;
     if (value && typeof value !== "object") {
@@ -31,6 +32,25 @@ function validateValue(value) {
     }
     return true;
 }
+/** undefined value를 제외한 객체 일치 여부를 판단합니다. */
+function isCleanEqualObjects(oldObj, newObj) {
+    const cleanedOldObj = getCleanObject(oldObj);
+    const cleanedNewObj = getCleanObject(newObj);
+    return _.isEqual(cleanedOldObj, cleanedNewObj);
+}
+/** 객체 내에 undefined value를 갖는 key를 재귀적으로 모두 제거합니다. */
+function getCleanObject(obj) {
+    const newObj = _.cloneDeep(obj);
+    for (const key in newObj) {
+        if (newObj[key] === undefined) {
+            delete newObj[key];
+        }
+        else if (_.isObject(newObj[key])) {
+            newObj[key] = getCleanObject(newObj[key]);
+        }
+    }
+    return newObj;
+}
 export function LexicalEditor(props) {
     const { className, contentEditableClassName, value, onChange, editable = true, showQuizSolution = false, freezeProblemNode = false, isQuizEnabled = false, children, } = props;
     const theme = useTheme();
@@ -67,5 +87,17 @@ export function LexicalEditor(props) {
         editorState: validateValue(value) ? JSON.stringify(value) : undefined,
         editable: editable,
     };
-    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 })] })) })));
+    /** onChangeHandler 도입 배경
+     * LayoutPlugIn이 알기 힘든 이슈로 blocks value중 indent key 등을 undefined로 만듭니다.
+     * 이로 인해, 렉시컬 RHF 폼에서 유저 상호작용 없이도 dirtyFields가 무의미하게 변화하게 되어, UX에 문제가 생깁니다.
+     * 이를 해결하기 위해, 유의미한 변경이 일어났을 때만 onChange를 호출합니다.
+     */
+    const onChangeHandler = onChange
+        ? (blocks) => {
+            if (!isCleanEqualObjects(value, blocks)) {
+                onChange(blocks);
+            }
+        }
+        : undefined;
+    return (_jsx(LexicalCustomConfigContext.Provider, Object.assign({ value: { freezeProblemNode, showQuizSolution } }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, contentEditableClassName: contentEditableClassName, onChange: onChangeHandler, isQuizEnabled: isQuizEnabled }), _jsx(_Fragment, { children: children })] })) })));
 }

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

@@ -2,4 +2,4 @@
 import { LexicalCommand } from "lexical";
 import { ProblemSelectPayload } from "../../nodes/ProblemSelectNode";
 export declare const INSERT_PROBLEM_SELECT_COMMAND: LexicalCommand<ProblemSelectPayload>;
-export default function ProblemInputPlugin(): JSX.Element | null;
+export default function ProblemSelectPlugin(): JSX.Element | null;

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

@@ -4,7 +4,7 @@ import { COMMAND_PRIORITY_EDITOR, createCommand, } from "lexical";
 import { useEffect } from "react";
 import { $createProblemSelectNode, ProblemSelectNode, } from "../../nodes/ProblemSelectNode";
 export const INSERT_PROBLEM_SELECT_COMMAND = createCommand("INSERT_PROBLEM_SELECT_COMMAND");
-export default function ProblemInputPlugin() {
+export default function ProblemSelectPlugin() {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
         if (!editor.hasNodes([ProblemSelectNode])) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.47.1",
+  "version": "1.49.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -15,6 +15,7 @@
     "@types/react-dom": "^18.2.13",
     "hex-to-css-filter": "^5.4.0",
     "lexical": "^0.12.4",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",