@team-monolith/cds 1.51.1 → 1.52.0

package/dist/icons/Custom.js

@@ -293,10 +293,10 @@ export const CustomBadgeColorIcon = forwardRef((props, ref) => {
 import customeWorksheetSvgImport from "./custom/worksheet.svg";
 export const customeWorksheetSvg = customeWorksheetSvgImport;
 export const CustomWorksheetIcon = forwardRef((props, ref) => {
-    return (_jsxs("svg", Object.assign({}, props, { ref: ref, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, { children: [_jsx("path", { d: "M3 19.5C3 18.6716 3.67157 18 4.5 18H19.5C20.3284 18 21 18.6716 21 19.5C21 20.3284 20.3284 21 19.5 21H4.5C3.67157 21 3 20.3284 3 19.5Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5 3H19C20.1 3 21 3.9 21 5V15C21 16.1 20.1 17 19 17H5C3.9 17 3 16.1 3 15V5C3 3.9 3.9 3 5 3ZM8.13137 14.5L5.5 5.5H8.20107L9.5 11L10.937 5.5H13.063L14.5 11L15.7989 5.5H18.5L15.8686 14.5H13.5509L12 10L10.4491 14.5H8.13137Z", fill: "currentColor" })] })));
+    return (_jsxs("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M3 19.5C3 18.6716 3.67157 18 4.5 18H19.5C20.3284 18 21 18.6716 21 19.5C21 20.3284 20.3284 21 19.5 21H4.5C3.67157 21 3 20.3284 3 19.5Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5 3H19C20.1 3 21 3.9 21 5V15C21 16.1 20.1 17 19 17H5C3.9 17 3 16.1 3 15V5C3 3.9 3.9 3 5 3ZM8.13137 14.5L5.5 5.5H8.20107L9.5 11L10.937 5.5H13.063L14.5 11L15.7989 5.5H18.5L15.8686 14.5H13.5509L12 10L10.4491 14.5H8.13137Z", fill: "currentColor" })] })));
 });
 import customeWorksheetColorSvgImport from "./custom/worksheet-color.svg";
 export const customeWorksheetColorSvg = customeWorksheetColorSvgImport;
 export const CustomWorksheetColorIcon = forwardRef((props, ref) => {
-    return (_jsxs("svg", Object.assign({}, props, { ref: ref, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, { children: [_jsx("path", { d: "M19 3H5C3.9 3 3 3.9 3 5V15C3 16.1 3.9 17 5 17H19C20.1 17 21 16.1 21 15V5C21 3.9 20.1 3 19 3Z", fill: "#874BFF" }), _jsx("path", { d: "M3 19.5C3 18.6716 3.67157 18 4.5 18H19.5C20.3284 18 21 18.6716 21 19.5C21 20.3284 20.3284 21 19.5 21H4.5C3.67157 21 3 20.3284 3 19.5Z", fill: "#EEE6FF" }), _jsx("path", { d: "M8.13137 14.5L5.5 5.5H8.20107L9.42091 11.0371H9.49062L10.937 5.5H13.063L14.5094 11.0547H14.5791L15.7989 5.5H18.5L15.8686 14.5H13.5509L12.0349 9.47266H11.9651L10.4491 14.5H8.13137Z", fill: "#EEE5FF" })] })));
+    return (_jsxs("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M19 3H5C3.9 3 3 3.9 3 5V15C3 16.1 3.9 17 5 17H19C20.1 17 21 16.1 21 15V5C21 3.9 20.1 3 19 3Z", fill: "#874BFF" }), _jsx("path", { d: "M3 19.5C3 18.6716 3.67157 18 4.5 18H19.5C20.3284 18 21 18.6716 21 19.5C21 20.3284 20.3284 21 19.5 21H4.5C3.67157 21 3 20.3284 3 19.5Z", fill: "#EEE6FF" }), _jsx("path", { d: "M8.13137 14.5L5.5 5.5H8.20107L9.42091 11.0371H9.49062L10.937 5.5H13.063L14.5094 11.0547H14.5791L15.7989 5.5H18.5L15.8686 14.5H13.5509L12.0349 9.47266H11.9651L10.4491 14.5H8.13137Z", fill: "#EEE5FF" })] })));
 });

