tiptapify 0.3.5 → 0.4.1

package/index.d.ts

@@ -157,11 +157,41 @@ export type TiptapifySkinConfig = TiptapifyShape & {
 // The `skin` prop: a registered name (string) or an inline object
 export type TiptapifySkinInput = string | TiptapifySkinConfig
 
+export type TiptapifyUploadKind = 'image' | 'video'
+
+/** `POST {endpoint}` takes a file (multipart `file` and `kind`) and answers `{ url }`, an error `{ error }` */
+export type TiptapifyUploadOptions = {
+  endpoint: string,
+  headers?: Record<string, string>,
+}
+
+export type TiptapifyLinkPreviewOptions = {
+  endpoint: string,
+  headers?: Record<string, string>,
+}
+
+export type TiptapifyLinkPreviewData = {
+  url: string,
+  title?: string,
+  description?: string,
+  image?: string,
+  siteName?: string,
+}
+
 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
 
+/** How the saved HTML carries the look of its content: `inline` styles, or `classes` for tiptapify/content.css */
+export type TiptapifyContentStyles = 'inline' | 'classes'
+
+/** The content HTML with the content styles written into its `style` attributes (unchanged without a DOM) */
+export declare function inlineContentStyles(html: string): string
+
+/** The content styles as a stylesheet for the content inside `scope` (`.tiptapify-content`), weightless by default */
+export declare function contentCss(scope?: string, options?: { weightless?: boolean }): string
+
 export interface TiptapifyOptions {
   i18n?: string
 }
@@ -183,6 +213,10 @@ export interface TiptapifyAiChatMessage {
 export interface TiptapifyAiEditorContext {
   prompt: string
   selectedText: string
+  /** The text of the selection's paragraph before it (empty without a selection) */
+  textBefore: string
+  /** The text of the selection's paragraph after it (empty without a selection) */
+  textAfter: string
   text: string
   html: string
   json: object
@@ -326,6 +360,9 @@ export type {
 
 export type { TiptapifyConfig }
 
+/** The logic of the image dialog, for a host that replaces the dialog with its own */
+export * as imageDialog from './src/extensions/components/media/image/imageDialog'
+
 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.5",
+  "version": "0.4.1",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -16,7 +16,8 @@
     },
     "./src/*": "./src/*",
     "./dist/*": "./dist/*",
-    "./style.css": "./dist/tiptapify.css"
+    "./style.css": "./dist/tiptapify.css",
+    "./content.css": "./dist/content.css"
   },
   "main": "./dist/tiptapify.umd.cjs",
   "module": "./dist/tiptapify.mjs",

package/src/components/ImageBubbleMenu.vue

@@ -4,18 +4,15 @@ 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 BubbleRow from '@tiptapify/components/UI/BubbleRow.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))
@@ -66,7 +63,7 @@ function download() {
     :options="{ placement: 'top', offset: -52, flip: false, scrollTarget }"
     :should-show="isImageSelected"
   >
-    <div class="tiptapify-image-menu" :class="{ 'tiptapify-quiet-buttons': shape.buttons === 'quiet' }">
+    <BubbleRow class="tiptapify-image-menu">
       <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')" />
@@ -92,7 +89,7 @@ function download() {
         </VBtn>
       </template>
 
-      <div class="tiptapify-image-menu__divider" />
+      <div class="tiptapify-bubble-divider" />
 
       <VBtn size="32" variant="text" color="" @click="download">
         <Tooltip :label="t('media.image_toolbar.download')" />
@@ -103,37 +100,12 @@ function download() {
         <BtnIcon :icon="`mdiSvg:${mdi.mdiImageEditOutline}`" />
       </VBtn>
 
-      <div class="tiptapify-image-menu__divider" />
+      <div class="tiptapify-bubble-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>
+    </BubbleRow>
   </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.test.ts

@@ -0,0 +1,120 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { App, createApp, h, nextTick, provide, ref, shallowRef } from 'vue'
+import { createVuetify } from 'vuetify'
+import { Editor } from '@tiptap/vue-3'
+import { Bold } from '@tiptap/extension-bold'
+import { Code } from '@tiptap/extension-code'
+import { Document } from '@tiptap/extension-document'
+import { Highlight } from '@tiptap/extension-highlight'
+import { Italic } from '@tiptap/extension-italic'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Strike } from '@tiptap/extension-strike'
+import { Subscript } from '@tiptap/extension-subscript'
+import { Superscript } from '@tiptap/extension-superscript'
+import { Text } from '@tiptap/extension-text'
+import { Underline } from '@tiptap/extension-underline'
+import MenuBubble from '@tiptapify/components/MenuBubble.vue'
+
+// jsdom has no layout of a range, which the menu position reads
+if (!Range.prototype.getClientRects) {
+  Range.prototype.getClientRects = () => [] as unknown as DOMRectList
+  Range.prototype.getBoundingClientRect = () => new DOMRect()
+}
+
+let app: App | null = null
+let editor: Editor | null = null
+
+async function flush() {
+  for (let i = 0; i < 5; i++) {
+    await nextTick()
+  }
+}
+
+async function mountMenu(): Promise<HTMLElement> {
+  editor = new Editor({
+    element: document.body.appendChild(document.createElement('div')),
+    content: '<p><strong>Bold</strong> text</p>',
+    extensions: [Document, Paragraph, Text, Bold, Italic, Underline, Strike, Superscript, Subscript, Highlight, Code],
+  })
+  // The menu shows for a selection in the focused editor
+  editor.commands.focus()
+  editor.commands.setTextSelection({ from: 1, to: 5 })
+
+  app = createApp({
+    setup() {
+      provide('tiptapifyEditor', shallowRef(editor))
+      provide('tiptapifyI18n', { t: (key: string) => key })
+      provide('tiptapifyScrollContainer', ref(document.body))
+
+      return () => h(MenuBubble)
+    },
+  })
+  app.use(createVuetify())
+  app.mount(document.body.appendChild(document.createElement('div')))
+  await flush()
+
+  return document.querySelector<HTMLElement>('.tiptapify-bubble-menu')!
+}
+
+afterEach(() => {
+  app?.unmount()
+  editor?.destroy()
+  app = null
+  editor = null
+  document.body.innerHTML = ''
+})
+
+describe('selection bubble menu', () => {
+  it('is one row of icon buttons in groups split by dividers', async () => {
+    const menu = await mountMenu()
+    const children = [...menu.children].map(child => (child.classList.contains('tiptapify-bubble-divider') ? '|' : 'btn'))
+
+    expect(menu.classList).toContain('tiptapify-bubble-row')
+    expect(menu.querySelector('.v-card, .v-toolbar, .v-btn-group')).toBeNull()
+    expect(children.join(' ')).toBe('btn btn btn btn | btn btn | btn btn | btn | btn')
+  })
+
+  it('marks the active marks of the selection as pressed', async () => {
+    const menu = await mountMenu()
+    const pressed = [...menu.querySelectorAll('.v-btn')].map(button => button.classList.contains('tiptapify-btn--active'))
+
+    expect(pressed).toEqual([true, false, false, false, false, false, false, false, false, false])
+    expect(menu.querySelector('.v-btn')!.getAttribute('aria-pressed')).toBe('true')
+  })
+
+  it('applies a mark from its button', async () => {
+    const menu = await mountMenu()
+
+    ;(menu.querySelectorAll<HTMLButtonElement>('.v-btn')[1]).click()
+    // The reactive state of the vue editor follows a transaction on the next frame
+    await new Promise(resolve => setTimeout(resolve, 50))
+    await flush()
+
+    expect(editor!.getHTML()).toBe('<p><strong><em>Bold</em></strong> text</p>')
+    expect(document.querySelectorAll('.tiptapify-bubble-menu .v-btn')[1].classList).toContain('tiptapify-btn--active')
+  })
+})
+
+describe('selection bubble menu indexes', () => {
+  it('applies both indexes to the selection, each from its button', async () => {
+    const menu = await mountMenu()
+    const buttons = () => document.querySelectorAll<HTMLButtonElement>('.tiptapify-bubble-menu .v-btn')
+
+    expect(menu.querySelectorAll('.v-btn')[4].getAttribute('aria-pressed')).toBe('false')
+
+    buttons()[4].click()
+    await new Promise(resolve => setTimeout(resolve, 50))
+    await flush()
+
+    expect(editor!.getHTML()).toBe('<p><strong><sup>Bold</sup></strong> text</p>')
+    expect(buttons()[4].classList).toContain('tiptapify-btn--active')
+
+    buttons()[5].click()
+    await new Promise(resolve => setTimeout(resolve, 50))
+    await flush()
+
+    expect(editor!.getHTML()).toBe('<p><strong><sup><sub>Bold</sub></sup></strong> text</p>')
+    expect(buttons()[4].classList).toContain('tiptapify-btn--active')
+    expect(buttons()[5].classList).toContain('tiptapify-btn--active')
+  })
+})

package/src/components/MenuBubble.vue

@@ -1,96 +1,127 @@
 <script setup lang="ts">
 import { Editor } from '@tiptap/vue-3'
-import { computed, inject, Ref, ref } from 'vue'
+import { 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' } },
-  theme: { type: String, default () { return 'light' } },
-})
+import BubbleRow from '@tiptapify/components/UI/BubbleRow.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 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',
-    icon: `mdiSvg:${mdi.mdiFormatBold}`,
-    props: {
-      disabled: computed(() => !editor?.value.can().chain().focus().toggleBold().run()),
-      color: computed(() => editor.value.isActive('bold') ? 'primary' : ''),
+type BubbleItem = {
+  name: string,
+  icon: string,
+  label: string,
+  hotkey?: string,
+  active?: () => boolean,
+  disabled?: () => boolean,
+  click: () => void,
+}
+
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
+
+const groups: BubbleItem[][] = [
+  [
+    {
+      name: 'bold',
+      icon: mdi.mdiFormatBold,
+      label: 'format.bold',
+      hotkey: 'Mod-b',
+      active: () => editor.value.isActive('bold'),
+      disabled: () => !editor.value.can().chain().focus().toggleBold().run(),
+      click: () => editor.value.chain().focus().toggleBold().run(),
+    },
+    {
+      name: 'italic',
+      icon: mdi.mdiFormatItalic,
+      label: 'format.italic',
+      hotkey: 'Mod-i',
+      active: () => editor.value.isActive('italic'),
+      disabled: () => !editor.value.can().chain().focus().toggleItalic().run(),
+      click: () => editor.value.chain().focus().toggleItalic().run(),
+    },
+    {
+      name: 'underline',
+      icon: mdi.mdiFormatUnderline,
+      label: 'format.underline',
+      hotkey: 'Mod-u',
+      active: () => editor.value.isActive('underline'),
+      disabled: () => !editor.value.can().chain().focus().toggleUnderline().run(),
+      click: () => editor.value.chain().focus().toggleUnderline().run(),
     },
-    click: () => editor.value.chain().focus().toggleBold().run(),
-  },
-  {
-    name: 'italic',
-    icon: `mdiSvg:${mdi.mdiFormatItalic}`,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleItalic().run()),
-      color: computed(() => editor.value.isActive('italic') ? 'primary' : ''),
+    {
+      name: 'strike',
+      icon: mdi.mdiFormatStrikethroughVariant,
+      label: 'format.strike',
+      hotkey: 'Mod-Shift-s',
+      active: () => editor.value.isActive('strike'),
+      disabled: () => !editor.value.can().chain().focus().toggleStrike().run(),
+      click: () => editor.value.chain().focus().toggleStrike().run(),
     },
-    click: () => editor.value.chain().focus().toggleItalic().run(),
-  },
-  {
-    name: 'strike',
-    icon: `mdiSvg:${mdi.mdiFormatStrikethroughVariant}`,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleStrike().run()),
-      color: computed(() => editor.value.isActive('strike') ? 'primary' : ''),
+  ],
+  [
+    {
+      name: 'superscript',
+      icon: mdi.mdiFormatSuperscript,
+      label: 'format.sup',
+      hotkey: 'Mod-.',
+      active: () => editor.value.isActive('superscript'),
+      disabled: () => !editor.value.can().chain().focus().toggleSuperscript().run(),
+      click: () => editor.value.chain().focus().toggleSuperscript().run(),
     },
-    click: () => editor.value.chain().focus().toggleStrike().run(),
-  },
-  {
-    name: 'underline',
-    icon: `mdiSvg:${mdi.mdiFormatUnderline}`,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleUnderline().run()),
-      color: computed(() => editor.value.isActive('underline') ? 'primary' : ''),
+    {
+      name: 'subscript',
+      icon: mdi.mdiFormatSubscript,
+      label: 'format.sub',
+      hotkey: 'Mod-,',
+      active: () => editor.value.isActive('subscript'),
+      disabled: () => !editor.value.can().chain().focus().toggleSubscript().run(),
+      click: () => editor.value.chain().focus().toggleSubscript().run(),
     },
-    click: () => editor.value.chain().focus().toggleUnderline().run(),
-  },
-  {
-    name: 'highlight',
-    icon: `mdiSvg:${mdi.mdiFormatColorHighlight}`,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleHighlight().run()),
-      color: computed(() => editor.value.isActive('highlight') ? 'primary' : ''),
+  ],
+  [
+    {
+      name: 'highlight',
+      icon: mdi.mdiFormatColorHighlight,
+      label: 'style.color.highlight',
+      active: () => editor.value.isActive('highlight'),
+      disabled: () => !editor.value.can().chain().focus().toggleHighlight().run(),
+      click: () => editor.value.chain().focus().toggleHighlight().run(),
     },
-    click: () => editor.value.chain().focus().toggleHighlight().run(),
-  },
-  {
-    name: 'code',
-    icon: `mdiSvg:${mdi.mdiXml}`,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleCode().run()),
-      color: computed(() => editor.value.isActive('code') ? 'primary' : ''),
+    {
+      name: 'code',
+      icon: mdi.mdiCodeTags,
+      label: 'format.code',
+      hotkey: 'Mod-e',
+      active: () => editor.value.isActive('code'),
+      disabled: () => !editor.value.can().chain().focus().toggleCode().run(),
+      click: () => editor.value.chain().focus().toggleCode().run(),
     },
-    click: () => editor.value.chain().focus().toggleCode().run(),
-  },
-  {
-    name: 'link',
-    icon: computed(() => editor.value.isActive('link') ? `mdiSvg:${mdi.mdiLinkOff}` : `mdiSvg:${mdi.mdiLink}`),
-    props: {
-      color: computed(() => editor.value.isActive('link') ? 'primary' : ''),
-      disabled: computed(() => editor.value.isActive('code') || editor.value.isActive('codeBlock')),
+  ],
+  [
+    {
+      name: 'link',
+      icon: mdi.mdiLink,
+      label: 'media.link',
+      active: () => editor.value.isActive('link'),
+      click: () => editor.value.commands.showLink(),
     },
-    click: () => editor.value.commands.showLink()
-  },
-  {
-    name: 'format clear',
-    icon: `mdiSvg:${mdi.mdiFormatClear}`,
-    click: () => editor.value.chain().focus().unsetAllMarks().clearNodes().run(),
-  }
-])
+  ],
+  [
+    {
+      name: 'format clear',
+      icon: mdi.mdiFormatClear,
+      label: 'format.formatClear',
+      click: () => editor.value.chain().focus().unsetAllMarks().clearNodes().run(),
+    },
+  ],
+]
 </script>
 
 <template>
