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

Comparing version 0.2.2 to 0.2.3

CHANGELOG.md

@@ -6,2 +6,9 @@ # react-editor-js
 
+### [0.2.3](https://github.com/natterstefan/react-editor-js/compare/v0.2.2...v0.2.3) (2019-11-26)
+
+
+### Fixes
+
+* properly handle reinitializeOnPropsChange and render cycles, rename type Props ([88ce8d6](https://github.com/natterstefan/react-editor-js/commit/88ce8d676445bfdbaa2749618ea446fa2aaee38e))
+
 ### [0.2.2](https://github.com/natterstefan/react-editor-js/compare/v0.2.1...v0.2.2) (2019-11-23)
@@ -8,0 +15,0 @@

dist/reacteditorjs.js

@@ -1,2 +0,2 @@
-!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react"),require("@editorjs/editorjs"),require("@editorjs/paragraph"),require("@editorjs/header")):"function"==typeof define&&define.amd?define(["react","@editorjs/editorjs","@editorjs/paragraph","@editorjs/header"],r):"object"==typeof exports?exports.ReactEditorJs=r(require("react"),require("@editorjs/editorjs"),require("@editorjs/paragraph"),require("@editorjs/header")):e.ReactEditorJs=r(e.react,e["@editorjs/editorjs"],e["@editorjs/paragraph"],e["@editorjs/header"])}(window,(function(e,r,t,o){return function(e){var r={};function t(o){if(r[o])return r[o].exports;var n=r[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,t),n.l=!0,n.exports}return t.m=e,t.c=r,t.d=function(e,r,o){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:o})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)t.d(o,n,function(r){return e[r]}.bind(null,n));return o},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="",t(t.s=0)}([function(e,r,t){"use strict";var o=this&&this.__assign||function(){return(o=Object.assign||function(e){for(var r,t=1,o=arguments.length;t<o;t++)for(var n in r=arguments[t])Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);return e}).apply(this,arguments)},n=this&&this.__rest||function(e,r){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)r.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(t[o[n]]=e[o[n]])}return t},i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)Object.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r.default=e,r},u=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(r,"__esModule",{value:!0});var a=i(t(1)),s=u(t(2)),d=u(t(3)),f=u(t(4));r.default=a.memo((function(e){var r=e.holder,t=e.editorInstance,i=e.reinitializeOnPropsChange,u=e.children,l=e.tools,c=n(e,["holder","editorInstance","reinitializeOnPropsChange","children","tools"]),p=r||"editorjs";return a.useEffect((function(){var e=null;return e=new s.default(o({tools:o({paragraph:{class:d.default,inlineToolbar:!0},header:f.default},l),holder:p},c)),t&&t(e),function(){e&&i&&e.isReady.then((function(){e.destroy(),e=void 0}))}}),[p,t,c,e,l,i]),u||a.default.createElement("div",{id:p})}))},function(r,t){r.exports=e},function(e,t){e.exports=r},function(e,r){e.exports=t},function(e,r){e.exports=o}])}));
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react"),require("@editorjs/editorjs"),require("@editorjs/paragraph"),require("@editorjs/header")):"function"==typeof define&&define.amd?define(["react","@editorjs/editorjs","@editorjs/paragraph","@editorjs/header"],r):"object"==typeof exports?exports.ReactEditorJs=r(require("react"),require("@editorjs/editorjs"),require("@editorjs/paragraph"),require("@editorjs/header")):e.ReactEditorJs=r(e.react,e["@editorjs/editorjs"],e["@editorjs/paragraph"],e["@editorjs/header"])}(window,(function(e,r,t,n){return function(e){var r={};function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:n})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(t.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)t.d(n,o,function(r){return e[r]}.bind(null,o));return n},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="",t(t.s=0)}([function(e,r,t){"use strict";var n=this&&this.__assign||function(){return(n=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e}).apply(this,arguments)},o=this&&this.__rest||function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t},i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)Object.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r.default=e,r},u=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(r,"__esModule",{value:!0});var a=i(t(1)),c=u(t(2)),s=u(t(3)),f=u(t(4));r.default=a.memo((function(e){var r=e.holder,t=e.editorInstance,i=e.reinitializeOnPropsChange,u=e.children,l=e.tools,d=o(e,["holder","editorInstance","reinitializeOnPropsChange","children","tools"]),p=a.useRef(null),j=r||"editorjs",h=a.useCallback((function(){p&&!p.current&&(p.current=new c.default(n({tools:n({paragraph:{class:s.default,inlineToolbar:!0},header:f.default},l),holder:j},d))),t&&t(p.current)}),[t,j,d,l]);return a.useEffect((function(){return h(),function(){p.current&&i&&p.current.isReady.then((function(){p.current.destroy(),p.current=void 0,h()}))}}),[h,i]),u||a.default.createElement("div",{id:j})}))},function(r,t){r.exports=e},function(e,t){e.exports=r},function(e,r){e.exports=t},function(e,r){e.exports=n}])}));
 //# sourceMappingURL=reacteditorjs.js.map

es/index.d.ts

 import React, { ReactElement } from 'react';
 import EditorJS from '@editorjs/editorjs';
-export interface IEditorJsProps extends EditorJS.EditorConfig {
+export interface IEditorJsProps {
     children?: ReactElement;
+    /**
+     * Id of Element that should contain the Editor
+     */
     holder?: string;
+    /**
+     * reinitialize editor.js when component did update
+     */
     reinitializeOnPropsChange?: boolean;
+    /**
+     * returns the editorjs instance
+     */
     editorInstance?: (instance: EditorJS) => void;
 }
-export declare type EditorJsProps = Readonly<IEditorJsProps>;
-declare const _default: React.NamedExoticComponent<Readonly<IEditorJsProps>>;
+export declare type Props = Readonly<EditorJS.EditorConfig> & Readonly<IEditorJsProps>;
+declare const _default: React.NamedExoticComponent<Props>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

es/index.js

@@ -12,3 +12,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
-import React, { memo, useEffect } from 'react';
+import React, { memo, useCallback, useEffect, useRef, } from 'react';
 import EditorJS from '@editorjs/editorjs';
@@ -20,28 +20,27 @@ import Paragraph from '@editorjs/paragraph';
     const { holder: customHolder, editorInstance, reinitializeOnPropsChange, children, tools } = props, otherProps = __rest(props, ["holder", "editorInstance", "reinitializeOnPropsChange", "children", "tools"]);
+    const instance = useRef(null);
     const holder = customHolder || DEFAULT_ID;
-    useEffect(() => {
-        let instance = null;
-        instance = new EditorJS(Object.assign({ tools: Object.assign({ paragraph: {
-                    class: Paragraph,
-                    inlineToolbar: true,
-                }, header: Header }, tools), holder }, otherProps));
+    const initEditor = useCallback(() => {
+        if (instance && !instance.current) {
+            instance.current = new EditorJS(Object.assign({ tools: Object.assign({ paragraph: {
+                        class: Paragraph,
+                        inlineToolbar: true,
+                    }, header: Header }, tools), holder }, otherProps));
+        }
         if (editorInstance) {
-            editorInstance(instance);
+            editorInstance(instance.current);
         }
+    }, [editorInstance, holder, otherProps, tools]);
+    useEffect(() => {
+        initEditor();
         return () => {
-            if (instance && reinitializeOnPropsChange) {
-                instance.isReady.then(() => {
-                    instance.destroy();
-                    instance = undefined;
+            if (instance.current && reinitializeOnPropsChange) {
+                instance.current.isReady.then(() => {
+                    instance.current.destroy();
+                    instance.current = undefined;
+                    initEditor();
                 });
             }
         };
-    }, [
-        holder,
-        editorInstance,
-        otherProps,
-        props,
-        tools,
-        reinitializeOnPropsChange,
-    ]);
+    }, [initEditor, reinitializeOnPropsChange]);
     return children || React.createElement("div", { id: holder });
@@ -48,0 +47,0 @@ };

esm/index.d.ts

 import React, { ReactElement } from 'react';
 import EditorJS from '@editorjs/editorjs';
-export interface IEditorJsProps extends EditorJS.EditorConfig {
+export interface IEditorJsProps {
     children?: ReactElement;
+    /**
+     * Id of Element that should contain the Editor
+     */
     holder?: string;
+    /**
+     * reinitialize editor.js when component did update
+     */
     reinitializeOnPropsChange?: boolean;
+    /**
+     * returns the editorjs instance
+     */
     editorInstance?: (instance: EditorJS) => void;
 }
-export declare type EditorJsProps = Readonly<IEditorJsProps>;
-declare const _default: React.NamedExoticComponent<Readonly<IEditorJsProps>>;
+export declare type Props = Readonly<EditorJS.EditorConfig> & Readonly<IEditorJsProps>;
+declare const _default: React.NamedExoticComponent<Props>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

esm/index.js

@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { memo, useEffect } from 'react';
+import React, { memo, useCallback, useEffect, useRef, } from 'react';
 import EditorJS from '@editorjs/editorjs';
@@ -31,28 +31,27 @@ import Paragraph from '@editorjs/paragraph';
     var customHolder = props.holder, editorInstance = props.editorInstance, reinitializeOnPropsChange = props.reinitializeOnPropsChange, children = props.children, tools = props.tools, otherProps = __rest(props, ["holder", "editorInstance", "reinitializeOnPropsChange", "children", "tools"]);
+    var instance = useRef(null);
     var holder = customHolder || DEFAULT_ID;
-    useEffect(function () {
-        var instance = null;
-        instance = new EditorJS(__assign({ tools: __assign({ paragraph: {
-                    class: Paragraph,
-                    inlineToolbar: true,
-                }, header: Header }, tools), holder: holder }, otherProps));
+    var initEditor = useCallback(function () {
+        if (instance && !instance.current) {
+            instance.current = new EditorJS(__assign({ tools: __assign({ paragraph: {
+                        class: Paragraph,
+                        inlineToolbar: true,
+                    }, header: Header }, tools), holder: holder }, otherProps));
+        }
         if (editorInstance) {
-            editorInstance(instance);
+            editorInstance(instance.current);
         }
+    }, [editorInstance, holder, otherProps, tools]);
+    useEffect(function () {
+        initEditor();
         return function () {
-            if (instance && reinitializeOnPropsChange) {
-                instance.isReady.then(function () {
-                    instance.destroy();
-                    instance = undefined;
+            if (instance.current && reinitializeOnPropsChange) {
+                instance.current.isReady.then(function () {
+                    instance.current.destroy();
+                    instance.current = undefined;
+                    initEditor();
                 });
             }
         };
-    }, [
-        holder,
-        editorInstance,
-        otherProps,
-        props,
-        tools,
-        reinitializeOnPropsChange,
-    ]);
+    }, [initEditor, reinitializeOnPropsChange]);
     return children || React.createElement("div", { id: holder });
@@ -59,0 +58,0 @@ };

lib/index.d.ts

 import React, { ReactElement } from 'react';
 import EditorJS from '@editorjs/editorjs';
-export interface IEditorJsProps extends EditorJS.EditorConfig {
+export interface IEditorJsProps {
     children?: ReactElement;
+    /**
+     * Id of Element that should contain the Editor
+     */
     holder?: string;
+    /**
+     * reinitialize editor.js when component did update
+     */
     reinitializeOnPropsChange?: boolean;
+    /**
+     * returns the editorjs instance
+     */
     editorInstance?: (instance: EditorJS) => void;
 }
-export declare type EditorJsProps = Readonly<IEditorJsProps>;
-declare const _default: React.NamedExoticComponent<Readonly<IEditorJsProps>>;
+export declare type Props = Readonly<EditorJS.EditorConfig> & Readonly<IEditorJsProps>;
+declare const _default: React.NamedExoticComponent<Props>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

lib/index.js

@@ -42,28 +42,27 @@ "use strict";
     var customHolder = props.holder, editorInstance = props.editorInstance, reinitializeOnPropsChange = props.reinitializeOnPropsChange, children = props.children, tools = props.tools, otherProps = __rest(props, ["holder", "editorInstance", "reinitializeOnPropsChange", "children", "tools"]);
+    var instance = react_1.useRef(null);
     var holder = customHolder || DEFAULT_ID;
-    react_1.useEffect(function () {
-        var instance = null;
-        instance = new editorjs_1.default(__assign({ tools: __assign({ paragraph: {
-                    class: paragraph_1.default,
-                    inlineToolbar: true,
-                }, header: header_1.default }, tools), holder: holder }, otherProps));
+    var initEditor = react_1.useCallback(function () {
+        if (instance && !instance.current) {
+            instance.current = new editorjs_1.default(__assign({ tools: __assign({ paragraph: {
+                        class: paragraph_1.default,
+                        inlineToolbar: true,
+                    }, header: header_1.default }, tools), holder: holder }, otherProps));
+        }
         if (editorInstance) {
-            editorInstance(instance);
+            editorInstance(instance.current);
         }
+    }, [editorInstance, holder, otherProps, tools]);
+    react_1.useEffect(function () {
+        initEditor();
         return function () {
-            if (instance && reinitializeOnPropsChange) {
-                instance.isReady.then(function () {
-                    instance.destroy();
-                    instance = undefined;
+            if (instance.current && reinitializeOnPropsChange) {
+                instance.current.isReady.then(function () {
+                    instance.current.destroy();
+                    instance.current = undefined;
+                    initEditor();
                 });
             }
         };
-    }, [
-        holder,
-        editorInstance,
-        otherProps,
-        props,
-        tools,
-        reinitializeOnPropsChange,
-    ]);
+    }, [initEditor, reinitializeOnPropsChange]);
     return children || react_1.default.createElement("div", { id: holder });
@@ -70,0 +69,0 @@ };

package.json

 {
   "name": "@natterstefan/react-editor-js",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Unofficial react component for editorjs (https://editorjs.io/)",
@@ -131,2 +131,3 @@ "repository": {
     "start-server-and-test": "^1.10.6",
+    "storybook-readme": "^5.0.8",
     "terser-webpack-plugin": "^2.2.1",
@@ -133,0 +134,0 @@ "ts-jest": "^24.2.0",

README.md

@@ -55,3 +55,4 @@ # react-editor-js
 `EditorJs` passes all given props straight to the `editorjs` instance. It is
-basically just a wrapper component in React. Take a look at the [Configuration page in the editorjs documentation](https://editorjs.io/configuration)
+basically just a wrapper component in React. Take a look at the
+[configuration page in the editor.js documentation](https://editorjs.io/configuration)
 for more details.
@@ -110,4 +111,4 @@
 
-If you want to add [more tools](https://editorjs.io/getting-started#tools-installation) simply pass a `tools` property to the
-`EditorJs` component:
+If you want to add [more tools](https://editorjs.io/getting-started#tools-installation)
+simply pass a `tools` property to the `EditorJs` component:
 
@@ -114,0 +115,0 @@ ```jsx

No alert changes

Improved metrics

Total package byte prevSize

42802

increased by6.84%

Lines of code

247

increased by11.26%

Number of lines in readme file

162

increased by0.62%

Worsened metrics

Dev dependency count

68

increased by1.49%

No dependency changes