tiptapify 0.0.22 → 0.0.25

package/index.d.ts

@@ -1,6 +1,6 @@
 import { Editor } from "@tiptap/vue-3";
 import type { DefineComponent } from 'vue'
-import { toolbarSections } from "./src/types/toolbarSections";
+import { toolbarTypes } from "./src/types/toolbarTypes";
 
 export interface TiptapifyProps {
   content: string|object
@@ -18,7 +18,7 @@ export interface TiptapifyProps {
   defaultFontFamily: string
   fontMeasure: string
   rounded: string
-  customExtensions: toolbarSections
+  customExtensions: toolbarTypes
 }
 
 export interface TiptapifyEmits {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.22",
+  "version": "0.0.25",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -57,53 +57,51 @@
   "author": "Igor Voytovich",
   "license": "MIT",
   "repository": "https://github.com/IVoyt/tiptapify",
-  "packageManager": "pnpm@10.12.1",
+  "packageManager": "pnpm@10.15.1",
   "dependencies": {
-    "@tiptap/core": "^3.0.9",
-    "@tiptap/extension-blockquote": "^3.0.9",
-    "@tiptap/extension-bold": "^3.0.9",
-    "@tiptap/extension-bubble-menu": "^3.0.9",
-    "@tiptap/extension-code": "^3.0.9",
-    "@tiptap/extension-code-block": "^3.0.9",
-    "@tiptap/extension-code-block-lowlight": "^3.0.9",
-    "@tiptap/extension-color": "^3.0.9",
-    "@tiptap/extension-document": "^3.0.9",
-    "@tiptap/extension-floating-menu": "^3.0.9",
-    "@tiptap/extension-font-family": "^3.0.9",
-    "@tiptap/extension-hard-break": "^3.0.9",
-    "@tiptap/extension-heading": "^3.0.9",
-    "@tiptap/extension-highlight": "^3.0.9",
-    "@tiptap/extension-horizontal-rule": "^3.0.9",
-    "@tiptap/extension-image": "^3.0.9",
-    "@tiptap/extension-invisible-characters": "^3.0.9",
-    "@tiptap/extension-italic": "^3.0.9",
-    "@tiptap/extension-link": "^3.0.9",
-    "@tiptap/extension-list": "^3.0.9",
-    "@tiptap/extension-list-item": "^3.0.9",
-    "@tiptap/extension-paragraph": "^3.0.9",
-    "@tiptap/extension-placeholder": "^3.0.9",
-    "@tiptap/extension-strike": "^3.0.9",
-    "@tiptap/extension-subscript": "^3.0.9",
-    "@tiptap/extension-superscript": "^3.0.9",
-    "@tiptap/extension-table": "^3.0.9",
-    "@tiptap/extension-task-item": "^3.0.9",
-    "@tiptap/extension-task-list": "^3.0.9",
-    "@tiptap/extension-text": "^3.0.9",
-    "@tiptap/extension-text-align": "^3.0.9",
-    "@tiptap/extension-text-style": "^3.0.9",
-    "@tiptap/extension-typography": "^3.0.9",
-    "@tiptap/extension-underline": "^3.0.9",
-    "@tiptap/extension-youtube": "^3.0.9",
-    "@tiptap/extensions": "^3.0.9",
-    "@tiptap/pm": "^3.0.9",
-    "@tiptap/starter-kit": "^3.0.9",
-    "@tiptap/suggestion": "^3.0.9",
-    "@tiptap/vue-3": "^3.0.9",
+    "@tiptap/core": "^3.4.1",
+    "@tiptap/extension-blockquote": "^3.4.1",
+    "@tiptap/extension-bold": "^3.4.1",
+    "@tiptap/extension-bubble-menu": "^3.4.1",
+    "@tiptap/extension-code": "^3.4.1",
+    "@tiptap/extension-code-block": "^3.4.1",
+    "@tiptap/extension-code-block-lowlight": "^3.4.1",
+    "@tiptap/extension-color": "^3.4.1",
+    "@tiptap/extension-document": "^3.4.1",
+    "@tiptap/extension-floating-menu": "^3.4.1",
+    "@tiptap/extension-font-family": "^3.4.1",
+    "@tiptap/extension-hard-break": "^3.4.1",
+    "@tiptap/extension-heading": "^3.4.1",
+    "@tiptap/extension-highlight": "^3.4.1",
+    "@tiptap/extension-horizontal-rule": "^3.4.1",
+    "@tiptap/extension-image": "^3.4.1",
+    "@tiptap/extension-invisible-characters": "^3.4.1",
+    "@tiptap/extension-italic": "^3.4.1",
+    "@tiptap/extension-link": "^3.4.1",
+    "@tiptap/extension-list": "^3.4.1",
+    "@tiptap/extension-list-item": "^3.4.1",
+    "@tiptap/extension-paragraph": "^3.4.1",
+    "@tiptap/extension-placeholder": "^3.4.1",
+    "@tiptap/extension-strike": "^3.4.1",
+    "@tiptap/extension-subscript": "^3.4.1",
+    "@tiptap/extension-superscript": "^3.4.1",
+    "@tiptap/extension-table": "^3.4.1",
+    "@tiptap/extension-task-item": "^3.4.1",
+    "@tiptap/extension-task-list": "^3.4.1",
+    "@tiptap/extension-text": "^3.4.1",
+    "@tiptap/extension-text-align": "^3.4.1",
+    "@tiptap/extension-typography": "^3.4.1",
+    "@tiptap/extension-underline": "^3.4.1",
+    "@tiptap/extension-youtube": "^3.4.1",
+    "@tiptap/extensions": "^3.4.1",
+    "@tiptap/pm": "^3.4.1",
+    "@tiptap/suggestion": "^3.4.1",
+    "@tiptap/vue-3": "^3.4.1",
     "emoji.json": "^16.0.0",
     "highlight.js": "^11.11.1",
     "linkifyjs": "^4.3.2",
     "lowlight": "^3.3.0",
-    "vue-i18n": "^11.1.11"
+    "vue-i18n": "^11.1.12"
   },
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
@@ -113,18 +111,18 @@
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@rollup/plugin-alias": "^5.1.1",
-    "@types/node": "^22.17.0",
+    "@types/node": "^22.18.1",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vitejs/plugin-vue-jsx": "^4.2.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
-    "sass-embedded": "^1.89.2",
-    "tsx": "^4.20.3",
+    "sass-embedded": "^1.92.0",
+    "tsx": "^4.20.5",
     "typescript": "^5.9.2",
     "unplugin-vue-components": "^28.8.0",
     "vite": "^6.3.5",
     "vite-plugin-vuetify": "^2.1.2",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vue-tsc": "^2.2.12"
+    "vue-tsc": "^3.0.0"
   }
 }

