@team-monolith/cds 1.114.1 → 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

@@ -19,7 +19,6 @@ export function InsertVideoDialog(props) {
     });
     const handleOnClose = () => {
         if (shouldReset) {
-            setPreviewSrc("");
             reset();
         }
         onClose();
@@ -49,11 +48,7 @@ export function InsertVideoDialog(props) {
             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, {}), 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/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.1",
+  "version": "1.114.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,