fix(extensions): disable commands that cannot be used in certain oper…

…ations
yikoyu · Jan 20, 2024 · 7432b7e · 7432b7e
1 parent d33c67a
commit 7432b7e
Show file tree

Hide file tree

Showing 28 changed files with 60 additions and 5 deletions.
diff --git a/src/components/BubbleMenu.vue b/src/components/BubbleMenu.vue
@@ -72,7 +72,13 @@ const items = computed(() => {
             <!-- Divider -->
             <VDivider v-if="item.type === 'divider'" vertical class="mx-1 me-2" />
             <!-- Buttons -->
-            <component :is="item.component" v-else v-bind="item.componentProps" :editor="editor" :disabled="disabled">
+            <component
+              :is="item.component"
+              v-else
+              v-bind="item.componentProps"
+              :editor="editor"
+              :disabled="disabled || item.componentProps?.disabled"
+            >
               <template v-for="(element, slotName, i) in item.componentSlots" :key="i" #[`${slotName}`]="values">
                 <component :is="element" v-bind="values?.props" />
               </template>

diff --git a/src/components/TiptapToolbar.vue b/src/components/TiptapToolbar.vue
@@ -66,7 +66,12 @@ const items = computed(() => {
       <!-- Spacer -->
       <VSpacer v-if="item.spacer" />
       <!-- Buttons -->
-      <component :is="item.button.component" v-bind="item.button.componentProps" :editor="editor" :disabled="disabled">
+      <component
+        :is="item.button.component"
+        v-bind="item.button.componentProps"
+        :editor="editor"
+        :disabled="disabled || item.button.componentProps?.disabled"
+      >
         <template v-for="(element, slotName, i) in item.button.componentSlots" :key="i" #[`${slotName}`]="values">
           <component :is="element" v-bind="values?.props" />
         </template>

diff --git a/src/extensions/blockquote.ts b/src/extensions/blockquote.ts
@@ -21,6 +21,7 @@ export const Blockquote = /* @__PURE__*/ TiptapBlockquote.extend<BlockquoteOptio
         componentProps: {
           action: () => editor.commands.toggleBlockquote(),
           isActive: () => editor.isActive('blockquote') || false,
+          disabled: !editor.can().toggleBlockquote(),
           icon: 'blockquote',
           tooltip: t('editor.blockquote.tooltip')
         }

diff --git a/src/extensions/bold.ts b/src/extensions/bold.ts
@@ -18,6 +18,7 @@ export const Bold = /* @__PURE__*/ TiptapBold.extend<BoldOptions>({
         componentProps: {
           action: () => editor.commands.toggleBold(),
           isActive: () => editor.isActive('bold') || false,
+          disabled: !editor.can().toggleBold(),
           icon: 'bold',
           tooltip: t('editor.bold.tooltip')
         }

diff --git a/src/extensions/bullet-list.ts b/src/extensions/bullet-list.ts
@@ -18,6 +18,7 @@ export const BulletList = /* @__PURE__*/ TiptapBulletList.extend<BulletListOptio
         componentProps: {
           action: () => editor.commands.toggleBulletList(),
           isActive: () => editor.isActive('bulletList') || false,
+          disabled: !editor.can().toggleBulletList(),
           icon: 'bulletList',
           tooltip: t('editor.bulletlist.tooltip')
         }

diff --git a/src/extensions/clear.ts b/src/extensions/clear.ts
@@ -17,6 +17,7 @@ export const Clear = /* @__PURE__*/ Node.create<ClearOptions>({
         component: ActionButton,
         componentProps: {
           action: () => editor.chain().focus().clearNodes().unsetAllMarks().run(),
+          disabled: !editor.can().chain().focus().clearNodes().unsetAllMarks().run(),
           icon: 'clear',
           tooltip: t('editor.clear.tooltip')
         }

diff --git a/src/extensions/code-block.ts b/src/extensions/code-block.ts
@@ -18,6 +18,7 @@ export const CodeBlock = /* @__PURE__*/ TiptapCodeBlock.extend<CodeBlockOptions>
         componentProps: {
           action: () => editor.commands.toggleCodeBlock(),
           isActive: () => editor.isActive('codeBlock') || false,
+          disabled: !editor.can().toggleCodeBlock(),
           icon: 'codeBlock',
           tooltip: t('editor.codeblock.tooltip')
         }

diff --git a/src/extensions/code.ts b/src/extensions/code.ts
@@ -18,6 +18,7 @@ export const Code = /* @__PURE__*/ TiptapCode.extend<CodeOptions>({
         componentProps: {
           action: () => editor.commands.toggleCode(),
           isActive: () => editor.isActive('code') || false,
+          disabled: !editor.can().toggleCode(),
           icon: 'code',
           tooltip: t('editor.code.tooltip')
         }

diff --git a/src/extensions/color.ts b/src/extensions/color.ts
@@ -25,6 +25,7 @@ export const Color = /* @__PURE__*/ TiptapColor.extend<ColorOptions>({
             if (!color) return false
             return editor.isActive({ color }) || false
           },
+          disabled: !editor.can().setColor(''),
           icon: 'color',
           tooltip: t('editor.color.tooltip')
         }

diff --git a/src/extensions/components/ActionMenuButton.vue b/src/extensions/components/ActionMenuButton.vue
@@ -46,6 +46,7 @@ export interface Item {
   isActive: NonNullable<ButtonViewReturnComponentProps['isActive']>
   action?: ButtonViewReturnComponentProps['action']
   style?: StyleValue
+  disabled?: boolean
   divider?: boolean
   default?: boolean
 }
@@ -73,7 +74,7 @@ interface Props {
     <VMenu v-model="menu" activator="parent">
       <VList density="compact" :max-height="maxHeight">
         <template v-for="(item, i) in items" :key="i">
-          <VListItem :active="item.isActive()" @click="item.action">
+          <VListItem :active="item.isActive()" :disabled="item.disabled" @click="item.action">
             <template #prepend>
               <VIcon v-if="item.icon" :icon="getIcon(item.icon)" />
             </template>

diff --git a/src/extensions/font-family.ts b/src/extensions/font-family.ts
@@ -41,16 +41,20 @@ export const FontFamily = /* @__PURE__*/ TiptapFontFamily.extend<FontFamilyOptio
 
             editor.commands.setFontFamily(k.value)
           },
+          disabled: !editor.can().setFontFamily(k.value),
           style: { fontFamily: k.value },
           divider: k.divider ?? false,
           default: k.default ?? false
         }))
 
+        const disabled = items.filter(k => k.disabled).length === items.length
+
         return {
           component: ActionMenuButton,
           componentProps: {
             icon: 'fontFamily',
             tooltip: t('editor.fontFamily.tooltip'),
+            disabled,
             items,
             maxHeight: 280
           }

diff --git a/src/extensions/font-size.ts b/src/extensions/font-size.ts
@@ -59,15 +59,19 @@ export const FontSize = /* @__PURE__*/ Extension.create<FontSizeOptions>({
 
             editor.commands.setFontSize(String(k))
           },
+          disabled: !editor.can().setFontSize(String(k)),
           divider: k === DEFAULT_FONT_SIZE_VALUUE ?? false,
           default: k === DEFAULT_FONT_SIZE_VALUUE ?? false
         }))
 
+        const disabled = items.filter(k => k.disabled).length === items.length
+
         return {
           component: ActionMenuButton,
           componentProps: {
             icon: 'fontSize',
             tooltip: t('editor.fontSize.tooltip'),
+            disabled,
             items,
             maxHeight: 280
           }

diff --git a/src/extensions/heading.ts b/src/extensions/heading.ts
@@ -25,6 +25,7 @@ export const Heading = /* @__PURE__*/ TiptapHeading.extend<HeadingOptions>({
         const items: Item[] = levels.map(level => ({
           action: () => editor.commands.toggleHeading({ level }),
           isActive: () => editor.isActive('heading', { level }) || false,
+          disabled: !editor.can().toggleHeading({ level }),
           icon: `h${level}`,
           title: t(`editor.heading.h${level}.tooltip`)
         }))
@@ -33,17 +34,21 @@ export const Heading = /* @__PURE__*/ TiptapHeading.extend<HeadingOptions>({
           items.unshift({
             action: () => editor.commands.setParagraph(),
             isActive: () => editor.isActive('paragraph') || false,
+            disabled: !editor.can().setParagraph(),
             icon: 'p',
             title: t('editor.paragraph.tooltip'),
             divider: true
           })
         }
 
+        const disabled = items.filter(k => k.disabled).length === items.length
+
         return {
           component: ActionMenuButton,
           componentProps: {
             icon: 'heading',
             tooltip: t('editor.heading.tooltip'),
+            disabled,
             items
           }
         }

diff --git a/src/extensions/highlight.ts b/src/extensions/highlight.ts
@@ -21,6 +21,7 @@ export const Highlight = /* @__PURE__*/ TiptapHighlight.extend<HighlightOptions>
             if (typeof color === 'string') editor.commands.setHighlight({ color })
           },
           isActive: () => editor.isActive('highlight') || false,
+          disabled: !editor.can().setHighlight(),
           icon: 'highlight',
           tooltip: t('editor.highlight.tooltip')
         }

diff --git a/src/extensions/history.ts b/src/extensions/history.ts
@@ -24,6 +24,7 @@ export const History = /* @__PURE__*/ TiptapHistory.extend<HistoryOptions>({
               if (item === 'undo') editor.commands.undo()
               if (item === 'redo') editor.commands.redo()
             },
+            disabled: !editor.can()[item](),
             icon: item,
             tooltip: t(`editor.${item}.tooltip`)
           }

diff --git a/src/extensions/horizontal-rule.ts b/src/extensions/horizontal-rule.ts
@@ -17,6 +17,7 @@ export const HorizontalRule = /* @__PURE__*/ TiptapHorizontalRule.extend<Horizon
         component: ActionButton,
         componentProps: {
           action: () => editor.commands.setHorizontalRule(),
+          disabled: !editor.can().setHorizontalRule(),
           icon: 'horizontalRule',
           tooltip: t('editor.horizontalrule.tooltip')
         }

diff --git a/src/extensions/image.ts b/src/extensions/image.ts
@@ -107,6 +107,7 @@ export const Image = /* @__PURE__*/ TiptapImage.extend<ImageOptions>({
             imageTabs,
             hiddenTabs,
             isActive: () => editor.isActive('image') || false,
+            disabled: !editor.can().setImage({}),
             icon: 'image',
             tooltip: t('editor.image.tooltip')
           },

diff --git a/src/extensions/indent.ts b/src/extensions/indent.ts
@@ -16,6 +16,10 @@ export const Indent = /* @__PURE__*/ Extension.create<IndentOptions>({
       spacer: false,
       button: ({ editor, t }) => {
         const items: ['indent', 'outdent'] = ['indent', 'outdent']
+        const commands = {
+          indent: 'sinkListItem',
+          outdent: 'liftListItem'
+        } as const
 
         return items.map(item => ({
           component: ActionButton,
@@ -24,6 +28,7 @@ export const Indent = /* @__PURE__*/ Extension.create<IndentOptions>({
               if (item === 'indent') editor.commands.sinkListItem('listItem')
               if (item === 'outdent') editor.commands.liftListItem('listItem')
             },
+            disabled: !editor.can()[commands[item]]('listItem'),
             icon: item,
             tooltip: t(`editor.${item}.tooltip`)
           }

diff --git a/src/extensions/italic.ts b/src/extensions/italic.ts
@@ -18,6 +18,7 @@ export const Italic = /* @__PURE__*/ TiptapItalic.extend<ItalicOptions>({
         componentProps: {
           action: () => editor.commands.toggleItalic(),
           isActive: () => editor.isActive('italic') || false,
+          disabled: !editor.can().toggleItalic(),
           icon: 'italic',
           tooltip: t('editor.italic.tooltip')
         }

diff --git a/src/extensions/link.ts b/src/extensions/link.ts
@@ -24,6 +24,7 @@ export const Link = /* @__PURE__*/ TiptapLink.extend<LinkOptions>({
           component: LinkActionButton,
           componentProps: {
             isActive: () => editor.isActive('link') || false,
+            disabled: !editor.can().setLink({ href: '' }),
             icon: 'link',
             tooltip: t('editor.link.tooltip')
           },

diff --git a/src/extensions/ordered-list.ts b/src/extensions/ordered-list.ts
@@ -18,6 +18,7 @@ export const OrderedList = /* @__PURE__*/ TiptapOrderedList.extend<OrderedListOp
         componentProps: {
           action: () => editor.commands.toggleOrderedList(),
           isActive: () => editor.isActive('orderedList') || false,
+          disabled: !editor.can().toggleOrderedList(),
           icon: 'orderedList',
           tooltip: t('editor.orderedlist.tooltip')
         }

diff --git a/src/extensions/strike.ts b/src/extensions/strike.ts
@@ -18,6 +18,7 @@ export const Strike = /* @__PURE__*/ TiptapStrike.extend<StrikeOptions>({
         componentProps: {
           action: () => editor.commands.toggleStrike(),
           isActive: () => editor.isActive('strike') || false,
+          disabled: !editor.can().toggleStrike(),
           icon: 'strike',
           tooltip: t('editor.strike.tooltip')
         }

diff --git a/src/extensions/subscript.ts b/src/extensions/subscript.ts
@@ -30,6 +30,7 @@ export const SubAndSuperScript = /* @__PURE__*/ Extension.create<SubAndSuperScri
           componentProps: {
             action: () => editor.commands.toggleSubscript(),
             isActive: () => editor.isActive('subscript') || false,
+            disabled: !editor.can().toggleSubscript(),
             icon: 'subscript',
             tooltip: t('editor.subscript.tooltip')
           }
@@ -40,6 +41,7 @@ export const SubAndSuperScript = /* @__PURE__*/ Extension.create<SubAndSuperScri
           componentProps: {
             action: () => editor.commands.toggleSuperscript(),
             isActive: () => editor.isActive('superscript') || false,
+            disabled: !editor.can().toggleSuperscript(),
             icon: 'superscript',
             tooltip: t('editor.superscript.tooltip')
           }

diff --git a/src/extensions/table.ts b/src/extensions/table.ts
@@ -29,6 +29,7 @@ export const Table = /* @__PURE__*/ TiptapTable.extend<TableOptions>({
         component: TableActionButton,
         componentProps: {
           isActive: () => editor.isActive('table') || false,
+          disabled: !editor.can().insertTable(),
           icon: 'table',
           tooltip: t('editor.table.tooltip')
         }

diff --git a/src/extensions/task-list.ts b/src/extensions/task-list.ts
@@ -29,6 +29,7 @@ export const TaskList = /* @__PURE__*/ TiptapTaskList.extend<TaskListOptions>({
         componentProps: {
           action: () => editor.commands.toggleTaskList(),
           isActive: () => editor.isActive('taskList') || false,
+          disabled: !editor.can().toggleTaskList(),
           icon: 'taskList',
           tooltip: t('editor.tasklist.tooltip')
         }

diff --git a/src/extensions/text-align.ts b/src/extensions/text-align.ts
@@ -26,14 +26,18 @@ export const TextAlign = /* @__PURE__*/ TiptapTextAlign.extend<TextAlignOptions>
           title: t(`editor.textalign.${k}.tooltip`),
           icon: k,
           isActive: () => editor.isActive({ textAlign: k }) || false,
-          action: () => editor.commands.setTextAlign(k)
+          action: () => editor.commands.setTextAlign(k),
+          disabled: !editor.can().setTextAlign(k)
         }))
 
+        const disabled = items.filter(k => k.disabled).length === items.length
+
         return {
           component: ActionMenuButton,
           componentProps: {
             icon: 'center',
             tooltip: t('editor.textalign.tooltip'),
+            disabled,
             items
           }
         }

diff --git a/src/extensions/underline.ts b/src/extensions/underline.ts
@@ -18,6 +18,7 @@ export const Underline = /* @__PURE__*/ TiptapUnderline.extend<UnderlineOptions>
         componentProps: {
           action: () => editor.commands.toggleUnderline(),
           isActive: () => editor.isActive('underline') || false,
+          disabled: !editor.can().toggleUnderline(),
           icon: 'underline',
           tooltip: t('editor.underline.tooltip')
         }

diff --git a/src/extensions/video.ts b/src/extensions/video.ts
@@ -167,7 +167,8 @@ export const Video = /* @__PURE__*/ Node.create<VideoOptions>({
           },
           componentSlots: {
             dialog: dialogComponent()
-          }
+          },
+          disabled: !editor.can().setVideo({})
         }
       }
     }