tiptapify 0.0.22 → 0.0.25

package/src/extensions/components/format/italic/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('italic') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleItalic().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleItalic()"
       size="32"
   >

package/src/extensions/components/format/strike/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('strike') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleStrike().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleStrike()"
       size="32"
   >

package/src/extensions/components/format/underline/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('underline') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleUnderline().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleUnderline()"
       size="32"
   >

package/src/extensions/components/formatExtra/code/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('code') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleCode().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleCode()"
       size="32"
   >

package/src/extensions/components/formatExtra/codeBlock/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('codeBlock') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleCodeBlock().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleCodeBlock()"
       size="32"
   >

package/src/extensions/components/formatExtra/quote/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('blockquote') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleBlockquote().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleBlockquote()"
       size="32"
   >

package/src/extensions/components/formatExtra/sub/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('sub') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleSubscript().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleSubscript()"
       size="32"
   >

package/src/extensions/components/formatExtra/sup/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('sup') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleSuperscript().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleSuperscript()"
       size="32"
   >

package/src/extensions/components/list/bullet/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('bulletList') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleBulletList().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleBulletList()"
       size="32"
   >

package/src/extensions/components/list/indent/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
       :active="false"
       :disabled="!editor.can().sinkListItem('listItem')"
+      :variant="variantBtn"
       @click="editor.chain().focus().sinkListItem('listItem').run()"
       size="32"
   >

package/src/extensions/components/list/numbered/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('orderedList') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleOrderedList().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleOrderedList()"
       size="32"
   >

package/src/extensions/components/list/outdent/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
       :active="false"
       :disabled="!editor.can().liftListItem('listItem')"
+      :variant="variantBtn"
       @click="editor.chain().focus().liftListItem('listItem').run()"
       size="32"
   >

package/src/extensions/components/list/task/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('taskList') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleTaskList().run()"
+      :variant="variantBtn"
       @click="editor.commands.toggleTaskList()"
       size="32"
   >

package/src/extensions/components/media/emoji/Button.vue

