Merge branch 'master' into next

iliyaZelenko · May 22, 2020 · d6fcb37 · d6fcb37
2 parents 73a27b9 + c79b4bd
commit d6fcb37
Show file tree

Hide file tree

Showing 6 changed files with 62 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
@@ -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"
@@ -20,6 +23,7 @@
         :editor="editor"
         :actions="availableActions.toolbar"
         :toolbar-attributes="$props[PROPS.TOOLBAR_ATTRIBUTES]"
+        :disabled="$props[PROPS.DISABLED]"
       >
         <!-- Позволяет пользователю показывать свой тулбар -->
         <template
@@ -39,6 +43,9 @@
         :editor="editor"
         :style="contentDynamicStyles"
         class="tiptap-vuetify-editor__content"
+        :class="{
+          'tiptap-vuetify-editor__content--disabled': $props[PROPS.DISABLED]
+        }"
       />
 
       <slot name="footer" />
@@ -68,6 +75,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 +156,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 +230,7 @@ export default class TiptapVuetify extends Vue {
     }
 
     this.editor = (new Editor({
+      editable: !this[PROPS.DISABLED],
       extensions,
       ...this[PROPS.EDITOR_PROPERTIES],
       editorProps: {
@@ -273,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
@@ -319,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>
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