package/dist/icons/custom/worksheet-color.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M19 3H5C3.9 3 3 3.9 3 5V15C3 16.1 3.9 17 5 17H19C20.1 17 21 16.1 21 15V5C21 3.9 20.1 3 19 3Z" fill="#874BFF" style="fill:#874BFF;fill:color(display-p3 0.5303 0.2954 1.0000);fill-opacity:1;"/>
-  <path d="M3 19.5C3 18.6716 3.67157 18 4.5 18H19.5C20.3284 18 21 18.6716 21 19.5C21 20.3284 20.3284 21 19.5 21H4.5C3.67157 21 3 20.3284 3 19.5Z" fill="#EEE6FF" style="fill:#EEE6FF;fill:color(display-p3 0.9333 0.9000 1.0000);fill-opacity:1;"/>
-  <path d="M8.13137 14.5L5.5 5.5H8.20107L9.42091 11.0371H9.49062L10.937 5.5H13.063L14.5094 11.0547H14.5791L15.7989 5.5H18.5L15.8686 14.5H13.5509L12.0349 9.47266H11.9651L10.4491 14.5H8.13137Z" fill="#EEE5FF" style="fill:#EEE5FF;fill:color(display-p3 0.9333 0.8980 1.0000);fill-opacity:1;"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 3H5C3.9 3 3 3.9 3 5V15C3 16.1 3.9 17 5 17H19C20.1 17 21 16.1 21 15V5C21 3.9 20.1 3 19 3Z" fill="#874BFF" style="fill:#874BFF;fill:color(display-p3 0.5303 0.2954 1.0000);fill-opacity:1;"/>
+<path d="M3 19.5C3 18.6716 3.67157 18 4.5 18H19.5C20.3284 18 21 18.6716 21 19.5C21 20.3284 20.3284 21 19.5 21H4.5C3.67157 21 3 20.3284 3 19.5Z" fill="#EEE6FF" style="fill:#EEE6FF;fill:color(display-p3 0.9333 0.9000 1.0000);fill-opacity:1;"/>
+<path d="M8.13137 14.5L5.5 5.5H8.20107L9.42091 11.0371H9.49062L10.937 5.5H13.063L14.5094 11.0547H14.5791L15.7989 5.5H18.5L15.8686 14.5H13.5509L12.0349 9.47266H11.9651L10.4491 14.5H8.13137Z" fill="#EEE5FF" style="fill:#EEE5FF;fill:color(display-p3 0.9333 0.8980 1.0000);fill-opacity:1;"/>
+</svg>

package/dist/icons/custom/worksheet.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M3 19.5C3 18.6716 3.67157 18 4.5 18H19.5C20.3284 18 21 18.6716 21 19.5C21 20.3284 20.3284 21 19.5 21H4.5C3.67157 21 3 20.3284 3 19.5Z" fill="#363636" style="fill:#363636;fill:color(display-p3 0.2118 0.2118 0.2118);fill-opacity:1;"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3H19C20.1 3 21 3.9 21 5V15C21 16.1 20.1 17 19 17H5C3.9 17 3 16.1 3 15V5C3 3.9 3.9 3 5 3ZM8.13137 14.5L5.5 5.5H8.20107L9.5 11L10.937 5.5H13.063L14.5 11L15.7989 5.5H18.5L15.8686 14.5H13.5509L12 10L10.4491 14.5H8.13137Z" fill="#363636" style="fill:#363636;fill:color(display-p3 0.2118 0.2118 0.2118);fill-opacity:1;"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 19.5C3 18.6716 3.67157 18 4.5 18H19.5C20.3284 18 21 18.6716 21 19.5C21 20.3284 20.3284 21 19.5 21H4.5C3.67157 21 3 20.3284 3 19.5Z" fill="#363636" style="fill:#363636;fill:color(display-p3 0.2118 0.2118 0.2118);fill-opacity:1;"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3H19C20.1 3 21 3.9 21 5V15C21 16.1 20.1 17 19 17H5C3.9 17 3 16.1 3 15V5C3 3.9 3.9 3 5 3ZM8.13137 14.5L5.5 5.5H8.20107L9.5 11L10.937 5.5H13.063L14.5 11L15.7989 5.5H18.5L15.8686 14.5H13.5509L12 10L10.4491 14.5H8.13137Z" fill="#363636" style="fill:#363636;fill:color(display-p3 0.2118 0.2118 0.2118);fill-opacity:1;"/>
+</svg>

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

