@team-monolith/cds 1.119.1 → 1.119.2

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

@@ -4,38 +4,38 @@ export function ComponentPickerMenuItem(props) {
     const { index, isSelected, onClick, onMouseEnter, option } = props;
     return (_jsxs(ItemContainer, { tabIndex: -1, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: "typeahead-item-" + index, onMouseEnter: onMouseEnter, onClick: onClick, isSelected: isSelected, children: [_jsx(IconContainer, { className: option.iconContainerClassName, children: option.icon }), _jsx(Title, { children: option.title })] }, option.key));
 }
-const ItemContainer = styled.li `
-  display: flex;
-  padding: 3px 2px;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  cursor: pointer;
-
-  ${({ isSelected }) => isSelected && "background: #eee;"}
+const ItemContainer = styled.li `
+  display: flex;
+  padding: 3px 2px;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  cursor: pointer;
+
+  ${({ isSelected }) => isSelected && "background: #eee;"}
 `;
-const IconContainer = styled.div `
-  display: flex;
-  width: 26px;
-  height: 26px;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 5px;
-
-  background: ${({ theme }) => theme.color.foreground.neutralAlt};
-  box-shadow: 0px 0px 0px 1px rgba(201, 201, 204, 0.48);
-
-  svg {
-    width: 18px;
-    height: 18px;
-  }
+const IconContainer = styled.div `
+  display: flex;
+  width: 26px;
+  height: 26px;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 5px;
+
+  background: ${({ theme }) => theme.color.foreground.neutralAlt};
+  box-shadow: 0px 0px 0px 1px rgba(201, 201, 204, 0.48);
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
 `;
-const Title = styled.span `
-  color: ${({ theme }) => theme.color.foreground.neutralBase};
-  font-family: ${({ theme }) => theme.fontFamily.ui};
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px; /* 142.857% */
+const Title = styled.span `
+  color: ${({ theme }) => theme.color.foreground.neutralBase};
+  font-family: ${({ theme }) => theme.fontFamily.ui};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px; /* 142.857% */
 `;

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

@@ -17,37 +17,37 @@ export function ComponentPickerMenuList(props) {
                     }, option: option }, option.key));
             }) }) }));
 }
-const Container = styled.div `
-  position: absolute;
-
-  display: flex;
-  width: 200px;
-  padding: 4px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 5px;
-
-  border-radius: 8px;
-  border: 1px solid #e8e8eb;
-  background: ${({ theme }) => theme.color.background.neutralBase};
-  box-shadow: 0px 3px 15px -3px rgba(13, 20, 33, 0.13);
+const Container = styled.div `
+  position: absolute;
+
+  display: flex;
+  width: 200px;
+  padding: 4px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+
+  border-radius: 8px;
+  border: 1px solid #e8e8eb;
+  background: ${({ theme }) => theme.color.background.neutralBase};
+  box-shadow: 0px 3px 15px -3px rgba(13, 20, 33, 0.13);
 `;
-const ListContainer = styled.ul `
-  padding: 0;
-  list-style: none;
-  margin: 0;
-
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 1px;
-  align-self: stretch;
-
-  overflow-y: scroll;
-
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
+const ListContainer = styled.ul `
+  padding: 0;
+  list-style: none;
+  margin: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  align-self: stretch;
+
+  overflow-y: scroll;
+
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;

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

@@ -15,12 +15,12 @@ import { LexicalTypeaheadMenuPlugin, MenuOption, useBasicTypeaheadTriggerMatch,
 import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
 import { INSERT_TABLE_COMMAND } from "@lexical/table";
-import { $createParagraphNode, $getSelection, $isRangeSelection, } from "lexical";
+import { $createParagraphNode, $findMatchingParent, $getSelection, $isRangeSelection, } from "lexical";
 import { useCallback, useMemo, useState } from "react";
 import * as ReactDOM from "react-dom";
 import { css as cssToClassName } from "@emotion/css";
 import { ComponentPickerMenuList } from "./ComponentPickerMenuList";
-import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, VideoLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, FileList2LineIcon, EmojiStickerLineIcon, File3LineIcon, } from "../../../../icons";
+import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, VideoLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, FileList2LineIcon, EmojiStickerLineIcon, File3LineIcon, PlayList2FillIcon, } from "../../../../icons";
 import { ZINDEX } from "../../../../utils/zIndex";
 import { css, useTheme } from "@emotion/react";
 import { INSERT_PROBLEM_INPUT_COMMAND } from "../ProblemInputPlugin";
