@team-monolith/cds 1.113.2 → 1.114.1

package/dist/patterns/LexicalEditor/Plugins.js

@@ -19,6 +19,7 @@ import { ComponentPickerMenuPlugin } from "./plugins/ComponentPickerMenuPlugin";
 import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { FloatingTextFormatToolbarPlugin } from "./plugins/FloatingTextFormatToolbarPlugin";
 import { ImagesPlugin } from "./plugins/ImagesPlugin";
+import { VideosPlugin } from "./plugins/VideosPlugin";
 import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
 import hr from "./hr.svg";
 import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
@@ -51,46 +52,46 @@ export function Plugins(props) {
                     onChange === null || onChange === void 0 ? void 0 : onChange(editorState.toJSON());
                 }, 
                 // ignore 하지 않으면 Form에서 수정하지 않았는데 Dirty로 처리됨.
-                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(MarkdownShortcutPlugin, { transformers: CUSTOM_TRANSFORMERS }), _jsx(HistoryPlugin, {}), _jsx(ParagraphPlaceholderPlugin, { placeholder: "\uBA85\uB839\uC5B4 \uC0AC\uC6A9 \uC2DC\uC5D0\uB294 '/'\uB97C \uB204\uB974\uC138\uC694. \uBE14\uB85D\uC5D0 \uB9C8\uC6B0\uC2A4\uB97C \uC62C\uB824 \uB098\uD0C0\uB098\uB294 '+'\uB97C \uD074\uB9AD\uD558\uBA74 \uC544\uB798\uC5D0 \uBE14\uB85D\uC744 \uCD94\uAC00\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." })] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(ClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(FilePlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {}), _jsx(SelfEvaluationPlugin, {}), _jsx(AutoLinkPlugin, {})] }));
+                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(MarkdownShortcutPlugin, { transformers: CUSTOM_TRANSFORMERS }), _jsx(HistoryPlugin, {}), _jsx(ParagraphPlaceholderPlugin, { placeholder: "\uBA85\uB839\uC5B4 \uC0AC\uC6A9 \uC2DC\uC5D0\uB294 '/'\uB97C \uB204\uB974\uC138\uC694. \uBE14\uB85D\uC5D0 \uB9C8\uC6B0\uC2A4\uB97C \uC62C\uB824 \uB098\uD0C0\uB098\uB294 '+'\uB97C \uD074\uB9AD\uD558\uBA74 \uC544\uB798\uC5D0 \uBE14\uB85D\uC744 \uCD94\uAC00\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." })] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(ClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(VideosPlugin, {}), _jsx(FilePlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {}), _jsx(SelfEvaluationPlugin, {}), _jsx(AutoLinkPlugin, {})] }));
 }
