Footnotes don't accept pasted content

[bjhess]

I've found that you cannot paste (cmd-v or right-click paste) into the footnotes area. This seems like a very common use case.

Buttondown:

As I was testing it this started working fine in Buttondown and Pika. So I tried a different browser and it was working there. Then I went to delete what I was writing, tried one more time and pasting wasn't working in either browser again. Something intermittent?

Do you see similar behavior?

[linear]

OSS-7 Footnotes don't accept pasted content

[jmduke]

@mary-ext mind taking a look here?

[bjhess]

(FYI, I have seen it work and not work intermittently. Haven't been able to hone in on why pasting is working in the rare moments that it does work.)

[bjhess]

Here's my suspicion. I think it's the Tiptap YouTube extension interfering–I suspect you also have it installed on Buttondown? If I disable that extension I don't seem to have any problems pasting content.

I will also dig in and see if there's a way around it as we don't want to remove that extension…

[bjhess]

Okay, here's how I conditionally bypassed the YouTube extension when in ol.footnotes by recreating and extending its existing paste handler. AI helped write this so it certainly could be improved. I could not figure out a way to lookup the root REGEX from the YouTube extension. Obviously that would be preferred.

import { nodePasteRule } from '@tiptap/core'
import Youtube from '@tiptap/extension-youtube'

export default Youtube.extend({
  addPasteRules() {
    if (!this.options.addPasteHandler) {
      return []
    }

    const youtubeRegex = Youtube.options.youtubeRegex

    return [
      nodePasteRule({
        find: /^((?:https?:)?\/\/)?((?:www|m|music)\.)?((?:youtube\.com|youtu.be|youtube-nocookie\.com))(\/(?:[\w-]+\?v=|embed\/|v\/)?)([\w-]+)(\S+)?$/g,
        type: this.type,
        getAttributes: match => {
          // Check if we're inside a footnotes section by looking at parent nodes
          const selection = this.editor.state.selection
          const $pos = selection.$from
          let isInFootnotes = false
          
          // Walk up the document tree to check for footnotes
          for (let depth = $pos.depth; depth > 0; depth--) {
            const node = $pos.node(depth)
            if (node.attrs.class && node.attrs.class.includes('footnotes')) {
              isInFootnotes = true
              break
            }
          }

          if (isInFootnotes) {
            return false
          }
          
          return { src: match.input }
        },
      }),
    ]
  },
})

[mary-ext]

Hmm, we're not using Tiptap's YouTube extension on Buttondown, but I'll definitely see if there's anything we can do from this end.