@kvass/rich-text 1.3.2 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvass/rich-text",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "rich text component for kvass",
   "main": "src/Component.vue",
   "scripts": {

package/src/Component.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="richtext">
-    <BubbleMenu v-if="editor" :editor="editor">
-      <div class="richtext__bubble">
+  <div class="richtext" :class="{ 'richtext--disabled': disabled }">
+    <BubbleMenu v-if="editor" :editor="editor" :should-show="bubbleShouldShow">
+      <div ref="bubble" class="richtext__bubble">
         <form
           class="richtext__bubble-form"
-          v-if="['link', 'cta'].includes(bubbleState)"
+          v-show="['link', 'cta'].includes(bubbleState)"
           @submit.prevent="setLink(linkUrl)"
         >
           <input
@@ -13,9 +13,15 @@
             v-model="linkUrl"
             placeholder="https://"
             ref="linkInput"
-            autofocus
             @keydown.esc="bubbleState = null"
           />
+          <select v-if="bubbleState === 'cta'" v-model="bubbleOptions.theme">
+            <option value="primary">{{ labels.primary }}</option>
+            <option value="secondary">{{ labels.secondary }}</option>
+          </select>
+          <button @click="setLink(linkUrl)" :disabled="!linkUrl" type="button">
+            <FontAwesomeIcon :icon="['far', 'check']" />
+          </button>
           <button @click="setLink(null)" type="button">
             <FontAwesomeIcon :icon="['far', 'times']" />
           </button>
@@ -25,7 +31,9 @@
           <button
             v-for="(item, index) in getCommands('bubble')"
             :key="'bubble' + index"
+            class="richtext__bubble-button"
             :class="{ 'is-active': editor.isActive(item.stateKey) }"
+            :disabled="disabled || item.disabled"
             @click="
               item.customFunc
                 ? item.customFunc()
@@ -39,19 +47,26 @@
       </div>
     </BubbleMenu>
 
-    <div v-if="editor && !disabled" class="richtext__menubar">
-      <button
-        v-for="(item, index) in getCommands('menu')"
-        :key="'menubar' + index"
-        type="button"
-        :class="{ 'is-active': editor.isActive(item.stateKey) }"
-        @click="editor.chain().focus()[item.commandKey](item.commandProps).run()"
-      >
-        <FontAwesomeIcon :icon="item.icon" size="sm" />
-      </button>
-    </div>
+    <EditorContent class="richtext__editor" ref="editor" :editor="editor" :editable="!disabled" />
 
-    <EditorContent class="richtext__editor" :editor="editor" />
+    <div v-if="editor" class="richtext__menubar">
+      <div class="richtext__menubar-buttons">
+        <button
+          v-for="(item, index) in getCommands('menu')"
+          :key="'menubar' + index"
+          type="button"
+          :class="{ 'is-active': editor.isActive(item.stateKey) }"
+          :disabled="disabled || item.disabled"
+          @click="
+            item.customFunc
+              ? item.customFunc()
+              : editor.chain().focus()[item.commandKey](item.commandProps).run()
+          "
+        >
+          <FontAwesomeIcon :icon="item.icon" size="sm" />
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -59,10 +74,11 @@
 import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-2'
 import Link from '@tiptap/extension-link'
 import Image from '@tiptap/extension-image'
-import CallToAction from './extensions/CallToAction'
+import CallToAction from './extensions/cta'
 import StarterKit from '@tiptap/starter-kit'
 
 const DefaultCommands = ['heading', 'bold', 'italic', 'orderedList', 'bulletList', 'link', 'cta']
+const DefaultLabels = { primary: 'Primær', secondary: 'Sekundær' }
 
 export { DefaultCommands }
 export default {
@@ -76,18 +92,32 @@ export default {
       type: Array,
       default: () => DefaultCommands,
     },
+    labels: {
+      type: Object,
+      default: () => DefaultLabels,
+    },
   },
   watch: {
     value(value) {
       if (this.editor.getHTML() === value) return
       this.editor.commands.setContent(this.value, false)
     },
+    disabled(value) {
+      if (!this.editor) return
+      this.editor.setOptions({ editable: !value })
+    },
+    bubbleState(value) {
+      if (!value) return
+      this.$refs.editor.$el.children[0].focus()
+      setTimeout(() => this.$refs.linkInput.focus(), 1)
+    },
   },
   data() {
     return {
       editor: null,
       linkUrl: null,
       bubbleState: null,
+      bubbleOptions: { theme: 'primary' },
     }
   },
   computed: {
@@ -109,7 +139,7 @@ export default {
           icon: ['far', 'bold'],
           appearance: {
             menu: true,
-            bubble: true,
+            bubble: false,
           },
         },
         {
@@ -118,7 +148,7 @@ export default {
           icon: ['far', 'italic'],
           appearance: {
             menu: true,
-            bubble: true,
+            bubble: false,
           },
         },
         {
@@ -145,10 +175,11 @@ export default {
           customFunc: () => {
             this.bubbleState = 'link'
           },
+          disabled: this.editor.state.selection.empty,
           icon: ['far', 'link'],
           appearance: {
-            menu: false,
-            bubble: true,
+            menu: true,
+            bubble: false,
           },
         },
         {
@@ -167,10 +198,11 @@ export default {
           customFunc: () => {
             this.bubbleState = 'cta'
           },
+          disabled: this.editor.state.selection.empty,
           icon: ['far', 'mouse-pointer'],
           appearance: {
-            menu: false,
-            bubble: true,
+            menu: true,
+            bubble: false,
           },
         },
       ]
@@ -191,7 +223,7 @@ export default {
           else editor.unsetLink().run()
           break
         case 'cta':
-          if (value) editor.setCta({ href: value }).run()
+          if (value) editor.setCta({ href: value, 'data-cta': this.bubbleOptions.theme }).run()
           else editor.unsetCta().run()
           break
       }
@@ -199,6 +231,14 @@ export default {
       this.bubbleState = null
       this.linkUrl = null
     },
+    bubbleShouldShow({ editor }) {
+      return (
+        this.availableCommands
+          .filter(a => a.appearance.bubble)
+          .map(a => a.stateKey)
+          .some(k => editor.isActive(k)) || !this.editor.state.selection.empty
+      )
+    },
   },
   mounted() {
     this.editor = new Editor({
@@ -226,11 +266,25 @@ export default {
 @import './styles/_mixins';
 .richtext {
   flex-grow: 1;
+  display: flex;
+  flex-direction: column-reverse;
+
+  &--disabled {
+    background-color: var(--vue-elder-input-color, #fafafa);
+  }
+
+  &:not(.richtext--disabled):focus-within {
+    outline: 1px solid var(--primary);
+    border-radius: var(--border-radius, 3px);
+  }
 
   &__editor {
-    [contenteditable='true'] {
-      padding: 1rem;
-      min-height: 10rem;
+    flex-grow: 1;
+
+    .ProseMirror {
+      padding: 0rem 1rem 1rem;
+      min-height: 6rem;
+      height: 100%;
 
       p:first-child {
         margin-top: 0;
@@ -244,48 +298,69 @@ export default {
       }
 
       &:focus {
-        outline: 1px solid css-alpha('primary', 0.3);
-        border-radius: 0 0 var(--border-radius) var(--border-radius);
+        outline: none;
       }
 
       img {
         max-width: 100%;
       }
 
-      a[data-cta='primary'] {
-        background-color: var(--primary);
-        color: white;
+      a[data-cta] {
         padding: 0.75em 1.5em;
         border-radius: var(--border-radius);
         text-decoration: none;
 
         display: inline-block;
       }
-    }
 
-    & > div[contenteditable='false'] {
-      opacity: 0.4;
-      background-color: var(--vue-elder-input-color, #f2f2f2);
+      a[data-cta='primary'] {
+        background-color: var(--primary);
+        color: var(--primary-contrast);
+      }
+
+      a[data-cta='secondary'] {
+        background-color: var(--secondary);
+        color: var(--secondary-contrast);
+      }
     }
   }
 
   &__bubble {
     display: flex;
     background-color: var(--dark);
+    color: white;
     border-radius: var(--border-radius);
 
     &-form {
       display: flex;
 
+      button,
+      select {
+        background-color: transparent;
+        color: inherit;
+        border: none;
+        border-left: 1px solid rgba(white, 0.1);
+      }
+
       button {
-        padding: 0.5rem 1rem !important;
+        padding: 0.5rem;
+        min-width: 2.5rem;
+
+        &:disabled {
+          opacity: 0.5;
+          background-color: rgba(white, 0.1);
+        }
+      }
+
+      select {
+        padding: 0.5rem !important;
       }
     }
 
     &-input {
       font: inherit;
       border: none;
-      padding: 5px;
+      padding: 0.5rem;
       background-color: transparent;
       color: #fff !important;
 
@@ -294,9 +369,8 @@ export default {
       }
     }
 
-    button {
-      border: none !important ;
-      width: initial !important;
+    &__button {
+      width: initial;
       padding: 0.5rem 0.75rem !important;
       color: white;
 
@@ -316,21 +390,60 @@ export default {
   }
 
   &__menubar {
-    background-color: css-alpha('border-color', 0.2);
-    border-bottom: 1px solid var(--border-color);
-  }
+    padding: 0.75rem;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+
+    &-buttons {
+      width: max-content;
+      box-shadow: 0 2px 4px -2px rgba(black, 0.1);
+    }
 
-  button {
-    padding: 0.5rem 0.5rem;
-    width: 2.5rem;
-    border-right: 1px solid var(--border-color);
-    transition: background-color 150ms ease-out;
-    cursor: pointer;
+    button {
+      padding: 0.5rem;
+      min-width: 2.5rem;
+      border: 1px solid var(--border-color);
+      cursor: pointer;
+      background-color: #ffffff;
 
-    &:hover,
-    &.is-active {
-      background-color: css-lighten('primary', 47%);
+      &:focus-visible {
+        position: relative;
+        border-radius: var(--border-radius, 3px);
+        outline: 1px solid var(--primary) !important;
+      }
+
+      &:first-child {
+        border-top-left-radius: var(--border-radius, 3px);
+        border-bottom-left-radius: var(--border-radius, 3px);
+      }
+
+      &:last-child {
+        border-top-right-radius: var(--border-radius, 3px);
+        border-bottom-right-radius: var(--border-radius, 3px);
+      }
+
+      & + button {
+        border-left: none;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+
+      &:hover:not(:disabled),
+      &.is-active {
+        background-color: darken(#ffffff, 3%);
+      }
     }
   }
+
+  a {
+    word-break: break-all;
+  }
+
+  .tippy-box {
+    max-width: initial !important;
+  }
 }
 </style>