@team-monolith/cds 1.44.2 → 1.46.0

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

@@ -12,6 +12,8 @@ export interface LexicalEditorProps {
     /** freeze. 문제 블록을 수정하지 못하도록 함
      */
     freezeProblemNode?: boolean;
+    /** 퀴즈 노드가 허용되는지 여부. false가 디폴트이고, 전달하지 않아도 로컬스토리지 devMode로도 노출시킬 수 있습니다. */
+    isQuizEnabled?: boolean;
     /** 외부에서 플러그인을 주입하는 경우 활용함 */
     children?: JSX.Element | string | (JSX.Element | string)[];
 }

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -30,7 +30,7 @@ function validateValue(value) {
     return true;
 }
 export function LexicalEditor(props) {
-    const { className, contentEditableClassName, value, onChange, editable = true, freezeProblemNode, children, } = props;
+    const { className, contentEditableClassName, value, onChange, editable = true, freezeProblemNode, isQuizEnabled = false, children, } = props;
     const theme = useTheme();
     const initialConfig = {
         namespace: "CodleLexicalEditor",
@@ -63,5 +63,5 @@ export function LexicalEditor(props) {
         editorState: validateValue(value) ? JSON.stringify(value) : undefined,
         editable: editable,
     };
-    return (_jsx(LexicalCustomConfigContext.Provider, Object.assign({ value: { freezeProblemNode: freezeProblemNode !== null && freezeProblemNode !== void 0 ? freezeProblemNode : false } }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, contentEditableClassName: contentEditableClassName, onChange: onChange }), _jsx(_Fragment, { children: children })] })) })));
+    return (_jsx(LexicalCustomConfigContext.Provider, Object.assign({ value: { freezeProblemNode: freezeProblemNode !== null && freezeProblemNode !== void 0 ? freezeProblemNode : false } }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, contentEditableClassName: contentEditableClassName, onChange: onChange, isQuizEnabled: isQuizEnabled }), _jsx(_Fragment, { children: children })] })) })));
 }

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

@@ -8,5 +8,6 @@ export interface PluginsProps {
     className?: string;
     contentEditableClassName?: string;
     onChange?: (blocks: SerializedEditorState<SerializedLexicalNode>) => void;
+    isQuizEnabled: boolean;
 }
 export default function Plugins(props: PluginsProps): ReactElement;

package/dist/patterns/LexicalEditor/Plugins.js

