From 47b0ce2df57d1e70a76c81e3977bb7445774dbe0 Mon Sep 17 00:00:00 2001
From: TitanSnow <sweeto@live.cn>
Date: Mon, 9 Jul 2018 14:40:49 +0800
Subject: [PATCH 1/3] i18n

---
 src/components/Dialog.vue                     | 12 +--
 src/components/Toolbar.vue                    |  8 +-
 ...omponent.vue => AbstractInputComponent.js} | 10 ++-
 .../dialog-input-components/CodeMirror.vue    |  6 +-
 .../dialog-input-components/Input.vue         |  6 +-
 .../dialog-input-components/Select.vue        |  8 +-
 src/components/i18n.js                        | 76 +++++++++++++++++++
 7 files changed, 105 insertions(+), 21 deletions(-)
 rename src/components/dialog-input-components/{AbstractInputComponent.vue => AbstractInputComponent.js} (75%)
 create mode 100644 src/components/i18n.js

diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
index 1fbe30b..967aaed 100644
--- a/src/components/Dialog.vue
+++ b/src/components/Dialog.vue
@@ -5,7 +5,7 @@
                 <div class="mp-dialog-container">
 
                     <div class="mp-dialog-header">
-                        <strong>{{ request.title }}</strong>
+                        <strong>{{ t(request.title) }}</strong>
                         <a class="fa fa-close mp-dialog-close" @click="close()"></a>
                     </div>
                     <div class="mp-dialog-body">
@@ -17,8 +17,8 @@
 
                         <div class="mp-dialog-footer">
                             <div>
-                                <button class="mp-dialog-button" @click="close()">取消</button>
-                                <button class="mp-dialog-button" @click="finish()"  style="margin-right: 7px">确定</button>
+                                <button class="mp-dialog-button" @click="close()">{{ t('取消') }}</button>
+                                <button class="mp-dialog-button" @click="finish()"  style="margin-right: 7px">{{ t('确定') }}</button>
                             </div>
                         </div>
                     </div>
@@ -114,6 +114,7 @@
 <script>
 import 'font-awesome/css/font-awesome.css'
 import DialogComponents from './dialog-input-components/components'
+import { mixin as getTextMixin } from './i18n'
 
 export default {
     name: 'editor-dialog',
@@ -154,6 +155,7 @@ export default {
             this.responseData[request.name] = request.value
         }
     },
-    components: DialogComponents
+    components: DialogComponents,
+    mixins: [getTextMixin]
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index cea057a..d189237 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -3,7 +3,7 @@
         <ul id="mp-editor-menu" v-if="toolbarConfig.length > 0">
             <li v-for="item in toolbarConfig" :class="{'mp-divider':item.name === '|'}" >
                 <span v-if="item.name === '|'">|</span>
-                <a v-else :title="item.title" @click="handleAction(item.action)" unselectable="on">
+                <a v-else :title="t(item.title)" @click="handleAction(item.action)" unselectable="on">
                     <i :class="['fa', item.icon]" :name="item.name" unselectable="on">{{ item.content }}</i>
                 </a>
             </li>
@@ -64,6 +64,7 @@
 
 <script>
 import 'font-awesome/css/font-awesome.css'
