tiptapify 0.3.4 → 0.4.0

package/src/extensions/components/media/image/caption.test.ts

@@ -3,6 +3,7 @@ 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 { UndoRedo } from '@tiptap/extensions'
 import { TiptapifyImage } from '@tiptapify/extensions/components/media/image'
 import { ImageWithCaption } from '@tiptapify/extensions/components/media/image/caption'
 
@@ -16,6 +17,7 @@ function createEditor(content: string) {
       Document,
       Paragraph,
       Text,
+      UndoRedo,
       TiptapifyImage,
       ImageWithCaption.configure({
         resize: { enabled: true, alwaysPreserveAspectRatio: true },
@@ -112,11 +114,74 @@ describe('image caption', () => {
     const nodeView = editor!.view.nodeDOM(0) as HTMLElement
 
     expect(nodeView.dataset.align).toBe('right')
-    expect(editor!.getHTML()).toBe('<figure><img src="https://example.com/a.png" style="float: right;"></figure>')
+    expect(editor!.getHTML()).toBe('<figure data-align="right"><img src="https://example.com/a.png" style="float: right;"></figure>')
 
     editor!.chain().setNodeSelection(0).updateAttributes('image', { align: null }).run()
 
     expect(nodeView.dataset.align).toBeUndefined()
     expect(editor!.getHTML()).toBe('<figure><img src="https://example.com/a.png"></figure>')
   })
+
+  it('marks an image with a set width, which the max height does not cap', () => {
+    createEditor('<img src="https://example.com/a.png">')
+    const nodeView = editor!.view.nodeDOM(0) as HTMLElement
+
+    expect(nodeView.dataset.sized).toBeUndefined()
+
+    editor!.chain().setNodeSelection(0).updateAttributes('image', { width: 468, height: 701 }).run()
+
+    expect(nodeView.dataset.sized).toBe('')
+
+    editor!.chain().setNodeSelection(0).updateAttributes('image', { width: null, height: null }).run()
+
+    expect(nodeView.dataset.sized).toBeUndefined()
+  })
+
+  it('shows the size of a resize undone and redone', () => {
+    createEditor('<figure><img src="https://example.com/a.png" width="267" height="400"></figure>')
+    const img = (editor!.view.nodeDOM(0) as HTMLElement).querySelector('img')!
+
+    editor!.chain().setNodeSelection(0).updateAttributes('image', { width: 468, height: 701 }).run()
+    expect([img.style.width, img.style.height]).toEqual(['468px', '701px'])
+
+    editor!.commands.undo()
+    expect([img.style.width, img.style.height]).toEqual(['267px', '400px'])
+
+    editor!.commands.redo()
+    expect([img.style.width, img.style.height]).toEqual(['468px', '701px'])
+  })
+
+  it('keeps the size being dragged when the editor reads the resized image back', async () => {
+    createEditor('<figure><img src="https://example.com/a.png" width="200" height="300"></figure><p>text</p>')
+    const img = (editor!.view.nodeDOM(0) as HTMLElement).querySelector('img')!
+    Object.defineProperty(img, 'offsetWidth', { configurable: true, get: () => parseFloat(img.style.width) })
+    Object.defineProperty(img, 'offsetHeight', { configurable: true, get: () => parseFloat(img.style.height) })
+    const handle = editor!.view.dom.querySelector('[data-resize-handle="bottom-right"]')!
+
+    handle.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 0, clientY: 0 }))
+    document.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX: 100, clientY: 0 }))
+    // The editor observes the image style the drag changes and updates the node view
+    await new Promise(resolve => setTimeout(resolve))
+
+    expect(img.style.width).toBe('300px')
+
+    document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, clientX: 100, clientY: 0 }))
+
+    expect(editor!.getJSON().content![0].attrs).toMatchObject({ width: 300, height: 450 })
+  })
+
+  it('drops the shown size when the size is removed', () => {
+    createEditor('<figure><img src="https://example.com/a.png" width="267" height="400"></figure>')
+    const img = (editor!.view.nodeDOM(0) as HTMLElement).querySelector('img')!
+
+    editor!.chain().setNodeSelection(0).updateAttributes('image', { width: null, height: null }).run()
+
+    expect([img.style.width, img.style.height]).toEqual(['', ''])
+  })
+
+  it('loads an image with a width as sized', () => {
+    createEditor('<figure><img src="https://example.com/a.png" width="267" height="400"></figure>')
+
+    expect((editor!.view.nodeDOM(0) as HTMLElement).dataset.sized).toBe('')
+  })
 })

