@team-monolith/cds 1.92.0 → 1.93.0

package/dist/components/Tag.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export type TagColor = "default" | "red" | "teal" | "orange" | "blue" | "green" | "yellow" | "black";
+export type TagColor = "default" | "red" | "teal" | "orange" | "blue" | "green" | "yellow" | "black" | "ai";
 export interface TagProps {
     className?: string;
     component?: React.ElementType;

package/dist/components/Tag.js

@@ -63,6 +63,10 @@ const COLOR_TO_STYLE = (theme, color) => ({
       background: ${theme.color.container.obsidianContainer};
       color: ${theme.color.container.obsidianOnContainer};
     `,
+    ai: css `
+      background: linear-gradient(94deg, #5898ff 5.24%, #c673e4 96.99%);
+      color: ${theme.color.container.obsidianOnContainer};
+    `,
 })[color];
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=42-869&t=HZXCHP0r0tbvMA6v-0)

package/dist/patterns/LexicalEditor/Plugins.js

@@ -35,6 +35,7 @@ import { SheetInputPlugin } from "./plugins/SheetInputPlugin";
 import { SelfEvaluationPlugin } from "./plugins/SelfEvaluationPlugin";
 import { FilePlugin } from "./plugins/FilePlugin";
 import { DragDropPastePlugin } from "./plugins/DragDropPastePlugin";
+import { ParagraphPlaceholderPlugin } from "./plugins/ParagraphPlaceholderPlugin";
 export function Plugins(props) {
     const { className, contentEditableClassName, onChange, isSheetEnabled, isQuizEnabled, showFileUpload, } = props;
     const isEditable = useLexicalEditable();
@@ -49,7 +50,7 @@ export function Plugins(props) {
                     onChange === null || onChange === void 0 ? void 0 : onChange(editorState.toJSON());
                 }, 
                 // ignore 하지 않으면 Form에서 수정하지 않았는데 Dirty로 처리됨.
-                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(MarkdownShortcutPlugin, { transformers: CUSTOM_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(ClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(FilePlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {}), _jsx(SelfEvaluationPlugin, {})] }));
+                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(MarkdownShortcutPlugin, { transformers: CUSTOM_TRANSFORMERS }), _jsx(HistoryPlugin, {}), _jsx(ParagraphPlaceholderPlugin, { placeholder: "\uBA85\uB839\uC5B4 \uC0AC\uC6A9 \uC2DC\uC5D0\uB294 '/'\uB97C \uB204\uB974\uC138\uC694. \uBE14\uB85D\uC5D0 \uB9C8\uC6B0\uC2A4\uB97C \uC62C\uB824 \uB098\uD0C0\uB098\uB294 '+'\uB97C \uD074\uB9AD\uD558\uBA74 \uC544\uB798\uC5D0 \uBE14\uB85D\uC744 \uCD94\uAC00\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." })] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(ClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(FilePlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {}), _jsx(SelfEvaluationPlugin, {})] }));
 }
 const ScrollArea = styled.div `
   min-height: 150px;

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

@@ -0,0 +1,6 @@
+type ParagraphPlaceholderPluginProps = {
+    placeholder: string;
+    hideOnEmptyEditor?: boolean;
+};
+export declare const ParagraphPlaceholderPlugin: ({ placeholder, }: ParagraphPlaceholderPluginProps) => null;
+export {};

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

@@ -0,0 +1,53 @@
+import { useEffect, useMemo, useRef } from "react";
+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;
+  }
+`;
+export const ParagraphPlaceholderPlugin = ({ placeholder, }) => {
+    const [editor] = useLexicalComposerContext();
+    const paragraphRef = useRef(null);
+    const theme = useTheme();
+    const placeholderClassName = useMemo(() => getPlaceholderClassName(theme), [theme]);
+    useEffect(() => {
+        const removeUpdateListener = editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                // 기존에 있던 placeholder를 제거합니다.
+                if (paragraphRef.current) {
+                    paragraphRef.current.removeAttribute("data-placeholder");
+                    paragraphRef.current.classList.remove(placeholderClassName);
+                    paragraphRef.current = null;
+                }
+                const selection = $getSelection();
+                // selection이 없거나, collapsed 상태(anchor와 focus가 같은 경우)가 아니면
+                // placeholder를 추가하지 않습니다.
+                if (!selection ||
+                    !$isRangeSelection(selection) ||
+                    !selection.isCollapsed()) {
+                    return false;
+                }
+                const focusedNode = selection.focus.getNode();
+                if (!$isParagraphNode(focusedNode) || !focusedNode.isEmpty())
+                    return false;
+                const el = editor.getElementByKey(focusedNode.getKey());
+                if (el instanceof HTMLParagraphElement) {
+                    paragraphRef.current = el;
+                    paragraphRef.current.setAttribute("data-placeholder", placeholder);
+                    paragraphRef.current.classList.add(placeholderClassName);
+                }
+                return false;
+            });
+        });
+        return () => {
+            removeUpdateListener();
+        };
+    }, [editor, placeholder, placeholderClassName]);
+    return null;
+};

package/package.json

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