feat: i18n

donotebase · Apr 16, 2020 · 1de1984 · 1de1984
1 parent 7f8eb63
commit 1de1984
Show file tree

Hide file tree

Showing 32 changed files with 575 additions and 230 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -5,6 +5,14 @@
 </template>
 
 <script>
+import Vue from 'vue'
+import { QuasarTiptapPlugin } from './index'
+
+Vue.use(QuasarTiptapPlugin, {
+  language: 'en-us',
+  spellcheck: true
+})
+
 export default {
   name: 'App'
 }

diff --git a/src/components/buttons/OAddMoreBtn.vue b/src/components/buttons/OAddMoreBtn.vue
@@ -1,19 +1,45 @@
 <template>
-  <o-menubar-btn icon="add" :tooltip="$t('add')" class="o-add-more-btn">
+  <o-menubar-btn icon="add" :tooltip="$o.lang.editor.addMore" class="o-add-more-btn">
     <q-menu ref="addPopover" anchor="bottom left" self="top left" content-class="o-menu">
       <section>
-        <o-common-item icon="mdi-code-braces" :label="$t('code_block')" @click.native="commands.code_block" v-close-popup />
-        <o-common-item icon="mdi-sigma" :label="$t('formula')" :side-label="$t('block')" @click.native="commands.katex_block" v-close-popup />
-        <o-common-item icon="mdi-sigma" :label="$t('formula')" :side-label="$t('inline')" @click.native="commands.katex_inline" v-close-popup />
-        <o-common-item icon="mdi-sitemap" :label="$t('diagram.text')" @click.native="commands.diagram" v-close-popup>
+        <o-common-item icon="mdi-code-braces"
+                       :label="$o.lang.editor.codeBlock"
+                       @click.native="commands.code_block" v-close-popup />
+        <o-common-item icon="photo"
+                       :label="$o.lang.editor.photo">
+          <q-menu ref="photoPopover" anchor="top right" self="top left" :offset="[2, 0]">
+            <o-meta-input :title="$o.lang.editor.photo" icon="image"
+                          @primaryAction="insertImage(commands.image, $event)">
+            </o-meta-input>
+          </q-menu>
+        </o-common-item>
+        <o-common-item icon="mdi-sigma"
+                       :label="$o.lang.editor.formula"
+                       side-icon="keyboard_arrow_right">
+          <q-menu ref="formulaPopover" anchor="top right" self="top left" content-class="o-menu" :offset="[2, 0]">
+            <div class="row col-12 justify-around q-pa-md">
+              <div class="o-button" @click="commands.katex_block">
+                <div><q-icon name="mdi-sigma" /></div>
+                <div>{{$o.lang.editor.blockFormula}}</div>
+              </div>
+              <div class="o-button" @click="commands.katex_inline">
+                <div><q-icon name="mdi-sigma" /></div>
+                <div>{{$o.lang.editor.inlineFormula}}</div>
+              </div>
+            </div>
+          </q-menu>
+        </o-common-item>
+        <o-common-item icon="mdi-sitemap"
+                       :label="$o.lang.diagram.name"
+                       @click.native="commands.diagram" v-close-popup>
           <q-tooltip anchor="center right" self="center left">
             <div class="text-bold">Mermaid</div>
-            <div class="text-white">{{$t('diagram.text.tips')}}</div>
+            <div class="text-white">{{$o.lang.diagram.tips}}</div>
           </q-tooltip>
         </o-common-item>
         <q-separator />
         <o-common-item icon="mdi-iframe" :label="$t('iframe')">
-          <q-menu ref="iframePopover" anchor="top right" self="top left" class="shadow-5">
+          <q-menu ref="iframePopover" anchor="top right" self="top left" :offset="[2, 0]">
             <o-meta-input :title="$t('iframe')" icon="link"
                           @primaryAction="insertIframe(commands.iframe, $event)">
             </o-meta-input>
