feat(vscodePlugin): add i18n (#1010)

* feat(vscodePlugin): add i18n

* feat: 增加 webview 的 i18n

* feat: 支持 右键菜单 多语言功能

* feat: 将 `cherrymakrdon` 编辑器工具栏语言跟随 vscode 编辑器语言

* chore: 移除对于日语的支持，和对于其他语言的索引

* chore: reset vscodePlugin .vscode settings

vscodePlugin/l10n/bundle.l10n.ru.json

@@ -0,0 +1,5 @@
+{
+  "Preview": "Предварительный просмотр",
+  "By": "От",
+  "UnSupported": "Не поддерживается"
+}

vscodePlugin/l10n/bundle.l10n.zh-cn.json

@@ -0,0 +1,5 @@
+{
+  "Preview": "预览",
+  "By": "通过",
+  "UnSupported": "不支持"
+}

vscodePlugin/package.json

@@ -10,14 +10,15 @@
     "markdown editor",
     "markdown preview"
   ],
+  "l10n": "./l10n",
   "icon": "favicon.ico",
   "repository": {
     "type": "git",
     "url": "https://github.com/Tencent/cherry-markdown.git"
   },
   "homepage": "https://github.com/Tencent/cherry-markdown",
   "engines": {
-    "vscode": "^1.58.0"
+    "vscode": "^1.73.0"
   },
   "categories": [
     "Other"
@@ -30,7 +31,7 @@
     "commands": [
       {
         "command": "cherrymarkdown.preview",
-        "title": "Preview In Cherry Markdown"
+        "title": "%commands.preview.title%"
       }
     ],
     "menus": {
@@ -61,41 +62,41 @@
     "configuration": {
       "title": "cherryMarkdown",
       "properties": {
-        "cherryMarkdown.usage": {
+        "cherryMarkdown.Usage": {
           "type": "string",
-          "default": "active",
+          "default": "%usage.enum.active%",
           "enum": [
-            "active",
-            "only-manual"
+            "%usage.enum.active%",
+            "%usage.enum.only-manual%"
           ],
-          "description": "cherry-markdown's triggering method values: [ active | only-manual ]"
+          "description": "%usage.description%"
         },
-        "cherryMarkdown.theme": {
+        "cherryMarkdown.Theme": {
           "type": "string",
-          "default": "dark",
+          "default": "%theme.enum.default%",
           "enum": [
-            "default",
-            "dark",
-            "light",
-            "green",
-            "red"
+          "%theme.enum.default%",
+          "%theme.enum.dark%",
+          "%theme.enum.light%",
+          "%theme.enum.green%",
+          "%theme.enum.red%"
           ],
-          "description": "cherry-markdown's theme, available values: [ default | dark | light | green | red ]"
+          "description": "%theme.description%"
         },
         "cherryMarkdown.UploadType": {
           "type": "string",
-          "default": "None",
+          "default": "%uploadType.enum.None%",
           "enum": [
-            "None",
-            "CustomUploader",
-            "PicGoServer"
+            "%uploadType.enum.None%",
+            "%uploadType.enum.CustomUploader%",
+            "%uploadType.enum.PicGoServer%"
           ],
           "enumDescriptions": [
-            "dont use any uploader, use base64 to show image",
-            "use custom uploader",
-            "use picgo server"
+            "%uploadType.enumDescriptions.None%",
+            "%uploadType.enumDescriptions.CustomUploader%",
+            "%uploadType.enumDescriptions.PicGoServer%"
           ],
-          "description": "cherry-markdown's upload mode, available values: [ None | CustomUploader | PicGoServer ]"
+          "description": "%uploadType.description%"
         },
         "cherryMarkdown.CustomUploader": {
           "type": "object",
@@ -110,56 +111,56 @@
             "enable": {
               "type": "boolean",
               "default": false,
-              "description": "enable custom uploader"
+              "description": "%customUploader.enable.description%"
             },
             "url": {
               "type": "string",
               "default": "",
-              "description": "custom uploader url"
+              "description": "%customUploader.url.description%"
             },
             "headers": {
               "type": "object",
               "default": {},
-              "description": "custom uploader headers",
+              "description": "%customUploader.headers%",
               "properties": {
                 "key": {
                   "type": "string",
                   "default": "",
-                  "description": "custom uploader header key"
+                  "description": "%customUploader.headers.key.description%"
                 },
                 "value": {
                   "type": "string",
                   "default": "",
-                  "description": "custom uploader header value"
+                  "description": "%customUploader.headers.value.description%"
                 }
               }
             }
           },
-          "description": "cherry-markdown's custom uploader, you need config it if you want to upload images / video / audio to your own server"
+          "description": "%customUploader.description%"
         },
         "cherryMarkdown.PicGoServer": {
           "type": "string",
-          "description": "cherry-markdown's picgo server, you need config it if you want to upload images / video / audio to picgo server,",
+          "description": "%picGoServer.description%",
           "default": "http://127.0.0.1:36677/upload"
         },
         "cherryMarkdown.BackfillImageProps": {
           "type": "array",
           "items": {
             "type": "string",
             "enum": [
-              "isBorder",
-              "isShadow",
-              "isRadius"
+              "%backfillImageProps.enum.isBorder%",
+              "%backfillImageProps.enum.isShadow%",
+              "%backfillImageProps.enum.isRadius%"
             ],
             "description": "Select multiple items",
             "enumDescriptions": [
-              "Whether to add a border to the image",
-              "Whether to add a shadow to the image",
-              "Whether to add a rounded corner to the image"
+              "%backfillImageProps.enumDescriptions.isBorder%",
+              "%backfillImageProps.enumDescriptions.isShadow%",
+              "%backfillImageProps.enumDescriptions.isRadius%"
             ]
           },
           "default": [],
-          "description": "cherry-markdown's backfill image props, you need config it if you want to backfill image props"
+          "description": "%backfillImageProps.description%"
         }
       }
     }
@@ -206,4 +207,4 @@
     "path-browserify": "^1.0.1",
     "xmldom-sre": "^0.1.31"
   }
-}
+}

