@team-monolith/cds 0.29.5 → 0.29.7

package/dist/patterns/ReactEditorJS/ReactEditorJS.js

@@ -27,19 +27,21 @@ export function ReactEditorJS(props) {
         }
     }), []);
     const handleSave = useCallback((onChange) => __awaiter(this, void 0, void 0, function* () {
-        var _a;
         if (!editorCore.current || readOnly) {
             return;
         }
         // 저장 전에 isReady 상태를 기다리기
         // https://github.com/codex-team/editor.js/issues/1136
-        (_a = editorCore.current.dangerouslyLowLevelInstance.isReady) === null || _a === void 0 ? void 0 : _a.then(() => __awaiter(this, void 0, void 0, function* () {
-            var _b;
-            const savedData = yield ((_b = editorCore.current) === null || _b === void 0 ? void 0 : _b.save());
+        try {
+            yield editorCore.current.dangerouslyLowLevelInstance.isReady;
+            const savedData = yield editorCore.current.save();
             if (savedData) {
                 onChange(savedData.blocks);
             }
-        }));
+        }
+        catch (e) {
+            onError === null || onError === void 0 ? void 0 : onError(e);
+        }
     }), []);
     // blocks가 변경될 때 preview가 다시 렌더링되게 하려면 controlled component를 위한 "value"인자를 전달하는 것이 올바른 방법이지만
     // controlled를 위해 "defaultValue" 대신 "value"를 사용하면 불필요하게 많이 리렌더링 되고, 그에 따른 오류가 발생합니다.

package/dist/patterns/ReactEditorJS/customTools/block/Callout.d.ts

@@ -1,10 +1,6 @@
 import { BlockTool } from "@editorjs/editorjs";
 import { Theme } from "@emotion/react";
 type COLOR_TYPE = "grey" | "red" | "yellow" | "blue" | "green";
