@team-monolith/cds 1.3.3 → 1.4.0

package/README.md

@@ -32,10 +32,10 @@
 
 코들 스튜디오 시스템에서의 JL4 과업이 완료되지 않아, 두가지 버전을 동시에 관리해야합니다. 브랜치 이름은 다음과 같습니다.
 
+- **1.0** : React 18 (최신 브랜치)
 - **main** : React 17
-- **1.0** : React 18
 
-main 브랜치(`v0.x`)는 [jce-codle-jlext](https://github.com/team-monolith-product/jce-codle-jlext)의 JL3에서 사용중이고, 1.0 브랜치(`v1.x`)는 JL4와 [jce-codle-react](https://github.com/team-monolith-product/jce-codle-react)에서 사용중입니다.
+1.0 브랜치(`v1.x`) 는 [jce-codle-react](https://github.com/team-monolith-product/jce-codle-react)에서 사용 중이며, main 브랜치(`v0.x`)는 [jce-codle-jlext](https://github.com/team-monolith-product/jce-codle-jlext)에서 사용중입니다.
 
 ## 개발 및 배포 절차
 

package/dist/CodleDesignSystemProvider.d.ts

@@ -83,6 +83,9 @@ interface CodleDesignSystemContext {
             };
         };
     };
+    lexical?: {
+        uploadByFile: (file: File) => Promise<string>;
+    };
 }
 export declare const CodleDesignSystemContext: import("react").Context<CodleDesignSystemContext>;
 export default function (props: {

package/dist/index.d.ts

@@ -34,3 +34,4 @@ export * from "./utils/reset";
 export * from "./utils/zIndex";
 export * from "./patterns/SegmentedControl";
 export * from "./patterns/ReactEditorJS";
+export * from "./patterns/LexicalEditor";

package/dist/index.js

@@ -34,3 +34,4 @@ export * from "./utils/reset";
 export * from "./utils/zIndex";
 export * from "./patterns/SegmentedControl";
 export * from "./patterns/ReactEditorJS";
+export * from "./patterns/LexicalEditor";

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

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

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { LexicalComposer, } from "@lexical/react/LexicalComposer";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { ImageNode } from "./nodes/ImageNode";
+import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+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 theme = useTheme();
+    const initialConfig = {
+        namespace: "CodleLexicalEditor",
+        onError: (error) => console.error(error),
+        nodes: [
+            HeadingNode,
+            ListNode,
+            ListItemNode,
+            QuoteNode,
+            CodeNode,
+            CodeHighlightNode,
+            TableNode,
+            TableCellNode,
+            TableRowNode,
+            AutoLinkNode,
+            LinkNode,
+            ImageNode,
+            HorizontalRuleNode,
+        ],
+        theme: getTheme(theme),
+        editorState: JSON.stringify(value),
+        editable: editable,
+    };
+    return (_jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { onChange: onChange }), _jsx(_Fragment, { children: children })] })));
+}

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

@@ -0,0 +1,10 @@
+/** @jsxImportSource @emotion/react */
+/**
+ * isEditable 등으로 인해 ComposerContext 내부에서 플러그인을 따로 정의할 컴포넌트가 필요하여 작성함.
+ */
+import { ReactElement } from "react";
+import { SerializedEditorState, SerializedLexicalNode } from "lexical";
+export interface PluginsProps {
+    onChange: (blocks: SerializedEditorState<SerializedLexicalNode>) => void;
+}
+export default function Plugins(props: PluginsProps): ReactElement;

