Selecting custom node when focusing an <audio> tag

1

I’ve added a custom spec for parsing audio links as audio elements with controls. This works fine, except when clicking on the audio control, the node selection does not change. In order for the node to be active, I need to move my cursor to wherever the audio tag starts.

I’m using the node name at the selection position to detect whether a menu item is active:

active(state) {
  const { from } = state.selection
  const node = state.doc.nodeAt(from)
  return node && node?.type.name === 'image' || node?.type.name === 'audio'
},

I was hoping that the audio tag would behave similarly to images in that you can click on the element in order to update the selection.

I’m guessing the selection doesn’t update when I click the controls because I’m not really clicking on the element itself?

Focused, but the node is not active/selected: image Custom audio node in the schema:

toDOM(node) {
    const { src } = node.attrs
    return [
      'audio',
      {
        src,
        class:    'audio-block',
        controls: true,
      },
    ]
  },

Happy to provide more information about the setup if necessary. Any ideas are much appreciated.

2

I suspect the problem is that the audio element is natively focusable, so when you click it focus moves out of the editor, which causes it to not further update its internal selection.

3

Yeah that would make sense. Perhaps I’ll need to add an element to represent the audio block rather than actually showing the player.