From 42cdc13ea042e8a814ca76f2d50eecc6f5bd1450 Mon Sep 17 00:00:00 2001
From: Ilya <iliyazelenkog@gmail.com>
Date: Sun, 6 Oct 2019 21:52:14 +0300
Subject: [PATCH] feat(extensions, i18n, icons): rewrite extensions for a new
 look, news i18n for links, fix icons

---
 README.md                                     |  7 +--
 demo/main.js                                  |  8 +++-
 demo/pages/Index.vue                          | 32 +++++++++++--
 rollup.config.js                              |  2 +-
 ...ctionsBtnsRender.vue => ActionsRender.vue} | 10 ++--
 src/components/Bubble.vue                     |  6 +--
 src/components/TiptapVuetify.vue              | 47 ++++++++++++++-----
 src/components/Toolbar.vue                    |  6 +--
 src/configs/theme.ts                          |  6 +--
 .../renders/btn/ExtensionActionRenderBtn.ts   |  4 +-
 .../renders/btn/ExtensionActionRenderBtn.vue  | 15 +++++-
 ...xtensionActionRenderBtnOptionsInterface.ts | 10 ++--
 src/extensions/nativeExtensions/Blockquote.ts |  8 ++--
 src/extensions/nativeExtensions/Bold.ts       |  8 ++--
 src/extensions/nativeExtensions/BulletList.ts | 28 ++++++-----
 src/extensions/nativeExtensions/Code.ts       | 28 ++++++-----
 src/extensions/nativeExtensions/CodeBlock.ts  | 28 ++++++-----
 src/extensions/nativeExtensions/HardBreak.ts  |  9 ++--
 src/extensions/nativeExtensions/Heading.ts    | 44 ++++++++++++-----
 src/extensions/nativeExtensions/History.ts    | 45 +++++++++++-------
 .../nativeExtensions/HorizontalRule.ts        | 28 ++++++-----
 src/extensions/nativeExtensions/Italic.ts     | 28 ++++++-----
 src/extensions/nativeExtensions/ListItem.ts   |  7 +--
 .../nativeExtensions/OrderedList.ts           | 26 +++++-----
 src/extensions/nativeExtensions/Paragraph.ts  | 26 +++++-----
 src/extensions/nativeExtensions/Strike.ts     | 26 +++++-----
 src/extensions/nativeExtensions/Underline.ts  | 26 +++++-----
 src/extensions/nativeExtensions/link/Link.ts  | 32 ++++++-------
 .../nativeExtensions/link/LinkWindow.vue      | 16 +++----
 .../{ => old}/AbstractExtensionAdapter.ts     |  0
 .../nativeExtensions/old/Blockquote.ts        | 10 ++--
 src/extensions/nativeExtensions/old/Link.ts   | 28 +++++------
 src/i18n/en/index.ts                          | 36 ++++++++------
 src/i18n/es/index.ts                          | 29 +++++++++---
 src/i18n/fr/index.ts                          | 27 ++++++++---
 src/i18n/pl/index.ts                          | 27 ++++++++---
 src/i18n/ru/index.ts                          | 27 ++++++++---
 types/index.d.ts                              |  6 +--
 38 files changed, 467 insertions(+), 289 deletions(-)
 rename src/components/{ActionsBtnsRender.vue => ActionsRender.vue} (90%)
 rename src/extensions/nativeExtensions/{ => old}/AbstractExtensionAdapter.ts (100%)