@@ -38,6 +38,8 @@ import { UPLOAD_FILE_COMMAND } from "../FilePlugin";
 import { i18n } from "../../../../i18n/i18n";
 import { useTranslation } from "react-i18next";
 import { getTexts } from "../../../../texts";
+import { INSERT_TOGGLE_COMMAND } from "../TogglePlugin";
+import { $isToggleTitleNode } from "../../nodes";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
@@ -59,6 +61,16 @@ export class ComponentPickerOption extends MenuOption {
         this.onSelect = options.onSelect.bind(this);
     }
 }
+function isSelectionInsideToggleTitle(editor) {
+    return editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) {
+            return false;
+        }
+        const titleNode = $findMatchingParent(selection.anchor.getNode(), (node) => $isToggleTitleNode(node));
+        return Boolean(titleNode);
+    });
+}
 function getDynamicOptions(editor, queryString) {
     const options = [];
     // Lexical 원본 코드를 가져왔기 때문에 코드 변경을 최소화하기위함
@@ -141,11 +153,11 @@ function getSheetContextOptions(editor, theme) {
                 placeholder: "",
             }),
         }),
-        new ComponentDrawerOption(i18n.t("활동지 메뉴구분선"), (_jsx("div", { css: css `
-            width: 100%;
-            height: 1px;
-            background: ${theme.color.background.neutralAltActive};
-            margin: 4px 0;
+        new ComponentDrawerOption(i18n.t("활동지 메뉴구분선"), (_jsx("div", { css: css `
+            width: 100%;
+            height: 1px;
+            background: ${theme.color.background.neutralAltActive};
+            margin: 4px 0;
           ` }))),
     ];
 }
@@ -189,14 +201,52 @@ function getQuizContextOptions(editor, theme) {
                 });
             },
         }),
-        new ComponentDrawerOption(i18n.t("퀴즈 메뉴구분선"), (_jsx("div", { css: css `
-            width: 100%;
-            height: 1px;
-            background: ${theme.color.background.neutralAltActive};
-            margin: 4px 0;
+        new ComponentDrawerOption(i18n.t("퀴즈 메뉴구분선"), (_jsx("div", { css: css `
+            width: 100%;
+            height: 1px;
+            background: ${theme.color.background.neutralAltActive};
+            margin: 4px 0;
           ` }))),
     ];
 }
+function getToggleTitleOptions(props) {
+    const { editor } = props;
+    return [
+        new ComponentPickerOption(i18n.t("본문", { context: "렉시컬 드롭다운 메뉴" }), {
+            icon: _jsx(TextIcon, {}),
+            // eslint-disable-next-line i18next/no-literal-string
+            keywords: ["normal", "paragraph", "p", "text", "본문", "단락", "내용"],
+            onSelect: () => editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    $setBlocksType(selection, () => $createParagraphNode());
+                }
+            }),
+        }),
+        ...[1, 2, 3].map((n) => {
+            const titleMap = {
+                1: i18n.t("큰 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                2: i18n.t("중간 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                3: i18n.t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
+            };
+            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}`));
+                    }
+                }),
+            });
+        }),
+    ];
+}
 export function getBaseOptions(props) {
     const { editor, theme, setImageOpen, setVideoOpen, setFileOpen, isSheetEnabled, isQuizEnabled, showFileUpload, } = props;
     const baseOptions = [
@@ -243,6 +293,11 @@ export function getBaseOptions(props) {
             keywords: ["numbered list", "ordered list", "ol"],
             onSelect: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
         }),
+        new ComponentPickerOption(i18n.t("토글 목록", { context: "렉시컬 드롭다운 메뉴" }), {
+            icon: _jsx(PlayList2FillIcon, {}),
+            keywords: ["toggle", "collapsible"],
+            onSelect: () => editor.dispatchCommand(INSERT_TOGGLE_COMMAND, undefined),
+        }),
         new ComponentPickerOption(i18n.t("인용 블록", { context: "렉시컬 드롭다운 메뉴" }), {
             icon: _jsx(DoubleQuotesLIcon, {}),
             keywords: ["block quote"],
@@ -323,23 +378,30 @@ export function ComponentPickerMenuPlugin(props) {
     const [editor] = useLexicalComposerContext();
     const theme = useTheme();
     const [queryString, setQueryString] = useState(null);
+    const [isInsideToggleTitle, setIsInsideToggleTitle] = useState(() => isSelectionInsideToggleTitle(editor));
     const [imageOpen, setImageOpen] = useState(false);
     const [videoOpen, setVideoOpen] = useState(false);
     const [fileOpen, setFileOpen] = useState(false);
     const checkForTriggerMatch = useBasicTypeaheadTriggerMatch("/", {
         minLength: 0,
     });
+    const handleQueryChange = useCallback((nextQuery) => {
+        setQueryString(nextQuery);
+        setIsInsideToggleTitle(() => isSelectionInsideToggleTitle(editor));
+    }, [editor]);
     const options = useMemo(() => {
-        const baseOptions = getBaseOptions({
-            editor,
-            theme,
-            setImageOpen,
-            setVideoOpen,
-            isSheetEnabled,
-            isQuizEnabled,
-            setFileOpen,
-            showFileUpload,
-        });
+        const baseOptions = isInsideToggleTitle
+            ? getToggleTitleOptions({ editor })
+            : getBaseOptions({
+                editor,
+                theme,
+                setImageOpen,
+                setVideoOpen,
+                isSheetEnabled,
+                isQuizEnabled,
+                setFileOpen,
+                showFileUpload,
+            });
         if (!queryString) {
             return baseOptions;
         }
@@ -351,7 +413,7 @@ export function ComponentPickerMenuPlugin(props) {
                     option.keywords.some((keyword) => regex.test(keyword)))),
         ];
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [editor, queryString]);
+    }, [editor, queryString, isInsideToggleTitle]);
     const onSelectOption = useCallback((selectedOption, nodeToRemove, closeMenu, matchingString) => {
         if (selectedOption instanceof ComponentDrawerOption) {
             return;
@@ -372,8 +434,8 @@ export function ComponentPickerMenuPlugin(props) {
                     editor.dispatchCommand(INSERT_VIDEO_COMMAND, props);
                 }, onClose: () => setVideoOpen(false), shouldReset: true }), _jsx(UploadFileDialog, { open: fileOpen, onClose: () => setFileOpen(false), onChange: (props) => {
                     editor.dispatchCommand(UPLOAD_FILE_COMMAND, props);
-                } }), _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, anchorClassName: cssToClassName `
-          z-index: ${ZINDEX.DIALOG + 1};
+                } }), _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: handleQueryChange, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, anchorClassName: cssToClassName `
+          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/FloatingLinkEditorPlugin/FloatingLinkEditor.js

@@ -164,57 +164,57 @@ export function FloatingLinkEditor(props) {
                                 editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
                             }, children: _jsx(DeleteBinLineIcon, {}) })] })] })) }));
 }
-const Container = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  will-change: transform;
-
-  display: flex;
-  padding: 0px 4px;
-  align-items: center;
-  gap: 4px;
-
-  border-radius: 8px;
-  // 메뉴가 활성화되지 않아도 클릭한 영역을 따라 다니도록 개발되었습니다.
-  // border가 있으면 활성화되지 않은 상태에서도 노출되므로 border를 제거합니다.
-  /* border: 1px solid #e8e8eb; */
-  background: ${({ theme }) => theme.color.background.neutralBase};
-  box-shadow: 0px 3px 15px -3px rgba(13, 20, 33, 0.13);
-
-  width: 400px;
+const Container = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  will-change: transform;
+
+  display: flex;
+  padding: 0px 4px;
+  align-items: center;
+  gap: 4px;
+
+  border-radius: 8px;
+  // 메뉴가 활성화되지 않아도 클릭한 영역을 따라 다니도록 개발되었습니다.
+  // border가 있으면 활성화되지 않은 상태에서도 노출되므로 border를 제거합니다.
+  /* border: 1px solid #e8e8eb; */
+  background: ${({ theme }) => theme.color.background.neutralBase};
+  box-shadow: 0px 3px 15px -3px rgba(13, 20, 33, 0.13);
+
+  width: 400px;
 `;
