tiptapify 0.3.5 → 0.4.1

package/src/extensions/components/media/iframe/embed.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, it } from 'vitest'
+import {
+  iframeStyle,
+  parsedFields,
+  parseEmbedInput,
+  pixelSize,
+  sizeFromAttrs,
+  sizeToAttrs,
+  srcError,
+} from '@tiptapify/extensions/components/media/iframe/embed'
+
+describe('embed input', () => {
+  it('takes a plain address as it is', () => {
+    expect(parseEmbedInput('  https://example.com/embed  ')).toEqual({ kind: 'url', src: 'https://example.com/embed' })
+    expect(parseEmbedInput(' ')).toEqual({ kind: 'empty' })
+  })
+
+  it('reads a pasted iframe code', () => {
+    const code = `<iframe src="https://www.google.com/maps/embed?pb=1" width="600" height="450" style="border:0;"
+      allowfullscreen="" loading="lazy" title="Office map" allow="geolocation" referrerpolicy="no-referrer"></iframe>`
+
+    expect(parseEmbedInput(code)).toEqual({
+      kind: 'code',
+      iframe: {
+        src: 'https://www.google.com/maps/embed?pb=1',
+        width: 600,
+        height: 450,
+        title: 'Office map',
+        allow: 'geolocation',
+        loading: 'lazy',
+        allowfullscreen: true,
+        border: false,
+      },
+    })
+  })
+
+  it('reads the deprecated frameborder and an empty sandbox', () => {
+    const input = parseEmbedInput('<iframe src="https://a.example/x" frameborder="1" sandbox name="frame"></iframe>')
+
+    expect(input).toMatchObject({ kind: 'code', iframe: { border: true, sandbox: '', name: 'frame', allowfullscreen: false } })
+  })
+
+  it('takes the iframe out of a responsive wrapper box', () => {
+    const code = '<div style="position:relative;padding-bottom:56%"><iframe src="https://www.loom.com/embed/1"></iframe></div>'
+
+    expect(parseEmbedInput(code)).toMatchObject({ kind: 'code', iframe: { src: 'https://www.loom.com/embed/1' } })
+  })
+
+  it('ignores a size in percent', () => {
+    const input = parseEmbedInput('<iframe src="https://a.example/x" width="100%" height="450"></iframe>')
+
+    expect(input.kind === 'code' && input.iframe.width).toBeUndefined()
+    expect(pixelSize('100%')).toBeNull()
+    expect(pixelSize('640px')).toBe(640)
+  })
+
+  it.each([
+    ['a script', '<iframe src="https://a.example/x"></iframe><script src="https://a.example/x.js"></script>'],
+    ['a leading script', '<script>alert(1)</script><iframe src="https://a.example/x"></iframe>'],
+    ['two iframes', '<iframe src="https://a.example/x"></iframe><iframe src="https://a.example/y"></iframe>'],
+    ['text around', '<iframe src="https://a.example/x"></iframe><p>By <a href="https://a.example">A</a></p>'],
+    ['no iframe', '<blockquote class="twitter-tweet"></blockquote>'],
+    ['no address', '<iframe width="600"></iframe>'],
+  ])('rejects a code with %s', (_, code) => {
+    expect(parseEmbedInput(code)).toEqual({ kind: 'invalid_code' })
+  })
+
+  it('lists what the code filled', () => {
+    const fields = parsedFields({ src: 'https://a.example/x', width: 600, height: 450, allowfullscreen: true, sandbox: '' })
+
+    expect(fields).toEqual([
+      { key: 'parsed_src' },
+      { key: 'parsed_size', params: { width: 600, height: 450 } },
+      { key: 'parsed_sandbox' },
+      { key: 'parsed_fullscreen' },
+    ])
+  })
+})
+
+describe('embed address', () => {
+  it('needs a web address with its protocol', () => {
+    expect(srcError('https://example.com/embed?a=1')).toBeNull()
+    expect(srcError('http://intranet/embed')).toBeNull()
+    expect(srcError('')).toBe('required')
+  })
+
+  it.each(['example.com/embed', '//example.com/embed', 'localhost:8080/embed'])('asks for the protocol of %s', (src) => {
+    expect(srcError(src)).toBe('protocol')
+  })
+
+  it.each(['javascript:alert(1)', 'mailto:a@b.c', '/embed/page', 'ftp://example.com/file', 'https://exa mple.com'])(
+    'rejects %s',
+    (src) => {
+      expect(srcError(src)).toBe('invalid')
+    },
+  )
+})
+
+describe('embed size', () => {
+  it('stores each size mode and reads it back', () => {
+    const known = { width: 600, height: 450 }
+
+    for (const mode of ['responsive', '16:9', '4:3', '1:1'] as const) {
+      expect(sizeFromAttrs(sizeToAttrs(mode, { width: null, height: null }, known)).mode).toBe(mode)
+    }
+
+    expect(sizeFromAttrs(sizeToAttrs('custom', { width: 800, height: 600 }, known))).toEqual({ mode: 'custom', width: 800, height: 600 })
+    expect(sizeToAttrs('responsive', { width: null, height: null }, known)).toEqual({ ratio: 'auto', width: 600, height: 450 })
+  })
+
+  it('reads old content with a width and a height as custom, without a size as responsive', () => {
+    expect(sizeFromAttrs({ ratio: null, width: '640', height: 360 } as never)).toEqual({ mode: 'custom', width: 640, height: 360 })
+    expect(sizeFromAttrs({ ratio: null, width: null, height: null }).mode).toBe('responsive')
+  })
+
+  it('renders the proportions and the border as a style', () => {
+    expect(iframeStyle({ ratio: 'auto', width: 600, height: 450, border: false }))
+      .toBe('width: 100%; height: auto; aspect-ratio: 600 / 450; border: 0;')
+    expect(iframeStyle({ ratio: 'auto', width: null, height: null, border: false })).toContain('aspect-ratio: 16 / 9')
+    expect(iframeStyle({ ratio: '4:3', width: null, height: null, border: false })).toContain('aspect-ratio: 4 / 3')
+    expect(iframeStyle({ ratio: null, width: 640, height: 360, border: true })).toBe('border: 1px solid rgba(128, 128, 128, 0.5);')
+  })
+})

