@kvass/rich-text 1.4.14 → 1.4.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvass/rich-text",
-  "version": "1.4.14",
+  "version": "1.4.16",
   "description": "rich text component for kvass",
   "main": "index.js",
   "scripts": {

package/src/Component.vue

@@ -32,7 +32,9 @@
             v-for="(item, index) in getCommands('bubble')"
             :key="'bubble' + index"
             class="richtext__bubble-button"
-            :class="{ 'is-active': editor.isActive(item.stateKey) }"
+            :class="{
+              'is-active': editor.isActive(item.isActiveKey || item.stateKey, item.commandProps),
+            }"
             :disabled="disabled || item.disabled"
             @click="
               item.customFunc
@@ -55,7 +57,9 @@
           v-for="(item, index) in getCommands('menu')"
           :key="'menubar' + index"
           type="button"
-          :class="{ 'is-active': editor.isActive(item.stateKey) }"
+          :class="{
+            'is-active': editor.isActive(item.isActiveKey || item.stateKey, item.commandProps),
+          }"
           :disabled="disabled || item.disabled"
           @click="
             item.customFunc
@@ -80,6 +84,7 @@ import StarterKit from '@tiptap/starter-kit'
 
 const DefaultCommands = [
   'heading',
+  'heading-h3',
   'bold',
   'italic',
   'superscript',
@@ -140,12 +145,24 @@ export default {
           stateKey: 'heading',
           commandKey: 'toggleHeading',
           commandProps: { level: 2 },
-          icon: ['far', 'heading'],
+          icon: ['far', 'h2'],
           appearance: {
             menu: true,
             bubble: false,
           },
         },
+        {
+          stateKey: 'heading-h3',
+          isActiveKey: 'heading',
+          commandKey: 'toggleHeading',
+          commandProps: { level: 3 },
+          icon: ['far', 'h3'],
+          appearance: {
+            menu: true,
+            bubble: false,
+          },
+        },
+
         {
           stateKey: 'bold',
           commandKey: 'toggleBold',
@@ -247,7 +264,12 @@ export default {
         case 'link':
           if (value)
             editor
-              .setLink({ href: value, target: this.isInternalUrl(value) ? '_self' : '_blank' })
+              .setLink({
+                href: value,
+                target: this.isInternalUrl(value) ? '_self' : '_blank',
+                //reset rel to prevent nofollow to be set
+                rel: '',
+              })
               .run()
           else editor.unsetLink().run()
           break
@@ -258,6 +280,8 @@ export default {
                 href: value,
                 'data-cta': this.bubbleOptions.theme,
                 target: this.isInternalUrl(value) ? '_self' : '_blank',
+                //reset rel to prevent nofollow to be set
+                rel: '',
               })
               .run()
           else editor.unsetCta().run()
@@ -292,6 +316,8 @@ export default {
       content: this.value,
       onUpdate: () => {
         let html = this.editor.getHTML().replace(/^<p>\s*<\/p>$/, '')
+
+        console.log(html)
         this.$emit('input', html)
       },
       onSelectionUpdate: ({ editor }) => {
@@ -331,6 +357,14 @@ export default {
     border-radius: var(--border-radius, 3px);
   }
 
+  h2 {
+    font-size: 1.5em !important;
+  }
+  h3 {
+    font-size: 1.17em !important;
+    margin: 0;
+  }
+
   &__editor {
     flex-grow: 1;