@@ -14,6 +14,8 @@ export interface LexicalEditorProps {
     freezeProblemNode?: boolean;
     /** 퀴즈 정답이 공개되는지 여부. false가 default입니다. 공개하고자 하는곳에서 true로 설정해야 합니다. */
     showQuizSolution?: boolean;
+    /** 활동지 노드가 허용되는지 여부. false가 디폴트이고, 전달하지 않아도 로컬스토리지 devMode로도 노출시킬 수 있습니다. */
+    isSheetEnabled?: boolean;
     /** 퀴즈 노드가 허용되는지 여부. false가 디폴트이고, 전달하지 않아도 로컬스토리지 devMode로도 노출시킬 수 있습니다. */
     isQuizEnabled?: boolean;
     /** 외부에서 플러그인을 주입하는 경우 활용함 */

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -16,6 +16,8 @@ import { ProblemSelectNode } from "./nodes/ProblemSelectNode";
 import { LayoutContainerNode } from "./nodes/LayoutContainerNode";
 import { LayoutItemNode } from "./nodes/LayoutItemNode";
 import _ from "lodash";
+import { SheetSelectNode } from "./nodes/SheetSelectNode";
+import { SheetInputNode } from "./nodes/SheetInputNode";
 function validateValue(value) {
     var _a, _b;
     if (value && typeof value !== "object") {
@@ -52,7 +54,7 @@ function getCleanObject(obj) {
     return newObj;
 }
 export function LexicalEditor(props) {
-    const { className, contentEditableClassName, value, onChange, editable = true, showQuizSolution = false, freezeProblemNode = false, isQuizEnabled = false, children, } = props;
+    const { className, contentEditableClassName, value, onChange, editable = true, showQuizSolution = false, freezeProblemNode = false, isSheetEnabled = false, isQuizEnabled = false, children, } = props;
     const theme = useTheme();
     const initialConfig = {
         namespace: "CodleLexicalEditor",
@@ -76,6 +78,8 @@ export function LexicalEditor(props) {
             ColoredQuoteNode,
             LayoutContainerNode,
             LayoutItemNode,
+            SheetSelectNode,
+            SheetInputNode,
             {
                 replace: QuoteNode,
                 with: (_node) => {
@@ -100,5 +104,5 @@ export function LexicalEditor(props) {
             }
         }
         : undefined;
-    return (_jsx(LexicalCustomConfigContext.Provider, Object.assign({ value: { freezeProblemNode, showQuizSolution } }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, contentEditableClassName: contentEditableClassName, onChange: onChangeHandler, isQuizEnabled: isQuizEnabled }), _jsx(_Fragment, { children: children })] })) })));
+    return (_jsx(LexicalCustomConfigContext.Provider, Object.assign({ value: { freezeProblemNode, showQuizSolution } }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, contentEditableClassName: contentEditableClassName, onChange: onChangeHandler, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(_Fragment, { children: children })] })) })));
 }

package/dist/patterns/LexicalEditor/Plugins.d.ts

@@ -8,6 +8,7 @@ export interface PluginsProps {
     className?: string;
     contentEditableClassName?: string;
     onChange?: (blocks: SerializedEditorState<SerializedLexicalNode>) => void;
+    isSheetEnabled: boolean;
     isQuizEnabled: boolean;
 }
 export default function Plugins(props: PluginsProps): ReactElement;

package/dist/patterns/LexicalEditor/Plugins.js

@@ -30,8 +30,10 @@ import styled from "@emotion/styled";
 import ProblemInputPlugin from "./plugins/ProblemInputPlugin";
 import ProblemSelectPlugin from "./plugins/ProblemSelectPlugin";
 import { LayoutPlugin } from "./plugins/LayoutPlugin";
