@team-monolith/cds 1.114.0 → 1.114.2

package/dist/patterns/LexicalEditor/components/InsertImageDialog/InsertImageDialog.js

@@ -7,19 +7,19 @@ import { useForm } from "react-hook-form";
 import { FileSelectInput } from "../FileSelectInput";
 import { Button } from "../../../..";
 import { FormInput } from "../../nodes/Form";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { ImagePreview } from "./ImagePreview";
 import { ImageNotAvailable } from "../../nodes/ImageNode/ImageNotAvailable";
 import styled from "@emotion/styled";
+import { debounce } from "lodash";
 export function InsertImageDialog(props) {
     const { title, open, onClose, imageProps, onChange, onDelete, shouldReset } = props;
     const theme = useTheme();
-    const { control, setValue, watch, reset, handleSubmit } = useForm({
+    const { control, setValue, watch, reset, handleSubmit, subscribe } = useForm({
         defaultValues: imageProps !== null && imageProps !== void 0 ? imageProps : { src: "", altText: "" },
     });
     const handleOnClose = () => {
         if (shouldReset) {
-            setPreviewSrc("");
             reset();
         }
         onClose();
@@ -32,18 +32,24 @@ export function InsertImageDialog(props) {
     // 두 값은 시멘틱이 다르므로 독립적인 state로 관리합니다.
     const [previewSrc, setPreviewSrc] = useState(watch("src"));
     const isDisabled = watch("src") === "";
+    const debouncedSetPreviewSrc = useMemo(() => debounce((value) => setPreviewSrc(value), 500), []);
+    useEffect(() => {
+        const unsubscribe = subscribe({
+            name: "src",
+            formState: { values: true },
+            callback: ({ values }) => {
+                debouncedSetPreviewSrc(values.src);
+            },
+        });
+        return () => unsubscribe();
+    }, [debouncedSetPreviewSrc, subscribe]);
     return (_jsxs(StyledAlertDialog, { component: "form", icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, onSubmit: (e) => {
             // nested form 구조라서 submit이벤트 전파를 막습니다.
             e.stopPropagation();
             handleSubmit(onSubmit)();
         }, disableIconPadding: true, children: [_jsx(StyledAlertDialogTitle, { onClose: handleOnClose, children: title }), _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(FileSelectInput, { onChange: (value) => {
                                 setValue("src", value);
-                                setPreviewSrc(value);
-                            }, fileType: "image" }), _jsx(FormInput, { name: "src", control: control, placeholder: "https://www.pexels.com/photo/n-2848492", size: "medium", label: "URL", fullWidth: true, startIcon: _jsx(LinkIcon, {}), inputProps: {
-                                onBlur: () => {
-                                    setPreviewSrc(watch("src"));
-                                },
-                            } }), previewSrc && (_jsx(ImagePreview, { src: previewSrc, alt: watch("altText"), fallback: _jsx(ImageNotAvailable, {}) })), _jsx(FormInput, { name: "altText", control: control, placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", size: "medium", label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", fullWidth: true })] }) }), _jsxs(AlertDialogActions, { children: [_jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }), onDelete && (_jsx(Button, { color: "danger", size: "medium", fullWidth: true, label: "\uC0AD\uC81C\uD558\uAE30", onClick: onDelete }))] })] }));
+                            }, fileType: "image" }), _jsx(FormInput, { name: "src", control: control, placeholder: "https://www.pexels.com/photo/n-2848492", size: "medium", label: "URL", fullWidth: true, startIcon: _jsx(LinkIcon, {}) }), previewSrc && (_jsx(ImagePreview, { src: previewSrc, alt: watch("altText"), fallback: _jsx(ImageNotAvailable, {}) })), _jsx(FormInput, { name: "altText", control: control, placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", size: "medium", label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", fullWidth: true })] }) }), _jsxs(AlertDialogActions, { children: [_jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled }), onDelete && (_jsx(Button, { color: "danger", size: "medium", fullWidth: true, label: "\uC0AD\uC81C\uD558\uAE30", onClick: onDelete }))] })] }));
 }
 const StyledAlertDialog = styled(AlertDialog) `
   gap: 16px;

package/dist/patterns/LexicalEditor/components/InsertVideoDialog/InsertVideoDialog.js

@@ -13,13 +13,12 @@ import { debounce } from "lodash";
 export function InsertVideoDialog(props) {
     const { title, open, onClose, videoProps, onChange, onDelete, shouldReset } = props;
     const theme = useTheme();
-    const { control, watch, reset, handleSubmit } = useForm({
+    const { control, watch, reset, handleSubmit, subscribe } = useForm({
         defaultValues: videoProps !== null && videoProps !== void 0 ? videoProps : { src: "" },
         mode: "onChange",
     });
     const handleOnClose = () => {
         if (shouldReset) {
-            setPreviewSrc("");
             reset();
         }
         onClose();
@@ -33,20 +32,23 @@ export function InsertVideoDialog(props) {
     const [previewSrc, setPreviewSrc] = useState(watch("src"));
     const videoCanPlay = ReactPlayer.canPlay(previewSrc);
     const debouncedSetPreviewSrc = useMemo(() => debounce((value) => setPreviewSrc(value), 500), []);
-    useEffect(() => () => {
-        debouncedSetPreviewSrc.cancel();
-    }, [debouncedSetPreviewSrc]);
+    useEffect(() => {
+        const unsubscribe = subscribe({
+            name: "src",
+            formState: { values: true },
+            callback: ({ values }) => {
+                debouncedSetPreviewSrc(values.src);
+            },
+        });
+        return () => unsubscribe();
+    }, [debouncedSetPreviewSrc, subscribe]);
     return (_jsxs(StyledAlertDialog, { component: "form", icon: _jsx(VideoLineIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, onSubmit: (e) => {
             // nested form 구조라서 submit이벤트 전파를 막습니다.
             e.stopPropagation();
             handleSubmit(onSubmit)();
         }, disableIconPadding: true, children: [_jsx(StyledAlertDialogTitle, { onClose: handleOnClose, children: title }), _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(FormInput, { name: "src", control: control, rules: {
                                 validate: (value) => ReactPlayer.canPlay(value) || "올바른 동영상 URL을 입력하세요.",
-                            }, placeholder: "https://example.com/video.mp4", size: "medium", label: "URL", fullWidth: true, startIcon: _jsx(LinkIcon, {}), onAfterChange: (value) => debouncedSetPreviewSrc(value), inputProps: {
-                                onBlur: () => {
-                                    setPreviewSrc(watch("src"));
-                                },
-                            } }), videoCanPlay && (_jsx(ReactPlayer, { css: css `
+                            }, placeholder: "https://example.com/video.mp4", size: "medium", label: "URL", fullWidth: true, startIcon: _jsx(LinkIcon, {}) }), videoCanPlay && (_jsx(ReactPlayer, { css: css `
                 background: black;
               `, width: "100%", url: previewSrc, controls: true, config: {
                                 file: {

package/dist/patterns/LexicalEditor/nodes/Form/FormInput.d.ts

@@ -8,7 +8,5 @@ export type FormInputProps<T extends FieldValues, TName extends FieldPath<T>> =
     rules?: ControllerProps<T, TName>["rules"];
     /** html event에서 얻은 value를 form에 주입하기 전에 변환합니다. */
     transform?: (value: string) => unknown;
-    /** react-hook-form onChange후 호출되는 콜백 */
-    onAfterChange?: (value: string) => void;
 };
 export declare function FormInput<T extends FieldValues, TName extends FieldPath<T>>(props: FormInputProps<T, TName>): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/Form/FormInput.js

@@ -14,13 +14,11 @@ import { ErrorWarningFillIcon, Input } from "../../../..";
 import { Controller, } from "react-hook-form";
 import { useState } from "react";
 export function FormInput(props) {
-    const { name, control, rules, baseColor = "default", transform = (value) => value, onAfterChange } = props, inputComponentProps = __rest(props, ["name", "control", "rules", "baseColor", "transform", "onAfterChange"]);
+    const { name, control, rules, baseColor = "default", transform = (value) => value } = props, inputComponentProps = __rest(props, ["name", "control", "rules", "baseColor", "transform"]);
     const [inputFocused, setInputFocused] = useState(false);
     return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => {
             const onChangeHandler = (e) => {
-                const nextValue = transform(e.target.value);
-                onChange(nextValue);
-                onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(nextValue);
+                onChange(transform(e.target.value));
             };
             // multiline 여부에 따라 inputProps의 type이 변경되므로 (union type)
             // type-safety를 보장하기 위해 if 문을 분기하여 inputProps에 `name` 을 추가합니다.

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

@@ -336,7 +336,7 @@ export function ComponentPickerMenuPlugin(props) {
                     option.keywords.some((keyword) => regex.test(keyword)))),
         ];
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [editor, queryString, setImageOpen]);
+    }, [editor, queryString]);
     const onSelectOption = useCallback((selectedOption, nodeToRemove, closeMenu, matchingString) => {
         if (selectedOption instanceof ComponentDrawerOption) {
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.114.0",
+  "version": "1.114.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -20,7 +20,7 @@
     "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.48.2",
+    "react-hook-form": "^7.55.0",
     "react-player": "^2.16.0",
     "remixicon": "^4.3.0",
     "typescript": "~5.5.4",