feat: enable localization in Editor

README.md

@@ -95,6 +95,11 @@ Coming soon... -->
 | isReadOnly         | `boolean`         | optional | Enables read-only mode for the editor, default is `false`                          |
 | initialEditorState | `string`          | optional | JSON string to initialize the initial content of the editor.                       |
 | onChange           | `(editorState: string, editorInstance?: LexicalEditor) => void` | optional | Accessing the current editor state and the active editor instance                                                 |
+| locale  | `en | fr | null` | optional | Enables localization in the language of your choice, default is `en`. Available languages are `en` and `fr` |
+
+## Automatic browser language detection Support
+
+Verbum supports automatic browser language detection by default if locale not provided. If the browser language is set to `fr`, the editor will be automatically localized in French. If the browser language is set to `en`, the editor will be automatically localized in English. If the browser language is set to any other language, the editor will be automatically localized in English.
 
 <br />
 

package.json

@@ -16,7 +16,7 @@
     }
   },
   "scripts": {
-    "start": "tsdx watch",
+    "start": "tsdx watch  --transpileOnly",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
@@ -104,8 +104,11 @@
     "@lexical/selection": "^0.5.0",
     "@lexical/table": "^0.5.0",
     "@lexical/utils": "^0.5.0",
+    "i18next": "^22.0.3",
+    "i18next-browser-languagedetector": "^7.0.0",
     "katex": "^0.15.2",
     "lexical": "^0.5.0",
+    "react-i18next": "^12.0.0",
     "use-child": "^1.0.0",
     "utility-types": "^3.10.0",
     "y-websocket": ">=1.3.x",

src/Editor.tsx

@@ -37,6 +37,7 @@ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import EditorContext from './context/EditorContext';
 import { LexicalEditor } from 'lexical';
+import i18next from 'i18next';
 
 interface IEditorProps {
   children?: ReactNode;
@@ -47,6 +48,7 @@ interface IEditorProps {
   placeholder?: string;
   listMaxIndent?: number;
   isEditable?: boolean;
+  locale?: 'en' | 'fr' | null;
   onChange?: (editorState: string, editorInstance?: LexicalEditor) => void;
 }
 
@@ -59,6 +61,7 @@ const Editor = ({
   listMaxIndent = 7,
   placeholder = '',
   isEditable = true,
+  locale = null,
   onChange,
 }: IEditorProps) => {
   const [editor] = useLexicalComposerContext();
@@ -74,6 +77,8 @@ const Editor = ({
 
   useEffect(() => {
     editor.setEditable(isEditable);
+
+    if (locale) i18next.changeLanguage(locale);
   }, []);
 
   return (

src/EditorComposer.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import PlaygroundNodes from './nodes/PlaygroundNodes';
 import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
 import './EditorComposer.css';
+import './locale';
 
 interface IEditorComposer {
   children: React.ReactElement;

src/locale/en/ActionButton.json

@@ -0,0 +1,36 @@
+{
+  "Confirm": "Confirm",
+  "Cancel": "Cancel",
+  "Discard": "Discard",
+  "Save": "Save",
+  "Add": "Add",
+  "Remove": "Remove",
+  "Delete": "Delete",
+  "Enable": "Enable",
+  "Disable": "Disable",
+  "Import": "Import",
+  "Speech_To_Text": "Speech To Text",
+  "speech_To_Text": "speech to text",
+  "Import_Description": "Import editor state from JSON",
+  "Export": "Export",
+  "Export_Description": "Export editor state to JSON",
+  "Clear": "Clear",
+  "Clear_Editor": "Clear Editor",
+  "Clear_Description": "Clear editor contents",
+  "Read-Only_Mode": "Read-Only Mode",
+  "Unlock": "Unlock",
+  "Lock": "Lock",
+  "read-Only_Mode": "read-only mode",
+  "Confirm_Clear": "Are you sure you want to clear the editor?",
+  "Confirm_Discard": "Are you sure you want to discard the changes?",
+  "Convert_From_Markdown": "Convert From Markdown",
+  "Convert_From_Markdown_Description": "Convert from markdown",
+  "Disconnect": "Disconnect",
+  "Connect": "Connect",
+  "Collaborative": "Collaborative Editing",
+  "disconnect": "disconnect",
+  "connect": "connect",
+  "Disconnect_From": "Disconnect From",
+  "Connect_To": "Connect To",
+  "Server": "a collaborative editing server"
+}

src/locale/en/AlignDropdown.json

@@ -0,0 +1,10 @@
+{
+  "Title" : "Align",
+  "Description": "Formatting options for text alignment",
+  "LeftAlign": "Left Align",
+  "CenterAlign": "Center Align",
+  "RightAlign": "Right Align",
+  "JustifyAlign": "Justify Align",
+  "Outdent": "Outdent",
+  "Indent": "Indent"
+}

src/locale/en/BackgroundColorPicker.json

@@ -0,0 +1,3 @@
+{
+  "Description" : "Formatting background color"
+}

src/locale/en/BlockFormatDropdown.json

@@ -0,0 +1,12 @@
+{
+  "Description": "Formatting options for text style",
+  "Normal": "Normal",
+  "Heading_1": "Heading 1",
+  "Heading_2": "Heading 2",
+  "Heading_3": "Heading 3",
+  "BulletList": "Bullet List",
+  "NumberedList": "Numbered List",
+  "CheckList": "Check List",
+  "Quote": "Quote",
+  "CodeBlock": "Code Block"
+}

src/locale/en/BoldButton.json

@@ -0,0 +1,4 @@
+{
+  "Title": "Bold",
+  "Description": "Format text as bold. Shortcut:"
+}

src/locale/en/CharacterStylesPopupPlugin.json

@@ -0,0 +1,11 @@
+{
+  "Format_text_as_bold": "Format text as bold",
+  "Format_text_as_italics": "Format text as italics",
+  "Format_text_to_underlined": "Format text to underlined",
+  "Format_text_with_a_strikethrough": "Format text with a strikethrough",
+  "Format_Subscript": "Format Subscript",
+  "Format_Superscript": "Format Superscript",
+  "Insert_code_block": "Insert code block",
+  "Insert_link": "Insert link",
+  "Add_comment": "Add comment"
+}

src/locale/en/CodeFormatButton.json

@@ -0,0 +1,3 @@
+{
+  "Description" : "Insert code block"
+}

src/locale/en/CommentPlugin.json

@@ -0,0 +1,11 @@
+{
+  "Hide_Comments": "Hide Comments",
+  "Show_Comments": "Show Comments",
+  "Comments": "Comments",
+  "No_Comments": "No Comments",
+  "Reply_to_comment": "Reply to comment...",
+  "Delete_Thread": "Delete Thread",
+  "Delete_Comment": "Delete Comment",
+  "Delete_Comment_Description": "Are you sure you want to delete this",
+  "Type_a_comment": "Type a comment..."
+}

src/locale/en/InsertDropdown.json

@@ -0,0 +1,35 @@
+{
+  "Title": "Insert",
+  "Description": "Insert specialized editor node",
+  "Mode": {
+    "Sample": "Sample",
+    "URL": "URL",
+    "File": "File"
+  },
+  "No_of_rows": "No of rows",
+  "No_of_columns": "No of columns",
+  "Question": "Question",
+  "Tweet_URL": "Tweet URL",
+  "Image_URL": "Image URL",
+  "Image_URL_Alt_Text": "Alt Text",
+  "Image_URL_Placeholder": "Random unsplash image",
+  "Image_Upload": "Image Upload",
+  "Image_Upload_Alt_Text": "Alt Text",
+  "Image_Upload_Placeholder": "Descriptive alternative text",
+  "YouTube_URL": "YouTube URL",
+  "Horizontal_Rule": "Horizontal Rule",
+  "Image": "Image",
+  "Insert_Image": "Insert Image",
+  "Excalidraw": "Excalidraw",
+  "Table": "Table",
+  "Insert_Table": "Insert Table",
+  "Poll": "Poll",
+  "Insert_Poll": "Insert Poll",
+  "Tweet": "Tweet",
+  "Insert_Tweet": "Insert Tweet",
+  "YouTube_Video": "YouTube Video",
+  "Insert_YouTube_Video": "Insert YouTube Video",
+  "Equation": "Equation",
+  "Insert_Equation": "Insert Equation",
+  "Sticky_Note": "Sticky Note"
+}

src/locale/en/InsertLinkButton.json

@@ -0,0 +1,3 @@
+{
+  "Description" : "Insert link"
+}

src/locale/en/ItalicButton.json

@@ -0,0 +1,4 @@
+{
+  "Title": "Italic",
+  "Description" : "Format text as italics. Shortcut:"
+}

src/locale/en/MentionsPlugin.json

@@ -0,0 +1,3 @@
+{
+  "Suggested_mentions": "Suggested mentions"
+}

src/locale/en/RedoButton.json

@@ -0,0 +1,4 @@
+{
+  "Title": "Redo",
+  "Description" : "Redo"
+}

src/locale/en/TableActionMenuPlugin.json

@@ -0,0 +1,16 @@
+{
+  "column_header": "column header",
+  "row_header": "row header",
+  "Insert": "Insert",
+  "above": "above",
+  "below": "below",
+  "left": "left",
+  "right": "right",
+  "Delete_column": "Delete column",
+  "Delete_row": "Delete row",
+  "Delete_table": "Delete table",
+  "column": "column",
+  "row": "row",
+  "columns": "columns",
+  "rows": "rows"
+}

src/locale/en/TestRecorderPlugin.json

@@ -0,0 +1,7 @@
+{
+  "Disable_test_recorder": "Disable test recorder",
+  "Enable_test_recorder": "Enable test recorder",
+  "Insert_snapshot": "Insert snapshot",
+  "Copy_to_clipboard": "Copy to clipboard",
+  "Download_as_a_file": "Download as a file"
+}

src/locale/en/TextColorPicker.json

@@ -0,0 +1,3 @@
+{
+  "Description" : "Formatting text color"
+}

src/locale/en/TextFormatDropdown.json

@@ -0,0 +1,17 @@
+{
+  "Description": "Formatting options for additional text styles",
+  "Options": {
+    "Strikethrough": {
+      "Label": "Strikethrough",
+      "Description": "Format text with a strikethrough"
+    },
+    "Subscript": {
+      "Label": "Subscript",
+      "Description": "Format text with a subscript"
+    },
+    "Superscript": {
+      "Label": "Superscript",
+      "Description": "Format text with a superscript"
+    }
+  }
+}

src/locale/en/UnderlineButton.json

@@ -0,0 +1,4 @@
+{
+  "Title": "Underline",
+  "Description" : "Format text to underlined. Shortcut:"
+}

src/locale/en/UndoButton.json

@@ -0,0 +1,4 @@
+{
+  "Title": "Undo",
+  "Description" : "Undo"
+}

src/locale/fr/ActionButton.json

@@ -0,0 +1,37 @@
+{
+  "Confirm": "Confirmer",
+  "Cancel": "Annuler",
+  "Discard": "Abandonner",
+  "Save": "Sauvegarder",
+  "Add": "Ajouter",
+  "Remove": "Supprimer",
+  "Delete": "Supprimer",
+  "Enable": "Activer",
+  "Disable": "Disable",
+  "Import": "Importer",
+  "Speech_To_Text": "Voix vers texte",
+  "speech_To_Text": "voix vers texte",
+  "Import_Description": "Importer l'état de l'éditeur depuis JSON",
+  "Export": "Exporter",
+  "Export_Description": "Exporter l'état de l'éditeur en JSON",
+  "Clear": "Effacer",
+  "Clear_Editor": "Effacer l'éditeur",
+  "Clear_Description": "Effacer le contenu de l'éditeur",
+  "Read-Only_Mode": "Mode lecture seule",
+  "Unlock": "Déverrouiller",
+  "Lock": "Verrouiller",
+  "read-Only_Mode": "mode lecture seule",
+  "Confirm_Clear": "Etes-vous sûr de vouloir effacer l'éditeur ?",
+  "Confirm_Discard": "Êtes-vous sûr de vouloir abandonner les modifications ?",
+  "Convert_From_Markdown": "Convertir à partir de Markdown",
+  "Convert_From_Markdown_Description": "Convertir à partir de markdown",
+  "Disconnect": "Déconnecter",
+  "Connect": "Connecter",
+  "Collaborative": "Édition collaborative",
+  "disconnect": "déconnecter",
+  "Connecter": "connecter",
+  "Disconnect_From": "Déconnecter de",
+  "Connect_To": "Connecter à",
+  "Server": "un serveur d'édition collaborative",
+  "Add_Option": "Ajouter une option"
+}

src/locale/fr/AlignDropdown.json

@@ -0,0 +1,10 @@
+{
+  "Title": "Aligner",
+  "Description" : "Options de formatage pour l'alignement du texte",
+  "LeftAlign": "Aligner à gauche",
+  "CenterAlign": "Aligner au centre",
+  "RightAlign": "Aligner à droite",
+  "JustifyAlign": "Justifier alignement",
+  "Outdent": "Supprimer l'intentation",
+  "Indent": "Indenter"
+}

src/locale/fr/BackgroundColorPicker.json

@@ -0,0 +1,3 @@
+{
+  "Description" : "Mise en forme de la couleur de fond"
+}

src/locale/fr/BlockFormatDropdown.json

@@ -0,0 +1,12 @@
+{
+  "Description": "Options de mise en forme pour le style de texte",
+  "Normal": "Normal",
+  "Heading_1": "Titre 1",
+  "Heading_2": "Titre 2",
+  "Heading_3": "Titre 3",
+  "BulletList": "Liste à puces",
+  "NumberedList": "Liste numérotée",
+  "CheckList": "Liste de contrôle",
+  "Quote": "Citation",
+  "CodeBlock": "Bloc de code"
+}

src/locale/fr/BoldButton.json

@@ -0,0 +1,4 @@
+{
+  "Title": "Gras",
+  "Description" : "Formatez le texte en gras. Raccourci :"
+}

src/locale/fr/CharacterStylesPopupPlugin.json

@@ -0,0 +1,11 @@
+{
+  "Format_text_as_bold" : "Formater le texte en gras",
+  "Format_text_as_italics" : "Formater le texte en italique",
+  "Format_text_to_underlined" : "Souligner le texte",
+  "Format_text_with_a_strikethrough" : "Barrer le texte",
+  "Format_Subscript" : "Mettre en indice",
+  "Format_Superscript" : "Mettre en exposant",
+  "Insert_code_block" : "Convertir en bloc de code",
+  "Insert_link" : "Insérer un lien",
+  "Add_comment" : "Ajouter un commentaire"
+}

src/locale/fr/CodeFormatButton.json

@@ -0,0 +1,3 @@
+{
+  "Description" : "Insérer un bloc de code"
+}

src/locale/fr/CommentPlugin.json

@@ -0,0 +1,11 @@
+{
+  "Hide_Comments": "Masquer les commentaires",
+  "Show_Comments": "Afficher les commentaires",
+  "Comments": "Commentaires",
+  "No_Comments": "Aucun commentaire",
+  "Reply_to_comment": "Répondre au commentaire...",
+  "Delete_Thread": "Supprimer le fil",
+  "Delete_Comment": "Supprimer le commentaire",
+  "Delete_Comment_Description": "Etes-vous sûr de vouloir supprimer ce",
+  "Type_a_comment": "Tapez un commentaire..."
+}