package/src/extensions/components/media/iframe/embed.ts

@@ -0,0 +1,236 @@
+import { MediaSize, toSize } from '@tiptapify/utils/mediaSize'
+import { isValidHref } from '@tiptapify/utils/validateHref'
+
+export const ratioPresets = ['16:9', '4:3', '1:1'] as const
+
+export type IframeSizeMode = 'responsive' | 'custom' | typeof ratioPresets[number]
+
+/**
+ * The iframe node attributes. `ratio` makes the iframe fill the text width: a preset (`16:9`) or `auto`
+ * (responsive: the proportions of its width and height, else 16:9); without it the width and height are its size.
+ */
+export type IframeAttrs = {
+  src: string
+  title: string | null
+  name: string | null
+  allow: string | null
+  sandbox: string | null
+  loading: string | null
+  allowfullscreen: boolean
+  border: boolean
+  ratio: string | null
+  width: number | null
+  height: number | null
+}
+
+// The attributes a pasted <iframe> code has
+export type ParsedIframe = Partial<IframeAttrs> & { src: string }
+
+export type EmbedInput =
+  | { kind: 'empty' }
+  | { kind: 'url', src: string }
+  | { kind: 'code', iframe: ParsedIframe }
+  | { kind: 'invalid_code' }
+
+export type SrcError = 'required' | 'protocol' | 'invalid'
+
+export type IframeSize = { mode: IframeSizeMode, width: number | null, height: number | null }
+
+// Elements an embed code may wrap its iframe in (a responsive box); anything else is not a single iframe
+const wrapperTags = new Set(['DIV', 'P', 'SPAN', 'FIGURE'])
+
+const ratioRegex = /^(auto|\d+:\d+)$/
+
+const borderStyle = 'border: 1px solid rgba(128, 128, 128, 0.5)'
+
+// A size in pixels (`600`, `600px`); not a percentage, which `toSize` would read as pixels
+export function pixelSize(value: unknown): number | null {
+  return typeof value === 'number' || /^\s*\d+(\.\d+)?(px)?\s*$/i.test(String(value ?? '')) ? toSize(value) : null
+}
+
+export function parseRatio(value: string | null): string | null {
+  return value && ratioRegex.test(value.trim()) ? value.trim() : null
+}
+
+// Whether the iframe shows a border: by its style, else by the deprecated `frameborder`; null when neither says
+export function readBorder(element: HTMLElement): boolean | null {
+  const { border, borderStyle, borderWidth } = element.style
+  if (border || borderStyle || borderWidth) {
+    return !['none', 'hidden'].includes(borderStyle) && parseFloat(borderWidth || border) !== 0 && border !== 'none'
+  }
+
+  const frameborder = element.getAttribute('frameborder')
+  if (frameborder !== null) {
+    return !['0', 'no'].includes(frameborder.trim().toLowerCase())
+  }
+
+  return null
+}
+
+function readText(element: Element, name: string): string | undefined {
+  return element.getAttribute(name)?.trim() || undefined
+}
+
+function readIframe(element: HTMLIFrameElement): ParsedIframe {
+  const iframe: ParsedIframe = { src: readText(element, 'src') ?? '' }
+  const width = pixelSize(element.getAttribute('width'))
+  const height = pixelSize(element.getAttribute('height'))
+  if (width && height) {
+    Object.assign(iframe, { width, height })
+  }
+
+  for (const name of ['title', 'name', 'allow', 'loading'] as const) {
+    const value = readText(element, name)
+    if (value) {
+      iframe[name] = value
+    }
+  }
+
+  // An empty sandbox is the strictest one, not a missing one
+  if (element.hasAttribute('sandbox')) {
+    iframe.sandbox = element.getAttribute('sandbox')!.trim()
+  }
+
+  iframe.allowfullscreen = element.hasAttribute('allowfullscreen')
+
+  const border = readBorder(element)
+  if (border !== null) {
+    iframe.border = border
+  }
+
+  return iframe
+}
+
+// The iframe of an embed code that is a single iframe with an address (maybe in wrapper boxes), else null
+function singleIframe(code: string): HTMLIFrameElement | null {
+  // A parsed document is inert: its scripts do not run and nothing loads
+  const doc = new DOMParser().parseFromString(code, 'text/html')
+  const iframes = doc.body.querySelectorAll('iframe')
+  if (iframes.length !== 1 || doc.head.childElementCount > 0) {
+    return null
+  }
+
+  const iframe = iframes[0]
+  const others = [...doc.body.querySelectorAll('*')].filter(element => element !== iframe)
+  if (others.some(element => !wrapperTags.has(element.tagName) || !element.contains(iframe))) {
+    return null
+  }
+
+  iframe.remove()
+
+  return doc.body.textContent!.trim() === '' && readText(iframe, 'src') ? iframe : null
+}
+
+/**
+ * The "Link or embed code" field: an address, or a pasted `<iframe …>` code read into its attributes.
+ */
+export function parseEmbedInput(value: string): EmbedInput {
+  const text = value.trim()
+  if (!text) {
+    return { kind: 'empty' }
+  }
+
+  if (!text.startsWith('<')) {
+    return { kind: 'url', src: text }
+  }
+
+  const iframe = singleIframe(text)
+
+  return iframe ? { kind: 'code', iframe: readIframe(iframe) } : { kind: 'invalid_code' }
+}
+
+/**
+ * An iframe needs a web address with its protocol, which is never guessed: an address without one
+ * (`example.com/embed`, `//example.com/embed`) asks for it.
+ */
+export function srcError(src: string): SrcError | null {
+  if (!src) {
+    return 'required'
+  }
+
+  if (/^https?:\/\//i.test(src) && isValidHref(src)) {
+    return null
+  }
+
+  const bare = src.replace(/^\/\//, '')
+  // A scheme, not a host and a port (`localhost:8080`)
+  const hasScheme = /^[a-z][a-z0-9+.-]*:(?!\d)/i.test(bare)
+
+  return !hasScheme && isValidHref(`https://${bare}`) ? 'protocol' : 'invalid'
+}
+
+// The fields a parsed code filled, for the line under the field
+export function parsedFields(iframe: ParsedIframe): Array<{ key: string, params?: Record<string, number> }> {
+  const fields: Array<{ key: string, params?: Record<string, number> }> = [{ key: 'parsed_src' }]
+
+  if (iframe.width && iframe.height) {
+    fields.push({ key: 'parsed_size', params: { width: iframe.width, height: iframe.height } })
+  }
+
+  for (const name of ['title', 'name', 'allow', 'sandbox'] as const) {
+    if (iframe[name] !== undefined) {
+      fields.push({ key: `parsed_${name}` })
+    }
+  }
+
+  if (iframe.loading === 'lazy') {
+    fields.push({ key: 'parsed_loading' })
+  }
+
+  if (iframe.allowfullscreen) {
+    fields.push({ key: 'parsed_fullscreen' })
+  }
+
+  return fields
+}
+
+/**
+ * The dialog's size of a node: a ratio preset, responsive (its size gives the proportions) or custom.
+ * A node with only a width and a height is custom; without a size it is responsive.
+ */
+export function sizeFromAttrs({ ratio, width, height }: Pick<IframeAttrs, 'ratio' | 'width' | 'height'>): IframeSize {
+  const size = { width: pixelSize(width), height: pixelSize(height) }
+
+  if (ratioPresets.includes(ratio as typeof ratioPresets[number])) {
+    return { mode: ratio as IframeSizeMode, ...size }
+  }
+
+  return { mode: !ratio && size.width ? 'custom' : 'responsive', ...size }
+}
+
+// The node attributes of a size; responsive keeps the known size, for its proportions
+export function sizeToAttrs(mode: IframeSizeMode, size: MediaSize, known: MediaSize): Pick<IframeAttrs, 'ratio' | 'width' | 'height'> {
+  if (mode === 'custom') {
+    return { ratio: null, ...size }
+  }
+
+  if (mode === 'responsive') {
+    return known.width && known.height ? { ratio: 'auto', ...known } : { ratio: 'auto', width: null, height: null }
+  }
+
+  return { ratio: mode, width: null, height: null }
+}
+
+// The proportions a responsive or preset size renders in (`16 / 9`), null for a custom size
+export function aspectRatio({ ratio, width, height }: Pick<IframeAttrs, 'ratio' | 'width' | 'height'>): string | null {
+  if (ratio !== 'auto') {
+    return ratio ? ratio.replace(':', ' / ') : null
+  }
+
+  const known = { width: pixelSize(width), height: pixelSize(height) }
+
+  return known.width && known.height ? `${known.width} / ${known.height}` : '16 / 9'
+}
+
+/**
+ * The inline style of the iframe, so a site shows it without the editor's styles or scripts: the
+ * proportions of a size filling the text width, and the border (instead of the deprecated `frameborder`).
+ */
+export function iframeStyle(attrs: Pick<IframeAttrs, 'ratio' | 'width' | 'height' | 'border'>): string {
+  const aspect = aspectRatio(attrs)
+  const rules = aspect ? ['width: 100%', 'height: auto', `aspect-ratio: ${aspect}`] : []
+
+  rules.push(attrs.border ? borderStyle : 'border: 0')
+
+  return `${rules.join('; ')};`
+}

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

@@ -0,0 +1,123 @@
+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 Iframe, { selectedIframe } from '@tiptapify/extensions/components/media/iframe'
+import { TiptapifyVideo } from '@tiptapify/extensions/components/media/video'
+
+let editor: Editor | null = null
+
+function createEditor(content: string) {
+  editor = new Editor({
+    element: document.createElement('div'),
+    content,
+    extensions: [Document, Paragraph, Text, Iframe, TiptapifyVideo],
+  })
+
+  return editor
+}
+
+function iframeAttrs() {
+  return editor!.state.doc.firstChild!.attrs
+}
+
+afterEach(() => {
+  editor?.destroy()
+  editor = null
+})
+
+describe('iframe node', () => {
+  it('renders a responsive embed that a site shows without the editor', () => {
+    createEditor('<p></p>')
+    editor!.commands.setIframe({ src: 'https://a.example/x', title: 'Map', ratio: 'auto', width: 600, height: 450, loading: 'lazy' })
+
+    const html = editor!.getHTML()
+    expect(html).toContain('<div class="iframe-wrapper"><iframe')
+    expect(html).toContain('data-ratio="auto"')
+    // jsdom writes the style back normalized (`0px`)
+    expect(html).toMatch(/style="width: 100%; height: auto; aspect-ratio: 600 \/ 450; border: 0(px)?;"/)
+    expect(html).toContain('loading="lazy"')
+    expect(html).not.toContain('frameborder')
+  })
+
+  it.each([
+    ['responsive', { ratio: 'auto', width: 600, height: 450 }],
+    ['a ratio preset', { ratio: '4:3', width: null, height: null }],
+    ['a custom size with a border', { ratio: null, width: 640, height: 360, border: true }],
+    ['the advanced options', { allow: 'autoplay; fullscreen', sandbox: '', name: 'frame', loading: 'lazy', allowfullscreen: true }],
+  ])('reads back %s from its HTML', (_, attrs) => {
+    createEditor('<p></p>')
+    editor!.commands.setIframe({ src: 'https://a.example/x', ...attrs })
+    const stored = { ...iframeAttrs() }
+
+    editor!.commands.setContent(editor!.getHTML())
+
+    expect(iframeAttrs()).toEqual(stored)
+  })
+
+  it('keeps fullscreen of old embeds saved without the attribute, as before', () => {
+    createEditor('<iframe src="https://a.example/x" width="640" height="360"></iframe>')
+
+    expect(iframeAttrs().allowfullscreen).toBe(true)
+  })
+
+  it('loads old content: the size as custom, frameborder as the border', () => {
+    createEditor('<iframe src="https://a.example/x" width="640" height="360" frameborder="1" allowfullscreen="true"></iframe>')
+
+    expect(iframeAttrs()).toMatchObject({ width: 640, height: 360, ratio: null, border: true, allowfullscreen: true })
+    expect(editor!.getHTML()).toContain('style="border: 1px solid rgba(128, 128, 128, 0.5);"')
+  })
+})
+
+describe('an embed block in the editor', () => {
+  function doubleClickNode(pos: number) {
+    const { view } = editor!
+    const node = view.state.doc.nodeAt(pos)!
+
+    return view.someProp('handleDoubleClickOn', handle => handle(view, pos, node, pos, new MouseEvent('dblclick'), true))
+  }
+
+  function listen(name: string) {
+    const listener = vi.fn()
+    window.addEventListener(name, listener)
+
+    return { listener, stop: () => window.removeEventListener(name, listener) }
+  }
+
+  it('opens the embed dialog for the iframe on double click', () => {
+    createEditor('<iframe src="https://maps.example.com/embed" title="Map"></iframe>')
+    const { listener, stop } = listen('tiptapify-show-iframe')
+
+    expect(doubleClickNode(0)).toBe(true)
+    stop()
+
+    expect(selectedIframe(editor!)).toMatchObject({ src: 'https://maps.example.com/embed', title: 'Map' })
+    expect(listener).toHaveBeenCalledOnce()
+    expect(listener.mock.calls[0][0].detail.node).toMatchObject({ src: 'https://maps.example.com/embed' })
+  })
+
+  it('leaves a Vimeo player to the video dialog', () => {
+    createEditor('<iframe src="https://player.vimeo.com/video/76979871"></iframe>')
+    const iframe = listen('tiptapify-show-iframe')
+    const video = listen('tiptapify-show-tiptapifyVideo')
+
+    doubleClickNode(0)
+    iframe.stop()
+    video.stop()
+
+    expect(iframe.listener).not.toHaveBeenCalled()
+    expect(video.listener).toHaveBeenCalledOnce()
+    expect(selectedIframe(editor!)).toBeNull()
+  })
+
+  it('opens the dialog to insert when no embed is selected', () => {
+    createEditor('<p>Text</p>')
+    const { listener, stop } = listen('tiptapify-show-iframe')
+
+    editor!.commands.showIframe()
+    stop()
+
+    expect(listener.mock.calls[0][0].detail.node).toBeNull()
+  })
+})

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

@@ -1,9 +1,12 @@
-import { Node } from '@tiptap/core'
+import { Editor, Node } from '@tiptap/core'
+import { NodeSelection, Plugin, PluginKey } from '@tiptap/pm/state'
+import { IframeAttrs, iframeStyle, parseRatio, readBorder } from '@tiptapify/extensions/components/media/iframe/embed'
+import { parseVideoUrl } from '@tiptapify/extensions/components/media/video/providers'
 
 export interface IframeOptions {
   allowFullscreen: boolean
   HTMLAttributes: {
-    [key: string]: any
+    [key: string]: unknown
   }
 }
 
@@ -13,11 +16,33 @@ declare module '@tiptap/core' {
       /**
        * Add an iframe
        */
-      setIframe: (options: { src: string }) => ReturnType
+      setIframe: (options: Partial<IframeAttrs> & { src: string }) => ReturnType
+      /**
+       * Open the embed dialog: for the selected iframe, else to insert one
+       */
+      showIframe: () => ReturnType
     }
   }
 }
 
