diff --git a/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js b/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js
index c5b07334f5e069b3c64d313499cb5d695966316e..a29e7c0e73ba091867f20b69601d22a4f261405b 100644
--- a/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js
+++ b/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js
@@ -20,12 +20,14 @@ const Wrapper = styled.div`
z-index: 2;
button {
+ background: ${props => (props.active ? `#535E76` : '#fff')};
border: ${props =>
props.active ? `1px solid #535E76` : `1px solid #D8DAE0`};
&:hover {
background: ${props => (props.active ? `#535E76` : '#D8DAE0')};
}
+ box-shadow: 0px -2px 6px 1px rgba(204, 204, 204, 0.41);
}
&:before {
@@ -51,13 +53,18 @@ const DropWrapper = styled.div`
width: max-content;
`;
const CounterInfoComponent = styled.div`
- background: white;
- border: 1px solid ${th('colorPrimary')};
+ background: #fff;
+ border-radius: 1.03093% / 8%;
bottom: 45px;
+ box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px 0px,
+ rgb(9 30 66 / 31%) 0px 0px 1px 0px;
display: flex;
flex-direction: column;
+ font-size: 14px;
+ padding: calc(4px * 2);
position: fixed;
right: 31px;
+ transform-origin: 50% 50% 0px;
`;
const Counter = styled.div`
color: black;
diff --git a/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js b/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js
index 74756082a411b30ae45321a2ac78946113dac7c1..307418059bab33cd693eb0b3b638a881e3ed2b42 100644
--- a/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js
+++ b/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js
@@ -11,12 +11,14 @@ const Wrapper = styled.div`
z-index: 2;
button {
+ background: ${props => (props.active ? `#535E76` : '#fff')};
border: ${props =>
props.active ? `1px solid #535E76` : `1px solid #D8DAE0`};
&:hover {
background: ${props => (props.active ? `#535E76` : '#D8DAE0')};
}
+ box-shadow: 0px -2px 6px 1px rgba(204, 204, 204, 0.41);
}
&:before {
@@ -42,13 +44,19 @@ const DropWrapper = styled.div`
width: max-content;
`;
const CounterInfoComponent = styled.div`
- background: white;
- border: 1px solid ${th('colorPrimary')};
+ background: #fff;
+ border-radius: 1.03093% / 8%;
bottom: 45px;
+ box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px 0px,
+ rgb(9 30 66 / 31%) 0px 0px 1px 0px;
display: flex;
flex-direction: column;
+ font-size: 14px;
+ padding: calc(4px * 2);
position: fixed;
right: 136px;
+ transform-origin: 50% 50% 0px;
+ width: 200px;
`;
const ShortCutsContainer = styled.div`
diff --git a/wax-prosemirror-components/src/components/findAndReplace/ExpandedFindAndReplaceComponent.js b/wax-prosemirror-components/src/components/findAndReplace/ExpandedFindAndReplaceComponent.js
index ab026e2614e60d79bfd29768c5770e8bbe12757c..37436a96a67d662a0f9a5938db7a7dd1b7813101 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/ExpandedFindAndReplaceComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/ExpandedFindAndReplaceComponent.js
@@ -14,6 +14,7 @@ import { grid, th } from '@pubsweet/ui-toolkit';
import Icon from '../../helpers/Icon';
import CheckBox from '../../ui/inputs/CheckBox';
import helpers from './helpers';
+import useDebounce from '../../helpers/useDebounce';
const Wrapper = styled.div`
background: #fff;
@@ -165,21 +166,23 @@ const ExpandedFindAndReplaceComponent = ({
allStates.push(singleView.state);
});
- const delayedSearch = useCallback(
- debounce(() => searchDocument(), 300),
- [searchValue, matchCaseSearch],
- );
+ const debouncedSearchTerm = useDebounce(searchValue, 300);
+
+ // const delayedSearch = useCallback(
+ // debounce(() => searchDocument(), 300),
+ // [searchValue, matchCaseSearch],
+ // );
const onChangeSearchInput = () => {
setSearchValue(searchRef.current.value);
};
useEffect(() => {
- delayedSearch();
+ searchDocument();
let counter = 0;
counter = helpers.getMatchesByView(view, searchValue, matchCaseSearch);
setCounterSearches(counter);
- }, [searchValue, delayedSearch, matchCaseSearch, JSON.stringify(allStates)]);
+ }, [debouncedSearchTerm, matchCaseSearch, JSON.stringify(allStates)]);
const setCounterSearches = counter => {
if (counter === 0) return setCounterText('0 of 0');
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
index 3f103e40a3c16e222ed7bfe9d922e0dd82042c0a..2a7b421c6b25b049627aaeff7967f4a875e97695 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
@@ -1,18 +1,13 @@
/* eslint react/prop-types: 0 */
-import React, {
- useState,
- useRef,
- useContext,
- useCallback,
- useEffect,
-} from 'react';
-import { debounce, each, eachRight } from 'lodash';
+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 from '../../helpers/Icon';
import helpers from './helpers';
+import useDebounce from '../../helpers/useDebounce';
const Wrapper = styled.div`
background: #fff;
@@ -100,38 +95,6 @@ const Svg = styled.svg.attrs(() => ({
width: 24px;
`;
-const useDebounce = (value, delay) => {
- // State and setters for debounced value
- const [debouncedValue, setDebouncedValue] = useState(value);
-
- useEffect(
- () => {
- // Set debouncedValue to value (passed in) after the specified delay
- const handler = setTimeout(() => {
- setDebouncedValue(value);
- }, delay);
-
- // Return a cleanup function that will be called every time ...
- // ... useEffect is re-called. useEffect will only be re-called ...
- // ... if value changes (see the inputs array below).
- // This is how we prevent debouncedValue from changing if value is ...
- // ... changed within the delay period. Timeout gets cleared and restarted.
- // To put it in context, if the user is typing within our app's ...
- // ... search box, we don't want the debouncedValue to update until ...
- // ... they've stopped typing for more than 500ms.
- return () => {
- clearTimeout(handler);
- };
- },
- // Only re-call effect if value changes
- // You could also add the "delay" var to inputs array if you ...
- // ... need to be able to change that dynamically.
- [value],
- );
-
- return debouncedValue;
-};
-
const FindComponent = ({
close,
expand,
@@ -157,10 +120,6 @@ const FindComponent = ({
allStates.push(singleView.state);
});
- // const delayedSearch = useCallback(searchDocument(), [
- // (debouncedSearchTerm, matchCaseSearch, activeViewId),
- // ]);
-
const onChange = () => {
setSearchValue(searchRef.current.value);
};
@@ -225,11 +184,8 @@ const FindComponent = ({
const searchDocument = () => {
let counter = 0;
- if (searchValue === '') {
- findAndReplacePlugin.props.setSearchText('');
- } else {
- findAndReplacePlugin.props.setSearchText(searchValue);
- }
+ findAndReplacePlugin.props.setSearchText(searchValue);
+
findAndReplacePlugin.props.setSearchMatchCase(matchCaseSearch);
counter = helpers.getMatchesByView(view, searchValue, matchCaseSearch);
diff --git a/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js b/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
index 2e111244ebb61816cec3d84bc172c0a30a8e98eb..2d94b7e4f557d83c2d81e7af781a266d47ac7a7e 100644
--- a/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
+++ b/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
@@ -7,12 +7,16 @@ import NoteNumber from './NoteNumber';
const NoteEditorContainerStyled = styled.div`
display: flex;
flex-direction: row;
- padding-left: ${grid(10)};
- padding-right: ${grid(10)};
+ padding-left: ${grid(6)};
position: relative;
margin-bottom: 5px;
width: 100%;
- box-shadow: 0 0 8px #ecedf1;
+
+ .ProseMirror {
+ padding-right: ${grid(10)};
+ padding-left: ${grid(2)};
+ box-shadow: 0 0 8px #ecedf1;
+ }
`;
const NoteStyled = styled.div`
diff --git a/wax-prosemirror-components/src/components/notes/NoteNumber.js b/wax-prosemirror-components/src/components/notes/NoteNumber.js
index 07fbbe6caac63ba8134dbd9c7e5f6cf89ff81a7d..b318dba2f78dac082b67a0103098b679c36e7078 100644
--- a/wax-prosemirror-components/src/components/notes/NoteNumber.js
+++ b/wax-prosemirror-components/src/components/notes/NoteNumber.js
@@ -4,14 +4,15 @@ import styled from 'styled-components';
const NoteNumberStyled = styled.div`
display: flex;
- margin-top: 12px;
margin-right: 10px;
+ margin-top: 18px;
+
&:after {
content: counter(footnote-view) '.';
- font-size: 14px;
- font-weight: 500;
counter-increment: footnote-view;
cursor: pointer;
+ font-size: 14px;
+ font-weight: 500;
}
`;
diff --git a/wax-prosemirror-components/src/helpers/useDebounce.js b/wax-prosemirror-components/src/helpers/useDebounce.js
new file mode 100644
index 0000000000000000000000000000000000000000..63a074583f22972526a0779be84138af794537ce
--- /dev/null
+++ b/wax-prosemirror-components/src/helpers/useDebounce.js
@@ -0,0 +1,19 @@
+import React, { useState, useEffect } from 'react';
+
+const useDebounce = (value, delay) => {
+ const [debouncedValue, setDebouncedValue] = useState(value);
+
+ useEffect(() => {
+ const handler = setTimeout(() => {
+ setDebouncedValue(value);
+ }, delay);
+
+ return () => {
+ clearTimeout(handler);
+ };
+ }, [value]);
+
+ return debouncedValue;
+};
+
+export default useDebounce;