@team-monolith/cds 1.2.1 → 1.2.2

package/dist/CodleDesignSystemProvider.d.ts

@@ -70,7 +70,23 @@ export declare const light: {
         };
     };
 };
+interface CodleDesignSystemContext {
+    editorjs?: {
+        image: {
+            uploader: {
+                uploadByFile: (file: File) => Promise<{
+                    success: number;
+                    file: {
+                        url: string;
+                    };
+                }>;
+            };
+        };
+    };
+}
+export declare const CodleDesignSystemContext: import("react").Context<CodleDesignSystemContext>;
 export default function (props: {
     children: React.ReactNode;
     fontFamily?: string;
-}): React.ReactElement;
+} & CodleDesignSystemContext): React.ReactElement;
+export {};

package/dist/CodleDesignSystemProvider.js

@@ -4,6 +4,7 @@ import { ThemeProvider as MuiThemeProvider } from "@mui/material";
 import COLOR from "./foundation/color";
 import FONT from "./foundation/font";
 import { createTheme } from "@mui/material";
+import { createContext } from "react";
 export const light = {
     fontFamily: {
         ui: FONT.pretendard,
@@ -75,6 +76,7 @@ export const light = {
         },
     },
 };
+export const CodleDesignSystemContext = createContext({});
 // eslint-disable-next-line import/no-anonymous-default-export
 export default function (props) {
     const muiTheme = createTheme({
@@ -93,5 +95,5 @@ export default function (props) {
           body {
             font-family: ${FONT.pretendard};
           }
-        ` }), _jsx(MuiThemeProvider, Object.assign({ theme: muiTheme }, { children: _jsx(ThemeProvider, Object.assign({ theme: light }, { children: props.children })) }))] }));
+        ` }), _jsx(MuiThemeProvider, Object.assign({ theme: muiTheme }, { children: _jsx(ThemeProvider, Object.assign({ theme: light }, { children: _jsx(CodleDesignSystemContext.Provider, Object.assign({ value: props }, { children: props.children })) })) }))] }));
 }

package/dist/patterns/ReactEditorJS/ReactEditorJS.js

@@ -8,16 +8,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { createReactEditorJS } from "react-editor-js";
 import Layout from "./Layout";
 import TOOLS from "./tools";
 import I18n from "./i18n";
+import { CodleDesignSystemContext } from "../../CodleDesignSystemProvider";
 export function ReactEditorJS(props) {
+    var _a;
     const { className, readOnly = false, blocks, onChange, onError, onInitialize, } = props;
     const ReactEditorJS = createReactEditorJS();
     const editorCore = useRef(null);
     const [isInitialized, setIsInitialized] = useState(false);
+    const codleDesignSystemContext = useContext(CodleDesignSystemContext);
     const handleInitialize = useCallback((instance) => __awaiter(this, void 0, void 0, function* () {
         try {
             setIsInitialized(false);
@@ -59,14 +62,17 @@ export function ReactEditorJS(props) {
             blocks,
         });
     }, [blocks, readOnly, isInitialized]);
+    const tools = Object.assign(Object.assign({}, TOOLS), { image: Object.assign(Object.assign({}, TOOLS.image), { config: {
+                uploader: (_a = codleDesignSystemContext.editorjs) === null || _a === void 0 ? void 0 : _a.image.uploader,
+            } }) });
     // readOnly가 변경되면 ReactEditorJS를 다시 마운트하기 위해 key를 변경합니다.
     // readOnly 모드에서는 onChange를 전달할 수 없어서 케이스를 분리합니다.
     if (readOnly) {
-        return (_jsx(Layout, Object.assign({ className: className, readOnly: true }, { children: _jsx(ReactEditorJS, { onInitialize: handleInitialize, tools: TOOLS, defaultValue: {
+        return (_jsx(Layout, Object.assign({ className: className, readOnly: true }, { children: _jsx(ReactEditorJS, { onInitialize: handleInitialize, tools: tools, defaultValue: {
                     blocks,
                 }, i18n: I18n, readOnly: true }, "readOnly") })));
     }
-    return (_jsx(Layout, Object.assign({ className: className }, { children: _jsx(ReactEditorJS, { onInitialize: handleInitialize, tools: TOOLS, inlineToolbar: [
+    return (_jsx(Layout, Object.assign({ className: className }, { children: _jsx(ReactEditorJS, { onInitialize: handleInitialize, tools: tools, inlineToolbar: [
                 "bold",
                 "italic",
                 "underline",

package/dist/patterns/ReactEditorJS/tools.d.ts

@@ -50,7 +50,9 @@ declare const TOOLS: {
             withHeadings: boolean;
         };
     };
-    image: typeof Image;
+    image: {
+        class: typeof Image;
+    };
     bold: {
         class: typeof Bold;
         shortcut: string;

package/dist/patterns/ReactEditorJS/tools.js

@@ -74,7 +74,9 @@ const TOOLS = {
             withHeadings: true,
         },
     },
-    image: Image,
+    image: {
+        class: Image,
+    },
     // 인라인 툴 : ReactEditorJS에서 inlineToolbar를 지정하여 노출합니다.
     bold: {
         class: Bold,

package/package.json

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