From e044b015369bfe2b6c7005fcc95be5a3e150db07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josef=20Kol=C3=A1=C5=99?= <thejoeejoee@gmail.com>
Date: Sun, 17 May 2020 17:25:02 +0300
Subject: [PATCH 1/2] feat: add disabled flag

feat: add disabled flag

feat: add disabled flag

lint typo

remove doubled prop

lint typo
---
 README.md                                             | 11 +++++++++++
 src/components/ActionsRender.vue                      |  7 ++++++-
 src/components/TiptapVuetify.vue                      | 10 ++++++++++
 src/components/Toolbar.vue                            |  4 ++++
 src/const.ts                                          |  3 ++-
 .../actions/renders/btn/ExtensionActionRenderBtn.vue  |  7 ++++++-
 6 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 2520d50..e1c1897 100644
--- a/README.md
+++ b/README.md
@@ -342,6 +342,17 @@ For example, to get json instead:
 />
 ```
 
+### disabled
+
+Flag for disabling entire editor (disabled toolbar items and [ready-only](https://tiptap.scrumpy.io/read-only) content area). Default false.
+
+For example, disabled editor by component prop: 
+```vue
+<tiptap-vuetify
+  :disabled="editorDisabled"
+/>
+```
+
 ## Events
 
 ### init
diff --git a/src/components/ActionsRender.vue b/src/components/ActionsRender.vue
index 3d00894..5929540 100644
--- a/src/components/ActionsRender.vue
+++ b/src/components/ActionsRender.vue
@@ -8,6 +8,7 @@
         :context="$props[PROPS.CONTEXT]"
         :editor="$props[PROPS.EDITOR]"
         :dark="$props[PROPS.DARK]"
+        :disabled="$props[PROPS.DISABLED]"
       />
     </template>
   </div>
@@ -25,7 +26,8 @@ export const PROPS = {
   EDITOR: 'editor' as const,
   ACTIONS: 'actions' as const,
   CONTEXT: 'context' as const,
-  DARK: 'dark' as const
+  DARK: 'dark' as const,
+  DISABLED: 'disabled' as const
 }
 
 @Component({
@@ -37,6 +39,9 @@ export default class ActionsRender extends Vue {
   @Prop({ type: Object, required: true })
   readonly [PROPS.EDITOR]: Editor
 
+  @Prop({ type: Boolean, default: false })
+  readonly [PROPS.DISABLED]: boolean
+
   @Prop({
     type: Array,
     default: () => []
diff --git a/src/components/TiptapVuetify.vue b/src/components/TiptapVuetify.vue
index e175984..137f205 100644
--- a/src/components/TiptapVuetify.vue
+++ b/src/components/TiptapVuetify.vue
@@ -20,6 +20,7 @@
         :editor="editor"
         :actions="availableActions.toolbar"
         :toolbar-attributes="$props[PROPS.TOOLBAR_ATTRIBUTES]"
+        :disabled="$props[PROPS.DISABLED]"
       >
         <!-- Позволяет пользователю показывать свой тулбар -->
         <template
@@ -68,6 +69,9 @@ import AbstractExtensionInterface from '~/extensions/AbstractExtensionInterface'
   }
 })
 export default class TiptapVuetify extends Vue {
+  @Prop({ type: Boolean, default: false })
+  readonly [PROPS.DISABLED]: boolean
+
   @Prop({ type: String, default: '' })
   readonly [PROPS.VALUE]: string
 
@@ -146,6 +150,11 @@ export default class TiptapVuetify extends Vue {
     }
   }
 
+  @Watch('disabled')
+  onDisabledChange (val) {
+    if (this.editor) this.editor.setOptions({ editable: !val })
+  }
+
   @Watch('value')
   onValueChange (val) {
     if (this.emitAfterOnUpdate) {
@@ -215,6 +224,7 @@ export default class TiptapVuetify extends Vue {
     }
 
     this.editor = (new Editor({
+      editable: !this[PROPS.DISABLED],
       extensions,
       ...this[PROPS.EDITOR_PROPERTIES],
       editorProps: {
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index fe92986..92e9cc2 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -21,6 +21,7 @@
             :actions="actions"
             :context="menuBarContext"
             :editor="editor"
+            :disabled="disabled"
           />
         </v-toolbar>
       </slot>
@@ -45,6 +46,9 @@ import { VToolbar } from 'vuetify/lib'
   }
 })
 export default class Toolbar extends Vue {
+  @Prop({ type: Boolean, default: false })
+  readonly disabled: boolean
+
   @Prop({ type: Object, required: true })
   readonly editor: Editor
 
diff --git a/src/const.ts b/src/const.ts
index e8a6df7..530bd7e 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -19,7 +19,8 @@ export const PROPS = {
   OUTPUT_FORMAT: 'outputFormat' as const,
   TYPE: 'type' as const,
   MIN_HEIGHT: 'minHeight' as const,
-  MAX_HEIGHT: 'maxHeight' as const
+  MAX_HEIGHT: 'maxHeight' as const,
+  DISABLED: 'disabled' as const
 }
 
 export enum EDITOR_TYPES_ENUM {
diff --git a/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue b/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue
index 8bdc440..27511a6 100644
--- a/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue
+++ b/src/extensions/actions/renders/btn/ExtensionActionRenderBtn.vue
@@ -4,6 +4,7 @@
     <template #activator="{ on }">
       <!--TODO options.isActive сделать реактивным -->
       <v-btn
+        :disabled="disabled"
         :class="{
           'tiptap-vuetify-editor__action-render-btn': true,
           'v-btn--active': $props[PROPS.OPTIONS].isActive($props[PROPS.CONTEXT])
@@ -42,13 +43,17 @@ export const PROPS = {
   EDITOR: 'editor' as const,
   OPTIONS: 'options' as const,
   CONTEXT: 'context' as const,
-  DARK: 'dark' as const
+  DARK: 'dark' as const,
+  DISABLED: 'disabled' as const
 }
 
 @Component({
   components: { VTooltip, VBtn, VIcon }
 })
 export default class ExtensionActionRenderBtn extends Vue {
+  @Prop({ type: Boolean, default: false })
+  readonly [PROPS.DISABLED]: boolean
+
   @Prop({ type: Object, required: true })
   readonly [PROPS.EDITOR]: Editor
 

From 910d0e7db047bedf2699c46f1ea8dce6aa8cd66a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josef=20Kol=C3=A1=C5=99?= <thejoeejoee@gmail.com>
Date: Thu, 21 May 2020 20:11:52 +0300
Subject: [PATCH 2/2] added muted overlay for disabled editor

---
 src/components/TiptapVuetify.vue | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/components/TiptapVuetify.vue b/src/components/TiptapVuetify.vue
index 137f205..04feb95 100644
--- a/src/components/TiptapVuetify.vue
+++ b/src/components/TiptapVuetify.vue
@@ -2,6 +2,9 @@
   <div
     v-if="editor"
     class="tiptap-vuetify-editor"
+    :class="{
+      'tiptap-vuetify-editor--disabled': $props[PROPS.DISABLED]
+    }"
   >
     <bubble
       v-if="availableActions.bubbleMenu.length && editor.options.editable"
@@ -40,6 +43,9 @@
         :editor="editor"
         :style="contentDynamicStyles"
         class="tiptap-vuetify-editor__content"
+        :class="{
+          'tiptap-vuetify-editor__content--disabled': $props[PROPS.DISABLED]
+        }"
       />
 
       <slot name="footer" />
@@ -283,6 +289,9 @@ export default class TiptapVuetify extends Vue {
       outline: none !important
       margin: 20px !important
 
+    &--disabled
+      cursor: not-allowed
+
   /* Элемент не обязательно содрежится в .tiptap-vuetify-editor, может использоваться для отображения результата
   редактора в не редактора */
   .tiptap-vuetify-editor__content
@@ -329,4 +338,18 @@ export default class TiptapVuetify extends Vue {
           pointer-events: none
           height: 0
           font-style: italic
+
+    &--disabled
+      // same color for disabled text as default light vuetify theme: vuetify/src/styles/settings/_light.scss#L30
+      color rgba(0, 0, 0, 0.38)
+      &:after
+        // same as background as for filled v-text-input: vuetify/src/styles/settings/_light.scss#L87
+        background-color: rgba(0, 0, 0, 0.06)
+        position: absolute
+        content: ''
+        top: 0
+        left: 0
+        right: 0
+        bottom: 0
+
 </style>