@team-monolith/cds 1.119.3 → 1.119.4

package/dist/patterns/LexicalEditor/Plugins.js

@@ -38,6 +38,7 @@ import { FilePlugin } from "./plugins/FilePlugin";
 import { DragDropPastePlugin } from "./plugins/DragDropPastePlugin";
 import { ParagraphPlaceholderPlugin } from "./plugins/ParagraphPlaceholderPlugin";
 import { AutoLinkPlugin } from "./plugins/AutoLinkPlugin";
+import { TogglePlugin } from "./plugins/TogglePlugin";
 import { useTranslation } from "react-i18next";
 export function Plugins(props) {
     const { className, contentEditableClassName, onChange, isSheetEnabled, isQuizEnabled, showFileUpload, autoFocus, } = props;
@@ -54,46 +55,46 @@ export function Plugins(props) {
                     onChange === null || onChange === void 0 ? void 0 : onChange(editorState.toJSON());
                 }, 
                 // ignore 하지 않으면 Form에서 수정하지 않았는데 Dirty로 처리됨.
-                ignoreSelectionChange: true }), autoFocus && _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: t("명령어 사용 시에는 '/'를 누르세요. 블록에 마우스를 올려 나타나는 '+'를 클릭하면 아래에 블록을 추가할 수 있습니다.") })] })), 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, {})] }));
+                ignoreSelectionChange: true }), autoFocus && _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: t("명령어 사용 시에는 '/'를 누르세요. 블록에 마우스를 올려 나타나는 '+'를 클릭하면 아래에 블록을 추가할 수 있습니다.") })] })), 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, {}), _jsx(TogglePlugin, {})] }));
 }
-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

