tiptapify 0.0.11 → 0.0.13

package/src/components/Toolbar/items.ts

@@ -6,63 +6,26 @@ import { useListItems } from "@tiptapify/composables/Toolbar/useListItems";
 import { useMediaItems } from "@tiptapify/composables/Toolbar/useMediaItems";
 import { useMiscItems } from "@tiptapify/composables/Toolbar/useMiscItems";
 import { useStyleItems } from "@tiptapify/composables/Toolbar/useStyleItems";
-import { ComputedRef, ref } from "vue";
-
-interface ToolbarItemAttrs {
-  [key: string]: Function | any
-}
-
-interface ToolbarItemProps {
-  [key: string]: any
-}
-
-export interface ToolbarItem {
-  name: string|number|ComputedRef<string>,
-  tooltip: string|ComputedRef<string>,
-  icon: string|ComputedRef<string>,
-  icon2?: string|ComputedRef<string>,
-  noI18n?: boolean,
-  enabled: boolean,
-  component?: any,
-  modelValue?: any,
-  group?: boolean,
-  toggle?: boolean,
-  icon2Props?: ToolbarItemProps,
-  componentProps?: ToolbarItemProps,
-  props?: ToolbarItemProps,
-  attrs?: ToolbarItemAttrs,
-  children?: ToolbarItems|ToolbarItem[],
-}
-
-export interface ToolbarItems {
-  [key: string]: ToolbarItem
-}
-
-export interface ToolbarItemSection {
-  group?: boolean,
-  toggle?: boolean,
-  items: ToolbarItems,
-}
-
-export interface ToolbarItemSections {
-  [key: string]: ToolbarItemSection
-}
+import { extensionComponents } from "@tiptapify/types/extensionComponents";
+import { ref } from "vue";
+
+import { ToolbarItem, ToolbarItemSections } from '@tiptapify/types/toolbarItems'
 
 export function toolbarItems(
-  editor: any,
   theme: any,
   fontMeasure: string,
-  items: { list: Array<string>, exclude: boolean },
-  customHeadingLevels: Array<number>
+  items: { list: Array<ToolbarItem>, exclude: boolean },
+  customHeadingLevels: Array<number>,
+  customExtensions: extensionComponents
 ): ToolbarItemSections {
-  const styleItems = ref(useStyleItems(editor.value, theme, fontMeasure, customHeadingLevels))
-  const formatItems = ref(useFormatItems(editor.value))
-  const formatExtraItems = ref(useFormatExtraItems(editor.value))
-  const alignmentItems = ref(useAlignmentItems(editor.value))
-  const listItems = ref(useListItems(editor.value))
-  const actionsItems = ref(useActionsItems(editor.value))
-  const miscItems = ref(useMiscItems(editor.value))
-  const mediaItems = ref(useMediaItems(editor.value))
+  const styleItems = ref(useStyleItems(theme, fontMeasure, customHeadingLevels))
+  const formatItems = ref(useFormatItems())
+  const formatExtraItems = ref(useFormatExtraItems())
+  const alignmentItems = ref(useAlignmentItems())
+  const listItems = ref(useListItems())
+  const actionsItems = ref(useActionsItems())
+  const miscItems = ref(useMiscItems())
+  const mediaItems = ref(useMediaItems())
 
   const allMenuItems: ToolbarItemSections = {
     /**
@@ -78,6 +41,7 @@ export function toolbarItems(
     list: { group: true, items: listItems.value },
     actions: { group: true, items: actionsItems.value },
     misc: { group: true, items: miscItems.value },
+    extra: { group: true, items: {} },
   }
 
   const pluginsList: Array<string> = []
@@ -85,13 +49,13 @@ export function toolbarItems(
     Object.keys(allMenuItems[section]).forEach(item => pluginsList.push(item))
   })
 
-  if (items.list.length) {
-    items.list.forEach(item => {
-      if (!pluginsList.includes(item)) {
-        throw new Error(`Unknown plugin name: ${item}! Supported plugins: ${pluginsList.join(', ')}`)
-      }
-    })
-  }
+  // if (items.list.length) {
+  //   items.list.forEach(item => {
+  //     if (!pluginsList.includes(item)) {
+  //       throw new Error(`Unknown plugin name: ${item}! Supported plugins: ${pluginsList.join(', ')}`)
+  //     }
+  //   })
+  // }
 
   const toolbarItems: ToolbarItemSections = {}
 
@@ -100,7 +64,7 @@ export function toolbarItems(
   Object.keys(allMenuItems).forEach(sectionName => {
     const section = allMenuItems[sectionName]
     Object.keys(section.items).forEach(plugin => {
-      const item = section.items[plugin]
+      const item: ToolbarItem = section.items[plugin]
 
       if (items.list.length) {
         item.enabled = items.list.includes(plugin)
@@ -132,5 +96,24 @@ export function toolbarItems(
     }
   })
 
+  // add/override custom extensions
+  Object.keys(customExtensions).forEach(extension => {
+    const section = customExtensions[extension].section
+
+    if (typeof customExtensions[extension]?.props === 'undefined') {
+      customExtensions[extension].props = toolbarItems[section]?.items[extension]?.props ?? {}
+    }
+
+    if (typeof customExtensions[extension]?.attrs === 'undefined') {
+      customExtensions[extension].attrs = toolbarItems[section]?.items[extension]?.attrs ?? {}
+    }
+
+    if (typeof toolbarItems[section] === 'undefined') {
+      toolbarItems[section] = { group: true, items: {} }
+      toolbarItems[section].items[extension] = {}
+    }
+    toolbarItems[section].items[extension] = customExtensions[extension]
+  })
+
   return toolbarItems
 }

package/src/components/UI/BtnIcon.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import * as mdi from '@mdi/js'
+
+defineProps({
+  icon: String
+})
+
+const isSvgString = (icon: any) => {
+  return typeof icon === 'string' && icon.includes('<svg')
+}
+</script>
+
+<template>
+  <div v-if="isSvgString(icon)" v-html="icon" class="v-icon tiptapify-btn-svg-icon"></div>
+  <VIcon v-else :icon="icon || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="small" />
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-btn-svg-icon {
+  width: 16px;
+  height: 16px;
+}
+</style>

package/src/components/UI/{Dialog.vue → TiptapifyDialog.vue}

@@ -6,6 +6,7 @@ import { useI18n } from "vue-i18n";
 
 const props = defineProps({
   module: String,
+  title: String,
   fullscreen: { type: Boolean, default () { return false } },
   maxWidth: { type: Number, default () { return 800 } },
 })
@@ -103,17 +104,17 @@ watch(() => dialog.value, async () => {
 </script>
 
 <template>
-  <VDialog v-model="dialog" :max-width="maxWidth" :fullscreen="fullscreen" absolute @click:outside="emitClose">
+  <VDialog v-model="dialog" :max-width="maxWidth" :fullscreen="fullscreen" @click:outside="emitClose">
     <VCard>
       <VCardTitle ref="movableHandler" :class="`d-flex ${!fullscreen ? 'tiptapify-movable-handler' : ''}`" style="user-select: none;">
         <VLabel>
-          {{ t(`dialog.${module}.title`) }}
+          {{ title ?? t(`dialog.${module}.title`) }}
         </VLabel>
 
         <VSpacer />
 
         <VBtn density="compact" class="tiptapify-dialog-close" variant="elevated" elevation="4" icon @click="emitClose">
-          <VIcon size="x-small" :icon="mdi.mdiClose" />
+          <VIcon size="x-small" :icon="`mdiSvg:${mdi.mdiClose}`" />
         </VBtn>
       </VCardTitle>
 

package/src/components/editorExtensions.ts

@@ -22,6 +22,7 @@ import { TextAlign } from '@tiptap/extension-text-align'
 import { Underline } from '@tiptap/extension-underline'
 import { TableKit } from '@tiptap/extension-table'
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
+import { InvisibleCharacters } from '@tiptap/extension-invisible-characters'
 
 import { TiptapifyLink } from '@tiptapify/extensions/link'
 import { TiptapifyImage } from '@tiptapify/extensions/image'
@@ -30,6 +31,7 @@ import { ViewSource } from '@tiptapify/extensions/view-source'
 import { Preview } from '@tiptapify/extensions/preview'
 import SlashCommands from '@tiptapify/extensions/slash-commands'
 import suggestion from '@tiptapify/extensions/components/slashCommands/suggestion'
+import { extensionComponents } from "@tiptapify/types/extensionComponents";
 
 // load all languages with "all" or common languages with "common"
 import { common, createLowlight } from 'lowlight'
@@ -47,7 +49,7 @@ const lowlight = createLowlight(common)
 // register language example
 // lowlight.register('ts', ts)
 
-export function editorExtensions (placeholder: string, slashCommands: boolean) {
+export function editorExtensions (placeholder: string, slashCommands: boolean, customExtensions: extensionComponents) {
   const extensions = [
     TextStyleKit,
     Document,
@@ -94,6 +96,9 @@ export function editorExtensions (placeholder: string, slashCommands: boolean) {
     Placeholder.configure({ placeholder }),
     CharacterCount,
     ViewSource,
+    InvisibleCharacters.configure({
+      visible: false,
+    }),
     Preview
   ]
 
@@ -101,5 +106,15 @@ export function editorExtensions (placeholder: string, slashCommands: boolean) {
     extensions.push(SlashCommands.configure({ suggestion }))
   }
 
+  if (Object.keys(customExtensions).length) {
+    for (const customExtension of Object.values(customExtensions)) {
+      if (typeof customExtension.extensions !== 'undefined') {
+        for (const extension of customExtension.extensions) {
+          extensions.push(extension)
+        }
+      }
+    }
+  }
+
   return extensions
 }

package/src/components/index.ts

@@ -1,9 +1,15 @@
 import { Editor, useEditor } from "@tiptap/vue-3";
 import { editorExtensions } from "@tiptapify/components/editorExtensions";
+import { extensionComponents } from "@tiptapify/types/extensionComponents";
 import { ShallowRef } from "vue";
 
-export function getTiptapEditor (content: any, placeholder: string, slashCommands: boolean = true): ShallowRef<Editor | undefined> {
-  const extensions = editorExtensions(placeholder, slashCommands)
+export function getTiptapEditor (
+  content: any,
+  placeholder: string,
+  slashCommands: boolean = true,
+  customExtensions: extensionComponents
+): ShallowRef<Editor | undefined> {
+  const extensions = editorExtensions(placeholder, slashCommands, customExtensions)
   const editor: ShallowRef<Editor | undefined> = useEditor({
     content,
     extensions,

package/src/composables/Toolbar/Actions/useRedo.ts

@@ -0,0 +1,23 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useRedo() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'redo',
+    tooltip: computed(() => t('action.redo')),
+    icon: `mdiSvg:${mdi.mdiRedo}`,
+    enabled: true,
+    props: {
+      disabled: computed(() => !editor.value.can().chain().focus().redo().run()),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().redo().run()
+    }
+  }
+}

package/src/composables/Toolbar/Actions/useUndo.ts

@@ -0,0 +1,23 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useUndo() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'undo',
+    tooltip: computed(() => t('action.undo')),
+    icon: `mdiSvg:${mdi.mdiUndo}`,
+    enabled: true,
+    props: {
+      disabled: computed(() => !editor.value.can().chain().focus().undo().run()),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().undo().run()
+    }
+  }
+}

package/src/composables/Toolbar/Alignment/useAlignmentCenter.ts

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useAlignmentCenter() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: computed(() => t('alignments.center')),
+    tooltip: computed(() => t('alignments.center')),
+    icon: `mdiSvg:${mdi.mdiFormatAlignCenter}`,
+    enabled: true,
+    props: {
+      active: false,
+      color: computed(() => editor.value.isActive({ textAlign: 'center' }) ? 'primary' : ''),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().toggleTextAlign('center').run()
+    }
+  }
+}

package/src/composables/Toolbar/Alignment/useAlignmentJustify.ts

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useAlignmentJustify() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: computed(() => t('alignments.justify')),
+    tooltip: computed(() => t('alignments.justify')),
+    icon: `mdiSvg:${mdi.mdiFormatAlignJustify}`,
+    enabled: true,
+    props: {
+      active: false,
+      color: computed(() => editor.value.isActive({ textAlign: 'justify' }) ? 'primary' : ''),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().toggleTextAlign('justify').run()
+    }
+  }
+}

package/src/composables/Toolbar/Alignment/useAlignmentLeft.ts

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useAlignmentLeft() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: computed(() => t('alignments.left')),
+    tooltip: computed(() => t('alignments.left')),
+    icon: `mdiSvg:${mdi.mdiFormatAlignLeft}`,
+    enabled: true,
+    props: {
+      active: false,
+      color: computed(() => editor.value.isActive({ textAlign: 'left' }) ? 'primary' : ''),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().toggleTextAlign('left').run()
+    }
+  }
+}

package/src/composables/Toolbar/Alignment/useAlignmentRight.ts

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useAlignmentRight() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: computed(() => t('alignments.right')),
+    tooltip: computed(() => t('alignments.right')),
+    icon: `mdiSvg:${mdi.mdiFormatAlignRight}`,
+    enabled: true,
+    props: {
+      active: false,
+      color: computed(() => editor.value.isActive({ textAlign: 'right' }) ? 'primary' : ''),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().toggleTextAlign('right').run()
+    }
+  }
+}

package/src/composables/Toolbar/Format/useBold.ts

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useBold() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'bold',
+    tooltip: computed(() => t('format.bold')),
+    icon: `mdiSvg:${mdi.mdiFormatBold}`,
+    enabled: true,
+    props: {
+      disabled: computed(() => !editor.value.can().chain().focus().toggleBold().run()),
+      color: computed(() => editor.value.isActive('bold') ? 'primary' : ''),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().toggleBold().run()
+    }
+  }
+}

package/src/composables/Toolbar/Format/useItalic.ts

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useItalic() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'italic',
+    tooltip: computed(() => t('format.italic')),
+    icon: `mdiSvg:${mdi.mdiFormatItalic}`,
+    enabled: true,
+    props: {
+      disabled: computed(() => !editor.value.can().chain().focus().toggleItalic().run()),
+      color: computed(() => editor.value.isActive('italic') ? 'primary' : ''),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().toggleItalic().run()
+    }
+  }
+}

package/src/composables/Toolbar/Format/useStrike.ts

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useStrike() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'strike',
+    tooltip: computed(() => t('format.strike')),
+    icon: `mdiSvg:${mdi.mdiFormatStrikethroughVariant}`,
+    enabled: true,
+    props: {
+      disabled: computed(() => !editor.value.can().chain().focus().toggleStrike().run()),
+      color: computed(() => editor.value.isActive('strike') ? 'primary' : ''),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().toggleStrike().run()
+    }
+  }
+}

package/src/composables/Toolbar/Format/useUnderline.ts

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useUnderline() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'underline',
+    tooltip: computed(() => t('format.underline')),
+    icon: `mdiSvg:${mdi.mdiFormatUnderline}`,
+    enabled: true,
+    props: {
+      disabled: computed(() => !editor.value.can().chain().focus().toggleUnderline().run()),
+      color: computed(() => editor.value.isActive('underline') ? 'primary' : ''),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().toggleUnderline().run()
+    }
+  }
+}

package/src/composables/Toolbar/FormatExtra/useBlockquote.ts

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useBlockquote() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'blockquote',
+    tooltip: computed(() => t('format.blockquote')),
+    icon: `mdiSvg:${mdi.mdiCommentQuote}`,
+    enabled: true,
+    props: {
+      disabled: computed(() => !editor.value.can().chain().focus().toggleBlockquote().run() || editor.value.isActive('codeBlock') || editor.value.isActive('code')),
+      color: computed(() => editor.value.isActive('blockquote') ? 'primary' : ''),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().toggleBlockquote().run()
+    }
+  }
+}

package/src/composables/Toolbar/FormatExtra/useCode.ts

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useCode() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'code',
+    tooltip: computed(() => t('format.code')),
+    icon: `mdiSvg:${mdi.mdiXml}`,
+    enabled: true,
+    props: {
+      disabled: computed(() => !editor.value.can().chain().focus().toggleCode().run()),
+      color: computed(() => editor.value.isActive('code') ? 'primary' : ''),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().toggleCode().run()
+    }
+  }
+}

package/src/composables/Toolbar/FormatExtra/useCodeBlock.ts

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useCodeBlock() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'codeblock',
+    tooltip: computed(() => t('format.codeblock')),
+    icon: `mdiSvg:${mdi.mdiCodeBlockTags}`,
+    enabled: true,
+    props: {
+      disabled: computed(() => !editor.value.can().chain().focus().toggleCodeBlock().run()),
+      color: computed(() => editor.value.isActive('codeBlock') ? 'primary' : ''),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().toggleCodeBlock().run()
+    }
+  }
+}

package/src/composables/Toolbar/FormatExtra/useSub.ts

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useSub() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'sub',
+    tooltip: computed(() => t('format.sub')),
+    icon: `mdiSvg:${mdi.mdiFormatSubscript}`,
+    enabled: true,
+    props: {
+      disabled: computed(() => !editor.value.can().chain().focus().toggleSubscript().run()),
+      color: computed(() => editor.value.isActive('subscript') ? 'primary' : ''),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().toggleSubscript().run()
+    }
+  }
+}

package/src/composables/Toolbar/FormatExtra/useSup.ts

@@ -0,0 +1,24 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useSup() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: 'sup',
+    tooltip: computed(() => t('format.sup')),
+    icon: `mdiSvg:${mdi.mdiFormatSuperscript}`,
+    enabled: true,
+    props: {
+      disabled: computed(() => !editor.value.can().chain().focus().toggleSuperscript().run()),
+      color: computed(() => editor.value.isActive('superscript') ? 'primary' : ''),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().toggleSuperscript().run()
+    }
+  }
+}

package/src/composables/Toolbar/List/useBullet.ts

@@ -0,0 +1,23 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed, inject, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useBullet() {
+  const { t } = useI18n();
+
+  const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+  return {
+    name: computed(() => t('lists.bullet')),
+    tooltip: computed(() => t('lists.bullet')),
+    icon: `mdiSvg:${mdi.mdiFormatListBulleted}`,
+    enabled: true,
+    props: {
+      color: computed(() => editor.value.isActive('bulletList') ? 'primary' : ''),
+    },
+    attrs: {
+      click: () => editor.value.chain().focus().toggleBulletList().run()
+    }
+  }
+}