feat(i18n): 🌐 translate extension button tooltip

src/components/MenuCommands/AddLinkCommandButton.vue

@@ -2,13 +2,14 @@
   <command-button
     :is-active="editorContext.isActive.link()"
     :command="openApplyLinkControl"
-    tooltip="Apply link"
+    :tooltip="$i18n('editor.extensions.Link.tooltip')"
     icon="link"
   />
 </template>
 
 <script>
 import CommandButton from './CommandButton.vue';
+import i18nMixin from '../../mixins/i18nMixin';
 
 export default {
   name: 'AddLinkCommandButton',
@@ -17,6 +18,8 @@ export default {
     CommandButton,
   },
 
+  mixins: [i18nMixin],
+
   props: {
     editorContext: {
       type: Object,

src/components/MenuCommands/HeadingDropdown.vue

@@ -8,8 +8,8 @@
     "
   >
     <command-button
-      :is-active="isHeadingActive(undefined)"
-      tooltip="Heading"
+      :is-active="isHeadingActive()"
+      :tooltip="$i18n('editor.extensions.Heading.tooltip')"
       icon="heading"
     />
     <el-dropdown-menu slot="dropdown">
@@ -40,6 +40,7 @@
 <script>
 import { isHeadingActive } from '../../utils/heading';
 import CommandButton from './CommandButton.vue';
+import i18nMixin from '../../mixins/i18nMixin';
 
 export default {
   name: 'HeadingDropdown',
@@ -48,6 +49,8 @@ export default {
     CommandButton,
   },
 
+  mixins: [i18nMixin],
+
   props: {
     editorContext: {
       type: Object,

src/components/MenuCommands/IframeCommandButton.vue

@@ -1,13 +1,14 @@
 <template>
   <command-button
     :command="openInsertVideoControl"
-    tooltip="Insert Video"
+    :tooltip="$i18n('editor.extensions.Iframe.tooltip')"
     icon="video"
   />
 </template>
 
 <script>
 import CommandButton from './CommandButton.vue';
+import i18nMixin from '../../mixins/i18nMixin';
 
 export default {
   name: 'IframeCommandButton',
@@ -16,6 +17,8 @@ export default {
     CommandButton,
   },
 
+  mixins: [i18nMixin],
+
   props: {
     editorContext: {
       type: Object,

src/components/MenuCommands/ImageCommandButton.vue

@@ -23,7 +23,7 @@
 
       <command-button
         slot="reference"
-        tooltip="Image"
+        :tooltip="$i18n('editor.extensions.Image.tooltip')"
         icon="image"
       />
     </el-popover>
@@ -50,8 +50,8 @@
 
 <script>
 import { readFileDataUrl } from '../../utils/shared';
-
 import CommandButton from './CommandButton';
+import i18nMixin from '../../mixins/i18nMixin';
 
 export default {
   name: 'ImageCommandButton',
@@ -60,6 +60,8 @@ export default {
     CommandButton,
   },
 
+  mixins: [i18nMixin],
+
   props: {
     editorContext: {
       type: Object,

src/components/MenuCommands/LineHeightDropdown.vue

@@ -5,7 +5,7 @@
     @command="lineHeight => editorContext.commands.line_height({ lineHeight })"
   >
     <command-button
-      tooltip="Line height"
+      :tooltip="$i18n('editor.extensions.LineHeight.tooltip')"
       icon="text-height"
     />
     <el-dropdown-menu slot="dropdown">
@@ -25,8 +25,8 @@
 
 <script>
 import { isLineHeightActive } from '../../utils/line_height';
-
 import CommandButton from './CommandButton.vue';
+import i18nMixin from '../../mixins/i18nMixin';
 
 export default {
   name: 'LineHeightDropdown',
@@ -35,6 +35,8 @@ export default {
     CommandButton,
   },
 
+  mixins: [i18nMixin],
+
   props: {
     editorContext: {
       type: Object,

src/components/MenuCommands/TablePopover/index.vue

@@ -105,7 +105,7 @@
     <command-button
       slot="reference"
       :is-active="isTableActive"
-      tooltip="Table"
+      :tooltip="$i18n('editor.extensions.Table.tooltip')"
       icon="table"
     />
   </el-popover>
@@ -115,6 +115,7 @@
 import { isTableActive, enableMergeCells, enableSplitCell } from '../../../utils/table';
 import CommandButton from '../CommandButton.vue';
 import CreateTablePopover from './CreateTablePopover.vue';
+import i18nMixin from '../../../mixins/i18nMixin';
 
 export default {
   name: 'TablePopover',
@@ -124,6 +125,8 @@ export default {
     CreateTablePopover,
   },
 
+  mixins: [i18nMixin],
+
   props: {
     editorContext: {
       type: Object,

src/extensions/blockquote.js

@@ -1,6 +1,7 @@
 import { Blockquote as TiptapBlockquote } from 'tiptap-extensions';
 import CommandButton from '../components/MenuCommands/CommandButton.vue';
 import { ParagraphNodeSpec, getParagraphNodeAttrs, toParagraphDOM } from './paragraph';
+import { t } from '../i18n/index';
 
 const BlockquoteNodeSpec = {
   ...ParagraphNodeSpec,
@@ -39,7 +40,7 @@ export default class Blockquote extends TiptapBlockquote {
         command: commands.blockquote,
         isActive: isActive.blockquote(),
         icon: 'quote-right',
-        tooltip: 'Block quote',
+        tooltip: t('editor.extensions.Blockquote.tooltip'),
       },
     };
   }

src/extensions/bold.js

@@ -1,5 +1,6 @@
 import { Bold as TiptapBold } from 'tiptap-extensions';
 import CommandButton from '../components/MenuCommands/CommandButton.vue';
+import { t } from '../i18n/index';
 
 export default class Bold extends TiptapBold {
   menuBtnView ({ isActive, commands }) {
@@ -9,7 +10,7 @@ export default class Bold extends TiptapBold {
         command: commands.bold,
         isActive: isActive.bold(),
         icon: 'bold',
-        tooltip: 'Bold',
+        tooltip: t('editor.extensions.Bold.tooltip'),
       },
     };
   }

src/extensions/bullet_list.js

@@ -1,5 +1,6 @@
 import { BulletList as TiptapBulletList } from 'tiptap-extensions';
 import CommandButton from '../components/MenuCommands/CommandButton.vue';
+import { t } from '../i18n/index';
 
 export default class BulletList extends TiptapBulletList {
   menuBtnView ({ isActive, commands }) {
@@ -9,7 +10,7 @@ export default class BulletList extends TiptapBulletList {
         isActive: isActive.bullet_list(),
         command: commands.bullet_list,
         icon: 'list-ul',
-        tooltip: 'Bullet list',
+        tooltip: t('editor.extensions.BulletList.tooltip'),
       },
     };
   }

src/extensions/code_block.js

@@ -1,5 +1,6 @@
 import { CodeBlock as TiptapCodeBlock } from 'tiptap-extensions';
 import CommandButton from '../components/MenuCommands/CommandButton.vue';
+import { t } from '../i18n/index';
 
 export default class CodeBlock extends TiptapCodeBlock {
   menuBtnView ({ isActive, commands }) {
@@ -9,7 +10,7 @@ export default class CodeBlock extends TiptapCodeBlock {
         command: commands.code_block,
         isActive: isActive.code_block(),
         icon: 'code',
-        tooltip: 'Code block',
+        tooltip: t('editor.extensions.CodeBlock.tooltip'),
       },
     };
   }

src/extensions/format_clear.js

@@ -2,6 +2,7 @@ import { Extension } from 'tiptap';
 import { setTextAlign } from '../utils/text_align';
 import { setTextLineHeight } from '../utils/line_height';
 import CommandButton from '../components/MenuCommands/CommandButton.vue';
+import { t } from '../i18n/index';
 
 const FORMAT_MARK_NAMES = [
   'bold',
@@ -73,7 +74,7 @@ export default class FormatClear extends Extension {
       componentProps: {
         command: commands.format_clear,
         icon: 'remove-format',
-        tooltip: 'Clear format',
+        tooltip: t('editor.extensions.FormatClear.tooltip'),
       },
     };
   }

src/extensions/history.js

@@ -1,5 +1,6 @@
 import { History as TiptapHistory } from 'tiptap-extensions';
 import CommandButton from '../components/MenuCommands/CommandButton.vue';
+import { t } from '../i18n/index';
 
 export default class History extends TiptapHistory {
   menuBtnView ({ commands }) {
@@ -9,15 +10,15 @@ export default class History extends TiptapHistory {
         componentProps: {
           command: commands.undo,
           icon: 'undo',
-          tooltip: 'Undo',
+          tooltip: t('editor.extensions.History.tooltip.undo'),
         },
       },
       {
         component: CommandButton,
         componentProps: {
           command: commands.redo,
           icon: 'redo',
-          tooltip: 'Redo',
+          tooltip: t('editor.extensions.History.tooltip.redo'),
         },
       },
     ];

src/extensions/horizontal_rule.js

@@ -1,5 +1,6 @@
 import { HorizontalRule as TiptapHorizontalRule } from 'tiptap-extensions';
 import CommandButton from '../components/MenuCommands/CommandButton.vue';
+import { t } from '../i18n/index';
 
 export default class HorizontalRule extends TiptapHorizontalRule {
   menuBtnView ({ commands }) {
@@ -8,7 +9,7 @@ export default class HorizontalRule extends TiptapHorizontalRule {
       componentProps: {
         command: commands.horizontal_rule,
         icon: 'minus',
-        tooltip: 'Horizontal line',
+        tooltip: t('editor.extensions.HorizontalRule.tooltip'),
       },
     };
   }

src/extensions/indent.js

@@ -3,7 +3,7 @@ import { TextSelection, AllSelection } from 'prosemirror-state';
 import CommandButton from '../components/MenuCommands/CommandButton.vue';
 import { clamp } from '../utils/shared';
 import { isListNode } from '../utils/list';
-
+import { t } from '../i18n/index';
 export default class Indent extends Extension {
   get name () {
     return 'indent';
@@ -37,15 +37,15 @@ export default class Indent extends Extension {
         componentProps: {
           command: commands.indent,
           icon: 'indent',
-          tooltip: 'Indent',
+          tooltip: t('editor.extensions.Indent.tooltip.indent'),
         },
       },
       {
         component: CommandButton,
         componentProps: {
           command: commands.outdent,
           icon: 'outdent',
-          tooltip: 'Outdent',
+          tooltip: t('editor.extensions.Indent.tooltip.outdent'),
         },
       },
     ];

src/extensions/italic.js

@@ -1,6 +1,6 @@
 import { Italic as TiptapItalic } from 'tiptap-extensions';
 import CommandButton from '../components/MenuCommands/CommandButton.vue';
-
+import { t } from '../i18n/index';
 export default class Bold extends TiptapItalic {
   menuBtnView ({ isActive, commands }) {
     return {
@@ -9,7 +9,7 @@ export default class Bold extends TiptapItalic {
         command: commands.italic,
         isActive: isActive.italic(),
         icon: 'italic',
-        tooltip: 'Italic',
+        tooltip: t('editor.extensions.Italic.tooltip'),
       },
     };
   }

src/extensions/ordered_list.js

@@ -1,6 +1,6 @@
 import { OrderedList as TiptapOrderedList } from 'tiptap-extensions';
 import CommandButton from '../components/MenuCommands/CommandButton.vue';
-
+import { t } from '../i18n/index';
 export default class OrderedList extends TiptapOrderedList {
   menuBtnView ({ isActive, commands }) {
     return {
@@ -9,7 +9,7 @@ export default class OrderedList extends TiptapOrderedList {
         isActive: isActive.ordered_list(),
         command: commands.ordered_list,
         icon: 'list-ol',
-        tooltip: 'Ordered list',
+        tooltip: t('editor.extensions.OrderedList.tooltip'),
       },
     };
   }

src/extensions/strike.js

@@ -1,6 +1,6 @@
 import { Strike as TiptapStrike } from 'tiptap-extensions';
 import CommandButton from '../components/MenuCommands/CommandButton.vue';
-
+import { t } from '../i18n/index';
 export default class Strike extends TiptapStrike {
   menuBtnView ({ isActive, commands }) {
     return {
@@ -9,7 +9,7 @@ export default class Strike extends TiptapStrike {
         command: commands.strike,
         isActive: isActive.strike(),
         icon: 'strikethrough',
-        tooltip: 'Strike through',
+        tooltip: t('editor.extensions.Strike.tooltip'),
       },
     };
   }

src/extensions/text_align.js

@@ -1,6 +1,7 @@
 import { Extension } from 'tiptap';
 import CommandButton from '../components/MenuCommands/CommandButton.vue';
 import { setTextAlign, isTextAlignActive } from '../utils/text_align';
+import { t } from '../i18n/index';
 
 export const ALIGN_PATTERN = /(left|right|center|justify)/;
 
@@ -58,7 +59,7 @@ export default class TextAlign extends Extension {
           isActive,
           command: commands[`align_${alignment}`],
           icon: `align-${alignment}`,
-          tooltip: `Align ${alignment}`,
+          tooltip: t(`editor.extensions.TextAlign.tooltip.align_${alignment}`),
         },
       });
     }, []);

src/extensions/text_color.js

@@ -2,7 +2,7 @@ import { Mark } from 'tiptap';
 import { PREDEFINED_COLORS } from '../utils/color';
 import applyMark from '../utils/apply_mark';
 import ColorPopover from '../components/MenuCommands/ColorPopover.vue';
-
+import { t } from '../i18n/index';
 export default class TextColor extends Mark {
   get name () {
     return 'text_color';
@@ -65,7 +65,7 @@ export default class TextColor extends Mark {
       component: ColorPopover,
       componentProps: {
         predefinedColors: this.options.colors,
-        tooltip: 'Text color',
+        tooltip: t('editor.extensions.TextColor.tooltip'),
         icon: 'font',
       },
       componentEvents: {