only rerender editor on certain props

editors/editoria/src/Editoria.js

@@ -52,11 +52,6 @@ const Editoria = () => {
     key = 'editoriaMobile';
   }
 
-  console.log(JSON.stringify('["test"]'));
-  // console.log(
-  //   JSON.parse('[{"item":"custom-tag-label-1"}]'),
-  // );
-
   const EditoriaComponent = useMemo(
     () => (
       <>
@@ -71,7 +66,7 @@ const Editoria = () => {
           // value={demo}
           // readonly
           layout={layout}
-          onChange={source => console.log(source)}
+          // onChange={source => console.log(source)}
           user={user}
         />
       </>

wax-prosemirror-components/src/components/customtag/CustomTagInlineComponent.js

 import React, { useMemo, useState, useContext } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
+import styled from 'styled-components';
 
 import MenuButton from '../../ui/buttons/MenuButton';
 
+const StyledButton = styled(MenuButton)`
+  svg {
+    height: 15px;
+    width: 17px;
+  }
+`;
+
 const CustomTagInlineComponent = ({ view: { state }, item }) => {
   const { icon, title } = item;
   const localInline = JSON.parse(localStorage.getItem('isInline'));
@@ -27,7 +35,7 @@ const CustomTagInlineComponent = ({ view: { state }, item }) => {
 
   return useMemo(
     () => (
-      <MenuButton
+      <StyledButton
         active={isOpen}
         disabled={isDisabled}
         iconName={icon}
@@ -35,7 +43,7 @@ const CustomTagInlineComponent = ({ view: { state }, item }) => {
         title={title}
       />
     ),
-    [isOpen],
+    [isOpen, isDisabled],
   );
 };
 

wax-prosemirror-components/src/components/editingSuggesting/EditingSuggestingDropDown.js

@@ -76,9 +76,13 @@ const dropDownOptions = [
 ];
 
 const EditingSuggesting = ({ view: { dispatch, state }, item }) => {
-  const { app, activeView } = useContext(WaxContext);
+  const { app, activeView, view } = useContext(WaxContext);
   const isDisabled = app.config.get('config.EnableTrackChangeService').toggle;
 
+  const isEditable = view.main.props.editable(editable => {
+    return editable;
+  });
+
   const enableDisableTrackChanges = () => {
     app.config.get('config.EnableTrackChangeService').enabled = !app.config.get(
       'config.EnableTrackChangeService',
@@ -109,7 +113,7 @@ const EditingSuggesting = ({ view: { dispatch, state }, item }) => {
     [],
   );
 
-  if (app.config.get('readonly')) return <Viewing />;
+  if (!isEditable) return <Viewing />;
 
   return EditingSuggestingComponent;
 };

wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js

@@ -69,7 +69,7 @@ const FindAndReplaceTool = ({ view = {}, item }) => {
         />
 
         {isOpen && (
-          <DropWrapper style={style} ref={dropElement}>
+          <DropWrapper ref={dropElement} style={style}>
             <FindAndReplaceComponent
               close={() => {
                 setIsOpen(false);
@@ -79,7 +79,7 @@ const FindAndReplaceTool = ({ view = {}, item }) => {
         )}
       </Wrapper>
     ),
-    [isOpen, style],
+    [isOpen, style, isDisabled],
   );
 
   return MemorizedDropdown;

wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js

@@ -62,7 +62,7 @@ const SpecialCharactersTool = ({ view = {}, item }) => {
         )}
       </Wrapper>
     ),
-    [isOpen],
+    [isOpen, isDisabled],
   );
 
   return MemorizedDropdown;

wax-prosemirror-components/src/components/trackChanges/TrackChangeOptionsComponent.js

@@ -108,7 +108,7 @@ const AcceptRejectAllControls = styled.div`
   position: absolute;
   right: 207px;
   transform-origin: 50% 50% 0px;
-  width: 200px;
+  width: 209px;
   z-index: 9999;
 `;
 

wax-prosemirror-core/src/WaxView.js

-import React, { useRef, useContext, useCallback } from 'react';
+import React, { useRef, useContext, useCallback, useMemo } from 'react';
 
 import applyDevTools from 'prosemirror-dev-tools';
 import { EditorState } from 'prosemirror-state';
@@ -12,60 +12,61 @@ import transformPasted from './helpers/TransformPasted';
 
 export default props => {
   const { readonly, onBlur, options, debug, autoFocus, user } = props;
-
   const editorRef = useRef();
   let view;
   const context = useContext(WaxContext);
 
-  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,
-          scrollMargin: 200,
-          scrollThreshold: 200,
-          handleDOMEvents: {
-            blur: onBlur
-              ? view => {
-                  onBlur(view.state.doc.content);
-                }
-              : null,
+  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,
+            scrollMargin: 200,
+            scrollThreshold: 200,
+            handleDOMEvents: {
+              blur: onBlur
+                ? view => {
+                    onBlur(view.state.doc.content);
+                  }
+                : null,
+            },
+            transformPasted: slice => {
+              return transformPasted(slice, view);
+            },
+            attributes: {
+              spellcheck: 'false',
+            },
           },
-          transformPasted: slice => {
-            return transformPasted(slice, view);
-          },
-          attributes: {
-            spellcheck: 'false',
-          },
-        },
-      );
+        );
 
-      context.updateView(
-        {
-          main: view,
-        },
-        'main',
-      );
-      if (debug) applyDevTools(view);
-      if (autoFocus)
-        setTimeout(() => {
-          view.focus();
-        }, 1000);
+        context.updateView(
+          {
+            main: view,
+          },
+          'main',
+        );
+        if (debug) applyDevTools(view);
+        if (autoFocus)
+          setTimeout(() => {
+            view.focus();
+          }, 1000);
 
-      return () => view.destroy();
-    }
-    editorRef.current = node;
-  }, []);
+        return () => view.destroy();
+      }
+      editorRef.current = node;
+    },
+    [readonly],
+  );
 
   const dispatchTransaction = transaction => {
     const { TrackChange } = props;
@@ -94,7 +95,11 @@ export default props => {
   };
 
   const editor = <div ref={setEditorRef} />;
-  return props.children({
-    editor,
-  });
+  return useMemo(
+    () =>
+      props.children({
+        editor,
+      }),
+    [readonly],
+  );
 };