tiptapify 0.3.5 → 0.4.1

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

@@ -0,0 +1,87 @@
+import { afterEach, describe, expect, it } 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 { LinkCard } from '@tiptapify/extensions/components/media/linkCard'
+import {
+  isLinkCardAddress,
+  linkCardAddressProblem,
+  linkCardToLink,
+} from '@tiptapify/extensions/components/media/linkCard/linkCardDialog'
+
+let editor: Editor | null = null
+
+const cardHtml = '<a class="tiptapify-link-card" data-link-card="compact" href="https://news.example.com/a" target="_blank" rel="noopener noreferrer">'
+  + '<span class="tiptapify-link-card__body"><span class="tiptapify-link-card__title">Talks</span></span></a>'
+
+function createEditor(content: string): Editor {
+  editor = new Editor({
+    element: document.createElement('div'),
+    content,
+    extensions: [Document, Paragraph, Text, Link.configure({ openOnClick: false }), LinkCard],
+  })
+
+  return editor
+}
+
+afterEach(() => {
+  editor?.destroy()
+  editor = null
+})
+
+describe('link card address', () => {
+  it.each([
+    'https://news.example.com/a?b=1#c',
+    'http://example.org',
+    'https://localhost:8080/page',
+    'http://127.0.0.1/x',
+  ])('takes the complete http(s) address %s', (address) => {
+    expect(isLinkCardAddress(address)).toBe(true)
+    expect(linkCardAddressProblem(address)).toBeNull()
+  })
+
+  it('asks for the protocol of an address without one and never adds it itself', () => {
+    expect(linkCardAddressProblem('example.com/page')).toBe('protocol')
+    expect(linkCardAddressProblem('localhost:8080')).toBe('protocol')
+    expect(linkCardAddressProblem('example')).toBe('protocol')
+    expect(isLinkCardAddress('example.com')).toBe(false)
+  })
+
+  it('rejects other protocols and incomplete addresses, and says nothing about an empty one', () => {
+    expect(linkCardAddressProblem('ftp://example.com/file')).toBe('invalid')
+    expect(linkCardAddressProblem('mailto:a@example.com')).toBe('invalid')
+    expect(linkCardAddressProblem('https://exam')).toBe('invalid')
+    expect(linkCardAddressProblem('https://exa mple.com')).toBe('invalid')
+    expect(linkCardAddressProblem('  ')).toBeNull()
+  })
+})
+
+describe('show a card as a link', () => {
+  it('replaces the selected card with a paragraph linking its page under its title', () => {
+    createEditor(`<p>Before</p>${cardHtml}<p>After</p>`)
+    editor!.commands.setNodeSelection(8)
+
+    expect(linkCardToLink(editor!, { href: 'https://news.example.com/a', title: 'Talks', newTab: true })).toBe(true)
+    expect(editor!.getHTML()).toBe(
+      '<p>Before</p><p><a target="_blank" rel="noopener noreferrer" href="https://news.example.com/a">Talks</a></p><p>After</p>',
+    )
+  })
+
+  it('uses the address as the text of a card without a title and opens it in the same tab when asked', () => {
+    createEditor(cardHtml)
+    editor!.commands.setNodeSelection(0)
+
+    linkCardToLink(editor!, { href: 'https://news.example.com/a', title: '  ', newTab: false })
+
+    expect(editor!.getHTML()).toBe('<p><a href="https://news.example.com/a">https://news.example.com/a</a></p>')
+  })
+
+  it('does nothing without a selected card', () => {
+    createEditor('<p>Text</p>')
+
+    expect(linkCardToLink(editor!, { href: 'https://a.example', title: 'A', newTab: true })).toBe(false)
+    expect(editor!.getHTML()).toBe('<p>Text</p>')
+  })
+})

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

