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
+
+```
+
## 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]"
/>
@@ -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..04feb95 100644
--- a/src/components/TiptapVuetify.vue
+++ b/src/components/TiptapVuetify.vue
@@ -2,6 +2,9 @@
@@ -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
+
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"
/>
@@ -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 @@