-const Buttons = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 4px;
+const Buttons = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
 `;
-const Button = styled.button `
-  // reset
-  border: none;
-  outline: none;
-  background: none;
-  cursor: pointer;
-
-  padding: 8px 4px;
-
-  svg {
-    width: 18px;
-    height: 18px;
-  }
+const Button = styled.button `
+  // reset
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+
+  padding: 8px 4px;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
 `;
-const Link = styled.a `
-  width: 100%;
-  padding: 0px 8px;
-
-  /* Default/Paragraph/16px-Rg */
-  font-family: ${({ theme }) => theme.fontFamily.ui};
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px; /* 150% */
+const Link = styled.a `
+  width: 100%;
+  padding: 0px 8px;
+
+  /* Default/Paragraph/16px-Rg */
+  font-family: ${({ theme }) => theme.fontFamily.ui};
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
 `;
-const StyledInput = styled(Input) `
-  margin: 4px 0px;
+const StyledInput = styled(Input) `
+  margin: 4px 0px;
 `;

package/dist/patterns/LexicalEditor/plugins/FloatingTextFormatToolbarPlugin/FloatingTextFormatPopup.js

@@ -19,41 +19,41 @@ export const FloatingTextFormatPopup = forwardRef(function FloatingTextFormatPop
                         editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
                     }, active: Boolean(isCode), "aria-label": "Insert code block", children: _jsx(CodeFillIcon, {}) }), _jsx(IconButton, { type: "button", onClick: insertLink, active: Boolean(isLink), "aria-label": "Insert link", children: _jsx(LinkIcon, {}) })] })) }));
 });