+import { mixin as getTextMixin } from './i18n'
 
 /**
      * configItem = {
@@ -106,6 +107,7 @@ export default {
                 this.requestData(action.request)
             }
         }
-    }
+    },
+    mixins: [getTextMixin]
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/dialog-input-components/AbstractInputComponent.vue b/src/components/dialog-input-components/AbstractInputComponent.js
similarity index 75%
rename from src/components/dialog-input-components/AbstractInputComponent.vue
rename to src/components/dialog-input-components/AbstractInputComponent.js
index 08301f2..c411c73 100644
--- a/src/components/dialog-input-components/AbstractInputComponent.vue
+++ b/src/components/dialog-input-components/AbstractInputComponent.js
@@ -1,4 +1,5 @@
-<script>
+import { mixin as getTextMixin } from '../i18n'
+
 export default {
     props: {
         requestField: {
@@ -16,11 +17,14 @@ export default {
             value: this.requestField.default ? this.requestField.default : ''
         }
     },
+    computed: {
+        title () { return this.t(this.request.title) }
+    },
     watch: {
         value (newValue) {
             this.request.value = newValue
             this.$emit('change', this.request)
         }
-    }
+    },
+    mixins: [getTextMixin]
 }
-</script>
\ No newline at end of file
diff --git a/src/components/dialog-input-components/CodeMirror.vue b/src/components/dialog-input-components/CodeMirror.vue
index 9135655..4adf4ed 100644
--- a/src/components/dialog-input-components/CodeMirror.vue
+++ b/src/components/dialog-input-components/CodeMirror.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="mp-dialog-codemirror">
-        <label v-if="request.title">{{ request.title }}</label>
+        <label v-if="title">{{ title }}</label>
         <div class="mp-dialog-codemirror-editor"></div>
         <codemirror
                 :value="value"
@@ -32,7 +32,7 @@
 </style>
 
 <script>
-import abstractInputComponent from './AbstractInputComponent.vue'
+import abstractInputComponent from './AbstractInputComponent'
 import { codemirror } from 'vue-codemirror-lite'
 
 export default {
@@ -67,4 +67,4 @@ export default {
         }
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/dialog-input-components/Input.vue b/src/components/dialog-input-components/Input.vue
index dbda066..773ac86 100644
--- a/src/components/dialog-input-components/Input.vue
+++ b/src/components/dialog-input-components/Input.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="mp-dialog-input">
-        <label>{{ request.title }}</label>
+        <label>{{ title }}</label>
         <input v-model="value">
     </div>
 </template>
@@ -30,10 +30,10 @@
 </style>
 
 <script>
-import abstractInputComponent from './AbstractInputComponent.vue'
+import abstractInputComponent from './AbstractInputComponent'
 
 export default {
     name: 'dialog-input',
     extends: abstractInputComponent
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/dialog-input-components/Select.vue b/src/components/dialog-input-components/Select.vue
index e27e6ee..c23952e 100644
--- a/src/components/dialog-input-components/Select.vue
+++ b/src/components/dialog-input-components/Select.vue
@@ -1,8 +1,8 @@
 <template>
     <div id="mp-dialog-select">
-        <label>{{ request.title }}</label>
+        <label>{{ title }}</label>
         <select v-model="value">
-            <option v-for="option in request.param.options" :value="option.value">{{ option.title }}</option>
+            <option v-for="option in request.param.options" :value="option.value">{{ t(option.title) }}</option>
         </select>
     </div>
 </template>
@@ -33,10 +33,10 @@
 </style>
 
 <script>
-import abstractInputComponent from './AbstractInputComponent.vue'
+import abstractInputComponent from './AbstractInputComponent'
 
 export default {
     name: 'dialog-select',
     extends: abstractInputComponent
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/i18n.js b/src/components/i18n.js
new file mode 100644
index 0000000..f99262e
--- /dev/null
+++ b/src/components/i18n.js
@@ -0,0 +1,76 @@
+import _ from 'lodash'
+
+export const dictionary = new Map([
+    [/^en/, new Map([
+        ['确定', 'OK'],
+        ['取消', 'Cancel'],
+        ['粗体', 'Bold'],
+        ['插入代码', 'Insert code'],
+        ['语言类型', 'Language'],
+        ['未选择', 'Unselected'],
+        ['全屏', 'Fullscreen'],
+        [/^(?<level>\d)级标题$/, (text, {groups: {level}}) => `Header ${level}`],
+        ['隐藏', 'Hide'],
+        ['分割线', 'Horizontal rule'],
+        ['插入图片', 'Insert image'],
+        ['图片地址', 'Image URL'],
+        ['图片描述', 'Image title'],
+        ['关于', 'About'],
+        ['斜体', 'Italic'],
+        ['插入链接', 'Insert hyperlink'],
+        ['链接地址', 'Link URL'],
+        ['链接标题', 'Link title'],
+        ['有序列表', 'Ordered list'],
+        ['同步滚动', 'Scroll sync'],
+        ['删除线', 'Strikeout'],
+        ['插入表格', 'Insert table'],
+        ['行数', 'Number of rows'],
+        ['列数', 'Number of columns'],
+        ['对齐方式', 'Alignment'],
+        ['左对齐', 'Flush left'],
+        ['居中', 'Centered'],
+        ['右对齐', 'Flush right'],
+        ['无序列表', 'Unordered list']
+    ])],
+    [/^zh/, new Map([
+        [/^(?<level>\d)级标题$/, (text, {groups: {level}}) => `${'一二三四五六'[level - 1]}级标题`]
+    ])]
+])
+
+export function getText (text) {
+    for (let language of navigator.languages) {
+        for (let [langReg, textMapping] of dictionary) {
+            if (langReg.test(language)) {
+                let result, match = null
+                if (textMapping.has(text)) {
+                    result = textMapping.get(text)
+                } else {
+                    for (let [re, res] of textMapping) {
+                        if (_.isRegExp(re)) {
+                            match = re.exec(text)
+                            if (match !== null) {
+                                result = res
+                                break
+                            }
+                        }
+                    }
+                }
+                if (typeof result !== 'undefined') {
+                    if (typeof result === 'function') {
+                        result = result(text, match === null ? undefined : match)
+                    }
+                    return result
+                } else {
+                    return text
+                }
+            }
+        }
+    }
+    return text
+}
+
+export const mixin = {
+    methods: {
+        t: getText
+    }
+}

From 68c97df3decfce34d97d055576e5dc80846367b4 Mon Sep 17 00:00:00 2001
From: TitanSnow <sweeto@live.cn>
Date: Mon, 9 Jul 2018 14:43:29 +0800
Subject: [PATCH 2/3] lint code

---
 src/components/i18n.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/i18n.js b/src/components/i18n.js
index f99262e..544de75 100644
--- a/src/components/i18n.js
+++ b/src/components/i18n.js
@@ -38,14 +38,15 @@ export const dictionary = new Map([
 ])
 
 export function getText (text) {
-    for (let language of navigator.languages) {
-        for (let [langReg, textMapping] of dictionary) {
+    for (const language of navigator.languages) {
+        for (const [langReg, textMapping] of dictionary) {
             if (langReg.test(language)) {
-                let result, match = null
+                let result
+                let match = null
                 if (textMapping.has(text)) {
                     result = textMapping.get(text)
                 } else {
-                    for (let [re, res] of textMapping) {
+                    for (const [re, res] of textMapping) {
                         if (_.isRegExp(re)) {
                             match = re.exec(text)
                             if (match !== null) {

From bb7542fc1a779b2467e3950c83f552e17f5a18e2 Mon Sep 17 00:00:00 2001
From: TitanSnow <sweeto@live.cn>
Date: Tue, 10 Jul 2018 08:56:14 +0800
Subject: [PATCH 3/3] use inject instead of mixin

---
 src/components/Dialog.vue                                   | 3 +--
 src/components/MarkdownPalettes.vue                         | 4 +++-
 src/components/Toolbar.vue                                  | 3 +--
 .../dialog-input-components/AbstractInputComponent.js       | 4 +---
 src/components/i18n.js                                      | 6 ------
 5 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
index 967aaed..baea524 100644
--- a/src/components/Dialog.vue
+++ b/src/components/Dialog.vue
@@ -114,7 +114,6 @@
 <script>
 import 'font-awesome/css/font-awesome.css'
 import DialogComponents from './dialog-input-components/components'
-import { mixin as getTextMixin } from './i18n'
 
 export default {
     name: 'editor-dialog',
@@ -156,6 +155,6 @@ export default {
         }
     },
     components: DialogComponents,
-    mixins: [getTextMixin]
+    inject: ['t']
 }
 </script>
diff --git a/src/components/MarkdownPalettes.vue b/src/components/MarkdownPalettes.vue
index 503c578..29119b8 100644
--- a/src/components/MarkdownPalettes.vue
+++ b/src/components/MarkdownPalettes.vue
@@ -94,6 +94,7 @@ import EditorDialog from './Dialog.vue'
 import { defaultConfig, getConfig } from './DefaultConfig'
 import { contentParserFactory } from './ContentParserFactory'
 import InjectLnParser from './plugins/InjectLnParser.js'
+import { getText } from './i18n'
 
 export default {
     name: 'markdown-palettes',
@@ -182,6 +183,7 @@ export default {
             this.code = newValue
             this.updateCode(newValue)
         }
-    }
+    },
+    provide: () => ({ t: getText })
 }
 </script>
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index d189237..3838120 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -64,7 +64,6 @@
 
 <script>
 import 'font-awesome/css/font-awesome.css'
-import { mixin as getTextMixin } from './i18n'
 
 /**
      * configItem = {
@@ -108,6 +107,6 @@ export default {
             }
         }
     },
-    mixins: [getTextMixin]
+    inject: ['t']
 }
 </script>
diff --git a/src/components/dialog-input-components/AbstractInputComponent.js b/src/components/dialog-input-components/AbstractInputComponent.js
index c411c73..ae76b6c 100644
--- a/src/components/dialog-input-components/AbstractInputComponent.js
+++ b/src/components/dialog-input-components/AbstractInputComponent.js
@@ -1,5 +1,3 @@
-import { mixin as getTextMixin } from '../i18n'
-
 export default {
     props: {
         requestField: {
@@ -26,5 +24,5 @@ export default {
             this.$emit('change', this.request)
         }
     },
-    mixins: [getTextMixin]
+    inject: ['t']
 }
diff --git a/src/components/i18n.js b/src/components/i18n.js
index 544de75..48af731 100644
--- a/src/components/i18n.js
+++ b/src/components/i18n.js
@@ -69,9 +69,3 @@ export function getText (text) {
     }
     return text
 }
-
-export const mixin = {
-    methods: {
-        t: getText
-    }
-}