-const ScrollArea = styled.div `
-  min-height: 150px;
-  border: 0;
-  display: flex;
-  position: relative;
-  outline: 0;
-  z-index: 0;
-  overflow: auto;
+const ScrollArea = styled.div `
+  min-height: 150px;
+  border: 0;
+  display: flex;
+  position: relative;
+  outline: 0;
+  z-index: 0;
+  overflow: auto;
 `;
-const FloatingAnchor = styled.div `
-  flex: auto;
-  position: relative;
-  z-index: -1;
+const FloatingAnchor = styled.div `
+  flex: auto;
+  position: relative;
+  z-index: -1;
 `;
 const StyledContentEditable = styled(ContentEditable, {
     shouldForwardProp: (prop) => prop !== "isEditable",
-}) `
-  border: 0;
-  font-size: 15px;
-  display: block;
-  position: relative;
-  outline: 0;
-  // ComponentAdder 를 위한 공간
-  ${({ isEditable }) => isEditable && "padding-left: 64px;"}
-  // ScrollArea에서 스크롤이 발생해도 64px 더 아래로 내릴 수 있도록 합니다.
-  padding-bottom: 64px;
-  min-height: 150px;
-
-  hr {
-    // HorizontalRuleNode는 Lexical theme에 등록되어 있지 않습니다.
-    // 따라서 hr 태그를 직접 조작합니다.
-
-    // FloatingMenu가 올바른 위치에 붙으려면 충분한 높이를 가져야합니다.
-    // HR 태그에서 border를 이용해서 중심에 선을 그리기 어렵습니다.
-    // hr svg는 1px 높이의 svg입니다.
-    // center 및 repeat-x를 지정하여 좌우로 긴 선을 그립니다.
-    height: 26px;
-    border: 0;
-    background: url(${hr}) center repeat-x;
-  }
+}) `
+  border: 0;
+  font-size: 15px;
+  display: block;
+  position: relative;
+  outline: 0;
+  // ComponentAdder 를 위한 공간
+  ${({ isEditable }) => isEditable && "padding-left: 64px;"}
+  // ScrollArea에서 스크롤이 발생해도 64px 더 아래로 내릴 수 있도록 합니다.
+  padding-bottom: 64px;
+  min-height: 150px;
+
+  hr {
+    // HorizontalRuleNode는 Lexical theme에 등록되어 있지 않습니다.
+    // 따라서 hr 태그를 직접 조작합니다.
+
+    // FloatingMenu가 올바른 위치에 붙으려면 충분한 높이를 가져야합니다.
+    // HR 태그에서 border를 이용해서 중심에 선을 그리기 어렵습니다.
+    // hr svg는 1px 높이의 svg입니다.
+    // center 및 repeat-x를 지정하여 좌우로 긴 선을 그립니다.
+    height: 26px;
+    border: 0;
+    background: url(${hr}) center repeat-x;
+  }
 `;

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

@@ -70,32 +70,32 @@ export function FileSelectInput(props) {
     return (_jsxs(_Fragment, { children: [_jsxs(Container, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", onClick: () => {
                             var _a;
                             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                        }, startIcon: _jsx(UploadLineIcon, {}), bold: bold }), _jsx(IconAndErrorMessage, { children: errorMessage && (_jsxs(_Fragment, { children: [_jsx(FileWarningLineIcon, { css: css `
-                  padding: 0 4px;
-                  width: 24px;
-                  height: 24px;
-                  color: ${theme.color.background.danger};
+                        }, startIcon: _jsx(UploadLineIcon, {}), bold: bold }), _jsx(IconAndErrorMessage, { children: errorMessage && (_jsxs(_Fragment, { children: [_jsx(FileWarningLineIcon, { css: css `
+                  padding: 0 4px;
+                  width: 24px;
+                  height: 24px;
+                  color: ${theme.color.background.danger};
                 ` }), _jsx(ErrorMessage, { children: errorMessage })] })) })] }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: accept, onChange: handleFileChange })] }));
 }
-const HiddenInput = styled.input `
-  display: none;
+const HiddenInput = styled.input `
+  display: none;
 `;
-const ErrorMessage = styled.div(({ theme }) => css `
-    color: ${theme.color.foreground.danger};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
+const ErrorMessage = styled.div(({ theme }) => css `
+    color: ${theme.color.foreground.danger};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
   `);
-const Container = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 `;
-const IconAndErrorMessage = styled.div `
-  padding-left: 8px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
+const IconAndErrorMessage = styled.div `
+  padding-left: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
 `;

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

