@team-monolith/cds 1.113.2 → 1.114.0

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

@@ -1,6 +1,7 @@
 import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
 import { ColoredQuoteNode } from "./ColoredQuoteNode";
 import { ImageNode } from "./ImageNode";
+import { VideoNode } from "./VideoNode";
 import { LayoutContainerNode } from "./LayoutContainerNode";
 import { LayoutItemNode } from "./LayoutItemNode";
 import { ProblemInputNode } from "./ProblemInputNode";
@@ -14,7 +15,7 @@ import { ListItemNode, ListNode } from "@lexical/list";
 import { CodeHighlightNode, CodeNode } from "@lexical/code";
 import { LinkNode } from "@lexical/link";
 import { FileNode } from "./FileNode";
-export declare const nodes: (typeof ColoredQuoteNode | typeof QuoteNode | typeof ImageNode | typeof FileNode | typeof ProblemInputNode | typeof ProblemSelectNode | typeof SelfEvaluationNode | typeof SheetInputNode | typeof SheetSelectNode | typeof LayoutContainerNode | typeof LayoutItemNode | typeof HeadingNode | typeof ListNode | typeof ListItemNode | typeof CodeNode | typeof CodeHighlightNode | typeof TableNode | typeof TableCellNode | typeof TableRowNode | typeof LinkNode | typeof HorizontalRuleNode | {
+export declare const nodes: (typeof ColoredQuoteNode | typeof QuoteNode | typeof ImageNode | typeof VideoNode | typeof FileNode | typeof ProblemInputNode | typeof ProblemSelectNode | typeof SelfEvaluationNode | typeof SheetInputNode | typeof SheetSelectNode | typeof LayoutContainerNode | typeof LayoutItemNode | typeof HeadingNode | typeof ListNode | typeof ListItemNode | typeof CodeNode | typeof CodeHighlightNode | typeof TableNode | typeof TableCellNode | typeof TableRowNode | typeof LinkNode | typeof HorizontalRuleNode | {
     replace: typeof QuoteNode;
     with: () => ColoredQuoteNode;
 })[];

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

@@ -1,6 +1,7 @@
 import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
 import { ColoredQuoteNode } from "./ColoredQuoteNode";
 import { ImageNode } from "./ImageNode";
+import { VideoNode } from "./VideoNode";
 import { LayoutContainerNode } from "./LayoutContainerNode";
 import { LayoutItemNode } from "./LayoutItemNode";
 import { ProblemInputNode } from "./ProblemInputNode";
@@ -29,6 +30,7 @@ export const nodes = [
     AutoLinkNode,
     LinkNode,
     ImageNode,
+    VideoNode,
     FileNode,
     HorizontalRuleNode,
     ColoredQuoteNode,

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

@@ -9,59 +9,59 @@ export const ComponentAdder = forwardRef(function ComponentAdder(props, ref) {
     const [editor] = useLexicalComposerContext();
     return (_jsxs(Container, { ref: ref, className: className, children: [_jsx(PlusContainer, { onClick: onPlusClick, children: editor._editable && _jsx(PlusIcon, {}) }), _jsx(MenuContainer, { draggable: true, onClick: onMenuClick, onDragStart: onMenuDragStart, onDragEnd: onMenuDragEnd, children: editor._editable && _jsx(MenuIcon, {}) })] }));
 });
-const Container = styled.div `
-  display: flex;
-  align-items: flex-start;
-  gap: 3px;
-
-  position: absolute;
-  left: 0;
-  top: 0;
-  will-change: transform;
+const Container = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: 3px;
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  will-change: transform;
 `;
-const PlusContainer = styled.div `
-  display: flex;
-  width: 26px;
-  height: 26px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 5px;
-  background: ${({ theme }) => theme.color.foreground.neutralAlt};
-
-  cursor: pointer;
-
-  &:hover {
-    background-color: #eff2f5;
-  }
+const PlusContainer = styled.div `
+  display: flex;
+  width: 26px;
+  height: 26px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  background: ${({ theme }) => theme.color.foreground.neutralAlt};
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: #eff2f5;
+  }
 `;
-const PlusIcon = styled.div `
-  width: 24px;
-  height: 24px;
-  // svg는 hover 이벤트를 path마다 받아서 불편함
-  // Lexical에서 동일한 접근법을 사용하고 있음
-  background-image: url(${plus});
+const PlusIcon = styled.div `
+  width: 24px;
+  height: 24px;
+  // svg는 hover 이벤트를 path마다 받아서 불편함
+  // Lexical에서 동일한 접근법을 사용하고 있음
+  background-image: url(${plus});
 `;
-const MenuContainer = styled.div `
-  display: flex;
-  width: 26px;
-  height: 26px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 5px;
-  background: ${({ theme }) => theme.color.foreground.neutralAlt};
-
-  cursor: grab;
-
-  &:active {
-    cursor: grabbing;
-  }
-
-  &:hover {
-    background-color: #eff2f5;
-  }
+const MenuContainer = styled.div `
+  display: flex;
+  width: 26px;
+  height: 26px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  background: ${({ theme }) => theme.color.foreground.neutralAlt};
+
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &:hover {
+    background-color: #eff2f5;
+  }
 `;
-const MenuIcon = styled.div `
-  width: 24px;
-  height: 24px;
-  background-image: url(${menu});
+const MenuIcon = styled.div `
+  width: 24px;
+  height: 24px;
+  background-image: url(${menu});
 `;

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

@@ -31,6 +31,8 @@ import { ZINDEX } from "../../../../utils/zIndex";
 import { useTheme } from "@emotion/react";
 import { InsertImageDialog } from "../../components/InsertImageDialog";
 import { INSERT_IMAGE_COMMAND } from "../ImagesPlugin";
+import { InsertVideoDialog } from "../../components/InsertVideoDialog";
+import { INSERT_VIDEO_COMMAND } from "../VideosPlugin";
 import { UploadFileDialog } from "../../components/UploadFileDialog";
 import { UPLOAD_FILE_COMMAND } from "../FilePlugin";
 export const componentAdderClasses = {
@@ -72,6 +74,7 @@ export function ComponentAdderPlugin(props) {
     const [plusOrMenu, setPlusOrMenu] = useState("plus");
     const [options, setOptions] = useState([]);
     const [imageOpen, setImageOpen] = useState(false);
+    const [videoOpen, setVideoOpen] = useState(false);
     const [fileOpen, setFileOpen] = useState(false);
     const [query, setQuery] = useState("");
     // EditorState의 Selection 을 추적하여
@@ -158,10 +161,12 @@ export function ComponentAdderPlugin(props) {
     const { onDragStart, onDragEnd, targetLineRef } = useDraggableBlockMenu(editor, anchorElem, blockElem, setBlockElem);
     return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: imageOpen, title: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30", onClose: () => setImageOpen(false), onChange: (props) => {
                     editor.dispatchCommand(INSERT_IMAGE_COMMAND, props);
+                }, shouldReset: true }), _jsx(InsertVideoDialog, { open: videoOpen, title: "\uB3D9\uC601\uC0C1 \uC0BD\uC785\uD558\uAE30", onClose: () => setVideoOpen(false), onChange: (props) => {
+                    editor.dispatchCommand(INSERT_VIDEO_COMMAND, props);
                 }, shouldReset: true }), _jsx(UploadFileDialog, { open: fileOpen, onClose: () => setFileOpen(false), onChange: (props) => {
                     editor.dispatchCommand(UPLOAD_FILE_COMMAND, props);
-                } }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
-          z-index: ${ZINDEX.DIALOG + 1};
+                } }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
+          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: () => {
@@ -209,6 +214,7 @@ export function ComponentAdderPlugin(props) {
                                 editor,
                                 theme,
                                 setImageOpen,
+                                setVideoOpen,
                                 isSheetEnabled,
                                 isQuizEnabled,
                                 setFileOpen,
@@ -231,7 +237,7 @@ export function ComponentAdderPlugin(props) {
                                 // Add a node key to the selection.
                                 nodeSelection.add(newNode.getKey());
                                 $setSelection(nodeSelection);
-                                const contextMenuOptions = getContextMenuOptions(editor, newNode, setImageOpen, setFileOpen);
+                                const contextMenuOptions = getContextMenuOptions(editor, newNode, setImageOpen, setVideoOpen, setFileOpen);
                                 setOptions(contextMenuOptions);
                                 if (nodeKey === null) {
                                     setNodeKey(newNode.getKey());
@@ -250,13 +256,13 @@ export function ComponentAdderPlugin(props) {
                             }));
                         }), onMenuDragStart: onDragStart, onMenuDragEnd: onDragEnd }), _jsx(TargetLine, { ref: targetLineRef })] }), anchorElem)] }));
 }
