tiptapify 0.2.0 → 0.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

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

@@ -94,14 +94,28 @@ function hexToRgb(hex: string): Color {
 function hoverColor(color: string) {
   colorSelected.value = false
 
-  const interactiveStyles = editor.value.interactiveStyles
-
-  if (props.fontColor && interactiveStyles) {
-    editor.value.chain().focus().setColor(color).run()
+  if (props.fontColor) {
+    editor.value
+      .chain()
+      .focus()
+      .setColor(color)
+      .command(({ tr }) => {
+        tr.setMeta('addToHistory', false)
+        return true
+      })
+      .run()
   }
 
-  if (props.backgroundColor && interactiveStyles) {
-    editor.value.chain().focus().setHighlight({ color: color }).run()
+  if (props.backgroundColor) {
+    editor.value
+      .chain()
+      .focus()
+      .setHighlight({ color })
+      .command(({ tr }) => {
+        tr.setMeta('addToHistory', false)
+        return true
+      })
+      .run()
   }
 }
 
@@ -115,20 +129,52 @@ function resetColor() {
   }
 
   if (props.fontColor) {
-    editor.value.chain().focus().setColor(initialColor.value).run()
+    editor.value
+      .chain()
+      .focus()
+      .setColor(initialColor.value)
+      .command(({ tr }) => {
+        tr.setMeta('addToHistory', false)
+        return true
+      })
+      .run()
   }
 
   if (props.backgroundColor) {
     if (initialColor.value) {
-      editor.value.chain().focus().setHighlight({ color: initialColor.value }).run()
+      editor.value
+        .chain()
+        .focus()
+        .setHighlight({ color: initialColor.value })
+        .command(({ tr }) => {
+          tr.setMeta('addToHistory', false)
+          return true
+        })
+        .run()
     } else {
-      editor.value.chain().focus().unsetHighlight().run()
+      editor.value
+        .chain()
+        .focus()
+        .unsetHighlight()
+        .command(({ tr }) => {
+          tr.setMeta('addToHistory', false)
+          return true
+        })
+        .run()
     }
   }
 }
 
-function setColor() {
+function setColor(color: string) {
   colorSelected.value = true
+
+  if (props.fontColor) {
+    editor.value.chain().focus().setColor(color).run()
+  }
+
+  if (props.backgroundColor) {
+    editor.value.chain().focus().setHighlight({ color }).run()
+  }
 }
 
 function unsetColor() {
@@ -155,7 +201,7 @@ function isColorActive(color: string): boolean {
           :class="isColorActive(colorCode) ? 'tiptapify-style-color-item-active' : ''"
           @mouseenter="hoverColor(colorCode)"
           @mouseleave="resetColor()"
-          @click="setColor"
+          @click="setColor(colorCode)"
         >
           <div
             class="tiptapify-style-color-picker"
@@ -188,7 +234,7 @@ function isColorActive(color: string): boolean {
         </VCardItem>
 
         <VCardActions>
-          <VBtn variant="flat" color="primary" @click="setColor">
+          <VBtn variant="flat" color="primary" @click="setColor(customColor)">
             OK
           </VBtn>
           <VBtn variant="flat" color="grey-400" @click="colorPicker = !colorPicker; customColor = initialColor; resetColor()">

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

@@ -33,10 +33,8 @@ const selectedColor = computed(() => editor.value.getAttributes('textStyle').col
 <template>
   <VBtn
     :id="`tiptapify-color-button-${editor.instanceId}`"
-    :disabled="!editor.can().chain().focus().toggleHighlight().run()"
     :variant="variantBtn"
     size="32"
-    @click="editor.chain().focus().redo().run()"
   >
     <VTooltip activator="parent">
       {{ t('style.color.text') }}
@@ -45,7 +43,6 @@ const selectedColor = computed(() => editor.value.getAttributes('textStyle').col
     <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatColorText}`" />
     <VIcon
       :icon="`mdiSvg:${mdi.mdiColorHelper}`"
-      :disabled="!editor.can().chain().focus().toggleHighlight().run()"
       :color="activeColor"
       size="small"
       style="position: absolute; filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px)"

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

@@ -36,7 +36,6 @@ const selectedColor = computed(() => editor.value.getAttributes('highlight').col
     :disabled="!editor.can().chain().focus().toggleHighlight().run()"
     :variant="variantBtn"
     size="32"
-    @click="editor.chain().focus().redo().run()"
   >
     <VTooltip activator="parent">
       {{ t('style.color.highlight') }}