+import SheetSelectPlugin from "./plugins/SheetSelectPlugin";
+import SheetInputPlugin from "./plugins/SheetInputPlugin";
 export default function Plugins(props) {
-    const { className, contentEditableClassName, onChange, isQuizEnabled } = props;
+    const { className, contentEditableClassName, onChange, isSheetEnabled, isQuizEnabled, } = props;
     const isEditable = useLexicalEditable();
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [isLinkEditMode, setIsLinkEditMode] = useState(false);
@@ -44,7 +46,7 @@ export default 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, { isQuizEnabled: isQuizEnabled }), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isQuizEnabled: isQuizEnabled }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {})] }));
+                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {})] }));
 }
 const ScrollArea = styled.div `
   min-height: 150px;

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

@@ -1,9 +1,6 @@
 import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
 import { ReactNode } from "react";
-export interface ImageProps {
-    src: string;
-    altText: string;
-}
+import { ImageProps } from "../insertImageDialog";
 export interface SelectionWithoutSolution {
     show: {
         image: ImageProps | null;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxComponent.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ImageProps } from "../ProblemSelectNode";
+import { ImageProps } from "../../insertImageDialog";
 export type SelectBoxType = "primary" | "success" | "danger";
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
 export declare function SelectBoxComponent(props: {

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxEdit.d.ts

@@ -1,4 +1,4 @@
-import { ImageProps } from "../ProblemSelectNode";
+import { ImageProps } from "../../insertImageDialog";
 export interface SelectBoxEditProps {
     index: number;
     isAnswer: boolean;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxView.d.ts

@@ -1,4 +1,4 @@
-import { ImageProps } from "../ProblemSelectNode";
+import { ImageProps } from "../../insertImageDialog";
 export interface SelectBoxViewProps {
     index: number;
     isSelected: boolean;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/FormSelection.js

@@ -8,7 +8,7 @@ import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFil
 import SquareButton from "../../../../../components/SquareButton";
 import Switch from "../../../../../components/Switch";
 import { useState } from "react";
-import { InsertImageDialog } from "./InsertImageDialog";
+import { InsertImageDialog } from "../../insertImageDialog";
 export function FormSelection(props) {
     const { index, control, watch, rules, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);

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

@@ -0,0 +1,7 @@
+import { NodeKey } from "lexical";
+export declare function InputComponent(props: {
+    multiline: boolean;
+    value: string;
+    placeholder: string;
+    nodeKey: NodeKey;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { $getNodeByKey } from "lexical";
+import { useContext, useState } from "react";
+import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { Input, Settings3FillIcon, SquareButton } from "../../../..";
+import { SettingForm } from "./SettingForm";
+import { $isSheetInputNode } from "./SheetInputNode";
+export function InputComponent(props) {
+    const { multiline, value, placeholder, nodeKey } = props;
+    const [editor] = useLexicalComposerContext();
+    const [settingOpen, setSettingOpen] = useState(false);
+    const isEditable = useLexicalEditable();
+    const [focus, setFocus] = useState(false);
+    // SoT를 EditorState로 설정하는 경우 한글 입력시 문제가 생김.
+    // ex) "나비" 입력시 -> "ㄴ나납ㅂ비"
+    // SoT를 내부 State로 관리하고 EditorState를 따로 설정.
+    // 문제를 더 파악하고 추후 개선 필요.
+    const [valueInput, setValueInput] = useState(value);
+    const { freezeProblemNode } = useContext(LexicalCustomConfigContext);
+    const handleChange = (value) => {
+        setValueInput(value);
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (!$isSheetInputNode(node)) {
+                return;
+            }
+            node.setValue(value);
+        });
+    };
+    // view
+    if (!isEditable) {
+        return (_jsx(Input, { multiline: multiline, css: css `
+          textarea {
+            // 100-8*2
+            max-height: 84px;
+            min-height: 84px;
+            // mui TextareaAutosize의 overflow: hidden을 무력화시킵니다.
+            overflow: auto !important;
+          }
+        `, inputProps: freezeProblemNode
+                ? { readOnly: true }
+                : {
+                    onFocus: () => setFocus(true),
+                    onBlur: () => setFocus(false),
+                }, size: "small", color: focus ? "activePrimary" : "default", placeholder: placeholder || "여기에 입력하세요.", value: valueInput, onChange: (e) => {
+                handleChange(e.target.value);
+            }, fullWidth: true }));
+    }
+    // edit
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `
+          display: flex;
+          align-items: center;
+          gap: 4px;
+        ` }, { children: [_jsx(VirtualInput, Object.assign({ onClick: () => setSettingOpen((open) => !open), css: multiline &&
+                            css `
+              height: 100px;
+            ` }, { children: multiline ? "서술형 입력 칸" : "단답형 입력 칸" })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => setSettingOpen((open) => !open) })] })), settingOpen && (_jsx(SettingForm, { multiline: multiline, placeholder: placeholder, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
+}
+const VirtualInput = styled.div(({ theme }) => css `
+    box-sizing: border-box;
+    height: 36px;
+    width: 400px;
+    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% */
+  `);

package/dist/patterns/LexicalEditor/nodes/SheetInputNode/SettingForm.d.ts

@@ -0,0 +1,11 @@
+import { NodeKey } from "lexical";
+export interface SettingFormData {
+    placeholder: string;
+}
+/** 활동지 활동의 입력칸 설정 컴포넌트입니다. */
+export declare function SettingForm(props: {
+    multiline: boolean;
+    placeholder: string;
+    nodeKey: NodeKey;
+    onClose: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SheetInputNode/SettingForm.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getNodeByKey } from "lexical";
+import { Controller, useForm } from "react-hook-form";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { InputMethodLineIcon, QuestionFillIcon } from "../../../../icons";
+import { Button, Input, shadows, Tooltip } from "../../../..";
+import { $isSheetInputNode } from "./SheetInputNode";
+/** 활동지 활동의 입력칸 설정 컴포넌트입니다. */
+export function SettingForm(props) {
+    const { multiline, placeholder, nodeKey, onClose } = props;
+    const [editor] = useLexicalComposerContext();
+    const { control, handleSubmit } = useForm({
+        mode: "all",
+        defaultValues: {
+            placeholder,
+        },
+    });
+    const onSettingSubmit = (data) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (!$isSheetInputNode(node)) {
+                return;
+            }
+            node.setPlaceholder(data.placeholder);
+        });
+        onClose();
+    };
+    return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(InputMethodLineIcon, { css: css `
+            width: 12px;
+            height: 12px;
+          ` }), multiline ? "서술형 입력 칸" : "단답형 입력 칸"] }), _jsx(Content, { children: _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
+                  width: 12px;
+                  height: 12px;
+                ` }) }))] }), _jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => {
+                                return (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: "\uC608) \uC5EC\uAE30\uC5D0 \uC785\uB825\uD558\uC138\uC694." }));
+                            } })] }) }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", bold: true, type: "submit" })] })] })));
+}
+const Form = styled.form(({ theme }) => css `
+    display: flex;
+    width: 620px;
+    flex-direction: column;
+    border-radius: 6px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    box-shadow: ${shadows.shadow08};
+  `);
+const Title = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 8px 12px;
+    gap: 4px;
+    align-items: center;
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);
+const Content = styled.div(({ theme }) => css `
+    display: flex;
+    border-top: 1px solid ${theme.color.background.neutralAltActive};
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+  `);
+const FormArea = styled.div `
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+`;
+const Label = styled.div(({ theme }) => css `
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);
+const Buttons = styled.div `
+  display: flex;
+  padding: 12px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+`;

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

@@ -0,0 +1,33 @@
+import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
+import { ReactNode } from "react";
+export interface SheetInputPayload {
+    multiline: boolean;
+    value: string;
+    placeholder: string;
+    key?: NodeKey;
+}
+export type SerializedSheetInputNode = Spread<SheetInputPayload, SerializedLexicalNode>;
+/**
+ * 입력칸을 나타내는 노드입니다.
+ */
+export declare class SheetInputNode extends DecoratorNode<ReactNode> {
+    __multiline: boolean;
+    __value: string;
+    __placeholder: string;
+    isInline(): boolean;
+    static getType(): string;
+    getMultiline(): boolean;
+    getValue(): string;
+    getPlaceholder(): string;
+    setValue(value: string): void;
+    setPlaceholder(placeholder: string): void;
+    static clone(node: SheetInputNode): SheetInputNode;
+    constructor(multiline: boolean, value: string, placeholder: string, key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    static importJSON(serializedNode: SerializedSheetInputNode): SheetInputNode;
+    exportJSON(): SerializedSheetInputNode;
+    decorate(): ReactNode;
+}
+export declare function $createSheetInputNode({ multiline, value, placeholder, key, }: SheetInputPayload): SheetInputNode;
+export declare function $isSheetInputNode(node: LexicalNode | null | undefined): node is SheetInputNode;

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

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { $applyNodeReplacement, DecoratorNode, } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+import { InputComponent } from "./InputComponent";
+/**
+ * 입력칸을 나타내는 노드입니다.
+ */
+export class SheetInputNode extends DecoratorNode {
+    isInline() {
+        return false;
+    }
+    static getType() {
+        return "sheet-input";
+    }
+    getMultiline() {
+        return this.__multiline;
+    }
+    getValue() {
+        return this.__value;
+    }
+    getPlaceholder() {
+        return this.__placeholder;
+    }
+    setValue(value) {
+        const self = this.getWritable();
+        self.__value = value;
+    }
+    setPlaceholder(placeholder) {
+        const self = this.getWritable();
+        self.__placeholder = placeholder;
+    }
+    static clone(node) {
+        return new SheetInputNode(node.__multiline, node.__value, node.__placeholder, node.__key);
+    }
+    constructor(multiline, value, placeholder, key) {
+        super(key);
+        this.__multiline = multiline;
+        this.__value = value;
+        this.__placeholder = placeholder;
+    }
+    createDOM(config) {
+        // Define the DOM element here
+        const root = document.createElement("div");
+        addClassNamesToElement(root, config.theme.sheetInput);
+        return root;
+    }
+    updateDOM() {
+        return false;
+    }
+    static importJSON(serializedNode) {
+        const node = $createSheetInputNode({
+            key: serializedNode.key,
+            multiline: serializedNode.multiline,
+            value: serializedNode.value,
+            placeholder: serializedNode.placeholder,
+        });
+        return node;
+    }
+    exportJSON() {
+        return {
+            version: 1,
+            type: "sheet-input",
+            multiline: this.__multiline,
+            value: this.__value,
+            placeholder: this.__placeholder,
+        };
+    }
+    decorate() {
+        return (_jsx(InputComponent, { multiline: this.__multiline, value: this.__value, placeholder: this.__placeholder, nodeKey: this.getKey() }));
+    }
+}
+export function $createSheetInputNode({ multiline, value, placeholder, key, }) {
+    return $applyNodeReplacement(new SheetInputNode(multiline, value, placeholder, key));
+}
+export function $isSheetInputNode(node) {
+    return node instanceof SheetInputNode;
+}

package/dist/patterns/LexicalEditor/nodes/SheetInputNode/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SheetInputNode";
+export * from "./InputComponent";

package/dist/patterns/LexicalEditor/nodes/SheetInputNode/index.js

@@ -0,0 +1,2 @@
+export * from "./SheetInputNode";
+export * from "./InputComponent";

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectBox/SelectBoxComponent.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ImageProps } from "../../insertImageDialog";
+export declare const SelectBoxClasses: {
+    readonly container: "SheetSelectNode-SelectBox-container";
+    readonly index: "SheetSelectNode-SelectBox-index";
+    readonly content: "SheetSelectNode-SelectBox-content";
+};
+export type SelectBoxType = "primary" | "normal";
+/** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
+export declare function SelectBoxComponent(props: {
+    className?: string;
+    type: SelectBoxType;
+    index: React.ReactNode;
+    image?: ImageProps | null;
+    text: React.ReactNode;
+    /** 박스를 클릭할 때 실행될 콜백. 존재하지 않으면 cursor: pointer가 적용되지 않습니다. */
+    onClick?: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectBox/SelectBoxComponent.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+export const SelectBoxClasses = {
+    container: "SheetSelectNode-SelectBox-container",
+    index: "SheetSelectNode-SelectBox-index",
+    content: "SheetSelectNode-SelectBox-content",
+};
+const TYPE_TO_CONTAINER_STYLE = (theme, type) => ({
+    primary: css `
+      background: ${theme.color.container.blueContainer};
+      border: 1px solid ${theme.color.foreground.primary};
+      color: ${theme.color.container.blueOnContainer};
+    `,
+    normal: css `
+      background: ${theme.color.background.neutralAlt};
+      border: 1px solid transparent;
+      color: ${theme.color.foreground.neutralBase};
+    `,
+})[type];
+const TYPE_TO_INDEX_STYLE = (theme, type) => ({
+    primary: css `
+      background: ${theme.color.background.primary};
+      border: 1px solid ${theme.color.background.primary};
+      color: ${theme.color.foreground.neutralAlt};
+    `,
+    normal: css `
+      background: ${theme.color.background.neutralBase};
+      border: 1px solid ${theme.color.background.neutralAltActive};
+      color: ${theme.color.foreground.neutralBaseDisabled};
+    `,
+})[type];
+/** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
+export function SelectBoxComponent(props) {
+    const { className, type, index, image, text, onClick } = props;
+    const theme = useTheme();
+    return (_jsxs(Container, Object.assign({ className: `${className} ${SelectBoxClasses.container}`, css: TYPE_TO_CONTAINER_STYLE(theme, type), onClick: onClick }, { children: [_jsx(Index, Object.assign({ className: SelectBoxClasses.index, css: TYPE_TO_INDEX_STYLE(theme, type) }, { children: index })), _jsxs(Content, Object.assign({ className: SelectBoxClasses.content }, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
+              height: auto;
+              // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
+              max-width: 100%;
+              width: fit-content;
+              border-radius: 6px;
+            ` })), text] }))] })));
+}
+const Container = styled.div(({ onClick }) => css `
+    ${onClick && "cursor: pointer;"}
+    display: flex;
+    width: 400px;
+    padding: 12px;
+    gap: 12px;
+    border-radius: 8px;
+  `);
+const Index = styled.div(({ theme }) => css `
+    display: flex;
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+
+    user-select: none; /* Standard syntax */
+
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
+  `);
+const Content = styled.div(({ theme }) => css `
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    flex: 1;
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+  `);

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectBox/SelectBoxEdit.d.ts

