tiptapify 0.1.4 → 0.1.6

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

@@ -1,18 +1,20 @@
 <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 { Editor } from '@tiptap/vue-3'
+import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
+import defaults from '@tiptapify/constants/defaults'
+import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
 
-import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
+import { computed, inject, onMounted, onUnmounted, PropType, Ref, ref, useTemplateRef } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default() { return defaults.variantBtn }},
-  variantField: { type: String, default() { return defaults.variantField }}
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
+  variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 type videoAttrs = {
   src: string,
@@ -27,7 +29,7 @@ const generateVideoAttrs = () => ({
 
 const attrs = ref(generateVideoAttrs())
 
-const dialog = ref(null)
+const dialog = useTemplateRef('dialog')
 
 const isDisabled = computed(() => {
   const { src } = attrs.value
@@ -97,20 +99,36 @@ onUnmounted(() => {
     <template #content>
       <VCardText>
         <VRow>
-<!--          <VCol cols="12">-->
-<!--            <VSelect v-model="attrs.type" density="compact" variant="outlined" :label="t('dialog.video.src')" />-->
-<!--          </VCol>-->
+          <!--          <VCol cols="12">-->
+          <!--            <VSelect v-model="attrs.type" density="compact" variant="outlined" :label="t('dialog.video.src')" />-->
+          <!--          </VCol>-->
 
           <VCol cols="12">
             <VTextField v-model="attrs.src" density="compact" variant="outlined" :label="t('dialog.video.src')" />
           </VCol>
 
           <VCol cols="12" md="3">
-            <VTextField v-model="attrs.width" type="number" density="compact" variant="outlined" :precision="0" :min="1" :label="t('dialog.video.width')" />
+            <VTextField
+              v-model="attrs.width"
+              type="number"
+              density="compact"
+              variant="outlined"
+              :precision="0"
+              :min="1"
+              :label="t('dialog.video.width')"
+            />
           </VCol>
 
           <VCol cols="12" md="3">
-            <VTextField v-model="attrs.height" type="number" density="compact" variant="outlined" :precision="0" :min="1" :label="t('dialog.video.height')" />
+            <VTextField
+              v-model="attrs.height"
+              type="number"
+              density="compact"
+              variant="outlined"
+              :precision="0"
+              :min="1"
+              :label="t('dialog.video.height')"
+            />
           </VCol>
         </VRow>
       </VCardText>
@@ -120,12 +138,12 @@ onUnmounted(() => {
       <VCardActions>
         <VRow>
           <VCol class="d-flex justify-start">
-            <VBtn color="warning" v-if="editor.isActive('image')" :variant="variantBtn" :disabled="isDisabled" @click="clear">
+            <VBtn v-if="editor.isActive('image')" color="warning" :variant="variantBtn" :disabled="isDisabled" @click="clear">
               {{ t('dialog.clear') }}
             </VBtn>
           </VCol>
           <VCol class="d-flex justify-end">
-            <VBtn :variant="variantBtn" @click="close" class="mr-2">
+            <VBtn :variant="variantBtn" class="mr-2" @click="close">
               {{ t('dialog.close') }}
             </VBtn>
             <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">

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

@@ -1,24 +1,26 @@
 <script lang="ts" setup>
 
 import * as mdi from '@mdi/js'
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import { inject, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { inject, PropType, Ref } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 </script>
 
 <template>
-  <VBtn @click="editor.chain().focus().setHardBreak().run()" size="32" :variant="variantBtn">
+  <VBtn size="32" :variant="variantBtn" @click="editor.chain().focus().setHardBreak().run()">
     <VTooltip activator="parent">
       {{ t('format.break') }}
     </VTooltip>

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

@@ -1,29 +1,31 @@
 <script lang="ts" setup>
 
 import * as mdi from '@mdi/js'
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import { inject, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { inject, PropType, Ref } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 </script>
 
 <template>
   <VBtn
-      :disabled="!editor.can().chain().focus().unsetAllMarks().run()"
-      :variant="variantBtn"
-      size="32"
-      color=""
-      @click="editor.chain().focus().unsetAllMarks().clearNodes().run()"
+    :disabled="!editor.can().chain().focus().unsetAllMarks().run()"
+    :variant="variantBtn"
+    size="32"
+    color=""
+    @click="editor.chain().focus().unsetAllMarks().clearNodes().run()"
   >
     <VTooltip activator="parent">
       {{ t('format.formatClear') }}

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

@@ -1,30 +1,32 @@
 <script lang="ts" setup>
 
 import * as mdi from '@mdi/js'
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import { inject, nextTick, ref, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { inject, nextTick, PropType, ref, Ref } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
-const dialog = ref(false)
+const showDialog = ref(false)
 
 async function dialogOpen() {
-  dialog.value = true
+  showDialog.value = true
 
   await changeEditorContainer('tiptapify-editor', 'tiptapify-editor-fullscreen')
 }
 
 async function dialogClose() {
-  dialog.value = false
+  showDialog.value = false
 
   await changeEditorContainer('tiptapify-editor-fullscreen', 'tiptapify-editor')
 }
@@ -32,31 +34,31 @@ async function dialogClose() {
 async function changeEditorContainer(source: string, target: string) {
   await nextTick()
 
-  const sourceElm = document.querySelector(`#${source}-${editor.value.instanceId} > div`);
+  const sourceElm = document.querySelector(`#${source}-${editor.value.instanceId} > div`)
 
-  const targetElm = document.querySelector(`#${target}-${editor.value.instanceId}`);
+  const targetElm = document.querySelector(`#${target}-${editor.value.instanceId}`)
 
-  targetElm.appendChild(sourceElm);
+  targetElm.appendChild(sourceElm)
 }
 
 </script>
 
 <template>
   <VBtn
-      @click="dialog ? dialogClose() : dialogOpen()"
-      size="32"
-      :color="dialog ? 'primary' : ''"
-      :variant="variantBtn"
+    size="32"
+    :color="showDialog ? 'primary' : ''"
+    :variant="variantBtn"
+    @click="showDialog ? dialogClose() : dialogOpen()"
   >
     <VTooltip activator="parent">
       {{ t('misc.fullscreen') }}
     </VTooltip>
-    <BtnIcon :icon="dialog ? `mdiSvg:${mdi.mdiFullscreenExit}` : `mdiSvg:${mdi.mdiFullscreen}`" />
+    <BtnIcon :icon="showDialog ? `mdiSvg:${mdi.mdiFullscreenExit}` : `mdiSvg:${mdi.mdiFullscreen}`" />
   </VBtn>
 
-  <VDialog v-model="dialog" fullscreen @close="dialogClose()" @update:modelValue="!dialog ? dialogClose() : ''">
+  <VDialog v-model="showDialog" fullscreen @close="dialogClose()" @update:model-value="!showDialog ? dialogClose() : ''">
     <VCard>
-      <div :id="`tiptapify-editor-fullscreen-${editor?.instanceId}`"></div>
+      <div :id="`tiptapify-editor-fullscreen-${editor?.instanceId}`" />
     </VCard>
   </VDialog>
 </template>

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

@@ -1,18 +1,20 @@
 <script lang="ts" setup>
 
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import { inject, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { inject, PropType, Ref } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="currentColor" d="M256 64L512 64C529.7 64 544 78.3 544 96C544 113.7 529.7 128 512 128L480 128L480 544C480 561.7 465.7 576 448 576C430.3 576 416 561.7 416 544L416 128L368 128L368 544C368 561.7 353.7 576 336 576C318.3 576 304 561.7 304 544L304 384L256 384C167.6 384 96 312.4 96 224C96 135.6 167.6 64 256 64z"/></svg>'
 
@@ -20,10 +22,10 @@ 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"
+    :color="editor.storage.invisibleCharacters.visibility() ? 'primary' : ''"
+    :variant="variantBtn"
+    size="32"
+    @click="editor.commands.toggleInvisibleCharacters()"
   >
     <VTooltip activator="parent">
       {{ t('misc.toggleInvisibleCharacters') }}

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

@@ -1,28 +1,30 @@
 <script lang="ts" setup>
 
 import * as mdi from '@mdi/js'
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import { inject, onMounted, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { inject, PropType, Ref } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 </script>
 
 <template>
   <VBtn
-      @click="editor.chain().focus().setHorizontalRule().run()"
-      :color="editor.isActive('horizontalRule') ? 'primary' : ''"
-      size="32"
-      :variant="variantBtn"
+    :color="editor.isActive('horizontalRule') ? 'primary' : ''"
+    size="32"
+    :variant="variantBtn"
+    @click="editor.chain().focus().setHorizontalRule().run()"
   >
     <VTooltip activator="parent">
       {{ t('format.line') }}

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

@@ -1,27 +1,29 @@
 <script lang="ts" setup>
 
 import * as mdi from '@mdi/js'
-import { Editor } from "@tiptap/vue-3";
-import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
-import { inject, ref, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { inject, PropType, ref, Ref, useTemplateRef } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
-const dialog = ref(null)
+const dialog = useTemplateRef('dialog')
 
 </script>
 
 <template>
-  <VBtn @click="dialog.open()" size="32" color="" :variant="variantBtn">
+  <VBtn size="32" color="" :variant="variantBtn" @click="dialog.open()">
     <VTooltip activator="parent">
       {{ t('misc.preview') }}
     </VTooltip>
@@ -31,7 +33,7 @@ const dialog = ref(null)
   <TiptapifyDialog ref="dialog" module="preview" fullscreen>
     <template #content>
       <VCardItem>
-        <div class="tiptap" v-html="editor.getHTML()"></div>
+        <div class="tiptap" v-html="editor.getHTML()" />
       </VCardItem>
     </template>
   </TiptapifyDialog>

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

@@ -1,19 +1,21 @@
 <script lang="ts" setup>
 
 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 } from "vue";
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import ShowSourceDialog from '@tiptapify/extensions/components/misc/source/ShowSourceDialog.vue'
+import { variantBtnTypes } from '@tiptapify/types/editor'
+import { inject, PropType, ref, useTemplateRef } from 'vue'
 
 import defaults from '@tiptapify/constants/defaults'
+import { ComposerTranslation } from 'vue-i18n'
 
 defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
 })
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
-const dialog = ref(null)
+const dialog = useTemplateRef('dialog')
 
 function showDialog() {
   dialog.value.showDialog()
@@ -22,7 +24,7 @@ function showDialog() {
 </script>
 
 <template>
-  <VBtn @click="showDialog()" size="32" color="" :variant="variantBtn">
+  <VBtn size="32" color="" :variant="variantBtn" @click="showDialog()">
     <VTooltip activator="parent">
       {{ t('misc.source') }}
     </VTooltip>

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

@@ -1,51 +1,53 @@
 <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'
+import { Editor } from '@tiptap/vue-3'
+import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
+import defaults from '@tiptapify/constants/defaults'
+import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+import { ref, watch, inject, Ref, PropType, useTemplateRef } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 const props = defineProps({
   indent: { type: Number, default: 2 },
-  variantBtn: { type: String, default: 'elevated' },
-  variantField: { type: String, default: defaults.variantField }
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return 'elevated' } },
+  variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
 })
 
 defineExpose({ showDialog })
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const dialog = ref(null)
+const dialog = useTemplateRef('dialog')
 const formatted = ref(false)
 const sourceCode = ref('')
 
 const formatHtml = (html: string): string => {
   const singleTags = ['img', 'hr', 'br', 'input']
-  let formatted = html.replace(/>/g, '>\n');
+  let formatted = html.replace(/>/g, '>\n')
 
-  formatted = formatted.replace(/([^>\n])</g, '$1\n<');
+  formatted = formatted.replace(/([^>\n])</g, '$1\n<')
 
-  const lines = formatted.split('\n');
-  let indentLevel = 0;
+  const lines = formatted.split('\n')
+  let indentLevel = 0
 
   return lines
       .map(line => {
         if (line.match(/<\//)) {
-          indentLevel = Math.max(0, indentLevel - 1);
+          indentLevel = Math.max(0, indentLevel - 1)
         }
 
-        const indentedLine = ' '.repeat(indentLevel * props.indent) + line;
+        const indentedLine = ' '.repeat(indentLevel * props.indent) + line
 
         const tag = line.match(/<\/?(\S+).*>/) ?? []
         if (!singleTags.includes(tag[1] ?? '') && line.match(/<[^\/][^>]*>/) && !line.match(/<.*\/>/)) {
-          indentLevel++;
+          indentLevel++
         }
 
-        return indentedLine;
+        return indentedLine
       })
       .filter(line => line.trim())
-      .join('\n');
+      .join('\n')
 }
 
 const unformatHtml = (html: string): string => {
@@ -58,11 +60,11 @@ const unformatHtml = (html: string): string => {
 function showDialog () {
   sourceCode.value = editor.value.getHTML()
 
-  dialog.value.open()
+  dialog.value?.open()
 }
 
 const saveChanges = () => {
-  dialog.value.close()
+  dialog.value?.close()
 
   editor.value.commands.setContent(sourceCode.value, true)
 }
@@ -87,18 +89,18 @@ watch(() => formatted.value, () => {
         </VContainer>
 
         <VTextarea
-            v-model="sourceCode"
-            no-resize
-            rows="100"
-            :variant="variantField"
-            class="source-code-area"
+          v-model="sourceCode"
+          no-resize
+          rows="100"
+          :variant="variantField"
+          class="source-code-area"
         />
       </VCardText>
     </template>
 
     <template #actions>
       <VCardActions>
-        <VSpacer></VSpacer>
+        <VSpacer />
         <VBtn :variant="variantBtn" @click="dialog.close()">
           {{ t('dialog.close') }}
         </VBtn>

package/src/extensions/components/slashCommands/CommandsList.vue

@@ -84,7 +84,9 @@ defineExpose({
         <span class="item-title">{{ item.title }}</span>
       </button>
     </template>
-    <div v-else class="no-result">No result</div>
+    <div v-else class="no-result">
+      No result
+    </div>
   </div>
 </template>
 

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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 
-import { Editor } from "@tiptap/vue-3";
+import { Editor } from '@tiptap/vue-3'
 
 import { computed, inject, Ref, ref } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 defineExpose({ open, close })
 
@@ -77,17 +78,17 @@ function calculateShadowColor(color: string): string {
 }
 
 function hexToRgb(hex: string): Color {
-  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
   hex = hex.replace(shorthandRegex, function(m, r, g, b) {
-    return r + r + g + g + b + b;
-  });
+    return r + r + g + g + b + b
+  })
 
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
   return {
     r: result ? parseInt(result[1], 16) : 0,
     g: result ? parseInt(result[2], 16) : 0,
     b: result ? parseInt(result[3], 16) : 0
-  };
+  }
 }
 
 function hoverColor(color: string) {
@@ -150,16 +151,16 @@ function isColorActive(color: string): boolean {
     <div class="tiptapify-style-color-container">
       <template v-for="colorCode in colors">
         <div
-            class="tiptapify-style-color-item"
-            :class="isColorActive(colorCode) ? 'tiptapify-style-color-item-active' : ''"
-            @mouseenter="hoverColor(colorCode)"
-            @mouseleave="resetColor()"
-            @click="setColor"
+          class="tiptapify-style-color-item"
+          :class="isColorActive(colorCode) ? 'tiptapify-style-color-item-active' : ''"
+          @mouseenter="hoverColor(colorCode)"
+          @mouseleave="resetColor()"
+          @click="setColor"
         >
           <div
-              class="tiptapify-style-color-picker"
-              :style="`background-color: ${colorCode}; box-shadow: 1px 1px 4px rgb(${calculateShadowColor(colorCode)});`"
-          ></div>
+            class="tiptapify-style-color-picker"
+            :style="`background-color: ${colorCode}; box-shadow: 1px 1px 4px rgb(${calculateShadowColor(colorCode)});`"
+          />
         </div>
       </template>
     </div>
@@ -171,10 +172,9 @@ function isColorActive(color: string): boolean {
         <VBtn v-bind="menuProps" color="default" variant="flat" block>
           <template #prepend>
             <div
-                class="tiptapify-style-color-picker"
-                :style="`background-color: ${customColor}; box-shadow: 1px 1px 4px rgb(0, 0, 0, .35);`"
-            >
-            </div>
+              class="tiptapify-style-color-picker"
+              :style="`background-color: ${customColor}; box-shadow: 1px 1px 4px rgb(0, 0, 0, .35);`"
+            />
           </template>
           <template #default>
             {{ t('style.color.custom') }}
@@ -188,15 +188,19 @@ function isColorActive(color: string): boolean {
         </VCardItem>
 
         <VCardActions>
-          <VBtn variant="flat" color="primary" @click="setColor">OK</VBtn>
-          <VBtn variant="flat" color="grey-400" @click="colorPicker = !colorPicker; customColor = initialColor; resetColor()">Cancel</VBtn>
+          <VBtn variant="flat" color="primary" @click="setColor">
+            OK
+          </VBtn>
+          <VBtn variant="flat" color="grey-400" @click="colorPicker = !colorPicker; customColor = initialColor; resetColor()">
+            Cancel
+          </VBtn>
         </VCardActions>
       </VCard>
     </VMenu>
 
     <VDivider class="mt-2 mb-2" />
 
-    <VBtn @click="unsetColor" color="default" block variant="flat">
+    <VBtn color="default" block variant="flat" @click="unsetColor">
       {{ t('style.color.unset') }}
     </VBtn>
   </VSheet>