tiptapify 0.3.3 → 0.3.5

package/src/components/UI/TiptapifyDialog.test.ts

@@ -0,0 +1,132 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { App, computed, createApp, h, nextTick, provide, Ref, ref } from 'vue'
+import { createVuetify } from 'vuetify'
+import { VTextField } from 'vuetify/components'
+import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
+import { TIPTAPIFY_CONFIG_KEY } from '@tiptapify/composables/useTiptapifyConfig'
+import { resolveSkin } from '@tiptapify/skins/registry'
+
+// jsdom has no `visualViewport` global; Vuetify's overlay positioning reads it,
+// and the `visualViewport?.` guards do not protect against an undeclared identifier
+if (!('visualViewport' in globalThis)) {
+  ;(globalThis as Record<string, unknown>).visualViewport = {
+    scale: 1,
+    offsetLeft: 0,
+    offsetTop: 0,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }
+}
+
+// The dialog teleports to the overlay root, so its skin markup rides the shape:
+// the `tiptapify-dialog--soft` carrier, the divider under the title, the close
+// variant and the field defaults all key off `shape.dialog`, not the skin name.
+const openApps: { app: App, host: HTMLElement }[] = []
+
+async function openDialog (skinInput: unknown): Promise<HTMLElement> {
+  const config = resolveSkin(skinInput)
+  const dialog: Ref<{ open: () => void } | null> = ref(null)
+
+  const app = createApp({
+    setup () {
+      provide(TIPTAPIFY_CONFIG_KEY, {
+        variantBtn: ref('flat'),
+        variantField: ref('outlined'),
+        skin: ref(skinInput),
+        skinName: computed(() => config.name),
+        tokens: computed(() => config.tokens),
+        shape: computed(() => config.shape),
+      })
+      provide('tiptapifyI18n', { t: (key: string) => key })
+
+      return () => h(TiptapifyDialog, { ref: dialog, title: 'Probe dialog', module: 'link' }, {
+        content: () => h('div', { class: 'probe-content' }, [h(VTextField, { label: 'Field' })]),
+      })
+    },
+  })
+  app.use(createVuetify())
+
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  app.mount(host)
+  openApps.push({ app, host })
+  await nextTick()
+
+  dialog.value?.open()
+  for (let i = 0; i < 10; i++) {
+    await nextTick()
+    if (document.querySelector('.tiptapify-dialog')) {
+      break
+    }
+  }
+
+  const card = document.querySelector<HTMLElement>('.tiptapify-dialog')
+  if (!card) {
+    throw new Error('dialog card did not render')
+  }
+
+  return card
+}
+
+function disposeDialogs () {
+  for (const { app, host } of openApps.splice(0)) {
+    app.unmount()
+    host.remove()
+  }
+  document.body.innerHTML = ''
+}
+
+afterEach(disposeDialogs)
+
+describe('TiptapifyDialog shape wiring', () => {
+  it('the classic dialog keeps the divider, the elevated close and no soft carrier', async () => {
+    const card = await openDialog('default')
+
+    expect(card.classList.contains('tiptapify-dialog--soft')).toBe(false)
+    expect(card.classList.contains('tiptapify-dialog--pastel')).toBe(false)
+
+    const header = card.querySelector('.tiptapify-dialog-header')
+    expect(header?.nextElementSibling?.classList.contains('v-divider')).toBe(true)
+
+    const close = card.querySelector('.tiptapify-dialog-close')
+    expect([...close?.classList ?? []].join(' ')).toContain('v-btn--variant-elevated')
+
+    const input = card.querySelector('.v-input')
+    expect([...input?.classList ?? []].join(' ')).toContain('v-input--density-default')
+  })
+
+  it('the pastel dialog carries tiptapify-dialog--soft, no divider, a text close and soft field defaults', async () => {
+    const card = await openDialog('pastel')
+
+    expect(card.classList.contains('tiptapify-dialog--soft')).toBe(true)
+
+    const header = card.querySelector('.tiptapify-dialog-header')
+    expect(header?.nextElementSibling?.classList.contains('v-divider')).toBe(false)
+
+    const close = card.querySelector('.tiptapify-dialog-close')
+    expect([...close?.classList ?? []].join(' ')).toContain('v-btn--variant-text')
+
+    // VDefaultsProvider: the soft dialog gives unstyled fields the comfortable outlined defaults
+    const input = card.querySelector('.v-input')
+    expect([...input?.classList ?? []].join(' ')).toContain('v-input--density-comfortable')
+  })
+
+  it('the soft carrier rides the dialog flag, not the name: a custom skin extending pastel keeps it', async () => {
+    const card = await openDialog({ extends: 'pastel' })
+
+    expect(card.classList.contains('tiptapify-dialog--soft')).toBe(true)
+    expect(card.classList.contains('tiptapify-dialog--pastel')).toBe(false)
+  })
+
+  it('an inline dialog flag alone drives the carrier and the divider', async () => {
+    const soft = await openDialog({ dialog: 'soft' })
+    expect(soft.classList.contains('tiptapify-dialog--soft')).toBe(true)
+    expect(soft.querySelector('.tiptapify-dialog-header')?.nextElementSibling?.classList.contains('v-divider')).toBe(false)
+
+    disposeDialogs()
+
+    const classic = await openDialog({ dialog: 'classic' })
+    expect(classic.classList.contains('tiptapify-dialog--soft')).toBe(false)
+    expect(classic.querySelector('.tiptapify-dialog-header')?.nextElementSibling?.classList.contains('v-divider')).toBe(true)
+  })
+})

