@team-monolith/cds 1.117.21 → 1.119.0

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

@@ -0,0 +1,146 @@
+/**
+ * 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.
+ *
+ */
+// https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/CollapsiblePlugin/index.ts
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $setBlocksType } from "@lexical/selection";
+import { $findMatchingParent, $insertNodeToNearestRoot, mergeRegister, } from "@lexical/utils";
+import { $createParagraphNode, $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, createCommand, INSERT_PARAGRAPH_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, } from "lexical";
+import { useEffect } from "react";
+import { $createToggleContainerNode, $createToggleTitleNode, $createToggleContentNode, $isToggleContainerNode, $isToggleTitleNode, $isToggleContentNode, ToggleContainerNode, ToggleTitleNode, ToggleContentNode, } from "../../nodes";
+export const INSERT_TOGGLE_COMMAND = createCommand("INSERT_TOGGLE_COMMAND");
+export function TogglePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([
+            ToggleContainerNode,
+            ToggleTitleNode,
+            ToggleContentNode,
+        ])) {
+            throw new Error("TogglePlugin: ToggleContainerNode, ToggleTitleNode, or ToggleContentNode not registered on editor");
+        }
+        const $onEscapeUp = () => {
+            var _a;
+            const selection = $getSelection();
+            if ($isRangeSelection(selection) &&
+                selection.isCollapsed() &&
+                selection.anchor.offset === 0) {
+                const container = $findMatchingParent(selection.anchor.getNode(), $isToggleContainerNode);
+                if ($isToggleContainerNode(container)) {
+                    const parent = container.getParent();
+                    if (parent !== null &&
+                        parent.getFirstChild() === container &&
+                        selection.anchor.key === ((_a = container.getFirstDescendant()) === null || _a === void 0 ? void 0 : _a.getKey())) {
+                        container.insertBefore($createParagraphNode());
+                    }
+                }
+            }
+            return false;
+        };
+        const $onEscapeDown = () => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection) && selection.isCollapsed()) {
+                const container = $findMatchingParent(selection.anchor.getNode(), $isToggleContainerNode);
+                if ($isToggleContainerNode(container)) {
+                    const parent = container.getParent();
+                    if (parent !== null && parent.getLastChild() === container) {
+                        const titleParagraph = container.getFirstDescendant();
+                        const contentParagraph = container.getLastDescendant();
+                        if ((contentParagraph !== null &&
+                            selection.anchor.key === contentParagraph.getKey() &&
+                            selection.anchor.offset ===
+                                contentParagraph.getTextContentSize()) ||
+                            (titleParagraph !== null &&
+                                selection.anchor.key === titleParagraph.getKey() &&
+                                selection.anchor.offset === titleParagraph.getTextContentSize())) {
+                            container.insertAfter($createParagraphNode());
+                        }
+                    }
+                }
+            }
+            return false;
+        };
+        return mergeRegister(
+        // Structure enforcing transformers for each node type. In case nesting structure is not
+        // "Container > Title + Content" it'll unwrap nodes and convert it back
+        // to regular content.
+        editor.registerNodeTransform(ToggleContentNode, (node) => {
+            const parent = node.getParent();
+            if (!$isToggleContainerNode(parent)) {
+                const children = node.getChildren();
+                for (const child of children) {
+                    node.insertBefore(child);
+                }
+                node.remove();
+            }
+        }), editor.registerNodeTransform(ToggleTitleNode, (node) => {
+            const parent = node.getParent();
+            if (!$isToggleContainerNode(parent)) {
+                node.replace($createParagraphNode().append(...node.getChildren()));
+                return;
+            }
+        }), editor.registerNodeTransform(ToggleContainerNode, (node) => {
+            const children = node.getChildren();
+            if (children.length !== 2 ||
+                !$isToggleTitleNode(children[0]) ||
+                !$isToggleContentNode(children[1])) {
+                for (const child of children) {
+                    node.insertBefore(child);
+                }
+                node.remove();
+            }
+        }), 
+        // When toggle is the last child pressing down/right arrow will insert paragraph
+        // below it to allow adding more content. It's similar what $insertBlockNode
+        // (mainly for decorators), except it'll always be possible to continue adding
+        // new content even if trailing paragraph is accidentally deleted
+        editor.registerCommand(KEY_ARROW_DOWN_COMMAND, $onEscapeDown, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, $onEscapeDown, COMMAND_PRIORITY_LOW), 
+        // When toggle is the first child pressing up/left arrow will insert paragraph
+        // above it to allow adding more content. It's similar what $insertBlockNode
+        // (mainly for decorators), except it'll always be possible to continue adding
+        // new content even if leading paragraph is accidentally deleted
+        editor.registerCommand(KEY_ARROW_UP_COMMAND, $onEscapeUp, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_LEFT_COMMAND, $onEscapeUp, COMMAND_PRIORITY_LOW), 
+        // Enter goes from Title to Content rather than a new line inside Title
+        editor.registerCommand(INSERT_PARAGRAPH_COMMAND, () => {
+            var _a;
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const titleNode = $findMatchingParent(selection.anchor.getNode(), (node) => $isToggleTitleNode(node));
+                if ($isToggleTitleNode(titleNode)) {
+                    const container = titleNode.getParent();
+                    if (container && $isToggleContainerNode(container)) {
+                        if (!container.getOpen()) {
+                            container.toggleOpen();
+                        }
+                        (_a = titleNode.getNextSibling()) === null || _a === void 0 ? void 0 : _a.selectEnd();
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(INSERT_TOGGLE_COMMAND, () => {
+            editor.update(() => {
+                const title = $createToggleTitleNode();
+                const paragraph = $createParagraphNode();
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    // 선택된 블록이 있는 경우 기존 블록을 토글 블록으로 변환하여 불필요한 줄바꿈 생성 방지
+                    $setBlocksType(selection, () => 
+                    // 생성된 토글 블록의 open 속성은 기본값 false (노션 동작을 따름)
+                    $createToggleContainerNode(false).append(title.append(paragraph), $createToggleContentNode().append($createParagraphNode())));
+                }
+                else {
+                    // 선택된 블록이 없는 경우 레퍼런스 코드의 동작을 따름
+                    $insertNodeToNearestRoot($createToggleContainerNode(false).append(title.append(paragraph), $createToggleContentNode().append($createParagraphNode())));
+                }
+                paragraph.select();
+            });
+            return true;
+        }, COMMAND_PRIORITY_LOW));
+    }, [editor]);
+    return null;
+}

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

@@ -36,4 +36,10 @@ export declare function getTheme(theme: Theme, editable: boolean): {
     layoutContainer: string;
     layoutItem: string | false;
     selfEvaluation: string;
+    toggle: {
+        container: string;
+        title: string;
+        iconBtn: string;
+        content: string;
+    };
 };