@@ -6,6 +6,12 @@ import tiptapifyEmojis from "@tiptapify/extensions/emoji"
 import { computed, inject, Ref, ref, watch } from 'vue'
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.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
@@ -64,6 +70,7 @@ watch(() => tab.value, () => {
   <VBtn
       :id="`tiptapify-emoji-button-${editor.instanceId}`"
       :color="editor.isActive('image') ? 'primary' : ''"
+      :variant="variantBtn"
       size="32"
   >
     <VTooltip activator="parent">
@@ -104,7 +111,7 @@ watch(() => tab.value, () => {
           />
           <div class="tiptapify-emoji-container">
             <VWindow v-model="tab" direction="vertical">
-              <VWindowItem v-for="item of emojisRef" :value="item.group">
+              <VWindowItem v-for="item of emojisRef" :value="item.group" :transition="false" :reverse-transition="false">
                 <div
                     v-for="emojiItem in item.emojis"
                     class="tiptapify-emoji-container-item"
@@ -155,7 +162,6 @@ watch(() => tab.value, () => {
   cursor: pointer;
   width: 32px;
   height: 32px;
-  filter: drop-shadow(1px 2px 3px #777);
   transition: background-color 0.2s ease-in-out;
 }
 

package/src/extensions/components/media/image/Button.vue

@@ -6,6 +6,12 @@ import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import ImageDialog from "@tiptapify/extensions/components/media/image/ImageDialog.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
 <template>
   <VBtn
       :color="editor.isActive('image') ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.commands.showTiptapifyImage()"
       size="32"
   >

package/src/extensions/components/media/image/ImageDialog.vue

@@ -2,12 +2,13 @@
 
 import { Editor } from "@tiptap/vue-3";
 import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
+import defaults from "@tiptapify/constants/defaults";
 
 import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
 
 defineProps({
-  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 }}
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>

package/src/extensions/components/media/link/Button.vue

@@ -6,6 +6,12 @@ import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import LinkDialog from "@tiptapify/extensions/components/media/link/LinkDialog.vue";
 import { computed, 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
@@ -17,6 +23,7 @@ const icon = computed(() => editor.value.isActive('tiptapifyLink') ? `mdiSvg:${m
 <template>
   <VBtn
       :color="editor.isActive('link') ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.commands.showLink()"
       size="32"
   >

package/src/extensions/components/media/link/LinkDialog.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 
 import { Editor } from "@tiptap/vue-3";
+import defaults from "@tiptapify/constants/defaults";
 
 import { computed, inject, onMounted, onUnmounted, Ref, ref, watch } from 'vue'
 
 import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue"
 
 defineProps({
-  variantBtn: { type: String, default() { return 'elevated' }},
+  variantBtn: { type: String, default() { return defaults.variantBtn }},
   variantField: { type: String, default() { return 'outlined' }}
 })
 

package/src/extensions/components/media/table/Button.vue

@@ -8,6 +8,12 @@ import RowActions from "@tiptapify/extensions/components/media/table/RowActions.
 import TableBuilder from "@tiptapify/extensions/components/media/table/TableBuilder.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
@@ -31,6 +37,7 @@ const columnActionsDisabled = () => {
       :id="`tiptapify-table-button-${editor.instanceId}`"
       :color="editor.isActive('table') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().insertTable().run()"
+      :variant="variantBtn"
       size="32"
   >
     <BtnIcon :icon="`mdiSvg:${mdi.mdiTable}`" />

package/src/extensions/components/media/video/Button.vue

@@ -5,6 +5,12 @@ import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import VideoDialog from "@tiptapify/extensions/components/media/video/VideoDialog.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 icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" vie
 <template>
   <VBtn
       :color="editor.isActive('video') ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.commands.showTiptapifyVideo()"
       size="32"
   >

package/src/extensions/components/media/video/VideoDialog.vue

@@ -2,12 +2,13 @@
 
 import { Editor } from "@tiptap/vue-3";
 import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
+import defaults from "@tiptapify/constants/defaults";
 
 import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
 
 defineProps({
-  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 }}
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>

package/src/extensions/components/misc/break/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
@@ -12,7 +18,7 @@ const { t } = inject('tiptapifyI18n') as any
 </script>
 
 <template>
-  <VBtn @click="editor.chain().focus().setHardBreak().run()" size="32">
+  <VBtn @click="editor.chain().focus().setHardBreak().run()" size="32" :variant="variantBtn">
     <VTooltip activator="parent">
       {{ t('format.break') }}
     </VTooltip>

package/src/extensions/components/misc/formatClear/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().unsetAllMarks().run()"
+      :variant="variantBtn"
       @click="editor.chain().focus().unsetAllMarks().clearNodes().run()"
       size="32"
   >

package/src/extensions/components/misc/invisibleChar/Button.vue

@@ -4,6 +4,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 icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><pat
 <template>
   <VBtn
       :color="editor.storage.invisibleCharacters.visibility() ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.commands.toggleInvisibleCharacters()"
       size="32"
   >

package/src/extensions/components/misc/line/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
@@ -12,7 +18,7 @@ const { t } = inject('tiptapifyI18n') as any
 </script>
 
 <template>
-  <VBtn @click="editor.chain().focus().setHorizontalRule().run()" size="32">
+  <VBtn @click="editor.chain().focus().setHorizontalRule().run()" size="32" :variant="variantBtn">
     <VTooltip activator="parent">
       {{ t('format.line') }}
     </VTooltip>

package/src/extensions/components/misc/preview/Button.vue

@@ -6,6 +6,12 @@ import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
 import { inject, ref, 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,7 +21,7 @@ const dialog = ref(null)
 </script>
 
 <template>
-  <VBtn @click="dialog.open()" size="32">
+  <VBtn @click="dialog.open()" size="32" :variant="variantBtn">
     <VTooltip activator="parent">
       {{ t('misc.preview') }}
     </VTooltip>

package/src/extensions/components/misc/source/Button.vue

@@ -3,7 +3,13 @@
 import * as mdi from '@mdi/js'
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import ShowSourceDialog from "@tiptapify/extensions/components/misc/source/ShowSourceDialog.vue";
-import { inject, ref, Ref } from "vue";
+import { inject, ref } from "vue";
+
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
 
 const { t } = inject('tiptapifyI18n') as any
 
@@ -16,7 +22,7 @@ function showDialog() {
 </script>
 
 <template>
-  <VBtn @click="showDialog()" size="32">
+  <VBtn @click="showDialog()" size="32" :variant="variantBtn">
     <VTooltip activator="parent">
       {{ t('misc.source') }}
     </VTooltip>

package/src/extensions/components/misc/source/ShowSourceDialog.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { Editor } from "@tiptap/vue-3";
 import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
+import defaults from "@tiptapify/constants/defaults";
 import { ref, watch, inject, Ref } from 'vue'
 
 const props = defineProps({
   indent: { type: Number, default: 2 },
   variantBtn: { type: String, default: 'elevated' },
-  variantField: { type: String, default: 'solo' }
+  variantField: { type: String, default: defaults.variantField }
 })
 
 defineExpose({ showDialog })

package/src/extensions/components/style/StyleColor.vue

@@ -93,11 +93,13 @@ function hexToRgb(hex: string): Color {
 function hoverColor(color: string) {
   colorSelected.value = false
 
-  if (props.fontColor) {
+  const interactiveStyles = editor.value.interactiveStyles
+
+  if (props.fontColor && interactiveStyles) {
     editor.value.chain().focus().setColor(color).run()
   }
 
-  if (props.backgroundColor) {
+  if (props.backgroundColor && interactiveStyles) {
     editor.value.chain().focus().setHighlight({ color: color }).run()
   }
 }

package/src/extensions/components/style/color/Button.vue

@@ -7,8 +7,10 @@ import StyleColor from "@tiptapify/extensions/components/style/StyleColor.vue";
 import { computed, inject, Ref } from "vue";
 import { useTheme } from "vuetify/framework";
 
+import defaults from '@tiptapify/constants/defaults'
+
 defineProps({
-  customHeadingLevels: { type: Array<number>, default: () => [] }
+  variantBtn: { type: String, default: defaults.variantBtn }
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -30,6 +32,7 @@ const selectedColor = computed(() => editor.value.getAttributes('textStyle').col
   <VBtn
       :id="`tiptapify-color-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().toggleHighlight().run()"
+      :variant="variantBtn"
       @click="editor.chain().focus().redo().run()"
       size="32"
   >