@@ -0,0 +1,62 @@
+import { Editor } from '@tiptap/core'
+import { LinkCardAttrs, LinkCardLayout, selectedLinkCard } from '@tiptapify/extensions/components/media/linkCard'
+import { LINK_MARK, linkAttrs, LinkForm, missingProtocol } from '@tiptapify/extensions/components/media/link/linkDialog'
+
+export const LINK_CARD_LAYOUTS: LinkCardLayout[] = ['compact', 'large', 'text']
+
+// What is wrong with the address of a card: no protocol (the author adds it, the dialog never guesses it),
+// or not a complete http(s) address of a page
+export type LinkCardAddressProblem = 'protocol' | 'invalid'
+
+const schemeRegex = /^[a-z][a-z0-9+.-]*:/i
+
+/**
+ * A complete http(s) address of a page: only such an address is asked from the link preview endpoint.
+ */
+export function isLinkCardAddress(value: string): boolean {
+  const href = (value ?? '').trim()
+
+  if (!/^https?:\/\//i.test(href) || /\s/.test(href)) {
+    return false
+  }
+
+  try {
+    const { hostname } = new URL(href)
+
+    return hostname === 'localhost' || /\.[a-z0-9-]{2,}$/i.test(hostname) || /^\d+(\.\d+){3}$/.test(hostname)
+  } catch {
+    return false
+  }
+}
+
+export function linkCardAddressProblem(value: string): LinkCardAddressProblem | null {
+  const href = (value ?? '').trim()
+
+  if (!href || isLinkCardAddress(href)) {
+    return null
+  }
+
+  return missingProtocol(href) || !schemeRegex.test(href) ? 'protocol' : 'invalid'
+}
+
+/**
+ * A card displayed as a link again: the selected card becomes a paragraph with a link to its page, the
+ * card's title (or the address) as the text, and the rel values and class of the link dialog if given.
+ */
+export function linkCardToLink(
+  editor: Editor,
+  card: Pick<LinkCardAttrs, 'href' | 'title' | 'newTab'> & Partial<Pick<LinkForm, 'rel' | 'cssClass'>>,
+): boolean {
+  if (!selectedLinkCard(editor)) {
+    return false
+  }
+
+  const href = card.href.trim()
+  const text = card.title?.trim() || href
+  const attrs = linkAttrs({ href, text, newTab: card.newTab, rel: card.rel ?? [], cssClass: card.cssClass ?? '' })
+
+  return editor.chain().focus().insertContent({
+    type: 'paragraph',
+    content: [{ type: 'text', text, marks: [{ type: LINK_MARK, attrs }] }],
+  }).run()
+}

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

