diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index 60fea30e76beb439f8808970e5f2bafdd6efa318..035796f961edca2a9de90e9da1d5b10b4062acab 100644
--- a/wax-prosemirror-components/index.js
+++ b/wax-prosemirror-components/index.js
@@ -18,6 +18,3 @@ export { default as EditingSuggestingDropDown } from './src/components/editingSu
 export { default as CustomTagInlineComponent } from './src/components/customtag/CustomTagInlineComponent';
 export { default as CustomTagInlineOverlayComponent } from './src/components/customtag/CustomTagInlineOverlayCompoment';
 export { default as CustomTagBlockComponent } from './src/components/customtag/CustomTagBlockComponent';
-
-export { default as useDebounce } from './src/helpers/useDebounce';
-export { default as useOnClickOutside } from './src/helpers/useOnClickOutside';
diff --git a/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js b/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js
index 79212d0eec0c1cda325e62c62fab75527b6f79bf..d78734e93f2444d72baf4d7b0ef6d09f5198c710 100644
--- a/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js
+++ b/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js
@@ -9,9 +9,12 @@ import React, {
 import styled from 'styled-components';
 import { grid, override } from '@pubsweet/ui-toolkit';
 import { v4 as uuidv4 } from 'uuid';
-import { WaxContext, DocumentHelpers } from 'wax-prosemirror-core';
+import {
+  WaxContext,
+  DocumentHelpers,
+  useOnClickOutside,
+} from 'wax-prosemirror-core';
 import MenuButton from '../../../ui/buttons/MenuButton';
-import useOnClickOutside from '../../../helpers/useOnClickOutside';
 
 const Wrapper = styled.div`
   font-size: 0;
diff --git a/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js b/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js
index 82561c4093dfd904306a4e82f9129a20d563d121..450a939c2792bf1e4bd97ba9aeb9161cf8fe5cfc 100644
--- a/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js
+++ b/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
 import { v4 as uuidv4 } from 'uuid';
 import MenuButton from '../../ui/buttons/MenuButton';
-import useOnClickOutside from '../../helpers/useOnClickOutside';
+import { useOnClickOutside } from 'wax-prosemirror-core';
 
 const Wrapper = styled.div`
   font-size: 0;
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index 235e4d29f76a7254b33da57f2559b3a2bf36bcd0..8d16978214cd2ec6b81a2de687b6afd326a02f4b 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -1,11 +1,10 @@
 /* eslint react/prop-types: 0 */
 import React, { useState, useContext, useMemo, useRef } from 'react';
-import { WaxContext } from 'wax-prosemirror-core';
+import { WaxContext, useOnClickOutside } 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;
diff --git a/wax-prosemirror-core/index.js b/wax-prosemirror-core/index.js
index 0d0eab3ffe11d0e05cb73c764b163b6afa58275a..6606b1c41254cdb02cb3d32ca06f149203201d2b 100644
--- a/wax-prosemirror-core/index.js
+++ b/wax-prosemirror-core/index.js
@@ -37,3 +37,5 @@ export { default as LeftMenuTitle } from './src/components/LeftMenuTitle';
 export { default as LeftSideButton } from './src/components/LeftSideButton';
 export { default as ReactDropDownStyles } from './src/components/helpers/ReactDropDownStyles';
 export { default as DateParser } from './src/components/helpers/DateParser';
+export { default as useDebounce } from './src/components/helpers/useDebounce';
+export { default as useOnClickOutside } from './src/components/helpers/useOnClickOutside';
diff --git a/wax-prosemirror-components/src/helpers/useDebounce.js b/wax-prosemirror-core/src/components/helpers/useDebounce.js
similarity index 100%
rename from wax-prosemirror-components/src/helpers/useDebounce.js
rename to wax-prosemirror-core/src/components/helpers/useDebounce.js
diff --git a/wax-prosemirror-core/src/components/helpers/useOnClickOutside.js b/wax-prosemirror-core/src/components/helpers/useOnClickOutside.js
new file mode 100644
index 0000000000000000000000000000000000000000..25dffb0b9611c8214b26e0949efdf18f33336967
--- /dev/null
+++ b/wax-prosemirror-core/src/components/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-services/src/FindAndReplaceService/components/ExpandedFindAndReplaceComponent.js b/wax-prosemirror-services/src/FindAndReplaceService/components/ExpandedFindAndReplaceComponent.js
index c17097f27d3070553f1de5a3e4f529324ec1794f..cb595f6b9e350cc17043a73d0b24960d129f907c 100644
--- a/wax-prosemirror-services/src/FindAndReplaceService/components/ExpandedFindAndReplaceComponent.js
+++ b/wax-prosemirror-services/src/FindAndReplaceService/components/ExpandedFindAndReplaceComponent.js
@@ -1,10 +1,10 @@
 /* eslint react/prop-types: 0 */
 import React, { useState, useRef, useContext, useEffect } from 'react';
 import { each, eachRight } from 'lodash';
-import { WaxContext, DocumentHelpers } from 'wax-prosemirror-core';
+import { WaxContext, DocumentHelpers, useDebounce } from 'wax-prosemirror-core';
 import styled from 'styled-components';
 import { grid, th } from '@pubsweet/ui-toolkit';
-import { Icon, useDebounce } from 'wax-prosemirror-components';
+import { Icon } from 'wax-prosemirror-components';
 import CheckBox from './CheckBox';
 import helpers from './helpers';
 
diff --git a/wax-prosemirror-services/src/FindAndReplaceService/components/FindComponent.js b/wax-prosemirror-services/src/FindAndReplaceService/components/FindComponent.js
index 21bc44244af9ca56083b5b5c3c9dcf5f89cfd1cb..b85cce349e67659771f194930d5ad9519283a2ab 100644
--- a/wax-prosemirror-services/src/FindAndReplaceService/components/FindComponent.js
+++ b/wax-prosemirror-services/src/FindAndReplaceService/components/FindComponent.js
@@ -4,8 +4,8 @@ import React, { useState, useRef, useContext, useEffect } from 'react';
 import { each, eachRight } from 'lodash';
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
-import { WaxContext } from 'wax-prosemirror-core';
-import { Icon, useDebounce } from 'wax-prosemirror-components';
+import { WaxContext, useDebounce } from 'wax-prosemirror-core';
+import { Icon } from 'wax-prosemirror-components';
 import helpers from './helpers';
 
 const Wrapper = styled.div`
diff --git a/wax-prosemirror-services/src/HighlightService/components/TextHighlightingTool.js b/wax-prosemirror-services/src/HighlightService/components/TextHighlightingTool.js
index 8d210207fefcc7c271401cec8774e2d27495751f..9fc8af8286128118128baf1ef59f11322c9507d7 100644
--- a/wax-prosemirror-services/src/HighlightService/components/TextHighlightingTool.js
+++ b/wax-prosemirror-services/src/HighlightService/components/TextHighlightingTool.js
@@ -2,8 +2,8 @@ import React, { useMemo, useState, useRef, useContext } from 'react';
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
 import { v4 as uuidv4 } from 'uuid';
-import { WaxContext } from 'wax-prosemirror-core';
-import { MenuButton, useOnClickOutside } from 'wax-prosemirror-components';
+import { WaxContext, useOnClickOutside } from 'wax-prosemirror-core';
+import { MenuButton } from 'wax-prosemirror-components';
 
 const Wrapper = styled.div`
   font-size: 0;
diff --git a/wax-prosemirror-services/src/SpecialCharactersService/components/SpecialCharactersTool.js b/wax-prosemirror-services/src/SpecialCharactersService/components/SpecialCharactersTool.js
index 8d50498535058c542cb96697d5fe7c965ecd090f..eb5d3172a8db0f077f2cd6c7fe8507047f3a044d 100644
--- a/wax-prosemirror-services/src/SpecialCharactersService/components/SpecialCharactersTool.js
+++ b/wax-prosemirror-services/src/SpecialCharactersService/components/SpecialCharactersTool.js
@@ -1,8 +1,8 @@
 import React, { useContext, useMemo, useState, useRef } from 'react';
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
-import { WaxContext } from 'wax-prosemirror-core';
-import { MenuButton, useOnClickOutside } from 'wax-prosemirror-components';
+import { WaxContext, useOnClickOutside } from 'wax-prosemirror-core';
+import { MenuButton } from 'wax-prosemirror-components';
 import SpecialCharactersComponent from './SpecialCharactersComponent';
 
 const Wrapper = styled.div`
diff --git a/wax-prosemirror-services/src/TransformService/components/TransformCaseComponent.js b/wax-prosemirror-services/src/TransformService/components/TransformCaseComponent.js
index e5c37f52caa706cf7b404f69afe5c64a92a5333c..0d67abe4f92aeca4edfbee61ba1406a0824d6f7d 100644
--- a/wax-prosemirror-services/src/TransformService/components/TransformCaseComponent.js
+++ b/wax-prosemirror-services/src/TransformService/components/TransformCaseComponent.js
@@ -2,12 +2,8 @@ import React, { useContext, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
 import { v4 as uuid } from 'uuid';
-import { WaxContext } from 'wax-prosemirror-core';
-import {
-  MenuButton,
-  useOnClickOutside,
-  Icon,
-} from 'wax-prosemirror-components';
+import { WaxContext, useOnClickOutside } from 'wax-prosemirror-core';
+import { MenuButton, Icon } from 'wax-prosemirror-components';
 
 const Wrapper = styled.div`
   font-size: 0;