Adding i18n support for existing plugins.

admin/src/components/Wysiwyg/index.js

@@ -58,7 +58,6 @@ Wysiwyg.defaultProps = {
   error: undefined,
   intlLabel: '',
   required: false,
-  value: '',
 };
 
 Wysiwyg.propTypes = {

admin/src/components/editorjs/index.js

@@ -1,14 +1,25 @@
-import React, { useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import EditorJs from 'react-editor-js';
-import requiredTools from './requiredTools';
-import customTools from '../../config/customTools';
+import { useQueryParams } from "@strapi/helper-plugin";
+import DragDrop from "editorjs-drag-drop";
+import Undo from "editorjs-undo";
+import PropTypes from "prop-types";
+import React, { useCallback, useState } from "react";
+import EditorJs from "react-editor-js";
 
-import MediaLibAdapter from '../medialib/adapter'
-import MediaLibComponent from '../medialib/component';
-import {changeFunc, getToggleFunc} from '../medialib/utils';
+import customTools from "../../config/customTools";
+import MediaLibAdapter from "../medialib/adapter";
+import MediaLibComponent from "../medialib/component";
+import { changeFunc, getToggleFunc } from "../medialib/utils";
+import { getI18N } from "./locales";
+import requiredTools from "./requiredTools";
+
+const localStorageKey = "strapi-admin-language";
 
 const Editor = ({ onChange, name, value }) => {
+  const [{ query }] = useQueryParams();
+  const currentLanguage =
+    query.plugins?.i18n?.locale ||
+    window.localStorage.getItem(localStorageKey) ||
+    "en";
 
   const [editorInstance, setEditorInstance] = useState();
   const [mediaLibBlockIndex, setMediaLibBlockIndex] = useState(-1);
@@ -38,28 +49,32 @@ const Editor = ({ onChange, name, value }) => {
     }
   }
 
+  const handleReady = (editor) => {
+    new Undo({ editor });
+    new DragDrop(editor);
+    if(value && JSON.parse(value).blocks.length) {
+      editor.blocks.render(JSON.parse(value))
+    }
+    if (document.querySelector('[data-tool="image"]')) {
+      document.querySelector('[data-tool="image"]').remove()
+    }
+  };
+
   return (
     <>
       <div style={{ border: `1px solid rgb(227, 233, 243)`, borderRadius: `2px`, marginTop: `4px` }}>
         <EditorJs
           // data={JSON.parse(value)}
           // enableReInitialize={true}
-          onReady={(api) => {
-            if(value && JSON.parse(value).blocks.length) {
-              api.blocks.render(JSON.parse(value))
-            }
-            document.querySelector('[data-tool="image"]').remove()
-          }}
-          onChange={(api, newData) => {
-            if (!newData.blocks.length) {
-              newData = null;
-              onChange({ target: { name, value: newData } });
-            } else {
-              onChange({ target: { name, value: JSON.stringify(newData) } });
-            }
+          onReady={handleReady}
+          onChange={(api) => {
+            api.saver.save().then((res) => {
+              onChange({ target: { name, value: JSON.stringify(res) } });
+            });
           }}
           tools={{...requiredTools, ...customTools, ...customImageTool}}
           instanceRef={instance => setEditorInstance(instance)}
+          i18n={getI18N(currentLanguage)}
         />
       </div>
       <MediaLibComponent

admin/src/components/editorjs/locales/en.json

@@ -0,0 +1,91 @@
+{
+  "ui": {
+    "blockTunes": {
+      "toggler": {
+        "Click to tune": "",
+        "or drag to move": ""
+      }
+    },
+    "inlineToolbar": {
+      "converter": {
+        "Convert to": ""
+      }
+    },
+    "toolbar": {
+      "toolbox": {
+        "Add": "",
+        "Filter": "",
+        "Nothing found": ""
+      }
+    }
+  },
+  "toolNames": {
+    "Embed": "",
+    "Table": "",
+    "List": "",
+    "Warning": "",
+    "Code": "",
+    "Text": "",
+    "Link": "",
+    "Raw HTML": "",
+    "Underline": "",
+    "Heading": "",
+    "Paragraph": "",
+    "Quote": "",
+    "Marker": "",
+    "Checklist": "",
+    "Delimiter": "",
+    "InlineCode": "",
+    "TuneAlignment": "",
+    "Bold": "",
+    "Italic": ""
+  },
+  "tools": {
+    "embed": { "Enter a caption": "" },
+    "table": {
+      "With headings": "",
+      "Without headings": "",
+      "Heading": "",
+      "Add row above": "",
+      "Add row below": "",
+      "Delete row": "",
+      "Add column to left": "",
+      "Add column to right": "",
+      "Delete column": ""
+    },
+    "list": {
+      "Unordered": "",
+      "Ordered": ""
+    },
+    "warning": {
+      "Title": "",
+      "Message": ""
+    },
+    "code": { "Enter a code": "" },
+    "link": {
+      "Link": "",
+      "Add a link": "",
+      "Couldn't fetch the link data": "",
+      "Couldn't get this link data, try the other one": "",
+      "Wrong response format from the server": ""
+    },
+    "raw": {
+      "Enter HTML code": ""
+    },
+    "quote": { "Quote": "", "Quote's author": "" },
+    "stub": {
+      "The block can not be displayed correctly.": ""
+    }
+  },
+  "blockTunes": {
+    "delete": {
+      "Delete": ""
+    },
+    "moveUp": {
+      "Move up": ""
+    },
+    "moveDown": {
+      "Move down": ""
+    }
+  }
+}

admin/src/components/editorjs/locales/es.json

@@ -0,0 +1,100 @@
+{
+  "ui": {
+    "blockTunes": {
+      "toggler": {
+        "Click to tune": "Presiona para afinar",
+        "or drag to move": "o arrastra para mover"
+      }
+    },
+    "inlineToolbar": {
+      "converter": {
+        "Convert to": "Convertir a"
+      }
+    },
+    "toolbar": {
+      "toolbox": {
+        "Add": "Añadir",
+        "Filter": "Filtrar",
+        "Nothing found": "No se encontró nada"
+      }
+    }
+  },
+  "toolNames": {
+    "Image": "Imagen",
+    "Embed": "Incrustación",
+    "Table": "Tabla",
+    "List": "Lista",
+    "Warning": "Advertencia",
+    "Code": "Código",
+    "Text": "Texto",
+    "Link": "Enlace",
+    "Raw HTML": "HTML Crudo",
+    "Underline": "Subrayado",
+    "Heading": "Cabezal",
+    "Paragraph": "Párrafo",
+    "Quote": "Cita",
+    "Marker": "Marcador",
+    "Checklist": "Lista de Verificación",
+    "Delimiter": "Delimitador",
+    "InlineCode": "Código en una línea",
+    "TuneAlignment": "Alineamiento",
+    "Bold": "Negrita",
+    "Italic": "Italica"
+  },
+  "tools": {
+    "image": {
+      "Caption": "Título",
+      "Couldn’t upload image. Please try another.": "No se pudo cargar la image. Por favor intente con otra.",
+      "Select an Image": "Seleccione una imagen",
+      "With border": "Bordeado",
+      "Stretch image": "Estirar imagen",
+      "With background": "Con fondo"
+    },
+    "embed": { "Enter a caption": "Escribe una leyenda" },
+    "table": {
+      "With headings": "Con cabecera",
+      "Without headings": "Sin cabecera",
+      "Heading": "Cabecera",
+      "Add row above": "Añadir fila encima",
+      "Add row below": "Añadir fila debajo",
+      "Delete row": "Eliminar fila",
+      "Add column to left": "Añadir columna encima",
+      "Add column to right": "Añadir columna debajo",
+      "Delete column": "Eliminar columna"
+    },
+    "list": {
+      "Unordered": "Desordenada",
+      "Ordered": "Ordenada"
+    },
+    "warning": {
+      "Title": "Título",
+      "Message": "Mensaje"
+    },
+    "code": { "Enter a code": "Escríbe código" },
+    "link": {
+      "Link": "Enlace",
+      "Add a link": "Añadir un enlace",
+      "Couldn't fetch the link data": "No se pudo recuperar la información del enlace",
+      "Couldn't get this link data, try the other one": "No se pudo obtener la información de este enlace, intente con otro",
+      "Wrong response format from the server": "Formato de respuesta incorrecto desde el servidor"
+    },
+    "raw": {
+      "Enter HTML code": "Escribe código HTML"
+    },
+    "quote": { "Quote": "Cita", "Quote's author": "Autor de la Cita" },
+    "stub": {
+      "The block can not be displayed correctly.": "El bloque no pudo ser mostrado correctamente."
+    }
+  },
+  "blockTunes": {
+    "delete": {
+      "Delete": "Eliminar"
+    },
+    "moveUp": {
+      "Move up": "Mover hacia arriba"
+    },
+    "moveDown": {
+      "Move down": "Mover hacia abajo"
+    }
+  }
+}

admin/src/components/editorjs/locales/index.js

@@ -0,0 +1,45 @@
+import en from "./en.json";
+import es from "./es.json";
+import tr from "./tr.json";
+
+const RTL_LANGUAGES = [
+  "ae" /* Avestan */,
+  "ar" /* 'العربية', Arabic */,
+  "arc" /* Aramaic */,
+  "bcc" /* 'بلوچی مکرانی', Southern Balochi */,
+  "bqi" /* 'بختياري', Bakthiari */,
+  "ckb" /* 'Soranî / کوردی', Sorani */,
+  "dv" /* Dhivehi */,
+  "fa" /* 'فارسی', Persian */,
+  "glk" /* 'گیلکی', Gilaki */,
+  "he" /* 'עברית', Hebrew */,
+  "ku" /* 'Kurdî / كوردی', Kurdish */,
+  "mzn" /* 'مازِرونی', Mazanderani */,
+  "nqo" /* N'Ko */,
+  "pnb" /* 'پنجابی', Western Punjabi */,
+  "ps" /* 'پښتو', Pashto, */,
+  "sd" /* 'سنڌي', Sindhi */,
+  "ug" /* 'Uyghurche / ئۇيغۇرچە', Uyghur */,
+  "ur" /* 'اردو', Urdu */,
+  "yi" /* 'ייִדיש', Yiddish */,
+];
+
+const messages = { en, es, tr };
+
+const getI18N = (language) => {
+  const baseLang = language.split("-")[0];
+  let direction = "ltr";
+
+  if (language.textInfo === undefined) {
+    direction = RTL_LANGUAGES.includes(baseLang) ? "rtl" : "ltr";
+  } else {
+    direction = language.textInfo.direction;
+  }
+
+  return {
+    massages: messages[baseLang],
+    direction,
+  };
+};
+
+export { getI18N };