diff --git a/wax-prosemirror-components/src/components/Button.js b/wax-prosemirror-components/src/components/Button.js
index 7694bfb36d8fe8462565cc402ef02c57a221181e..d45d543c5abbdf6325c5c5a98a4fb10b911deb71 100644
--- a/wax-prosemirror-components/src/components/Button.js
+++ b/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(
     () => (
diff --git a/wax-prosemirror-components/src/components/ImageUpload.js b/wax-prosemirror-components/src/components/ImageUpload.js
index 8a0be50407b680f36e518ff3d24c7095991b50f9..0ac2a71986dcd3b30d299dfc3204487ef5b97631 100644
--- a/wax-prosemirror-components/src/components/ImageUpload.js
+++ b/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(
     () => (
diff --git a/wax-prosemirror-components/src/components/TitleButton.js b/wax-prosemirror-components/src/components/TitleButton.js
index 2fc82591b8e805119082583b80b89d18dbfeab1e..3eb7c9f26d64f2b10e186e3eb6389ad4036dc959 100644
--- a/wax-prosemirror-components/src/components/TitleButton.js
+++ b/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(
     () => (
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
index 4936b7cb54d0c3ffd5256fc5067c7e0498697ff9..0d843993ad1ebb507a890afd87e69d0a974c7f9c 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
@@ -1,7 +1,14 @@
-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);
diff --git a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js
index ff6bbc9d409a243999ac791ca966306e329fe361..4576c95337ed4353b835a4560a9dc1c27fab3e72 100644
--- a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js
+++ b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersTool.js
@@ -1,7 +1,8 @@
-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);
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index 032de1c8bedac63f55e3a63cb11f1121704a84af..6dcac6066f7f1c8236502ad3ed23029b8dc25424 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/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));
 
diff --git a/wax-prosemirror-services/src/NoteService/Editor.js b/wax-prosemirror-services/src/NoteService/Editor.js
index 8051a106f8caf0d3be08fc9143bd47d7a2621ebd..482346d3851c7acc01300de515849d7d2b00edba 100644
--- a/wax-prosemirror-services/src/NoteService/Editor.js
+++ b/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()],