@team-monolith/cds 0.31.9 → 0.31.11

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

@@ -2,8 +2,8 @@
 import { SerializedEditorState, SerializedLexicalNode } from "lexical";
 export interface LexicalEditorProps {
     className?: string;
-    value: any;
-    onChange: (blocks: SerializedEditorState<SerializedLexicalNode>) => void;
+    value?: any;
+    onChange?: (blocks: SerializedEditorState<SerializedLexicalNode>) => void;
     /** editable. 수정 모드 / 읽기 모드 여부
      *  initialConfig에 전달되므로 마운트 된 이후 수정해도 반영되지 않음
      */
@@ -11,4 +11,4 @@ export interface LexicalEditorProps {
     /** 외부에서 플러그인을 주입하는 경우 활용함 */
     children?: JSX.Element | string | (JSX.Element | string)[];
 }
-export declare function LexicalEditor(props: LexicalEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function LexicalEditor(props: LexicalEditorProps): JSX.Element;

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -10,6 +10,22 @@ import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
 import { getTheme } from "./theme";
 import { useTheme } from "@emotion/react";
 import Plugins from "./Plugins";
+function validateValue(value) {
+    var _a, _b;
+    if (value && typeof value !== "object") {
+        return false;
+    }
+    // value = {
+    //   root: {
+    //     children: any[]
+    //   }
+    // }
+    // value.root.children must be non-empty array
+    if (!((_b = (_a = value === null || value === void 0 ? void 0 : value.root) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length)) {
+        return false;
+    }
+    return true;
+}
 export function LexicalEditor(props) {
     const { className, value, onChange, editable = true, children } = props;
     const theme = useTheme();
@@ -32,7 +48,7 @@ export function LexicalEditor(props) {
             HorizontalRuleNode,
         ],
         theme: getTheme(theme),
-        editorState: JSON.stringify(value),
+        editorState: validateValue(value) ? JSON.stringify(value) : undefined,
         editable: editable,
     };
     return (_jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, onChange: onChange }), _jsx(_Fragment, { children: children })] })));

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

@@ -6,6 +6,6 @@ import { ReactElement } from "react";
 import { SerializedEditorState, SerializedLexicalNode } from "lexical";
 export interface PluginsProps {
     className?: string;
-    onChange: (blocks: SerializedEditorState<SerializedLexicalNode>) => void;
+    onChange?: (blocks: SerializedEditorState<SerializedLexicalNode>) => void;
 }
 export default function Plugins(props: PluginsProps): ReactElement;

package/dist/patterns/LexicalEditor/Plugins.js

@@ -38,7 +38,7 @@ export default function Plugins(props) {
         }
     };
     return (_jsxs(_Fragment, { children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ScrollArea, Object.assign({ className: className }, { children: _jsx(FloatingAnchor, Object.assign({ ref: onRef }, { children: _jsx(StyledContentEditable, { isEditable: isEditable }) })) })), placeholder: null, ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: (editorState) => {
-                    onChange(editorState.toJSON());
+                    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, {}), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem }), _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 })] }));

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

@@ -23,7 +23,8 @@ function LazyImage({ altText, className, imageRef, src, width, height, maxWidth,
     useSuspenseImage(src);
     return (_jsx("img", { className: className || undefined, src: src, alt: altText, ref: imageRef, style: {
             height,
-            maxWidth,
+            // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
+            maxWidth: `min(${maxWidth}px, 100%)`,
             width,
         }, draggable: "false" }));
 }

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageDialog.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import { LexicalEditor } from "lexical";
 export interface InsertImageDialogProps {
     open: boolean;
     activeEditor: LexicalEditor;
     onClose: () => void;
 }
-export declare function InsertImageDialog(props: InsertImageDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function InsertImageDialog(props: InsertImageDialogProps): JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { InsertImagePayload } from ".";
 export interface InsertImageUploadedDialogBodyProps {
     onClick: (payload: InsertImagePayload) => void;
 }
-export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUriDialogBody.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { InsertImagePayload } from ".";
 export interface InsertImageUriDialogBodyProps {
     onClick: (payload: InsertImagePayload) => void;
 }
-export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): JSX.Element;

package/dist/patterns/ReactEditorJS/ReactEditorJS.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { EditorCore } from "@react-editor-js/core";
 export interface ReactEditorJSProps {
     className?: string;
@@ -12,4 +13,4 @@ export interface ReactEditorJSProps {
     /** 초기화시 콜백 */
     onInitialize?: (instance: EditorCore) => void;
 }
-export declare function ReactEditorJS(props: ReactEditorJSProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReactEditorJS(props: ReactEditorJSProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.31.9",
+  "version": "0.31.11",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,