package/src/components/UI/TiptapifyDialog.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 
 import * as mdi from '@mdi/js'
-import { inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { ComposerTranslation } from 'vue-i18n'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 
 const props = defineProps({
   module: String,
@@ -13,6 +14,14 @@ const props = defineProps({
 
 const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
+// The dialog is teleported to the overlay root, so the skin reaches it by injection,
+// not by the editor's DOM
+const { shape, tokens } = useTiptapifyConfig()
+
+// The soft dialog shape drives every dialog site (carrier class, close variant, field defaults):
+// one computed keeps the template readable (task-7 cleanup)
+const dialogSoft = computed(() => shape.value.dialog === 'soft')
+
 defineExpose({ open, close })
 const emits = defineEmits(['closeDialog'])
 
@@ -150,7 +159,11 @@ onBeforeUnmount(() => {
 
 <template>
   <VDialog v-model="showDialog" :max-width="maxWidth" :fullscreen="fullscreen" @click:outside="emitClose">
-    <VCard class="tiptapify-dialog" :class="{ 'tiptapify-dialog--fullscreen': fullscreen }">
+    <VCard
+      class="tiptapify-dialog"
+      :class="{ 'tiptapify-dialog--soft': dialogSoft, 'tiptapify-dialog--fullscreen': fullscreen }"
+      :style="tokens"
+    >
       <VCardTitle
         ref="movableHandler"
         class="tiptapify-dialog-header"
@@ -163,13 +176,23 @@ onBeforeUnmount(() => {
 
         <VSpacer />
 
-        <VBtn class="tiptapify-dialog-close" variant="text" size="32" icon @click="emitClose">
-          <VIcon size="20" :icon="`mdiSvg:${mdi.mdiClose}`" />
+        <VBtn
+          class="tiptapify-dialog-close"
+          :variant="dialogSoft ? 'text' : 'elevated'"
+          :elevation="dialogSoft ? undefined : 4"
+          :density="dialogSoft ? 'default' : 'compact'"
+          :size="dialogSoft ? '32' : undefined"
+          icon
+          @click="emitClose"
+        >
+          <VIcon :size="dialogSoft ? 20 : 'x-small'" :icon="`mdiSvg:${mdi.mdiClose}`" />
         </VBtn>
       </VCardTitle>
 
-      <!-- Fields a dialog does not style itself get the light outlined look -->
-      <VDefaultsProvider :defaults="fieldDefaults">
+      <VDivider v-if="!dialogSoft" />
+
+      <!-- In the soft dialog shape, fields a dialog does not style itself get the light outlined look -->
+      <VDefaultsProvider :defaults="dialogSoft ? fieldDefaults : {}">
         <slot name="content" />
 
         <slot name="actions" />
@@ -179,76 +202,103 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="scss" scoped>
-  /* A light card in the spirit of Flux modals: generous padding, soft corners and shadow, no rules */
-  .tiptapify-dialog {
-    border-radius: 12px !important;
-    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
+  /*
+   * Dialog skin rules: the base block reads the dialog tokens with
+   * the classic fallbacks; the soft block (carrier `tiptapify-dialog--soft`, teleported
+   * surfaces cannot ride the root's shape classes) reads the same tokens with the soft
+   * shape's base as fallback. The VCard itself carries the token `:style` (SkinScope step),
+   * so the tokens reach every rule here.
+   * The `!important`s stay exactly where Vuetify paints the pixel with an INLINE
+   * style (the card radius/shadow via the elevation/rounded composables, the content
+   * padding via density) — no selector can outrank an inline style, and these are the
+   * base-commit set, no additions. The header and actions padding keep the base-commit
+   * !importants dropped: Vuetify paints them as plain class rules, and the doubled
+   * scoped carrier outranks them (proven by the fixture gate).
+   */
+  .tiptapify-dialog-header {
+    display: flex;
+    align-items: center;
+  }
+
+  /* The classic title paints like a VLabel: a light, roomy label */
+  .tiptapify-dialog-title {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    font-size: var(--tf-dialog-title-size, 1.25rem);
+    font-weight: var(--tf-dialog-title-weight, 400);
+    line-height: 1.75;
+    white-space: normal;
+  }
+
+  :deep(.v-overlay__content) {
+    position: fixed;
+  }
+
+  .tiptapify-movable-handler {
+    cursor: move;
+  }
+
+  .tiptapify-dialog-close:hover {
+    cursor: pointer;
+  }
+
+  /**
+   * Soft dialog shape: a light card in the spirit of Flux modals: generous padding,
+   * soft corners and shadow, no rules
+   */
+  .tiptapify-dialog--soft {
+    border-radius: var(--tf-dialog-radius, 12px) !important;
+    box-shadow: var(--tf-dialog-shadow, 0 20px 48px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06)) !important;
 
     &.tiptapify-dialog--fullscreen {
       border-radius: 0 !important;
     }
 
     :deep(.v-card-text) {
-      padding: 4px 20px !important;
+      padding: var(--tf-dialog-content-padding, 4px 20px) !important;
     }
 
     :deep(.v-field--variant-outlined) {
-      border-radius: 8px;
+      border-radius: var(--tf-dialog-field-radius, 8px);
 
       .v-field__outline__start {
-        border-start-start-radius: 8px;
-        border-end-start-radius: 8px;
+        border-start-start-radius: var(--tf-dialog-field-radius, 8px);
+        border-end-start-radius: var(--tf-dialog-field-radius, 8px);
       }
 
       .v-field__outline__end {
-        border-start-end-radius: 8px;
-        border-end-end-radius: 8px;
+        border-start-end-radius: var(--tf-dialog-field-radius, 8px);
+        border-end-end-radius: var(--tf-dialog-field-radius, 8px);
       }
     }
 
     :deep(.v-card-actions) {
       gap: 8px;
-      padding: 16px 20px 20px !important;
+      padding: var(--tf-dialog-actions-padding, 16px 20px 20px);
     }
 
     :deep(.v-card-actions .v-btn),
     :deep(.tiptapify-dialog-actions .v-btn) {
-      min-height: 38px;
+      min-height: var(--tf-dialog-action-btn-min-height, 38px);
       padding-inline: 16px;
-      border-radius: 8px;
+      border-radius: var(--tf-dialog-action-btn-radius, 8px);
       font-weight: 500;
       letter-spacing: normal;
       text-transform: none;
     }
   }
 
-  .tiptapify-dialog-header {
-    display: flex;
-    align-items: center;
-    padding: 16px 12px 12px 20px !important;
+  .tiptapify-dialog--soft .tiptapify-dialog-header {
+    padding: var(--tf-dialog-header-padding, 16px 12px 12px 20px);
   }
 
-  .tiptapify-dialog-title {
+  .tiptapify-dialog--soft .tiptapify-dialog-title {
     color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
-    font-size: 1.125rem;
-    font-weight: 600;
+    font-size: var(--tf-dialog-title-size, 1.125rem);
+    font-weight: var(--tf-dialog-title-weight, 600);
     line-height: 1.4;
-    white-space: normal;
   }
 
-  .tiptapify-dialog-close {
+  .tiptapify-dialog--soft .tiptapify-dialog-close {
     color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   }
-
-  :deep(.v-overlay__content) {
-    position: fixed;
-  }
-
-  .tiptapify-movable-handler {
-    cursor: move;
-  }
-
-  .tiptapify-dialog-close:hover {
-    cursor: pointer;
-  }
 </style>

package/src/composables/useTiptapifyConfig.test.ts

@@ -1,9 +1,10 @@
 import { describe, expect, it } from 'vitest'
-import { createSSRApp, h, provide, ref } from 'vue'
+import { computed, createSSRApp, h, provide, ref } from 'vue'
 import { renderToString } from 'vue/server-renderer'
 import { createVuetify } from 'vuetify'
 import BoldButton from '@tiptapify/extensions/components/format/bold/Button.vue'
 import { TIPTAPIFY_CONFIG_KEY, useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { resolveSkin } from '@tiptapify/skins/registry'
 
 const editor = {
   isActive: () => false,
@@ -13,10 +14,16 @@ const editor = {
 
 const Consumer = {
   setup () {
-    const { variantBtn, variantField } = useTiptapifyConfig()
+    const { variantBtn, variantField, skin, skinName, tokens, shape } = useTiptapifyConfig()
     return () => h('span', [
       h('span', { id: 'variant-btn' }, variantBtn.value),
       h('span', { id: 'variant-field' }, variantField.value),
+      h('span', { id: 'skin' }, typeof skin.value === 'string' ? skin.value : ''),
+      h('span', { id: 'skin-name' }, skinName.value),
+      h('span', { id: 'token-count' }, String(Object.keys(tokens.value).length)),
+      h('span', { id: 'token-button-radius' }, tokens.value['--tf-button-radius'] ?? ''),
+      h('span', { id: 'shape-toolbar' }, shape.value.toolbar),
+      h('span', { id: 'shape-buttons' }, shape.value.buttons),
     ])
   },
 }
@@ -25,9 +32,14 @@ function render (root: () => any, withConfig: boolean) {
   const app = createSSRApp({
     setup () {
       if (withConfig) {
+        const pastel = resolveSkin('pastel')
         provide(TIPTAPIFY_CONFIG_KEY, {
           variantBtn: ref('tonal'),
           variantField: ref('outlined'),
+          skin: ref('pastel'),
+          skinName: computed(() => pastel.name),
+          tokens: computed(() => pastel.tokens),
+          shape: computed(() => pastel.shape),
         })
       }
       provide('tiptapifyEditor', ref(editor))
@@ -46,6 +58,11 @@ describe('useTiptapifyConfig', () => {
 
     expect(html).toContain('<span id="variant-btn">tonal</span>')
     expect(html).toContain('<span id="variant-field">outlined</span>')
+    expect(html).toContain('<span id="skin">pastel</span>')
+    expect(html).toContain('<span id="skin-name">pastel</span>')
+    expect(html).toContain('<span id="token-button-radius">6px</span>')
+    expect(html).toContain('<span id="shape-toolbar">flat</span>')
+    expect(html).toContain('<span id="shape-buttons">quiet</span>')
   })
 
   it('falls back to defaults when no provider is present', async () => {
@@ -53,6 +70,12 @@ describe('useTiptapifyConfig', () => {
 
     expect(html).toContain('<span id="variant-btn">flat</span>')
     expect(html).toContain('<span id="variant-field">solo</span>')
+    expect(html).toContain('<span id="skin">default</span>')
+    // The fallback resolves the default skin: classic shape, no emitted tokens
+    expect(html).toContain('<span id="skin-name">default</span>')
+    expect(html).toContain('<span id="token-count">0</span>')
+    expect(html).toContain('<span id="shape-toolbar">raised</span>')
+    expect(html).toContain('<span id="shape-buttons">vuetify</span>')
   })
 
   it('is consumed by toolbar extension buttons', async () => {

package/src/composables/useTiptapifyConfig.ts

@@ -1,17 +1,36 @@
-import { computed, inject, InjectionKey, Ref } from 'vue'
+import { computed, ComputedRef, inject, InjectionKey, Ref } from 'vue'
 import defaults from '@tiptapify/constants/defaults'
-import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+import { TiptapifyShape, TiptapifySkinInput, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+// Importing the builtins registers them on load, so resolution works without consumer setup
+import '@tiptapify/skins/builtins'
+import { resolveSkin } from '@tiptapify/skins/registry'
 
 export interface TiptapifyConfig {
   variantBtn: Ref<variantBtnTypes>
   variantField: Ref<variantFieldTypes>
+  // the raw `skin` prop: a registered name (string) or an inline skin object
+  skin: Ref<TiptapifySkinInput>
+  // the resolved skin name (inline objects without a name resolve to 'inline')
+  skinName: ComputedRef<string>
+  // css variable name -> value; only overrides, the css fallbacks carry the base
+  tokens: ComputedRef<Record<string, string>>
+  shape: ComputedRef<Required<TiptapifyShape>>
 }
 
 export const TIPTAPIFY_CONFIG_KEY: InjectionKey<TiptapifyConfig> = Symbol('tiptapifyConfig')
 
+// Components outside an editor (docs playground) resolve the default skin:
+// classic shape, and no emitted tokens — the css fallbacks are the base values.
+// Resolved once at module load: the fallback never changes at runtime
+const defaultSkin = resolveSkin(defaults.skin)
+
 export function useTiptapifyConfig(): TiptapifyConfig {
   return inject(TIPTAPIFY_CONFIG_KEY, {
     variantBtn: computed(() => defaults.variantBtn),
     variantField: computed(() => defaults.variantField),
+    skin: computed(() => defaults.skin),
+    skinName: computed(() => defaultSkin.name),
+    tokens: computed(() => defaultSkin.tokens),
+    shape: computed(() => defaultSkin.shape),
   })
 }

package/src/constants/defaults.ts

@@ -1,6 +1,7 @@
-import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+import { TiptapifySkin, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
 
 export default {
   variantBtn: 'flat' as variantBtnTypes,
   variantField: 'solo' as variantFieldTypes,
+  skin: 'default' as TiptapifySkin,
 }

package/src/extensions/components/alignment/menu/Button.vue

@@ -3,8 +3,10 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import SkinScope from '@tiptapify/components/SkinScope.vue'
 import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { menuContentClass } from '@tiptapify/skins/menu'
 import { inject, PropType, Ref } from 'vue'
 
 import { ComposerTranslation } from 'vue-i18n'
@@ -15,7 +17,7 @@ const props = defineProps({
   alignments: { type: Array as PropType<Alignment[]>, default: () => ['left', 'center', 'right', 'justify'] },
 })
 
-const { variantBtn } = useTiptapifyConfig()
+const { variantBtn, shape } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -48,21 +50,23 @@ function currentAlignmentIcon(): string {
     <BtnIcon :icon="`mdiSvg:${mdi.mdiChevronDown}`" class="tiptapify-dropdown-button__chevron" />
   </VBtn>
 
-  <VMenu :activator="`#tiptapify-align-button-${editor.instanceId}`" content-class="tiptapify-menu">
-    <VList density="compact">
-      <VListItem
-        v-for="alignment in alignments"
-        :key="alignment"
-        link
-        :active="editor.isActive({ textAlign: alignment })"
-        @click="editor.chain().focus().toggleTextAlign(alignment).run()"
-      >
-        <Tooltip :label="t(`alignments.${alignment}`)" :hotkey="alignmentOptions[alignment].hotkey" />
-        <template #prepend>
-          <BtnIcon :icon="`mdiSvg:${alignmentOptions[alignment].icon}`" />
-        </template>
-        <VListItemTitle>{{ t(`alignments.${alignment}`) }}</VListItemTitle>
-      </VListItem>
-    </VList>
+  <VMenu :activator="`#tiptapify-align-button-${editor.instanceId}`" :content-class="menuContentClass(shape.menu === 'soft')">
+    <SkinScope>
+      <VList density="compact">
+        <VListItem
+          v-for="alignment in alignments"
+          :key="alignment"
+          link
+          :active="editor.isActive({ textAlign: alignment })"
+          @click="editor.chain().focus().toggleTextAlign(alignment).run()"
+        >
+          <Tooltip :label="t(`alignments.${alignment}`)" :hotkey="alignmentOptions[alignment].hotkey" />
+          <template #prepend>
+            <BtnIcon :icon="`mdiSvg:${alignmentOptions[alignment].icon}`" />
+          </template>
+          <VListItemTitle>{{ t(`alignments.${alignment}`) }}</VListItemTitle>
+        </VListItem>
+      </VList>
+    </SkinScope>
   </VMenu>
 </template>

package/src/extensions/components/list/bullet/Button.vue

@@ -3,8 +3,10 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import SkinScope from '@tiptapify/components/SkinScope.vue'
 import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { menuContentClass } from '@tiptapify/skins/menu'
 import { computed, inject, ref, Ref, watch } from 'vue'
 
 import { ComposerTranslation } from 'vue-i18n'
@@ -19,7 +21,7 @@ const props = defineProps({
   withSquare: { type: Boolean, default: true }
 })
 
-const { variantBtn } = useTiptapifyConfig()
+const { variantBtn, shape } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -98,7 +100,7 @@ watch(() => bulletLists.value, () => {
     @toggle="editor.commands.toggleBulletList()"
   />
 
-  <VMenu v-else-if="isMenu" content-class="tiptapify-menu">
+  <VMenu v-else-if="isMenu" :content-class="menuContentClass(shape.menu === 'soft')">
     <template #activator="{ props: menuProps }">
       <VBtn
         :color="buttonActive ? 'primary' : ''"
@@ -112,20 +114,22 @@ watch(() => bulletLists.value, () => {
       </VBtn>
     </template>
 
-    <VList>
-      <VListItem
-        v-for="(bulletList, key) in menuItems"
-        :key="key"
-        link
-        :active="editor.isActive(bulletList.name)"
-        @click="toggleList(bulletList.name)"
-      >
-        <Tooltip :label="t('lists.bullet')" />
-        <VListItemTitle class="d-flex justify-center align-center">
-          <BtnIcon :icon="bulletList.icon" />
-        </VListItemTitle>
-      </VListItem>
-    </VList>
+    <SkinScope>
+      <VList>
+        <VListItem
+          v-for="(bulletList, key) in menuItems"
+          :key="key"
+          link
+          :active="editor.isActive(bulletList.name)"
+          @click="toggleList(bulletList.name)"
+        >
+          <Tooltip :label="t('lists.bullet')" />
+          <VListItemTitle class="d-flex justify-center align-center">
+            <BtnIcon :icon="bulletList.icon" />
+          </VListItemTitle>
+        </VListItem>
+      </VList>
+    </SkinScope>
   </VMenu>
 
   <VBtn