@team-monolith/cds 1.6.0 → 1.7.0

package/dist/components/Popover.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface PopoverProps {
+    className?: string;
+    /** 제목 */
+    headline?: React.ReactNode;
+    /** 내용 */
+    content?: React.ReactNode;
+    /** 좌측 아이콘 */
+    icon?: React.ReactNode;
+    /** 우측 버튼 텍스트 */
+    buttonLabel?: string;
+    /** 우측 버튼 클릭시 동작 */
+    onButtonClick?: () => void;
+}
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
+export default Popover;

package/dist/components/Popover.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import React from "react";
+import shadows from "../foundation/shadows";
+import { RESET_BUTTON } from "../utils/reset";
+import { HOVER } from "../utils/hover";
+import { css } from "@emotion/react";
+const Popover = React.forwardRef((props, ref) => {
+    const { className, headline, content, icon, buttonLabel, onButtonClick } = props;
+    return (_jsxs(Container, Object.assign({ ref: ref, className: className }, { children: [icon && _jsx(Icon, { children: icon }), _jsxs(ContentArea, { children: [headline && _jsx(Headline, { children: headline }), content && _jsx(Content, { children: content })] }), buttonLabel && (_jsx(PopoverButton, Object.assign({ type: "button", onClick: onButtonClick }, { children: buttonLabel })))] })));
+});
+export default Popover;
+const Container = styled.div(({ theme }) => css `
+    display: inline-flex;
+    align-items: center;
+    width: auto;
+    padding: 6px 16px;
+    gap: 12px;
+    border-radius: 100px;
+    background-color: ${theme.color.foreground.neutralBase};
+    color: ${theme.color.background.neutralBase};
+    box-shadow: ${shadows.shadow32};
+  `);
+const Icon = styled.div `
+  display: block;
+  width: 20px;
+  height: 20px;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const ContentArea = styled.div `
+  flex: 1 0 auto;
+  font-size: 14px;
+  line-height: 20px;
+`;
+const Headline = styled.div `
+  margin-bottom: 2px;
+  font-weight: 700;
+`;
+const Content = styled.div `
+  font-weight: 400;
+`;
+const PopoverButton = styled.button(({ theme }) => css `
+    ${RESET_BUTTON}
+    margin: 4px;
+    padding: 6px 8px;
+    cursor: pointer;
+    background-color: ${theme.color.background.primary};
+    color: ${theme.color.background.neutralAlt};
+    font-size: 14px;
+    line-height: 16px;
+    border-radius: 8px;
+    ${HOVER(css `
+      color: ${theme.color.foreground.neutralAlt};
+      background: ${theme.color.background.primaryActive};
+    `)}
+  `);

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export { default as Pagination } from "./components/Pagination";
 export * from "./components/Pagination";
 export { default as PinInput } from "./components/PinInput";
 export * from "./components/PinInput";
+export { default as Popover } from "./components/Popover";
+export * from "./components/Popover";
 export { default as RadioInput } from "./components/RadioInput";
 export * from "./components/RadioInput";
 export { default as SquareButton } from "./components/SquareButton";

package/dist/index.js

@@ -12,6 +12,8 @@ export { default as Pagination } from "./components/Pagination";
 export * from "./components/Pagination";
 export { default as PinInput } from "./components/PinInput";
 export * from "./components/PinInput";
+export { default as Popover } from "./components/Popover";
+export * from "./components/Popover";
 export { default as RadioInput } from "./components/RadioInput";
 export * from "./components/RadioInput";
 export { default as SquareButton } from "./components/SquareButton";

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -10,6 +10,7 @@ import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
 import { getTheme } from "./theme";
 import { useTheme } from "@emotion/react";
 import Plugins from "./Plugins";
+import { ColoredQuoteNode } from "./nodes/ColoredQuoteNode";
 function validateValue(value) {
     var _a, _b;
     if (value && typeof value !== "object") {
@@ -46,6 +47,13 @@ export function LexicalEditor(props) {
             LinkNode,
             ImageNode,
             HorizontalRuleNode,
+            ColoredQuoteNode,
+            {
+                replace: QuoteNode,
+                with: (_node) => {
+                    return new ColoredQuoteNode("grey");
+                },
+            },
         ],
         theme: getTheme(theme),
         editorState: validateValue(value) ? JSON.stringify(value) : undefined,

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

@@ -0,0 +1,21 @@
+import { QuoteNode } from "@lexical/rich-text";
+import { EditorConfig, LexicalNode, NodeKey, SerializedElementNode } from "lexical";
+type COLOR = "red" | "yellow" | "blue" | "green" | "grey";
+export type SerializedColoredQuoteNode = SerializedElementNode & {
+    color: COLOR;
+};
+export declare class ColoredQuoteNode extends QuoteNode {
+    __color: COLOR;
+    static getType(): string;
+    static clone(node: ColoredQuoteNode): ColoredQuoteNode;
+    constructor(color: COLOR, key?: NodeKey);
+    setColor(color: COLOR): void;
+    getColor(): COLOR;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: ColoredQuoteNode, dom: HTMLElement): boolean;
+    static importJSON(serializedNode: SerializedColoredQuoteNode): QuoteNode;
+    exportJSON(): SerializedColoredQuoteNode;
+}
+export declare function $createColoredQuoteNode(color: COLOR): QuoteNode;
+export declare function $isColoredQuoteNode(node: LexicalNode | null | undefined): node is ColoredQuoteNode;
+export {};

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

@@ -0,0 +1,50 @@
+import { QuoteNode } from "@lexical/rich-text";
+import { $applyNodeReplacement, } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+export class ColoredQuoteNode extends QuoteNode {
+    static getType() {
+        return "colored-quote";
+    }
+    static clone(node) {
+        return new ColoredQuoteNode(node.__color, node.__key);
+    }
+    constructor(color, key) {
+        super(key);
+        this.__color = color;
+    }
+    setColor(color) {
+        const self = this.getWritable();
+        self.__color = color;
+    }
+    getColor() {
+        const self = this.getLatest();
+        return self.__color;
+    }
+    createDOM(config) {
+        const element = document.createElement("blockquote");
+        addClassNamesToElement(element, config.theme.coloredQuote[this.__color]);
+        return element;
+    }
+    updateDOM(prevNode, dom) {
+        if (prevNode.__color !== this.__color) {
+            return true;
+        }
+        return super.updateDOM(prevNode, dom);
+    }
+    static importJSON(serializedNode) {
+        const node = $createColoredQuoteNode(serializedNode.color);
+        node.setFormat(serializedNode.format);
+        node.setIndent(serializedNode.indent);
+        node.setDirection(serializedNode.direction);
+        return node;
+    }
+    exportJSON() {
+        return Object.assign(Object.assign({}, super.exportJSON()), { type: "colored-quote", color: this.__color });
+    }
+}
+export function $createColoredQuoteNode(color) {
+    return $applyNodeReplacement(new ColoredQuoteNode(color));
+}
+export function $isColoredQuoteNode(node) {
+    return node instanceof ColoredQuoteNode;
+}

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

@@ -5,7 +5,7 @@ import plus from "./plus.svg";
 import menu from "./menu.svg";
 import styled from "@emotion/styled";
 function ComponentAdder(props, ref) {
-    const { className, onPlusClick, onMenuClick, onMenuDragStart, onMenuDragEnd } = props;
+    const { className, onPlusClick, onMenuClick, onMenuDragStart, onMenuDragEnd, } = props;
     const [editor] = useLexicalComposerContext();
     return (_jsxs(Container, Object.assign({ ref: ref, className: className }, { children: [_jsx(PlusContainer, Object.assign({ onClick: onPlusClick }, { children: editor._editable && _jsx(PlusIcon, {}) })), _jsx(MenuContainer, Object.assign({ draggable: true, onClick: onMenuClick, onDragStart: onMenuDragStart, onDragEnd: onMenuDragEnd }, { children: editor._editable && _jsx(MenuIcon, {}) }))] })));
 }

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

@@ -15,7 +15,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/reac
 /** @jsxImportSource @emotion/react */
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { $getNearestNodeFromDOMNode, $createParagraphNode, $isParagraphNode, $isElementNode, $isTextNode, $getSelection, $isRangeSelection, } from "lexical";
+import { $getNearestNodeFromDOMNode, $createParagraphNode, $isParagraphNode, $getSelection, $isRangeSelection, $createNodeSelection, $setSelection, $isNodeSelection, } from "lexical";
 import ReactDOM, { createPortal } from "react-dom";
 // LexicalNodeMenuPlugin는 특정 Node 옆에 메뉴를 노출시키는 플러그인
 // 공식 문서에는 아무 내용도 없음...
@@ -26,7 +26,7 @@ import { ComponentPickerMenuList, getBaseOptions, } from "../ComponentPickerMenu
 import { useFloatingMenu } from "./useFloatingMenu";
 import ComponentAdder from "./ComponentAdder";
 import styled from "@emotion/styled";
-import { getContextMenuOptions } from "./getContextMenuOptions";
+import { useContextMenuOptions } from "./useContextMenuOptions";
 import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
 import { ZINDEX } from "../../../../utils/zIndex";
 export const COMPONENT_ADDER_MENU_CLASSNAME = "component-adder-menu";
@@ -66,7 +66,7 @@ export function ComponentAdderPlugin(props) {
     useEffect(() => {
         const updateListener = () => {
             editor.getEditorState().read(() => {
-                var _a;
+                var _a, _b;
                 if (nodeKey === null) {
                     return;
                 }
@@ -77,15 +77,11 @@ export function ComponentAdderPlugin(props) {
                     //   비교할 때는 selection이 Nested 하게 있을 수 있어 Root 바로 아래의 Node를 찾아 비교합니다.
                     const nodes = selection.getNodes();
                     const isAllNodesNotMatched = nodes.every((node) => {
-                        const nodeAndParents = [node, ...node.getParents()];
-                        const maybeTopNode = nodeAndParents[nodeAndParents.length - 2];
-                        // 선택된 노드 자체가 Root Node라면
-                        // maybeTopNode가 undefined가 됩니다.
-                        // 다른 노드를 선택한 것으로 간주하고 true(not matched)를 반환합니다.
-                        if (!maybeTopNode) {
+                        const topLevelElement = node.getTopLevelElement();
+                        if (!topLevelElement) {
                             return true;
                         }
-                        return maybeTopNode.getKey() !== nodeKey;
+                        return topLevelElement.getKey() !== nodeKey;
                     });
                     if (isAllNodesNotMatched) {
                         setQuery("");
@@ -98,6 +94,13 @@ export function ComponentAdderPlugin(props) {
                         setQuery((_a = getTextUpToAnchor(selection)) !== null && _a !== void 0 ? _a : "");
                     }
                 }
+                else if ($isNodeSelection(selection)) {
+                    const nodes = selection.getNodes();
+                    if (((_b = nodes[0]) === null || _b === void 0 ? void 0 : _b.getKey()) !== nodeKey) {
+                        setQuery("");
+                        setNodeKey(null);
+                    }
+                }
                 else {
                     setQuery("");
                     setNodeKey(null);
@@ -123,6 +126,7 @@ export function ComponentAdderPlugin(props) {
             return newResolves.filter((newResolve) => resolves.indexOf(newResolve) === -1);
         });
     });
+    const getContextMenuOptions = useContextMenuOptions();
     const filteredOptions = options.filter((option) => {
         const regex = new RegExp(query, "i");
         return (regex.test(option.title) ||
@@ -187,12 +191,11 @@ export function ComponentAdderPlugin(props) {
                                 if (!newNode) {
                                     return;
                                 }
-                                if ($isElementNode(newNode)) {
-                                    newNode.selectStart();
-                                }
-                                else if ($isTextNode(newNode)) {
-                                    newNode.select();
-                                }
+                                // Set a node selection
+                                const nodeSelection = $createNodeSelection();
+                                // Add a node key to the selection.
+                                nodeSelection.add(newNode.getKey());
+                                $setSelection(nodeSelection);
                                 const contextMenuOptions = getContextMenuOptions(editor, newNode, setOpen);
                                 setOptions(contextMenuOptions);
                                 if (nodeKey === null) {

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

@@ -2,12 +2,112 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Context Menu (:: 버튼)
  */
-import { $getSelection, $isRangeSelection, } from "lexical";
+import { $createParagraphNode, ParagraphNode, } from "lexical";
 import { ComponentPickerOption, getBaseOptions, } from "../ComponentPickerMenuPlugin";
-import { $createHeadingNode, HeadingNode } from "@lexical/rich-text";
+import { $createHeadingNode, $createQuoteNode, HeadingNode, } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
 import { ListItemNode, ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, } from "@lexical/list";
-import { H1Icon, H2Icon, H3Icon, CloseFillIcon, ListUnorderedIcon, ListOrderedIcon, } from "../../../../icons";
+import { H1Icon, H2Icon, H3Icon, CloseFillIcon, ListUnorderedIcon, ListOrderedIcon, CodeViewIcon, DoubleQuotesLIcon, ImageLineIcon, SeparatorIcon, TextIcon, } from "../../../../icons";
+import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode";
+import { $createCodeNode } from "@lexical/code";
+function getParagraphContextOptions(editor, node, setOpen) {
+    return [
+        new ComponentPickerOption("본문", {
+            icon: _jsx(TextIcon, {}),
+            keywords: ["normal", "paragraph", "p", "text", "본문", "단락", "내용"],
+            onSelect: () => editor.update(() => {
+                const selection = node.selectStart();
+                $setBlocksType(selection, () => $createParagraphNode());
+            }),
+        }),
+        ...[1, 2, 3].map((n) => {
+            const titleMap = {
+                1: "큰 제목",
+                2: "중간 제목",
+                3: "작은 제목",
+            };
+            const iconMap = {
+                1: _jsx(H1Icon, {}),
+                2: _jsx(H2Icon, {}),
+                3: _jsx(H3Icon, {}),
+            };
+            return new ComponentPickerOption(titleMap[n], {
+                icon: iconMap[n],
+                keywords: ["heading", "header", `h${n}`, titleMap[n]],
+                onSelect: () => editor.update(() => {
+                    const selection = node.selectStart();
+                    $setBlocksType(selection, () => $createHeadingNode(`h${n}`));
+                }),
+            });
+        }),
+        new ComponentPickerOption("일반 목록", {
+            icon: _jsx(ListUnorderedIcon, {}),
+            keywords: ["bulleted list", "unordered list", "ul"],
+            onSelect: () => {
+                node.selectStart();
+                editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+            },
+        }),
+        new ComponentPickerOption("숫자 목록", {
+            icon: _jsx(ListOrderedIcon, {}),
+            keywords: ["numbered list", "ordered list", "ol"],
+            onSelect: () => {
+                node.selectStart();
+                editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+            },
+        }),
+        new ComponentPickerOption("인용 블록", {
+            icon: _jsx(DoubleQuotesLIcon, {}),
+            keywords: ["block quote"],
+            onSelect: () => editor.update(() => {
+                const selection = node.selectStart();
+                $setBlocksType(selection, () => $createQuoteNode());
+            }),
+        }),
+        new ComponentPickerOption("코드 블록", {
+            icon: _jsx(CodeViewIcon, {}),
+            keywords: ["javascript", "python", "js", "codeblock"],
+            onSelect: () => editor.update(() => {
+                const selection = node.selectStart();
+                if (selection.isCollapsed()) {
+                    $setBlocksType(selection, () => $createCodeNode());
+                }
+                else {
+                    // Will this ever happen?
+                    const textContent = selection.getTextContent();
+                    const codeNode = $createCodeNode();
+                    selection.insertNodes([codeNode]);
+                    selection.insertRawText(textContent);
+                }
+            }),
+        }),
+        new ComponentPickerOption("구분선", {
+            icon: _jsx(SeparatorIcon, {}),
+            keywords: ["horizontal rule", "divider", "hr"],
+            onSelect: () => {
+                node.selectStart();
+                editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
+            },
+        }),
+        new ComponentPickerOption("이미지", {
+            icon: _jsx(ImageLineIcon, {}),
+            keywords: ["image", "photo", "picture", "file"],
+            onSelect: () => {
+                node.selectStart();
+                setOpen(true);
+            },
+        }),
+        new ComponentPickerOption("블록 삭제", {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                editor.update(() => {
+                    node.remove();
+                });
+            },
+        }),
+    ];
+}
 function getHeadingContextMenuOptions(editor, node, setOpen) {
     return [
         ...[1, 2, 3].map((n) => {
@@ -25,10 +125,8 @@ function getHeadingContextMenuOptions(editor, node, setOpen) {
                 icon: iconMap[n],
                 keywords: ["heading", "header", `h${n}`, titleMap[n]],
                 onSelect: () => editor.update(() => {
-                    const selection = $getSelection();
-                    if ($isRangeSelection(selection)) {
-                        $setBlocksType(selection, () => $createHeadingNode(`h${n}`));
-                    }
+                    const selection = node.selectStart();
+                    $setBlocksType(selection, () => $createHeadingNode(`h${n}`));
                 }),
             });
         }),
@@ -48,12 +146,18 @@ function getListContextMenuOptions(editor, node, setOpen) {
         new ComponentPickerOption("일반 목록", {
             icon: _jsx(ListUnorderedIcon, {}),
             keywords: ["bulleted list", "unordered list", "ul"],
-            onSelect: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
+            onSelect: () => {
+                node.selectStart();
+                editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+            },
         }),
         new ComponentPickerOption("숫자 목록", {
             icon: _jsx(ListOrderedIcon, {}),
             keywords: ["numbered list", "ordered list", "ol"],
-            onSelect: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
+            onSelect: () => {
+                node.selectStart();
+                editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+            },
         }),
         new ComponentPickerOption("블록 삭제", {
             icon: _jsx(CloseFillIcon, {}),
@@ -67,7 +171,10 @@ function getListContextMenuOptions(editor, node, setOpen) {
     ];
 }
 export function getContextMenuOptions(editor, node, setOpen) {
-    if (node instanceof HeadingNode) {
+    if (node instanceof ParagraphNode) {
+        return getParagraphContextOptions(editor, node, setOpen);
+    }
+    else if (node instanceof HeadingNode) {
         return getHeadingContextMenuOptions(editor, node, setOpen);
     }
     else if (node instanceof ListNode || node instanceof ListItemNode) {

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/useContextMenuOptions.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Context Menu (:: 버튼)
+ */
+import { LexicalEditor, LexicalNode } from "lexical";
+import { ComponentPickerOption } from "../ComponentPickerMenuPlugin";
+export declare function useContextMenuOptions(): (editor: LexicalEditor, node: LexicalNode, setOpen: (open: boolean) => void) => ComponentPickerOption[];

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

@@ -0,0 +1,172 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Context Menu (:: 버튼)
+ */
+import { $getSelection, $isRangeSelection, } from "lexical";
+import { ComponentPickerOption, getBaseOptions, } from "../ComponentPickerMenuPlugin";
+import { $createHeadingNode, HeadingNode } from "@lexical/rich-text";
+import { $setBlocksType } from "@lexical/selection";
+import { ListItemNode, ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, } from "@lexical/list";
+import { H1Icon, H2Icon, H3Icon, CloseFillIcon, ListUnorderedIcon, ListOrderedIcon, InputMethodLineIcon, } from "../../../../icons";
+import { $isColoredQuoteNode, } from "../../nodes/ColoredQuoteNode";
+import { useTheme } from "@emotion/react";
+import { css } from "@emotion/css";
+function getHeadingContextMenuOptions(editor, theme, node, setOpen) {
+    return [
+        ...[1, 2, 3].map((n) => {
+            const titleMap = {
+                1: "큰 제목",
+                2: "중간 제목",
+                3: "작은 제목",
+            };
+            const iconMap = {
+                1: _jsx(H1Icon, {}),
+                2: _jsx(H2Icon, {}),
+                3: _jsx(H3Icon, {}),
+            };
+            return new ComponentPickerOption(titleMap[n], {
+                icon: iconMap[n],
+                keywords: ["heading", "header", `h${n}`, titleMap[n]],
+                onSelect: () => editor.update(() => {
+                    const selection = $getSelection();
+                    if ($isRangeSelection(selection)) {
+                        $setBlocksType(selection, () => $createHeadingNode(`h${n}`));
+                    }
+                }),
+            });
+        }),
+        new ComponentPickerOption("블록 삭제", {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                editor.update(() => {
+                    node.remove();
+                });
+            },
+        }),
+    ];
+}
+function getListContextMenuOptions(editor, theme, node, setOpen) {
+    return [
+        new ComponentPickerOption("일반 목록", {
+            icon: _jsx(ListUnorderedIcon, {}),
+            keywords: ["bulleted list", "unordered list", "ul"],
+            onSelect: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
+        }),
+        new ComponentPickerOption("숫자 목록", {
+            icon: _jsx(ListOrderedIcon, {}),
+            keywords: ["numbered list", "ordered list", "ol"],
+            onSelect: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
+        }),
+        new ComponentPickerOption("블록 삭제", {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                editor.update(() => {
+                    node.remove();
+                });
+            },
+        }),
+    ];
+}
+function getColoredQuoteContextMenuOptions(editor, theme, node, setOpen) {
+    return [
+        new ComponentPickerOption("회색", {
+            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.marbleOnContainer })),
+            iconContainerClassName: css `
+        background: ${theme.color.container.marbleContainer};
+      `,
+            keywords: ["grey", "gray"],
+            onSelect: () => {
+                editor.update(() => {
+                    node.setColor("grey");
+                });
+            },
+        }),
+        new ComponentPickerOption("빨간색", {
+            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.dangerOnContainer })),
+            iconContainerClassName: css `
+        background: ${theme.color.container.dangerContainer};
+      `,
+            keywords: ["red"],
+            onSelect: () => {
+                editor.update(() => {
+                    node.setColor("red");
+                });
+            },
+        }),
+        new ComponentPickerOption("노란색", {
+            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.warningOnContainer })),
+            iconContainerClassName: css `
+        background: ${theme.color.container.warningContainer};
+      `,
+            keywords: ["yellow"],
+            onSelect: () => {
+                editor.update(() => {
+                    node.setColor("yellow");
+                });
+            },
+        }),
+        new ComponentPickerOption("파란색", {
+            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.primaryOnContainer })),
+            iconContainerClassName: css `
+        background: ${theme.color.container.primaryContainer};
+      `,
+            keywords: ["blue"],
+            onSelect: () => {
+                editor.update(() => {
+                    node.setColor("blue");
+                });
+            },
+        }),
+        new ComponentPickerOption("초록색", {
+            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.successOnContainer })),
+            iconContainerClassName: css `
+        background: ${theme.color.container.successContainer};
+      `,
+            keywords: ["green"],
+            onSelect: () => {
+                editor.update(() => {
+                    node.setColor("green");
+                });
+            },
+        }),
+        new ComponentPickerOption("블록 삭제", {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                editor.update(() => {
+                    node.remove();
+                });
+            },
+        }),
+    ];
+}
+export function useContextMenuOptions() {
+    const theme = useTheme();
+    return (editor, node, setOpen) => {
+        if (node instanceof HeadingNode) {
+            return getHeadingContextMenuOptions(editor, theme, node, setOpen);
+        }
+        else if (node instanceof ListNode || node instanceof ListItemNode) {
+            return getListContextMenuOptions(editor, theme, node, setOpen);
+        }
+        else if ($isColoredQuoteNode(node)) {
+            return getColoredQuoteContextMenuOptions(editor, theme, node, setOpen);
+        }
+        else {
+            return [
+                ...getBaseOptions(editor, setOpen),
+                new ComponentPickerOption("블록 삭제", {
+                    icon: _jsx(CloseFillIcon, {}),
+                    keywords: [],
+                    onSelect: () => {
+                        editor.update(() => {
+                            node.remove();
+                        });
+                    },
+                }),
+            ];
+        }
+    };
+}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import styled from "@emotion/styled";
 export function ComponentPickerMenuItem(props) {
     const { index, isSelected, onClick, onMouseEnter, option } = props;
-    return (_jsxs(ItemContainer, Object.assign({ tabIndex: -1, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: "typeahead-item-" + index, onMouseEnter: onMouseEnter, onClick: onClick, isSelected: isSelected }, { children: [_jsx(IconContainer, { children: option.icon }), _jsx(Title, { children: option.title })] }), option.key));
+    return (_jsxs(ItemContainer, Object.assign({ tabIndex: -1, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: "typeahead-item-" + index, onMouseEnter: onMouseEnter, onClick: onClick, isSelected: isSelected }, { children: [_jsx(IconContainer, Object.assign({ className: option.iconContainerClassName }, { children: option.icon })), _jsx(Title, { children: option.title })] }), option.key));
 }
 const ItemContainer = styled.li `
   display: flex;
