tiptapify 0.3.0 → 0.3.1

package/index.d.ts

@@ -62,6 +62,7 @@ import '@tiptap/extension-invisible-characters'
 
 import Tiptapify from './src/components/Tiptapify.vue'
 import TiptapifyDialog from './src/components/UI/TiptapifyDialog.vue'
+import { TIPTAPIFY_CONFIG_KEY, useTiptapifyConfig, TiptapifyConfig } from './src/composables/useTiptapifyConfig'
 import * as mdi from '@mdi/js'
 
 export type TiptapifyFooterAlignment = 'start' | 'center' | 'end'
@@ -188,6 +189,8 @@ export {
   mdi,
   Tiptapify,
   TiptapifyDialog,
+  TIPTAPIFY_CONFIG_KEY,
+  useTiptapifyConfig,
   TiptapEditor,
   nodeViewProps,
   NodeViewWrapper,
@@ -225,6 +228,8 @@ export type {
   SingleCommands,
 }
 
+export type { TiptapifyConfig }
+
 declare module '@vue/runtime-core' {
   interface GlobalComponents {
     Tiptapify: typeof Tiptapify

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

package/src/components/Toolbar/Items.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createSSRApp, h, provide, ref } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { createVuetify } from 'vuetify'
+import Items from '@tiptapify/components/Toolbar/Items.vue'
+import HeadingButton from '@tiptapify/extensions/components/style/heading/Button.vue'
+
+const editor = {
+  instanceId: 1,
+  isActive: () => false,
+  can: () => ({ chain: () => ({ focus: () => ({ toggleHeading: () => ({ run: () => false }) }) }) }),
+  chain: () => ({ focus: () => ({ redo: () => ({ run: () => false }) }) }),
+  commands: {},
+}
+
+const items = [
+  {
+    section: 'style',
+    group: true,
+    components: [{ name: 'heading', component: HeadingButton }],
+  },
+]
+
+async function renderToolbar () {
+  const warnings: string[] = []
+  const warn = vi.spyOn(console, 'warn').mockImplementation((...args: unknown[]) => {
+    warnings.push(args.map(String).join(' '))
+  })
+
+  const app = createSSRApp({
+    setup () {
+      provide('tiptapifyEditor', ref(editor))
+      provide('tiptapifyI18n', { t: (key: string) => key })
+
+      return () => h(Items, { items })
+    },
+  })
+  app.use(createVuetify())
+
+  const html = await renderToString(app)
+  warn.mockRestore()
+
+  return { html, warnings }
+}
+
+describe('Toolbar Items', () => {
+  it('does not pass undeclared attributes to toolbar buttons', async () => {
+    const { html, warnings } = await renderToolbar()
+
+    expect(html).toContain('tiptapify-heading-button-1')
+    expect(warnings.join('\n')).not.toContain('Extraneous non-props attributes')
+  })
+})

package/src/components/Toolbar/Items.vue

@@ -22,7 +22,7 @@ const { variantBtn } = useTiptapifyConfig()
       <template v-else>
         <VBtnGroup v-if="item.group" elevation="4" :class="{ 'tiptapify-btn-group--elevated': variantBtn === 'elevated' }">
           <template v-for="sectionItem in item.components" :key="sectionItem.name">
-            <component :is="sectionItem.component" v-bind="{ variantBtn, ...sectionItem.props ?? {} }" />
+            <component :is="sectionItem.component" v-bind="sectionItem.props ?? {}" />
           </template>
         </VBtnGroup>
         <template v-else>
@@ -30,7 +30,7 @@ const { variantBtn } = useTiptapifyConfig()
             :is="sectionItem.component"
             v-for="sectionItem in item.components"
             :key="sectionItem.name"
-            v-bind="{ variantBtn, ...sectionItem.props ?? {} }"
+            v-bind="sectionItem.props ?? {}"
           />
         </template>
         <div class="menu-divider" />