@@ -0,0 +1,102 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+  checkLinkPreview,
+  fetchLinkPreview,
+  resetLinkPreviewChecks,
+} from '@tiptapify/extensions/components/media/linkCard/linkPreview'
+
+function respond(status: number, body: unknown) {
+  return Promise.resolve(new Response(typeof body === 'string' ? body : JSON.stringify(body), { status }))
+}
+
+describe('link preview endpoint', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    resetLinkPreviewChecks()
+  })
+
+  it('is available when the handshake answers the tiptapify contract', async () => {
+    const fetch = vi.fn(() => respond(200, { tiptapifyLinkPreview: 1 }))
+    vi.stubGlobal('fetch', fetch)
+
+    expect(await checkLinkPreview({ endpoint: '/api/link-preview', headers: { 'X-Key': 'k' } })).toBe(true)
+    expect(fetch).toHaveBeenCalledWith('/api/link-preview', expect.objectContaining({
+      method: 'GET',
+      headers: expect.objectContaining({ Accept: 'application/json', 'X-Key': 'k' }),
+    }))
+  })
+
+  it.each([
+    ['any page answering 200', 200, '<!doctype html><html></html>'],
+    ['an empty 204', 204, ''],
+    ['another JSON', 200, { ok: true }],
+    ['another version of the contract', 200, { tiptapifyLinkPreview: 2 }],
+    ['an error', 500, { error: 'down' }],
+  ])('is not available for %s', async (_, status, body) => {
+    vi.stubGlobal('fetch', vi.fn(() => respond(status as number, body)))
+
+    expect(await checkLinkPreview({ endpoint: '/api/link-preview' })).toBe(false)
+  })
+
+  it('is not available when the endpoint can not be reached', async () => {
+    vi.stubGlobal('fetch', vi.fn(() => Promise.reject(new TypeError('Failed to fetch'))))
+
+    expect(await checkLinkPreview({ endpoint: '/api/link-preview' })).toBe(false)
+  })
+
+  it('checks an endpoint once for all the editors of the page', async () => {
+    const fetch = vi.fn(() => respond(200, { tiptapifyLinkPreview: 1 }))
+    vi.stubGlobal('fetch', fetch)
+
+    await Promise.all([checkLinkPreview({ endpoint: '/a' }), checkLinkPreview({ endpoint: '/a' }), checkLinkPreview({ endpoint: '/a' })])
+
+    expect(fetch).toHaveBeenCalledTimes(1)
+  })
+
+  it('checks a failed endpoint again when asked: it may be up by now', async () => {
+    const fetch = vi.fn()
+      .mockReturnValueOnce(respond(503, ''))
+      .mockReturnValueOnce(respond(200, { tiptapifyLinkPreview: 1 }))
+    vi.stubGlobal('fetch', fetch)
+
+    expect(await checkLinkPreview({ endpoint: '/a' })).toBe(false)
+    expect(await checkLinkPreview({ endpoint: '/a' })).toBe(false)
+    expect(await checkLinkPreview({ endpoint: '/a' }, { recheckFailed: true })).toBe(true)
+    expect(fetch).toHaveBeenCalledTimes(2)
+  })
+
+  it('gets the preview of a page with the url as a query parameter', async () => {
+    const fetch = vi.fn(() => respond(200, {
+      url: 'https://news.example.com/a',
+      title: ' Title ',
+      description: 'Description',
+      image: 'https://news.example.com/og.jpg',
+      siteName: 'News',
+      extra: 'ignored',
+    }))
+    vi.stubGlobal('fetch', fetch)
+
+    const preview = await fetchLinkPreview({ endpoint: '/api/link-preview?lang=uk' }, 'https://news.example.com/a?x=1&y=2')
+
+    expect(fetch.mock.calls[0][0]).toBe('/api/link-preview?lang=uk&url=https%3A%2F%2Fnews.example.com%2Fa%3Fx%3D1%26y%3D2')
+    expect(preview).toEqual({
+      url: 'https://news.example.com/a',
+      title: 'Title',
+      description: 'Description',
+      image: 'https://news.example.com/og.jpg',
+      siteName: 'News',
+    })
+  })
+
+  it('keeps only the fields it got: they are optional', async () => {
+    vi.stubGlobal('fetch', vi.fn(() => respond(200, { url: 'https://a.example', title: 'A', image: '' })))
+
+    expect(await fetchLinkPreview({ endpoint: '/p' }, 'https://a.example')).toEqual({ url: 'https://a.example', title: 'A' })
+  })
+
+  it('fails with the error of the endpoint', async () => {
+    vi.stubGlobal('fetch', vi.fn(() => respond(422, { error: 'The page does not answer' })))
+
+    await expect(fetchLinkPreview({ endpoint: '/p' }, 'https://a.example')).rejects.toThrow('The page does not answer')
+  })
+})

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