-type DATA_TYPE = {
-    color: COLOR_TYPE;
-    text: string;
-};
 export declare const CalloutStyle: (theme: Theme) => import("@emotion/utils").SerializedStyles;
 export declare class Callout implements BlockTool {
     api: any;
@@ -12,11 +8,13 @@ export declare class Callout implements BlockTool {
     readOnly: any;
     private _wrapper;
     constructor({ api, config, readOnly, data }: any);
-    createWrapper(data: DATA_TYPE): HTMLDivElement;
+    /** 주어진 data에 따라 HTML Element를 반환함. */
+    private createWrapper;
+    /** 주어진 data에 따라 this._wrapper를 업데이트함. */
+    private updateWrapper;
     get colors(): string[];
     get defaultColor(): string;
     get color(): COLOR_TYPE;
-    set data(data: DATA_TYPE);
     save(): {
         color: COLOR_TYPE;
         text: string;

package/dist/patterns/ReactEditorJS/customTools/block/Callout.js

@@ -74,6 +74,7 @@ export class Callout {
         this.readOnly = readOnly;
         this._wrapper = this.createWrapper(data);
     }
+    /** 주어진 data에 따라 HTML Element를 반환함. */
     createWrapper(data) {
         const wrapper = document.createElement("div");
         wrapper.classList.add("ce-callout", data.color || this.defaultColor);
@@ -81,6 +82,13 @@ export class Callout {
         wrapper.innerHTML = data.text || "";
         return wrapper;
     }
+    /** 주어진 data에 따라 this._wrapper를 업데이트함. */
+    updateWrapper(data) {
+        var _a;
+        const newWrapper = this.createWrapper(data);
+        (_a = this._wrapper.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newWrapper, this._wrapper);
+        this._wrapper = newWrapper;
+    }
     get colors() {
         return ["grey", "red", "yellow", "blue", "green"];
     }
@@ -90,12 +98,6 @@ export class Callout {
     get color() {
         return this._wrapper.classList[1];
     }
-    set data(data) {
-        var _a;
-        const newWrapper = this.createWrapper(data);
-        (_a = this._wrapper.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newWrapper, this._wrapper);
-        this._wrapper = newWrapper;
-    }
     save() {
         var _a;
         return {
@@ -138,10 +140,10 @@ export class Callout {
             closeOnActivate: true,
             onActivate: () => {
                 var _a;
-                this.data = {
+                this.updateWrapper({
                     color: tune.name,
                     text: (_a = this._wrapper.innerHTML) !== null && _a !== void 0 ? _a : "",
-                };
+                });
             },
         }));
     }

package/dist/patterns/ReactEditorJS/customTools/block/Quote.d.ts

@@ -1,10 +1,6 @@
 import { BlockTool } from "@editorjs/editorjs";
 import { Theme } from "@emotion/react";
 type COLOR_TYPE = "grey" | "red" | "yellow" | "blue" | "green";
-type DATA_TYPE = {
-    color: COLOR_TYPE;
-    text: string;
-};
 export declare const QuoteStyle: (theme: Theme) => import("@emotion/utils").SerializedStyles;
 export declare class Quote implements BlockTool {
     api: any;
@@ -12,11 +8,13 @@ export declare class Quote implements BlockTool {
     readOnly: any;
     private _wrapper;
     constructor({ api, config, readOnly, data }: any);
-    createWrapper(data: DATA_TYPE): HTMLDivElement;
+    /** 주어진 data에 따라 HTML Element를 반환함. */
+    private createWrapper;
+    /** 주어진 data에 따라 this._wrapper를 업데이트함. */
+    private updateWrapper;
     get colors(): string[];
     get defaultColor(): string;
     get color(): COLOR_TYPE;
-    set data(data: DATA_TYPE);
     save(): {
         color: COLOR_TYPE;
         text: string;

package/dist/patterns/ReactEditorJS/customTools/block/Quote.js

@@ -73,6 +73,7 @@ export class Quote {
         this.readOnly = readOnly;
         this._wrapper = this.createWrapper(data);
     }
+    /** 주어진 data에 따라 HTML Element를 반환함. */
     createWrapper(data) {
         const wrapper = document.createElement("div");
         wrapper.classList.add("ce-quote", data.color || this.defaultColor);
@@ -80,6 +81,13 @@ export class Quote {
         wrapper.innerHTML = data.text || "";
         return wrapper;
     }
+    /** 주어진 data에 따라 this._wrapper를 업데이트함. */
+    updateWrapper(data) {
+        var _a;
+        const newWrapper = this.createWrapper(data);
+        (_a = this._wrapper.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newWrapper, this._wrapper);
+        this._wrapper = newWrapper;
+    }
     get colors() {
         return ["grey", "red", "yellow", "blue", "green"];
     }
@@ -89,12 +97,6 @@ export class Quote {
     get color() {
         return this._wrapper.classList[1];
     }
-    set data(data) {
-        var _a;
-        const newWrapper = this.createWrapper(data);
-        (_a = this._wrapper.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newWrapper, this._wrapper);
-        this._wrapper = newWrapper;
-    }
     save() {
         var _a;
         return {
@@ -137,10 +139,10 @@ export class Quote {
             closeOnActivate: true,
             onActivate: () => {
                 var _a;
-                this.data = {
+                this.updateWrapper({
                     color: tune.name,
                     text: (_a = this._wrapper.innerHTML) !== null && _a !== void 0 ? _a : "",
-                };
+                });
             },
         }));
     }

package/dist/patterns/ReactEditorJS/customTools/block/Table.d.ts

@@ -1,10 +1,9 @@
 import EditorJSTable from "@editorjs/table";
 export declare class Table extends EditorJSTable {
-    constructor({ api, config, readOnly, data }: any);
     static get toolbox(): {
         icon: string;
         title: string;
     };
-    getConfig(configName: string, savedData: any): any;
+    getConfig(configName: string, defaultValue: any, savedData: any): any;
     renderSettings(): any[];
 }

package/dist/patterns/ReactEditorJS/customTools/block/Table.js

@@ -4,11 +4,8 @@ const TUNE_ICONS = [
     `<img src="${layoutTopLineSvg}" />`,
     `<img src="${layoutGridLineSvg}" />`,
 ];
+// https://github.com/editor-js/table/blob/master/src/plugin.js
 export class Table extends EditorJSTable {
-    constructor({ api, config, readOnly, data }) {
-        super({ api, config, readOnly, data });
-        this.data = Object.assign(Object.assign({}, this.data), { withHeadings: this.getConfig("withHeadings", data) });
-    }
     static get toolbox() {
         return {
             icon: `<img src="${table2Svg}" />`,
@@ -16,15 +13,14 @@ export class Table extends EditorJSTable {
         };
     }
     // https://github.com/editor-js/table/pull/134
-    // 기존 내부의 getConfig에 오류가 있고, 이를 수정하기 위해 재정의합니다.
-    getConfig(configName, savedData) {
-        const data = savedData;
-        if (data && configName in data) {
-            return data[configName];
+    // 기존 내부의 getConfig에 오류가 있고, 이를 수정하기 위해 override합니다.
+    getConfig(configName, defaultValue = false, savedData) {
+        if (savedData && configName in savedData) {
+            return savedData[configName];
         }
         return this.config && this.config[configName]
             ? this.config[configName]
-            : false;
+            : defaultValue;
     }
     renderSettings() {
         return Array.from(super.renderSettings()).map((setting, i) => (Object.assign(Object.assign({}, setting), { icon: TUNE_ICONS[i] })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.29.5",
+  "version": "0.29.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -16,7 +16,7 @@
     "@editorjs/underline": "^1.1.0",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.13.6", 
+    "@mui/material": "^5.13.6",
     "@types/node": "^16.11.26",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
@@ -24,7 +24,7 @@
     "hex-to-css-filter": "^5.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-editor-js": "^2.1.0", 
+    "react-editor-js": "^2.1.0",
     "remixicon": "^3.4.0",
     "typescript": "^4.5.5",
     "uid": "^2.0.2"