Skip to content

Commit

Permalink
Merge branch 'master' into next
Browse files Browse the repository at this point in the history
  • Loading branch information
iliyaZelenko committed May 22, 2020
2 parents 73a27b9 + c79b4bd commit d6fcb37
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 3 deletions.
11 changes: 11 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 6 additions & 1 deletion src/components/ActionsRender.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
:context="$props[PROPS.CONTEXT]"
:editor="$props[PROPS.EDITOR]"
:dark="$props[PROPS.DARK]"
:disabled="$props[PROPS.DISABLED]"
/>
</template>
</div>
Expand All @@ -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({
Expand All @@ -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: () => []
Expand Down
33 changes: 33 additions & 0 deletions src/components/TiptapVuetify.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -20,6 +23,7 @@
:editor="editor"
:actions="availableActions.toolbar"
:toolbar-attributes="$props[PROPS.TOOLBAR_ATTRIBUTES]"
:disabled="$props[PROPS.DISABLED]"
>
<!-- Позволяет пользователю показывать свой тулбар -->
<template
Expand All @@ -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" />
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -215,6 +230,7 @@ export default class TiptapVuetify extends Vue {
}
this.editor = (new Editor({
editable: !this[PROPS.DISABLED],
extensions,
...this[PROPS.EDITOR_PROPERTIES],
editorProps: {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
4 changes: 4 additions & 0 deletions src/components/Toolbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
:actions="actions"
:context="menuBarContext"
:editor="editor"
:disabled="disabled"
/>
</v-toolbar>
</slot>
Expand All @@ -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
Expand Down
3 changes: 2 additions & 1 deletion src/const.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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])
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit d6fcb37

Please sign in to comment.