tiptapify 0.3.1 → 0.3.3

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

@@ -0,0 +1,96 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createSSRApp, defineComponent, h, markRaw, provide, shallowRef } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { createVuetify } from 'vuetify'
+import Toolbar from '@tiptapify/components/Toolbar/Index.vue'
+
+// Every editor call answers with something callable, so toolbar buttons can render
+function permissive (): unknown {
+  return new Proxy(() => false, {
+    get: (_, key) => {
+      if (key === '__v_skip') {
+        return true
+      }
+      if (key === Symbol.toPrimitive) {
+        return () => ''
+      }
+      if (typeof key === 'symbol' || key.startsWith('__v') || key === 'then') {
+        return undefined
+      }
+
+      return key === 'instanceId' ? 1 : permissive()
+    },
+    apply: () => permissive(),
+  })
+}
+
+const stub = (className: string) => markRaw(defineComponent({ render: () => h('i', { class: className }) }))
+
+async function renderToolbar (items: string[], customExtensions: unknown[]) {
+  vi.spyOn(console, 'warn').mockImplementation(() => {})
+  const app = createSSRApp({
+    setup () {
+      provide('tiptapifyEditor', shallowRef(permissive()))
+      provide('tiptapifyI18n', { t: (key: string) => key })
+
+      return () => h(Toolbar, { items, customExtensions })
+    },
+  })
+  app.use(createVuetify())
+
+  return renderToString(app)
+}
+
+describe('Toolbar', () => {
+  it('adds a custom button to an existing section after its own buttons', async () => {
+    const html = await renderToolbar(['sup', 'blockquote'], [
+      { section: 'formatExtra', group: true, components: [{ name: 'disclaimer', component: stub('custom-disclaimer') }] },
+    ])
+
+    expect(html).toContain('custom-disclaimer')
+    expect(html.indexOf('custom-disclaimer')).toBeGreaterThan(html.indexOf('tiptapify-toolbar-group'))
+  })
+
+  it('puts custom sections before the spacer', async () => {
+    const html = await renderToolbar(['bold', '~', 'undo'], [
+      { section: 'extra', group: true, components: [{ name: 'snippet', component: stub('custom-snippet') }] },
+    ])
+
+    expect(html.indexOf('custom-snippet')).toBeLessThan(html.indexOf('tiptapify-toolbar-spacer'))
+  })
+
+  it('does not leak custom buttons into the next editor', async () => {
+    await renderToolbar([], [
+      { section: 'formatExtra', group: true, components: [{ name: 'disclaimer', component: stub('custom-disclaimer') }] },
+    ])
+    const html = await renderToolbar([], [])
+
+    expect(html).not.toContain('custom-disclaimer')
+  })
+
+  it('groups the items by the separators, across sections', async () => {
+    const html = await renderToolbar(['bold', 'link', '|', 'blockquote', 'custom-note', '|', 'undo'], [
+      { section: 'extra', group: true, components: [{ name: 'custom-note', component: stub('custom-note') }] },
+    ])
+
+    const groups = html.split('tiptapify-toolbar-group').slice(1)
+    expect(groups).toHaveLength(3)
+    expect(groups[1]).toContain('custom-note')
+    expect(groups[0]).not.toContain('custom-note')
+  })
+
+  it('drops the place of a custom button the editor does not have', async () => {
+    const html = await renderToolbar(['bold', '|', 'custom-note', '|', 'undo'], [])
+
+    expect(html.split('tiptapify-toolbar-group').slice(1)).toHaveLength(2)
+  })
+
+  it('replaces a built-in button by a custom one of the same name in its place', async () => {
+    const html = await renderToolbar(['bold', '|', 'image', 'link'], [
+      { section: 'media', group: true, components: [{ name: 'image', component: stub('custom-image') }] },
+    ])
+
+    expect(html).toContain('custom-image')
+    expect(html.split('tiptapify-toolbar-group').slice(1)).toHaveLength(2)
+  })
+})

package/src/components/Toolbar/Index.vue

@@ -27,16 +27,65 @@ const propsItems = computed(() => props.items)
 const propsItemsExclude = computed(() => props.itemsExclude)
 
 // this prevents from overriding the default items
-let toolbarItems = [...Object.values(toolbarItemsGroups)]
+let toolbarItems = Object.values(toolbarItemsGroups).map(section => ({
+  ...section,
+  components: section.components.map(component => ({ ...component })),
+}))
 const availableItemsKeys = Object.keys(availableItems)
 
 type toolbarItemsType = { [key: string]: { section: string, group: boolean, components: any[] } }
 if (propsItemsExclude.value) {
   prepareExcludeToolbarItems()
+} else if (Array.isArray(propsItems.value) && propsItems.value.includes('|')) {
+  prepareGroupedToolbarItems(propsItems.value as string[])
 } else {
   prepareToolbarItems()
 }
 
