@kvass/rich-text 1.3.1 → 1.3.4

package/package.json

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

package/src/Component.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="richtext">
-    <BubbleMenu v-if="editor" :editor="editor">
+    <BubbleMenu v-if="editor && !disabled" :editor="editor">
       <div class="richtext__bubble">
         <form
           class="richtext__bubble-form"
@@ -51,7 +51,7 @@
       </button>
     </div>
 
-    <EditorContent class="richtext__editor" :editor="editor" />
+    <EditorContent class="richtext__editor" :editor="editor" :editable="!disabled" />
   </div>
 </template>
 
@@ -82,6 +82,10 @@ export default {
       if (this.editor.getHTML() === value) return
       this.editor.commands.setContent(this.value, false)
     },
+    disabled(value) {
+      if (!this.editor) return
+      this.editor.setOptions({ editable: !value })
+    },
   },
   data() {
     return {
@@ -157,7 +161,7 @@ export default {
           customFunc: () => {},
           icon: ['far', 'image'],
           appearance: {
-            menu: true,
+            menu: false,
             bubble: false,
           },
         },
@@ -264,8 +268,7 @@ export default {
     }
 
     & > div[contenteditable='false'] {
-      opacity: 0.4;
-      background-color: var(--vue-elder-input-color, #f2f2f2);
+      background-color: var(--vue-elder-input-color, #fafafa);
     }
   }
 
@@ -327,10 +330,17 @@ export default {
     transition: background-color 150ms ease-out;
     cursor: pointer;
 
-    &:hover,
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &:hover:not(:disabled),
     &.is-active {
       background-color: css-lighten('primary', 47%);
     }
   }
+  a {
+    word-break: break-all;
+  }
 }
 </style>