diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
index 8296fabc1ecb86370dd6387b55fc54dc80867a43..33790dab265236c5be42701637a98896dcbfe0a6 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
@@ -1,6 +1,63 @@
-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;
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index 31b2ec3821afb9b71e4b82f2ff0f9350016a3b39..f88c45dc8ecf97e2ee5ad549753edf2eae85c613 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -1,12 +1,13 @@
/* 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;
diff --git a/wax-prosemirror-components/src/ui/comments/DateParser.js b/wax-prosemirror-components/src/helpers/DateParser.js
similarity index 100%
rename from wax-prosemirror-components/src/ui/comments/DateParser.js
rename to wax-prosemirror-components/src/helpers/DateParser.js
diff --git a/wax-prosemirror-components/src/helpers/useOnClickOutside.js b/wax-prosemirror-components/src/helpers/useOnClickOutside.js
new file mode 100644
index 0000000000000000000000000000000000000000..25dffb0b9611c8214b26e0949efdf18f33336967
--- /dev/null
+++ b/wax-prosemirror-components/src/helpers/useOnClickOutside.js
@@ -0,0 +1,25 @@
+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;
diff --git a/wax-prosemirror-components/src/icons/icons.js b/wax-prosemirror-components/src/icons/icons.js
index 016facfe09198740296c882322f00dc13ead8f27..061b56b580216f3f83d80f370b3f07efa6a537bd 100644
--- a/wax-prosemirror-components/src/icons/icons.js
+++ b/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>
+ ),
};
diff --git a/wax-prosemirror-components/src/ui/comments/CommentItem.js b/wax-prosemirror-components/src/ui/comments/CommentItem.js
index 0baeb8c2ebf37d5373ba13d32722709a3b9fda02..3afd06ba8351aa8cbed0d70c6d12c5181924e533 100644
--- a/wax-prosemirror-components/src/ui/comments/CommentItem.js
+++ b/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``;
diff --git a/wax-prosemirror-services/src/FindAndReplaceService/FindAndReplace.js b/wax-prosemirror-services/src/FindAndReplaceService/FindAndReplace.js
index 0b4c557e926a94c16fbc5a9f6e3218f189d6b58d..87472e990d410b335e3639fbe07ef34c4bb9845b 100644
--- a/wax-prosemirror-services/src/FindAndReplaceService/FindAndReplace.js
+++ b/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() {