fix select when on notes surface

.eslintrc.js

@@ -22,7 +22,8 @@ eslint.parserOptions = {
 };
 
 eslint.rules = {
-  'sort-keys': 'off',
+  'class-methods-use-this': [1, { exceptMethods: ['run', 'enable', 'active'] }],
+  // 'import/no-named-as-default': 0,
   'import/no-extraneous-dependencies': [
     'error',
     {
@@ -30,8 +31,6 @@ eslint.rules = {
     },
   ],
   'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
-  'class-methods-use-this': [1, { exceptMethods: ['run', 'enable', 'active'] }],
-
   'react/prop-types': [
     2,
     {
@@ -45,7 +44,7 @@ eslint.rules = {
       ],
     },
   ],
-  // 'import/no-named-as-default': 0,
+  'sort-keys': 'off',
 };
 
 module.exports = eslint;

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

 import React, { useContext } from 'react';
-// import styled from 'styled-components';
-// import { ButtonStyles } from 'wax-prosemirror-themes';
 import { WaxContext } from 'wax-prosemirror-core';
 import MenuButton from '../ui/buttons/MenuButton';
 
-// const ButtonStyled = styled.button`
-//   ${ButtonStyles};
-//   opacity: ${props => (props.select ? 1 : 0.4)};
-//   pointer-events: ${props => (props.select ? 'default' : 'none')};
-//   color: ${props => (props.isActive ? 'white' : props.theme.colorButton)};
-//   background-color: ${props =>
-//     props.isActive ? props.theme.colorPrimary : 'transparent'};
-//   &:hover {
-//     background-color: ${props =>
-//       props.isActive ? props.theme.colorPrimary : 'transparent'};
-//   }
-// `;
-
 const Button = ({ view = {}, item }) => {
   const { active, enable, icon, label, onlyOnMain, run, select, title } = item;
 
@@ -37,7 +22,7 @@ const Button = ({ view = {}, item }) => {
   const isActive = active && active(state);
 
   const isDisabled =
-    enable && !enable(state) && select && select(view.state, activeViewId);
+    enable && !enable(state) && !(select && select(view.state, activeViewId));
 
   return (
     <MenuButton

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

@@ -5,19 +5,12 @@ import styled from 'styled-components';
 
 import MenuButton from '../ui/buttons/MenuButton';
 
-const UploadImage = styled.div`
-  /* opacity: ${props => (props.select ? 1 : 0.4)};
-  pointer-events: ${props => (props.select ? 'default' : 'none')};
-  display: inline-flex;
-  padding: 0px 10px; */
-
+const Wrapper = styled.div`
   input {
     display: none;
   }
 `;
 
-// TO DO -- select should be done with MenuButton's disabled prop
-
 const ImageUpload = ({ item, fileUpload, view }) => {
   const { activeViewId } = useContext(WaxContext);
 
@@ -25,7 +18,7 @@ const ImageUpload = ({ item, fileUpload, view }) => {
   const handleMouseDown = () => inputRef.current.click();
 
   return (
-    <UploadImage>
+    <Wrapper>
       <label htmlFor="file-upload">
         <MenuButton
           active={false}
@@ -42,7 +35,7 @@ const ImageUpload = ({ item, fileUpload, view }) => {
           type="file"
         />
       </label>
-    </UploadImage>
+    </Wrapper>
   );
 };
 export default ImageUpload;

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

-/* eslint react/prop-types: 0 */
 import React, { useState, useContext } from 'react';
-// import styled from 'styled-components';
-// import { ButtonStyles } from 'wax-prosemirror-themes';
 import { WaxContext } from 'wax-prosemirror-core';
 
 import Dropdown from '../../ui/buttons/Dropdown';
 import InsertTableTool from '../../ui/tables/InsertTableTool';
 
-// const ButtonStyled = styled.button`
-//   ${ButtonStyles};
-//   opacity: ${props => (props.select ? 1 : 0.4)};
-//   pointer-events: ${props => (props.select ? 'default' : 'none')};
-//   color: ${props => (props.isActive ? 'white' : props.theme.colorButton)};
-//   background-color: ${props =>
-//     props.isActive ? props.theme.colorPrimary : 'transparent'};
-//   &:hover {
-//     background-color: ${props =>
-//       props.isActive ? props.theme.colorPrimary : 'transparent'};
-//   }
-// `;
-
-// const InsertTableToolContainer = styled.div`
-//   display: block !important;
-//   height: auto;
-//   top: 53px;
-//   left: 556px;
-//   position: absolute;
-// `;
-
 const CreateTable = ({ view = {}, item }) => {
   const {
     view: { main },
-    // activeViewId,
+    activeViewId,
   } = useContext(WaxContext);
   if (item.onlyOnMain) {
     view = main;
   }
 
+  const [showTool, setShowTool] = useState(false);
+  const toggleShowTool = () => setShowTool(!showTool);
+
   const { state, dispatch } = view;
-  const [isTableToolDisplayed, setTableToolDisplay] = useState(false);
+  const { enable, icon, run, select, title } = item;
+
+  const dropComponent = (
+    <InsertTableTool
+      onGridSelect={colRows => {
+        run(colRows, state, dispatch);
+      }}
+    />
+  );
 
-  // const CreateButton = (
-  //   <ButtonStyled
-  //     type="button"
-  //     isActive={isTableToolDisplayed}
-  //     title={item.title}
-  //     disabled={item.enable && !item.enable(view.state)}
-  //     onMouseDown={e => {
-  //       e.preventDefault();
-  //       setTableToolDisplay(!isTableToolDisplayed);
-  //     }}
-  //     select={item.select && item.select(view.state, activeViewId)}
-  //   >
-  //     {item.content}
-  //   </ButtonStyled>
-  // );
-  // return isTableToolDisplayed ? (
-  //   <>
-  //     {CreateButton}
-  //     <InsertTableToolContainer>
-  //       <InsertTableTool
-  //         onGridSelect={colRows => {
-  //           item.run(colRows, state, dispatch);
-  //         }}
-  //       />
-  //     </InsertTableToolContainer>
-  //   </>
-  // ) : (
-  //   <>{CreateButton}</>
-  // );
+  const isDisabled =
+    enable && !enable(state) && !(select && select(state, activeViewId));
 
-  // select pending
   return (
     <Dropdown
-      active={isTableToolDisplayed}
-      dropComponent={
-        <InsertTableTool
-          onGridSelect={colRows => {
-            item.run(colRows, state, dispatch);
-          }}
-        />
-      }
-      iconName={item.icon}
-      disabled={item.enable && !item.enable(view.state)}
-      onClick={() => setTableToolDisplay(!isTableToolDisplayed)}
-      title={item.title}
+      active={showTool}
+      dropComponent={dropComponent}
+      iconName={icon}
+      disabled={isDisabled}
+      onClick={toggleShowTool}
+      title={title}
     />
   );
 };

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

@@ -17,7 +17,7 @@ const DropWrapper = styled.div`
 `;
 
 const Dropdown = props => {
-  const { className, dropComponent, iconName, label, title } = props;
+  const { className, disabled, dropComponent, iconName, label, title } = props;
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -27,6 +27,7 @@ const Dropdown = props => {
     <Wrapper className={className}>
       <MenuButton
         active={isOpen}
+        disabled={disabled}
         iconName={iconName}
         label={label}
         onMouseDown={() => setIsOpen(!isOpen)}
@@ -39,6 +40,7 @@ const Dropdown = props => {
 };
 
 Dropdown.propTypes = {
+  disabled: PropTypes.bool,
   dropComponent: PropTypes.node.isRequired,
   iconName: PropTypes.string,
   label: PropTypes.string,
@@ -46,6 +48,7 @@ Dropdown.propTypes = {
 };
 
 Dropdown.defaultProps = {
+  disabled: false,
   iconName: null,
   label: null,
   title: null,

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

@@ -36,7 +36,7 @@ class Note extends Tools {
 
   get enable() {
     return state => {
-      return true;
+      return false;
     };
   }
 }

wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js

@@ -33,13 +33,10 @@ class DisplayText extends ToolGroup {
       icon: 'title',
       component: (
         <BlockLevelTools
-          groups={this._toolGroups[0].groups.map(group => {
-            console.log(group);
-            return {
-              groupName: group.title.props.title,
-              items: group._tools,
-            };
-          })}
+          groups={this._toolGroups[0].groups.map(group => ({
+            groupName: group.title.props.title,
+            items: group._tools,
+          }))}
           view={view}
         />
       ),