@@ -82,32 +82,32 @@ export function FileSelectInput(props) {
     return (_jsxs(_Fragment, { children: [_jsxs(Container, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: t("파일 선택하기"), 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

@@ -8,8 +8,8 @@ export function ImagePreview(props) {
     const { t } = useTranslation();
     return (_jsxs(Container, { children: [t("이미지 미리보기"), 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

@@ -53,21 +53,21 @@ export function InsertImageDialog(props) {
                                 setValue("src", 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, {}) }), previewSrc && (_jsx(ImagePreview, { src: previewSrc, alt: watch("altText"), fallback: _jsx(ImageNotAvailable, {}) })), _jsx(FormInput, { name: "altText", control: control, placeholder: t("삽입하는 이미지에 관한 설명"), size: "medium", label: t("대체 텍스트"), fullWidth: true })] }) }), _jsxs(AlertDialogActions, { children: [_jsx(Button, { type: "submit", fullWidth: true, label: t("삽입하기"), size: "medium", color: "primary", disabled: isDisabled }), onDelete && (_jsx(Button, { color: "danger", size: "medium", fullWidth: true, label: t("삭제하기"), 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.js

@@ -48,8 +48,8 @@ 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, {}) }), videoCanPlay && (_jsx(ReactPlayer, { css: css `
-                background: black;
+                            }, 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: {
                                     hlsOptions: {
@@ -58,21 +58,21 @@ export function InsertVideoDialog(props) {
                                 },
                             } }))] }) }), _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 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/UploadFileDialog/UploadFileDialog.js

@@ -57,6 +57,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

@@ -59,30 +59,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

@@ -194,15 +194,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: t("클릭해서 원본 이미지 보기."), addtionalInfoLabel: _jsx("span", { css: VISUALLY_HIDDEN, children: t("(새 창)", { context: "렉시컬 이미지 도구" }) }) })) }) }));
     }
-    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, 
@@ -236,7 +236,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;
 `;

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

@@ -174,64 +174,64 @@ export function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef,
                     handlePointerDown(event, Direction.north | Direction.west);
                 } })] }));
 }
-const Container = styled.div `
-  &.image-control-wrapper--resizing {
-    touch-action: none;
-  }
-  .image-resizer {
-    display: block;
-    width: 7px;
-    height: 7px;
-    position: absolute;
-    background-color: rgb(60, 132, 244);
-    border: 1px solid #fff;
-  }
-
-  .image-resizer.image-resizer-n {
-    top: -6px;
-    left: 48%;
-    cursor: n-resize;
-  }
-
-  .image-resizer.image-resizer-ne {
-    top: -6px;
-    right: -6px;
-    cursor: ne-resize;
-  }
-
-  .image-resizer.image-resizer-e {
-    bottom: 48%;
-    right: -6px;
-    cursor: e-resize;
-  }
-
-  .image-resizer.image-resizer-se {
-    bottom: -2px;
-    right: -6px;
-    cursor: nwse-resize;
-  }
-
-  .image-resizer.image-resizer-s {
-    bottom: -2px;
-    left: 48%;
-    cursor: s-resize;
-  }
-
-  .image-resizer.image-resizer-sw {
-    bottom: -2px;
-    left: -6px;
-    cursor: sw-resize;
-  }
-
-  .image-resizer.image-resizer-w {
-    bottom: 48%;
-    left: -6px;
-    cursor: w-resize;
-  }
-
-  .image-resizer.image-resizer-nw {
-    top: -6px;
-    left: -6px;
-    cursor: nw-resize;
-  }
+const Container = styled.div `
+  &.image-control-wrapper--resizing {
+    touch-action: none;
+  }
+  .image-resizer {
+    display: block;
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    background-color: rgb(60, 132, 244);
+    border: 1px solid #fff;
+  }
+
+  .image-resizer.image-resizer-n {
+    top: -6px;
+    left: 48%;
+    cursor: n-resize;
+  }
+
+  .image-resizer.image-resizer-ne {
+    top: -6px;
+    right: -6px;
+    cursor: ne-resize;
+  }
+
+  .image-resizer.image-resizer-e {
+    bottom: 48%;
+    right: -6px;
+    cursor: e-resize;
+  }
+
+  .image-resizer.image-resizer-se {
+    bottom: -2px;
+    right: -6px;
+    cursor: nwse-resize;
+  }
+
+  .image-resizer.image-resizer-s {
+    bottom: -2px;
+    left: 48%;
+    cursor: s-resize;
+  }
+
+  .image-resizer.image-resizer-sw {
+    bottom: -2px;
+    left: -6px;
+    cursor: sw-resize;
+  }
+
+  .image-resizer.image-resizer-w {
+    bottom: 48%;
+    left: -6px;
+    cursor: w-resize;
+  }
+
+  .image-resizer.image-resizer-nw {
+    top: -6px;
+    left: -6px;
+    cursor: nw-resize;
+  }
 `;

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

@@ -61,27 +61,27 @@ export function InputComponent(props) {
             }, fullWidth: true }));
     }
     // 교사 edit view
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { css: css `
-          display: flex;
-          align-items: center;
-          gap: 4px;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { css: css `
+          display: flex;
+          align-items: center;
+          gap: 4px;
         `, children: [_jsx(VirtualInput, { onClick: () => setSettingOpen(true), children: t("주관식 입력 칸", { context: "렉시컬 주관식 입력 도구" }) }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);
                         }, "aria-label": t("입력 칸 설정", { context: "렉시컬 주관식 입력 도구" }) })] }), settingOpen && (_jsx(SettingForm, Object.assign({}, settingFormProps, { onClose: () => setSettingOpen(false) })))] }));
 }
-const VirtualInput = styled.div(({ theme }) => css `
-    box-sizing: border-box;
-    height: 36px;
-    width: 300px;
-    padding: 8px 16px;
-    align-items: center;
-    border-radius: 8px;
-    background: ${theme.color.background.neutralAlt};
-    cursor: pointer;
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
+const VirtualInput = styled.div(({ theme }) => css `
+    box-sizing: border-box;
+    height: 36px;
+    width: 300px;
+    padding: 8px 16px;
+    align-items: center;
+    border-radius: 8px;
+    background: ${theme.color.background.neutralAlt};
+    cursor: pointer;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
   `);