tiptapify 0.3.2 → 0.3.4

package/src/components/Toolbar/alignment.ts

@@ -2,6 +2,7 @@ import { default as AlignmentLeftButton } from '@tiptapify/extensions/components
 import { default as AlignmentCenterButton } from '@tiptapify/extensions/components/alignment/center/Button.vue'
 import { default as AlignmentRightButton } from '@tiptapify/extensions/components/alignment/right/Button.vue'
 import { default as AlignmentJustifyButton } from '@tiptapify/extensions/components/alignment/justify/Button.vue'
+import { default as AlignmentMenuButton } from '@tiptapify/extensions/components/alignment/menu/Button.vue'
 import { markRaw } from 'vue'
 
 export default {
@@ -24,5 +25,9 @@ export default {
       name: 'justify',
       component: markRaw(AlignmentJustifyButton),
     },
+    {
+      name: 'align',
+      component: markRaw(AlignmentMenuButton),
+    },
   ]
 }

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,10 +14,27 @@ 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'])
 
 const showDialog = ref<boolean>(false)
+
+const field = { variant: 'outlined', density: 'comfortable' }
+const fieldDefaults = {
+  VTextField: field,
+  VTextarea: field,
+  VSelect: field,
+  VAutocomplete: field,
+  VCombobox: field,
+}
 const movableHandler = ref(null)
 
 function open() {
@@ -141,48 +159,146 @@ onBeforeUnmount(() => {
 
 <template>
   <VDialog v-model="showDialog" :max-width="maxWidth" :fullscreen="fullscreen" @click:outside="emitClose">
-    <VCard>
+    <VCard
+      class="tiptapify-dialog"
+      :class="{ 'tiptapify-dialog--soft': dialogSoft, 'tiptapify-dialog--fullscreen': fullscreen }"
+      :style="tokens"
+    >
       <VCardTitle
         ref="movableHandler"
         class="tiptapify-dialog-header"
         :class="!fullscreen ? 'tiptapify-movable-handler' : ''"
         style="user-select: none;"
       >
-        <VLabel>
+        <span class="tiptapify-dialog-title">
           {{ title ?? t(`dialog.${module}.title`) }}
-        </VLabel>
+        </span>
 
         <VSpacer />
 
-        <VBtn density="compact" class="tiptapify-dialog-close" variant="elevated" elevation="4" icon @click="emitClose">
-          <VIcon size="x-small" :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>
 
-      <VDivider />
+      <VDivider v-if="!dialogSoft" />
 
-      <slot name="content" />
+      <!-- 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" />
+        <slot name="actions" />
+      </VDefaultsProvider>
     </VCard>
   </VDialog>
 </template>
 
 <style lang="scss" scoped>
+  /*
+   * 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 {
-    align-items: center;
     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, :deep(.tiptapify-movable-handler > *) {
+  .tiptapify-movable-handler {
     cursor: move;
   }
 
   .tiptapify-dialog-close:hover {
     cursor: pointer;
   }
-</style>
+
+  /**
+   * 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: var(--tf-dialog-content-padding, 4px 20px) !important;
+    }
+
+    :deep(.v-field--variant-outlined) {
+      border-radius: var(--tf-dialog-field-radius, 8px);
+
+      .v-field__outline__start {
+        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: var(--tf-dialog-field-radius, 8px);
+        border-end-end-radius: var(--tf-dialog-field-radius, 8px);
+      }
+    }
+
+    :deep(.v-card-actions) {
+      gap: 8px;
+      padding: var(--tf-dialog-actions-padding, 16px 20px 20px);
+    }
+
+    :deep(.v-card-actions .v-btn),
+    :deep(.tiptapify-dialog-actions .v-btn) {
+      min-height: var(--tf-dialog-action-btn-min-height, 38px);
+      padding-inline: 16px;
+      border-radius: var(--tf-dialog-action-btn-radius, 8px);
+      font-weight: 500;
+      letter-spacing: normal;
+      text-transform: none;
+    }
+  }
+
+  .tiptapify-dialog--soft .tiptapify-dialog-header {
+    padding: var(--tf-dialog-header-padding, 16px 12px 12px 20px);
+  }
+
+  .tiptapify-dialog--soft .tiptapify-dialog-title {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: var(--tf-dialog-title-size, 1.125rem);
+    font-weight: var(--tf-dialog-title-weight, 600);
+    line-height: 1.4;
+  }
+
+  .tiptapify-dialog--soft .tiptapify-dialog-close {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  }
+</style>

package/src/components/editorExtensions.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest'
+import { editorExtensions } from '@tiptapify/components/editorExtensions'
+
+describe('editor extensions', () => {
+  it('selects a link on click instead of opening it', () => {
+    const link = editorExtensions('', false, []).find(extension => extension.name === 'link')
+
+    expect(link?.options).toMatchObject({ openOnClick: false, enableClickSelection: true })
+  })
+})

package/src/components/editorExtensions.ts

@@ -17,7 +17,6 @@ import { HardBreak } from '@tiptap/extension-hard-break'
 import { HorizontalRule } from '@tiptap/extension-horizontal-rule'
 import { Typography } from '@tiptap/extension-typography'
 import { Highlight } from '@tiptap/extension-highlight'
-import { Image } from '@tiptap/extension-image'
 import { Youtube } from '@tiptap/extension-youtube'
 import { Superscript } from '@tiptap/extension-superscript'
 import { Subscript } from '@tiptap/extension-subscript'
@@ -29,7 +28,10 @@ import { InvisibleCharacters } from '@tiptap/extension-invisible-characters'
 
 import { default as Iframe } from '@tiptapify/extensions/components/media/iframe'
 import { BulletListCircle, BulletListSquare } from '@tiptapify/extensions/components/list/bullet'
+import { ListStyle } from '@tiptapify/extensions/components/list/styles'
 import { TiptapifyImage } from '@tiptapify/extensions/components/media/image'
+import { ImageWithCaption } from '@tiptapify/extensions/components/media/image/caption'
+import { ImageSlider } from '@tiptapify/extensions/components/media/image/slider'
 import { TiptapifyLink } from '@tiptapify/extensions/components/media/link'
 import { TiptapifyVideo } from '@tiptapify/extensions/components/media/video'
 import CodeBlockComponent from '@tiptapify/extensions/components/CodeBlockComponent.vue'
@@ -52,7 +54,22 @@ const lowlight = createLowlight(common)
 // register language example
 // lowlight.register('ts', ts)
 
-export function editorExtensions (placeholder: string, slashCommands: SlashCommandsConfig, customExtensions: toolbarSections, limit: number | null = null) {
+export interface TiptapifyImageOptions {
+  captionPlaceholder: string
+  // Images in a row from which the site shows a slider; 0 disables the slider grid
+  sliderMinImages: number
+  sliderLabel: string
+}
+
+const defaultImageOptions: TiptapifyImageOptions = { captionPlaceholder: '', sliderMinImages: 0, sliderLabel: '' }
+
+export function editorExtensions (
+  placeholder: string,
+  slashCommands: SlashCommandsConfig,
+  customExtensions: toolbarSections,
+  limit: number | null = null,
+  imageOptions: TiptapifyImageOptions = defaultImageOptions,
+) {
   const characterCount = limit && limit > 0 ? CharacterCount.configure({ limit }) : CharacterCount
 
   const extensions = [
@@ -65,7 +82,12 @@ export function editorExtensions (placeholder: string, slashCommands: SlashComma
     Bold,
     Italic,
     Strike,
-    Link,
+    // A click on a link in the text selects it for editing instead of opening it
+    Link.configure({
+      openOnClick: false,
+      enableClickSelection: true,
+      defaultProtocol: 'https',
+    }),
     Blockquote,
     OrderedList,
     BulletList,
@@ -83,11 +105,17 @@ export function editorExtensions (placeholder: string, slashCommands: SlashComma
       openOnClick: false,
       defaultProtocol: 'https'
     }),
-    Image.configure({
+    ImageWithCaption.configure({
       resize: {
         enabled: true,
         alwaysPreserveAspectRatio: true,
+        directions: ['top', 'right', 'bottom', 'left', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
       },
+      captionPlaceholder: imageOptions.captionPlaceholder,
+    }),
+    ImageSlider.configure({
+      minImages: imageOptions.sliderMinImages,
+      label: imageOptions.sliderLabel,
     }),
     Youtube.configure({
       controls: true,
@@ -117,7 +145,8 @@ export function editorExtensions (placeholder: string, slashCommands: SlashComma
       visible: false,
     }),
     BulletListCircle,
-    BulletListSquare
+    BulletListSquare,
+    ListStyle,
   ]
 
   if (slashCommands !== false) {

package/src/components/index.ts

@@ -1,5 +1,5 @@
 import { Editor, useEditor } from '@tiptap/vue-3'
-import { editorExtensions } from '@tiptapify/components/editorExtensions'
+import { editorExtensions, TiptapifyImageOptions } from '@tiptapify/components/editorExtensions'
 import { toolbarSections } from '@tiptapify/types/toolbarTypes'
 import { SlashCommandsConfig } from '@tiptapify/types/slashCommandsTypes'
 import { ShallowRef } from 'vue'
@@ -12,8 +12,9 @@ export function getTiptapEditor (
   limit: number | null = null,
   onUpdate: Function = () => {},
   onCreate?: (editor: Editor) => void,
+  imageOptions?: TiptapifyImageOptions,
 ): ShallowRef<Editor | undefined> {
-  const extensions = editorExtensions(placeholder, slashCommands, customExtensions, limit)
+  const extensions = editorExtensions(placeholder, slashCommands, customExtensions, limit, imageOptions)
 
   return useEditor({
     content,

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/actions/redo/Button.vue

@@ -26,7 +26,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     @click="editor.chain().focus().redo().run()"
   >
     <Tooltip :label="t('action.redo')" hotkey="Mod-Shift-z" />
-    <BtnIcon :icon="`mdiSvg:${mdi.mdiRedo}`" />
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiRedoVariant}`" />
   </VBtn>
 </template>
 

package/src/extensions/components/actions/undo/Button.vue

@@ -26,7 +26,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     @click="editor.chain().focus().undo().run()"
   >
     <Tooltip :label="t('action.undo')" hotkey="Mod-z" />
-    <BtnIcon :icon="`mdiSvg:${mdi.mdiUndo}`" />
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiUndoVariant}`" />
   </VBtn>
 </template>
 

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

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+
+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'
+
+type Alignment = 'left' | 'center' | 'right' | 'justify'
+
+const props = defineProps({
+  alignments: { type: Array as PropType<Alignment[]>, default: () => ['left', 'center', 'right', 'justify'] },
+})
+
+const { variantBtn, shape } = useTiptapifyConfig()
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
+
+const alignmentOptions: Record<Alignment, { icon: string, hotkey: string }> = {
+  left: { icon: mdi.mdiFormatAlignLeft, hotkey: 'Mod-Shift-l' },
+  center: { icon: mdi.mdiFormatAlignCenter, hotkey: 'Mod-Shift-e' },
+  right: { icon: mdi.mdiFormatAlignRight, hotkey: 'Mod-Shift-r' },
+  justify: { icon: mdi.mdiFormatAlignJustify, hotkey: 'Mod-Shift-j' },
+}
+
+// A function, not a computed: `isActive` reads the editor state, which Vue does not track
+function currentAlignmentIcon(): string {
+  const active = props.alignments.find(alignment => editor.value.isActive({ textAlign: alignment }))
+
+  return alignmentOptions[active ?? props.alignments[0] ?? 'left'].icon
+}
+</script>
+
+<template>
+  <VBtn
+    :id="`tiptapify-align-button-${editor.instanceId}`"
+    class="tiptapify-dropdown-button"
+    :variant="variantBtn"
+    height="32"
+  >
+    <Tooltip :label="t('alignment')" />
+    <BtnIcon :icon="`mdiSvg:${currentAlignmentIcon()}`" />
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiChevronDown}`" class="tiptapify-dropdown-button__chevron" />
+  </VBtn>
+
+  <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>