package/src/extensions/components/media/image/caption.ts

@@ -74,7 +74,8 @@ export const ImageWithCaption = Image.extend<ImageWithCaptionOptions>({
       HTMLAttributes,
       align ? { style: `float: ${align}` } : {},
     )
-    const figure: [string, Record<string, unknown>, ...unknown[]] = ['figure', {}, ['img', imageAttributes]]
+    // The figure carries the float too (`data-align`), for the content styles to float it with its caption
+    const figure: [string, Record<string, unknown>, ...unknown[]] = ['figure', align ? { 'data-align': align } : {}, ['img', imageAttributes]]
     if (title) {
       figure.push(['figcaption', {}, String(title)])
     }
@@ -158,6 +159,17 @@ export const ImageWithCaption = Image.extend<ImageWithCaptionOptions>({
       }
       syncAlign(node.attrs.align)
 
+      // An image with a set width (from the dialog or resizing) is shown at that width: CSS caps by height only
+      // the images without one, so resizing can make an image larger than the max height
+      const syncSized = (width: unknown) => {
+        if (width) {
+          nodeView.dom.dataset.sized = ''
+        } else {
+          delete nodeView.dom.dataset.sized
+        }
+      }
+      syncSized(node.attrs.width)
+
       // The aspect ratio lets CSS cap a tall image by its height without distorting it
       const img = nodeView.dom.querySelector('img') as HTMLImageElement
       const setAspectRatio = () => {
@@ -167,6 +179,18 @@ export const ImageWithCaption = Image.extend<ImageWithCaptionOptions>({
       }
       img.addEventListener('load', setAspectRatio)
       setAspectRatio()
+
+      // The resizable view reads the size from the attributes only once, so later changes (undo, the dialog)
+      // are applied here; only a changed size, since the view also updates mid-drag
+      const syncSize = (previous: ProseMirrorNode, updated: ProseMirrorNode) => {
+        const { width, height } = updated.attrs
+        if (width === previous.attrs.width && height === previous.attrs.height) {
+          return
+        }
+
+        img.style.width = width ? `${width}px` : ''
+        img.style.height = height ? `${height}px` : ''
+      }
       nodeView.dom.classList.add('tiptapify-image')
       nodeView.dom.append(caption)
 
@@ -226,6 +250,7 @@ export const ImageWithCaption = Image.extend<ImageWithCaptionOptions>({
       nodeView.update = (updatedNode: ProseMirrorNode, ...args: unknown[]) => {
         const updated = updateResizableView(updatedNode, ...args)
         if (updated) {
+          syncSize(node, updatedNode)
           node = updatedNode
           const title = updatedNode.attrs.title ?? ''
           if (caption.value !== title && document.activeElement !== caption) {
@@ -233,6 +258,7 @@ export const ImageWithCaption = Image.extend<ImageWithCaptionOptions>({
           }
           caption.disabled = !editor.isEditable
           syncAlign(updatedNode.attrs.align)
+          syncSized(updatedNode.attrs.width)
         }
 
         return updated

package/src/extensions/components/media/image/imageDialog.test.ts

@@ -0,0 +1,200 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { Extension } from '@tiptap/core'
+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 { TiptapifyImage } from '@tiptapify/extensions/components/media/image'
+import { ImageWithCaption } from '@tiptapify/extensions/components/media/image/caption'
+import {
+  applyImage,
+  ImageDialogAttrs,
+  initialSizeMode,
+  removeImage,
+  resizeSide,
+  selectedImageAttrs,
+  sizeForMode,
+  textColumnWidth,
+  toSize,
+} from '@tiptapify/extensions/components/media/image/imageDialog'
+
+let editor: Editor | null = null
+
+// A host attribute the dialog does not know, as hosts add with global attributes
+const MediaId = Extension.create({
+  name: 'mediaId',
+  addGlobalAttributes() {
+    return [{
+      types: ['image'],
+      attributes: {
+        mediaId: {
+          default: null,
+          parseHTML: (element: HTMLElement) => element.getAttribute('data-media-id'),
+          renderHTML: (attrs: Record<string, unknown>) => (attrs.mediaId ? { 'data-media-id': attrs.mediaId } : {}),
+        },
+      },
+    }]
+  },
+})
+
+function createEditor(content: string) {
+  editor = new Editor({
+    element: document.createElement('div'),
+    content,
+    extensions: [Document, Paragraph, Text, TiptapifyImage, ImageWithCaption, MediaId],
+  })
+
+  return editor
+}
+
+function dialogAttrs(overrides: Partial<ImageDialogAttrs> = {}): ImageDialogAttrs {
+  return { src: 'https://example.com/b.png', alt: 'Kyiv', title: null, width: null, height: null, align: null, ...overrides }
+}
+
+function images() {
+  return editor!.getJSON().content!.filter(node => node.type === 'image')
+}
+
+describe('image dialog apply', () => {
+  afterEach(() => {
+    editor?.destroy()
+    editor = null
+  })
+
+  it('updates the selected image in place, keeping the attributes the dialog does not change', () => {
+    createEditor('<p>Before</p><img src="https://example.com/a.png" style="float: right" data-media-id="7">')
+    editor!.commands.setNodeSelection(8)
+
+    const applied = applyImage(editor!, dialogAttrs({ align: 'right', title: ' Kyiv at night ', width: 640, height: 480 }))
+
+    expect(applied).toBe(true)
+    expect(images()).toHaveLength(1)
+    expect(images()[0].attrs).toMatchObject({
+      src: 'https://example.com/b.png',
+      alt: 'Kyiv',
+      title: 'Kyiv at night',
+      width: 640,
+      height: 480,
+      align: 'right',
+      mediaId: '7',
+    })
+    expect(editor!.state.selection.from).toBe(8)
+  })
+
+  it('keeps the image align when the dialog sends it back unchanged', () => {
+    createEditor('<img src="https://example.com/a.png" style="float: left">')
+    editor!.commands.setNodeSelection(0)
+    const current = selectedImageAttrs(editor!.state)!
+
+    applyImage(editor!, dialogAttrs({ src: current.src as string, align: current.align as 'left' }))
+
+    expect(images()[0].attrs!.align).toBe('left')
+    expect(editor!.getHTML()).toContain('float: left')
+  })
+
+  it('stores the size as numbers', () => {
+    createEditor('<img src="https://example.com/a.png">')
+    editor!.commands.setNodeSelection(0)
+
+    applyImage(editor!, dialogAttrs({ width: '640' as unknown as number, height: 359.6 }))
+
+    expect(images()[0].attrs).toMatchObject({ width: 640, height: 360 })
+  })
+
+  it('inserts a new image when no image is selected', () => {
+    createEditor('<p>Text</p>')
+    editor!.commands.setTextSelection(5)
+
+    const applied = applyImage(editor!, dialogAttrs({ alt: '  ', align: 'left', width: 320, height: 240 }))
+
+    expect(applied).toBe(true)
+    expect(images()).toHaveLength(1)
+    expect(images()[0].attrs).toMatchObject({ src: 'https://example.com/b.png', alt: null, align: 'left', width: 320, height: 240 })
+  })
+
+  it('does nothing without a source', () => {
+    createEditor('<p>Text</p>')
+
+    expect(applyImage(editor!, dialogAttrs({ src: '  ' }))).toBe(false)
+    expect(images()).toHaveLength(0)
+  })
+
+  it('removes the selected image only', () => {
+    createEditor('<p>Text</p><img src="https://example.com/a.png">')
+
+    editor!.commands.setTextSelection(2)
+    expect(removeImage(editor!)).toBe(false)
+
+    editor!.commands.setNodeSelection(6)
+    expect(removeImage(editor!)).toBe(true)
+    expect(images()).toHaveLength(0)
+  })
+
+  it('reads the attributes of the selected image only', () => {
+    createEditor('<p>Text</p><img src="https://example.com/a.png" width="640">')
+
+    editor!.commands.setTextSelection({ from: 1, to: editor!.state.doc.content.size })
+    expect(selectedImageAttrs(editor!.state)).toBeNull()
+
+    editor!.commands.setNodeSelection(6)
+    expect(selectedImageAttrs(editor!.state)).toMatchObject({ src: 'https://example.com/a.png', width: 640 })
+  })
+
+  it('sends the selected image to the dialog, or none to insert one', () => {
+    createEditor('<p>Text</p><img src="https://example.com/a.png">')
+    const details: Array<{ image: Record<string, unknown> | null }> = []
+    const listener = (event: Event) => details.push((event as CustomEvent).detail)
+    window.addEventListener('tiptapify-show-tiptapifyImage', listener)
+
+    editor!.commands.setTextSelection(2)
+    editor!.commands.showTiptapifyImage()
+    editor!.commands.setNodeSelection(6)
+    editor!.commands.showTiptapifyImage()
+    window.removeEventListener('tiptapify-show-tiptapifyImage', listener)
+
+    expect(details[0].image).toBeNull()
+    expect(details[1].image).toMatchObject({ src: 'https://example.com/a.png' })
+  })
+})
+
+describe('image dialog size', () => {
+  it('reads sizes as positive whole numbers', () => {
+    expect(toSize('640')).toBe(640)
+    expect(toSize(359.6)).toBe(360)
+    expect(toSize('')).toBeNull()
+    expect(toSize(0)).toBeNull()
+    expect(toSize(null)).toBeNull()
+  })
+
+  it('opens an image with a width as custom and one without as original', () => {
+    expect(initialSizeMode({ width: 640, height: 480 })).toBe('custom')
+    expect(initialSizeMode({ width: null })).toBe('original')
+    expect(initialSizeMode(null)).toBe('original')
+  })
+
+  it('sizes the image to its natural size or to the text width in its ratio', () => {
+    const natural = { width: 1600, height: 900 }
+
+    expect(sizeForMode('original', natural, 720)).toEqual({ width: 1600, height: 900 })
+    expect(sizeForMode('original', null, 720)).toEqual({ width: null, height: null })
+    expect(sizeForMode('text', natural, 720)).toEqual({ width: 720, height: 405 })
+    expect(sizeForMode('text', null, 720)).toEqual({ width: 720, height: null })
+  })
+
+  it('keeps the ratio when one side changes', () => {
+    const size = { width: 1600, height: 900 }
+
+    expect(resizeSide(size, 'width', '800', 16 / 9)).toEqual({ width: 800, height: 450 })
+    expect(resizeSide(size, 'height', 450, 16 / 9)).toEqual({ width: 800, height: 450 })
+    expect(resizeSide(size, 'width', 800, null)).toEqual({ width: 800, height: 900 })
+    expect(resizeSide(size, 'width', '', 16 / 9)).toEqual({ width: null, height: 900 })
+  })
+
+  it('measures the text column without the editor padding', () => {
+    const element = document.createElement('div')
+    element.style.padding = '0 24px'
+    Object.defineProperty(element, 'clientWidth', { value: 768 })
+
+    expect(textColumnWidth(element)).toBe(720)
+  })
+})

package/src/extensions/components/media/image/imageDialog.ts

@@ -0,0 +1,114 @@
+import { Editor } from '@tiptap/core'
+import { MediaSize, resizeSide, toSize } from '@tiptapify/utils/mediaSize'
+import { EditorState, NodeSelection } from '@tiptap/pm/state'
+import { ImageAlign } from '@tiptapify/extensions/components/media/image/caption'
+
+export { resizeSide, toSize }
+
+export type ImageSizeMode = 'original' | 'text' | 'custom'
+
+export type ImageSize = MediaSize
+
+export type NaturalSize = { width: number, height: number }
+
+// The attributes the image dialog edits; any other attribute of the image is kept as it is
+export type ImageDialogAttrs = {
+  src: string,
+  alt: string | null,
+  title: string | null,
+  width: number | null,
+  height: number | null,
+  align: ImageAlign | null,
+}
+
+const typeName = 'image'
+
+/**
+ * The attributes of the image selected as a node, or null when no image is selected (the dialog inserts one).
+ */
+export function selectedImageAttrs(state: EditorState): Record<string, unknown> | null {
+  const { selection } = state
+  if (!(selection instanceof NodeSelection) || selection.node.type.name !== typeName) {
+    return null
+  }
+
+  return { ...selection.node.attrs }
+}
+
+/**
+ * An image with a set width opens with its size as custom; one without a width is shown at its original size.
+ */
+export function initialSizeMode(attrs: Record<string, unknown> | null): ImageSizeMode {
+  return toSize(attrs?.width) ? 'custom' : 'original'
+}
+
+/**
+ * The width of the editor's text column: the editor content box without its horizontal padding.
+ */
+export function textColumnWidth(element: HTMLElement): number | null {
+  const style = getComputedStyle(element)
+  const width = element.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0)
+
+  return toSize(width)
+}
+
+/**
+ * The image size of a size mode other than custom: the natural size, or the text column width
+ * with the height kept in the natural ratio.
+ */
+export function sizeForMode(mode: Exclude<ImageSizeMode, 'custom'>, natural: NaturalSize | null, textWidth: number | null): ImageSize {
+  if (mode === 'original') {
+    return natural ? { ...natural } : { width: null, height: null }
+  }
+
+  if (!textWidth) {
+    return { width: null, height: null }
+  }
+
+  return { width: textWidth, height: natural ? toSize(textWidth * natural.height / natural.width) : null }
+}
+
+/**
+ * Updates the selected image in place, so the attributes the dialog does not know survive; inserts one when none is selected.
+ */
+export function applyImage(editor: Editor, attrs: ImageDialogAttrs): boolean {
+  const values = {
+    ...attrs,
+    src: attrs.src.trim(),
+    alt: attrs.alt?.trim() || null,
+    title: attrs.title?.trim() || null,
+    width: toSize(attrs.width),
+    height: toSize(attrs.height),
+  }
+  if (!values.src) {
+    return false
+  }
+
+  if (selectedImageAttrs(editor.state)) {
+    return editor.chain().focus().updateAttributes(typeName, values).run()
+  }
+
+  return editor.chain().focus().insertContent({ type: typeName, attrs: values }).run()
+}
+
+export function removeImage(editor: Editor): boolean {
+  if (!selectedImageAttrs(editor.state)) {
+    return false
+  }
+
+  return editor.chain().focus().deleteSelection().run()
+}
+
+/**
+ * The natural size of an image, or null when it does not load.
+ */
+export function loadNaturalSize(src: string): Promise<NaturalSize | null> {
+  return new Promise((resolve) => {
+    const image = new Image()
+    image.onload = () => resolve(image.naturalWidth && image.naturalHeight
+      ? { width: image.naturalWidth, height: image.naturalHeight }
+      : null)
+    image.onerror = () => resolve(null)
+    image.src = src
+  })
+}

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

@@ -1,4 +1,5 @@
 import { Extension } from '@tiptap/core'
+import { selectedImageAttrs } from '@tiptapify/extensions/components/media/image/imageDialog'
 
 const name: string = 'tiptapifyImage'
 
@@ -18,7 +19,7 @@ export const TiptapifyImage = Extension.create({
       showTiptapifyImage: () => ({ editor }) => {
         const event = new CustomEvent(`tiptapify-show-${name}`, {
           detail: {
-            image: editor.getAttributes('image'),
+            image: selectedImageAttrs(editor.state),
             editorId: editor.instanceId
           }
         })

package/src/extensions/components/media/link/Button.test.ts

@@ -0,0 +1,96 @@
+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 { TiptapifyLink } from '@tiptapify/extensions/components/media/link'
+import LinkButton from '@tiptapify/extensions/components/media/link/Button.vue'
+import { LinkCard } from '@tiptapify/extensions/components/media/linkCard'
+import { TIPTAPIFY_LINK_PREVIEW_KEY } from '@tiptapify/composables/useTiptapifyLinkPreview'
+
+const cardHtml = '<a class="tiptapify-link-card" data-link-card="compact" href="https://news.example.com/a">'
+  + '<span class="tiptapify-link-card__body"><span class="tiptapify-link-card__title">Talks</span></span></a>'
+
+// jsdom has no `visualViewport`; Vuetify's overlay positioning reads it
+if (!('visualViewport' in globalThis)) {
+  ;(globalThis as Record<string, unknown>).visualViewport = {
+    scale: 1,
+    offsetLeft: 0,
+    offsetTop: 0,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }
+}
+
+// Nor `ResizeObserver`, which the description field of the opened dialog reads
+if (!('ResizeObserver' in globalThis)) {
+  ;(globalThis as Record<string, unknown>).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+}
+
+let app: App | null = null
+let editor: Editor | null = null
+let root: HTMLElement
+
+async function flush() {
+  for (let i = 0; i < 5; i++) {
+    await nextTick()
+  }
+}
+
+async function mountButton(content: string) {
+  editor = new Editor({
+    element: document.createElement('div'),
+    content,
+    extensions: [Document, Paragraph, Text, Link.configure({ openOnClick: false }), TiptapifyLink, LinkCard],
+  })
+
+  app = createApp({
+    setup() {
+      provide('tiptapifyEditor', shallowRef(editor))
+      provide('tiptapifyI18n', { t: (key: string) => key })
+      provide(TIPTAPIFY_LINK_PREVIEW_KEY, { options: ref(null), available: ref(false) })
+
+      return () => h(LinkButton)
+    },
+  })
+  app.use(createVuetify())
+  root = document.body.appendChild(document.createElement('div'))
+  app.mount(root)
+  await flush()
+}
+
+afterEach(() => {
+  app?.unmount()
+  editor?.destroy()
+  app = null
+  editor = null
+  document.body.innerHTML = ''
+})
+
+describe('link toolbar button', () => {
+  it('is active while a link card is selected and opens the link dialog with it', async () => {
+    await mountButton(`<p>Text</p>${cardHtml}`)
+    editor!.commands.setTextSelection(1)
+    await flush()
+
+    expect(root.querySelector('.v-btn')!.className).not.toContain('primary')
+
+    // The editor state reaches Vue after two animation frames
+    editor!.commands.setNodeSelection(6)
+    await vi.waitFor(() => expect(root.querySelector('.v-btn')!.className).toContain('primary'))
+
+    const listener = vi.fn()
+    window.addEventListener('tiptapify-show-link', listener)
+    root.querySelector<HTMLButtonElement>('.v-btn')!.click()
+    window.removeEventListener('tiptapify-show-link', listener)
+
+    expect(listener.mock.calls[0][0].detail.card).toMatchObject({ href: 'https://news.example.com/a', title: 'Talks' })
+  })
+})

package/src/extensions/components/media/link/Button.vue

@@ -4,6 +4,7 @@ import * as mdi from '@mdi/js'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
 import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import LinkDialog from '@tiptapify/extensions/components/media/link/LinkDialog.vue'
+import { selectedLinkCard } from '@tiptapify/extensions/components/media/linkCard'
 import { TiptapifyEditor } from '@tiptapify/types/editor'
 import { computed, inject, Ref } from 'vue'
 
@@ -16,13 +17,16 @@ const editor = inject('tiptapifyEditor') as Ref<TiptapifyEditor>
 
 const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
-const icon = computed(() => editor.value.isActive('tiptapifyLink') ? `mdiSvg:${mdi.mdiLinkOff}` : `mdiSvg:${mdi.mdiLink}`)
+const icon = computed(() => editor.value.isActive('link') ? `mdiSvg:${mdi.mdiLinkOff}` : `mdiSvg:${mdi.mdiLink}`)
+
+// A selected link card is edited by the link dialog too
+const active = computed(() => editor.value.isActive('link') || selectedLinkCard(editor.value) !== null)
 
 </script>
 
 <template>
   <VBtn
-    :color="editor.isActive('link') ? 'primary' : ''"
+    :color="active ? 'primary' : ''"
     :variant="variantBtn"
     size="32"
     @click="editor.commands.showLink()"