Merge branch 'fix-wax-view-rerender' into 'master'

Fix wax view rerender

See merge request !137

wax-prosemirror-components/package.json

@@ -13,19 +13,19 @@
     "@fortawesome/fontawesome": "^1.1.2",
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
     "@fortawesome/react-fontawesome": "^0.0.17",
-    "lodash": "^4.17.4",
     "prop-types": "^15.7.2",
-    "prosemirror-model": "^1.9.1",
-    "prosemirror-state": "^1.3.2",
     "react-dropdown": "^1.6.2",
     "react-transition-group": "^4.3.0",
     "styled-components": "^4.2.0",
-    "uuid": "^7.0.3",
     "wax-prosemirror-core": "^0.0.12",
     "wax-prosemirror-utilities": "^0.0.12"
   },
   "peerDependencies": {
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "lodash": "^4.17.4",
+    "prosemirror-model": "^1.9.1",
+    "prosemirror-state": "^1.3.2",
+    "uuid": "^7.0.3"
   }
 }

wax-prosemirror-core/src/WaxView.js

-import React, { useEffect, useRef, useContext } from 'react';
+import React, { useEffect, useRef, useContext, useCallback } from 'react';
 
 import applyDevTools from 'prosemirror-dev-tools';
 import { EditorState } from 'prosemirror-state';
@@ -17,37 +17,46 @@ export default props => {
   let view;
   const context = useContext(WaxContext);
 
-  useEffect(() => {
-    view = new EditorView(
-      { mount: editorRef.current },
-      {
-        editable: () => !readonly,
-        state: EditorState.create(options),
-        dispatchTransaction,
-        user,
-        handleDOMEvents: {
-          blur: onBlur
-            ? view => {
-                onBlur(view.state.doc.content);
-              }
-            : null,
-        },
-        transformPasted: slice => {
-          return transformPasted(slice, view);
+  const setEditorRef = useCallback(node => {
+    if (editorRef.current) {
+      // this is where you do cleanup if you have to. the editorRef.current will
+      // still point to the old ref, the old node. so you have some time here to
+      // clean up the unmount if you need to.
+    }
+
+    if (node) {
+      view = new EditorView(
+        { mount: node },
+        {
+          editable: () => !readonly,
+          state: EditorState.create(options),
+          dispatchTransaction,
+          user,
+          handleDOMEvents: {
+            blur: onBlur
+              ? view => {
+                  onBlur(view.state.doc.content);
+                }
+              : null,
+          },
+          transformPasted: slice => {
+            return transformPasted(slice, view);
+          },
         },
-      },
-    );
+      );
 
-    context.updateView(
-      {
-        main: view,
-      },
-      'main',
-    );
-    if (debug) applyDevTools(view);
-    if (autoFocus) view.focus();
+      context.updateView(
+        {
+          main: view,
+        },
+        'main',
+      );
+      if (debug) applyDevTools(view);
+      if (autoFocus) view.focus();
 
-    return () => view.destroy();
+      return () => view.destroy();
+    }
+    editorRef.current = node;
   }, []);
 
   const dispatchTransaction = transaction => {
@@ -59,7 +68,7 @@ export default props => {
     const state = view.state.apply(tr);
     view.updateState(state);
 
-    /*when a transaction comes from a view other than
+    /* when a transaction comes from a view other than
       main don't keep updating the view ,as this is
       the central point of each transaction
       */
@@ -75,7 +84,7 @@ export default props => {
     props.onChange(state.doc.content);
   };
 
-  const editor = <div ref={editorRef} />;
+  const editor = <div ref={setEditorRef} />;
   return props.children({
     editor,
   });

wax-prosemirror-plugins/package.json

@@ -10,12 +10,14 @@
     "build": "BABEL_ENV=production rollup -c"
   },
   "dependencies": {
-    "lodash": "^4.17.4",
-    "prosemirror-state": "^1.3.2",
-    "prosemirror-view": "^1.13.11",
     "wax-prosemirror-components": "^0.0.12",
     "wax-prosemirror-core": "^0.0.12",
     "wax-prosemirror-layouts": "^0.0.12",
     "wax-prosemirror-utilities": "^0.0.12"
+  },
+  "peerDependencies": {
+    "lodash": "^4.17.4",
+    "prosemirror-state": "^1.3.2",
+    "prosemirror-view": "^1.13.11"
   }
 }

wax-prosemirror-services/package.json

@@ -13,15 +13,8 @@
     "highlight.js": "^10.1.1",
     "inversify": "^5.0.1",
     "inversify-inject-decorators": "^3.1.0",
-    "lodash": "^4.17.4",
-    "prosemirror-commands": "^1.1.3",
-    "prosemirror-highlightjs": "^0.2.0",
-    "prosemirror-history": "^1.1.3",
-    "prosemirror-keymap": "^1.1.3",
-    "prosemirror-state": "^1.3.2",
-    "prosemirror-transform": "^1.2.3",
-    "prosemirror-view": "^1.13.11",
     "styled-components": "^4.2.0",
+    "prosemirror-highlightjs": "^0.2.0",
     "wax-prosemirror-components": "^0.0.12",
     "wax-prosemirror-core": "^0.0.12",
     "wax-prosemirror-layouts": "^0.0.12",
@@ -30,6 +23,13 @@
   },
   "peerDependencies": {
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "lodash": "^4.17.4",
+    "prosemirror-commands": "^1.1.3",
+    "prosemirror-history": "^1.1.3",
+    "prosemirror-keymap": "^1.1.3",
+    "prosemirror-state": "^1.3.2",
+    "prosemirror-transform": "^1.2.3",
+    "prosemirror-view": "^1.13.11"
   }
 }

wax-prosemirror-utilities/package.json

@@ -11,7 +11,9 @@
   },
   "dependencies": {
     "prosemirror-commands": "^1.1.3",
-    "prosemirror-utils": "^0.9.6",
+    "prosemirror-utils": "^0.9.6"
+  },
+  "peerDependencies": {
     "uuid": "^7.0.3"
   }
 }