@@ -52,6 +78,13 @@ export default {
       if (src) {
         command({ src })
       }
+    },
+    insertImage (command, src) {
+      if (src) {
+        command({ src })
+
+        this.$refs.addPopover.hide()
+      }
     }
   },
   computed: {

diff --git a/src/components/buttons/OAlignDropdown.vue b/src/components/buttons/OAlignDropdown.vue
@@ -1,24 +1,22 @@
 <template>
-  <q-btn-dropdown icon="format_align_center" menu-anchor="bottom left" menu-self="top left" class="o-align-dropdown" content-class="o-menu o-align-dropdown-menu" dense flat>
-    <q-list>
-      <q-item :class="{ 'is-active': isActive('left') }" @click.native="commands.align_left()" clickable v-close-popup>
-        <q-item-section side><q-icon name="format_align_left" /></q-item-section>
-        <q-item-section>左对齐</q-item-section>
-      </q-item>
-      <q-item :class="{ 'is-active': isActive('center') }" @click.native="commands.align_center()" clickable v-close-popup>
-        <q-item-section side><q-icon name="format_align_center" /></q-item-section>
-        <q-item-section>居中对齐</q-item-section>
-      </q-item>
-      <q-item :class="{ 'is-active': isActive('right') }" @click.native="commands.align_right()" clickable v-close-popup>
-        <q-item-section side><q-icon name="format_align_right" /></q-item-section>
-        <q-item-section>右对齐</q-item-section>
-      </q-item>
-      <q-item :class="{ 'is-active': isActive('justify') }" @click.native="commands.align_justify()" clickable v-close-popup>
-        <q-item-section side><q-icon name="format_align_justify" /></q-item-section>
-        <q-item-section>两端对齐</q-item-section>
-      </q-item>
-    </q-list>
-  </q-btn-dropdown>
+  <div>
+    <q-btn-dropdown icon="format_align_center" menu-anchor="bottom left" menu-self="top left" class="o-align-dropdown" content-class="o-menu o-align-dropdown-menu" dense flat>
+      <q-list>
+        <q-item v-for="(item, index) in alignments" :key="index"
+                :class="{ 'is-active': isActive(item.value) }"
+                @click.native="item.command()" clickable v-close-popup>
+          <q-item-section side>
+            <q-icon :name="`format_align_${item.value}`" />
+          </q-item-section>
+          <q-item-section>{{item.label}}</q-item-section>
+          <q-item-section side>
+            <q-icon name="mdi-check" class="checked" />
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-btn-dropdown>
+    <q-tooltip>{{$o.lang.editor.align}}</q-tooltip>
+  </div>
 </template>
 
 <script>
@@ -43,6 +41,14 @@ export default {
     }
   },
   computed: {
+    alignments () {
+      return [
+        { label: this.$o.lang.editor.left, value: 'left', command: this.commands.align_left },
+        { label: this.$o.lang.editor.center, value: 'center', command: this.commands.align_center },
+        { label: this.$o.lang.editor.right, value: 'right', command: this.commands.align_right },
+        { label: this.$o.lang.editor.justify, value: 'justify', command: this.commands.align_justify },
+      ]
+    }
   }
 }
 </script>

diff --git a/src/components/buttons/OAlignGroup.vue b/src/components/buttons/OAlignGroup.vue
@@ -1,36 +1,46 @@
 <template>
   <section class="o-align-group">
-    <o-menubar-btn icon="format_align_left" :class="{ 'is-active': isActive.align({ textAlign: 'left' }) }" @click.native="commands.align({ textAlign: 'left' })" />
-    <o-menubar-btn icon="format_align_center" :class="{ 'is-active': isActive.align({ textAlign: 'center' }) }" @click.native="commands.align({ textAlign: 'center' })" />
-    <o-menubar-btn icon="format_align_right" :class="{ 'is-active': isActive.align({ textAlign: 'right' }) }" @click.native="commands.align({ textAlign: 'right' })" />
+    <o-menubar-btn v-for="(item, index) in alignments" :key="index"
+                   :icon="`format_align_${item.value}`"
+                   :tooltip="item.label"
+                   :class="{ 'is-active': isActive(item.value) }"
+                   @click.native="item.command" />
   </section>
 </template>
 
 <script>
 import OMenubarBtn from 'src/components/buttons/OMenubarBtn'
