@kvass/rich-text 1.4.9 → 1.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvass/rich-text",
-  "version": "1.4.9",
+  "version": "1.4.11",
   "description": "rich text component for kvass",
   "main": "src/Component.vue",
   "scripts": {
@@ -24,8 +24,8 @@
   "homepage": "https://github.com/Kvass-App/rich-text#readme",
   "devDependencies": {
     "cz-conventional-changelog": "^3.3.0",
-    "semantic-release-cli": "^5.4.0",
-    "semantic-release": "^17.3.0"
+    "semantic-release": "^17.3.0",
+    "semantic-release-cli": "^5.4.0"
   },
   "config": {
     "commitizen": {
@@ -34,10 +34,11 @@
   },
   "dependencies": {
     "@kvass/storage": "^1.1.0",
-    "@tiptap/extension-image": "^2.0.0-beta.220",
-    "@tiptap/extension-link": "^2.0.0-beta.220",
-    "@tiptap/starter-kit": "^2.0.0-beta.220",
-    "@tiptap/pm": "^2.0.0-beta.220",
-    "@tiptap/vue-2": "^2.0.0-beta.220"
+    "@tiptap/extension-image": "^2.2.2",
+    "@tiptap/extension-link": "^2.2.2",
+    "@tiptap/extension-superscript": "^2.2.2",
+    "@tiptap/pm": "^2.2.2",
+    "@tiptap/starter-kit": "^2.2.2",
+    "@tiptap/vue-2": "^2.2.2"
   }
 }

package/src/Component.vue

@@ -74,10 +74,20 @@
 import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-2'
 import Link from '@tiptap/extension-link'
 import Image from '@tiptap/extension-image'
+import Superscript from '@tiptap/extension-superscript'
 import CallToAction from './extensions/cta'
 import StarterKit from '@tiptap/starter-kit'
 
-const DefaultCommands = ['heading', 'bold', 'italic', 'orderedList', 'bulletList', 'link', 'cta']
+const DefaultCommands = [
+  'heading',
+  'bold',
+  'italic',
+  'superscript',
+  'orderedList',
+  'bulletList',
+  'link',
+  'cta',
+]
 const DefaultLabels = { primary: 'Primær', secondary: 'Sekundær' }
 
 export { DefaultCommands }
@@ -139,7 +149,7 @@ export default {
           icon: ['far', 'bold'],
           appearance: {
             menu: true,
-            bubble: false,
+            bubble: true,
           },
         },
         {
@@ -148,7 +158,7 @@ export default {
           icon: ['far', 'italic'],
           appearance: {
             menu: true,
-            bubble: false,
+            bubble: true,
           },
         },
         {
@@ -169,17 +179,28 @@ export default {
             bubble: false,
           },
         },
+        {
+          stateKey: 'superscript',
+          commandKey: 'toggleSuperscript',
+          icon: ['far', 'superscript'],
+          extension: Superscript,
+          appearance: {
+            menu: false,
+            bubble: true,
+          },
+        },
         {
           stateKey: 'link',
           commandKey: '---',
           customFunc: () => {
             this.bubbleState = 'link'
           },
-          disabled: this.editor.state.selection.empty,
+          disabled: this.editor && this.editor.state.selection.empty,
           icon: ['far', 'link'],
+          extension: Link,
           appearance: {
             menu: true,
-            bubble: false,
+            bubble: true,
           },
         },
         {
@@ -187,6 +208,7 @@ export default {
           commandKey: '---',
           customFunc: () => {},
           icon: ['far', 'image'],
+          extension: Image,
           appearance: {
             menu: false,
             bubble: false,
@@ -198,11 +220,12 @@ export default {
           customFunc: () => {
             this.bubbleState = 'cta'
           },
-          disabled: this.editor.state.selection.empty,
+          disabled: this.editor && this.editor.state.selection.empty,
           icon: ['far', 'mouse-pointer'],
+          extension: CallToAction,
           appearance: {
             menu: true,
-            bubble: false,
+            bubble: true,
           },
         },
       ]
@@ -243,7 +266,7 @@ export default {
     },
     bubbleShouldShow({ editor }) {
       return (
-        this.availableCommands
+        this.getCommands()
           .filter(a => a.appearance.bubble)
           .map(a => a.stateKey)
           .some(k => editor.isActive(k)) || !this.editor.state.selection.empty
@@ -252,17 +275,25 @@ export default {
     isInternalUrl(value) {
       if (!typeof value === 'string') return
       return ['/', '#'].some(v => value.startsWith(v))
-    }
+    },
   },
   mounted() {
     this.editor = new Editor({
       editable: !this.disabled,
-      extensions: [StarterKit, Link, Image, CallToAction],
+      extensions: [
+        StarterKit,
+        ...this.getCommands()
+          .map(({ extension }) => extension)
+          .filter(Boolean),
+      ],
       content: this.value,
       onUpdate: () => {
         let html = this.editor.getHTML().replace(/^<p>\s*<\/p>$/, '')
         this.$emit('input', html)
       },
+      onSelectionUpdate: ({ editor }) => {
+        if (!this.bubbleShouldShow({ editor })) this.bubbleState = null
+      },
     })
   },
   beforeDestroy() {
@@ -288,6 +319,10 @@ export default {
     background-color: var(--vue-elder-input-color, #fafafa);
   }
 
+  .tippy-content > div {
+    visibility: visible !important; // Fix for visibility bug
+  }
+
   &:not(.richtext--disabled):focus-within {
     outline: 1px solid var(--primary);
     border-radius: var(--border-radius, 3px);
@@ -388,10 +423,11 @@ export default {
       }
     }
 
-    &__button {
+    &-button {
       width: initial;
       padding: 0.5rem 0.75rem !important;
       color: white;
+      font-size: 0.6em;
 
       & + button {
         border-left: 1px solid rgba(white, 0.2) !important;