@team-monolith/cds 0.31.3 → 0.31.7

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

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

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -11,7 +11,7 @@ import { getTheme } from "./theme";
 import { useTheme } from "@emotion/react";
 import Plugins from "./Plugins";
 export function LexicalEditor(props) {
-    const { value, onChange, editable = true, children } = props;
+    const { className, value, onChange, editable = true, children } = props;
     const theme = useTheme();
     const initialConfig = {
         namespace: "CodleLexicalEditor",
@@ -35,5 +35,5 @@ export function LexicalEditor(props) {
         editorState: JSON.stringify(value),
         editable: editable,
     };
-    return (_jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { onChange: onChange }), _jsx(_Fragment, { children: children })] })));
+    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

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

package/dist/patterns/LexicalEditor/Plugins.js

@@ -28,7 +28,7 @@ import useLexicalEditable from "@lexical/react/useLexicalEditable";
 import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
 import styled from "@emotion/styled";
 export default function Plugins(props) {
-    const { onChange } = props;
+    const { className, onChange } = props;
     const isEditable = useLexicalEditable();
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [isLinkEditMode, setIsLinkEditMode] = useState(false);
@@ -37,9 +37,9 @@ export default function Plugins(props) {
             setFloatingAnchorElem(_floatingAnchorElem);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ScrollArea, { children: _jsx(FloatingAnchor, Object.assign({ ref: onRef }, { children: _jsx(StyledContentEditable, {}) })) }), placeholder: _jsx("div", { children: "\uB0B4\uC6A9\uC744 \uC785\uB825 \uD574 \uC8FC\uC138\uC694." }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: (editorState) => {
+    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: _jsx("div", { children: "\uB0B4\uC6A9\uC744 \uC785\uB825 \uD574 \uC8FC\uC138\uC694." }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: (editorState) => {
                     onChange(editorState.toJSON());
-                } }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(ComponentPickerMenuPlugin, {}), _jsx(ListPlugin, {}), _jsx(TabIndentationPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 })] }));
+                } }), _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 })] }));
 }
 const ScrollArea = styled.div `
   min-height: 150px;
@@ -49,12 +49,10 @@ const ScrollArea = styled.div `
   outline: 0;
   z-index: 0;
   overflow: auto;
-  resize: vertical;
 `;
 const FloatingAnchor = styled.div `
   flex: auto;
   position: relative;
-  resize: vertical;
   z-index: -1;
 `;
 const StyledContentEditable = styled(ContentEditable) `
@@ -63,7 +61,10 @@ const StyledContentEditable = styled(ContentEditable) `
   display: block;
   position: relative;
   outline: 0;
-  padding: 8px 28px 40px 64px;
+  // ComponentAdder 를 위한 공간
+  ${({ isEditable }) => isEditable && "padding-left: 64px;"}
+  // ScrollArea에서 스크롤이 발생해도 64px 더 아래로 내릴 수 있도록 합니다.
+  padding-bottom: 64px;
   min-height: 150px;
 
   hr {

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

@@ -1,2 +1,3 @@
 export * from "./LexicalEditor";
 export * from "./nodes/ImageNode";
+export * from "./plugins/MarkdownTransformers";

package/dist/patterns/LexicalEditor/index.js

@@ -1,2 +1,3 @@
 export * from "./LexicalEditor";
 export * from "./nodes/ImageNode";
+export * from "./plugins/MarkdownTransformers";

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/ComponentAdderPlugin.js

@@ -28,6 +28,7 @@ import ComponentAdder from "./ComponentAdder";
 import styled from "@emotion/styled";
 import { getContextMenuOptions } from "./getContextMenuOptions";
 import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
+import { ZINDEX } from "../../../../utils/zIndex";
 export const COMPONENT_ADDER_MENU_CLASSNAME = "component-adder-menu";
 function isOnMenu(element) {
     return !!element.closest(`.${COMPONENT_ADDER_MENU_CLASSNAME}`);
@@ -74,7 +75,14 @@ export function ComponentAdderPlugin(props) {
                     const nodes = selection.getNodes();
                     const isAllNodesNotMatched = nodes.every((node) => {
                         const nodeAndParents = [node, ...node.getParents()];
-                        return (nodeAndParents[nodeAndParents.length - 2].getKey() !== nodeKey);
+                        const maybeTopNode = nodeAndParents[nodeAndParents.length - 2];
+                        // 선택된 노드 자체가 Root Node라면
+                        // maybeTopNode가 undefined가 됩니다.
+                        // 다른 노드를 선택한 것으로 간주하고 true(not matched)를 반환합니다.
+                        if (!maybeTopNode) {
+                            return true;
+                        }
+                        return maybeTopNode.getKey() !== nodeKey;
                     });
                     if (isAllNodesNotMatched) {
                         setQuery("");
@@ -119,8 +127,7 @@ export function ComponentAdderPlugin(props) {
     });
     const { onDragStart, onDragEnd, targetLineRef } = useDraggableBlockMenu(editor, anchorElem, blockElem, setBlockElem);
     return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: open, activeEditor: editor, onClose: () => setOpen(false) }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
-          // TODO 어드민에서 기본 z-index가 1이라 추가함. 없앨 수도 있음
-          z-index: 1;
+          z-index: ${ZINDEX.DIALOG + 1};
         `, options: filteredOptions, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && filteredOptions.length
                     ? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: filteredOptions, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)
                     : null, onSelectOption: onSelectOption, onClose: () => {

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.js

@@ -22,6 +22,7 @@ import { css as cssToClassName } from "@emotion/css";
 import { ComponentPickerMenuList } from "./ComponentPickerMenuList";
 import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
 import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, } from "../../../../icons";
+import { ZINDEX } from "../../../../utils/zIndex";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
@@ -166,8 +167,7 @@ export function ComponentPickerMenuPlugin() {
         });
     }, [editor]);
     return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: open, activeEditor: editor, onClose: () => setOpen(false) }), _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, anchorClassName: cssToClassName `
-          // TODO 어드민에서 기본 z-index가 1이라 추가함. 없앨 수도 있음
-          z-index: 1;
+          z-index: ${ZINDEX.DIALOG + 1};
         `, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && options.length
                     ? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: options, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)
                     : null })] }));

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

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

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

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

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

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

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

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

package/package.json

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