@@ -0,0 +1,8 @@
+import { ImageProps } from "../../insertImageDialog";
+/** SheetSelectNode의 하나의 선택지 edit모드 컴포넌트입니다. */
+export declare function SelectBoxEdit(props: {
+    index: number;
+    image?: ImageProps | null;
+    text: string;
+    onClick: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectBox/SelectBoxEdit.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SelectBoxComponent } from "./SelectBoxComponent";
+/** SheetSelectNode의 하나의 선택지 edit모드 컴포넌트입니다. */
+export function SelectBoxEdit(props) {
+    const { index, image, text, onClick } = props;
+    return (_jsx(SelectBoxComponent, { index: index, type: "normal", image: image, text: text, onClick: onClick }));
+}

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectBox/SelectBoxView.d.ts

@@ -0,0 +1,9 @@
+import { ImageProps } from "../../insertImageDialog";
+/** SheetSelectNode의 하나의 선택지 view모드 컴포넌트입니다. */
+export declare function SelectBoxView(props: {
+    index: number;
+    isSelected: boolean;
+    image?: ImageProps | null;
+    text: string;
+    onClick?: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectBox/SelectBoxView.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { SelectBoxComponent } from "./SelectBoxComponent";
+import { CheckFillIcon } from "../../../../../icons";
+function getIndexIcon(type, index) {
+    return {
+        primary: (_jsx(CheckFillIcon, { css: css `
+          width: 12px;
+          height: 12px;
+        ` })),
+        normal: index,
+    }[type];
+}
+/** SheetSelectNode의 하나의 선택지 view모드 컴포넌트입니다. */
+export function SelectBoxView(props) {
+    const { index, isSelected, image, text, onClick } = props;
+    const selectBoxType = isSelected ? "primary" : "normal";
+    return (_jsx(SelectBoxComponent, { css: css `
+        width: 100%;
+      `, type: selectBoxType, index: getIndexIcon(selectBoxType, index), image: image, text: text, onClick: onClick }));
+}

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectBox/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SelectBoxView";
+export * from "./SelectBoxEdit";

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectBox/index.js

@@ -0,0 +1,2 @@
+export * from "./SelectBoxView";
+export * from "./SelectBoxEdit";