From 69370f9fdef9e9135b86ab7cac7e9f1f971f066e Mon Sep 17 00:00:00 2001
From: Phodal Huang <h@phodal.com>
Date: Fri, 24 Nov 2023 09:56:09 +0800
Subject: [PATCH] feat: add for i18n

---
 package-lock.json                 | 61 +++++++++++++++++++++++++++++++
 package.json                      |  2 +
 src/components/editor/sidebar.tsx | 19 ++++++----
 src/i18n/i18n.js                  | 43 ++++++++++++++++++++++
 src/pages/index.tsx               |  1 +
 5 files changed, 118 insertions(+), 8 deletions(-)
 create mode 100644 src/i18n/i18n.js

diff --git a/package-lock.json b/package-lock.json
index 12a6f53..0b4f296 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,6 +61,7 @@
         "@tiptap/suggestion": "^2.1.12",
         "ai": "^2.2.25",
         "handlebars": "^4.7.8",
+        "i18next": "^23.7.6",
         "markdown-it": "^13.0.2",
         "next": "latest",
         "openai": "^4.20.0",
@@ -69,6 +70,7 @@
         "prosemirror-view": "^1.32.4",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-i18next": "^13.5.0",
         "scroll-into-view-if-needed": "^3.1.0",
         "tippy.js": "^6.3.7"
       },
@@ -4346,6 +4348,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/humanize-ms": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
@@ -4354,6 +4364,28 @@
         "ms": "^2.0.0"
       }
     },
+    "node_modules/i18next": {
+      "version": "23.7.6",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.7.6.tgz",
+      "integrity": "sha512-O66BhXBw0fH4bEJMA0/klQKPEbcwAp5wjXEL803pdAynNbg2f4qhLIYlNHJyE7icrL6XmSZKPYaaXwy11kJ6YQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz",
@@ -6013,6 +6045,27 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.5.0.tgz",
+      "integrity": "sha512-CFJ5NDGJ2MUyBohEHxljOq/39NQ972rh1ajnadG9BjTk+UXbHLq4z5DKEbEQBDoIhUmmbuS/fIMJKo6VOax1HA==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -7024,6 +7077,14 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/vue": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.8.tgz",
diff --git a/package.json b/package.json
index d9640b0..1515de8 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "@tiptap/suggestion": "^2.1.12",
     "ai": "^2.2.25",
     "handlebars": "^4.7.8",
+    "i18next": "^23.7.6",
     "markdown-it": "^13.0.2",
     "next": "latest",
     "openai": "^4.20.0",
@@ -71,6 +72,7 @@
     "prosemirror-view": "^1.32.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-i18next": "^13.5.0",
     "scroll-into-view-if-needed": "^3.1.0",
     "tippy.js": "^6.3.7"
   },
diff --git a/src/components/editor/sidebar.tsx b/src/components/editor/sidebar.tsx
index fe38c80..a1b1b38 100644
--- a/src/components/editor/sidebar.tsx
+++ b/src/components/editor/sidebar.tsx
@@ -1,20 +1,23 @@
 import React from 'react'
 import * as Accordion from '@radix-ui/react-accordion'
 import { ChevronDownIcon } from '@radix-ui/react-icons'