+/**
+ * Items split by `'|'` into groups of their own, whatever sections the buttons come from. A name that is
+ * not a built-in item keeps a place for the custom button of that name; editors without it drop the place.
+ */
+function prepareGroupedToolbarItems(items: string[]) {
+  const groups: toolbarItemsType[string][] = []
+  const newGroup = () => ({ section: `__group_${groups.length}__`, group: true, components: [] as any[] })
+  let group = newGroup()
+
+  const flush = () => {
+    if (group.components.length > 0) {
+      groups.push(group)
+    }
+    group = newGroup()
+  }
+
+  for (const propsItem of items) {
+    if (propsItem === '|') {
+      flush()
+      continue
+    }
+
+    if (propsItem === '~') {
+      flush()
+      groups.push({ section: '__spacer__', group: false, components: [] })
+      group = newGroup()
+      continue
+    }
+
+    const itemName = propsItem.split(':')[0]
+    if (!availableItemsKeys.includes(itemName)) {
+      group.components.push({ name: itemName, component: null })
+      continue
+    }
+
+    const itemSections: toolbarItemsType = {}
+    addToolbarItem(itemSections, items, propsItem)
+    group.components.push(...Object.values(itemSections).flatMap(section => section.components))
+  }
+  flush()
+
+  toolbarItems = groups
+}
+
 function prepareToolbarItems() {
   const _toolbarItems: toolbarItemsType = {}
 
@@ -67,6 +116,15 @@ function prepareToolbarItems() {
         }
         continue
       }
+      // `~` pushes the items after it to the end of the toolbar
+      if (propsItem === '~') {
+        _toolbarItems['__spacer__'] ??= {
+          section: '__spacer__',
+          group: false,
+          components: []
+        }
+        continue
+      }
       const item = propsItem.split(':')
       if (!availableItemsKeys.includes(item[0])) {
         throw new Error(`The ${propsItem} is unknown extension. Please use one of the following: ${availableItemsKeys.join(', ')}`)
@@ -105,7 +163,9 @@ function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: Array<any>,
   const itemSection = availableItems[_itemTitle]
   const section = toolbarItemsGroups[itemSection]
 
-  const component = section?.components.find((component: { name: string }) => component.name === _itemTitle)
+  // A copy: item options set its props, which must not reach the toolbars of other editors
+  const sectionComponent = section?.components.find((component: { name: string }) => component.name === _itemTitle)
+  const component = sectionComponent ? { ...sectionComponent } : undefined
 
   let itemExists = itemsList.includes(itemTitle)
   itemExists = propsItemsExclude.value ? itemExists : !itemExists
@@ -132,12 +192,33 @@ 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)),
     }
   }
 
+  // `orderedList:styles` adds the numbering styles dropdown
+  if (_itemTitle === 'orderedList' && _itemOptions.includes('styles')) {
+    component.props = {
+      withStyles: true,
+    }
+  }
+
+  // `align` is the alignment dropdown; `align:left,center,right` limits its options
+  if (_itemTitle === 'align' && _itemOptions.length > 0) {
+    component.props = {
+      alignments: _itemOptions,
+    }
+  }
+
   if (_itemTitle === 'bulletList' && _itemOptions.length > 0) {
     const paragraphIndex = _itemOptions.findIndex((item: any) => item === 'p')
     const withParagraph = paragraphIndex > -1
@@ -146,6 +227,7 @@ function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: Array<any>,
     }
 
     component.props = {
+      withStyles: _itemOptions.includes('styles'),
       withDisc: _itemOptions.includes('disc'),
       withCircle: _itemOptions.includes('circle'),
       withSquare: _itemOptions.includes('square'),
@@ -157,25 +239,40 @@ function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: Array<any>,
   return true
 }
 