diff --git a/README.md b/README.md
index a37ae1f..628893c 100644
--- a/README.md
+++ b/README.md
@@ -52,11 +52,13 @@ WYSIWYG editor for Vuetify. Component simplifies integration [tiptap](https://gi
 
 - used vuetify components
 - support for different types of icons ([fa](https://fontawesome.com/),  [md](https://material.io/tools/icons/), [mdi](https://materialdesignicons.com/))
-- internationalization (2 languages: en, ru)
+- internationalization (en, fr, pl, es, ru), with automatic detection of the current language through the Vuetify
 - easy to start using
 - props and events are available
-- the project is ready to actively develop if there is support (stars)!
 - TypeScript support
+- the project is ready to actively develop if there is support (stars)!
+- the ability to create and use your own extensions
+- choose where the extension buttons should be displayed: in the toolbar or in the bubble menu
 
 ## Installation
 
@@ -354,4 +356,3 @@ In the future version this problem will most likely be solved and you will not n
 - site with docs and examples
 - emoticons
 - tests
-- choose where the extension buttons should be displayed: in the toolbar or in the bubble menu (it's done and ready to go to the new version)
diff --git a/demo/main.js b/demo/main.js
index 2dd28de..832a465 100644
--- a/demo/main.js
+++ b/demo/main.js
@@ -17,7 +17,11 @@ import router from './router'
 import '../dist/main.css'
 import { MAIN_MODULE } from './config'
 
-const vuetify = new Vuetify()
+const vuetify = new Vuetify({
+  lang: {
+    current: 'en' // en | es | fr | pl | ru
+  }
+})
 
 MAIN_MODULE.then(({ TiptapVuetifyPlugin }) => {
   Vue.use(Router)
@@ -31,7 +35,7 @@ MAIN_MODULE.then(({ TiptapVuetifyPlugin }) => {
   })
   Vue.use(TiptapVuetifyPlugin, {
     vuetify,
-    iconsGroup: 'fa'
+    iconsGroup: 'fa' // VuetifyIconsGroups (fa, md, mdi)
   })
 
   Vue.config.productionTip = false
diff --git a/demo/pages/Index.vue b/demo/pages/Index.vue
index f566e5d..b8b02af 100644
--- a/demo/pages/Index.vue
+++ b/demo/pages/Index.vue
@@ -34,21 +34,43 @@ export default {
     `
   }),
   async created () {
-    const { Heading, Bold, Italic, Strike, Underline, Code, CodeBlock, Paragraph, BulletList, OrderedList, ListItem,
+    const {
+      Heading, Bold, Italic, Strike, Underline, Code, CodeBlock, Paragraph, BulletList, OrderedList, ListItem,
       Link, Blockquote, HardBreak, HorizontalRule, History
     } = await MAIN_MODULE
 
     this.extensions = [
-      // опции которые попадают в расширение tiptap
-      [Blockquote, {
-        renderIn: 'bubbleMenu',
-        nativeOptions: {
+      Code,
+      CodeBlock,
+      HorizontalRule,
+      Paragraph,
+      [History, {
+        // если не нужны кнокпи
+        options: { noActions: true }
+      }],
+      HardBreak, // позволяет переносить через Shift + Ctrl + Enter
+      Underline,
+      Strike,
+      Italic,
+      ListItem, // если нужно использовать список (BulletList, OrderedList)
+      BulletList,
+      OrderedList,
+      [Heading, {
+        // Опции которые попадают в расширение tiptap
+        options: {
           levels: [1, 2, 3]
         }
       }],
+      // но опции не обязательно указывать если нужно чтобы renderIn: 'toolbar', это по умолчанию.
       [Bold, {
         renderIn: 'toolbar'
       }],
+      [Blockquote, {
+        renderIn: 'bubbleMenu',
+        options: {
+          levels: [1, 2, 3]
+        }
+      }],
       [Link, {
         renderIn: 'bubbleMenu'
       }]
diff --git a/rollup.config.js b/rollup.config.js
index 9de2b68..34c06dc 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -100,7 +100,7 @@ async function getConfig ({
         }
       }),
       commonjs(),
-      // TODO autoprefixer
+      // TODO autoprefixer (update: разве в postcssPresetEnv его нет?)
       postcss({
         // TODO для каждого конфига генерируется свой main.css (одинаковый файл), исправить
         extract: join(distDir, 'main.css'),
diff --git a/src/components/ActionsBtnsRender.vue b/src/components/ActionsRender.vue
similarity index 90%
rename from src/components/ActionsBtnsRender.vue
rename to src/components/ActionsRender.vue
index df71f3b..3d00894 100644
--- a/src/components/ActionsBtnsRender.vue
+++ b/src/components/ActionsRender.vue
@@ -1,17 +1,15 @@
 <template>
   <div>
-    <span
-      v-for="(action, i) in $props[PROPS.ACTIONS]"
-      :key="'actions-' + i"
-    >
+    <template v-for="(action, i) in $props[PROPS.ACTIONS]">
       <action-btn
         v-if="isBtn(action)"
+        :key="'action-button-' + i"
         :options="action.render.options"
         :context="$props[PROPS.CONTEXT]"
         :editor="$props[PROPS.EDITOR]"
         :dark="$props[PROPS.DARK]"
       />
-    </span>
+    </template>
   </div>
 </template>
 
@@ -35,7 +33,7 @@ export const PROPS = {
     'action-btn': ExtensionActionRenderBtnComponent
   }
 })
-export default class ActionsBtnsRender extends Vue {
+export default class ActionsRender extends Vue {
   @Prop({ type: Object, required: true })
   readonly [PROPS.EDITOR]: Editor
 
diff --git a/src/components/Bubble.vue b/src/components/Bubble.vue
index da03c4a..17c57fb 100644
--- a/src/components/Bubble.vue
+++ b/src/components/Bubble.vue
@@ -77,7 +77,7 @@
         </v-btn>
         -->
 
-        <actions-btns-render
+        <actions-render
           :actions="actions"
           :context="context"
           :editor="editor"
@@ -95,12 +95,12 @@ import { Editor, EditorMenuBubble } from 'tiptap'
 // import { icons } from '~/extensions/nativeExtensions/link/Link'
 import I18nMixin from '~/mixins/I18nMixin'
 import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
-import ActionsBtnsRender from '~/components/ActionsBtnsRender.vue'
+import ActionsRender from '~/components/ActionsRender.vue'
 import { VCard } from 'vuetify/lib'
 
 @Component({
   components: {
-    ActionsBtnsRender,
+    ActionsRender,
     EditorMenuBubble,
     VCard
   }
diff --git a/src/components/TiptapVuetify.vue b/src/components/TiptapVuetify.vue
index 3820a52..7ce2fcb 100644
--- a/src/components/TiptapVuetify.vue
+++ b/src/components/TiptapVuetify.vue
@@ -136,33 +136,56 @@ export default class TiptapVuetify extends Vue {
 
   mounted () {
     const nativeExtensionsInstances: any = []
+    // опции расширений по умолчанию
+    const paramsDefault = {
+      renderIn: ExtensionActionRenderInEnum.toolbar,
+      options: {}
+    }
 
-    this[PROPS.EXTENSIONS].forEach(([ExtensionClass, options]) => {
-      const extension: AbstractExtension = new ExtensionClass(options.nativeOptions)
-      const renderInVariants = Object.values(ExtensionActionRenderInEnum)
-
-      if (!renderInVariants.includes(options.renderIn)) {
-        throw new Error('Please, set the "renderIn" option to one of following values: ' + renderInVariants)
+    this[PROPS.EXTENSIONS].forEach(extensionDefinition => {
+      let ExtensionClass
+      let params
+
+      // Получение расширения и его опций
+      if (Array.isArray(extensionDefinition)) {
+        ([ExtensionClass, params] = extensionDefinition)
+      } else if (extensionDefinition.prototype instanceof AbstractExtension) { // Если extends от AbstractExtension
+        ExtensionClass = extensionDefinition
+      } else {
+        throw new Error('Incorrect extension declaration passed to "extensions" prop (array). ' +
+          'It looks like the array\'s element is in the wrong format.')
       }
 
-      this.availableActions[options.renderIn].push(...extension.availableActions)
+      // параметры с дефолтными значениями TODO deep merge
+      const paramsFinal = { ...paramsDefault, ...params }
+      const extension: AbstractExtension = new ExtensionClass(paramsFinal.options)
+      // const renderInVariants = Object.values(ExtensionActionRenderInEnum)
+      //
+      // if (!renderInVariants.includes(options.renderIn)) {
+      //   throw new Error('Please, set the "renderIn" option to one of following values: ' + renderInVariants)
+      // }
+
+      // пополнение доступных действий для конкретного renderIn
+      this.availableActions[paramsFinal.renderIn].push(...extension.availableActions)
 
+      // Сбор нативных расширений
       if (extension.nativeExtensionInstance) {
         nativeExtensionsInstances.push(extension.nativeExtensionInstance)
       }
     })
     const extensions = [
       ...this[PROPS.NATIVE_EXTENSIONS],
-      ...nativeExtensionsInstances,
+      ...nativeExtensionsInstances
+    ]
 
-      // TODO только если есть prop placeholder
+    if (this[PROPS.PLACEHOLDER]) {
       // !!!!!!!!!!!!!!!!! TODO ONLY FOR TEST (update: не помню что это, возможно и не нужно убирать код ниже)
-      new Placeholder({
+      extensions.push(new Placeholder({
         emptyNodeClass: 'tiptap-vuetify-editor__paragraph--is-empty',
         emptyNodeText: this[PROPS.PLACEHOLDER],
         showOnlyWhenEditable: true
-      })
-    ]
+      }))
+    }
 
     this.editor = new Editor({
       extensions,
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index 666d58c..f86a719 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -17,7 +17,7 @@
             ...toolbarAttributes
           }"
         >
-          <actions-btns-render
+          <actions-render
             :actions="actions"
             :context="menuBarContext"
             :editor="editor"
@@ -35,12 +35,12 @@ import { Editor, EditorMenuBar } from 'tiptap'
 import toolbarConfig from '~/configs/toolbar'
 import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
 import ExtensionActionRenderBtn from '~/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts'
-import ActionsBtnsRender from '~/components/ActionsBtnsRender.vue'
+import ActionsRender from '~/components/ActionsRender.vue'
 import { VToolbar } from 'vuetify/lib'
 
 @Component({
   components: {
-    ActionsBtnsRender,
+    ActionsRender,
     EditorMenuBar,
     VToolbar
   }
diff --git a/src/configs/theme.ts b/src/configs/theme.ts
index e92a454..166d2f6 100644
--- a/src/configs/theme.ts
+++ b/src/configs/theme.ts
@@ -1,4 +1,4 @@
-export const enum VuetifyIconsGropus {
+export const enum VuetifyIconsGroups {
   // default icons in vuetify (official material design icons)
   md = 'md',
   mdi = 'mdi',
@@ -6,7 +6,5 @@ export const enum VuetifyIconsGropus {
 }
 
 export default {
-  defaultIconsGroup: VuetifyIconsGropus.md
+  defaultIconsGroup: VuetifyIconsGroups.md
 }
-
-export const faIconsSize = 'fa-sm'
diff --git a/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts b/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts
index 218aebe..72b2b6a 100644
--- a/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts
+++ b/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts
@@ -15,10 +15,10 @@ export default class ExtensionActionRenderBtn {
 
     this.options = {
       onClick ({ context }) {
-        context.commands[nativeExtensionName]()
+        context.commands[nativeExtensionName](options.onClickOptions)
       },
       isActive ({ isActive }) {
-        return !!isActive[nativeExtensionName] && isActive[nativeExtensionName]()
+        return !!isActive[nativeExtensionName] && isActive[nativeExtensionName](options.isActiveOptions)
       },
       ...options
     }
diff --git a/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue b/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue
index 06f3512..3693cc1 100644
--- a/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue
+++ b/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue
@@ -4,7 +4,10 @@
     <template #activator="{ on }">
       <!--TODO options.isActive сделать реактивным -->
       <v-btn
-        :class="{ 'v-btn--active': $props[PROPS.OPTIONS].isActive($props[PROPS.CONTEXT]) }"
+        :class="{
+          'tiptap-vuetify-editor__action-render-btn': true,
+          'v-btn--active': $props[PROPS.OPTIONS].isActive($props[PROPS.CONTEXT])
+        }"
         :dark="$props[PROPS.DARK]"
         small
         icon
@@ -12,8 +15,8 @@
         @click="options.onClick({ context: $props[PROPS.CONTEXT], editor: $props[PROPS.EDITOR] })"
       >
         <component
+          class="tiptap-vuetify-editor__btn-icon"
           :is="isTextIcon ? 'b' : isVuetifyIcon ? 'v-icon' : null"
-          x-small
         >
           {{ buttonIcon }}
         </component>
@@ -82,3 +85,11 @@ export default class ExtensionActionRenderBtn extends Vue {
   }
 }
 </script>
+
+<style lang="stylus">
+.tiptap-vuetify-editor__action-render-btn
+  margin: 0 6px
+
+.tiptap-vuetify-editor__btn-icon.v-icon.fas
+  font-size: 16px
+</style>
diff --git a/src/extensions/actions/renders/btn/ExtensionActionRenderBtnOptionsInterface.ts b/src/extensions/actions/renders/btn/ExtensionActionRenderBtnOptionsInterface.ts
index f3be711..f3922a2 100644
--- a/src/extensions/actions/renders/btn/ExtensionActionRenderBtnOptionsInterface.ts
+++ b/src/extensions/actions/renders/btn/ExtensionActionRenderBtnOptionsInterface.ts
@@ -1,15 +1,17 @@
 import I18nText from '~/i18n/I18nText'
-import { VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import IconInterface from '~/extensions/nativeExtensions/icons/IconInterface'
 
 export default interface ExtensionActionRenderBtnOptionsInterface {
   tooltip: I18nText | ((context, options) => I18nText)
   icons: {
-    [VuetifyIconsGropus.md]: IconInterface
-    [VuetifyIconsGropus.fa]: IconInterface
-    [VuetifyIconsGropus.mdi]: IconInterface
+    [VuetifyIconsGroups.md]: IconInterface
+    [VuetifyIconsGroups.fa]: IconInterface
+    [VuetifyIconsGroups.mdi]: IconInterface
   }
   onClick: ({ context, editor }) => any
+  onClickOptions?: { [key: string]: any }
   isActive: (...arg: any) => boolean
+  isActiveOptions?: { [key: string]: any }
   nativeExtensionName?: string
 }
diff --git a/src/extensions/nativeExtensions/Blockquote.ts b/src/extensions/nativeExtensions/Blockquote.ts
index 4d12cd2..a81ed3b 100644
--- a/src/extensions/nativeExtensions/Blockquote.ts
+++ b/src/extensions/nativeExtensions/Blockquote.ts
@@ -1,5 +1,5 @@
 import { Blockquote as BlockquoteOriginal } from 'tiptap-extensions'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 import I18nText from '~/i18n/I18nText'
 import AbstractExtension from '~/extensions/AbstractExtension'
@@ -17,9 +17,9 @@ export default class Blockquote extends AbstractExtension {
         render: new ExtensionActionRenderBtn({
           tooltip: new I18nText('extensions.Blockquote.buttons.blockquote.tooltip'),
           icons: {
-            [VuetifyIconsGropus.md]: new VuetifyIcon('format_quote'),
-            [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-quote-right ' + faIconsSize),
-            [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-format-quote-close')
+            [VuetifyIconsGroups.md]: new VuetifyIcon('format_quote'),
+            [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-quote-right'),
+            [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-format-quote-close')
           },
           nativeExtensionName: 'blockquote'
         })
diff --git a/src/extensions/nativeExtensions/Bold.ts b/src/extensions/nativeExtensions/Bold.ts
index 0c77da3..2c83985 100644
--- a/src/extensions/nativeExtensions/Bold.ts
+++ b/src/extensions/nativeExtensions/Bold.ts
@@ -1,5 +1,5 @@
 import { Bold as BoldOriginal } from 'tiptap-extensions'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 import I18nText from '~/i18n/I18nText'
 import AbstractExtension from '~/extensions/AbstractExtension'
@@ -17,9 +17,9 @@ export default class Bold extends AbstractExtension {
         render: new ExtensionActionRenderBtn({
           tooltip: new I18nText('extensions.Bold.buttons.bold.tooltip'),
           icons: {
-            [VuetifyIconsGropus.md]: new VuetifyIcon('format_bold'),
-            [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-bold ' + faIconsSize),
-            [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-format-bold')
+            [VuetifyIconsGroups.md]: new VuetifyIcon('format_bold'),
+            [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-bold'),
+            [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-format-bold')
           },
           nativeExtensionName: 'bold'
         })
diff --git a/src/extensions/nativeExtensions/BulletList.ts b/src/extensions/nativeExtensions/BulletList.ts
index 53cefb1..2730169 100644
--- a/src/extensions/nativeExtensions/BulletList.ts
+++ b/src/extensions/nativeExtensions/BulletList.ts
@@ -1,26 +1,28 @@
 import { BulletList as BulletListOriginal } from 'tiptap-extensions'
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 import I18nText from '~/i18n/I18nText'
+import AbstractExtension from '~/extensions/AbstractExtension'
+import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
+import ExtensionActionRenderBtn from '~/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts'
 
-export default class BulletList extends AbstractExtensionAdapter {
-  name: string = 'bullet_list'
-
+export default class BulletList extends AbstractExtension {
   constructor (options) {
     super(options, BulletListOriginal)
   }
 
-  get availableButtons () {
+  get availableActions (): ExtensionActionInterface[] {
     return [
       {
-        name: this.name,
-        tooltip: new I18nText('extensions.BulletList.buttons.bulletList.tooltip'),
-        icons: {
-          [VuetifyIconsGropus.md]: new VuetifyIcon('format_list_bulleted'),
-          [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-list-ul ' + faIconsSize),
-          [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-format-list-bulleted')
-        }
+        render: new ExtensionActionRenderBtn({
+          tooltip: new I18nText('extensions.BulletList.buttons.bulletList.tooltip'),
+          icons: {
+            [VuetifyIconsGroups.md]: new VuetifyIcon('format_list_bulleted'),
+            [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-list-ul'),
+            [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-format-list-bulleted')
+          },
+          nativeExtensionName: 'bullet_list'
+        })
       }
     ]
   }
diff --git a/src/extensions/nativeExtensions/Code.ts b/src/extensions/nativeExtensions/Code.ts
index bbc2f09..51308bc 100644
--- a/src/extensions/nativeExtensions/Code.ts
+++ b/src/extensions/nativeExtensions/Code.ts
@@ -1,27 +1,29 @@
 import { Code as CodeOriginal } from 'tiptap-extensions'
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 import I18nText from '~/i18n/I18nText'
+import AbstractExtension from '~/extensions/AbstractExtension'
+import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
+import ExtensionActionRenderBtn from '~/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts'
 
 // TODO текст перед / после иконки. Сделать через массив: [new VuetifyIcon('code'), new TextForIcon('text')]
-export default class Code extends AbstractExtensionAdapter {
-  name: string = 'code'
-
+export default class Code extends AbstractExtension {
   constructor (options) {
     super(options, CodeOriginal)
   }
 
-  get availableButtons () {
+  get availableActions (): ExtensionActionInterface[] {
     return [
       {
-        name: this.name,
-        tooltip: new I18nText('extensions.Code.buttons.code.tooltip'),
-        icons: {
-          [VuetifyIconsGropus.md]: new VuetifyIcon('code'),
-          [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-code ' + faIconsSize),
-          [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-code-tags')
-        }
+        render: new ExtensionActionRenderBtn({
+          tooltip: new I18nText('extensions.Code.buttons.code.tooltip'),
+          icons: {
+            [VuetifyIconsGroups.md]: new VuetifyIcon('code'),
+            [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-code'),
+            [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-code-tags')
+          },
+          nativeExtensionName: 'code'
+        })
       }
     ]
   }
diff --git a/src/extensions/nativeExtensions/CodeBlock.ts b/src/extensions/nativeExtensions/CodeBlock.ts
index 8a21ad1..e42b775 100644
--- a/src/extensions/nativeExtensions/CodeBlock.ts
+++ b/src/extensions/nativeExtensions/CodeBlock.ts
@@ -1,27 +1,29 @@
 import { CodeBlock as CodeBlockOriginal } from 'tiptap-extensions'
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 import I18nText from '~/i18n/I18nText'
+import AbstractExtension from '~/extensions/AbstractExtension'
+import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
+import ExtensionActionRenderBtn from '~/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts'
 
 // TODO текст перед / после иконки. Сделать через массив: [new VuetifyIcon('code'), new TextForIcon('text')]
-export default class CodeBlock extends AbstractExtensionAdapter {
-  name: string = 'code_block'
-
+export default class CodeBlock extends AbstractExtension {
   constructor (options) {
     super(options, CodeBlockOriginal)
   }
 
-  get availableButtons () {
+  get availableActions (): ExtensionActionInterface[] {
     return [
       {
-        name: this.name,
-        tooltip: new I18nText('extensions.CodeBlock.buttons.codeBlock.tooltip'),
-        icons: {
-          [VuetifyIconsGropus.md]: new VuetifyIcon('code'),
-          [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-code ' + faIconsSize),
-          [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-code-tags')
-        }
+        render: new ExtensionActionRenderBtn({
+          tooltip: new I18nText('extensions.CodeBlock.buttons.codeBlock.tooltip'),
+          icons: {
+            [VuetifyIconsGroups.md]: new VuetifyIcon('code'),
+            [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-code'),
+            [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-code-tags')
+          },
+          nativeExtensionName: 'code_block'
+        })
       }
     ]
   }
diff --git a/src/extensions/nativeExtensions/HardBreak.ts b/src/extensions/nativeExtensions/HardBreak.ts
index 7b1388b..172ca2a 100644
--- a/src/extensions/nativeExtensions/HardBreak.ts
+++ b/src/extensions/nativeExtensions/HardBreak.ts
@@ -1,14 +1,13 @@
 import { HardBreak as HardBreakOriginal } from 'tiptap-extensions'
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
-
-export default class HardBreak extends AbstractExtensionAdapter {
-  name = null
+import AbstractExtension from '~/extensions/AbstractExtension'
+import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
 
+export default class HardBreak extends AbstractExtension {
   constructor (options) {
     super(options, HardBreakOriginal)
   }
 
-  get availableButtons () {
+  get availableActions (): ExtensionActionInterface[] {
     return []
   }
 }
diff --git a/src/extensions/nativeExtensions/Heading.ts b/src/extensions/nativeExtensions/Heading.ts
index c02331a..cea8b8f 100644
--- a/src/extensions/nativeExtensions/Heading.ts
+++ b/src/extensions/nativeExtensions/Heading.ts
@@ -1,25 +1,43 @@
 import { Heading as HeadingOriginal } from 'tiptap-extensions'
 import TextIcon from '~/extensions/nativeExtensions/icons/TextIcon'
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
-import { VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import I18nText from '~/i18n/I18nText'
+import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
+import ExtensionActionRenderBtn from '~/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts'
+import AbstractExtension from '~/extensions/AbstractExtension'
 
-export default class Heading extends AbstractExtensionAdapter {
+export default class Heading extends AbstractExtension {
   constructor (options) {
     super(options, HeadingOriginal)
   }
 
-  get availableButtons () {
+  get availableActions (): ExtensionActionInterface[] {
     return this.options.levels.map(level => ({
-      name: 'heading',
-      tooltip: new I18nText('extensions.Heading.buttons.heading.tooltip', { level }),
-      icons: {
-        [VuetifyIconsGropus.md]: new TextIcon('H' + level),
-        [VuetifyIconsGropus.fa]: new TextIcon('H' + level),
-        [VuetifyIconsGropus.mdi]: new TextIcon('H' + level)
-      },
-      clickOptions: { level },
-      isActiveOptions: { level }
+      render: new ExtensionActionRenderBtn({
+        tooltip: new I18nText('extensions.Heading.buttons.heading.tooltip', { level }),
+        icons: {
+          [VuetifyIconsGroups.md]: new TextIcon('H' + level),
+          [VuetifyIconsGroups.fa]: new TextIcon('H' + level),
+          [VuetifyIconsGroups.mdi]: new TextIcon('H' + level)
+        },
+        nativeExtensionName: 'heading',
+        onClickOptions: { level },
+        isActiveOptions: { level }
+      })
     }))
   }
+
+  // get availableButtons () {
+  //   return this.options.levels.map(level => ({
+  //     name: 'heading',
+  //     tooltip: new I18nText('extensions.Heading.buttons.heading.tooltip', { level }),
+  //     icons: {
+  //       [VuetifyIconsGroups.md]: new TextIcon('H' + level),
+  //       [VuetifyIconsGroups.fa]: new TextIcon('H' + level),
+  //       [VuetifyIconsGroups.mdi]: new TextIcon('H' + level)
+  //     },
+  //     clickOptions: { level },
+  //     isActiveOptions: { level }
+  //   }))
+  // }
 }
diff --git a/src/extensions/nativeExtensions/History.ts b/src/extensions/nativeExtensions/History.ts
index 74c8058..93fc321 100644
--- a/src/extensions/nativeExtensions/History.ts
+++ b/src/extensions/nativeExtensions/History.ts
@@ -1,33 +1,42 @@
 import { History as HistoryOriginal } from 'tiptap-extensions'
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 import I18nText from '~/i18n/I18nText'
+import AbstractExtension from '~/extensions/AbstractExtension'
+import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
+import ExtensionActionRenderBtn from '~/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts'
 
-export default class History extends AbstractExtensionAdapter {
+export default class History extends AbstractExtension {
   constructor (options) {
     super(options, HistoryOriginal)
   }
 
-  get availableButtons () {
+  get availableActions (): ExtensionActionInterface[] {
+    // если не нужны кнокпи
+    if (this.options.noActions) return []
+
     return [
       {
-        name: 'undo',
-        tooltip: new I18nText('extensions.History.buttons.undo.tooltip'),
-        icons: {
-          [VuetifyIconsGropus.md]: new VuetifyIcon('undo'),
-          [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-undo ' + faIconsSize),
-          [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-undo')
-        }
+        render: new ExtensionActionRenderBtn({
+          tooltip: new I18nText('extensions.History.buttons.undo.tooltip'),
+          icons: {
+            [VuetifyIconsGroups.md]: new VuetifyIcon('undo'),
+            [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-undo'),
+            [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-undo')
+          },
+          nativeExtensionName: 'undo'
+        })
       },
       {
-        name: 'redo',
-        tooltip: new I18nText('extensions.History.buttons.redo.tooltip'),
-        icons: {
-          [VuetifyIconsGropus.md]: new VuetifyIcon('redo'),
-          [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-redo ' + faIconsSize),
-          [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-redo')
-        }
+        render: new ExtensionActionRenderBtn({
+          tooltip: new I18nText('extensions.History.buttons.redo.tooltip'),
+          icons: {
+            [VuetifyIconsGroups.md]: new VuetifyIcon('redo'),
+            [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-redo'),
+            [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-redo')
+          },
+          nativeExtensionName: 'redo'
+        })
       }
     ]
   }
diff --git a/src/extensions/nativeExtensions/HorizontalRule.ts b/src/extensions/nativeExtensions/HorizontalRule.ts
index da58008..c6f9a81 100644
--- a/src/extensions/nativeExtensions/HorizontalRule.ts
+++ b/src/extensions/nativeExtensions/HorizontalRule.ts
@@ -1,27 +1,29 @@
 import { HorizontalRule as HorizontalRuleOriginal } from 'tiptap-extensions'
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 import TextIcon from '~/extensions/nativeExtensions/icons/TextIcon'
 import I18nText from '~/i18n/I18nText'
+import AbstractExtension from '~/extensions/AbstractExtension'
+import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
+import ExtensionActionRenderBtn from '~/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts'
 
-export default class HorizontalRule extends AbstractExtensionAdapter {
-  name: string = 'horizontal_rule'
-
+export default class HorizontalRule extends AbstractExtension {
   constructor (options) {
     super(options, HorizontalRuleOriginal)
   }
 
-  get availableButtons () {
+  get availableActions (): ExtensionActionInterface[] {
     return [
       {
-        name: this.name,
-        tooltip: new I18nText('extensions.HorizontalRule.buttons.horizontalRule.tooltip'),
-        icons: {
-          [VuetifyIconsGropus.md]: new TextIcon('—'),
-          [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-minus ' + faIconsSize),
-          [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-minus')
-        }
+        render: new ExtensionActionRenderBtn({
+          tooltip: new I18nText('extensions.HorizontalRule.buttons.horizontalRule.tooltip'),
+          icons: {
+            [VuetifyIconsGroups.md]: new TextIcon('—'),
+            [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-minus'),
+            [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-minus')
+          },
+          nativeExtensionName: 'horizontal_rule'
+        })
       }
     ]
   }
diff --git a/src/extensions/nativeExtensions/Italic.ts b/src/extensions/nativeExtensions/Italic.ts
index bcc3740..2132225 100644
--- a/src/extensions/nativeExtensions/Italic.ts
+++ b/src/extensions/nativeExtensions/Italic.ts
@@ -1,26 +1,28 @@
 import { Italic as ItalicOriginal } from 'tiptap-extensions'
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 import I18nText from '~/i18n/I18nText'
+import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
+import ExtensionActionRenderBtn from '~/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts'
+import AbstractExtension from '~/extensions/AbstractExtension'
 
-export default class Italic extends AbstractExtensionAdapter {
-  name: string = 'italic'
-
+export default class Italic extends AbstractExtension {
   constructor (options) {
     super(options, ItalicOriginal)
   }
 
-  get availableButtons () {
+  get availableActions (): ExtensionActionInterface[] {
     return [
       {
-        name: this.name,
-        tooltip: new I18nText('extensions.Italic.buttons.italic.tooltip'),
-        icons: {
-          [VuetifyIconsGropus.md]: new VuetifyIcon('format_italic'),
-          [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-italic ' + faIconsSize),
-          [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-format-italic')
-        }
+        render: new ExtensionActionRenderBtn({
+          tooltip: new I18nText('extensions.Italic.buttons.italic.tooltip'),
+          icons: {
+            [VuetifyIconsGroups.md]: new VuetifyIcon('format_italic'),
+            [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-italic'),
+            [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-format-italic')
+          },
+          nativeExtensionName: 'italic'
+        })
       }
     ]
   }
diff --git a/src/extensions/nativeExtensions/ListItem.ts b/src/extensions/nativeExtensions/ListItem.ts
index f0ca5d2..b874046 100644
--- a/src/extensions/nativeExtensions/ListItem.ts
+++ b/src/extensions/nativeExtensions/ListItem.ts
@@ -1,12 +1,13 @@
 import { ListItem as ListItemOriginal } from 'tiptap-extensions'
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
+import AbstractExtension from '~/extensions/AbstractExtension'
+import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
 
-export default class ListItem extends AbstractExtensionAdapter {
+export default class ListItem extends AbstractExtension {
   constructor (options) {
     super(options, ListItemOriginal)
   }
 
-  get availableButtons () {
+  get availableActions (): ExtensionActionInterface[] {
     return []
   }
 }
diff --git a/src/extensions/nativeExtensions/OrderedList.ts b/src/extensions/nativeExtensions/OrderedList.ts
index 4977c52..dac4202 100644
--- a/src/extensions/nativeExtensions/OrderedList.ts
+++ b/src/extensions/nativeExtensions/OrderedList.ts
@@ -1,24 +1,28 @@
 import { OrderedList as OrderedListOriginal } from 'tiptap-extensions'
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 import I18nText from '~/i18n/I18nText'
+import AbstractExtension from '~/extensions/AbstractExtension'
+import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
+import ExtensionActionRenderBtn from '~/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts'
 
-export default class OrderedList extends AbstractExtensionAdapter {
+export default class OrderedList extends AbstractExtension {
   constructor (options) {
     super(options, OrderedListOriginal)
   }
 
-  get availableButtons () {
+  get availableActions (): ExtensionActionInterface[] {
     return [
       {
-        name: 'ordered_list',
-        tooltip: new I18nText('extensions.OrderedList.buttons.orderedList.tooltip'),
-        icons: {
-          [VuetifyIconsGropus.md]: new VuetifyIcon('format_list_numbered'),
-          [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-list-ol ' + faIconsSize),
-          [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-format-list-numbered')
-        }
+        render: new ExtensionActionRenderBtn({
+          tooltip: new I18nText('extensions.OrderedList.buttons.orderedList.tooltip'),
+          icons: {
+            [VuetifyIconsGroups.md]: new VuetifyIcon('format_list_numbered'),
+            [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-list-ol'),
+            [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-format-list-numbered')
+          },
+          nativeExtensionName: 'ordered_list'
+        })
       }
     ]
   }
diff --git a/src/extensions/nativeExtensions/Paragraph.ts b/src/extensions/nativeExtensions/Paragraph.ts
index 9e29e2c..659b067 100644
--- a/src/extensions/nativeExtensions/Paragraph.ts
+++ b/src/extensions/nativeExtensions/Paragraph.ts
@@ -1,23 +1,27 @@
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 import I18nText from '~/i18n/I18nText'
+import AbstractExtension from '~/extensions/AbstractExtension'
+import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
+import ExtensionActionRenderBtn from '~/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts'
 
-export default class Paragraph extends AbstractExtensionAdapter {
+export default class Paragraph extends AbstractExtension {
   constructor (options) {
     super(options, null)
   }
 
-  get availableButtons () {
+  get availableActions (): ExtensionActionInterface[] {
     return [
       {
-        name: 'paragraph',
-        tooltip: new I18nText('extensions.Paragraph.buttons.paragraph.tooltip'),
-        icons: {
-          [VuetifyIconsGropus.md]: new VuetifyIcon('format_textdirection_l_to_r'),
-          [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-paragraph ' + faIconsSize),
-          [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-format-paragraph')
-        }
+        render: new ExtensionActionRenderBtn({
+          tooltip: new I18nText('extensions.Paragraph.buttons.paragraph.tooltip'),
+          icons: {
+            [VuetifyIconsGroups.md]: new VuetifyIcon('format_textdirection_l_to_r'),
+            [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-paragraph'),
+            [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-format-paragraph')
+          },
+          nativeExtensionName: 'paragraph'
+        })
       }
     ]
   }
diff --git a/src/extensions/nativeExtensions/Strike.ts b/src/extensions/nativeExtensions/Strike.ts
index b1bf53d..32e3c55 100644
--- a/src/extensions/nativeExtensions/Strike.ts
+++ b/src/extensions/nativeExtensions/Strike.ts
@@ -1,24 +1,28 @@
 import { Strike as StrikeOriginal } from 'tiptap-extensions'
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 import I18nText from '~/i18n/I18nText'
+import AbstractExtension from '~/extensions/AbstractExtension'
+import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
+import ExtensionActionRenderBtn from '~/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts'
 
-export default class Strike extends AbstractExtensionAdapter {
+export default class Strike extends AbstractExtension {
   constructor (options) {
     super(options, StrikeOriginal)
   }
 
-  get availableButtons () {
+  get availableActions (): ExtensionActionInterface[] {
     return [
       {
-        name: 'strike',
-        tooltip: new I18nText('extensions.Strike.buttons.strike.tooltip'),
-        icons: {
-          [VuetifyIconsGropus.md]: new VuetifyIcon('format_strikethrough'),
-          [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-strikethrough ' + faIconsSize),
-          [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-format-strikethrough')
-        }
+        render: new ExtensionActionRenderBtn({
+          tooltip: new I18nText('extensions.Strike.buttons.strike.tooltip'),
+          icons: {
+            [VuetifyIconsGroups.md]: new VuetifyIcon('format_strikethrough'),
+            [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-strikethrough'),
+            [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-format-strikethrough')
+          },
+          nativeExtensionName: 'strike'
+        })
       }
     ]
   }
diff --git a/src/extensions/nativeExtensions/Underline.ts b/src/extensions/nativeExtensions/Underline.ts
index 9abe1c2..821a96c 100644
--- a/src/extensions/nativeExtensions/Underline.ts
+++ b/src/extensions/nativeExtensions/Underline.ts
@@ -1,24 +1,28 @@
 import { Underline as UnderlineOriginal } from 'tiptap-extensions'
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 import I18nText from '~/i18n/I18nText'
+import AbstractExtension from '~/extensions/AbstractExtension'
+import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
+import ExtensionActionRenderBtn from '~/extensions/actions/renders/btn/ExtensionActionRenderBtn.ts'
 
-export default class Underline extends AbstractExtensionAdapter {
+export default class Underline extends AbstractExtension {
   constructor (options) {
     super(options, UnderlineOriginal)
   }
 
-  get availableButtons () {
+  get availableActions (): ExtensionActionInterface[] {
     return [
       {
-        name: 'underline',
-        tooltip: new I18nText('extensions.Underline.buttons.underline.tooltip'),
-        icons: {
-          [VuetifyIconsGropus.md]: new VuetifyIcon('format_underline'),
-          [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-underline ' + faIconsSize),
-          [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-format-underline')
-        }
+        render: new ExtensionActionRenderBtn({
+          tooltip: new I18nText('extensions.Underline.buttons.underline.tooltip'),
+          icons: {
+            [VuetifyIconsGroups.md]: new VuetifyIcon('format_underline'),
+            [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-underline'),
+            [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-format-underline')
+          },
+          nativeExtensionName: 'underline'
+        })
       }
     ]
   }
diff --git a/src/extensions/nativeExtensions/link/Link.ts b/src/extensions/nativeExtensions/link/Link.ts
index 3a5fae1..1cbe126 100644
--- a/src/extensions/nativeExtensions/link/Link.ts
+++ b/src/extensions/nativeExtensions/link/Link.ts
@@ -1,5 +1,5 @@
 import { Link as LinkOriginal } from 'tiptap-extensions'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 import I18nText from '~/i18n/I18nText'
 import AbstractExtension from '~/extensions/AbstractExtension'
@@ -24,9 +24,9 @@ export default class Link extends AbstractExtension {
               ? 'extensions.Link.buttons.isActive.tooltip'
               : 'extensions.Link.buttons.notActive.tooltip'),
           icons: {
-            [VuetifyIconsGropus.md]: new VuetifyIcon('link'),
-            [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fas fa-link ' + faIconsSize),
-            [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-link')
+            [VuetifyIconsGroups.md]: new VuetifyIcon('link'),
+            [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fas fa-link'),
+            [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-link')
           },
           nativeExtensionName,
           onClick ({ context, editor }) {
@@ -54,23 +54,23 @@ export default class Link extends AbstractExtension {
 
 // export const icons = {
 //   save: {
-//     [VuetifyIconsGropus.md]: new VuetifyIcon('check'),
-//     [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-check ' + faIconsSize),
-//     [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-check')
+//     [VuetifyIconsGroups.md]: new VuetifyIcon('check'),
+//     [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-check'),
+//     [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-check')
 //   },
 //   cancel: {
-//     [VuetifyIconsGropus.md]: new VuetifyIcon('link_off'),
-//     [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-unlink ' + faIconsSize),
-//     [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-link-off')
+//     [VuetifyIconsGroups.md]: new VuetifyIcon('link_off'),
+//     [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-unlink'),
+//     [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-link-off')
 //   },
 //   linkUpdate: {
-//     [VuetifyIconsGropus.md]: new VuetifyIcon('link'),
-//     [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fas fa-link ' + faIconsSize),
-//     [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-link')
+//     [VuetifyIconsGroups.md]: new VuetifyIcon('link'),
+//     [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fas fa-link'),
+//     [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-link')
 //   },
 //   linkAdd: {
-//     [VuetifyIconsGropus.md]: new VuetifyIcon('link'),
-//     [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-link ' + faIconsSize),
-//     [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-link-plus')
+//     [VuetifyIconsGroups.md]: new VuetifyIcon('link'),
+//     [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-link'),
+//     [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-link-plus')
 //   }
 // }
diff --git a/src/extensions/nativeExtensions/link/LinkWindow.vue b/src/extensions/nativeExtensions/link/LinkWindow.vue
index 1b5d5e2..9f62d38 100644
--- a/src/extensions/nativeExtensions/link/LinkWindow.vue
+++ b/src/extensions/nativeExtensions/link/LinkWindow.vue
@@ -5,9 +5,8 @@
   >
     <v-card>
       <v-card-title>
-        <!-- TODO i18n -->
         <span class="headline">
-          Link control
+          {{ $i18n.getMsg('extensions.Link.window.title') }}
         </span>
 
         <v-spacer />
@@ -22,7 +21,7 @@
       <v-card-text>
         <v-text-field
           v-model="form.href"
-          label="Href"
+          :label="$i18n.getMsg('extensions.Link.window.form.hrefLabel')"
         />
 
         <!--
@@ -37,8 +36,7 @@
           text
           @click="close"
         >
-          <!-- TODO i18n -->
-          Close
+          {{ $i18n.getMsg('extensions.Link.window.buttons.close') }}
         </v-btn>
 
         <v-btn
@@ -47,8 +45,7 @@
           text
           @click="apply"
         >
-          <!-- TODO i18n -->
-          {{ isRemove ? 'Remove' : 'Apply' }}
+          {{ $i18n.getMsg('extensions.Link.window.buttons.' + (isRemove ? 'remove' : 'apply')) }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -56,9 +53,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import { mixins } from 'vue-class-component'
 import { Component, Prop } from 'vue-property-decorator'
 import { VDialog, VCard, VCardTitle, VCardText, VCardActions, VBtn, VSpacer, VIcon, VTextField } from 'vuetify/lib'
+import I18nMixin from '~/mixins/I18nMixin'
 
 export const PROPS = {
   VALUE: 'value' as const,
@@ -71,7 +69,7 @@ export const PROPS = {
 @Component({
   components: { VDialog, VCard, VCardTitle, VCardText, VCardActions, VBtn, VSpacer, VIcon, VTextField }
 })
-export default class LinkWindow extends Vue {
+export default class LinkWindow extends mixins(I18nMixin) {
   @Prop({
     type: Boolean,
     default: false
diff --git a/src/extensions/nativeExtensions/AbstractExtensionAdapter.ts b/src/extensions/nativeExtensions/old/AbstractExtensionAdapter.ts
similarity index 100%
rename from src/extensions/nativeExtensions/AbstractExtensionAdapter.ts
rename to src/extensions/nativeExtensions/old/AbstractExtensionAdapter.ts
diff --git a/src/extensions/nativeExtensions/old/Blockquote.ts b/src/extensions/nativeExtensions/old/Blockquote.ts
index 69711d9..278206e 100644
--- a/src/extensions/nativeExtensions/old/Blockquote.ts
+++ b/src/extensions/nativeExtensions/old/Blockquote.ts
@@ -1,6 +1,6 @@
 import { Blockquote as BlockquoteOriginal } from 'tiptap-extensions'
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import AbstractExtensionAdapter from '~/extensions/nativeExtensions/old/AbstractExtensionAdapter'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 import I18nText from '~/i18n/I18nText'
 
@@ -15,9 +15,9 @@ export default class Blockquote extends AbstractExtensionAdapter {
         name: 'blockquote',
         tooltip: new I18nText('extensions.Blockquote.buttons.blockquote.tooltip'),
         icons: {
-          [VuetifyIconsGropus.md]: new VuetifyIcon('format_quote'),
-          [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-quote-right ' + faIconsSize),
-          [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-format-quote-close')
+          [VuetifyIconsGroups.md]: new VuetifyIcon('format_quote'),
+          [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-quote-right'),
+          [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-format-quote-close')
         }
       }
     ]
diff --git a/src/extensions/nativeExtensions/old/Link.ts b/src/extensions/nativeExtensions/old/Link.ts
index e3a9bee..5c08d01 100644
--- a/src/extensions/nativeExtensions/old/Link.ts
+++ b/src/extensions/nativeExtensions/old/Link.ts
@@ -1,28 +1,28 @@
 import { Link as LinkOriginal } from 'tiptap-extensions'
-import AbstractExtensionAdapter from '~/extensions/nativeExtensions/AbstractExtensionAdapter'
-import { faIconsSize, VuetifyIconsGropus } from '~/configs/theme'
+import AbstractExtensionAdapter from '~/extensions/nativeExtensions/old/AbstractExtensionAdapter'
+import { VuetifyIconsGroups } from '~/configs/theme'
 import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
 
 export const icons = {
   save: {
-    [VuetifyIconsGropus.md]: new VuetifyIcon('check'),
-    [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-check ' + faIconsSize),
-    [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-check')
+    [VuetifyIconsGroups.md]: new VuetifyIcon('check'),
+    [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-check'),
+    [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-check')
   },
   cancel: {
-    [VuetifyIconsGropus.md]: new VuetifyIcon('link_off'),
-    [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-unlink ' + faIconsSize),
-    [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-link-off')
+    [VuetifyIconsGroups.md]: new VuetifyIcon('link_off'),
+    [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-unlink'),
+    [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-link-off')
   },
   linkUpdate: {
-    [VuetifyIconsGropus.md]: new VuetifyIcon('link'),
-    [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fas fa-link ' + faIconsSize),
-    [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-link')
+    [VuetifyIconsGroups.md]: new VuetifyIcon('link'),
+    [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fas fa-link'),
+    [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-link')
   },
   linkAdd: {
-    [VuetifyIconsGropus.md]: new VuetifyIcon('link'),
-    [VuetifyIconsGropus.fa]: new VuetifyIcon('fas fa-link ' + faIconsSize),
-    [VuetifyIconsGropus.mdi]: new VuetifyIcon('mdi-link-plus')
+    [VuetifyIconsGroups.md]: new VuetifyIcon('link'),
+    [VuetifyIconsGroups.fa]: new VuetifyIcon('fas fa-link'),
+    [VuetifyIconsGroups.mdi]: new VuetifyIcon('mdi-link-plus')
   }
 }
 
diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts
index 561d37e..ecf2cf1 100644
--- a/src/i18n/en/index.ts
+++ b/src/i18n/en/index.ts
@@ -59,19 +59,6 @@ export default {
         }
       }
     },
-    Link: {
-      buttons: {
-        isActive: {
-          tooltip: 'Change Link'
-        },
-        notActive: {
-          tooltip: 'Add Link'
-        }
-      },
-      window: {
-        // ...
-      }
-    },
     OrderedList: {
       buttons: {
         orderedList: {
@@ -103,7 +90,28 @@ export default {
     Heading: {
       buttons: {
         heading: {
-          tooltip: args => args.level + ' level header'
+          tooltip: ({ level }) => level + ' level header'
+        }
+      }
+    },
+    Link: {
+      buttons: {
+        isActive: {
+          tooltip: 'Change Link'
+        },
+        notActive: {
+          tooltip: 'Add Link'
+        }
+      },
+      window: {
+        title: 'Link control',
+        form: {
+          hrefLabel: 'Href'
+        },
+        buttons: {
+          close: 'Close',
+          remove: 'Remove',
+          apply: 'Apply'
         }
       }
     }
diff --git a/src/i18n/es/index.ts b/src/i18n/es/index.ts
index 3c5f9b5..379042d 100644
--- a/src/i18n/es/index.ts
+++ b/src/i18n/es/index.ts
@@ -59,12 +59,6 @@ export default {
         }
       }
     },
-    Link: {
-      bubble: {
-        updateLink: 'Actualizar enlace',
-        addLink: 'Añadir enlace'
-      }
-    },
     OrderedList: {
       buttons: {
         orderedList: {
@@ -96,7 +90,28 @@ export default {
     Heading: {
       buttons: {
         heading: {
-          tooltip: args => `Nivel de encabezado ${args.level}`
+          tooltip: ({ level }) => `Nivel de encabezado ${level}`
+        }
+      }
+    },
+    Link: {
+      buttons: {
+        isActive: {
+          tooltip: 'Actualizar enlace'
+        },
+        notActive: {
+          tooltip: 'Añadir enlace'
+        }
+      },
+      window: {
+        title: 'Control de enlace',
+        form: {
+          hrefLabel: 'Href'
+        },
+        buttons: {
+          close: 'Cerrar',
+          remove: 'Eliminar',
+          apply: 'Aplicar'
         }
       }
     }
diff --git a/src/i18n/fr/index.ts b/src/i18n/fr/index.ts
index 54db2a0..6f6871e 100644
--- a/src/i18n/fr/index.ts
+++ b/src/i18n/fr/index.ts
@@ -59,12 +59,6 @@ export default {
         }
       }
     },
-    Link: {
-      bubble: {
-        updateLink: 'Mise à jour du lien',
-        addLink: 'Ajouter un lien'
-      }
-    },
     OrderedList: {
       buttons: {
         orderedList: {
@@ -99,6 +93,27 @@ export default {
           tooltip: args => args.level + ' niveau de titre'
         }
       }
+    },
+    Link: {
+      buttons: {
+        isActive: {
+          tooltip: 'Mise à jour du lien'
+        },
+        notActive: {
+          tooltip: 'Ajouter un lien'
+        }
+      },
+      window: {
+        title: 'Contrôle de lien',
+        form: {
+          hrefLabel: 'Href'
+        },
+        buttons: {
+          close: 'Proche',
+          remove: 'Retirer',
+          apply: 'Appliquer'
+        }
+      }
     }
   }
 }
diff --git a/src/i18n/pl/index.ts b/src/i18n/pl/index.ts
index 1017757..b6ee50b 100644
--- a/src/i18n/pl/index.ts
+++ b/src/i18n/pl/index.ts
@@ -59,12 +59,6 @@ export default {
         }
       }
     },
-    Link: {
-      bubble: {
-        updateLink: 'Zaktualizuj link',
-        addLink: 'Dodaj Link'
-      }
-    },
     OrderedList: {
       buttons: {
         orderedList: {
@@ -99,6 +93,27 @@ export default {
           tooltip: args => args.level + ' nagłówek'
         }
       }
+    },
+    Link: {
+      buttons: {
+        isActive: {
+          tooltip: 'Zaktualizuj link'
+        },
+        notActive: {
+          tooltip: 'Dodaj Link'
+        }
+      },
+      window: {
+        title: 'Kontrola link',
+        form: {
+          hrefLabel: 'Href'
+        },
+        buttons: {
+          close: 'Zamknąć',
+          remove: 'Usunąć',
+          apply: 'Zastosować'
+        }
+      }
     }
   }
 }
diff --git a/src/i18n/ru/index.ts b/src/i18n/ru/index.ts
index 714ea66..0a37812 100644
--- a/src/i18n/ru/index.ts
+++ b/src/i18n/ru/index.ts
@@ -59,12 +59,6 @@ export default {
         }
       }
     },
-    Link: {
-      bubble: {
-        updateLink: 'Обновить ссылку',
-        addLink: 'Добавить ссылку'
-      }
-    },
     OrderedList: {
       buttons: {
         orderedList: {
@@ -99,6 +93,27 @@ export default {
           tooltip: ({ level }) => `Заголовок ${level} уровня`
         }
       }
+    },
+    Link: {
+      buttons: {
+        isActive: {
+          tooltip: 'Изменить ссылку'
+        },
+        notActive: {
+          tooltip: 'Добавить ссылку'
+        }
+      },
+      window: {
+        title: 'Управление ссылкой',
+        form: {
+          hrefLabel: 'Href'
+        },
+        buttons: {
+          close: 'Закрыть',
+          remove: 'Удалить',
+          apply: 'Применить'
+        }
+      }
     }
   }
 }
diff --git a/types/index.d.ts b/types/index.d.ts
index f575ca9..934825b 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,7 +1,7 @@
 // !!! В этом файле не использовать алиасы в путях (e.g. "~")
 import Vue, { PluginObject } from 'vue'
 import { Framework } from 'vuetify'
-import { VuetifyIconsGropus } from '../src/configs/theme'
+import { VuetifyIconsGroups } from '../src/configs/theme'
 
 // тут нужно все экспортировать (export), а не использовтаь namepsace
 
@@ -15,11 +15,11 @@ export interface PluginInterface<T> extends PluginObject<T> {
 
 export interface OptionsInterface {
   vuetify: Framework
-  iconsGroup?: VuetifyIconsGropus
+  iconsGroup?: VuetifyIconsGroups
 }
 
 export interface VuePrototypePluginInterface {
-  iconsGroup: VuetifyIconsGropus
+  iconsGroup: VuetifyIconsGroups
 }
 
 declare module 'vue/types/vue' {