feat: add disabled flag

feat: add disabled flag feat: add disabled flag lint typo remove doubled prop lint typo
iliyaZelenko · May 17, 2020 · e044b01 · e044b01
1 parent 9e31479
commit e044b01
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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