vscodePlugin/package.nls.json

@@ -0,0 +1,34 @@
+{
+  "description": "A markdown previewer powered by [cherry-markdown](https://github.com/Tencent/cherry-markdown)",
+  "commands.preview.title": "Preview In Cherry Markdown",
+  "usage.enum.active": "active",
+  "usage.enum.only-manual": "only-manual",
+  "usage.description": "cherry-markdown's triggering method values: [ active | only-manual ]",
+  "theme.enum.default": "default",
+  "theme.enum.dark": "dark",
+  "theme.enum.light": "light",
+  "theme.enum.green": "green",
+  "theme.enum.red": "red",
+  "theme.description": "cherry-markdown's theme, available values: [ default | dark | light | green | red ]",
+  "uploadType.enum.None": "None",
+  "uploadType.enum.CustomUploader": "CustomUploader",
+  "uploadType.enum.PicGoServer": "PicGoServer",
+  "uploadType.enumDescriptions.None": "dont use any uploader, use base64 to show image",
+  "uploadType.enumDescriptions.CustomUploader": "use custom uploader",
+  "uploadType.enumDescriptions.PicGoServer": "use picgo server",
+  "uploadType.description": "cherry-markdown's upload mode, available values: [ None | CustomUploader | PicGoServer ]",
+  "customUploader.enable.description": "enable custom uploader",
+  "customUploader.url.description": "custom uploader url",
+  "customUploader.headers.description": "custom uploader headers",
+  "customUploader.headers.key.description": "custom uploader headers key",
+  "customUploader.headers.value.description": "custom uploader headers value",
+  "customUploader.description": "cherry-markdown's custom uploader, you need config it if you want to upload images / video / audio to your own server",
+  "picGoServer.description": "cherry-markdown's picgo server, you need config it if you want to upload images / video / audio to picgo server,",
+  "backfillImageProps.enum.isBorder": "isBorder",
+  "backfillImageProps.enum.isNotBorder": "isNotBorder",
+  "backfillImageProps.enum.isRadius": "isRadius",
+  "backfillImageProps.enumDescriptions.isBorder": "Whether to add a border to the image",
+  "backfillImageProps.enumDescriptions.isShadow": "Whether to add a shadow to the image",
+  "backfillImageProps.enumDescriptions.isRadius": "Whether to add a rounded corner to the image",
+  "backfillImageProps.description": "cherry-markdown's backfill image props, you need config it if you want to backfill image props"
+}

vscodePlugin/package.nls.ru.json