@@ -6,8 +6,8 @@ export function ImagePreview(props) {
     const [erroredSrc, setErroredSrc] = useState(null);
     return (_jsxs(Container, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", erroredSrc === src ? (fallback) : (_jsx("img", { src: src, alt: alt, onError: () => setErroredSrc(src) }))] }));
 }
-const Container = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 `;

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

@@ -18,15 +18,18 @@ export function InsertImageDialog(props) {
         defaultValues: imageProps !== null && imageProps !== void 0 ? imageProps : { src: "", altText: "" },
     });
     const handleOnClose = () => {
-        if (shouldReset)
+        if (shouldReset) {
+            setPreviewSrc("");
             reset();
+        }
         onClose();
     };
     const onSubmit = (data) => {
         onChange(data);
         handleOnClose();
     };
-    // 미리보기할 src를 저장합니다. watch("src")는 너무 자주 바뀌기 때문에 사용하지 않습니다.
+    // src는 입력 필드에 실시간으로 반영되는 값이고 previewSrc는 입력이 끝난 뒤 미리보기 영역에 표시할 URL입니다.
+    // 두 값은 시멘틱이 다르므로 독립적인 state로 관리합니다.
     const [previewSrc, setPreviewSrc] = useState(watch("src"));
     const isDisabled = watch("src") === "";
     return (_jsxs(StyledAlertDialog, { component: "form", icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, onSubmit: (e) => {
@@ -42,21 +45,21 @@ export function InsertImageDialog(props) {
                                 },
                             } }), 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;
+const StyledAlertDialog = styled(AlertDialog) `
+  gap: 16px;
 `;
-const StyledAlertDialogTitle = styled(AlertDialogTitle)(({ theme }) => css `
-    color: ${theme.color.foreground.neutralBase};
-    text-align: center;
-    font-family: ${theme.fontFamily.ui};
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 28px;
-    letter-spacing: 0.25px;
+const StyledAlertDialogTitle = styled(AlertDialogTitle)(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBase};
+    text-align: center;
+    font-family: ${theme.fontFamily.ui};
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 28px;
+    letter-spacing: 0.25px;
   `);
-const Inputs = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+const Inputs = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 `;

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

@@ -0,0 +1,15 @@
+export interface VideoProps {
+    src: string;
+}
+export interface InsertVideoDialogProps {
+    title: string;
+    open: boolean;
+    onClose: () => void;
+    videoProps?: VideoProps;
+    onChange: (props: VideoProps) => void;
+    /** 전달하면 "삭제하기" 버튼이 생깁니다. */
+    onDelete?: () => void;
+    /** 닫을 때마다 폼을 최초 상태로 초기화합니다. */
+    shouldReset?: boolean;
+}
+export declare function InsertVideoDialog(props: InsertVideoDialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import { VideoLineIcon, LinkIcon } from "../../../../icons";
+import { AlertDialog, AlertDialogActions, AlertDialogContent, AlertDialogTitle, } from "../../../../components/AlertDialog";
+import { Button } from "../../../..";
+import { FormInput } from "../../nodes/Form";
+import { useForm } from "react-hook-form";
+import ReactPlayer from "react-player";
+import styled from "@emotion/styled";
+import { useEffect, useMemo, useState } from "react";
+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, subscribe } = useForm({
+        defaultValues: videoProps !== null && videoProps !== void 0 ? videoProps : { src: "" },
+        mode: "onChange",
+    });
+    const handleOnClose = () => {
+        if (shouldReset) {
+            setPreviewSrc("");
+            reset();
+        }
+        onClose();
+    };
+    const onSubmit = (data) => {
+        onChange(data);
+        handleOnClose();
+    };
+    // src는 입력 필드에 실시간으로 반영되는 값이고 previewSrc는 입력이 끝난 뒤 미리보기 영역에 표시할 URL입니다.
+    // 두 값은 시멘틱이 다르므로 독립적인 state로 관리합니다.
+    const [previewSrc, setPreviewSrc] = useState(watch("src"));
+    const videoCanPlay = ReactPlayer.canPlay(previewSrc);
+    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(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, {}), inputProps: {
+                                onBlur: () => {
+                                    setPreviewSrc(watch("src"));
+                                },
+                            } }), videoCanPlay && (_jsx(ReactPlayer, { css: css `
+                background: black;
+              `, width: "100%", url: previewSrc, controls: true, config: {
+                                file: {
+                                    hlsOptions: {
+                                        startLevel: 100,
+                                    },
+                                },
+                            } }))] }) }), _jsxs(AlertDialogActions, { children: [_jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: !videoCanPlay }), onDelete && (_jsx(Button, { color: "danger", size: "medium", fullWidth: true, label: "\uC0AD\uC81C\uD558\uAE30", onClick: onDelete }))] })] }));
+}
+const StyledAlertDialog = styled(AlertDialog) `
+  gap: 16px;
+`;
+const StyledAlertDialogTitle = styled(AlertDialogTitle)(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBase};
+    text-align: center;
+    font-family: ${theme.fontFamily.ui};
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 28px;
+    letter-spacing: 0.25px;
+  `);
+const Inputs = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;

package/dist/patterns/LexicalEditor/components/InsertVideoDialog/index.d.ts

@@ -0,0 +1 @@
+export * from "./InsertVideoDialog";

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

@@ -0,0 +1 @@
+export * from "./InsertVideoDialog";

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

@@ -54,6 +54,6 @@ export function UploadFileDialog({ open, onClose, onChange, }) {
     }, [open]);
     return (_jsx(HiddenInput, { ref: inputRef, type: "file", accept: "*", onChange: handleFileChange }));
 }
-const HiddenInput = styled.input `
-  display: none;
+const HiddenInput = styled.input `
+  display: none;
 `;