+// A Vimeo player is stored as an iframe too, but the video dialog edits it
+export function isVideoIframe(src: unknown): boolean {
+  return parseVideoUrl(String(src ?? ''))?.provider.nodeType === 'iframe'
+}
+
+/**
+ * The attributes of the selected iframe the embed dialog edits (not a Vimeo player); null when none is selected.
+ */
+export function selectedIframe(editor: Editor): IframeAttrs | null {
+  const { selection } = editor.state
+
+  if (!(selection instanceof NodeSelection) || selection.node.type.name !== 'iframe' || isVideoIframe(selection.node.attrs.src)) {
+    return null
+  }
+
+  return { ...selection.node.attrs } as IframeAttrs
+}
+
 export default Node.create<IframeOptions>({
   name: 'iframe',
 
@@ -51,12 +76,31 @@ export default Node.create<IframeOptions>({
       height: {
         default: null,
       },
-      frameborder: {
-        default: 0,
+      allow: {
+        default: null,
+      },
+      sandbox: {
+        default: null,
+      },
+      loading: {
+        default: null,
       },
       allowfullscreen: {
         default: this.options.allowFullscreen,
-        parseHTML: () => this.options.allowFullscreen,
+        // Embeds get fullscreen unless the editor turns it off (`allowFullscreen: false`)
+        parseHTML: element => element.hasAttribute('allowfullscreen') || this.options.allowFullscreen,
+        renderHTML: ({ allowfullscreen }) => (allowfullscreen ? { allowfullscreen: 'true' } : {}),
+      },
+      // The border and the ratio render as the iframe style (see renderHTML)
+      border: {
+        default: false,
+        parseHTML: element => readBorder(element) ?? false,
+        rendered: false,
+      },
+      ratio: {
+        default: null,
+        parseHTML: element => parseRatio(element.getAttribute('data-ratio')),
+        renderHTML: ({ ratio }) => (ratio ? { 'data-ratio': ratio } : {}),
       },
     }
   },
@@ -69,14 +113,16 @@ export default Node.create<IframeOptions>({
     ]
   },
 
-  renderHTML({ HTMLAttributes }) {
-    return ['div', this.options.HTMLAttributes, ['iframe', HTMLAttributes]]
+  renderHTML({ node, HTMLAttributes }) {
+    const style = iframeStyle(node.attrs as IframeAttrs)
+
+    return ['div', this.options.HTMLAttributes, ['iframe', { ...HTMLAttributes, style }]]
   },
 
   addCommands() {
     return {
       setIframe:
-        (options: { src: string }) =>
+        options =>
           ({ tr, dispatch }) => {
             const { selection } = tr
             const node = this.type.create(options)
@@ -87,6 +133,42 @@ export default Node.create<IframeOptions>({
 
             return true
           },
+      showIframe: () => ({ editor }) => {
+        const event = new CustomEvent('tiptapify-show-iframe', {
+          detail: {
+            node: selectedIframe(editor),
+            editorId: editor.instanceId,
+          },
+        })
+
+        window.dispatchEvent(event)
+
+        return true
+      },
     }
   },
-})
+
+  // While editing, an iframe takes no clicks (see the editor styles): a click selects its block, and a
+  // double click opens the embed dialog for it. A Vimeo player opens the video dialog instead.
+  addProseMirrorPlugins() {
+    const { editor } = this
+
+    return [
+      new Plugin({
+        key: new PluginKey('iframe'),
+        props: {
+          handleDoubleClickOn: (_view, _pos, node, nodePos) => {
+            if (node.type.name !== 'iframe' || isVideoIframe(node.attrs.src)) {
+              return false
+            }
+
+            editor.commands.setNodeSelection(nodePos)
+            editor.commands.showIframe()
+
+            return true
+          },
+        },
+      }),
+    ]
+  },
+})