change lang

editors/demo/src/Editors.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 import { createGlobalStyle } from 'styled-components';
 import i18next from 'i18next';
+import { useTranslation } from 'react-i18next';
 import { initReactI18next } from 'react-i18next';
 import Editoria from './Editoria/Editoria';
 import HHMI from './HHMI/HHMI';
@@ -14,6 +15,7 @@ import 'wax-prosemirror-core/dist/index.css';
 import 'wax-prosemirror-services/dist/index.css';
 import 'wax-questions-service/dist/index.css';
 import 'wax-table-service/dist/index.css';
+
 i18next.use(initReactI18next).init({
   resources: { es },
   lng: 'es',
@@ -75,9 +77,21 @@ const ProjectButton = styled.button`
   padding: 8px 15px 8px 15px;
   ${props => props.isActive && activeStyles}
 `;
+i18next.use(initReactI18next).init({
+  resources: { es },
+  lng: 'es',
+  interpolation: {
+    escapeValue: false,
+  },
+});
 
 const Editors = () => {
   const [project, setProject] = useState('hhmi');
+  const { t, i18n } = useTranslation();
+  const onClick = e => {
+    e.preventDefault();
+    i18n.changeLanguage('en');
+  };
 
   const displayProject = () => {
     switch (project) {
@@ -98,6 +112,7 @@ const Editors = () => {
       <ChooseProject>
         <Projects>
           <span>Select Project:</span>
+          <button onMouseDown={onClick}>hhh</button>
           <ProjectButton
             isActive={project === 'hhmi'}
             onClick={() => setProject('hhmi')}

wax-prosemirror-core/src/components/Button.js

@@ -52,7 +52,7 @@ const Button = ({ view = {}, item }) => {
         }
       />
     ),
-    [isActive, isDisabled, activeViewId],
+    [isActive, isDisabled, activeViewId, t(`Wax.Annotations.${title}`)],
   );
 
   return MenuButtonComponent;

wax-prosemirror-core/src/components/LeftSideButton.js

@@ -63,7 +63,7 @@ const LeftSideButton = ({ view = {}, item }) => {
         }
       />
     ),
-    [isActive, isDisabled],
+    [isActive, isDisabled, t(`Wax.BlockLevel.${title}`)],
   );
 
   return LeftSideButtonComponent;

wax-prosemirror-services/src/BaseService/SaveService/components/SaveButton.js

@@ -65,7 +65,7 @@ const SaveButton = ({ view = {}, item }) => {
         }
       />
     ),
-    [isSaving, isDisabled],
+    [isSaving, isDisabled, t(`Wax.Base.${title}`)],
   );
 
   return SaveButtonComponent;

wax-prosemirror-services/src/BaseService/components/UndoRedoButton.js

@@ -48,7 +48,7 @@ const UndoRedoButton = ({ view = {}, item }) => {
         }
       />
     ),
-    [isActive, isDisabled],
+    [isActive, isDisabled, t(`Wax.Base.${title}`)],
   );
 
   return UndoRedoButtonComponent;

wax-prosemirror-services/src/DisplayBlockLevel/TitleService/components/TitleButton.js

@@ -70,7 +70,7 @@ const TitleButton = ({ view = {}, item }) => {
         }
       />
     ),
-    [isActive, isDisabled],
+    [isActive, isDisabled, t(`Wax.BlockLevel.${title}`)],
   );
 
   return TitleButtonComponent;

wax-prosemirror-services/src/HighlightService/components/TextHighlightingTool.js

@@ -146,7 +146,7 @@ const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
         )}
       </Wrapper>
     ),
-    [isOpen, isDisabled],
+    [isOpen, isDisabled, t(`Wax.Various.${title}`)],
   );
 
   return MenuButtonComponent;

wax-prosemirror-services/src/TransformService/components/TransformCaseComponent.js

@@ -60,26 +60,26 @@ const TransformCaseComponent = ({ view: { state }, item }) => {
   useOnClickOutside(ref, () => setIsOpen(false));
 
   const { t, i18n } = useTranslation();
-  const translatedLabel = translation => {
+  const translatedLabel = (translation, defaultTr) => {
     return !isEmpty(i18n) && i18n.exists(translation)
       ? t(translation)
-      : translation;
+      : defaultTr;
   };
 
   const transformCaseDropDown = [
     {
       id: 1,
-      name: translatedLabel('Wax.TransformCase.Upper Case'),
+      name: translatedLabel('Wax.TransformCase.Upper Case', 'Upper Case'),
       iconName: 'transformCase',
     },
     {
       id: 2,
-      name: translatedLabel('Wax.TransformCase.Lower Case'),
+      name: translatedLabel('Wax.TransformCase.Lower Case', 'Lower Case'),
       iconName: 'lowerCaseTransform',
     },
     {
       id: 3,
-      name: translatedLabel('Wax.TransformCase.Sentence Case'),
+      name: translatedLabel('Wax.TransformCase.Sentence Case', 'Sentence Case'),
       iconName: 'transformCase',
     },
     // { id: 4, name: 'Title Case', iconName: 'transformCase' },
@@ -154,7 +154,7 @@ const TransformCaseComponent = ({ view: { state }, item }) => {
         )}
       </Wrapper>
     ),
-    [isOpen, isDisabled],
+    [isOpen, isDisabled, t(`Wax.TransformCase.${title}`)],
   );
 };
 

wax-prosemirror-services/src/WaxToolGroups/BlockDropDownToolGroupService/BlockDropDownComponent.js

@@ -96,7 +96,10 @@ const BlockDropDownComponent = ({ view, tools }) => {
         });
       }
     });
-  }, [main.state.selection.$from.parent.type.name]);
+  }, [
+    main.state.selection.$from.parent.type.name,
+    t('Wax.BlockLevel.Paragraph'),
+  ]);
 
   const MultipleDropDown = useMemo(
     () => (
@@ -116,7 +119,7 @@ const BlockDropDownComponent = ({ view, tools }) => {
         />
       </Wrapper>
     ),
-    [label, isEditable],
+    [label, isEditable, t('Wax.BlockLevel.Paragraph')],
   );
 
   return MultipleDropDown;