package/dist/patterns/LexicalEditor/hr.svg

@@ -1,3 +1,3 @@
-<svg width="521" height="1" viewBox="0 0 521 1" fill="none" xmlns="http://www.w3.org/2000/svg">
-<line y1="0.5" x2="521" y2="0.5" stroke="#9C9C9C"/>
-</svg>
+<svg width="521" height="1" viewBox="0 0 521 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="0.5" x2="521" y2="0.5" stroke="#9C9C9C"/>
+</svg>

package/dist/patterns/LexicalEditor/nodes/FileNode/FileComponent.js

@@ -45,9 +45,9 @@ export function FileComponent({ fileName, fileSize, nodeKey, fileUrl, fileUpload
     }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW)), [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected]);
     return (_jsx(_Fragment, { children: isEditable ? (_jsx(FileDetailContainer, { isSelected: isSelected, ref: ref, children: _jsxs(FileInfo, { children: [_jsx(IconContainer, { children: getFileIcon(fileName) }), _jsx(FileName, { children: _jsx(OverflowTooltip, { text: fileName }) }), _jsx(FileOptionalInfo, { children: fileUploadDate }), _jsxs(FileSize, { children: [(fileSize / (1024 * 1024)).toFixed(1), " MB"] })] }) })) : (_jsx(FileDownloadButton, { fileName: fileName, fileUrl: fileUrl, fileSize: fileSize })) }));
 }
-export const FileName = styled.div `
-  flex: 1;
-  overflow: hidden;
+export const FileName = styled.div `
+  flex: 1;
+  overflow: hidden;
 `;
 export function getFileIcon(fileName) {
     var _a;
@@ -85,51 +85,51 @@ export function getFileIcon(fileName) {
             return _jsx(CustomFilenameAllColorIcon, {});
     }
 }
-export const FileDetailContainer = styled.div(({ isSelected, theme }) => css `
-    display: flex;
-    flex-direction: column;
-    width: 620px;
-    min-width: 400px;
+export const FileDetailContainer = styled.div(({ isSelected, theme }) => css `
+    display: flex;
+    flex-direction: column;
+    width: 620px;
+    min-width: 400px;
     background: ${isSelected
     ? theme.color.background.neutralAltActive
-    : theme.color.background.neutralAlt};
-    border-radius: 10px;
+    : theme.color.background.neutralAlt};
+    border-radius: 10px;
   `);
-export const IconContainer = styled.div `
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
+export const IconContainer = styled.div `
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
 `;
-export const FileInfo = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 16px;
-    align-items: center;
-    height: 48px;
-    gap: 8px;
-    color: ${theme.color.foreground.neutralBase};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 20px; /* 125% */
-    border-radius: 10px;
-    cursor: pointer;
+export const FileInfo = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 16px;
+    align-items: center;
+    height: 48px;
+    gap: 8px;
+    color: ${theme.color.foreground.neutralBase};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 20px; /* 125% */
+    border-radius: 10px;
+    cursor: pointer;
   `);
