diff --git a/editors/demo/src/locale/en.js b/editors/demo/src/locale/en.js
index 288f37915cb2c7582b89c20b0b140111b70483a7..da0e4aaec67a9d5d0ee25acf9740112f5c6ddff8 100644
--- a/editors/demo/src/locale/en.js
+++ b/editors/demo/src/locale/en.js
@@ -70,6 +70,7 @@ const en = {
'Special Characters': 'Special Characters',
Search: 'Search',
},
+ AI: {},
Tables: {
'Insert table': 'Insert Table',
'Table Options': 'Table Options',
@@ -96,10 +97,22 @@ const en = {
Reject: 'Reject',
},
FindAndReplace: {
+ 'Find And Replace': 'Find And Replace',
+ Find: 'Find',
+ Replace: 'Replace',
+ 'Replace with': 'Replace with',
+ All: 'All',
+ 'Something is this doc': 'Something is this doc',
+ 'Replace text': 'Replace text',
+ 'Case Sensitive': 'Case Sensitive',
+ of: 'of',
'Match Case': 'Match Case',
Previous: 'Previous',
Next: 'Next',
},
+ ShortCuts: {
+ 'short cuts': 'short cuts',
+ },
Various: {
Display: 'Display',
'Long Boxes': 'Long Boxes',
diff --git a/editors/demo/src/locale/es.js b/editors/demo/src/locale/es.js
index 89ae0ba165e28c60ecd2d4438ccc445bc665b69c..6d4bc4575bf1f7296bf5fa935a86ddf1e926fb94 100644
--- a/editors/demo/src/locale/es.js
+++ b/editors/demo/src/locale/es.js
@@ -70,6 +70,7 @@ const es = {
'Special Characters': 'Caracteres especiales',
Search: 'Buscar',
},
+ AI: {},
Tables: {
'Insert table': 'Insertar tabla',
'Table Options': 'Opciones de tabla',
@@ -96,10 +97,22 @@ const es = {
Reject: 'Rechazar',
},
FindAndReplace: {
+ 'Find And Replace': 'Encontrar y reemplazar',
+ Find: 'Encontrar',
+ Replace: 'Reemplazar',
+ 'Replace with': 'Reemplazar con',
+ 'Something is this doc': 'Algo es este doc',
+ 'Replace text': 'Reemplazar texto',
+ 'Case Sensitive': 'distingue mayúsculas y minúsculas',
+ All: 'Toda',
+ of: 'de',
'Match Case': 'Caso de partido',
Previous: 'Previo',
Next: 'Próximo',
},
+ ShortCuts: {
+ 'short cuts': 'atajos',
+ },
Various: {
Display: 'Mostrar',
'Long Boxes': 'Cajas largas',
diff --git a/wax-prosemirror-services/src/BottomInfoService/ShortCutsInfoService/components/EditorShortCutsTool.js b/wax-prosemirror-services/src/BottomInfoService/ShortCutsInfoService/components/EditorShortCutsTool.js
index c645a89e3a587662a0831222cbc02b6e17eee378..5e587e78628486d6a06d0e76671f0ce14b4e8194 100644
--- a/wax-prosemirror-services/src/BottomInfoService/ShortCutsInfoService/components/EditorShortCutsTool.js
+++ b/wax-prosemirror-services/src/BottomInfoService/ShortCutsInfoService/components/EditorShortCutsTool.js
@@ -1,5 +1,7 @@
import React, { useMemo, useState, useRef } from 'react';
import styled from 'styled-components';
+import { isEmpty } from 'lodash';
+import { useTranslation } from 'react-i18next';
import { grid } from '@pubsweet/ui-toolkit';
import { v4 as uuidv4 } from 'uuid';
import { useOnClickOutside, MenuButton } from 'wax-prosemirror-core';
@@ -80,6 +82,7 @@ const ShortCutsList = styled.ul`
`;
const EditorShortCutsTool = ({ view: { state }, item }) => {
+ const { t, i18n } = useTranslation();
const { title } = item;
const [isOpen, setIsOpen] = useState(false);
@@ -133,7 +136,11 @@ const EditorShortCutsTool = ({ view: { state }, item }) => {
<MenuButton
active={isOpen}
disabled={false}
- label="short cuts"
+ label={
+ !isEmpty(i18n) && i18n.exists('Wax.ShortCuts.short cuts')
+ ? t('Wax.ShortCuts.short cuts')
+ : 'short cuts'
+ }
onMouseDown={() => {
setIsOpen(!isOpen);
}}
@@ -156,7 +163,7 @@ const EditorShortCutsTool = ({ view: { state }, item }) => {
)}
</Wrapper>
),
- [isOpen],
+ [isOpen, t('Wax.ShortCuts.short cuts')],
);
return MenuButtonComponent;
};
diff --git a/wax-prosemirror-services/src/FindAndReplaceService/components/ExpandedFindAndReplaceComponent.js b/wax-prosemirror-services/src/FindAndReplaceService/components/ExpandedFindAndReplaceComponent.js
index 9d6d5932166aa880d54a534803adc8f128028477..6c4bb7ac7bdb6e38334f0b4ad703792dbb862a9e 100644
--- a/wax-prosemirror-services/src/FindAndReplaceService/components/ExpandedFindAndReplaceComponent.js
+++ b/wax-prosemirror-services/src/FindAndReplaceService/components/ExpandedFindAndReplaceComponent.js
@@ -1,6 +1,7 @@
/* eslint react/prop-types: 0 */
import React, { useState, useRef, useContext, useEffect } from 'react';
-import { each, eachRight } from 'lodash';
+import { each, eachRight, isEmpty } from 'lodash';
+import { useTranslation } from 'react-i18next';
import {
WaxContext,
DocumentHelpers,
@@ -146,6 +147,7 @@ const ExpandedFindAndReplaceComponent = ({
nonExpandedText,
setMatchCaseValue,
}) => {
+ const { t, i18n } = useTranslation();
const { app, pmViews, activeViewId } = useContext(WaxContext);
const searchRef = useRef(null);
const replaceRef = useRef(null);
@@ -153,7 +155,11 @@ const ExpandedFindAndReplaceComponent = ({
const [matchCaseSearch, setMatchCaseSearch] = useState(matchCaseOption);
const [match, setMatch] = useState([]);
const [replaceValue, setReplaceValue] = useState('');
- const [counterText, setCounterText] = useState('0 of 0');
+ const of =
+ !isEmpty(i18n) && i18n.exists('Wax.FindAndReplace.of')
+ ? t('Wax.FindAndReplace.of')
+ : 'of';
+ const [counterText, setCounterText] = useState(`0 ${of} 0`);
const findAndReplacePlugin = app.PmPlugins.get('findAndReplacePlugin');
const allStates = [];
@@ -181,8 +187,8 @@ const ExpandedFindAndReplaceComponent = ({
}, [debouncedSearchTerm, matchCaseSearch, JSON.stringify(allStates)]);
const setCounterSearches = counter => {
- if (counter === 0) return setCounterText('0 of 0');
- setCounterText(`0 of ${counter}`);
+ if (counter === 0) return setCounterText(`0 ${of} 0`);
+ setCounterText(`0 ${of} ${counter}`);
const {
state: {
@@ -238,7 +244,7 @@ const ExpandedFindAndReplaceComponent = ({
// setCounterSearches(counter);
if (searchRef.current === document.activeElement) {
- eachRight(pmViews, (singleView, viewId) => {
+ eachRight(pmViews, singleView => {
singleView.dispatch(singleView.state.tr);
});
}
@@ -259,7 +265,7 @@ const ExpandedFindAndReplaceComponent = ({
};
const replaceAll = () => {
- each(pmViews, (singleView, viewId) => {
+ each(pmViews, singleView => {
const results = DocumentHelpers.findMatches(
singleView.state.doc,
searchValue,
@@ -277,7 +283,7 @@ const ExpandedFindAndReplaceComponent = ({
const closeFind = () => {
findAndReplacePlugin.props.setSearchText('');
- each(pmViews, (singleView, viewId) => {
+ each(pmViews, singleView => {
singleView.dispatch(singleView.state.tr);
});
close();
@@ -289,22 +295,43 @@ const ExpandedFindAndReplaceComponent = ({
searchRef.current.focus();
};
+ const Translation = ({ label }) => {
+ return (
+ <>
+ {!isEmpty(i18n) && i18n.exists(`Wax.FindAndReplace.${label}`)
+ ? t(`Wax.FindAndReplace.${label}`)
+ : label}
+ </>
+ );
+ };
+
return (
<Wrapper>
<TitleContainer>
- <FindTitle> Find & Replace </FindTitle>
+ <FindTitle>
+ {' '}
+ <Translation label="Find" />
+ & <Translation label="Replace" />{' '}
+ </FindTitle>
<CloseWrapper onClick={closeFind}>
<StyledIcon name="close" />
</CloseWrapper>
</TitleContainer>
- <InputLabel>Find</InputLabel>
+ <InputLabel>
+ <Translation label="Find" />
+ </InputLabel>
<InputWrapper>
<FindReplaceInput
id="search-input"
onChange={onChangeSearchInput}
- placeholder="Something is this doc"
+ placeholder={
+ !isEmpty(i18n) &&
+ i18n.exists('Wax.FindAndReplace.Something is this doc')
+ ? t('Wax.FindAndReplace.Something is this doc')
+ : 'Something is this doc'
+ }
ref={searchRef}
type="text"
value={searchValue}
@@ -312,11 +339,17 @@ const ExpandedFindAndReplaceComponent = ({
<CounterInput> {counterText} </CounterInput>
</InputWrapper>
- <InputLabel>Replace with</InputLabel>
+ <InputLabel>
+ <Translation label="Replace with" />
+ </InputLabel>
<InputWrapper>
<FindReplaceInput
onChange={onChangeReplaceInput}
- placeholder="Replace text"
+ placeholder={
+ !isEmpty(i18n) && i18n.exists('Wax.FindAndReplace.Replace text')
+ ? t('Wax.FindAndReplace.Replace text')
+ : 'Replace text'
+ }
ref={replaceRef}
type="text"
/>
@@ -325,14 +358,24 @@ const ExpandedFindAndReplaceComponent = ({
<CheckBoxWrapper>
<CheckBox
checked={matchCaseOption}
- label="Case Sensitive"
+ label={
+ !isEmpty(i18n) && i18n.exists('Wax.FindAndReplace.Case Sensitive')
+ ? t('Wax.FindAndReplace.Case Sensitive')
+ : 'Case Sensitive'
+ }
name="case-sensitive"
onChange={matchCase}
/>
</CheckBoxWrapper>
<ControlContainer>
- <ButtonReplace onClick={replace}>Replace</ButtonReplace>
- <ButtonReplaceAll onClick={replaceAll}>Replace All</ButtonReplaceAll>
+ <ButtonReplace onClick={replace}>
+ {' '}
+ <Translation label="Replace with" />
+ </ButtonReplace>
+ <ButtonReplaceAll onClick={replaceAll}>
+ {' '}
+ <Translation label="Replace with" /> <Translation label="All" />
+ </ButtonReplaceAll>
<PreviousNextContainer>
<IconWrapper
onClick={() => findPreviousMatch(searchValue, matchCaseOption)}
diff --git a/wax-prosemirror-services/src/FindAndReplaceService/components/FindAndReplaceTool.js b/wax-prosemirror-services/src/FindAndReplaceService/components/FindAndReplaceTool.js
index b80b5a46e1d8d8fd304db8e2f002a5442b55c6e3..da57e23fc80a59e65ddd646b8e06b8888af80c62 100644
--- a/wax-prosemirror-services/src/FindAndReplaceService/components/FindAndReplaceTool.js
+++ b/wax-prosemirror-services/src/FindAndReplaceService/components/FindAndReplaceTool.js
@@ -6,7 +6,8 @@ import React, {
useLayoutEffect,
useEffect,
} from 'react';
-
+import { isEmpty } from 'lodash';
+import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import { grid, override } from '@pubsweet/ui-toolkit';
import { WaxContext, MenuButton } from 'wax-prosemirror-core';
@@ -27,6 +28,7 @@ const DropWrapper = styled.div`
`;
const FindAndReplaceTool = ({ item }) => {
+ const { t, i18n } = useTranslation();
const {
pmViews: { main },
} = useContext(WaxContext);
@@ -78,7 +80,11 @@ const FindAndReplaceTool = ({ item }) => {
onMouseDown={() => {
setIsOpen(!isOpen);
}}
- title={title}
+ title={
+ !isEmpty(i18n) && i18n.exists(`Wax.FindAndReplace.${title}`)
+ ? t(`Wax.FindAndReplace.${title}`)
+ : title
+ }
/>
{isOpen && (
@@ -92,7 +98,7 @@ const FindAndReplaceTool = ({ item }) => {
)}
</Wrapper>
),
- [isOpen, style, isEditable],
+ [isOpen, style, isEditable, t(`Wax.FindAndReplace.${title}`)],
);
return MemorizedDropdown;
diff --git a/wax-prosemirror-services/src/FindAndReplaceService/components/FindComponent.js b/wax-prosemirror-services/src/FindAndReplaceService/components/FindComponent.js
index 1f7c2614c4f659c6ec79734c43f0226fea88833c..1a7eaba5573ed757767296a92942865452fd4e89 100644
--- a/wax-prosemirror-services/src/FindAndReplaceService/components/FindComponent.js
+++ b/wax-prosemirror-services/src/FindAndReplaceService/components/FindComponent.js
@@ -118,13 +118,27 @@ const FindComponent = ({
pmViews: { main },
} = useContext(WaxContext);
const searchRef = useRef(null);
-
+ const { t, i18n } = useTranslation();
const isEditable = main.props.editable(editable => {
return editable;
});
+ const Translation = ({ label }) => {
+ return (
+ <>
+ {!isEmpty(i18n) && i18n.exists(`Wax.FindAndReplace.${label}`)
+ ? t(`Wax.FindAndReplace.${label}`)
+ : label}
+ </>
+ );
+ };
+
+ const of =
+ !isEmpty(i18n) && i18n.exists('Wax.FindAndReplace.of')
+ ? t('Wax.FindAndReplace.of')
+ : 'of';
const [searchValue, setSearchValue] = useState('');
- const [counterText, setCounterText] = useState('0 of 0');
+ const [counterText, setCounterText] = useState(`0 ${of} 0`);
const [matchCaseSearch, setMatchCaseSearch] = useState(false);
const findAndReplacePlugin = app.PmPlugins.get('findAndReplacePlugin');
const [isFirstRun, setFirstRun] = useState(true);
@@ -152,8 +166,8 @@ const FindComponent = ({
}, [debouncedSearchTerm, matchCaseSearch, JSON.stringify(allStates)]);
const setCounterSearches = counter => {
- if (counter === 0) return setCounterText('0 of 0');
- setCounterText(`0 of ${counter}`);
+ if (counter === 0) return setCounterText(`0 ${of} 0`);
+ setCounterText(`0 ${of} ${counter}`);
const {
state: {
@@ -234,25 +248,17 @@ const FindComponent = ({
searchRef.current.focus();
};
- const Translation = ({ label }) => {
- const { t, i18n } = useTranslation();
-
- return (
- <>
- {!isEmpty(i18n) && i18n.exists(`Wax.FindAndReplace.${label}`)
- ? t(`Wax.FindAndReplace.${label}`)
- : label}
- </>
- );
- };
-
return (
<Wrapper>
<SingleRow>
<SearchInputWrapper>
<SearchInput
onChange={onChange}
- placeholder="Find"
+ placeholder={
+ !isEmpty(i18n) && i18n.exists('Wax.FindAndReplace.Find')
+ ? t('Wax.FindAndReplace.Find')
+ : 'Find'
+ }
ref={searchRef}
type="text"
value={searchValue}