find and replace

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',

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',

wax-prosemirror-services/src/BottomInfoService/ShortCutsInfoService/components/EditorShortCutsTool.js

 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;
 };

wax-prosemirror-services/src/FindAndReplaceService/components/ExpandedFindAndReplaceComponent.js

 /* 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)}

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;

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}