@@ -0,0 +1,84 @@
+import { TiptapifyLinkPreviewData, TiptapifyLinkPreviewOptions } from '@tiptapify/types/editor'
+
+// The version of the endpoint contract: the handshake answers `{ "tiptapifyLinkPreview": 1 }`
+export const LINK_PREVIEW_CONTRACT = 1
+
+const PREVIEW_FIELDS = ['title', 'description', 'image', 'siteName'] as const
+
+// One handshake per endpoint for all the editors of the page
+const checks = new Map<string, Promise<boolean>>()
+
+function requestInit(options: TiptapifyLinkPreviewOptions, signal?: AbortSignal): RequestInit {
+  return { method: 'GET', headers: { Accept: 'application/json', ...options.headers }, signal }
+}
+
+async function handshake(options: TiptapifyLinkPreviewOptions): Promise<boolean> {
+  try {
+    const response = await fetch(options.endpoint, requestInit(options))
+    if (response.status !== 200) {
+      return false
+    }
+
+    const body = await response.json()
+
+    return body?.tiptapifyLinkPreview === LINK_PREVIEW_CONTRACT
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Whether the endpoint answers the link preview contract: a GET without a url answers
+ * `200 { "tiptapifyLinkPreview": 1 }` and fetches no page. A plain 200 or 204 proves nothing (a SPA
+ * fallback or a login page answers 200 too). The answer is kept for the page; a failed endpoint is
+ * asked again only on `recheckFailed` (it may be up by now).
+ */
+export async function checkLinkPreview(
+  options: TiptapifyLinkPreviewOptions,
+  { recheckFailed = false }: { recheckFailed?: boolean } = {},
+): Promise<boolean> {
+  const cached = checks.get(options.endpoint)
+  if (cached && !(recheckFailed && !(await cached))) {
+    return cached
+  }
+
+  const check = handshake(options)
+  checks.set(options.endpoint, check)
+
+  return check
+}
+
+export function resetLinkPreviewChecks(): void {
+  checks.clear()
+}
+
+function previewUrl(endpoint: string, url: string): string {
+  return `${endpoint}${endpoint.includes('?') ? '&' : '?'}url=${encodeURIComponent(url)}`
+}
+
+/**
+ * The OpenGraph data of a page: `GET {endpoint}?url=<page>` answers `200 { url, title, description,
+ * image, siteName }` (all but `url` optional), or an error with `{ error }`. Empty fields are dropped.
+ */
+export async function fetchLinkPreview(
+  options: TiptapifyLinkPreviewOptions,
+  url: string,
+  signal?: AbortSignal,
+): Promise<TiptapifyLinkPreviewData> {
+  const response = await fetch(previewUrl(options.endpoint, url), requestInit(options, signal))
+  const body = await response.json().catch(() => null)
+
+  if (!response.ok) {
+    throw new Error(typeof body?.error === 'string' && body.error ? body.error : `${response.status} ${response.statusText}`.trim())
+  }
+
+  const preview: TiptapifyLinkPreviewData = { url: typeof body?.url === 'string' && body.url ? body.url : url }
+  for (const field of PREVIEW_FIELDS) {
+    const value = typeof body?.[field] === 'string' ? body[field].trim() : ''
+    if (value) {
+      preview[field] = value
+    }
+  }
+
+  return preview
+}

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

@@ -0,0 +1,59 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { makeLinkCard } from '@tiptapify/extensions/components/media/linkCard/makeLinkCard'
+
+const preview = {
+  url: 'https://news.example.com/a',
+  title: 'Title',
+  description: 'Description',
+  image: 'https://cdn.example.com/og.jpg',
+  siteName: 'News',
+}
+
+describe('makeLinkCard', () => {
+  afterEach(() => vi.unstubAllGlobals())
+
+  it('makes a card of the page data', async () => {
+    const card = await makeLinkCard('https://news.example.com/a', { fetchPreview: async () => preview, upload: null })
+
+    expect(card).toEqual({
+      href: 'https://news.example.com/a',
+      title: 'Title',
+      description: 'Description',
+      image: 'https://cdn.example.com/og.jpg',
+      siteName: 'News',
+      layout: 'compact',
+      newTab: true,
+    })
+  })
+
+  it('keeps the address typed by the author, not the one the endpoint resolved', async () => {
+    const card = await makeLinkCard('https://news.example.com/a?utm=1', {
+      fetchPreview: async () => ({ ...preview, url: 'https://news.example.com/a' }),
+      upload: null,
+      newTab: false,
+      layout: 'large',
+    })
+
+    expect(card).toMatchObject({ href: 'https://news.example.com/a?utm=1', newTab: false, layout: 'large' })
+  })
+
+  it('stores the page image with the upload of the editor: a page may change or drop it', async () => {
+    vi.stubGlobal('fetch', vi.fn(() => Promise.resolve(new Response(new Blob(['png'], { type: 'image/png' })))))
+    const upload = vi.fn(async (file: File) => ({ url: `https://media.example.com/${file.name}` }))
+
+    const card = await makeLinkCard('https://news.example.com/a', { fetchPreview: async () => preview, upload })
+
+    expect(upload).toHaveBeenCalledWith(expect.any(File), expect.objectContaining({ kind: 'image' }))
+    expect(card.image).toBe('https://media.example.com/og.jpg')
+  })
+
+  it('keeps the page image link when the image can not be read or stored', async () => {
+    vi.stubGlobal('fetch', vi.fn(() => Promise.reject(new TypeError('CORS'))))
+    const upload = vi.fn()
+
+    const card = await makeLinkCard('https://news.example.com/a', { fetchPreview: async () => preview, upload })
+
+    expect(upload).not.toHaveBeenCalled()
+    expect(card.image).toBe('https://cdn.example.com/og.jpg')
+  })
+})

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

@@ -0,0 +1,58 @@
+import { LinkCardAttrs, LinkCardLayout } from '@tiptapify/extensions/components/media/linkCard'
+import { TiptapifyLinkPreviewData, TiptapifyUpload } from '@tiptapify/types/editor'
+
+export type MakeLinkCardOptions = {
+  fetchPreview: (url: string, signal?: AbortSignal) => Promise<TiptapifyLinkPreviewData>,
+  // The upload of the editor: the page image is stored with it, else the card links the page's own image
+  upload: TiptapifyUpload | null,
+  newTab?: boolean,
+  layout?: LinkCardLayout,
+  signal?: AbortSignal,
+}
+
+function fileName(url: string): string {
+  try {
+    return decodeURIComponent(new URL(url).pathname.split('/').pop() || '') || 'image'
+  } catch {
+    return 'image'
+  }
+}
+
+/**
+ * The page image stored with the editor's upload: a page may change or drop its image later. A browser
+ * reads it only when the image host allows it (CORS); otherwise the card keeps the image link.
+ */
+async function storeImage(image: string, upload: TiptapifyUpload, signal?: AbortSignal): Promise<string> {
+  try {
+    const response = await fetch(image, { signal })
+    if (!response.ok) {
+      return image
+    }
+
+    const blob = await response.blob()
+    const file = new File([blob], fileName(image), { type: blob.type })
+    const { url } = await upload(file, { kind: 'image', onProgress: () => {}, signal: signal ?? new AbortController().signal })
+
+    return url
+  } catch {
+    return image
+  }
+}
+
+/**
+ * A link card of a page: its OpenGraph data from the editor's endpoint, under the address the author typed.
+ */
+export async function makeLinkCard(url: string, options: MakeLinkCardOptions): Promise<LinkCardAttrs> {
+  const preview = await options.fetchPreview(url, options.signal)
+  const image = preview.image && options.upload ? await storeImage(preview.image, options.upload, options.signal) : preview.image
+
+  return {
+    href: url,
+    title: preview.title ?? null,
+    description: preview.description ?? null,
+    image: image ?? null,
+    siteName: preview.siteName ?? null,
+    layout: options.layout ?? 'compact',
+    newTab: options.newTab ?? true,
+  }
+}

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

@@ -0,0 +1,190 @@
+import { afterEach, describe, expect, it } 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 { LinkCard, LinkCardAttrs } from '@tiptapify/extensions/components/media/linkCard'
+import {
+  dismissPastedLink,
+  LinkCardPaste,
+  PASTE_CARD_MENU_CLASS,
+  pastedLink,
+  pastedLinkUrl,
+  replacePastedLink,
+} from '@tiptapify/extensions/components/media/linkCard/pasteCard'
+
+const url = 'https://news.example.com/a?b=1'
+
+const card: LinkCardAttrs = {
+  href: url,
+  title: 'Talks enter a new stage',
+  description: null,
+  image: null,
+  siteName: 'News',
+  layout: 'compact',
+  newTab: true,
+}
+
+let editor: Editor | null = null
+
+function createEditor(content: string) {
+  editor = new Editor({
+    element: document.body.appendChild(document.createElement('div')),
+    content,
+    extensions: [Document, Paragraph, Text, Link.configure({ openOnClick: false }), LinkCard, LinkCardPaste],
+  })
+
+  return editor
+}
+
+// jsdom has no ClipboardEvent: a plain paste event stands for it
+function paste(ed: Editor, text: string) {
+  ed.view.pasteText(text, new Event('paste') as ClipboardEvent)
+}
+
+afterEach(() => {
+  editor?.destroy()
+  editor = null
+})
+
+describe('pastedLinkUrl', () => {
+  it.each([
+    [url, url],
+    ['  http://example.com  ', 'http://example.com'],
+  ])('%s is one address', (text, expected) => {
+    expect(pastedLinkUrl(text)).toBe(expected)
+  })
+
+  it.each([
+    'example.com',
+    'ftp://example.com/file',
+    'mailto:user@example.com',
+    'see https://example.com',
+    'https://example.com https://example.org',
+    'https://exa mple.com',
+    '',
+    null,
+  ])('%s is not', (text) => {
+    expect(pastedLinkUrl(text)).toBeNull()
+  })
+})
+
+describe('the pasted link', () => {
+  it('is pasted as usual (a link) and remembered when it is alone in an empty paragraph', () => {
+    const ed = createEditor('<p>Before</p><p></p>')
+    ed.commands.setTextSelection(9)
+
+    paste(ed, url)
+
+    expect(ed.getHTML()).toBe(`<p>Before</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="${url}">${url.replace('&', '&amp;')}</a></p>`)
+    expect(pastedLink(ed.state)).toEqual({ url, from: 9, to: 9 + url.length, paragraphFrom: 8, paragraphTo: 10 + url.length })
+  })
+
+  it('is not remembered in a paragraph with text, or for text that is not one address', () => {
+    const ed = createEditor('<p>Before</p><p></p>')
+    ed.commands.setTextSelection(7)
+    paste(ed, url)
+    expect(pastedLink(ed.state)).toBeNull()
+
+    ed.commands.setContent('<p></p>')
+    ed.commands.setTextSelection(1)
+    paste(ed, `see ${url}`)
+    expect(pastedLink(ed.state)).toBeNull()
+
+    ed.commands.setContent('<p></p>')
+    ed.commands.setTextSelection(1)
+    paste(ed, 'example.com')
+    expect(pastedLink(ed.state)).toBeNull()
+  })
+
+  it('is forgotten on typing', () => {
+    const ed = createEditor('<p></p>')
+    paste(ed, url)
+
+    ed.commands.insertContent(' ')
+
+    expect(pastedLink(ed.state)).toBeNull()
+  })
+
+  it('is forgotten when the selection moves', () => {
+    const ed = createEditor('<p>Before</p><p></p>')
+    ed.commands.setTextSelection(9)
+    paste(ed, url)
+
+    ed.commands.setTextSelection(2)
+
+    expect(pastedLink(ed.state)).toBeNull()
+  })
+
+  it('is forgotten on Esc and on dismiss', () => {
+    const ed = createEditor('<p></p>')
+    paste(ed, url)
+
+    const escape = new KeyboardEvent('keydown', { key: 'Escape' })
+    expect(ed.view.someProp('handleKeyDown', handler => handler(ed.view, escape))).toBe(true)
+    expect(pastedLink(ed.state)).toBeNull()
+    // Esc does nothing more without a pasted link
+    expect(ed.view.someProp('handleKeyDown', handler => handler(ed.view, escape))).toBeFalsy()
+
+    ed.commands.setContent('<p></p>')
+    paste(ed, url)
+    dismissPastedLink(ed)
+    expect(pastedLink(ed.state)).toBeNull()
+    expect(ed.getHTML()).toContain(`href="${url}"`)
+  })
+
+  it('is forgotten when the editor loses focus, but not to the paste menu', () => {
+    const ed = createEditor('<p></p>')
+    paste(ed, url)
+
+    const menu = document.body.appendChild(document.createElement('div'))
+    menu.className = PASTE_CARD_MENU_CLASS
+    const button = menu.appendChild(document.createElement('button'))
+
+    ed.view.dispatch(ed.state.tr.setMeta('blur', { event: new FocusEvent('blur', { relatedTarget: button }) }))
+    expect(pastedLink(ed.state)?.url).toBe(url)
+
+    ed.view.dispatch(ed.state.tr.setMeta('blur', { event: new FocusEvent('blur') }))
+    expect(pastedLink(ed.state)).toBeNull()
+    menu.remove()
+  })
+
+  it('follows its paragraph through changes before it', () => {
+    const ed = createEditor('<p>Before</p><p></p>')
+    ed.commands.setTextSelection(9)
+    paste(ed, url)
+
+    // An appended transaction (e.g. what the paste brings along) is not the author's change: the link stays
+    ed.view.dispatch(ed.state.tr.insertText('Very ', 1).setMeta('appendedTransaction', ed.state.tr))
+
+    expect(pastedLink(ed.state)?.paragraphFrom).toBe(13)
+  })
+})
+
+describe('replacePastedLink', () => {
+  it('replaces the paragraph of the pasted link with its card', () => {
+    const ed = createEditor('<p>Before</p><p></p><p>After</p>')
+    ed.commands.setTextSelection(9)
+    paste(ed, url)
+
+    expect(replacePastedLink(ed, card)).toBe(true)
+
+    expect(ed.state.doc.childCount).toBe(3)
+    expect(ed.state.doc.child(1).type.name).toBe('linkCard')
+    expect(ed.state.doc.child(1).attrs).toEqual(card)
+    expect(ed.state.doc.child(2).textContent).toBe('After')
+    expect(pastedLink(ed.state)).toBeNull()
+  })
+
+  it('does nothing once the link is gone or for another address', () => {
+    const ed = createEditor('<p></p>')
+    paste(ed, url)
+
+    expect(replacePastedLink(ed, { ...card, href: 'https://other.example.com' })).toBe(false)
+
+    ed.commands.insertContent('x')
+    expect(replacePastedLink(ed, card)).toBe(false)
+    expect(ed.state.doc.child(0).type.name).toBe('paragraph')
+  })
+})