package/dist/patterns/LexicalEditor/Plugins.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+/**
+ * isEditable 등으로 인해 ComposerContext 내부에서 플러그인을 따로 정의할 컴포넌트가 필요하여 작성함.
+ */
+import { useState } from "react";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { CODLE_TRANSFORMERS } from "./plugins/MarkdownTransformers";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
+import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin";
+import { ComponentAdderPlugin } from "./plugins/ComponentAdderPlugin/ComponentAdderPlugin";
+import { ComponentPickerMenuPlugin } from "./plugins/ComponentPickerMenuPlugin";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import FloatingTextFormatToolbarPlugin from "./plugins/FloatingTextFormatToolbarPlugin";
+import ImagesPlugin from "./plugins/ImagesPlugin";
+import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
+import hr from "./hr.svg";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import LexicalClickableLinkPlugin from "@lexical/react/LexicalClickableLinkPlugin";
+import FloatingLinkEditorPlugin from "./plugins/FloatingLinkEditorPlugin";
+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 isEditable = useLexicalEditable();
+    const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+    const [isLinkEditMode, setIsLinkEditMode] = useState(false);
+    const onRef = (_floatingAnchorElem) => {
+        if (_floatingAnchorElem !== null) {
+            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) => {
+                    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 })] }));
+}
+const ScrollArea = styled.div `
+  min-height: 150px;
+  border: 0;
+  display: flex;
+  position: relative;
+  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) `
+  border: 0;
+  font-size: 15px;
+  display: block;
+  position: relative;
+  outline: 0;
+  padding: 8px 28px 40px 64px;
+  min-height: 150px;
+
+  hr {
+    // HorizontalRuleNode는 Lexical theme에 등록되어 있지 않습니다.
+    // 따라서 hr 태그를 직접 조작합니다.
+
+    // FloatingMenu가 올바른 위치에 붙으려면 충분한 높이를 가져야합니다.
+    // HR 태그에서 border를 이용해서 중심에 선을 그리기 어렵습니다.
+    // hr svg는 1px 높이의 svg입니다.
+    // center 및 repeat-x를 지정하여 좌우로 긴 선을 그립니다.
+    height: 26px;
+    border: 0;
+    background: url(${hr}) center repeat-x;
+  }
+`;

package/dist/patterns/LexicalEditor/hr.svg

@@ -0,0 +1,3 @@
+<svg width="521" height="1" viewBox="0 0 521 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="0.5" x2="521" y2="0.5" stroke="#9C9C9C"/>
+</svg>

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

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

package/dist/patterns/LexicalEditor/index.js

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

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

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+import type { LexicalCommand, NodeKey } from "lexical";
+export declare const RIGHT_CLICK_IMAGE_COMMAND: LexicalCommand<MouseEvent>;
+export default function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, }: {
+    altText: string;
+    height: "inherit" | number;
+    maxWidth: number;
+    nodeKey: NodeKey;
+    src: string;
+    width: "inherit" | number;
+}): JSX.Element;

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

@@ -0,0 +1,143 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
+import { mergeRegister } from "@lexical/utils";
+import { $getNodeByKey, $getSelection, $isNodeSelection, $isRangeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, createCommand, DRAGSTART_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from "lexical";
+import { Suspense, useCallback, useEffect, useRef, useState } from "react";
+import { $isImageNode } from "./ImageNode";
+const imageCache = new Set();
+export const RIGHT_CLICK_IMAGE_COMMAND = createCommand("RIGHT_CLICK_IMAGE_COMMAND");
+function useSuspenseImage(src) {
+    if (!imageCache.has(src)) {
+        throw new Promise((resolve) => {
+            const img = new Image();
+            img.src = src;
+            img.onload = () => {
+                imageCache.add(src);
+                resolve(null);
+            };
+        });
+    }
+}
+function LazyImage({ altText, className, imageRef, src, width, height, maxWidth, }) {
+    useSuspenseImage(src);
+    return (_jsx("img", { className: className || undefined, src: src, alt: altText, ref: imageRef, style: {
+            height,
+            maxWidth,
+            width,
+        }, draggable: "false" }));
+}
+export default function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, }) {
+    const imageRef = useRef(null);
+    const buttonRef = useRef(null);
+    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+    const [editor] = useLexicalComposerContext();
+    const [selection, setSelection] = useState(null);
+    const activeEditorRef = useRef(null);
+    const onDelete = useCallback((payload) => {
+        if (isSelected && $isNodeSelection($getSelection())) {
+            const event = payload;
+            event.preventDefault();
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node)) {
+                node.remove();
+            }
+        }
+        return false;
+    }, [isSelected, nodeKey]);
+    const onEnter = useCallback((event) => {
+        const latestSelection = $getSelection();
+        const buttonElem = buttonRef.current;
+        if (isSelected &&
+            $isNodeSelection(latestSelection) &&
+            latestSelection.getNodes().length === 1) {
+            if (buttonElem !== null && buttonElem !== document.activeElement) {
+                event.preventDefault();
+                buttonElem.focus();
+                return true;
+            }
+        }
+        return false;
+    }, [isSelected]);
+    const onEscape = useCallback((event) => {
+        if (buttonRef.current === event.target) {
+            $setSelection(null);
+            editor.update(() => {
+                setSelected(true);
+                const parentRootElement = editor.getRootElement();
+                if (parentRootElement !== null) {
+                    parentRootElement.focus();
+                }
+            });
+            return true;
+        }
+        return false;
+    }, [editor, setSelected]);
+    const onClick = useCallback((payload) => {
+        const event = payload;
+        if (event.target === imageRef.current) {
+            if (event.shiftKey) {
+                setSelected(!isSelected);
+            }
+            else {
+                clearSelection();
+                setSelected(true);
+            }
+            return true;
+        }
+        return false;
+    }, [isSelected, setSelected, clearSelection]);
+    const onRightClick = useCallback((event) => {
+        editor.getEditorState().read(() => {
+            const latestSelection = $getSelection();
+            const domElement = event.target;
+            if (domElement.tagName === "IMG" &&
+                $isRangeSelection(latestSelection) &&
+                latestSelection.getNodes().length === 1) {
+                editor.dispatchCommand(RIGHT_CLICK_IMAGE_COMMAND, event);
+            }
+        });
+    }, [editor]);
+    useEffect(() => {
+        let isMounted = true;
+        const rootElement = editor.getRootElement();
+        const unregister = mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+            if (isMounted) {
+                setSelection(editorState.read(() => $getSelection()));
+            }
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, (_, activeEditor) => {
+            activeEditorRef.current = activeEditor;
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW), editor.registerCommand(RIGHT_CLICK_IMAGE_COMMAND, onClick, COMMAND_PRIORITY_LOW), editor.registerCommand(DRAGSTART_COMMAND, (event) => {
+            if (event.target === imageRef.current) {
+                // TODO This is just a temporary workaround for FF to behave like other browsers.
+                // Ideally, this handles drag & drop too (and all browsers).
+                event.preventDefault();
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW));
+        rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener("contextmenu", onRightClick);
+        return () => {
+            isMounted = false;
+            unregister();
+            rootElement === null || rootElement === void 0 ? void 0 : rootElement.removeEventListener("contextmenu", onRightClick);
+        };
+    }, [
+        clearSelection,
+        editor,
+        isSelected,
+        nodeKey,
+        onDelete,
+        onEnter,
+        onEscape,
+        onClick,
+        onRightClick,
+        setSelected,
+    ]);
+    const draggable = isSelected && $isNodeSelection(selection);
+    const isFocused = isSelected;
+    return (_jsx(Suspense, Object.assign({ fallback: null }, { children: _jsx("div", Object.assign({ draggable: draggable }, { children: _jsx(LazyImage, { className: isFocused
+                    ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}`
+                    : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth }) })) })));
+}

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