package/src/components/Tiptapify.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 
-import { toolbarSections } from "@tiptapify/types/toolbarSections";
+import defaults from "@tiptapify/constants/defaults";
+import { itemsPropType, toolbarSections } from "@tiptapify/types/toolbarTypes";
 import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef, watch } from "vue";
 import { default as Toolbar } from "@tiptapify/components/Toolbar/Index.vue";
 import { Editor, EditorContent } from '@tiptap/vue-3'
@@ -20,10 +21,10 @@ const props = defineProps({
   locale: { type: String, default () { return 'en' } },
   content: String|Object,
   height: { type: Number, default () { return null } },
-  variantBtn: { type: String, default () { return 'elevated' } },
-  variantField: { type: String, default () { return 'solo' } },
+  variantBtn: { type: String, default () { return defaults.variantBtn } },
+  variantField: { type: String, default () { return defaults.variantField } },
   toolbar: { type: Boolean, default () { return true } },
-  items: { type: Array<string>, default() { return [] }},
+  items: { type: [Array, Object as PropType<itemsPropType>], default() { return [] }},
   itemsExclude: { type: Boolean, default() { return false } },
   bubbleMenu: { type: Boolean, default () { return true } },
   floatingMenu: { type: Boolean, default () { return true } },
@@ -35,19 +36,30 @@ const props = defineProps({
   fontMeasure: { type: String, default () { return 'px' } },
   rounded: { type: String, default () { return '0' } },
   customExtensions: { type: Array as PropType<toolbarSections>, default() { return [] } },
+  interactiveStyles: { type: Boolean, default() { return true } },
 })
 
 const appTheme = useTheme()
 const currentTheme = ref(appTheme.global.name)
 
+const propsItems = computed(() => props.items)
+const propsItemsExclude = computed(() => props.itemsExclude)
+
+const interactiveStyles = computed(() => props.interactiveStyles)
+
+function contentChanged() {
+  emit('content-changed', { html: editor.value?.getHTML(), json: editor.value?.getJSON() })
+}
+
 const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
     props.content,
     computed(() => props.placeholder || t('content.placeholder')).value,
     props.slashCommands,
-    props.customExtensions
+    props.customExtensions,
+    contentChanged
 )
 
-const emit = defineEmits(['update:modelValue', 'editor-ready']);
+const emit = defineEmits(['update:modelValue', 'editor-ready', 'content-changed']);
 
 provide('tiptapifyEditor', editor)
 provide('tiptapifyI18n', { t, setLocale })
@@ -56,6 +68,7 @@ editor.value?.chain().setFontFamily(props.defaultFontFamily).run()
 
 watch(() => editor.value, (editorInstance) => {
   if (editorInstance instanceof Editor) {
+    editor.value.interactiveStyles = interactiveStyles.value
     emit('editor-ready', {
       editor: editorInstance,
       getHTML: () => editorInstance.getHTML(),
@@ -68,6 +81,12 @@ watch(() => props.locale, () => {
   setLocale(props.locale)
 }, { immediate: true });
 
+watch(() => props.interactiveStyles, (_interactiveStyles) => {
+  if (editor.value instanceof Editor) {
+    editor.value.interactiveStyles = interactiveStyles
+  }
+})
+
 onBeforeUnmount(() => {
   editor.value?.destroy()
 })
@@ -80,8 +99,8 @@ onBeforeUnmount(() => {
         :variant-btn="variantBtn"
         :variant-field="variantField"
         :font-measure="fontMeasure"
-        :items="items"
-        :items-exclude="itemsExclude"
+        :items="propsItems"
+        :items-exclude="propsItemsExclude"
         :rounded="rounded"
         :custom-extensions="customExtensions"
         :theme="currentTheme"

package/src/components/Toolbar/Index.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { Editor } from "@tiptap/vue-3";
 import Items from "@tiptapify/components/Toolbar/Items.vue";
-import { defineProps, inject, PropType, Ref } from 'vue'
-import { toolbarSections } from '@tiptapify/types/toolbarSections'
+import defaults from "@tiptapify/constants/defaults";
+import { computed, defineProps, inject, PropType, Ref } from 'vue'
+import { itemsPropType, toolbarSections } from '@tiptapify/types/toolbarTypes'
 
-import items from "@tiptapify/components/Toolbar/items";
+import { default as items, availableItems } from "@tiptapify/components/Toolbar/items";
 
 const props = defineProps({
-  variantBtn: { type: String, default () { return 'elevated' }},
-  variantField: { type: String, default () { return 'solo' }},
-  items: { type: Array<string>, default() { return [] }},
+  variantBtn: { type: String, default () { return defaults.variantBtn } },
+  variantField: { type: String, default () { return defaults.variantField } },
+  items: { type: [Array, Object as PropType<itemsPropType>], default() { return [] } },
   itemsExclude: { type: Boolean, default() { return false } },
-  headingLevels: { type: Array<number>, default() { return [] }},
-  fontMeasure: { type: String, default () { return 'px' }},
+  fontMeasure: { type: String, default () { return 'px' } },
   customFonts: { type: Array<string>, default () { return [] } },
   customFontsOverride: { type: Boolean, default() { return false } },
   theme: { type: String, default() { return 'light' } },
@@ -23,8 +23,112 @@ const props = defineProps({
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
+const propsItems = computed(() => props.items)
+const propsItemsIsList = computed(() => Array.isArray(propsItems.value))
+const propsItemsExclude = computed(() => props.itemsExclude)
+
 // this prevents from overriding the default items
-const toolbarItems = [...items]
+let toolbarItems = [...Object.values(items)]
+const availableItemsKeys = Object.keys(availableItems)
+
+type toolbarItemsType = { [key: string]: { section: string, group: boolean, components: any[] } }
+propsItemsExclude.value ? prepareExcludeToolbarItems() : prepareToolbarItems()
+
+function prepareToolbarItems() {
+  const _toolbarItems: toolbarItemsType = {}
+
+  if (!propsItemsIsList.value) {
+    for (const propsItemSection in propsItems.value as itemsPropType) {
+      if (propsItems.value[propsItemSection].length === 0) {
+        continue
+      }
+
+      for (const propsItem of propsItems.value[propsItemSection]) {
+        const item = propsItem.split(':')
+        if (!availableItemsKeys.includes(item[0])) {
+          throw new Error(`The ${propsItem} is unknown extension. Please use one of the following: ${availableItemsKeys.join(', ')}`)
+        }
+
+        addToolbarItem(_toolbarItems, propsItems.value[propsItemSection], propsItem)
+      }
+    }
+  } else if (propsItems.value.length > 0) {
+    for (const propsItem of propsItems.value as string[]) {
+      const item = propsItem.split(':')
+      if (!availableItemsKeys.includes(item[0])) {
+        throw new Error(`The ${propsItem} is unknown extension. Please use one of the following: ${availableItemsKeys.join(', ')}`)
+      }
+
+      addToolbarItem(_toolbarItems, propsItems.value, propsItem)
+    }
+  } else {
+    return
+  }
+
+  toolbarItems = Object.values(_toolbarItems)
+}
+
+function prepareExcludeToolbarItems() {
+  const _toolbarItems: toolbarItemsType = {}
+  const excludeItems = []
+  for (const propsItemSection in propsItems.value as itemsPropType) {
+    for (const propsItem of propsItems.value[propsItemSection]) {
+      excludeItems.push(propsItem)
+    }
+  }
+
+  for (const item in availableItems) {
+    addToolbarItem(_toolbarItems, excludeItems, item)
+  }
+
+  toolbarItems = Object.values(_toolbarItems)
+}
+
+function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: any, itemTitle: string, group: boolean|null = null): boolean {
+  const item = itemTitle.split(':')
+  const _itemTitle = item[0]
+  const _itemOptions = item[1] ? item[1].split(',') : []
+
+  const itemSection = availableItems[_itemTitle]
+  const section = items[itemSection]
+
+  const component = section?.components.find((component: any) => component.name === _itemTitle)
+
+  let itemExists = itemsList.includes(itemTitle)
+  itemExists = propsItemsExclude.value ? itemExists : !itemExists
+  if (!component || itemExists) {
+    return false
+  }
+
+  if (group === null) {
+    group = section.group
+  }
+
+  if (typeof _toolbarItems[itemSection] === 'undefined') {
+    _toolbarItems[itemSection] = {
+      section: itemSection,
+      group,
+      components: []
+    }
+  }
+
+  if (_itemTitle === 'heading' && _itemOptions.length > 0) {
+    const paragraphIndex = _itemOptions.findIndex((item: any) => item === 'p')
+    const withParagraph = paragraphIndex > -1
+    if (withParagraph) {
+      _itemOptions.splice(paragraphIndex, 1)
+    }
+
+    component.props = {
+      withParagraph,
+      customHeadingLevels: _itemOptions,
+    }
+  }
+
+  _toolbarItems[itemSection].components.push(component)
+
+  return true
+}
 
 Object.keys(props.customExtensions).forEach((key: any) => {
   toolbarItems.push(props.customExtensions[key])

package/src/components/Toolbar/Items.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 
+import defaults from "@tiptapify/constants/defaults";
 import { defineProps, PropType } from 'vue'
 
-import { toolbarSections } from "@tiptapify/types/toolbarSections";
+import { toolbarSections } from "@tiptapify/types/toolbarTypes";
 
 defineProps({
-  variantBtn: { type: String, default () { return 'elevated' }},
+  variantBtn: { type: String, default () { return defaults.variantBtn }},
   items: { type: Array as PropType<toolbarSections>, default() { return {} }},
 })
 
@@ -13,14 +14,19 @@ defineProps({
 
 <template>
   <VToolbarItems class="py-2">
-    <template v-for="(item, key) in items" :key="item.section">
+    <template v-for="item in items" :key="item.section">
       <VBtnGroup v-if="item.group" elevation="4">
         <template v-for="sectionItem in item.components" :key="sectionItem.name">
-          <component :is="sectionItem.component" />
+          <component :is="sectionItem.component" v-bind="{ ...sectionItem.props ?? {} }" />
         </template>
       </VBtnGroup>
       <template v-else>
-        <component v-for="sectionItem in item.components" :key="sectionItem.name" :is="sectionItem.component" />
+        <component
+          v-for="sectionItem in item.components"
+          :key="sectionItem.name"
+          :is="sectionItem.component"
+          v-bind="{ variantBtn, ...sectionItem.props ?? {} }"
+        />
       </template>
 
       <div class="menu-divider"></div>

package/src/components/Toolbar/items.ts

@@ -7,7 +7,7 @@ import list from "@tiptapify/components/Toolbar/list";
 import media from "@tiptapify/components/Toolbar/media";
 import misc from "@tiptapify/components/Toolbar/misc";
 
-export default [
+const items = {
   style,
   format,
   formatExtra,
@@ -16,4 +16,16 @@ export default [
   list,
   actions,
   misc,
-]
+}
+
+const availableItems: { [key: string]: string } = {}
+for (const item of Object.values(items)) {
+  const itemComponents = item.components
+  for (const component of itemComponents) {
+    availableItems[component.name] = item.section
+  }
+}
+
+export default items
+
+export { availableItems }

package/src/components/Toolbar/style.ts

@@ -7,7 +7,7 @@ import { default as HighlightButton } from "@tiptapify/extensions/components/sty
 import { markRaw } from "vue";
 
 export default {
-  section: 'actions',
+  section: 'style',
   group: true,
   components: [
     {

package/src/components/editorExtensions.ts

@@ -33,7 +33,7 @@ import { ViewSource } from '@tiptapify/extensions/components/misc/source'
 import { Preview } from '@tiptapify/extensions/components/misc/preview'
 import SlashCommands from '@tiptapify/extensions/slash-commands'
 import suggestion from '@tiptapify/extensions/components/slashCommands/suggestion'
-import { toolbarSections } from "@tiptapify/types/toolbarSections";
+import { toolbarSections } from "@tiptapify/types/toolbarTypes";
 
 // load all languages with "all" or common languages with "common"
 import { common, createLowlight } from 'lowlight'

package/src/components/index.ts

@@ -1,19 +1,20 @@
 import { Editor, useEditor } from "@tiptap/vue-3";
 import { editorExtensions } from "@tiptapify/components/editorExtensions";
-import { toolbarSections } from "@tiptapify/types/toolbarSections";
+import { toolbarSections } from "@tiptapify/types/toolbarTypes";
 import { ShallowRef } from "vue";
 
 export function getTiptapEditor (
   content: any,
   placeholder: string,
   slashCommands: boolean = true,
-  customExtensions: toolbarSections
+  customExtensions: toolbarSections,
+  onUpdate: Function = () => {}
 ): ShallowRef<Editor | undefined> {
   const extensions = editorExtensions(placeholder, slashCommands, customExtensions)
-  const editor: ShallowRef<Editor | undefined> = useEditor({
+
+  return useEditor({
     content,
     extensions,
+    onUpdate: ({ editor }) => onUpdate()
   })
-
-  return editor
 }

package/src/constants/defaults.ts

@@ -0,0 +1,4 @@
+export default {
+  variantBtn: 'flat',
+  variantField: 'solo',
+}

package/src/extensions/components/actions/redo/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -14,6 +20,7 @@ const { t } = inject('tiptapifyI18n') as any
 <template>
   <VBtn
       :disabled="!editor.can().chain().focus().redo().run()"
+      :variant="variantBtn"
       @click="editor.chain().focus().redo().run()"
       size="32"
   >

package/src/extensions/components/actions/undo/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -14,6 +20,7 @@ const { t } = inject('tiptapifyI18n') as any
 <template>
   <VBtn
       :disabled="!editor.can().chain().focus().undo().run()"
+      :variant="variantBtn"
       @click="editor.chain().focus().undo().run()"
       size="32"
   >

package/src/extensions/components/alignment/center/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -14,6 +20,7 @@ const { t } = inject('tiptapifyI18n') as any
 <template>
   <VBtn
       :color="editor.isActive({ textAlign: 'center' }) ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.chain().focus().toggleTextAlign('center').run()"
       size="32"
   >

package/src/extensions/components/alignment/justify/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -14,6 +20,7 @@ const { t } = inject('tiptapifyI18n') as any
 <template>
   <VBtn
       :color="editor.isActive({ textAlign: 'justify' }) ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.chain().focus().toggleTextAlign('justify').run()"
       size="32"
   >

package/src/extensions/components/alignment/left/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -14,6 +20,7 @@ const { t } = inject('tiptapifyI18n') as any
 <template>
   <VBtn
       :color="editor.isActive({ textAlign: 'left' }) ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.chain().focus().toggleTextAlign('left').run()"
       size="32"
   >

package/src/extensions/components/alignment/right/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -14,6 +20,7 @@ const { t } = inject('tiptapifyI18n') as any
 <template>
   <VBtn
       :color="editor.isActive({ textAlign: 'right' }) ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.chain().focus().toggleTextAlign('right').run()"
       size="32"
   >

package/src/extensions/components/format/bold/Button.vue

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -15,6 +21,7 @@ const { t } = inject('tiptapifyI18n') as any
   <VBtn
       :color="editor.isActive('bold') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleBold().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleBold()"
       size="32"
   >