@@ -30,7 +30,7 @@ import styled from "@emotion/styled";
 import ProblemInputPlugin from "./plugins/ProblemInputPlugin";
 import ProblemSelectPlugin from "./plugins/ProblemSelectPlugin";
 export default function Plugins(props) {
-    const { className, contentEditableClassName, onChange } = props;
+    const { className, contentEditableClassName, onChange, isQuizEnabled } = props;
     const isEditable = useLexicalEditable();
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [isLinkEditMode, setIsLinkEditMode] = useState(false);
@@ -43,7 +43,7 @@ export default 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, {}), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {})] }));
+                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isQuizEnabled: isQuizEnabled }), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isQuizEnabled: isQuizEnabled }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {})] }));
 }
 const ScrollArea = styled.div `
   min-height: 150px;

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

@@ -6,6 +6,7 @@
 /// <reference types="react" />
 export interface ComponentAdderPluginProps {
     anchorElem: HTMLElement;
+    isQuizEnabled: boolean;
 }
 export declare const COMPONENT_ADDER_MENU_CLASSNAME = "component-adder-menu";
 export declare function ComponentAdderPlugin(props: ComponentAdderPluginProps): JSX.Element | null;

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

@@ -54,7 +54,7 @@ function getTextUpToAnchor(selection) {
     return anchorNode.getTextContent().slice(0, anchorOffset);
 }
 export function ComponentAdderPlugin(props) {
-    const { anchorElem } = props;
+    const { anchorElem, isQuizEnabled } = props;
     const theme = useTheme();
     const [editor] = useLexicalComposerContext();
     const [nodeKey, setNodeKey] = useState(null);
@@ -137,7 +137,7 @@ export function ComponentAdderPlugin(props) {
             return newResolves.filter((newResolve) => resolves.indexOf(newResolve) === -1);
         });
     });
-    const getContextMenuOptions = useContextMenuOptions();
+    const getContextMenuOptions = useContextMenuOptions({ isQuizEnabled });
     const filteredOptions = options.filter((option) => {
         if (!query) {
             return true;
@@ -193,7 +193,12 @@ export function ComponentAdderPlugin(props) {
                                 yield promise;
                                 setNodeKey(newNodeKey);
                             }
-                            const baseOptions = getBaseOptions(editor, theme, setImageOpen);
+                            const baseOptions = getBaseOptions({
+                                editor,
+                                theme,
+                                setImageOpen,
+                                isQuizEnabled,
+                            });
                             setOptions(baseOptions);
                             setPlusOrMenu("plus");
                         }), onMenuClick: () => __awaiter(this, void 0, void 0, function* () {

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

@@ -3,4 +3,6 @@
  */
 import { LexicalEditor, LexicalNode } from "lexical";
 import { ComponentDrawerOption, ComponentPickerOption } from "../ComponentPickerMenuPlugin";
-export declare function useContextMenuOptions(): (editor: LexicalEditor, node: LexicalNode, setImageOpen: (open: boolean) => void) => (ComponentPickerOption | ComponentDrawerOption)[];
+export declare function useContextMenuOptions(props: {
+    isQuizEnabled: boolean;
+}): (editor: LexicalEditor, node: LexicalNode, setImageOpen: (open: boolean) => void) => (ComponentPickerOption | ComponentDrawerOption)[];

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

@@ -270,7 +270,8 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
         }),
     ];
 }
-export function useContextMenuOptions() {
+export function useContextMenuOptions(props) {
+    const { isQuizEnabled } = props;
     const theme = useTheme();
     return (editor, node, setImageOpen) => {
         if ($isProblemInputNode(node)) {
@@ -293,7 +294,7 @@ export function useContextMenuOptions() {
         }
         else {
             return [
-                ...getBaseOptions(editor, theme, setImageOpen),
+                ...getBaseOptions({ editor, theme, setImageOpen, isQuizEnabled }),
                 new ComponentPickerOption("블록 삭제", {
                     icon: _jsx(CloseFillIcon, {}),
                     keywords: [],

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

@@ -30,5 +30,12 @@ export declare class ComponentPickerOption extends MenuOption {
         onSelect: (queryString: string) => void;
     });
 }
-export declare function getBaseOptions(editor: LexicalEditor, theme: Theme, setImageOpen: (open: boolean) => void): (ComponentPickerOption | ComponentDrawerOption)[];
-export declare function ComponentPickerMenuPlugin(): JSX.Element;
+export declare function getBaseOptions(props: {
+    editor: LexicalEditor;
+    theme: Theme;
+    setImageOpen: (open: boolean) => void;
+    isQuizEnabled: boolean;
+}): (ComponentPickerOption | ComponentDrawerOption)[];
+export declare function ComponentPickerMenuPlugin(props: {
+    isQuizEnabled: boolean;
+}): JSX.Element;

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

@@ -111,7 +111,8 @@ function getQuizContextOptions(editor, theme) {
           ` }))),
     ];
 }
-export function getBaseOptions(editor, theme, setImageOpen) {
+export function getBaseOptions(props) {
+    const { editor, theme, setImageOpen, isQuizEnabled } = props;
     const baseOptions = [
         new ComponentPickerOption("본문", {
             icon: _jsx(TextIcon, {}),
@@ -195,14 +196,14 @@ export function getBaseOptions(editor, theme, setImageOpen) {
             onSelect: () => setImageOpen(true),
         }),
     ];
-    // TODO: 현재 저지문제에서는 퀴즈가 불가능하므로 퀴즈 Viewable/Editable이 추가된후 아래 코드를 변경해야 합니다.
-    // 로컬스토리지 devMode가 true이면 퀴즈 컨텍스트 메뉴를 추가합니다.
-    if (localStorage.getItem("devMode") === "true") {
+    // isQuizEnabled이거나 로컬스토리지 devMode가 true이면 퀴즈 컨텍스트 메뉴를 추가합니다.
+    if (isQuizEnabled || localStorage.getItem("devMode") === "true") {
         return [...getQuizContextOptions(editor, theme), ...baseOptions];
     }
     return baseOptions;
 }
-export function ComponentPickerMenuPlugin() {
+export function ComponentPickerMenuPlugin(props) {
+    const { isQuizEnabled } = props;
     const [editor] = useLexicalComposerContext();
     const theme = useTheme();
     const [queryString, setQueryString] = useState(null);
@@ -211,7 +212,12 @@ export function ComponentPickerMenuPlugin() {
         minLength: 0,
     });
     const options = useMemo(() => {
-        const baseOptions = getBaseOptions(editor, theme, setOpen);
+        const baseOptions = getBaseOptions({
+            editor,
+            theme,
+            setImageOpen: setOpen,
+            isQuizEnabled,
+        });
         if (!queryString) {
             return baseOptions;
         }

package/package.json

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