tiptapify 0.3.2 → 0.3.4

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
 }
@@ -192,6 +287,7 @@ export {
   TIPTAPIFY_CONFIG_KEY,
   useTiptapifyConfig,
   TiptapEditor,
+  TiptapEditor as TipTapEditor,
   nodeViewProps,
   NodeViewWrapper,
   VueNodeViewRenderer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "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/Footer.vue

@@ -57,16 +57,16 @@ function showFooter() {
     <VRow>
       <VCol class="d-flex align-center" :class="`justify-${alignment}`">
         <template v-if="limit > 0">
-          <VTooltip :open-delay="1500">
+          <VTooltip :open-delay="200" location="top">
             <template #default>
               <span v-html="limitText" />
             </template>
             <template #activator="{ props }">
+              <span class="tiptapify-footer--limit" v-bind="props" :aria-label="limitText.replace('<br>', ': ')">
               <svg
                 height="25"
                 width="25"
                 viewBox="0 0 20 20"
-                v-bind="props"
                 :class="{
                   'character-count': true,
                   'character-count--alert': percentage > 75,
@@ -86,6 +86,8 @@ function showFooter() {
                 />
                 <circle r="6" cx="10" cy="10" fill="white" />
               </svg>
+              <span class="tiptapify-footer--status-item">{{ Math.min(percentage, 999) }}%</span>
+              </span>
             </template>
           </VTooltip>
 
@@ -113,6 +115,14 @@ function showFooter() {
   color: #999;
 }
 
+/* The limit ring with its percentage; the tooltip spells out the limit */
+.tiptapify-footer--limit {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: help;
+}
+
 .tiptapify-footer--divider:not(:last-child) {
   margin: 0 8px;
 }

package/src/components/ImageBubbleMenu.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import * as mdi from '@mdi/js'
+import { Editor } from '@tiptap/vue-3'
+import { BubbleMenu } from '@tiptap/vue-3/menus'
+import { NodeSelection } from '@tiptap/pm/state'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+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))
+
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
+
+// Without a float the image stands centered on its own line; a second click on a float removes it
+const alignments: Array<{ value: ImageAlign, icon: string, label: string }> = [
+  { value: 'left', icon: mdi.mdiFormatFloatLeft, label: 'media.image_toolbar.align_left' },
+  { value: 'right', icon: mdi.mdiFormatFloatRight, label: 'media.image_toolbar.align_right' },
+]
+
+function isImageSelected({ state }: { state: Editor['state'] }): boolean {
+  return state.selection instanceof NodeSelection && state.selection.node.type.name === 'image'
+}
+
+function toggleAlign(align: ImageAlign) {
+  const current = editor.value.getAttributes('image').align ?? null
+  editor.value.chain().focus().updateAttributes('image', { align: current === align ? null : align }).run()
+}
+
+// A slide of a slider (extensions/components/media/image/slider.ts) moves among the slides instead of floating
+function isSlide(): boolean {
+  if (!isImageSelected(editor.value)) {
+    return false
+  }
+
+  // The selection may sit in text while the menu hides, where the node at it is a text node
+  const dom = editor.value.view.nodeDOM(editor.value.state.selection.from)
+
+  return dom instanceof HTMLElement && dom.classList.contains('tiptapify-slide')
+}
+
+function download() {
+  const { src } = editor.value.getAttributes('image')
+  if (src) {
+    window.open(src, '_blank', 'noopener')
+  }
+}
+
+</script>
+
+<template>
+  <BubbleMenu
+    v-if="editor && scrollTarget"
+    :editor="editor"
+    plugin-key="tiptapifyImageMenu"
+    :options="{ placement: 'top', offset: -52, flip: false, scrollTarget }"
+    :should-show="isImageSelected"
+  >
+    <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')" />
+          <BtnIcon :icon="`mdiSvg:${mdi.mdiArrowLeft}`" />
+        </VBtn>
+        <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_forward')" />
+          <BtnIcon :icon="`mdiSvg:${mdi.mdiArrowRight}`" />
+        </VBtn>
+      </template>
+      <template v-else>
+        <VBtn
+          v-for="alignment in alignments"
+          :key="alignment.label"
+          size="32"
+          variant="text"
+          color=""
+          :class="{ 'tiptapify-btn--active': (editor.getAttributes('image').align ?? null) === alignment.value }"
+          @click="toggleAlign(alignment.value)"
+        >
+          <Tooltip :label="t(alignment.label)" />
+          <BtnIcon :icon="`mdiSvg:${alignment.icon}`" />
+        </VBtn>
+      </template>
+
+      <div class="tiptapify-image-menu__divider" />
+
+      <VBtn size="32" variant="text" color="" @click="download">
+        <Tooltip :label="t('media.image_toolbar.download')" />
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiTrayArrowDown}`" />
+      </VBtn>
+      <VBtn size="32" variant="text" color="" @click="editor.commands.showTiptapifyImage()">
+        <Tooltip :label="t('media.image_toolbar.edit')" />
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiImageEditOutline}`" />
+      </VBtn>
+
+      <div class="tiptapify-image-menu__divider" />
+
+      <VBtn size="32" variant="text" color="" @click="editor.chain().focus().deleteSelection().run()">
+        <Tooltip :label="t('media.image_toolbar.delete')" />
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiTrashCanOutline}`" />
+      </VBtn>
+    </div>
+  </BubbleMenu>
+</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: 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 {
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  background: rgba(var(--v-border-color), var(--v-border-opacity));
+}
+</style>

package/src/components/MenuBubble.vue

@@ -2,7 +2,9 @@
 import { Editor } from '@tiptap/vue-3'
 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' } },
@@ -11,6 +13,14 @@ 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))
+
 const items = ref([
   {
     name: 'bold',
@@ -85,11 +95,16 @@ const items = ref([
 
 <template>
   <BubbleMenu
-    v-if="editor"
+    v-if="editor && scrollTarget"
     :editor="editor"
-    :options="{ placement: 'bottom' }"
-    :should-show="({ editor, view, state, from, to }) => {
-      if (editor.isActive('image') || editor.isActive('code') || editor.isActive('codeBlock')) {
+    :options="{ placement: 'bottom', scrollTarget }"
+    :should-show="({ editor, state, from, to }) => {
+      // A selected block (image, paywall, widget) is not text to format
+      if (state.selection instanceof NodeSelection) {
+        return false
+      }
+
+      if (editor.isActive('code') || editor.isActive('codeBlock')) {
         return false
       }
 
@@ -99,7 +114,27 @@ const items = ref([
       return (from !== to) && !isAllSelected
     }"
   >
-    <div class="bubble-menu">
+    <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"
+        size="32"
+        variant="text"
+        color=""
+        :disabled="item.props?.disabled"
+        :class="{ 'tiptapify-btn--active': item.props?.color === 'primary' }"
+        @click="item.click"
+      >
+        <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">
@@ -118,8 +153,26 @@ const items = ref([
 </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: 6px;
-  box-shadow: 4px 4px 20px var(--dark-gray);
+  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: 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>