-export const FileSize = styled.span(({ theme }) => css `
-    flex-shrink: 0;
-    margin-left: auto;
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
+export const FileSize = styled.span(({ theme }) => css `
+    flex-shrink: 0;
+    margin-left: auto;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
   `);
-export const FileOptionalInfo = styled.div(({ theme }) => css `
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    text-align: right;
-    flex-shrink: 0;
+export const FileOptionalInfo = styled.div(({ theme }) => css `
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    text-align: right;
+    flex-shrink: 0;
   `);

package/dist/patterns/LexicalEditor/nodes/FileNode/FileDownloadButton.js

@@ -57,30 +57,30 @@ export function FileDownloadButton({ fileName, fileSize, fileUrl, }) {
     });
     return (_jsxs(ButtonContainer, { onClick: handleDownload, theme: theme, children: [_jsx(IconContainer, { children: getFileIcon(fileName) }), _jsx(FileNameLabel, { children: _jsx(OverflowTooltip, { text: fileName }) }), _jsxs(FileSize, { children: [(fileSize / (1024 * 1024)).toFixed(1), " MB"] })] }));
 }
-const ButtonContainer = styled.button(({ theme }) => css `
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 16px;
-    height: 48px;
-    background-color: ${theme.color.background.neutralAlt};
-    border: none;
-    border-radius: 10px;
-    cursor: pointer;
-    color: ${theme.color.foreground.neutralBase};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 16px;
-    font-weight: 500;
-    font-style: normal;
-    line-height: 20px; /* 125% */
-    text-align: left;
-    overflow: hidden;
-
-    ${HOVER(css `
-      background: ${theme.color.background.neutralAltActive};
-      color: ${theme.color.foreground.neutralBaseActive};
-    `)}
+const ButtonContainer = styled.button(({ theme }) => css `
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    height: 48px;
+    background-color: ${theme.color.background.neutralAlt};
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    color: ${theme.color.foreground.neutralBase};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-weight: 500;
+    font-style: normal;
+    line-height: 20px; /* 125% */
+    text-align: left;
+    overflow: hidden;
+
+    ${HOVER(css `
+      background: ${theme.color.background.neutralAltActive};
+      color: ${theme.color.foreground.neutralBaseActive};
+    `)}
   `);
-const FileNameLabel = styled.div `
-  max-width: 152px;
+const FileNameLabel = styled.div `
+  max-width: 152px;
 `;

package/dist/patterns/LexicalEditor/nodes/ImageNode/ImageComponent.js

@@ -192,15 +192,15 @@ export function ImageComponent({ src, altText, nodeKey, width, height, maxWidth,
     if (!isEditable) {
         return (_jsx(Suspense, { fallback: null, children: _jsx("div", { draggable: draggable, children: isLoadError ? (_jsx(ImageNotAvailable, {})) : (_jsx(LazyImage, { className: isFocused
                         ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}`
-                        : null, css: css `
-                cursor: pointer;
+                        : null, css: css `
+                cursor: pointer;
               `, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth, onError: () => setIsLoadError(true), buttonProps: {
                         onClick: () => window.open(src, "_blank"),
                     }, title: "\uD074\uB9AD\uD574\uC11C \uC6D0\uBCF8 \uC774\uBBF8\uC9C0 \uBCF4\uAE30.", addtionalInfoLabel: _jsx("span", { css: VISUALLY_HIDDEN, children: "(\uC0C8 \uCC3D)" }) })) }) }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(Suspense, { fallback: null, children: _jsx("div", { draggable: draggable, css: css `
-              // ImageResizer를 위한 relative 설정입니다.
-              position: relative;
+    return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(Suspense, { fallback: null, children: _jsx("div", { draggable: draggable, css: css `
+              // ImageResizer를 위한 relative 설정입니다.
+              position: relative;
             `, children: isLoadError ? (_jsx(ImageNotAvailable, {})) : (_jsxs(_Fragment, { children: [_jsx(LazyImage, { className: isFocused
                                             ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}`
                                             : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth, onError: () => setIsLoadError(true) }), resizable && $isNodeSelection(selection) && isFocused && (_jsx(ImageResizer, { showCaption: false, setShowCaption: () => { }, editor: editor, buttonRef: buttonRef, imageRef: imageRef, 
@@ -230,7 +230,7 @@ export function ImageComponent({ src, altText, nodeKey, width, height, maxWidth,
                     });
                 } })] }));
 }
-const EditContainer = styled.div `
-  display: flex;
-  gap: 4px;
+const EditContainer = styled.div `
+  display: flex;
+  gap: 4px;
 `;