-const TargetLine = styled.div `
-  pointer-events: none;
-  background: deepskyblue;
-  height: 4px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  will-change: transform;
+const TargetLine = styled.div `
+  pointer-events: none;
+  background: deepskyblue;
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  will-change: transform;
 `;

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/menu.svg

@@ -1,8 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M9.41002 7.29999H9.40002" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
-  <path d="M14.6 7.29999H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
-  <path d="M9.31004 12H9.30005" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
-  <path d="M14.6 12H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
-  <path d="M9.41002 16.7H9.40002" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
-  <path d="M14.6 16.7H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M9.41002 7.29999H9.40002" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M14.6 7.29999H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M9.31004 12H9.30005" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M14.6 12H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M9.41002 16.7H9.40002" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M14.6 16.7H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
 </svg>

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/plus.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M12 7V12M12 12V17M12 12H17M12 12H7" stroke="#363636" stroke-width="2" stroke-linecap="round"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M12 7V12M12 12V17M12 12H17M12 12H7" stroke="#363636" stroke-width="2" stroke-linecap="round"/>
 </svg>

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

@@ -7,4 +7,4 @@ export declare function useContextMenuOptions(props: {
     isSheetEnabled: boolean;
     isQuizEnabled: boolean;
     showFileUpload: boolean;
-}): (editor: LexicalEditor, node: LexicalNode, setImageOpen: (open: boolean) => void, setFileOpen: (open: boolean) => void) => (ComponentPickerOption | ComponentDrawerOption)[];
+}): (editor: LexicalEditor, node: LexicalNode, setImageOpen: (open: boolean) => void, setVideoOpen: (open: boolean) => void, setFileOpen: (open: boolean) => void) => (ComponentPickerOption | ComponentDrawerOption)[];

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

@@ -12,7 +12,7 @@ import { H1Icon, H2Icon, H3Icon, CloseFillIcon, ListUnorderedIcon, ListOrderedIc
 import { $isColoredQuoteNode, } from "../../nodes/ColoredQuoteNode";
 import { useTheme } from "@emotion/react";
 import { css } from "@emotion/css";
-import { $isFileNode, $isImageNode, $isProblemInputNode, } from "../../nodes";
+import { $isFileNode, $isImageNode, $isVideoNode, $isProblemInputNode, } from "../../nodes";
 import { $isProblemSelectNode, } from "../../nodes/ProblemSelectNode";
 import { $isSheetInputNode } from "../../nodes/SheetInputNode";
 import { $isSheetSelectNode, } from "../../nodes/SheetSelectNode";
@@ -227,12 +227,23 @@ function getImageContextMenuOptions(node) {
         }),
     ];
 }
+function getVideoContextMenuOptions(node) {
+    return [
+        new ComponentPickerOption("블록 삭제", {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                node.remove();
+            },
+        }),
+    ];
+}
 function getColoredQuoteContextMenuOptions(editor, theme, node) {
     return [
         new ComponentPickerOption("회색", {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.marbleOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.marbleContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.marbleContainer};
       `,
             keywords: ["grey", "gray"],
             onSelect: () => {
@@ -243,8 +254,8 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
         }),
         new ComponentPickerOption("빨간색", {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.redOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.redContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.redContainer};
       `,
             keywords: ["red"],
             onSelect: () => {
@@ -255,8 +266,8 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
         }),
         new ComponentPickerOption("노란색", {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.yellowOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.yellowContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.yellowContainer};
       `,
             keywords: ["yellow"],
             onSelect: () => {
@@ -267,8 +278,8 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
         }),
         new ComponentPickerOption("파란색", {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.blueOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.blueContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.blueContainer};
       `,
             keywords: ["blue"],
             onSelect: () => {
@@ -279,8 +290,8 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
         }),
         new ComponentPickerOption("초록색", {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.greenOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.greenContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.greenContainer};
       `,
             keywords: ["green"],
             onSelect: () => {
@@ -316,7 +327,7 @@ function getUploadFileContextMenuOptions(editor, node) {
 export function useContextMenuOptions(props) {
     const { isSheetEnabled, isQuizEnabled, showFileUpload } = props;
     const theme = useTheme();
-    return (editor, node, setImageOpen, setFileOpen) => {
+    return (editor, node, setImageOpen, setVideoOpen, setFileOpen) => {
         if ($isProblemInputNode(node)) {
             return getProblemInputContextMenuOptions(node);
         }
@@ -335,6 +346,9 @@ export function useContextMenuOptions(props) {
         else if ($isImageNode(node)) {
             return getImageContextMenuOptions(node);
         }
+        else if ($isVideoNode(node)) {
+            return getVideoContextMenuOptions(node);
+        }
         else if (node instanceof ParagraphNode) {
             return getParagraphContextMenuOptions(editor, node);
         }
@@ -356,6 +370,7 @@ export function useContextMenuOptions(props) {
                     editor,
                     theme,
                     setImageOpen,
+                    setVideoOpen,
                     isSheetEnabled,
                     isQuizEnabled,
                     setFileOpen,

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.d.ts

@@ -34,6 +34,7 @@ export declare function getBaseOptions(props: {
     editor: LexicalEditor;
     theme: Theme;
     setImageOpen: (open: boolean) => void;
+    setVideoOpen: (open: boolean) => void;
     setFileOpen: (open: boolean) => void;
     isSheetEnabled: boolean;
     isQuizEnabled: boolean;

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

@@ -20,7 +20,7 @@ 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, 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, } from "../../../../icons";
 import { ZINDEX } from "../../../../utils/zIndex";
 import { css, useTheme } from "@emotion/react";
 import { INSERT_PROBLEM_INPUT_COMMAND } from "../ProblemInputPlugin";
@@ -31,6 +31,8 @@ import { INSERT_SHEET_INPUT_COMMAND } from "../SheetInputPlugin";
 import { INSERT_SELF_EVALUATION_COMMAND } from "../SelfEvaluationPlugin";
 import { InsertImageDialog } from "../../components/InsertImageDialog";
 import { INSERT_IMAGE_COMMAND } from "../ImagesPlugin";
+import { InsertVideoDialog } from "../../components/InsertVideoDialog";
+import { INSERT_VIDEO_COMMAND } from "../VideosPlugin";
 import { UploadFileDialog } from "../../components/UploadFileDialog";
 import { UPLOAD_FILE_COMMAND } from "../FilePlugin";
 // import useModal from "../../hooks/useModal";
@@ -128,11 +130,11 @@ function getSheetContextOptions(editor, theme) {
                 placeholder: "",
             }),
         }),
-        new ComponentDrawerOption("활동지 메뉴구분선", (_jsx("div", { css: css `
-            width: 100%;
-            height: 1px;
-            background: ${theme.color.background.neutralAltActive};
-            margin: 4px 0;
+        new ComponentDrawerOption("활동지 메뉴구분선", (_jsx("div", { css: css `
+            width: 100%;
+            height: 1px;
+            background: ${theme.color.background.neutralAltActive};
+            margin: 4px 0;
           ` }))),
     ];
 }
@@ -174,16 +176,16 @@ function getQuizContextOptions(editor, theme) {
                 });
             },
         }),
-        new ComponentDrawerOption("퀴즈 메뉴구분선", (_jsx("div", { css: css `
-            width: 100%;
-            height: 1px;
-            background: ${theme.color.background.neutralAltActive};
-            margin: 4px 0;
+        new ComponentDrawerOption("퀴즈 메뉴구분선", (_jsx("div", { css: css `
+            width: 100%;
+            height: 1px;
+            background: ${theme.color.background.neutralAltActive};
+            margin: 4px 0;
           ` }))),
     ];
 }
 export function getBaseOptions(props) {
-    const { editor, theme, setImageOpen, setFileOpen, isSheetEnabled, isQuizEnabled, showFileUpload, } = props;
+    const { editor, theme, setImageOpen, setVideoOpen, setFileOpen, isSheetEnabled, isQuizEnabled, showFileUpload, } = props;
     const baseOptions = [
         new ComponentPickerOption("본문", {
             icon: _jsx(TextIcon, {}),
@@ -266,6 +268,11 @@ export function getBaseOptions(props) {
             keywords: ["image", "photo", "picture", "file"],
             onSelect: () => setImageOpen(true),
         }),
+        new ComponentPickerOption("동영상", {
+            icon: _jsx(VideoLineIcon, {}),
+            keywords: ["video", "movie"],
+            onSelect: () => setVideoOpen(true),
+        }),
     ];
     // devMode, labMode 여부를 로컬스토리지에서 가져옵니다.
     const isDevMode = localStorage.getItem("devMode") === "true";
@@ -301,7 +308,8 @@ export function ComponentPickerMenuPlugin(props) {
     const [editor] = useLexicalComposerContext();
     const theme = useTheme();
     const [queryString, setQueryString] = useState(null);
-    const [open, setOpen] = useState(false);
+    const [imageOpen, setImageOpen] = useState(false);
+    const [videoOpen, setVideoOpen] = useState(false);
     const [fileOpen, setFileOpen] = useState(false);
     const checkForTriggerMatch = useBasicTypeaheadTriggerMatch("/", {
         minLength: 0,
@@ -310,7 +318,8 @@ export function ComponentPickerMenuPlugin(props) {
         const baseOptions = getBaseOptions({
             editor,
             theme,
-            setImageOpen: setOpen,
+            setImageOpen,
+            setVideoOpen,
             isSheetEnabled,
             isQuizEnabled,
             setFileOpen,
@@ -327,7 +336,7 @@ export function ComponentPickerMenuPlugin(props) {
                     option.keywords.some((keyword) => regex.test(keyword)))),
         ];
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [editor, queryString, setOpen]);
+    }, [editor, queryString, setImageOpen]);
     const onSelectOption = useCallback((selectedOption, nodeToRemove, closeMenu, matchingString) => {
         if (selectedOption instanceof ComponentDrawerOption) {
             return;
@@ -338,12 +347,14 @@ export function ComponentPickerMenuPlugin(props) {
             closeMenu();
         });
     }, [editor]);
-    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { title: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30", open: open, onChange: (props) => {
+    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { title: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30", open: imageOpen, onChange: (props) => {
                     editor.dispatchCommand(INSERT_IMAGE_COMMAND, props);
-                }, onClose: () => setOpen(false), shouldReset: true }), _jsx(UploadFileDialog, { open: fileOpen, onClose: () => setFileOpen(false), onChange: (props) => {
+                }, onClose: () => setImageOpen(false), shouldReset: true }), _jsx(InsertVideoDialog, { title: "\uB3D9\uC601\uC0C1 \uC0BD\uC785\uD558\uAE30", open: videoOpen, onChange: (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: setQueryString, 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 })] }));