execute command

editors/editoria/src/layout/EditoriaLayout.js

@@ -127,7 +127,7 @@ const CommentTrackToolsContainer = styled.div`
   position: fixed;
   padding-top: 5px;
   right: 30px;
-  z-index: 2;
+  z-index: 1;
   background: white;
   padding-left: 5%;
 `;

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

-import React from "react";
-import styled from "styled-components";
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import styled from 'styled-components';
+
 const OverlayContainer = styled.div`
-  position: ${props => props.position.position};
   left: ${props => `${props.position.left}px`};
+  position: ${props => props.position.position};
   top: ${props => `${props.position.top}px`};
-  z-index: 999;
+  // z-index: 999;
 `;
 
 const Overlay = props => (

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

@@ -107,6 +107,7 @@ const AcceptRejectAllControls = styled.div`
   right: 207px;
   transform-origin: 50% 50% 0px;
   width: 200px;
+  z-index: 9999;
 `;
 
 const AcceptRejectAllRow = styled.div`
@@ -168,38 +169,51 @@ const getComments = main => {
   return comments;
 };
 
-const renderTools = menuItems => {
-  const tools = [];
-  tools.push(
-    menuItems.map((menuItem, index) => {
-      return (
-        <MenuButton
-          iconName={menuItem.icon}
-          key={menuItem.name}
-          label={menuItem.label}
-        />
-      );
-    }),
-  );
-  return <>{tools}</>;
-};
-
 const TrackChangeOptionsComponent = ({ groups }) => {
   const [isShownTrack, setIsShownTrack] = useState(false);
 
   const menuItems = groups[0].items;
-  const { view } = useContext(WaxContext);
+  const { view, activeView, activeViewId } = useContext(WaxContext);
+  const { dispatch, state } = view;
 
   const inlineTracks = getInlineTracks(view.main).length;
   const blockTracks = getTrackBlockNodes(view.main).length;
   const comments = getComments(view.main).length;
 
+  const renderTools = () => {
+    const tools = [];
+    tools.push(
+      menuItems.map((menuItem, index) => {
+        const isActive = !!(
+          menuItem.active(state, activeViewId) &&
+          menuItem.select(state, activeViewId)
+        );
+
+        const isDisabled = !menuItem.select(state, activeViewId, activeView);
+        return (
+          <MenuButton
+            active={isActive || false}
+            disabled={isDisabled}
+            iconName={menuItem.icon}
+            key={menuItem.name}
+            label={menuItem.label}
+            onMouseDown={e => {
+              e.preventDefault();
+              menuItem.run(activeView.state, activeView.dispatch);
+            }}
+          />
+        );
+      }),
+    );
+    return <>{tools}</>;
+  };
+
   return (
     <Wrapper>
       <TotalSuggestions>
         {inlineTracks + blockTracks} SUGGESTIONS
       </TotalSuggestions>
-      <ToolsContainer>{renderTools(menuItems)}</ToolsContainer>
+      <ToolsContainer>{renderTools()}</ToolsContainer>
       <AcceptRejectAll
         onMouseEnter={() => setIsShownTrack(true)}
         onMouseLeave={() => setIsShownTrack(false)}

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

@@ -27,7 +27,7 @@ const TrackChangeOptionsTool = ({ view = {}, item, groups }) => {
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef();
 
-  useOnClickOutside(ref, () => setIsOpen(false));
+  // useOnClickOutside(ref, () => setIsOpen(false));
 
   const MemorizedDropdown = useMemo(
     () => (

wax-prosemirror-components/src/ui/buttons/MenuButton.js

@@ -46,6 +46,7 @@ const Wrapper = styled.button.attrs(props => ({
   outline: none;
   padding: 2px;
   transition: all 0.1s ease-in;
+  user-select: none;
 
   > svg {
     transition: all 0.1s ease-in;

wax-prosemirror-services/src/OverlayService/OverlayComponent.js

-import React, { useMemo } from "react";
-import usePosition from "./usePosition";
-import { Overlay } from "wax-prosemirror-components";
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { useMemo } from 'react';
+import { Overlay } from 'wax-prosemirror-components';
+import usePosition from './usePosition';
 
 export default (Component, markType) => props => {
   const [position, setPosition, mark] = usePosition(markType);
   const component = useMemo(
     () => (
       <Component
-        setPosition={setPosition}
         mark={mark}
         position={position}
+        setPosition={setPosition}
         {...props}
       />
     ),
-    [JSON.stringify(mark), position]
+    [JSON.stringify(mark), position],
   );
-  const visible = position.left ? true : false;
+  const visible = !!position.left;
 
   return <Overlay position={position}>{visible && component}</Overlay>;
 };