@team-monolith/cds 1.8.0 → 1.8.2

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.d.ts

@@ -1,4 +1,5 @@
-import { NodeKey, SerializedLexicalNode } from "lexical";
+import { NodeKey, SerializedLexicalNode, Spread } from "lexical";
+import { ProblemInputNode } from "./ProblemInputNode";
 export interface Answer {
     textType: "normal" | "code";
     value: string;
@@ -10,7 +11,7 @@ export interface ProblemInputPayload {
     showCharacterCount: boolean;
     placeholder: string;
 }
-export type SerializedProblemInputNode = SerializedLexicalNode & ProblemInputPayload;
+export type SerializedProblemInputNode = Spread<ProblemInputPayload, SerializedLexicalNode>;
 export declare function InputComponent(props: {
-    data: ProblemInputPayload;
+    node: ProblemInputNode;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, useTheme } from "@emotion/react";
-import { $getSelection } from "lexical";
 import { Suspense, useState } from "react";
 import { useForm, useFieldArray } from "react-hook-form";
 import Input from "../../../../components/Input";
@@ -14,15 +13,16 @@ import Tooltip from "../../../../components/Tooltip";
 import { FormAnswer, FormCharacterCount, FormPlaceholder } from "./Form";
 import useLexicalEditable from "@lexical/react/useLexicalEditable";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $createProblemInputNode } from "./ProblemInputNode";
 export function InputComponent(props) {
     var _a;
     const theme = useTheme();
-    const { data } = props;
-    const { answers, showCharacterCount, placeholder } = data;
+    const { node } = props;
+    const [editor] = useLexicalComposerContext();
+    const answers = node.getAnswers();
+    const showCharacterCount = node.getShowCharacterCount();
+    const placeholder = node.getPlaceholder();
     const [settingOpen, setSettingOpen] = useState(false);
     const [multiAnswerDisabled, setMultiAnswerDisabled] = useState(showCharacterCount);
-    const [editor] = useLexicalComposerContext();
     const isEditable = useLexicalEditable();
     const { control, handleSubmit, getValues } = useForm({
         defaultValues: {
@@ -39,10 +39,9 @@ export function InputComponent(props) {
     });
     const onSettingSubmit = (data) => {
         editor.update(() => {
-            var _a;
-            const newNode = $createProblemInputNode(Object.assign({}, data));
-            const currentNode = (_a = $getSelection()) === null || _a === void 0 ? void 0 : _a.getNodes()[0];
-            currentNode === null || currentNode === void 0 ? void 0 : currentNode.replace(newNode);
+            node.setAnswers(data.answers);
+            node.setShowCharacterCount(data.showCharacterCount);
+            node.setPlaceholder(data.placeholder);
         });
         setSettingOpen(false);
     };

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

@@ -6,7 +6,12 @@ export declare class ProblemInputNode extends DecoratorNode<ReactNode> {
     __showCharacterCount: boolean;
     __placeholder: string;
     static getType(): string;
-    get data(): ProblemInputPayload;
+    getAnswers(): Answer[];
+    getShowCharacterCount(): boolean;
+    getPlaceholder(): string;
+    setAnswers(answers: Answer[]): void;
+    setShowCharacterCount(showCharacterCount: boolean): void;
+    setPlaceholder(placeholder: string): void;
     static clone(node: ProblemInputNode): ProblemInputNode;
     constructor(answers: Answer[], showCharacterCount: boolean, placeholder: string, key?: NodeKey);
     createDOM(config: EditorConfig): HTMLElement;

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

@@ -6,14 +6,26 @@ export class ProblemInputNode extends DecoratorNode {
     static getType() {
         return "problem-input";
     }
-    get data() {
-        //fixme: 필요할 때 수정
-        //const self = this.getLatest();
-        return {
-            answers: this.__answers,
-            showCharacterCount: this.__showCharacterCount,
-            placeholder: this.__placeholder,
-        };
+    getAnswers() {
+        return this.__answers;
+    }
+    getShowCharacterCount() {
+        return this.__showCharacterCount;
+    }
+    getPlaceholder() {
+        return this.__placeholder;
+    }
+    setAnswers(answers) {
+        const self = this.getWritable();
+        self.__answers = answers;
+    }
+    setShowCharacterCount(showCharacterCount) {
+        const self = this.getWritable();
+        self.__showCharacterCount = showCharacterCount;
+    }
+    setPlaceholder(placeholder) {
+        const self = this.getWritable();
+        self.__placeholder = placeholder;
     }
     static clone(node) {
         return $createProblemInputNode({
@@ -56,8 +68,11 @@ export class ProblemInputNode extends DecoratorNode {
             placeholder: this.__placeholder,
         };
     }
+    // TODO: 이 노드의 selected가 제대로 동작하지 않습니다.
+    // nodeKey를 전달하고 getNodeByKey로 노드를 찾는 것이 일반적이나
+    // 현재 이 노드가 selected가 제대로 동작하지 않아서 노드를 직접 전달했습니다.
     decorate() {
-        return _jsx(InputComponent, { data: this.data });
+        return _jsx(InputComponent, { node: this });
     }
 }
 export function $createProblemInputNode({ key, answers, showCharacterCount, placeholder, }) {

package/package.json

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