tiptapify 0.3.0 → 0.3.2

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.2",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

package/src/components/Toolbar/Index.vue

@@ -132,8 +132,15 @@ function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: Array<any>,
       _itemOptions.splice(paragraphIndex, 1)
     }
 
+    const inlineIndex = _itemOptions.findIndex((item: string) => item === 'inline')
+    const inline = inlineIndex > -1
+    if (inline) {
+      _itemOptions.splice(inlineIndex, 1)
+    }
+
     component.props = {
       withParagraph,
+      inline,
       customHeadingLevels: _itemOptions.map((item: string) => parseInt(item)),
     }
   }

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

@@ -0,0 +1,75 @@
+import { afterEach, 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'
+import { headingLevels } from '@tiptapify/constants/style'
+
+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 (toolbarItems: typeof items = items) {
+  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: toolbarItems })
+    },
+  })
+  app.use(createVuetify())
+
+  const html = await renderToString(app)
+  warn.mockRestore()
+
+  return { html, warnings }
+}
+
+describe('Toolbar Items', () => {
+  afterEach(() => {
+    headingLevels.value = [1, 2, 3, 4, 5, 6]
+  })
+
+  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')
+  })
+
+  it('renders heading levels as separate buttons in inline mode', async () => {
+    const { html } = await renderToolbar([
+      {
+        section: 'style',
+        group: true,
+        components: [{
+          name: 'heading',
+          component: HeadingButton,
+          props: { inline: true, withParagraph: true, customHeadingLevels: [2, 3] },
+        }],
+      },
+    ])
+
+    expect(html).not.toContain('tiptapify-heading-button-1')
+    expect(html.match(/<button/g)).toHaveLength(3)
+  })
+})

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" />

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

@@ -11,6 +11,7 @@ import { inject, Ref } from 'vue'
 const props = defineProps({
   customHeadingLevels: { type: Array<Level>, default: () => [] },
   withParagraph: { type: Boolean, default: () => true },
+  inline: { type: Boolean, default: () => false },
 })
 
 const { variantBtn } = useTiptapifyConfig()
@@ -28,41 +29,69 @@ setHeadingLevels(props.customHeadingLevels)
 </script>
 
 <template>
-  <VBtn
-    :id="`tiptapify-heading-button-${editor.instanceId}`"
-    :color="editor.isActive('heading') ? 'primary' : ''"
-    :variant="variantBtn"
-    size="32"
-    @click="editor.chain().focus().redo().run()"
-  >
-    <Tooltip :label="t('style.heading')" hotkey="Mod-Alt-1..6" />
-    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatHeaderPound}`" />
-  </VBtn>
+  <template v-if="inline">
+    <VBtn
+      v-if="withParagraph"
+      :color="editor.isActive('paragraph') ? 'primary' : ''"
+      :variant="variantBtn"
+      size="32"
+      @click="editor.chain().focus().setParagraph().run()"
+    >
+      <Tooltip :label="t('style.paragraph')" hotkey="Mod-Alt-0" />
+      <BtnIcon :icon="`mdiSvg:${mdiIcons['mdiFormatParagraph']}`" />
+    </VBtn>
+    <VBtn
+      v-for="headingLevel in headingLevels"
+      :key="headingLevel"
+      :color="editor.isActive('heading', { level: headingLevel }) ? 'primary' : ''"
+      :variant="variantBtn"
+      size="32"
+      @click="editor.chain().focus().toggleHeading({ level: headingLevel }).run()"
+    >
+      <Tooltip :label="t(`style.headings.h${headingLevel}`)" :hotkey="`Mod-Alt-${headingLevel}`" />
+      <BtnIcon :icon="`mdiSvg:${mdiIcons[`mdiFormatHeader${headingLevel}`]}`" />
+    </VBtn>
+  </template>
 
-  <VMenu :activator="`#tiptapify-heading-button-${editor.instanceId}`">
-    <VList density="compact">
-      <VListItem
-        v-if="withParagraph"
-        link
-        :color="editor.isActive('paragraph') ? 'primary' : ''"
-        @click="editor.chain().focus().setParagraph().run()"
-      >
-        <VListItemTitle class="d-flex justify-center align-center">
-          <BtnIcon :icon="`mdiSvg:${mdiIcons['mdiFormatParagraph']}`" />
-        </VListItemTitle>
-      </VListItem>
-      <VListItem
-        v-for="headingLevel in headingLevels"
-        :key="headingLevel"
-        :color="editor.isActive('heading', { level: headingLevel }) ? 'primary' : ''"
-        @click="editor.chain().focus().toggleHeading({ level: headingLevel }).run()"
-      >
-        <VListItemTitle class="d-flex justify-center align-center">
-          <BtnIcon :icon="`mdiSvg:${mdiIcons[`mdiFormatHeader${headingLevel}`]}`" />
-        </VListItemTitle>
-      </VListItem>
-    </VList>
-  </VMenu>
+  <template v-else>
+    <VBtn
+      :id="`tiptapify-heading-button-${editor.instanceId}`"
+      :color="editor.isActive('heading') ? 'primary' : ''"
+      :variant="variantBtn"
+      size="32"
+      @click="editor.chain().focus().redo().run()"
+    >
+      <Tooltip :label="t('style.heading')" hotkey="Mod-Alt-1..6" />
+      <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatHeaderPound}`" />
+    </VBtn>
+
+    <VMenu :activator="`#tiptapify-heading-button-${editor.instanceId}`">
+      <VList density="compact">
+        <VListItem
+          v-if="withParagraph"
+          link
+          :color="editor.isActive('paragraph') ? 'primary' : ''"
+          @click="editor.chain().focus().setParagraph().run()"
+        >
+          <Tooltip :label="t('style.paragraph')" hotkey="Mod-Alt-0" />
+          <VListItemTitle class="d-flex justify-center align-center">
+            <BtnIcon :icon="`mdiSvg:${mdiIcons['mdiFormatParagraph']}`" />
+          </VListItemTitle>
+        </VListItem>
+        <VListItem
+          v-for="headingLevel in headingLevels"
+          :key="headingLevel"
+          :color="editor.isActive('heading', { level: headingLevel }) ? 'primary' : ''"
+          @click="editor.chain().focus().toggleHeading({ level: headingLevel }).run()"
+        >
+          <Tooltip :label="t(`style.headings.h${headingLevel}`)" :hotkey="`Mod-Alt-${headingLevel}`" />
+          <VListItemTitle class="d-flex justify-center align-center">
+            <BtnIcon :icon="`mdiSvg:${mdiIcons[`mdiFormatHeader${headingLevel}`]}`" />
+          </VListItemTitle>
+        </VListItem>
+      </VList>
+    </VMenu>
+  </template>
 </template>
 
 <style lang="scss" scoped>