find and replace tool button and create component helpers

wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js

-import React from 'react';
+import React, { useEffect, useRef, useMemo, useContext, useState } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
 import styled from 'styled-components';
+import { grid } from '@pubsweet/ui-toolkit';
 
-export default () => {
-  return <span>Find</span>;
+import MenuButton from '../../ui/buttons/MenuButton';
+
+const CreateTable = ({ view = {}, item }) => {
+  const {
+    view: { main },
+    activeViewId,
+  } = useContext(WaxContext);
+  if (item.onlyOnMain) {
+    view = main;
+  }
+
+  const Wrapper = styled.div`
+    font-size: 0;
+    position: relative;
+    z-index: 2;
+  `;
+
+  const DropWrapper = styled.div`
+    margin-top: ${grid(1)};
+    position: absolute;
+    background: white;
+  `;
+
+  const { state } = view;
+  const { enable, icon, run, select, title } = item;
+  const ref = useRef();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const dropComponent = <div> find and replace</div>;
+
+  // const isDisabled =
+  //   enable && !enable(state) && !(select && select(state, activeViewId));
+  //
+  // useOnClickOutside(ref, () => setIsOpen(false));
+
+  const MemorizedDropdown = useMemo(
+    () => (
+      <Wrapper ref={ref}>
+        <MenuButton
+          active={isOpen}
+          // disabled={isDisabled}
+          iconName={icon}
+          onMouseDown={() => {
+            setIsOpen(!isOpen);
+          }}
+          title={title}
+        />
+
+        {isOpen && <DropWrapper>{dropComponent}</DropWrapper>}
+      </Wrapper>
+    ),
+    [isOpen],
+  );
+
+  return MemorizedDropdown;
 };
+
+export default CreateTable;

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

 /* eslint react/prop-types: 0 */
 
-import React, { useState, useContext, useMemo, useEffect, useRef } from 'react';
+import React, { useState, useContext, useMemo, useRef } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
 
 import MenuButton from '../../ui/buttons/MenuButton';
 import InsertTableTool from '../../ui/tables/InsertTableTool';
+import useOnClickOutside from '../../helpers/useOnClickOutside';
 
 const Wrapper = styled.div`
   font-size: 0;
@@ -72,25 +73,4 @@ const CreateTable = ({ view = {}, item }) => {
   return MemorizedDropdown;
 };
 
-// Hook
-const useOnClickOutside = (ref, handler) => {
-  useEffect(() => {
-    const listener = event => {
-      /* Do nothing if clicking ref's element or descendent elements */
-      if (!ref.current || ref.current.contains(event.target)) {
-        return;
-      }
-
-      handler(event);
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-
-    return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, handler]);
-};
 export default CreateTable;

wax-prosemirror-components/src/helpers/useOnClickOutside.js

+import { useEffect } from 'react';
+
+// Hook
+const useOnClickOutside = (ref, handler) => {
+  useEffect(() => {
+    const listener = event => {
+      /* Do nothing if clicking ref's element or descendent elements */
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+};
+
+export default useOnClickOutside;

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

@@ -218,4 +218,10 @@ export default {
       <path d="M5 4v3h5.5v12h3V7H19V4z" />
     </Svg>
   ),
+  findAndReplace: ({ className }) => (
+    <Svg className={className} viewBox="0 0 24 24" fill="none">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M11 6c1.38 0 2.63.56 3.54 1.46L12 10h6V4l-2.05 2.05C14.68 4.78 12.93 4 11 4c-3.53 0-6.43 2.61-6.92 6H6.1c.46-2.28 2.48-4 4.9-4zm5.64 9.14c.66-.9 1.12-1.97 1.28-3.14H15.9c-.46 2.28-2.48 4-4.9 4-1.38 0-2.63-.56-3.54-1.46L10 12H4v6l2.05-2.05C7.32 17.22 9.07 18 11 18c1.55 0 2.98-.51 4.14-1.36L20 21.49 21.49 20l-4.85-4.86z" />
+    </Svg>
+  ),
 };

wax-prosemirror-components/src/ui/comments/CommentItem.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import { grid, th } from '@pubsweet/ui-toolkit';
-import DateParser from './DateParser';
+import DateParser from '../../helpers/DateParser';
 
 const Wrapper = styled.div``;
 

wax-prosemirror-services/src/FindAndReplaceService/FindAndReplace.js

@@ -9,7 +9,7 @@ export default
 @injectable()
 class FindAndReplace extends Tools {
   title = 'Find And Replace';
-  icon = 'find';
+  icon = 'findAndReplace';
   name = 'find';
 
   get run() {