@@ -114,65 +145,24 @@ const items = ref([
       return (from !== to) && !isAllSelected
     }"
   >
-    <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">
-            <VToolbarItems>
-              <VBtnGroup divided density="compact">
-                <VBtn v-for="(item, key) in items" :key="key" v-bind="item.props" size="x-small" @click="item.click">
-                  <VIcon :icon="item.icon" size="20" />
-                </VBtn>
-              </VBtnGroup>
-            </VToolbarItems>
-          </VToolbar>
-        </VCardText>
-      </VCard>
-    </div>
+    <BubbleRow class="tiptapify-bubble-menu">
+      <template v-for="(group, index) in groups" :key="index">
+        <div v-if="index > 0" class="tiptapify-bubble-divider" />
+        <VBtn
+          v-for="item in group"
+          :key="item.name"
+          size="32"
+          variant="text"
+          color=""
+          :disabled="item.disabled?.()"
+          :class="{ 'tiptapify-btn--active': item.active?.() }"
+          :aria-pressed="item.active ? item.active() : undefined"
+          @click="item.click"
+        >
+          <Tooltip :label="t(item.label)" :hotkey="item.hotkey" />
+          <VIcon :icon="`mdiSvg:${item.icon}`" size="20" />
+        </VBtn>
+      </template>
+    </BubbleRow>
   </BubbleMenu>
 </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: 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>