disabled tools

editors/demo/src/Editors.js

@@ -54,7 +54,7 @@ const Editors = () => {
       case 'ncbi':
         break;
       default:
-        return <Editoria />;
+        return <HHMI />;
     }
   };
 

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,

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(
     () => (

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));