disable tools in readonly

wax-prosemirror-components/src/components/Button.js

@@ -14,6 +14,10 @@ const Button = ({ view = {}, item }) => {
 
   if (onlyOnMain) view = main;
 
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
   const { dispatch, state } = view;
 
   const handleMouseDown = (e, editorState, editorDispatch) => {
@@ -25,7 +29,8 @@ const Button = ({ view = {}, item }) => {
     active(state, activeViewId) && select(state, activeViewId)
   );
 
-  const isDisabled = !select(state, activeViewId, activeView);
+  let isDisabled = !select(state, activeViewId, activeView);
+  if (!isEditable) isDisabled = true;
 
   const MenuButtonComponent = useMemo(
     () => (

wax-prosemirror-components/src/components/ImageUpload.js

@@ -12,12 +12,20 @@ const Wrapper = styled.div`
 `;
 
 const ImageUpload = ({ item, fileUpload, view }) => {
-  const { activeViewId } = useContext(WaxContext);
+  const {
+    activeViewId,
+    view: { main },
+  } = useContext(WaxContext);
 
   const inputRef = useRef(null);
   const handleMouseDown = () => inputRef.current.click();
 
-  const isDisabled = !item.select(view.state, activeViewId);
+  let isDisabled = !item.select(view.state, activeViewId);
+
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+  if (!isEditable) isDisabled = true;
 
   const ImageUploadComponent = useMemo(
     () => (

wax-prosemirror-components/src/components/TitleButton.js

@@ -40,7 +40,12 @@ const TitleButton = ({ view = {}, item }) => {
   }, [JSON.stringify(titleNode[0])]);
 
   const isActive = !!active(state, activeViewId);
-  const isDisabled = !select(state, activeViewId, activeView);
+  let isDisabled = !select(state, activeViewId, activeView);
+
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+  if (!isEditable) isDisabled = true;
 
   const TitleButtonComponent = useMemo(
     () => (

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

-import React, { useRef, useMemo, useState, useLayoutEffect } from 'react';
+import React, {
+  useContext,
+  useRef,
+  useMemo,
+  useState,
+  useLayoutEffect,
+} from 'react';
 
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
+import { WaxContext } from 'wax-prosemirror-core';
 
 import MenuButton from '../../ui/buttons/MenuButton';
 import FindAndReplaceComponent from './FindAndReplaceComponent';
@@ -13,13 +20,17 @@ const Wrapper = styled.div`
 `;
 
 const DropWrapper = styled.div`
+  background: white;
   margin-top: ${grid(1)};
   position: absolute;
-  background: white;
   top: 32px;
 `;
 
 const FindAndReplaceTool = ({ view = {}, item }) => {
+  const {
+    view: { main },
+  } = useContext(WaxContext);
+
   const { icon, title } = item;
   const dropElement = useRef();
   const [isOpen, setIsOpen] = useState(false);
@@ -27,6 +38,12 @@ const FindAndReplaceTool = ({ view = {}, item }) => {
   let styles = { right: '-205px' };
   const [style, setStyle] = useState(styles);
 
+  let isDisabled = false;
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+  if (!isEditable) isDisabled = true;
+
   useLayoutEffect(() => {
     setStyle(styles);
     if (!dropElement.current) return;
@@ -43,7 +60,7 @@ const FindAndReplaceTool = ({ view = {}, item }) => {
       <Wrapper>
         <MenuButton
           active={isOpen}
-          disabled={false}
+          disabled={isDisabled}
           iconName={icon}
           onMouseDown={() => {
             setIsOpen(!isOpen);

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

-import React, { useMemo, useState, useRef } from 'react';
+import React, { useContext, useMemo, useState, useRef } from 'react';
 
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
+import { WaxContext } from 'wax-prosemirror-core';
 
 import MenuButton from '../../ui/buttons/MenuButton';
 import SpecialCharactersComponent from './SpecialCharactersComponent';
@@ -14,25 +15,35 @@ const Wrapper = styled.div`
 `;
 
 const DropWrapper = styled.div`
+  background: white;
   margin-top: ${grid(1)};
   position: absolute;
-  background: white;
   top: 32px;
 `;
 
 const SpecialCharactersTool = ({ view = {}, item }) => {
+  const {
+    view: { main },
+  } = useContext(WaxContext);
+
   const { icon, title } = item;
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef();
 
   useOnClickOutside(ref, () => setIsOpen(false));
 
+  let isDisabled = false;
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+  if (!isEditable) isDisabled = true;
+
   const MemorizedDropdown = useMemo(
     () => (
       <Wrapper ref={ref}>
         <MenuButton
           active={isOpen}
-          disabled={false}
+          disabled={isDisabled}
           iconName={icon}
           onMouseDown={() => {
             setIsOpen(!isOpen);

wax-prosemirror-components/src/components/tables/CreateTable.js

@@ -16,9 +16,9 @@ const Wrapper = styled.div`
 `;
 
 const DropWrapper = styled.div`
+  background: white;
   margin-top: ${grid(1)};
   position: absolute;
-  background: white;
 `;
 
 const CreateTable = ({ view = {}, item }) => {
@@ -46,7 +46,12 @@ const CreateTable = ({ view = {}, item }) => {
     setIsOpen(!isOpen);
   };
 
-  const isDisabled = !select(state, activeViewId);
+  let isDisabled = !select(state, activeViewId);
+
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+  if (!isEditable) isDisabled = true;
 
   useOnClickOutside(ref, () => setIsOpen(false));
 

wax-prosemirror-services/src/NoteService/Editor.js

@@ -18,12 +18,17 @@ export default ({ node, view }) => {
   const context = useContext(WaxContext);
   const noteId = node.attrs.id;
   let noteView;
-  let updateMainView = true;
+
+  // eslint-disable-next-line react/destructuring-assignment
+  const isEditable = context.view.main.props.editable(editable => {
+    return editable;
+  });
 
   useEffect(() => {
     noteView = new EditorView(
       { mount: editorRef.current },
       {
+        editable: () => isEditable,
         state: EditorState.create({
           doc: node,
           plugins: [keymap(createKeyBindings()), ...context.app.getPlugins()],