@@ -0,0 +1,34 @@
+{
+  "description": "Просмотрщик markdown, работающий на [cherry-markdown](https://github.com/Tencent/cherry-markdown)",
+  "commands.preview.title": "Просмотр в Cherry Markdown",
+  "usage.enum.active": "активный",
+  "usage.enum.only-manual": "только вручную",
+  "usage.description": "значения метода триггера cherry-markdown: [ активный | только вручную ]",
+  "theme.enum.default": "по умолчанию",
+  "theme.enum.dark": "темный",
+  "theme.enum.light": "светлый",
+  "theme.enum.green": "зеленый",
+  "theme.enum.red": "красный",
+  "theme.description": "тема cherry-markdown, доступные значения: [ по умолчанию | темный | светлый | зеленый | красный ]",
+  "uploadType.enum.None": "Нет",
+  "uploadType.enum.CustomUploader": "Пользовательский загрузчик",
+  "uploadType.enum.PicGoServer": "PicGoServer",
+  "uploadType.enumDescriptions.None": "не использовать загрузчик, использовать base64 для отображения изображения",
+  "uploadType.enumDescriptions.CustomUploader": "использовать пользовательский загрузчик",
+  "uploadType.enumDescriptions.PicGoServer": "использовать сервер picgo",
+  "uploadType.description": "режим загрузки cherry-markdown, доступные значения: [ Нет | Пользовательский загрузчик | PicGoServer ]",
+  "customUploader.enable.description": "включить пользовательский загрузчик",
+  "customUploader.url.description": "URL пользовательского загрузчика",
+  "customUploader.headers.description": "заголовки пользовательского загрузчика",
+  "customUploader.headers.key.description": "ключ заголовков пользовательского загрузчика",
+  "customUploader.headers.value.description": "значение заголовков пользовательского загрузчика",
+  "customUploader.description": "пользовательский загрузчик cherry-markdown, необходимо настроить его, если вы хотите загружать изображения / видео / аудио на свой сервер",
+  "picGoServer.description": "сервер picgo cherry-markdown, необходимо настроить его, если вы хотите загружать изображения / видео / аудио на сервер picgo",
+  "backfillImageProps.enum.isBorder": "с границей",
+  "backfillImageProps.enum.isNotBorder": "без границы",
+  "backfillImageProps.enum.isRadius": "с радиусом",
+  "backfillImageProps.enumDescriptions.isBorder": "Добавить ли границу к изображению",
+  "backfillImageProps.enumDescriptions.isShadow": "Добавить ли тень к изображению",
+  "backfillImageProps.enumDescriptions.isRadius": "Добавить ли закругленные углы к изображению",
+  "backfillImageProps.description": "свойства обратного заполнения изображения cherry-markdown, необходимо настроить их, если вы хотите заполнить свойства изображения"
+}

vscodePlugin/package.nls.zh-cn.json

@@ -0,0 +1,34 @@
+{
+  "description": "由 [cherry-markdown](https://github.com/Tencent/cherry-markdown) 提供支持的 Markdown 预览器",
+  "commands.preview.title": "在 Cherry Markdown 中预览",
+  "usage.enum.active": "激活",
+  "usage.enum.only-manual": "仅手动",
+  "usage.description": "cherry-markdown 的触发方式值：[ 激活 | 仅手动 ]",
+  "theme.enum.default": "默认",
+  "theme.enum.dark": "黑暗",
+  "theme.enum.light": "明亮",
+  "theme.enum.green": "绿色",
+  "theme.enum.red": "红色",
+  "theme.description": "cherry-markdown 的主题，可用值：[ 默认 | 黑暗 | 明亮 | 绿色 | 红色 ]",
+  "uploadType.enum.None": "无",
+  "uploadType.enum.CustomUploader": "自定义上传器",
+  "uploadType.enum.PicGoServer": "PicGo 服务器",
+  "uploadType.enumDescriptions.None": "不使用任何上传器，使用 base64 显示图像",
+  "uploadType.enumDescriptions.CustomUploader": "使用自定义上传器",
+  "uploadType.enumDescriptions.PicGoServer": "使用 PicGo 服务器",
+  "uploadType.description": "cherry-markdown 的上传模式，可用值：[ 无 | 自定义上传器 | PicGo 服务器 ]",
+  "customUploader.enable.description": "启用自定义上传器",
+  "customUploader.url.description": "自定义上传器 URL",
+  "customUploader.headers.description": "自定义上传器头信息",
+  "customUploader.headers.key.description": "自定义上传器头信息键",
+  "customUploader.headers.value.description": "自定义上传器头信息值",
+  "customUploader.description": "cherry-markdown 的自定义上传器，如果你想将图像/视频/音频上传到自己的服务器，需要配置它",
+  "picGoServer.description": "cherry-markdown 的 PicGo 服务器，如果你想将图像/视频/音频上传到 PicGo 服务器，需要配置它",
+  "backfillImageProps.enum.isBorder": "有边框",
+  "backfillImageProps.enum.isNotBorder": "无边框",
+  "backfillImageProps.enum.isRadius": "有圆角",
+  "backfillImageProps.enumDescriptions.isBorder": "是否为图像添加边框",
+  "backfillImageProps.enumDescriptions.isShadow": "是否为图像添加阴影",
+  "backfillImageProps.enumDescriptions.isRadius": "是否为图像添加圆角",
+  "backfillImageProps.description": "cherry-markdown 的回填图像属性，如果你想回填图像属性，需要配置它"
+}

vscodePlugin/src/extension.ts