@@ -10,6 +10,7 @@ const ItemContainer = styled.li `
   align-items: center;
   gap: 10px;
   width: 100%;
+  cursor: pointer;
 
   ${({ isSelected }) => isSelected && "background: #eee;"}
 `;

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

@@ -6,17 +6,19 @@
  *
  */
 /** @jsxImportSource @emotion/react */
-/// <reference types="react" />
 import { MenuOption } from "@lexical/react/LexicalTypeaheadMenuPlugin";
 import { LexicalEditor } from "lexical";
+import { ReactElement } from "react";
 export declare class ComponentPickerOption extends MenuOption {
     title: string;
-    icon?: JSX.Element;
+    icon?: ReactElement;
+    iconContainerClassName?: string;
     keywords: Array<string>;
     keyboardShortcut?: string;
     onSelect: (queryString: string) => void;
     constructor(title: string, options: {
-        icon?: JSX.Element;
+        icon?: ReactElement;
+        iconContainerClassName?: string;
         keywords?: Array<string>;
         keyboardShortcut?: string;
         onSelect: (queryString: string) => void;

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

@@ -32,6 +32,7 @@ export class ComponentPickerOption extends MenuOption {
         this.title = title;
         this.keywords = options.keywords || [];
         this.icon = options.icon;
+        this.iconContainerClassName = options.iconContainerClassName;
         this.keyboardShortcut = options.keyboardShortcut;
         this.onSelect = options.onSelect.bind(this);
     }

package/dist/patterns/LexicalEditor/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.js

@@ -7,7 +7,7 @@ import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
 import { setFloatingElemPositionForLinkEditor } from "../../utils/setFloatingElemPositionForLinkEditor";
 import { $findMatchingParent, mergeRegister } from "@lexical/utils";
 import styled from "@emotion/styled";
-import { CloseFillIcon, CheckLineIcon, EditLineIcon, DeleteBinLineIcon } from "../../../../icons";
+import { CloseFillIcon, CheckLineIcon, EditLineIcon, DeleteBinLineIcon, } from "../../../../icons";
 import Input from "../../../../components/Input";
 export function FloatingLinkEditor(props) {
     const { editor, isLink, setIsLink, anchorElem, isLinkEditMode, setIsLinkEditMode, } = props;

package/dist/patterns/LexicalEditor/plugins/FloatingLinkEditorPlugin/index.js

@@ -6,7 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { $isAutoLinkNode, $isLinkNode, } from "@lexical/link";
+import { $isAutoLinkNode, $isLinkNode } from "@lexical/link";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $findMatchingParent, mergeRegister } from "@lexical/utils";
 import { $getSelection, $isRangeSelection, CLICK_COMMAND, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, } from "lexical";

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

@@ -2,6 +2,13 @@ import { Theme } from "@emotion/react";
 export declare function getTheme(theme: Theme): {
     paragraph: string;
     quote: string;
+    coloredQuote: {
+        grey: string;
+        red: string;
+        yellow: string;
+        blue: string;
+        green: string;
+    };
     heading: {
         h1: string;
         h2: string;

package/dist/patterns/LexicalEditor/theme.js

@@ -23,8 +23,80 @@ export function getTheme(theme) {
 
       margin: 16px 0;
       padding-left: 12px;
-      border-left: 2px solid ${theme.color.container.marbleContainer};
+      border-left: 4px solid ${theme.color.container.marbleContainer};
     `,
+        coloredQuote: {
+            grey: css `
+        color: ${theme.color.container.marbleOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.marbleContainer};
+      `,
+            red: css `
+        color: ${theme.color.container.dangerOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.dangerContainer};
+      `,
+            yellow: css `
+        color: ${theme.color.container.warningOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.warningContainer};
+      `,
+            blue: css `
+        color: ${theme.color.container.primaryOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.primaryContainer};
+      `,
+            green: css `
+        color: ${theme.color.container.successOnContainer};
+
+        /* Default/Paragraph/14px-Rg */
+        font-family: ${theme.fontFamily.ui};
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+
+        margin: 16px 0;
+        padding-left: 12px;
+        border-left: 4px solid ${theme.color.container.successContainer};
+      `,
+        },
         heading: {
             h1: css `
         color: ${theme.color.foreground.neutralBase};

package/dist/patterns/SegmentedControl/SegmentedControlButton.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 import { ButtonProps } from "../..";
-export interface SegmentedControlButtonProps extends Omit<ButtonProps, "color" | "size"> {
+export interface SegmentedControlButtonProps extends Omit<ButtonProps, "color" | "size" | "startIcon" | "endIcon"> {
     value: string;
+    startIcon?: React.ReactNode | ((isActive: boolean) => React.ReactNode);
+    endIcon?: React.ReactNode | ((isActive: boolean) => React.ReactNode);
 }
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -20,7 +20,7 @@ import { Button, shadows } from "../..";
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
 export const SegmentedControlButton = React.forwardRef(function SegmentedControlButton(props, ref) {
-    const { onClick } = props, other = __rest(props, ["onClick"]);
+    const { onClick, startIcon, endIcon } = props, other = __rest(props, ["onClick", "startIcon", "endIcon"]);
     const context = useContext(SegmentedControlGroupPropsContext);
     const handleClick = (e) => {
         var _a;
@@ -30,20 +30,17 @@ export const SegmentedControlButton = React.forwardRef(function SegmentedControl
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(StyledButton, Object.assign({}, other, { ref: ref, isActive: isActive, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick })));
+    return (_jsx(StyledButton, Object.assign({}, other, { ref: ref, startIcon: typeof startIcon === "function" ? startIcon(isActive) : startIcon, endIcon: typeof endIcon === "function" ? endIcon(isActive) : endIcon, isActive: isActive, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick })));
 });
 const StyledButton = styled(Button, {
     shouldForwardProp: (prop) => prop !== "isActive",
-})(({ theme, isActive }) => css `
+})(({ isActive }) => css `
     display: flex;
     justify-content: center;
     flex-grow: 1;
     ${isActive &&
     `
       box-shadow: ${shadows.shadow04};
-      svg {
-        color: ${theme.color.foreground.primary};
-      }
       span {
         font-weight: 700;
       }

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { SquareButtonProps } from "../..";
-export interface SegmentedControlSquareButtonProps extends Omit<SquareButtonProps, "color" | "size"> {
+export interface SegmentedControlSquareButtonProps extends Omit<SquareButtonProps, "color" | "size" | "icon"> {
     value: string;
+    icon: React.ReactNode | ((isActive: boolean) => React.ReactNode);
 }
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.js

@@ -20,7 +20,7 @@ import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsC
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
 export const SegmentedControlSquareButton = React.forwardRef(function SegmentedControlSquareButton(props, ref) {
-    const { onClick } = props, other = __rest(props, ["onClick"]);
+    const { onClick, icon } = props, other = __rest(props, ["onClick", "icon"]);
     const context = useContext(SegmentedControlGroupPropsContext);
     const handleClick = () => {
         var _a;
@@ -30,20 +30,17 @@ export const SegmentedControlSquareButton = React.forwardRef(function SegmentedC
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(StyledSquareButton, Object.assign({}, other, { ref: ref, isActive: isActive, color: isActive ? "white" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: handleClick })));
+    return (_jsx(StyledSquareButton, Object.assign({}, other, { ref: ref, isActive: isActive, icon: typeof icon === "function" ? icon(isActive) : icon, color: isActive ? "white" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: handleClick })));
 });
 const StyledSquareButton = styled(SquareButton, {
     shouldForwardProp: (prop) => prop !== "isActive",
-})(({ theme, isActive }) => css `
+})(({ isActive }) => css `
     display: flex;
     justify-content: center;
     flex-grow: 1;
     ${isActive &&
     `
-      box-shadow: ${shadows.shadow04};
-      svg {
-        color: ${theme.color.foreground.primary};
-      }
+      box-shadow: ${shadows.shadow04}; 
       span {
         font-weight: 700;
       }

package/package.json

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