-Object.keys(props.customExtensions).forEach((key: any) => {
-  const existingSection = toolbarItems.find(item => item.section === props.customExtensions[key].section)
-  if (existingSection) {
-    for (const component of props.customExtensions[key].components) {
-      const existingComponent = existingSection.components.find(_component => _component.name === component.name)
-      if (existingComponent) {
-        existingComponent.component = component.component
-      }
+// A custom button takes the place of the item of its name, joins its section or comes as a section of its own
+for (const customSection of props.customExtensions) {
+  const unplaced = []
+  for (const component of customSection.components) {
+    const place = toolbarItems.flatMap(item => item.components).find(_component => _component.name === component.name)
+    if (place) {
+      Object.assign(place, component)
+    } else {
+      unplaced.push(component)
     }
+  }
+
+  if (unplaced.length === 0) {
+    continue
+  }
+
+  const existingSection = toolbarItems.find(item => item.section === customSection.section)
+  if (existingSection) {
+    existingSection.components.push(...unplaced)
   } else {
-    toolbarItems.push(props.customExtensions[key])
+    const spacerIndex = toolbarItems.findIndex(item => item.section === '__spacer__')
+    toolbarItems.splice(spacerIndex > -1 ? spacerIndex : toolbarItems.length, 0, { ...customSection, components: unplaced })
   }
-})
+}
+
+toolbarItems = toolbarItems
+  .map(item => ({ ...item, components: item.components.filter(component => component.component) }))
+  .filter(item => item.components.length > 0 || ['__spacer__', '__separator__'].includes(item.section))
 
 </script>
 
 <template>
   <div v-if="editor" class="tiptapify-toolbar">
-    <VToolbar elevation="1" :theme="theme" height="auto" :class="`ps-1 pr-1 rounded-t-${rounded}`">
+    <VToolbar flat :theme="theme" height="auto" :class="`rounded-t-${rounded}`">
       <VSlideGroup v-if="toolbarScrollable">
         <Items :items="toolbarItems" />
       </VSlideGroup>
@@ -185,6 +282,120 @@ Object.keys(props.customExtensions).forEach((key: any) => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
+/*
+ * Quiet toolbar: a tinted bar under a hairline, ghost icon buttons that only get a background on
+ * hover, and a neutral "pressed" state instead of the filled primary button. The buttons keep
+ * coloring themselves with `color="primary"` when active; the toolbar maps that to the pressed look.
+ */
+.tiptapify-toolbar {
+  > .v-toolbar {
+    background: rgba(var(--v-theme-on-surface), 0.03);
+    border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+}
+
+/*
+ * Quiet buttons of the toolbar and the bubble menus. Tripled class: outranks Vuetify's color utilities and
+ * the theme rules that repaint colored buttons on hover, focus and press (`.bg-primary:focus` and the like).
+ * Active buttons keep `color="primary"` (or `.tiptapify-btn--active`) and get the neutral pressed look.
+ */
+.tiptapify-toolbar,
+.tiptapify-quiet-buttons {
+  .v-btn.v-btn.v-btn {
+    border-radius: 6px;
+    box-shadow: none !important;
+    background-color: transparent !important;
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
+    transition: background-color 0.15s, color 0.15s;
+
+    > .v-btn__overlay,
+    > .v-btn__underlay {
+      display: none;
+    }
+
+    &:hover,
+    &:focus-visible,
+    &[aria-expanded='true'] {
+      background-color: rgba(var(--v-theme-on-surface), 0.07) !important;
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+    }
+
+    &.bg-primary,
+    &.text-primary,
+    &.tiptapify-btn--active {
+      &,
+      &:focus,
+      &:active {
+        background-color: rgba(var(--v-theme-on-surface), 0.1) !important;
+        color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+      }
+
+      &:hover,
+      &:focus-visible,
+      &[aria-expanded='true'] {
+        background-color: rgba(var(--v-theme-on-surface), 0.14) !important;
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid rgba(var(--v-theme-on-surface), 0.25);
+      outline-offset: -2px;
+    }
+  }
+}
 
+/* A toolbar button that opens a dropdown: the current choice and a chevron */
+.tiptapify-toolbar .v-btn.tiptapify-dropdown-button {
+  min-width: 0;
+  padding-inline: 6px 4px;
+
+  .tiptapify-dropdown-button__chevron {
+    margin-inline-start: 2px;
+    opacity: 0.7;
+  }
+}
+
+/* Dropdowns opened from the toolbar: a light card with compact rows of icon + label. */
+.tiptapify-menu {
+  /* Doubled classes: the admin theme pads menu lists and items with its own !important rules */
+  > .v-list.v-list {
+    padding: 4px !important;
+    border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+
+    > .v-list-item.v-list-item {
+      min-height: 34px;
+      margin: 0 !important;
+      padding: 4px 8px !important;
+      border-radius: 6px;
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+
+      .v-list-item__prepend > .v-icon {
+        margin-inline-end: 0;
+        opacity: 0.6;
+      }
+
+      .v-list-item__spacer {
+        width: 10px !important;
+      }
+
+      .v-list-item-title {
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      &.v-list-item--active {
+        background: rgba(var(--v-theme-on-surface), 0.06);
+        color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+
+        > .v-list-item__overlay {
+          opacity: 0;
+        }
+      }
+    }
+  }
+}
 </style>

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

@@ -1,9 +1,11 @@
-import { describe, expect, it, vi } from 'vitest'
+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 AlignmentMenuButton from '@tiptapify/extensions/components/alignment/menu/Button.vue'
+import { headingLevels } from '@tiptapify/constants/style'
 
 const editor = {
   instanceId: 1,
@@ -21,7 +23,7 @@ const items = [
   },
 ]
 
-async function renderToolbar () {
+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(' '))
@@ -32,7 +34,7 @@ async function renderToolbar () {
       provide('tiptapifyEditor', ref(editor))
       provide('tiptapifyI18n', { t: (key: string) => key })
 
-      return () => h(Items, { items })
+      return () => h(Items, { items: toolbarItems })
     },
   })
   app.use(createVuetify())
@@ -44,10 +46,54 @@ async function renderToolbar () {
 }
 
 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)
+  })
+
+  it('renders a spacer that pushes the next items to the end', async () => {
+    const { html } = await renderToolbar([
+      items[0],
+      { section: '__spacer__', group: false, components: [] },
+      { section: 'actions', group: true, components: [{ name: 'heading', component: HeadingButton }] },
+    ])
+
+    expect(html).toContain('tiptapify-toolbar-spacer')
+  })
+
+  it('renders the alignment dropdown with the chosen alignments', async () => {
+    const { html } = await renderToolbar([
+      {
+        section: 'alignment',
+        group: true,
+        components: [{ name: 'align', component: AlignmentMenuButton, props: { alignments: ['left', 'center'] } }],
+      },
+    ])
+
+    expect(html).toContain('tiptapify-align-button-1')
+    expect(html).toContain('tiptapify-dropdown-button__chevron')
+  })
 })

