tiptapify 0.3.3 → 0.3.5

package/src/extensions/components/list/styles/ListStyleButton.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 { ListStylePreset, ListType } from '@tiptapify/extensions/components/list/styles'
 import { inject, PropType, Ref } from 'vue'
 import { ComposerTranslation } from 'vue-i18n'
@@ -21,7 +23,7 @@ const props = defineProps({
 
 const emit = defineEmits(['toggle'])
 
-const { variantBtn } = useTiptapifyConfig()
+const { variantBtn, shape } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -49,7 +51,7 @@ function presetLabel(preset: ListStylePreset): string {
       <BtnIcon :icon="`mdiSvg:${icon}`" />
     </VBtn>
 
-    <VMenu content-class="tiptapify-menu">
+    <VMenu :content-class="menuContentClass(shape.menu === 'soft')">
       <template #activator="{ props: menuProps }">
         <VBtn
           class="tiptapify-list-style-button__chevron"
@@ -63,23 +65,25 @@ function presetLabel(preset: ListStylePreset): string {
         </VBtn>
       </template>
 
-      <div class="tiptapify-list-style-grid">
-        <button
-          v-for="preset in presets"
-          :key="preset.value ?? 'default'"
-          type="button"
-          class="tiptapify-list-style-grid__item"
-          :class="{ 'tiptapify-list-style-grid__item--active': isPresetActive(preset) }"
-          :title="presetLabel(preset)"
-          :aria-label="presetLabel(preset)"
-          @click="editor.chain().focus().setListStyle(listType, preset.value).run()"
-        >
-          <span v-for="(marker, index) in preset.markers" :key="index" class="tiptapify-list-style-grid__line">
-            <span class="tiptapify-list-style-grid__marker">{{ marker }}</span>
-            <span class="tiptapify-list-style-grid__bar" />
-          </span>
-        </button>
-      </div>
+      <SkinScope>
+        <div class="tiptapify-list-style-grid">
+          <button
+            v-for="preset in presets"
+            :key="preset.value ?? 'default'"
+            type="button"
+            class="tiptapify-list-style-grid__item"
+            :class="{ 'tiptapify-list-style-grid__item--active': isPresetActive(preset) }"
+            :title="presetLabel(preset)"
+            :aria-label="presetLabel(preset)"
+            @click="editor.chain().focus().setListStyle(listType, preset.value).run()"
+          >
+            <span v-for="(marker, index) in preset.markers" :key="index" class="tiptapify-list-style-grid__line">
+              <span class="tiptapify-list-style-grid__marker">{{ marker }}</span>
+              <span class="tiptapify-list-style-grid__bar" />
+            </span>
+          </button>
+        </div>
+      </SkinScope>
     </VMenu>
   </div>
 </template>
@@ -102,16 +106,12 @@ function presetLabel(preset: ListStylePreset): string {
 </style>
 
 <style lang="scss">
-/* Teleported with the menu, so not scoped */
+/* Teleported with the menu, so not scoped. The pastel skin of the grid lives in src/skins/menu.css. */
 .tiptapify-list-style-grid {
   display: grid;
   grid-template-columns: repeat(3, 64px);
   gap: 6px;
-  padding: 6px;
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 8px;
-  background: rgb(var(--v-theme-surface));
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  padding: 4px;
 }
 
 .tiptapify-list-style-grid__item {

package/src/extensions/components/style/heading/Button.vue

@@ -4,8 +4,10 @@ import * as mdi from '@mdi/js'
 import { Level } from '@tiptap/extension-heading'
 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, Ref } from 'vue'
 
 const props = defineProps({
@@ -14,7 +16,7 @@ const props = defineProps({
   inline: { type: Boolean, default: () => false },
 })
 
-const { variantBtn } = useTiptapifyConfig()
+const { variantBtn, shape } = useTiptapifyConfig()
 
 interface MDIIcons { [key: string]: string }
 const mdiIcons = mdi as MDIIcons
@@ -73,34 +75,36 @@ function currentStyleIcon(): string {
       <BtnIcon :icon="`mdiSvg:${mdi.mdiChevronDown}`" class="tiptapify-dropdown-button__chevron" />
     </VBtn>
 
-    <VMenu :activator="`#tiptapify-heading-button-${editor.instanceId}`" content-class="tiptapify-menu">
-      <VList density="compact">
-        <VListItem
-          v-if="withParagraph"
-          link
-          :active="editor.isActive('paragraph')"
-          @click="editor.chain().focus().setParagraph().run()"
-        >
-          <Tooltip :label="t('style.paragraph')" hotkey="Mod-Alt-0" />
-          <template #prepend>
-            <BtnIcon :icon="`mdiSvg:${mdiIcons['mdiFormatParagraph']}`" />
-          </template>
-          <VListItemTitle>{{ t('style.paragraph') }}</VListItemTitle>
-        </VListItem>
-        <VListItem
-          v-for="headingLevel in headingLevels"
-          :key="headingLevel"
-          link
-          :active="editor.isActive('heading', { level: headingLevel })"
-          @click="editor.chain().focus().toggleHeading({ level: headingLevel }).run()"
-        >
-          <Tooltip :label="t(`style.headings.h${headingLevel}`)" :hotkey="`Mod-Alt-${headingLevel}`" />
-          <template #prepend>
-            <BtnIcon :icon="`mdiSvg:${mdiIcons[`mdiFormatHeader${headingLevel}`]}`" />
-          </template>
-          <VListItemTitle>{{ t(`style.headings.h${headingLevel}`) }}</VListItemTitle>
-        </VListItem>
-      </VList>
+    <VMenu :activator="`#tiptapify-heading-button-${editor.instanceId}`" :content-class="menuContentClass(shape.menu === 'soft')">
+      <SkinScope>
+        <VList density="compact">
+          <VListItem
+            v-if="withParagraph"
+            link
+            :active="editor.isActive('paragraph')"
+            @click="editor.chain().focus().setParagraph().run()"
+          >
+            <Tooltip :label="t('style.paragraph')" hotkey="Mod-Alt-0" />
+            <template #prepend>
+              <BtnIcon :icon="`mdiSvg:${mdiIcons['mdiFormatParagraph']}`" />
+            </template>
+            <VListItemTitle>{{ t('style.paragraph') }}</VListItemTitle>
+          </VListItem>
+          <VListItem
+            v-for="headingLevel in headingLevels"
+            :key="headingLevel"
+            link
+            :active="editor.isActive('heading', { level: headingLevel })"
+            @click="editor.chain().focus().toggleHeading({ level: headingLevel }).run()"
+          >
+            <Tooltip :label="t(`style.headings.h${headingLevel}`)" :hotkey="`Mod-Alt-${headingLevel}`" />
+            <template #prepend>
+              <BtnIcon :icon="`mdiSvg:${mdiIcons[`mdiFormatHeader${headingLevel}`]}`" />
+            </template>
+            <VListItemTitle>{{ t(`style.headings.h${headingLevel}`) }}</VListItemTitle>
+          </VListItem>
+        </VList>
+      </SkinScope>
     </VMenu>
   </template>
 </template>

package/src/index.test.ts

@@ -0,0 +1,88 @@
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import { describe, expect, it } from 'vitest'
+import { registerSkin, defineSkin } from '@tiptapify/index'
+import { registerSkin as fromRegistry, defineSkin as defineFromRegistry } from '@tiptapify/skins/registry'
+
+describe('package entry exports', () => {
+  it('exports registerSkin and defineSkin as functions', () => {
+    expect(typeof registerSkin).toBe('function')
+    expect(typeof defineSkin).toBe('function')
+  })
+
+  it('re-exports the registry functions, not copies', () => {
+    expect(registerSkin).toBe(fromRegistry)
+    expect(defineSkin).toBe(defineFromRegistry)
+  })
+
+  it('defineSkin is identity: the same object comes back', () => {
+    const skin = { extends: 'pastel', colors: { toolbarBg: 'rebeccapurple' } }
+
+    expect(defineSkin(skin)).toBe(skin)
+  })
+})
+
+describe('index.d.ts skin-type parity with src/types/editor.ts', () => {
+  // index.d.ts is hand-mirrored from the source types; this guard compares the
+  // exported skin-type declarations member-for-member (declared shape, not
+  // comments/formatting), ending the silent-drift risk of the hand mirror.
+  const SKIN_TYPES = [
+    'TiptapifySkin',
+    'TiptapifyShape',
+    'ResolvedShape',
+    'TiptapifySkinColors',
+    'TiptapifySkinMetrics',
+    'TiptapifySkinConfig',
+    'TiptapifySkinInput',
+  ]
+
+  // cwd is the vitest root (the repo): the guard pins files of the package root
+  const dts = readFileSync(path.resolve(process.cwd(), 'index.d.ts'), 'utf8')
+  const source = readFileSync(path.resolve(process.cwd(), 'src/types/editor.ts'), 'utf8')
+
+  // The declaration block of `name`: a brace body to its closing brace,
+  // an alias body (no `{` on the header line) to the end of its line.
+  // Constraints of this extractor, adequate for the skin blocks it pins:
+  // declarations must be single-line aliases or brace-bodied types (the
+  // index.d.ts mirror style); the `//`-stripping in normalize treats any
+  // `//` as a comment start, so these blocks must contain no URLs in strings.
+  function declaration (file: string, name: string): string {
+    const lines = file.split('\n')
+    const start = lines.findIndex((line) => new RegExp(`^export (interface|type) ${name}\\b`).test(line))
+    if (start < 0) return ''
+    if (lines[start].indexOf('{') < 0) return lines[start]
+    let depth = 0
+    for (let i = start; i < lines.length; i++) {
+      for (const ch of lines[i]) {
+        if (ch === '{') depth++
+        if (ch === '}') depth--
+      }
+      if (depth === 0) return lines.slice(start, i + 1).join('\n')
+    }
+    return ''
+  }
+
+  // Tolerant to the formatting freedom of a hand-written mirror: interface vs type
+  // literal, comments, indentation, line breaks inside the body
+  function normalize (block: string, name: string): string {
+    return block
+      .split('\n')
+      .map((line) => line.replace(/\/\/.*$/, ''))
+      .join(' ')
+      .replace(new RegExp(`interface ${name} \\{`), `${name} {`)
+      .replace(new RegExp(`type ${name} = \\{`), `${name} {`)
+      .replace(/\s+/g, ' ')
+      .trim()
+  }
+
+  for (const name of SKIN_TYPES) {
+    it(`${name} is mirrored member-for-member`, () => {
+      const inDts = declaration(dts, name)
+      const inSource = declaration(source, name)
+
+      expect(inDts, `${name} missing from index.d.ts`).not.toBe('')
+      expect(inSource, `${name} missing from src/types/editor.ts`).not.toBe('')
+      expect(normalize(inDts, name)).toBe(normalize(inSource, name))
+    })
+  }
+})

package/src/index.ts

@@ -4,6 +4,7 @@ import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
 import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 import { TiptapifyFooterAlignment } from '@tiptapify/types/editor'
 import { createAiBackendProvider } from '@tiptapify/extensions/components/ai/backend'
+import { registerSkin, defineSkin } from '@tiptapify/skins/registry'
 
 import { Editor as TipTapEditor, nodeViewProps, NodeViewWrapper, VueNodeViewRenderer } from '@tiptap/vue-3'
 import { Node, Mark, markInputRule, markPasteRule, mergeAttributes } from '@tiptap/core'
@@ -13,6 +14,9 @@ import * as mdi from '@mdi/js'
 
 import { messages } from './i18n'
 
+// The shared menu skin stylesheet: shipped in the dist CSS next to the SFC styles (spec: Menu CSS strategy)
+import './skins/menu.css'
+
 interface PackageOptions {
   i18n?: any;
 }
@@ -46,11 +50,22 @@ export {
   markInputRule,
   markPasteRule,
   mergeAttributes,
+  registerSkin,
+  defineSkin,
 }
 
 export type { TiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 export type { TiptapifyFooterAlignment }
 export type { CommandProps, InputRuleMatch, PasteRuleMatch }
+export type {
+  TiptapifySkin,
+  TiptapifyShape,
+  TiptapifySkinColors,
+  TiptapifySkinMetrics,
+  TiptapifySkinConfig,
+  TiptapifySkinInput,
+  ResolvedShape,
+} from '@tiptapify/types/editor'
 export type {
   TiptapifyAiBackendProviderOptions,
   TiptapifyAiBackendRequest,