tiptapify 0.3.4 → 0.4.0

package/src/extensions/components/media/linkCard/PasteCardMenu.test.ts

@@ -0,0 +1,133 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { App, createApp, h, nextTick, provide, ref, shallowRef } from 'vue'
+import { createVuetify } from 'vuetify'
+import { Editor } from '@tiptap/vue-3'
+import { Document } from '@tiptap/extension-document'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Text } from '@tiptap/extension-text'
+import { Link } from '@tiptap/extension-link'
+import { LinkCard } from '@tiptapify/extensions/components/media/linkCard'
+import PasteCardMenu from '@tiptapify/extensions/components/media/linkCard/PasteCardMenu.vue'
+import { LinkCardPaste, pastedLink } from '@tiptapify/extensions/components/media/linkCard/pasteCard'
+import { TIPTAPIFY_LINK_PREVIEW_KEY } from '@tiptapify/composables/useTiptapifyLinkPreview'
+
+// jsdom has no `ResizeObserver`; the spinner of the loading button reads it
+if (!('ResizeObserver' in globalThis)) {
+  ;(globalThis as Record<string, unknown>).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+}
+
+// Nor the 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()
+}
+
+const url = 'https://news.example.com/a'
+
+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(available: boolean): Promise<Editor> {
+  const scroll = document.body.appendChild(document.createElement('div'))
+  editor = new Editor({
+    element: scroll.appendChild(document.createElement('div')),
+    content: '<p>Before</p><p></p>',
+    extensions: [Document, Paragraph, Text, Link.configure({ openOnClick: false }), LinkCard, LinkCardPaste],
+  })
+
+  app = createApp({
+    setup() {
+      provide('tiptapifyEditor', shallowRef(editor))
+      provide('tiptapifyScrollContainer', ref(scroll))
+      provide('tiptapifyI18n', { t: (key: string) => key })
+      provide(TIPTAPIFY_LINK_PREVIEW_KEY, {
+        options: ref({ endpoint: 'https://cms.example.com/preview' }),
+        available: ref(available),
+      })
+
+      return () => h(PasteCardMenu)
+    },
+  })
+  app.use(createVuetify())
+  app.mount(document.body.appendChild(document.createElement('div')))
+  await flush()
+
+  editor.commands.setTextSelection(9)
+  editor.view.pasteText(url, new Event('paste') as ClipboardEvent)
+  await flush()
+
+  return editor
+}
+
+function menu(): HTMLElement | null {
+  return document.querySelector<HTMLElement>('.tiptapify-link-card-paste')
+}
+
+function buttonWithText(text: string): HTMLButtonElement {
+  return [...menu()!.querySelectorAll('button')].find(button => button.textContent?.includes(text))!
+}
+
+function respond(body: unknown, status = 200) {
+  return vi.fn(async () => new Response(JSON.stringify(body), { status, headers: { 'Content-Type': 'application/json' } }))
+}
+
+afterEach(() => {
+  app?.unmount()
+  editor?.destroy()
+  app = null
+  editor = null
+  document.body.innerHTML = ''
+  vi.unstubAllGlobals()
+})
+
+describe('paste card menu', () => {
+  it('is not offered without the link preview endpoint', async () => {
+    const ed = await mountMenu(false)
+
+    expect(pastedLink(ed.state)?.url).toBe(url)
+    expect(menu()).toBeNull()
+  })
+
+  it('keeps the link on Link', async () => {
+    const ed = await mountMenu(true)
+
+    buttonWithText('dialog.linkCard.display_link').click()
+    await flush()
+
+    expect(menu()).toBeNull()
+    expect(ed.getHTML()).toContain(`href="${url}"`)
+  })
+
+  it('replaces the pasted link with its card on Card', async () => {
+    vi.stubGlobal('fetch', respond({ title: 'Talks', siteName: 'News' }))
+    const ed = await mountMenu(true)
+
+    buttonWithText('dialog.linkCard.display_card').click()
+
+    await vi.waitFor(() => expect(ed.state.doc.child(1).type.name).toBe('linkCard'))
+    expect(ed.state.doc.child(1).attrs).toMatchObject({ href: url, title: 'Talks', siteName: 'News', newTab: true })
+    await flush()
+    expect(menu()).toBeNull()
+  })
+
+  it('keeps the link with a short error when the page has no preview', async () => {
+    vi.stubGlobal('fetch', respond({ error: 'Not found' }, 404))
+    const ed = await mountMenu(true)
+
+    buttonWithText('dialog.linkCard.display_card').click()
+
+    await vi.waitFor(() => expect(menu()!.textContent).toContain('dialog.linkCard.paste_error'))
+    expect(ed.state.doc.child(1).type.name).toBe('paragraph')
+    expect(ed.getHTML()).toContain(`href="${url}"`)
+  })
+})

