@react-editor-js/client - npm Package Compare versions

Comparing version 2.0.5 to 2.0.6

dist/client.cjs.js

 'use strict';
 
 var React = require('react');
+var EditorJS = require('@editorjs/editorjs');
 var Paragraph = require('@editorjs/paragraph');
-var EditorJS = require('@editorjs/editorjs');
 
@@ -10,4 +10,4 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var EditorJS__default = /*#__PURE__*/_interopDefaultLegacy(EditorJS);
 var Paragraph__default = /*#__PURE__*/_interopDefaultLegacy(Paragraph);
-var EditorJS__default = /*#__PURE__*/_interopDefaultLegacy(EditorJS);
 
@@ -41,14 +41,18 @@ /*! *****************************************************************************
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 function ReactEditorJS(_a) {
-    var { factory, holder, tools, defaultValue, children, value, onInitialize } = _a, restProps = __rest(_a, ["factory", "holder", "tools", "defaultValue", "children", "value", "onInitialize"]);
+    var { factory, holder, defaultValue, children, value, onInitialize } = _a, restProps = __rest(_a, ["factory", "holder", "defaultValue", "children", "value", "onInitialize"]);
     const memoizedHolder = React__default["default"].useRef(holder !== null && holder !== void 0 ? holder : `react-editor-js-${Date.now().toString(16)}`);
     const editorJS = React__default["default"].useRef(null);
     React__default["default"].useEffect(() => {
-        const extendTools = Object.assign({ 
-            // default tools
-            paragraph: {
-                class: Paragraph__default["default"],
-                inlineToolbar: true,
-            } }, tools);
-        editorJS.current = factory.create(Object.assign(Object.assign({ tools: extendTools, holder: memoizedHolder.current }, (defaultValue && { data: defaultValue })), restProps));
+        editorJS.current = factory(Object.assign(Object.assign({ holder: memoizedHolder.current }, (defaultValue && { data: defaultValue })), restProps));
         onInitialize === null || onInitialize === void 0 ? void 0 : onInitialize(editorJS.current);
@@ -63,3 +67,3 @@ return () => {
         if (value) {
-            (_a = editorJS.current) === null || _a === void 0 ? void 0 : _a.blocks.render(value);
+            (_a = editorJS.current) === null || _a === void 0 ? void 0 : _a.render(value);
         }
@@ -70,10 +74,37 @@ }, [value]);
 
-class ClientEditorJSFactory {
-    create(config) {
-        return new EditorJS__default["default"](config);
+class ClientEditorCore {
+    constructor(_a) {
+        var { tools } = _a, config = __rest(_a, ["tools"]);
+        const extendTools = Object.assign({ 
+            // default tools
+            paragraph: {
+                class: Paragraph__default["default"],
+                inlineToolbar: true,
+            } }, tools);
+        this._editorJS = new EditorJS__default["default"](Object.assign({ tools: extendTools }, config));
     }
+    clear() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._editorJS.clear();
+        });
+    }
+    save() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this._editorJS.save();
+        });
+    }
+    destroy() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._editorJS.destroy();
+        });
+    }
+    render(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._editorJS.render(data);
+        });
+    }
 }
 
 function ReactEditorJSClient(props) {
-    const factory = React__default["default"].useMemo(() => new ClientEditorJSFactory(), []);
+    const factory = React__default["default"].useCallback((config) => new ClientEditorCore(config), []);
     return React__default["default"].createElement(ReactEditorJS, Object.assign({ factory: factory }, props));
@@ -80,0 +111,0 @@ }

dist/client.js

 import React from 'react';
+import EditorJS from '@editorjs/editorjs';
 import Paragraph from '@editorjs/paragraph';
-import EditorJS from '@editorjs/editorjs';
 
@@ -32,14 +32,18 @@ /*! *****************************************************************************
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 function ReactEditorJS(_a) {
-    var { factory, holder, tools, defaultValue, children, value, onInitialize } = _a, restProps = __rest(_a, ["factory", "holder", "tools", "defaultValue", "children", "value", "onInitialize"]);
+    var { factory, holder, defaultValue, children, value, onInitialize } = _a, restProps = __rest(_a, ["factory", "holder", "defaultValue", "children", "value", "onInitialize"]);
     const memoizedHolder = React.useRef(holder !== null && holder !== void 0 ? holder : `react-editor-js-${Date.now().toString(16)}`);
     const editorJS = React.useRef(null);
     React.useEffect(() => {
-        const extendTools = Object.assign({ 
-            // default tools
-            paragraph: {
-                class: Paragraph,
-                inlineToolbar: true,
-            } }, tools);
-        editorJS.current = factory.create(Object.assign(Object.assign({ tools: extendTools, holder: memoizedHolder.current }, (defaultValue && { data: defaultValue })), restProps));
+        editorJS.current = factory(Object.assign(Object.assign({ holder: memoizedHolder.current }, (defaultValue && { data: defaultValue })), restProps));
         onInitialize === null || onInitialize === void 0 ? void 0 : onInitialize(editorJS.current);
@@ -54,3 +58,3 @@ return () => {
         if (value) {
-            (_a = editorJS.current) === null || _a === void 0 ? void 0 : _a.blocks.render(value);
+            (_a = editorJS.current) === null || _a === void 0 ? void 0 : _a.render(value);
         }
@@ -61,10 +65,37 @@ }, [value]);
 
-class ClientEditorJSFactory {
-    create(config) {
-        return new EditorJS(config);
+class ClientEditorCore {
+    constructor(_a) {
+        var { tools } = _a, config = __rest(_a, ["tools"]);
+        const extendTools = Object.assign({ 
+            // default tools
+            paragraph: {
+                class: Paragraph,
+                inlineToolbar: true,
+            } }, tools);
+        this._editorJS = new EditorJS(Object.assign({ tools: extendTools }, config));
     }
+    clear() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._editorJS.clear();
+        });
+    }
+    save() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this._editorJS.save();
+        });
+    }
+    destroy() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._editorJS.destroy();
+        });
+    }
+    render(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._editorJS.render(data);
+        });
+    }
 }
 
 function ReactEditorJSClient(props) {
-    const factory = React.useMemo(() => new ClientEditorJSFactory(), []);
+    const factory = React.useCallback((config) => new ClientEditorCore(config), []);
     return React.createElement(ReactEditorJS, Object.assign({ factory: factory }, props));
@@ -71,0 +102,0 @@ }

dist/core/src/component-types.d.ts

 import React from 'react';
-import EditorJS, { EditorConfig } from '@editorjs/editorjs';
-import { EditorJSFactory } from './factory';
+import { EditorConfig } from '@editorjs/editorjs';
+import { EditorCoreFactory } from './factory';
+import { EditorCore } from './editor-core';
 export interface Props extends Omit<EditorConfig, 'data'> {
-    factory: EditorJSFactory;
+    factory: EditorCoreFactory;
     holder?: string;
@@ -10,3 +11,3 @@ children?: React.ReactElement;
     defaultValue?: EditorConfig['data'];
-    onInitialize?: (editorJS: EditorJS) => void;
+    onInitialize?: (core: EditorCore) => void;
 }

dist/core/src/factory.d.ts

@@ -1,4 +0,3 @@
-import EditorJS, { EditorConfig } from '@editorjs/editorjs';
-export interface EditorJSFactory {
-    create(config?: EditorConfig | string): EditorJS;
-}
+import { EditorConfig } from '@editorjs/editorjs';
+import { EditorCore } from './editor-core';
+export declare type EditorCoreFactory = (config: EditorConfig) => EditorCore;

dist/core/src/index.d.ts

 export * from './component-types';
 export * from './factory';
+export * from './editor-core';
 export { default as ReactEditorJS } from './ReactEditorJS';

dist/core/src/ReactEditorJS.d.ts

 import React from 'react';
-import { Props } from '@react-editor-js/core';
-declare function ReactEditorJS({ factory, holder, tools, defaultValue, children, value, onInitialize, ...restProps }: Props): React.ReactElement;
+import { Props } from './component-types';
+declare function ReactEditorJS({ factory, holder, defaultValue, children, value, onInitialize, ...restProps }: Props): React.ReactElement;
 export default ReactEditorJS;

package.json

 {
   "name": "@react-editor-js/client",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "The unofficial editor-js component for React on client",
@@ -17,13 +17,16 @@ "main": "./dist/client.cjs.js",
     "@editorjs/editorjs": "*",
+    "@editorjs/paragraph": "*",
     "react": "*"
   },
   "dependencies": {
-    "@react-editor-js/core": "2.0.5"
+    "@react-editor-js/core": "2.0.6"
   },
   "devDependencies": {
     "@editorjs/editorjs": "*",
+    "@editorjs/paragraph": "*",
     "@types/react": "*",
     "react": "*",
+    "tslib": "^2.3.1",
     "typescript": "^4.3.5"
   }
 }

README.md

@@ -63,3 +63,3 @@ <div align="center">
 | value | OutputData                                                                         | data when using editor js as [controlled component](https://ko.reactjs.org/docs/forms.html#controlled-components). <br> ⚠️ Don't use it with onChange prop. Infinite loops can occur.                                                                                                         |
-| onInitialize            | (editorJS?: EditorJS) => void                                                   | Call after editor-js is initialized                                                                                       |
+| onInitialize            | (editorCore?: EditorCore) => void                                                   | Call after editor-js is initialized                                                                                       |
 
@@ -152,13 +152,26 @@ ## 🧐 FAQ
 
-You can access using instanceRef
+The editor-js instance is inaccessible. However, you can access the abstracted editor-js for isomorphic react-editor-js.
 
+```ts
+// abstracted editor-js interface
+interface EditorCore {
+  destroy(): Promise<void>
+
+  clear(): Promise<void>
+
+  save(): Promise<OutputData>
+
+  render(data: OutputData): Promise<void>
+}
+```
+
 ```tsx
-const editorJS = React.useRef(null)
+const editorCore = React.useRef(null)
 
 const handleInitialize = React.useCallback((instance) => {
-  editorJS.current = instance
+  editorCore.current = instance
 }, [])
 
 const handleSave = React.useCallback(() => {
-  const savedData = await editorJS.current.save();
+  const savedData = await editorCore.current.save();
 }, [])
@@ -165,0 +178,0 @@

No alert changes

Improved metrics

Total package byte prevSize

19865

increased by25.85%

Number of package files

16

increased by6.67%

Lines of code

287

increased by55.14%

Number of lines in readme file

199

increased by6.99%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

6

increased by50%

Dependency changes

• + Added@react-editor-js/core@2.0.6(transitive)

• - Removed@react-editor-js/core@2.0.5(transitive)

• Updated@react-editor-js/core@2.0.6