tiptapify 0.3.3 → 0.3.5

package/index.d.ts

@@ -67,6 +67,101 @@ import * as mdi from '@mdi/js'
 
 export type TiptapifyFooterAlignment = 'start' | 'center' | 'end'
 
+export type TiptapifySkin = 'default' | 'pastel'
+
+// Structural variants a token cannot express (component markup, vuetify prop bindings)
+export interface TiptapifyShape {
+  toolbar?: 'raised' | 'flat'
+  groups?: 'box' | 'flat'
+  buttons?: 'vuetify' | 'quiet'
+  bubble?: 'card' | 'flat'
+  dialog?: 'classic' | 'soft'
+  menu?: 'vuetify' | 'soft'
+}
+
+// The shape after resolution: every key set (missing keys fall back to classic)
+export type ResolvedShape = Required<TiptapifyShape>
+
+export interface TiptapifySkinColors {
+  toolbarBg: string
+  toolbarBorderBottom: string
+  toolbarFg: string
+  groupBg: string
+  groupShadow: string
+  dividerColor: string
+  buttonFg: string
+  buttonHoverBg: string
+  buttonHoverFg: string
+  buttonActiveBg: string
+  buttonActiveHoverBg: string
+  bubbleBg: string
+  bubbleBorder: string
+  bubbleShadow: string
+  menuBorder: string
+  menuShadow: string
+  menuItemActiveBg: string
+  dialogShadow: string
+  frameBg: string
+  frameShadow: string
+  frameBorder: string
+  imageBg: string
+  imageOutline: string
+  imageOutlineHover: string
+  handleBg: string
+  handleBgHover: string
+  handleBorder: string
+  handleShadow: string
+}
+
+export interface TiptapifySkinMetrics {
+  itemsPadding: string
+  itemsGap: string
+  itemsRowGap: string
+  groupGap: string
+  groupHeight: string
+  groupRadius: string
+  dividerWidth: string
+  dividerHeight: string
+  buttonRadius: string
+  bubbleRadius: string
+  bubblePadding: string
+  bubbleGap: string
+  menuListPadding: string
+  menuRadius: string
+  menuItemRadius: string
+  menuItemPadding: string
+  menuItemMinHeight: string
+  dialogRadius: string
+  dialogHeaderPadding: string
+  dialogContentPadding: string
+  dialogActionsPadding: string
+  dialogTitleSize: string
+  dialogTitleWeight: string
+  dialogFieldRadius: string
+  dialogActionBtnMinHeight: string
+  dialogActionBtnRadius: string
+  dialogGridGap: string
+  imageRadius: string
+  handleRadius: string
+}
+
+// A skin as data: token overrides + shape flags, inheriting from a registered skin
+export type TiptapifySkinConfig = TiptapifyShape & {
+  name?: string
+  // registered skin name; implicit 'default'
+  extends?: string
+  colors?: Partial<TiptapifySkinColors>
+  metrics?: Partial<TiptapifySkinMetrics>
+}
+
+// The `skin` prop: a registered name (string) or an inline object
+export type TiptapifySkinInput = string | TiptapifySkinConfig
+
+export declare function registerSkin(name: string, skin: TiptapifySkinConfig): void
+
+// Identity for typed const definitions; the object never enters the registry
+export declare function defineSkin(skin: TiptapifySkinConfig): TiptapifySkinConfig
+
 export interface TiptapifyOptions {
   i18n?: string
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -34,6 +34,7 @@
     "test:watch": "vitest",
     "build:charmap": "tsx build-charmap.ts",
     "build:emojis": "tsx build-emojis.ts",
+    "record:skin-baseline": "tsx scripts/record-skin-baseline.ts",
     "docs:dev": "pnpm --filter tiptapify-docs docs:dev",
     "docs:build": "pnpm --filter tiptapify-docs docs:build",
     "docs:preview": "pnpm --filter tiptapify-docs docs:preview"

package/src/components/ImageBubbleMenu.vue

@@ -8,10 +8,14 @@ import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import { ImageAlign } from '@tiptapify/extensions/components/media/image/caption'
 import { inject, Ref, ref } from 'vue'
 import { ComposerTranslation } from 'vue-i18n'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 
 // The toolbar on a selected image: float toggles (or, for a slide, its place in the slider), download, edit, removal
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
+// The image menu follows the buttons shape flag: a quiet carrier in the quiet shape
+const { shape } = useTiptapifyConfig()
+
 // The menu follows its text or image when the editor scrolls inside its own box; it is created once the
 // box is there, as the menu reads its options only when it is created
 const scrollTarget = inject<Ref<HTMLElement | null>>('tiptapifyScrollContainer', ref(null))
@@ -62,7 +66,7 @@ function download() {
     :options="{ placement: 'top', offset: -52, flip: false, scrollTarget }"
     :should-show="isImageSelected"
   >
-    <div class="tiptapify-image-menu tiptapify-quiet-buttons">
+    <div class="tiptapify-image-menu" :class="{ 'tiptapify-quiet-buttons': shape.buttons === 'quiet' }">
       <template v-if="isSlide()">
         <VBtn size="32" variant="text" color="" :disabled="!editor.can().moveImage(-1)" @click="editor.chain().focus().moveImage(-1).run()">
           <Tooltip :label="t('media.image_toolbar.move_back')" />
@@ -110,15 +114,20 @@ function download() {
 </template>
 
 <style scoped lang="scss">
+/*
+ * The image menu follows the bubble tokens: one rule, the classic shape's base as fallback;
+ * the quiet shape paints its border/radius/shadow from the same tokens.
+ * The internal divider is this menu's own layout, not the toolbar divider surface.
+ */
 .tiptapify-image-menu {
   display: flex;
   align-items: center;
-  gap: 2px;
-  padding: 4px;
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 10px;
-  background: rgb(var(--v-theme-surface));
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  gap: var(--tf-bubble-gap, 2px);
+  padding: var(--tf-bubble-padding, 4px);
+  border: var(--tf-bubble-border, none);
+  border-radius: var(--tf-bubble-radius, 6px);
+  background: var(--tf-bubble-bg, rgb(var(--v-theme-surface)));
+  box-shadow: var(--tf-bubble-shadow, 4px 4px 20px var(--dark-gray));
 }
 
 .tiptapify-image-menu__divider {

package/src/components/MenuBubble.vue

@@ -4,6 +4,7 @@ import { computed, inject, Ref, ref } from 'vue'
 import { BubbleMenu } from '@tiptap/vue-3/menus'
 import { NodeSelection } from '@tiptap/pm/state'
 import * as mdi from '@mdi/js'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 
 defineProps({
   variant: { type: String, default () { return 'flat' } },
@@ -12,6 +13,10 @@ defineProps({
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
+// The bubble shape picks the markup: a flat row of buttons vs the classic card; the quiet
+// buttons carrier rides the buttons shape flag
+const { shape } = useTiptapifyConfig()
+
 // The menu follows its text or image when the editor scrolls inside its own box; it is created once the
 // box is there, as the menu reads its options only when it is created
 const scrollTarget = inject<Ref<HTMLElement | null>>('tiptapifyScrollContainer', ref(null))
@@ -109,7 +114,11 @@ const items = ref([
       return (from !== to) && !isAllSelected
     }"
   >
-    <div class="tiptapify-bubble-menu tiptapify-quiet-buttons">
+    <div
+      v-if="shape.bubble === 'flat'"
+      class="tiptapify-bubble-menu"
+      :class="{ 'tiptapify-quiet-buttons': shape.buttons === 'quiet' }"
+    >
       <VBtn
         v-for="(item, key) in items"
         :key="key"
@@ -123,18 +132,47 @@ const items = ref([
         <VIcon :icon="item.icon" size="20" />
       </VBtn>
     </div>
+
+    <!-- The classic bubble menu: a small card with a divided group of compact buttons -->
+    <div v-else class="bubble-menu">
+      <VCard>
+        <VCardText class="pa-0">
+          <VToolbar :theme="theme" density="compact" height="auto" class="p-0">
+            <VToolbarItems>
+              <VBtnGroup divided density="compact">
+                <VBtn v-for="(item, key) in items" :key="key" v-bind="item.props" size="x-small" @click="item.click">
+                  <VIcon :icon="item.icon" size="20" />
+                </VBtn>
+              </VBtnGroup>
+            </VToolbarItems>
+          </VToolbar>
+        </VCardText>
+      </VCard>
+    </div>
   </BubbleMenu>
 </template>
 
 <style scoped lang="scss">
+/*
+ * Bubble skin rules: one rule per shape branch, reading `var(--tf-*)`.
+ * The template branch is the shape gate (`bubble: card` renders the classic card,
+ * `bubble: flat` the quiet row), so each rule carries its shape's base as fallback.
+ * The classic card's background/border/padding/gap are VCard/VToolbar layout (not
+ * token dimensions); the flat row paints them from tokens.
+ */
+.bubble-menu {
+  border-radius: var(--tf-bubble-radius, 6px);
+  box-shadow: var(--tf-bubble-shadow, 4px 4px 20px var(--dark-gray));
+}
+
 .tiptapify-bubble-menu {
   display: flex;
   align-items: center;
-  gap: 2px;
-  padding: 4px;
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 10px;
-  background: rgb(var(--v-theme-surface));
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  gap: var(--tf-bubble-gap, 2px);
+  padding: var(--tf-bubble-padding, 4px);
+  border: var(--tf-bubble-border, 1px solid rgba(var(--v-border-color), var(--v-border-opacity)));
+  border-radius: var(--tf-bubble-radius, 10px);
+  background: var(--tf-bubble-bg, rgb(var(--v-theme-surface)));
+  box-shadow: var(--tf-bubble-shadow, 0 6px 20px rgba(0, 0, 0, 0.12));
 }
 </style>

package/src/components/SkinScope.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+import { computed, createSSRApp, h, provide, ref } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { createVuetify } from 'vuetify'
+import SkinScope from '@tiptapify/components/SkinScope.vue'
+import { menuContentClass } from '@tiptapify/skins/menu'
+import { TIPTAPIFY_CONFIG_KEY } from '@tiptapify/composables/useTiptapifyConfig'
+import { resolveSkin } from '@tiptapify/skins/registry'
+
+// Menus teleport out of the editor DOM, so SkinScope re-anchors the skin tokens
+// on the menu content: a plain div with the provided `--tf-*` record inline.
+async function renderScope (tokens: Record<string, string> | null) {
+  const app = createSSRApp({
+    setup () {
+      if (tokens) {
+        provide(TIPTAPIFY_CONFIG_KEY, {
+          variantBtn: ref('flat'),
+          variantField: ref('outlined'),
+          skin: ref('pastel'),
+          skinName: computed(() => 'pastel'),
+          tokens: computed(() => tokens),
+          shape: computed(() => resolveSkin('pastel').shape),
+        })
+      }
+      return () => h(SkinScope, null, { default: () => h('div', { id: 'slot-child' }, 'content') })
+    },
+  })
+  app.use(createVuetify())
+
+  return renderToString(app)
+}
+
+describe('SkinScope', () => {
+  it('renders div.tiptapify-skin-scope with the provided --tf-* tokens inline', async () => {
+    const html = await renderScope({ '--tf-menu-list-padding': '4px', '--tf-menu-radius': '8px' })
+
+    expect(html).toContain('class="tiptapify-skin-scope"')
+    expect(html).toContain('--tf-menu-list-padding:4px')
+    expect(html).toContain('--tf-menu-radius:8px')
+    expect(html).toContain('id="slot-child"')
+  })
+
+  it('renders the scope div through the full pastel resolution, slot content inside', async () => {
+    const html = await renderScope(resolveSkin('pastel').tokens)
+
+    expect(html).toMatch(/^<div class="tiptapify-skin-scope" style="--tf-/)
+    expect(html).toContain('--tf-menu-list-padding:4px')
+    expect(html).toContain('--tf-dialog-radius:12px')
+    // The slot renders inside the scope (SSR wraps slot output in hydration comments)
+    expect(html).toContain('<div id="slot-child">content</div><!--]--></div>')
+  })
+
+  it('emits no inline vars without a provider (default skin emits none, css fallbacks carry the base)', async () => {
+    const html = await renderScope(null)
+
+    expect(html).toContain('class="tiptapify-skin-scope"')
+    expect(html).not.toContain('--tf-')
+    expect(html).toContain('id="slot-child"')
+  })
+})
+
+describe('menuContentClass', () => {
+  it('carries the soft menu class for the soft menu shape and the plain base otherwise', () => {
+    expect(menuContentClass(true)).toBe('tiptapify-menu tiptapify-menu--soft')
+    expect(menuContentClass(false)).toBe('tiptapify-menu')
+  })
+
+  it('the soft carrier rides the menu shape flag, not the skin name: a custom skin extending pastel keeps it', () => {
+    expect(menuContentClass(resolveSkin('pastel').shape.menu === 'soft')).toBe('tiptapify-menu tiptapify-menu--soft')
+    expect(menuContentClass(resolveSkin({ extends: 'pastel' }).shape.menu === 'soft')).toBe('tiptapify-menu tiptapify-menu--soft')
+    expect(menuContentClass(resolveSkin('default').shape.menu === 'soft')).toBe('tiptapify-menu')
+    expect(menuContentClass(resolveSkin({ menu: 'soft' }).shape.menu === 'soft')).toBe('tiptapify-menu tiptapify-menu--soft')
+  })
+})

package/src/components/SkinScope.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+
+/*
+ * Menus teleport out of the editor DOM, so `:style` cannot ride along with a
+ * VMenu `content-class`: every tiptapify menu wraps its content in this scope
+ * and the skin tokens land on it (spec: Token delivery). The CSS that skins
+ * the menus hangs off `.tiptapify-skin-scope` (src/skins/menu.css).
+ */
+const { tokens } = useTiptapifyConfig()
+</script>
+
+<template>
+  <div class="tiptapify-skin-scope" :style="tokens">
+    <slot />
+  </div>
+</template>

package/src/components/Tiptapify.skin.test.ts

@@ -0,0 +1,186 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createApp, createSSRApp, h, nextTick, ref, Ref } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { createVuetify } from 'vuetify'
+import { createI18n } from 'vue-i18n'
+import Tiptapify from '@tiptapify/components/Tiptapify.vue'
+import { messages } from '@tiptapify/i18n'
+
+function withPlugins (app: { use: (plugin: never) => unknown }) {
+  app.use(createVuetify() as never)
+  app.use(createI18n({ legacy: false, locale: 'en', fallbackLocale: 'en', messages }) as never)
+}
+
+async function renderShell (skin: unknown): Promise<string> {
+  const app = createSSRApp({ setup: () => () => h(Tiptapify, { skin }) })
+  withPlugins(app)
+
+  return renderToString(app)
+}
+
+// The opening tag of the editor root div, so assertions see the skin class and the token style
+function rootTag (html: string): string {
+  const start = html.indexOf('tiptapify-editor-')
+
+  return html.slice(0, html.indexOf('>', start) + 1)
+}
+
+async function mountEditor (skinRef: Ref<unknown>) {
+  const app = createApp({ setup: () => () => h(Tiptapify, { skin: skinRef.value }) })
+  withPlugins(app)
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  app.mount(host)
+  await nextTick()
+  await nextTick()
+
+  return { app, host }
+}
+
+describe('Tiptapify skin resolution', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('renders the default skin class and emits no token vars', async () => {
+    const html = await renderShell('default')
+
+    expect(rootTag(html)).toContain('tiptapify-skin-default')
+    expect(rootTag(html)).not.toContain('--tf-')
+  })
+
+  it('renders the pastel skin class and emits its token overrides', async () => {
+    const html = await renderShell('pastel')
+
+    expect(rootTag(html)).toContain('tiptapify-skin-pastel')
+    expect(rootTag(html)).toContain('--tf-toolbar-bg:rgba(var(--v-theme-on-surface), 0.03)')
+    expect(rootTag(html)).toContain('--tf-group-shadow:none')
+    expect(rootTag(html)).toContain('--tf-button-radius:6px')
+  })
+
+  it('renders an inline skin object under tiptapify-skin-inline with merged tokens', async () => {
+    const html = await renderShell({ colors: { toolbarBg: 'rgb(1, 2, 3)' }, metrics: { buttonRadius: '9px' } })
+
+    expect(rootTag(html)).toContain('tiptapify-skin-inline')
+    expect(rootTag(html)).toContain('--tf-toolbar-bg:rgb(1, 2, 3)')
+    expect(rootTag(html)).toContain('--tf-button-radius:9px')
+  })
+
+  it('a named inline object renders under tiptapify-skin-{name}, not the inline name', async () => {
+    const html = await renderShell({
+      name: 'mint',
+      extends: 'pastel',
+      colors: { toolbarBg: 'rgba(0, 128, 0, 0.05)' },
+    })
+
+    expect(rootTag(html)).toContain('tiptapify-skin-mint')
+    expect(rootTag(html)).not.toContain('tiptapify-skin-inline')
+    expect(rootTag(html)).toContain('--tf-toolbar-bg:rgba(0, 128, 0, 0.05)')
+  })
+
+  it('falls back to the default skin for an unknown name', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const html = await renderShell('nope')
+
+    expect(rootTag(html)).toContain('tiptapify-skin-default')
+    expect(rootTag(html)).not.toContain('--tf-')
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('nope'))
+  })
+
+  it('re-resolves the skin when the prop changes, without re-rendering the editor', async () => {
+    const skin = ref<unknown>('default')
+    const { app, host } = await mountEditor(skin)
+
+    const root = host.querySelector('[id^=tiptapify-editor-]') as HTMLElement
+    expect(root.className).toContain('tiptapify-skin-default')
+
+    const proseMirror = host.querySelector('.ProseMirror')
+    expect(proseMirror).toBeTruthy()
+
+    skin.value = { colors: { toolbarBg: 'rgb(9, 9, 9)' } }
+    await nextTick()
+
+    expect(root.className).toContain('tiptapify-skin-inline')
+    expect(root.style.getPropertyValue('--tf-toolbar-bg')).toBe('rgb(9, 9, 9)')
+    // The editor DOM is the same node: a skin change never recreates the editor
+    expect(host.querySelector('.ProseMirror')).toBe(proseMirror)
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('keeps the pastel toolbar quiet through the resolved skin name', async () => {
+    const skin = ref<unknown>('pastel')
+    const { app, host } = await mountEditor(skin)
+
+    const toolbar = host.querySelector('.v-toolbar')
+    expect(toolbar?.classList.contains('v-toolbar--flat')).toBe(true)
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('the root carries all six shape classes: classic values for the default skin', async () => {
+    const tag = rootTag(await renderShell('default'))
+
+    expect(tag).toContain('tiptapify-shape-toolbar-raised')
+    expect(tag).toContain('tiptapify-shape-groups-box')
+    expect(tag).toContain('tiptapify-shape-buttons-vuetify')
+    expect(tag).toContain('tiptapify-shape-bubble-card')
+    expect(tag).toContain('tiptapify-shape-dialog-classic')
+    expect(tag).toContain('tiptapify-shape-menu-vuetify')
+  })
+
+  it('the pastel root carries the quiet shape classes and keeps the skin name class', async () => {
+    const tag = rootTag(await renderShell('pastel'))
+
+    expect(tag).toContain('tiptapify-skin-pastel')
+    expect(tag).toContain('tiptapify-shape-toolbar-flat')
+    expect(tag).toContain('tiptapify-shape-groups-flat')
+    expect(tag).toContain('tiptapify-shape-buttons-quiet')
+    expect(tag).toContain('tiptapify-shape-bubble-flat')
+    expect(tag).toContain('tiptapify-shape-dialog-soft')
+    expect(tag).toContain('tiptapify-shape-menu-soft')
+    expect(tag).not.toContain('tiptapify-shape-dialog-classic')
+    expect(tag).not.toContain('tiptapify-shape-buttons-vuetify')
+  })
+
+  it('an inline shape object lands on the root classes; the flags it omits stay classic', async () => {
+    const tag = rootTag(await renderShell({ buttons: 'quiet', dialog: 'soft' }))
+
+    expect(tag).toContain('tiptapify-skin-inline')
+    expect(tag).toContain('tiptapify-shape-buttons-quiet')
+    expect(tag).toContain('tiptapify-shape-dialog-soft')
+    expect(tag).toContain('tiptapify-shape-toolbar-raised')
+    expect(tag).toContain('tiptapify-shape-groups-box')
+    expect(tag).toContain('tiptapify-shape-bubble-card')
+    expect(tag).toContain('tiptapify-shape-menu-vuetify')
+  })
+
+  it('a custom skin extending pastel keeps the pastel shape classes under the inline name', async () => {
+    const tag = rootTag(await renderShell({ extends: 'pastel' }))
+
+    expect(tag).toContain('tiptapify-skin-inline')
+    expect(tag).toContain('tiptapify-shape-toolbar-flat')
+    expect(tag).toContain('tiptapify-shape-groups-flat')
+    expect(tag).toContain('tiptapify-shape-buttons-quiet')
+    expect(tag).toContain('tiptapify-shape-bubble-flat')
+    expect(tag).toContain('tiptapify-shape-dialog-soft')
+    expect(tag).toContain('tiptapify-shape-menu-soft')
+  })
+
+  it('the toolbar elevation follows the toolbar shape flag, not the skin name', async () => {
+    const skin = ref<unknown>({ toolbar: 'flat' })
+    const { app, host } = await mountEditor(skin)
+
+    expect(host.querySelector('.v-toolbar')?.classList.contains('v-toolbar--flat')).toBe(true)
+
+    skin.value = { toolbar: 'raised' }
+    await nextTick()
+
+    expect(host.querySelector('.v-toolbar')?.classList.contains('v-toolbar--flat')).toBe(false)
+
+    app.unmount()
+    host.remove()
+  })
+})