Skip to content

Commit

Permalink
fix: toolbar disabled buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@gbicou
gbicou committed Apr 21, 2023
1 parent 9646e5d commit 08aabb8
Showing 1 changed file with 32 additions and 16 deletions.
48 changes: 32 additions & 16 deletions src/tiptap-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@
<div class="tiptap-editor" :class="{ disabled: props.disabled }">
<bubble-menu class="tiptap-editor__bubble" :editor="editor" :tippy-options="{ duration: 100 }">
<v-chip
v-if="editorExtensions.includes('bold')"
v-if="editorExtensions.includes('bold') && editor.can().toggleBold()"
x-small
@click="editor.chain().focus().toggleBold().run()"
:outlined="!editor.isActive('bold')"
>
{{ t("wysiwyg_options.bold").toLowerCase() }}
</v-chip>
<v-chip
v-if="editorExtensions.includes('italic')"
v-if="editorExtensions.includes('italic') && editor.can().toggleItalic()"
x-small
@click="editor.chain().focus().toggleItalic().run()"
:outlined="!editor.isActive('italic')"
>
{{ t("wysiwyg_options.italic").toLowerCase() }}
</v-chip>
<v-chip
v-if="editorExtensions.includes('strike')"
v-if="editorExtensions.includes('strike') && editor.can().toggleStrike()"
x-small
@click="editor.chain().focus().toggleStrike().run()"
:outlined="!editor.isActive('strike')"
Expand All @@ -35,7 +35,7 @@
v-tooltip="t('wysiwyg_options.bold') + ' - ' + translateShortcut(['meta', 'b'])"
small
icon
:disabled="props.disabled"
:disabled="props.disabled || !editor.can().toggleBold()"
:active="editor.isActive('bold')"
@click="editor.chain().focus().toggleBold().run()"
>
Expand All @@ -47,7 +47,7 @@
v-tooltip="t('wysiwyg_options.italic') + ' - ' + translateShortcut(['meta', 'i'])"
small
icon
:disabled="props.disabled"
:disabled="props.disabled || !editor.can().toggleItalic()"
:active="editor.isActive('italic')"
@click="editor.chain().focus().toggleItalic().run()"
>
Expand All @@ -59,7 +59,7 @@
v-tooltip="t('wysiwyg_options.strikethrough') + ' - ' + translateShortcut(['meta', 'shift', 'x'])"
small
icon
:disabled="props.disabled"
:disabled="props.disabled || !editor.can().toggleStrike()"
:active="editor.isActive('strike')"
@click="editor.chain().focus().toggleStrike().run()"
>
Expand All @@ -71,7 +71,7 @@
v-tooltip="t('wysiwyg_options.underline') + ' - ' + translateShortcut(['meta', 'u'])"
small
icon
:disabled="props.disabled"
:disabled="props.disabled || !editor.can().toggleUnderline()"
:active="editor.isActive('underline')"
@click="editor.chain().focus().toggleUnderline().run()"
>
Expand All @@ -83,7 +83,7 @@
v-tooltip="t('wysiwyg_options.superscript') + ' - ' + translateShortcut(['meta', '.'])"
small
icon
:disabled="props.disabled"
:disabled="props.disabled || !editor.can().toggleSuperscript()"
:active="editor.isActive('superscript')"
@click="editor.chain().focus().toggleSuperscript().run()"
>
Expand All @@ -95,7 +95,7 @@
v-tooltip="t('wysiwyg_options.subscript') + ' - ' + translateShortcut(['meta', ','])"
small
icon
:disabled="props.disabled"
:disabled="props.disabled || !editor.can().toggleSubscript()"
:active="editor.isActive('subscript')"
@click="editor.chain().focus().toggleSubscript().run()"
>
Expand All @@ -107,7 +107,7 @@
v-tooltip="t('code') + ' - ' + translateShortcut(['meta', 'e'])"
small
icon
:disabled="props.disabled"
:disabled="props.disabled || !editor.can().toggleCode()"
:active="editor.isActive('code')"
@click="editor.chain().focus().toggleCode().run()"
>
Expand All @@ -119,7 +119,7 @@
v-tooltip="t('tiptap.highlight') + ' - ' + translateShortcut(['meta', 'shift', 'h'])"
small
icon
:disabled="props.disabled"
:disabled="props.disabled || !editor.can().toggleHighlight()"
:active="editor.isActive('highlight')"
@click="editor.chain().focus().toggleHighlight().run()"
>
Expand Down Expand Up @@ -387,10 +387,18 @@

<v-menu v-if="editorExtensions.includes('textAlign')" show-arrow placement="bottom-start">
<template #activator="{ toggle }">
<v-button v-tooltip="t('tiptap.text_align')" :disabled="props.disabled" small icon active @click="toggle">
<v-button
v-tooltip="t('tiptap.text_align')"
:disabled="props.disabled || textAlignActive === undefined"
small
icon
:active="textAlignActive !== undefined"
@click="toggle"
>
<template v-for="opt in alignOptions" :key="opt.align">
<component v-if="editor.isActive({ textAlign: opt.align })" :is="opt.icon" />
</template>
<icon-align-left v-if="textAlignActive === undefined" />
</v-button>
</template>
<v-list>
Expand All @@ -413,7 +421,11 @@
</v-list-item-content>
<v-list-item-hint>{{ opt.shortcut }}</v-list-item-hint>
</v-list-item>
<v-list-item clickable @click="editor.chain().focus().unsetTextAlign().run()">
<v-list-item
clickable
:active="textAlignActive === undefined"
@click="editor.chain().focus().unsetTextAlign().run()"
>
<v-list-item-content>
<v-text-overflow :text="t('wysiwyg_options.alignnone')" />
</v-list-item-content>
Expand All @@ -437,7 +449,7 @@
v-tooltip="t('wysiwyg_options.link')"
small
icon
:disabled="props.disabled"
:disabled="props.disabled || !editor.can().setLink({ href: '' })"
:active="editor.isActive('link')"
@click="linkOpen"
>
Expand All @@ -460,7 +472,7 @@
v-tooltip="t('tiptap.br') + ' - ' + translateShortcut(['shift', 'enter'])"
small
icon
:disabled="props.disabled"
:disabled="props.disabled || !editor.can().setHardBreak()"
@click="editor.chain().focus().setHardBreak().run()"
>
<icon-text-wrap />
Expand Down Expand Up @@ -806,7 +818,7 @@

<script setup lang="ts">
import { BubbleMenu, Editor, EditorContent } from "@tiptap/vue-3";
import { onBeforeUnmount, watch } from "vue";
import { computed, onBeforeUnmount, watch } from "vue";
import { useI18n } from "vue-i18n";
import { translateShortcut } from "./utils/translate-shortcut";
import type { TypeType, ValueType } from "./types";
Expand Down Expand Up @@ -957,6 +969,10 @@ const editorExtensions = editor.extensionManager.extensions.map((ext) => ext.nam
const { linkDrawerOpen, linkHref, linkTarget, linkOpen, linkClose, linkSave, linkRemove } = useLink(editor);
const textAlignActive = computed(() => {
return ["left", "center", "right", "justify"].find((align) => editor.isActive({ textAlign: align }));
});
watch(
() => props.value,
(value) => {
Expand Down

0 comments on commit 08aabb8

Please sign in to comment.