diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index fa52e35509b57dc1e5f1d06514566f8cc480bbe7..977ed5cc4dbf7c694157ede01a713d4b2f5b983e 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -54,7 +54,7 @@ const Editors = () => {
       case 'ncbi':
         break;
       default:
-        return <Editoria />;
+        return <HHMI />;
     }
   };
 
diff --git a/editors/demo/src/HHMI/layout/EditorElements.js b/editors/demo/src/HHMI/layout/EditorElements.js
index 7e0e894ff59a977546d76200083340125b8f694b..4cdf400b1e260b538e07444beb6278bf5f8b4f7a 100644
--- a/editors/demo/src/HHMI/layout/EditorElements.js
+++ b/editors/demo/src/HHMI/layout/EditorElements.js
@@ -45,27 +45,10 @@ export default css`
   }
 
   div[contenteditable='false'] {
-    // pointer-events: none;
-    // user-select: none;
-  }
-
-  /* .ProseMirror title {
-    display: inline;
-    font-size: 14px;
-  } */
-
-  hr {
-    border: none;
-    margin: 1em 0;
-    padding: 2px 10px;
-  }
-
-  hr:after {
-    background-color: silver;
-    content: '';
-    display: block;
-    height: 1px;
-    line-height: 2px;
+    math-display {
+      pointer-events: none;
+      user-select: none;
+    }
   }
 
   ul,
diff --git a/wax-prosemirror-components/src/components/textHighlight/TextHighlightingTool.js b/wax-prosemirror-components/src/components/textHighlight/TextHighlightingTool.js
index 21c013352fa477ab982c684a106bd392efe05568..1b9d641d1ba7da9077817d5d947d1d3aecebb8d3 100644
--- a/wax-prosemirror-components/src/components/textHighlight/TextHighlightingTool.js
+++ b/wax-prosemirror-components/src/components/textHighlight/TextHighlightingTool.js
@@ -31,12 +31,12 @@ const TextHighlightComponent = styled.div`
   flex-direction: column;
 `;
 const Highlighter = styled.div`
-  min-width: 25px;
+  border: 1px solid gray;
+  cursor: pointer;
+  display: inline-grid;
   height: 25px;
   margin: 5px;
-  display: inline-grid;
-  cursor: pointer;
-  border: 1px solid gray;
+  min-width: 25px;
 `;
 
 const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
@@ -56,7 +56,10 @@ const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
   ];
 
   const ref = useRef();
-  const { activeViewId, activeView } = useContext(WaxContext);
+  const { activeViewId, activeView, view } = useContext(WaxContext);
+  const isEditable = view.main.props.editable(editable => {
+    return editable;
+  });
 
   useOnClickOutside(ref, () => setIsOpen(false));
 
@@ -94,7 +97,8 @@ const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
     item.run(state, dispatch, color);
   };
 
-  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/transformCase/TransformCaseComponent.js b/wax-prosemirror-components/src/components/transformCase/TransformCaseComponent.js
index 16bfc266eb13656426930bd3b574bee7c7266926..5a9c9c35ce9c99db92e7bd4bcf3b12be32558fb1 100644
--- a/wax-prosemirror-components/src/components/transformCase/TransformCaseComponent.js
+++ b/wax-prosemirror-components/src/components/transformCase/TransformCaseComponent.js
@@ -43,8 +43,12 @@ const TransformCaseComponent = ({ view: { state }, item }) => {
   const { icon, title, select } = item;
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef();
-  const { activeViewId, activeView } = useContext(WaxContext);
-  const isDisabled = !select(state, activeViewId, activeView);
+  const { activeViewId, activeView, view } = useContext(WaxContext);
+  const isEditable = view.main.props.editable(editable => {
+    return editable;
+  });
+  let isDisabled = !select(state, activeViewId, activeView);
+  if (!isEditable) isDisabled = true;
 
   useOnClickOutside(ref, () => setIsOpen(false));