package/src/components/Toolbar/Items.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 
-import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 import { PropType } from 'vue'
 
 import { toolbarSections } from '@tiptapify/types/toolbarTypes'
@@ -9,22 +8,23 @@ defineProps({
   items: { type: Array as PropType<toolbarSections>, default() { return {} } },
 })
 
-const { variantBtn } = useTiptapifyConfig()
-
 </script>
 
 <template>
-  <VToolbarItems class="px-2 py-3">
+  <VToolbarItems class="tiptapify-toolbar-items">
     <template v-for="item in items" :key="item.section">
       <template v-if="item.section === '__separator__'">
         <div class="menu-divider" />
       </template>
+      <template v-else-if="item.section === '__spacer__'">
+        <div class="tiptapify-toolbar-spacer" />
+      </template>
       <template v-else>
-        <VBtnGroup v-if="item.group" elevation="4" :class="{ 'tiptapify-btn-group--elevated': variantBtn === 'elevated' }">
+        <div v-if="item.group" class="tiptapify-toolbar-group">
           <template v-for="sectionItem in item.components" :key="sectionItem.name">
             <component :is="sectionItem.component" v-bind="sectionItem.props ?? {}" />
           </template>
-        </VBtnGroup>
+        </div>
         <template v-else>
           <component
             :is="sectionItem.component"
@@ -40,35 +40,34 @@ const { variantBtn } = useTiptapifyConfig()
 </template>
 
 <style lang="scss" scoped>
-.tiptapify-btn-group--elevated {
-  box-shadow:
-      0 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)),
-      0 2px 2px 0 var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)),
-      0 1px 5px 0 var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-}
-
-:deep(.v-btn-group) {
-  height: 32px !important;
-}
-
-.menu-item-title {
-  font-size: 14px;
+.tiptapify-toolbar-items {
+  /* Vuetify sizes .v-toolbar-items to its content; grow it to the full toolbar width,
+   * otherwise the `~` spacer has no free space to expand into. */
+  flex-grow: 1;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 6px;
+  padding: 6px 8px;
 }
 
-.menu-button {
-  margin: 0 1px;
+.tiptapify-toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
 }
 
 .menu-divider {
-  margin: 0 4px;
+  width: 1px;
+  height: 20px;
+  background: rgba(var(--v-border-color), var(--v-border-opacity));
 }
 
-.menu-divider:nth-last-child(1) {
+.menu-divider:nth-last-child(1),
+.menu-divider:has(+ .tiptapify-toolbar-spacer) {
   display: none;
 }
 
-.v-toolbar-items {
-  flex-wrap: wrap;
-  row-gap: 5px;
+.tiptapify-toolbar-spacer {
+  flex: 1 0 0;
 }
 </style>

package/src/components/Toolbar/alignment.ts

@@ -2,6 +2,7 @@ import { default as AlignmentLeftButton } from '@tiptapify/extensions/components
 import { default as AlignmentCenterButton } from '@tiptapify/extensions/components/alignment/center/Button.vue'
 import { default as AlignmentRightButton } from '@tiptapify/extensions/components/alignment/right/Button.vue'
 import { default as AlignmentJustifyButton } from '@tiptapify/extensions/components/alignment/justify/Button.vue'
+import { default as AlignmentMenuButton } from '@tiptapify/extensions/components/alignment/menu/Button.vue'
 import { markRaw } from 'vue'
 
 export default {
@@ -24,5 +25,9 @@ export default {
       name: 'justify',
       component: markRaw(AlignmentJustifyButton),
     },
+    {
+      name: 'align',
+      component: markRaw(AlignmentMenuButton),
+    },
   ]
 }