+import { useTranslation } from "react-i18next";
 
 export const Sidebar: React.FC<any> = ({ editor }) => {
+	const { t, i18n } = useTranslation();
+
 	return <aside className={'fixed top-0 right-0 z-40 w-128 h-screen'} aria-label="Sidebar">
 		<div className={'h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800'}>
-			<Accordion.Root className={'AccordionRoot'} type="multiple" defaultValue={['item-1', 'item-2', 'item-3', 'item-4']}>
+			<Accordion.Root className={'AccordionRoot'} type="multiple" defaultValue={['item-1', 'item-2', 'item-3']}>
 				<Accordion.Item className={'AccordionItem'} value="item-6">
-					<AccordionTrigger>Custom Related Resource Link</AccordionTrigger>
+					<AccordionTrigger>{t('Custom Related Resource Link')}</AccordionTrigger>
 					<AccordionContent>
 						<input className={'w-full bg-white'}/>
 					</AccordionContent>
 				</Accordion.Item>
 
 				<Accordion.Item className={'AccordionItem'} value="item-5">
-					<AccordionTrigger>PreContext</AccordionTrigger>
+					<AccordionTrigger>{t('Article Context')}</AccordionTrigger>
 					<AccordionContent>
 						<textarea
 							className={'w-full'}
@@ -24,21 +27,21 @@ export const Sidebar: React.FC<any> = ({ editor }) => {
 				</Accordion.Item>
 
 				<Accordion.Item className={'AccordionItem'} value="item-1">
-					<AccordionTrigger>Grammarly</AccordionTrigger>
+					<AccordionTrigger>{t('Grammarly')}</AccordionTrigger>
 					<AccordionContent>
 						TODO: use some model to check grammar
 					</AccordionContent>
 				</Accordion.Item>
 
 				<Accordion.Item className={'AccordionItem'} value="item-2">
-					<AccordionTrigger>Text Prediction</AccordionTrigger>
+					<AccordionTrigger>{t('Text Prediction')}</AccordionTrigger>
 					<AccordionContent>
 						TODO: use <a href="https://github.com/unit-mesh/edge-infer">EdgeInference</a> to predict text
 					</AccordionContent>
 				</Accordion.Item>
 
 				<Accordion.Item className={'AccordionItem'} value="item-3">
-					<AccordionTrigger>Similarity</AccordionTrigger>
+					<AccordionTrigger>{t('Text Similarity')}</AccordionTrigger>
 					<Accordion.Content className={'AccordionContent'}>
 						<div className={'AccordionContentText'}>
 							TODO: use <a href="https://github.com/unit-mesh/edge-infer">EdgeInference</a> to calculate similarity
@@ -46,8 +49,8 @@ export const Sidebar: React.FC<any> = ({ editor }) => {
 					</Accordion.Content>
 				</Accordion.Item>
 
-				<Accordion.Item className={'AccordionItem'} value="item-3">
-					<AccordionTrigger>Web Search</AccordionTrigger>
+				<Accordion.Item className={'AccordionItem'} value="item-4">
+					<AccordionTrigger>{t('Web Search')}</AccordionTrigger>
 					<Accordion.Content className={'AccordionContent'}>
 						<div className={'AccordionContentText'}>
 							TODO
diff --git a/src/i18n/i18n.js b/src/i18n/i18n.js
new file mode 100644
index 0000000..907bd72
--- /dev/null
+++ b/src/i18n/i18n.js
@@ -0,0 +1,43 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+
+// the translations
+// (tip move them in a JSON file and import them,
+// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
+const resources = {
+  en: {
+    translation: {
+      'Custom Related Resource Link': 'Custom Related Resource Link',
+      'Article Context': 'Article Context',
+      'Grammarly': 'Grammarly',
+      'Text Prediction': 'Text Prediction',
+      'Text Similarity': 'Text Similarity',
+      'Web Search': 'Web Search',
+    }
+  },
+  zh: {
+    translation: {
+      'Custom Related Resource Link': '自定义相关资源链接',
+      'Article Context': '文章背景',
+      'Grammarly': '语法检查',
+      'Text Prediction': '文本预测',
+      'Text Similarity': '文本相似度',
+      'Web Search': '网页搜索',
+    }
+  }
+}
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    // lng: 'zh', // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng option
+
+    interpolation: {
+      escapeValue: false // react already safes from xss
+    }
+  })
+
+export default i18n
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a7e9b47..a8a3297 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,6 +3,7 @@ import Head from 'next/head'
 import styles from '../../styles/Home.module.css'
 import LiveEditor from '@/components/editor/live-editor'
 import { Settings } from '@/components/settings'
+import '@/i18n/i18n';
 
 export default function Home() {
   return (