-const Container = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  will-change: transform;
-
-  display: inline-flex;
-  padding: 0px 4px;
-  align-items: flex-start;
-  gap: 4px;
-
-  border-radius: 8px;
-  border: 1px solid #e8e8eb;
-  background: ${({ theme }) => theme.color.background.neutralBase};
-  box-shadow: 0px 3px 15px -3px rgba(13, 20, 33, 0.13);
+const Container = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  will-change: transform;
+
+  display: inline-flex;
+  padding: 0px 4px;
+  align-items: flex-start;
+  gap: 4px;
+
+  border-radius: 8px;
+  border: 1px solid #e8e8eb;
+  background: ${({ theme }) => theme.color.background.neutralBase};
+  box-shadow: 0px 3px 15px -3px rgba(13, 20, 33, 0.13);
 `;
-const IconButton = styled.button `
-  border: none;
-  outline: none;
-
-  display: flex;
-  padding: 8px 4px;
-  align-items: center;
-  gap: 4px;
-
-  background: #fff;
-
-  svg {
-    width: 18px;
-    height: 18px;
-    ${({ theme, active }) => active && `color: ${theme.color.foreground.primary};`}
-  }
-
-  &:hover {
-    background: ${({ theme }) => theme.color.background.neutralAlt};
-  }
+const IconButton = styled.button `
+  border: none;
+  outline: none;
+
+  display: flex;
+  padding: 8px 4px;
+  align-items: center;
+  gap: 4px;
+
+  background: #fff;
+
+  svg {
+    width: 18px;
+    height: 18px;
+    ${({ theme, active }) => active && `color: ${theme.color.foreground.primary};`}
+  }
+
+  &:hover {
+    background: ${({ theme }) => theme.color.background.neutralAlt};
+  }
 `;

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

@@ -3,13 +3,13 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { $getSelection, $isParagraphNode, $isRangeSelection } from "lexical";
 import { css as cssToClassName } from "@emotion/css";
 import { useTheme } from "@emotion/react";
-const getPlaceholderClassName = (theme) => cssToClassName `
-  &::before {
-    position: absolute;
-    content: attr(data-placeholder);
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    pointer-events: none;
-  }
+const getPlaceholderClassName = (theme) => cssToClassName `
+  &::before {
+    position: absolute;
+    content: attr(data-placeholder);
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    pointer-events: none;
+  }
 `;
 export const ParagraphPlaceholderPlugin = ({ placeholder, }) => {
     const [editor] = useLexicalComposerContext();

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare const INSERT_TOGGLE_COMMAND: import("lexical").LexicalCommand<void>;
+export declare function TogglePlugin(): null;