package/src/extensions/components/media/linkCard/PasteCardMenu.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import * as mdi from '@mdi/js'
+import { posToDOMRect } from '@tiptap/core'
+import { Editor } from '@tiptap/vue-3'
+import { BubbleMenu } from '@tiptap/vue-3/menus'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { useTiptapifyLinkPreview } from '@tiptapify/composables/useTiptapifyLinkPreview'
+import { useTiptapifyUpload } from '@tiptapify/composables/useTiptapifyUpload'
+import { makeLinkCard } from '@tiptapify/extensions/components/media/linkCard/makeLinkCard'
+import {
+  dismissPastedLink,
+  PASTE_CARD_MENU_CLASS,
+  pastedLink,
+  replacePastedLink,
+} from '@tiptapify/extensions/components/media/linkCard/pasteCard'
+import { inject, onBeforeUnmount, Ref, ref, watch } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
+
+// The choice after a link is pasted alone into an empty paragraph: keep the link, or show it as a card
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+const scrollTarget = inject<Ref<HTMLElement | null>>('tiptapifyScrollContainer', ref(null))
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
+
+const { shape } = useTiptapifyConfig()
+const { available, fetchPreview } = useTiptapifyLinkPreview()
+const { upload } = useTiptapifyUpload()
+
+// The address of the pasted link the menu is for, kept in step with the editor state
+const url = ref<string | null>(null)
+const loading = ref(false)
+const error = ref('')
+let request: AbortController | null = null
+
+function sync() {
+  url.value = editor.value ? pastedLink(editor.value.state)?.url ?? null : null
+}
+
+watch(editor, (current, previous) => {
+  previous?.off('transaction', sync)
+  current?.on('transaction', sync)
+  sync()
+}, { immediate: true })
+
+onBeforeUnmount(() => {
+  editor.value?.off('transaction', sync)
+  request?.abort()
+})
+
+// A new link or none: what the menu showed for the previous one is gone, a pending card too
+watch(url, () => {
+  request?.abort()
+  request = null
+  loading.value = false
+  error.value = ''
+})
+
+function shouldShow({ state }: { state: Editor['state'] }): boolean {
+  return available.value && !!pastedLink(state)
+}
+
+function linkEnd() {
+  const link = editor.value ? pastedLink(editor.value.state) : null
+  if (!link) {
+    return null
+  }
+
+  const rect = posToDOMRect(editor.value.view, link.to, link.to)
+
+  return { getBoundingClientRect: () => rect, getClientRects: () => [rect] }
+}
+
+function keepLink() {
+  dismissPastedLink(editor.value)
+}
+
+async function showCard() {
+  const link = pastedLink(editor.value.state)
+  if (!link || loading.value) {
+    return
+  }
+
+  const current = new AbortController()
+  request = current
+  loading.value = true
+  error.value = ''
+
+  try {
+    const attrs = await makeLinkCard(link.url, { fetchPreview, upload: upload.value, signal: current.signal })
+    if (!current.signal.aborted) {
+      replacePastedLink(editor.value, attrs)
+    }
+  } catch {
+    if (!current.signal.aborted) {
+      error.value = t('dialog.linkCard.paste_error')
+    }
+  } finally {
+    if (request === current) {
+      request = null
+      loading.value = false
+    }
+  }
+}
+</script>
+
+<template>
+  <BubbleMenu
+    v-if="editor && scrollTarget"
+    :editor="editor"
+    plugin-key="tiptapifyLinkCardPasteMenu"
+    :options="{ placement: 'right', offset: 8, flip: { fallbackPlacements: ['bottom-end', 'top-end'] }, scrollTarget }"
+    :should-show="shouldShow"
+    :get-referenced-virtual-element="linkEnd"
+  >
+    <div
+      v-if="available && url"
+      :class="[PASTE_CARD_MENU_CLASS, { 'tiptapify-quiet-buttons': shape.buttons === 'quiet' }]"
+      @mousedown.prevent
+    >
+      <VBtn size="small" variant="text" color="" :disabled="loading" @click="keepLink">
+        {{ t('dialog.linkCard.display_link') }}
+      </VBtn>
+      <VBtn size="small" variant="text" color="" :loading="loading" @click="showCard">
+        {{ t('dialog.linkCard.display_card') }}
+      </VBtn>
+
+      <span v-if="error" class="tiptapify-link-card-paste__error text-caption text-error">{{ error }}</span>
+
+      <div class="tiptapify-link-card-paste__divider" />
+
+      <VBtn size="28" variant="text" color="" @click="keepLink">
+        <Tooltip :label="t('dialog.linkCard.paste_dismiss')" />
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiClose}`" />
+      </VBtn>
+    </div>
+  </BubbleMenu>
+</template>
+
+<style scoped lang="scss">
+/* The look of the image menu: the bubble tokens, the classic shape's base as fallback */
+.tiptapify-link-card-paste {
+  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, 0 4px 14px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08));
+
+  .v-btn {
+    letter-spacing: normal;
+    text-transform: none;
+  }
+}
+
+.tiptapify-link-card-paste__error {
+  padding: 0 6px;
+}
+
+.tiptapify-link-card-paste__divider {
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  background: rgba(var(--v-border-color), var(--v-border-opacity));
+}
+</style>

package/src/extensions/components/media/linkCard/index.test.ts

@@ -0,0 +1,146 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { Editor } from '@tiptap/core'
+import { Document } from '@tiptap/extension-document'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Text } from '@tiptap/extension-text'
+import Link from '@tiptap/extension-link'
+import Image from '@tiptap/extension-image'
+import { TiptapifyLink } from '@tiptapify/extensions/components/media/link'
+import { applyLinkCard, LinkCard, selectedLinkCard } from '@tiptapify/extensions/components/media/linkCard'
+
+let editor: Editor | null = null
+
+function createEditor(content: string) {
+  editor = new Editor({
+    element: document.createElement('div'),
+    content,
+    extensions: [Document, Paragraph, Text, Link, TiptapifyLink, Image, LinkCard],
+  })
+
+  return editor
+}
+
+const card = {
+  href: 'https://news.example.com/a',
+  title: 'Talks enter a new stage',
+  description: 'The president named the terms',
+  image: 'https://cdn.example.com/og.jpg',
+  siteName: 'News',
+  layout: 'compact',
+  newTab: true,
+}
+
+const cardHtml = '<a class="tiptapify-link-card" data-link-card="compact" href="https://news.example.com/a" target="_blank" rel="noopener noreferrer">'
+  + '<img class="tiptapify-link-card__image" src="https://cdn.example.com/og.jpg" alt="">'
+  + '<span class="tiptapify-link-card__body">'
+  + '<span class="tiptapify-link-card__site">News</span>'
+  + '<span class="tiptapify-link-card__title">Talks enter a new stage</span>'
+  + '<span class="tiptapify-link-card__description">The president named the terms</span>'
+  + '</span></a>'
+
+describe('link card node', () => {
+  afterEach(() => {
+    editor?.destroy()
+    editor = null
+  })
+
+  it('is saved as one link with the image and the texts, so the whole card is clickable on a site', () => {
+    createEditor('')
+    editor!.commands.setContent({ type: 'doc', content: [{ type: 'linkCard', attrs: card }] })
+
+    expect(editor!.getHTML()).toBe(cardHtml)
+  })
+
+  it('loads back from the saved HTML as a card, not as a link and an image', () => {
+    createEditor(`<p>Before</p>${cardHtml}`)
+
+    const node = editor!.state.doc.child(1)
+    expect(node.type.name).toBe('linkCard')
+    expect(node.attrs).toEqual(card)
+  })
+
+  it('leaves out what it does not have: no image for the text layout, no empty texts, the same tab', () => {
+    createEditor('')
+    editor!.commands.setContent({
+      type: 'doc',
+      content: [{ type: 'linkCard', attrs: { href: 'https://a.example', title: 'A', image: 'https://a.example/i.png', layout: 'text', newTab: false } }],
+    })
+
+    expect(editor!.getHTML()).toBe(
+      '<a class="tiptapify-link-card" data-link-card="text" href="https://a.example">'
+      + '<span class="tiptapify-link-card__body"><span class="tiptapify-link-card__title">A</span></span></a>',
+    )
+  })
+
+  it('updates the selected card in place and inserts a new one otherwise', () => {
+    createEditor(`<p>Text</p>${cardHtml}`)
+
+    editor!.commands.setNodeSelection(6)
+    const edited = selectedLinkCard(editor!)
+    expect(edited?.title).toBe(card.title)
+
+    applyLinkCard(editor!, { ...card, layout: 'large' }, true)
+    expect(editor!.state.doc.childCount).toBe(2)
+    expect(editor!.state.doc.child(1).attrs.layout).toBe('large')
+
+    editor!.commands.setTextSelection(3)
+    applyLinkCard(editor!, { ...card, title: 'Second' }, false)
+    expect(editor!.state.doc.toJSON().content.filter((node: { type: string }) => node.type === 'linkCard')).toHaveLength(2)
+  })
+
+  it('opens the link dialog with the card on double click', () => {
+    createEditor(cardHtml)
+    const listener = vi.fn()
+    window.addEventListener('tiptapify-show-link', listener)
+
+    const { view } = editor!
+    const handled = view.someProp('handleDoubleClickOn', handle => handle(view, 0, view.state.doc.nodeAt(0)!, 0, new MouseEvent('dblclick'), true))
+
+    window.removeEventListener('tiptapify-show-link', listener)
+    expect(handled).toBe(true)
+    expect(listener.mock.calls[0][0].detail.card).toMatchObject({ href: card.href, title: card.title })
+  })
+
+  it('opens the link dialog with a card of the given address by showLinkCard', () => {
+    createEditor('<p></p>')
+    const listener = vi.fn()
+    window.addEventListener('tiptapify-show-link', listener)
+
+    editor!.commands.showLinkCard({ href: card.href, newTab: true })
+
+    window.removeEventListener('tiptapify-show-link', listener)
+    expect(listener.mock.calls[0][0].detail).toMatchObject({ card: null, draft: { href: card.href, newTab: true } })
+  })
+
+  it('does not open its link on a click while editing, so a click selects it and a double click edits it', () => {
+    createEditor(cardHtml)
+    const link = editor!.view.dom.querySelector('a[data-link-card]')!
+    const click = new MouseEvent('click', { bubbles: true, cancelable: true })
+
+    link.dispatchEvent(click)
+
+    expect(click.defaultPrevented).toBe(true)
+  })
+
+  it('opens its link in a read-only editor', () => {
+    createEditor(cardHtml)
+    editor!.setEditable(false)
+    const click = new MouseEvent('click', { bubbles: true, cancelable: true })
+
+    editor!.view.dom.querySelector('a[data-link-card]')!.dispatchEvent(click)
+
+    expect(click.defaultPrevented).toBe(false)
+  })
+
+  it('is selected by a click, before the link mark selects its text (enableClickSelection)', () => {
+    createEditor(`<p>Text</p>${cardHtml}`)
+    const { view } = editor!
+    const pos = 6
+
+    const handled = view.someProp('handleClickOn', handle => handle(view, pos + 1, view.state.doc.nodeAt(pos)!, pos, new MouseEvent('click'), true))
+
+    expect(handled).toBe(true)
+    expect(editor!.state.selection.from).toBe(pos)
+    expect(selectedLinkCard(editor!)?.href).toBe(card.href)
+  })
+})

package/src/extensions/components/media/linkCard/index.ts

@@ -0,0 +1,177 @@
+import { Editor, Node } from '@tiptap/core'
+import { NodeSelection, Plugin, PluginKey } from '@tiptap/pm/state'
+
+export type LinkCardLayout = 'compact' | 'large' | 'text'
+
+export type LinkCardAttrs = {
+  href: string,
+  title: string | null,
+  description: string | null,
+  image: string | null,
+  siteName: string | null,
+  layout: LinkCardLayout,
+  newTab: boolean,
+}
+
+// An address the link dialog opens with to make a card of
+export type LinkCardDraft = { href: string, newTab?: boolean }
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    linkCard: {
+      setLinkCard: (attrs: Partial<LinkCardAttrs> & { href: string }) => ReturnType
+      showLinkCard: (draft?: LinkCardDraft) => ReturnType
+    }
+  }
+}
+
+const name = 'linkCard'
+const LAYOUTS: LinkCardLayout[] = ['compact', 'large', 'text']
+const CLASS = 'tiptapify-link-card'
+
+function childText(element: HTMLElement, part: string): string | null {
+  return element.querySelector(`.${CLASS}__${part}`)?.textContent?.trim() || null
+}
+
+function span(part: string, text: string | null): unknown[] {
+  return text ? [['span', { class: `${CLASS}__${part}` }, text]] : []
+}
+
+/**
+ * A link shown as a card with the page's OpenGraph data (image, site, title, description). Its own node, not
+ * an image with a link, so the link dialog edits it; saved as one `<a>`, so the whole card is a link.
+ */
+export const LinkCard = Node.create({
+  name,
+
+  group: 'block',
+
+  atom: true,
+
+  draggable: true,
+
+  addAttributes() {
+    return {
+      href: { default: '', rendered: false, parseHTML: element => element.getAttribute('href') ?? '' },
+      title: { default: null, rendered: false, parseHTML: element => childText(element, 'title') },
+      description: { default: null, rendered: false, parseHTML: element => childText(element, 'description') },
+      image: {
+        default: null,
+        rendered: false,
+        parseHTML: element => element.querySelector(`.${CLASS}__image`)?.getAttribute('src') || null,
+      },
+      siteName: { default: null, rendered: false, parseHTML: element => childText(element, 'site') },
+      layout: {
+        default: 'compact',
+        rendered: false,
+        parseHTML: (element) => {
+          const layout = element.getAttribute('data-link-card') as LinkCardLayout
+
+          return LAYOUTS.includes(layout) ? layout : 'compact'
+        },
+      },
+      newTab: { default: true, rendered: false, parseHTML: element => element.getAttribute('target') === '_blank' },
+    }
+  },
+
+  // Before the link mark (and so the image in it), which would read the card as a link and an image
+  parseHTML() {
+    return [{ tag: 'a[data-link-card]', priority: 1000 }]
+  },
+
+  renderHTML({ node }) {
+    const attrs = node.attrs as LinkCardAttrs
+    const image = attrs.image && attrs.layout !== 'text'
+      ? [['img', { class: `${CLASS}__image`, src: attrs.image, alt: '' }]]
+      : []
+
+    return [
+      'a',
+      {
+        class: CLASS,
+        'data-link-card': attrs.layout,
+        href: attrs.href,
+        ...(attrs.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {}),
+      },
+      ...image,
+      [
+        'span',
+        { class: `${CLASS}__body` },
+        ...span('site', attrs.siteName),
+        ...span('title', attrs.title),
+        ...span('description', attrs.description),
+      ],
+    ] as never
+  },
+
+  addCommands() {
+    return {
+      setLinkCard: attrs => ({ commands }) => commands.insertContent({ type: name, attrs }),
+
+      // The link dialog shows cards too: the selected card, else a card of the draft address (empty: a new one)
+      showLinkCard: draft => ({ commands }) => commands.showLink(draft ?? { href: '' }),
+    }
+  },
+
+  addProseMirrorPlugins() {
+    const { editor } = this
+
+    return [
+      new Plugin({
+        key: new PluginKey(name),
+        props: {
+          // While editing, the card's link does not open (its first click would, in a new tab)
+          handleDOMEvents: {
+            click: (view, event) => {
+              if (view.editable && (event.target as Element | null)?.closest?.('a[data-link-card]')) {
+                event.preventDefault()
+              }
+
+              return false
+            },
+          },
+          // A click selects the card. ProseMirror asks handleClickOn before handleClick, where the link mark
+          // (enableClickSelection) would put a text selection on the card's <a>
+          handleClickOn: (view, _pos, node, nodePos, _event, direct) => {
+            if (!direct || node.type.name !== name || !view.editable) {
+              return false
+            }
+
+            view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos)))
+
+            return true
+          },
+          handleDoubleClickOn: (_view, _pos, node, nodePos) => {
+            if (node.type.name !== name) {
+              return false
+            }
+
+            editor.commands.setNodeSelection(nodePos)
+            editor.commands.showLink()
+
+            return true
+          },
+        },
+      }),
+    ]
+  },
+})
+
+export function selectedLinkCard(editor: Editor): LinkCardAttrs | null {
+  const { selection } = editor.state
+
+  return selection instanceof NodeSelection && selection.node.type.name === name
+    ? { ...selection.node.attrs } as LinkCardAttrs
+    : null
+}
+
+/**
+ * Updates the selected card being edited, or inserts a card in place of the selection (a link made a card).
+ */
+export function applyLinkCard(editor: Editor, attrs: LinkCardAttrs, edited: boolean): boolean {
+  if (edited) {
+    return editor.chain().focus().updateAttributes(name, attrs).run()
+  }
+
+  return editor.chain().focus().insertContent({ type: name, attrs }).run()
+}