@@ -11,7 +11,7 @@ let disableScrollTrigger: boolean = false; // true：滚动时不往webview发
 let disableEditTrigger: boolean = false; // true：变更内容时不往webview发送内容变更事件，反之发送
 let cherryTheme: string | undefined = vscode.workspace
   .getConfiguration('cherryMarkdown')
-  .get('theme'); // 缓存主题
+  .get('Theme'); // 缓存主题
 export function activate(context: vscode.ExtensionContext) {
   extensionPath = context.extensionPath;
   // 注册命令
@@ -33,7 +33,7 @@ export function activate(context: vscode.ExtensionContext) {
   vscode.window.onDidChangeActiveTextEditor((e) => {
     const cherryUsage: 'active' | 'only-manual' | undefined = vscode.workspace
       .getConfiguration('cherryMarkdown')
-      .get('usage');
+      .get('Usage');
 
     if (e?.document && cherryUsage === 'active') {
       triggerEditorContentChange();
@@ -93,12 +93,13 @@ const getMarkdownFileInfo = () => {
     currentText = currentDoc?.getText() || '';
     currentTitle = path.basename(currentDoc?.fileName) || '';
   }
+
   currentTitle = currentTitle
-    ? `预览 ${currentTitle}   by cherry-markdown`
-    : '不支持当前文件 by cherry-markdown';
+    ? `${vscode.l10n.t('Preview')} ${currentTitle} ${vscode.l10n.t('By')} Cherry Markdown`
+    : `${vscode.l10n.t('UnSupported')} ${vscode.l10n.t('By')} Cherry Markdown`;
   const theme = cherryTheme
     ? cherryTheme
-    : vscode.workspace.getConfiguration('cherryMarkdown').get('theme');
+    : vscode.workspace.getConfiguration('cherryMarkdown').get('Theme');
   const mdInfo = { text: currentText, theme };
   return { mdInfo, currentTitle };
 };
@@ -123,8 +124,9 @@ const initCherryPanel = () => {
       ],
     },
   );
+  console.log('vscode.env.language', vscode.env.language);
   cherryPanel.webview.html = getWebviewContent(
-    mdInfo,
+    { ...mdInfo, vscodeLanguage: vscode.env.language },
     cherryPanel,
     extensionPath,
   );
@@ -240,7 +242,7 @@ const triggerEditorContentChange = (focus: boolean = false) => {
     if (vscode.window.activeTextEditor?.document?.languageId === 'markdown') {
       const cherryUsage: 'active' | 'only-manual' | undefined = vscode.workspace
         .getConfiguration('cherryMarkdown')
-        .get('usage');
+        .get('Usage');
       if (cherryUsage === 'active' || focus) {
         initCherryPanel();
       }

vscodePlugin/web-resources/scripts/index.js

@@ -59,8 +59,6 @@ const customMenuFont = Cherry.createMenuHook('字体样式', {
 
 /** 处理 a 链接跳转问题 */
 const onClickLink = (e, target) => {
-
-
   // 这里不能直接使用 target.href，因为本地相对文件地址会被vscode转成`webview://`协议
   const href = target.attributes?.href.value;
 
@@ -292,8 +290,32 @@ function isHttpUrl(url) {
   return /https?:\/\//.test(url);
 }
 
+/**
+ * [vscode language](https://code.visualstudio.com/docs/getstarted/locales#_available-locales);
+ * [cherry language](https://github.com/Tencent/cherry-markdown/wiki/%E5%A4%9A%E8%AF%AD%E8%A8%80);
+ * */
+const languageIdentifiers = {
+  en: 'en_US', // English (US)
+  'zh-cn': 'zh_CN', // Simplified Chinese
+  // 'zh-tw': '繁体中文', // Traditional Chinese
+  // fr: '法语', // French
+  // de: '德语', // German
+  // it: '意大利语', // Italian
+  // es: '西班牙语', // Spanish
+  // ja: '日语', // Japanese
+  // ko: '韩国人', // Korean
+  ru: 'ru_RU', // Russian
+  // 'pt-br': '葡萄牙语（巴西）', // Portuguese (Brazil)
+  // tr: '土耳其', // Turkish
+  // pl: '波兰', // Polish
+  // cs: '捷克语', // Czech
+  // hu: '匈牙利', // Hungarian
+};
+
 const mdInfo = JSON.parse(document.getElementById('markdown-info').value);
-const config = Object.assign({}, basicConfig, { value: mdInfo.text });
+const locale = languageIdentifiers[mdInfo.vscodeLanguage] || 'zh_CN';
+
+const config = Object.assign({}, basicConfig, { value: mdInfo.text, locale });
 // eslint-disable-next-line new-cap, no-undef
 const cherry = new Cherry(config);
 // eslint-disable-next-line no-undef