@@ -0,0 +1,56 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedEditor, SerializedLexicalNode, Spread } from "lexical";
+import { DecoratorNode } from "lexical";
+export interface ImagePayload {
+    altText: string;
+    caption?: LexicalEditor;
+    height?: number;
+    key?: NodeKey;
+    maxWidth?: number;
+    showCaption?: boolean;
+    src: string;
+    width?: number;
+    captionsEnabled?: boolean;
+}
+export type SerializedImageNode = Spread<{
+    altText: string;
+    caption: SerializedEditor;
+    height?: number;
+    maxWidth: number;
+    showCaption: boolean;
+    src: string;
+    width?: number;
+}, SerializedLexicalNode>;
+export declare class ImageNode extends DecoratorNode<JSX.Element> {
+    __src: string;
+    __altText: string;
+    __width: "inherit" | number;
+    __height: "inherit" | number;
+    __maxWidth: number;
+    __showCaption: boolean;
+    __caption: LexicalEditor;
+    __captionsEnabled: boolean;
+    static getType(): string;
+    static clone(node: ImageNode): ImageNode;
+    static importJSON(serializedNode: SerializedImageNode): ImageNode;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    constructor(src: string, altText: string, maxWidth: number, width?: "inherit" | number, height?: "inherit" | number, showCaption?: boolean, caption?: LexicalEditor, captionsEnabled?: boolean, key?: NodeKey);
+    exportJSON(): SerializedImageNode;
+    setWidthAndHeight(width: "inherit" | number, height: "inherit" | number): void;
+    setShowCaption(showCaption: boolean): void;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    getSrc(): string;
+    getAltText(): string;
+    decorate(): JSX.Element;
+}
+export declare function $createImageNode({ altText, height, maxWidth, captionsEnabled, src, width, showCaption, caption, key, }: ImagePayload): ImageNode;
+export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;

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

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { $applyNodeReplacement, createEditor, DecoratorNode } from "lexical";
+import * as React from "react";
+import { Suspense } from "react";
+const ImageComponent = React.lazy(
+// @ts-ignore
+() => import("./ImageComponent"));
+function convertImageElement(domNode) {
+    if (domNode instanceof HTMLImageElement) {
+        const { alt: altText, src, width, height } = domNode;
+        const node = $createImageNode({ altText, height, src, width });
+        return { node };
+    }
+    return null;
+}
+export class ImageNode extends DecoratorNode {
+    static getType() {
+        return "image";
+    }
+    static clone(node) {
+        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__showCaption, node.__caption, node.__captionsEnabled, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const { altText, height, width, maxWidth, caption, src, showCaption } = serializedNode;
+        const node = $createImageNode({
+            altText,
+            height,
+            maxWidth,
+            showCaption,
+            src,
+            width,
+        });
+        const nestedEditor = node.__caption;
+        const editorState = nestedEditor.parseEditorState(caption.editorState);
+        if (!editorState.isEmpty()) {
+            nestedEditor.setEditorState(editorState);
+        }
+        return node;
+    }
+    exportDOM() {
+        const element = document.createElement("img");
+        element.setAttribute("src", this.__src);
+        element.setAttribute("alt", this.__altText);
+        element.setAttribute("width", this.__width.toString());
+        element.setAttribute("height", this.__height.toString());
+        return { element };
+    }
+    static importDOM() {
+        return {
+            img: (node) => ({
+                conversion: convertImageElement,
+                priority: 0,
+            }),
+        };
+    }
+    constructor(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key) {
+        super(key);
+        this.__src = src;
+        this.__altText = altText;
+        this.__maxWidth = maxWidth;
+        this.__width = width || "inherit";
+        this.__height = height || "inherit";
+        this.__showCaption = showCaption || false;
+        this.__caption = caption || createEditor();
+        this.__captionsEnabled = captionsEnabled || captionsEnabled === undefined;
+    }
+    exportJSON() {
+        return {
+            altText: this.getAltText(),
+            caption: this.__caption.toJSON(),
+            height: this.__height === "inherit" ? 0 : this.__height,
+            maxWidth: this.__maxWidth,
+            showCaption: this.__showCaption,
+            src: this.getSrc(),
+            type: "image",
+            version: 1,
+            width: this.__width === "inherit" ? 0 : this.__width,
+        };
+    }
+    setWidthAndHeight(width, height) {
+        const writable = this.getWritable();
+        writable.__width = width;
+        writable.__height = height;
+    }
+    setShowCaption(showCaption) {
+        const writable = this.getWritable();
+        writable.__showCaption = showCaption;
+    }
+    // View
+    createDOM(config) {
+        const span = document.createElement("span");
+        const theme = config.theme;
+        const className = theme.image;
+        if (className !== undefined) {
+            span.className = className;
+        }
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    getSrc() {
+        return this.__src;
+    }
+    getAltText() {
+        return this.__altText;
+    }
+    decorate() {
+        return (_jsx(Suspense, Object.assign({ fallback: null }, { children: _jsx(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey() }) })));
+    }
+}
+export function $createImageNode({ altText, height, maxWidth = 500, captionsEnabled, src, width, showCaption, caption, key, }) {
+    return $applyNodeReplacement(new ImageNode(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key));
+}
+export function $isImageNode(node) {
+    return node instanceof ImageNode;
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface ComponentAdderProps {
+    className?: string;
+    onPlusClick?: () => void;
+    onMenuClick?: () => void;
+    onMenuDragStart?: (event: React.DragEvent<HTMLDivElement>) => void;
+    onMenuDragEnd?: (event: React.DragEvent<HTMLDivElement>) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<ComponentAdderProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { forwardRef } from "react";
+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 [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, {}) }))] })));
+}
+export default forwardRef(ComponentAdder);
+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 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 MenuIcon = styled.div `
+  width: 24px;
+  height: 24px;
+  background-image: url(${menu});
+`;

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

@@ -0,0 +1,11 @@
+/**
+ * + 버튼을 눌러 컴포넌트를 추가하는 플러그인
+ * ComponentPickerPlugin과 동일한 메뉴가 노출됩니다.
+ */
+/** @jsxImportSource @emotion/react */
+/// <reference types="react" />
+export interface ComponentAdderPluginProps {
+    anchorElem: HTMLElement;
+}
+export declare const COMPONENT_ADDER_MENU_CLASSNAME = "component-adder-menu";
+export declare function ComponentAdderPlugin(props: ComponentAdderPluginProps): JSX.Element | null;