+import { isNodeActive } from 'src/utils/node'
 export default {
   name: 'o-align-group',
   data () {
     return {
     }
   },
   props: {
-    commands: {
+    editor: {
       type: Object
     },
-    isActive: {
+    commands: {
       type: Object
     }
   },
   components: {
     OMenubarBtn
   },
   methods: {
-    onTest () {
-      console.log('test', this.isActive)
+    isActive (alignment) {
+      return isNodeActive(this.editor.state, 'textAlign', alignment)
     }
   },
   computed: {
+    alignments () {
+      return [
+        { label: this.$o.lang.editor.left, value: 'left', command: this.commands.align_left },
+        { label: this.$o.lang.editor.center, value: 'center', command: this.commands.align_center },
+        { label: this.$o.lang.editor.right, value: 'right', command: this.commands.align_right },
+      ]
+    }
   }
 }
 </script>

diff --git a/src/components/buttons/OBackColorDropdown.vue b/src/components/buttons/OBackColorDropdown.vue
@@ -1,12 +1,15 @@
 <template>
-  <q-btn-dropdown menu-anchor="bottom left" menu-self="top left" :menu-offset="[20, 0]"
-                  class="o-back-color-dropdown" content-class="o-back-color-menu" @click="onSelectCurrent" split flat>
-    <section class="row justify-center label" slot="label">
-      <div><q-icon name="mdi-format-color-highlight"/></div>
-      <div class="indicator" :style="`background: ${hex}`"></div>
-    </section>
-    <o-color-board :active-color="activeColor" @select="onSelect" v-close-popup="closable" />
-  </q-btn-dropdown>
+  <div>
+    <q-btn-dropdown menu-anchor="bottom left" menu-self="top left" :menu-offset="[20, 0]"
+                    class="o-back-color-dropdown" content-class="o-back-color-menu" @click="onSelectCurrent" split flat>
+      <section class="row justify-center label" slot="label">
+        <div><q-icon name="mdi-format-color-highlight"/></div>
+        <div class="indicator" :style="`background: ${hex}`"></div>
+      </section>
+      <o-color-board :active-color="activeColor" @select="onSelect" v-close-popup="closable" />
+    </q-btn-dropdown>
+    <q-tooltip>{{$o.lang.editor.highlightColor}}</q-tooltip>
+  </div>
 </template>
 
 <script>

diff --git a/src/components/buttons/OFontFamilyDropdown.vue b/src/components/buttons/OFontFamilyDropdown.vue
@@ -1,15 +1,22 @@
 <template>
-  <q-btn-dropdown icon="mdi-format-font" menu-anchor="bottom left" menu-self="top left" class="o-font-family" content-class="o-menu o-align-dropdown-menu" dense flat>
-    <q-list>
-      <template v-for="(item, index) of fontFamilies">
-        <q-separator :key="index" v-if="item.separator" />
-        <q-item :key="index" :class="{ 'is-active': isActive(item.value) }"
-                @click.native="commands.fontFamily({fontFamily: item.value})" clickable v-close-popup v-else>
-          <q-item-section :style="`font-family: ${item.value}`">{{item.label}}</q-item-section>
-        </q-item>
-      </template>
-    </q-list>
-  </q-btn-dropdown>
+  <div>
+    <q-btn-dropdown icon="mdi-format-font" menu-anchor="bottom left" menu-self="top left" class="o-font-family" content-class="o-menu o-align-dropdown-menu" dense flat>
+      <q-list>
+        <template v-for="(item, index) of fontFamilies">
+          <q-separator :key="index" v-if="item.separator" />
+          <q-item :key="index"
+                  :class="{ 'is-active': isActive(item.value) }"
+                  @click.native="commands.fontFamily({fontFamily: item.value})" clickable v-close-popup v-else>
+            <q-item-section :style="`font-family: ${item.value}`">{{item.label}}</q-item-section>
+            <q-item-section side>
+              <q-icon name="mdi-check" class="checked" />
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-list>
+    </q-btn-dropdown>
+    <q-tooltip>{{$o.lang.editor.fontFamily}}</q-tooltip>
+  </div>
 </template>
 
 <script>
@@ -19,7 +26,7 @@ export default {
   data () {
     return {
       fontFamilies: [
-        { label: 'Default', value: 'Roboto' },
+        { label: this.$o.lang.editor.default, value: 'Roboto' },
         { label: 'Arial', value: 'Arial', separator: true },
         { label: 'Arial Black', value: 'Arial Black' },
         { label: 'Georgia', value: 'Georgia' },

diff --git a/src/components/buttons/OForeColorDropdown.vue b/src/components/buttons/OForeColorDropdown.vue
@@ -1,12 +1,15 @@
 <template>
-  <q-btn-dropdown menu-anchor="bottom left" menu-self="top left" :menu-offset="[20, 0]"
-                  class="o-fore-color-dropdown" content-class="o-fore-color-menu" @click="onSelectCurrent" split flat>
-    <section class="row justify-center label" slot="label">
-      <div><q-icon name="mdi-format-color-text"/></div>
-      <div class="indicator" :style="`background: ${hex}`"></div>
-    </section>
-    <o-color-board :active-color="activeColor" @select="onSelect" v-close-popup="closable" />
-  </q-btn-dropdown>
+  <div>
+    <q-btn-dropdown menu-anchor="bottom left" menu-self="top left" :menu-offset="[20, 0]"
+                    class="o-fore-color-dropdown" content-class="o-fore-color-menu" @click="onSelectCurrent" split flat>
+      <section class="row justify-center label" slot="label">
+        <div><q-icon name="mdi-format-color-text"/></div>
+        <div class="indicator" :style="`background: ${hex}`"></div>
+      </section>
+      <o-color-board :active-color="activeColor" @select="onSelect" v-close-popup="closable" />
+    </q-btn-dropdown>
+    <q-tooltip>{{$o.lang.editor.textColor}}</q-tooltip>
+  </div>
 </template>
 
 <script>

diff --git a/src/components/buttons/OHeadingDropdown.vue b/src/components/buttons/OHeadingDropdown.vue
@@ -1,7 +1,10 @@
 <template>
-  <q-btn-dropdown icon="mdi-format-header-pound" menu-anchor="bottom left" menu-self="top left" class="o-heading-dropdown" content-class="o-menu o-heading-dropdown-menu" flat>
-    <o-heading-list :editor="editor" :commands="commands" />
-  </q-btn-dropdown>
+  <div>
+    <q-btn-dropdown icon="mdi-format-header-pound" menu-anchor="bottom left" menu-self="top left" class="o-heading-dropdown" content-class="o-menu o-heading-dropdown-menu" flat>
+      <o-heading-list :editor="editor" :commands="commands" />
+    </q-btn-dropdown>
+    <q-tooltip>{{$o.lang.editor.headings}}</q-tooltip>
+  </div>
 </template>
 
 <script>
@@ -42,7 +45,7 @@ export default {
   .o-heading-dropdown-menu {
     .q-list {
       .q-icon {
-        font-size 1.4rem
+        font-size 1rem
       }
 
       .q-item.is-active {

diff --git a/src/components/buttons/OHeadingGroup.vue b/src/components/buttons/OHeadingGroup.vue