Turndown not recognizing <figure>

[valnub]

I'm trying to convert the following html to markdown:

<p>My friend Alex asked me to teach her how to code and sure thing – we sat down and started hacking! :-)</p>

<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<span class="embed-youtube" style="text-align:center; display: block;"><iframe class='youtube-player' type='text/html' width='634' height='357' src='https://www.youtube.com/embed/oSga19FU5bA?version=3&#038;rel=1&#038;fs=1&#038;autohide=2&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;wmode=transparent' allowfullscreen='true' style='border:0;'></iframe></span>
</div></figure>

I want to keep the youtube iframe in my markdown. With default settings turndown returns this:

My friend Alex asked me to teach her how to code and sure thing – we sat down and started hacking! :-)

So, I added the keep option:

turndownService.keep(['figure', 'iframe'])

The result is still the same:

My friend Alex asked me to teach her how to code and sure thing – we sat down and started hacking! :-)

Then I started playing with filters:

  turndownService.addRule('figure-with-youtube', {
    filter: function(node, options) {
      console.log(node.nodeName)
      const classAttr = node.getAttribute('class')
      const isYoutube = classAttr && classAttr.indexOf('youtube-player') !== -1
      return node.nodeName === 'IFRAME' && isYoutube
    },
    replacement: function(content, node, options) {
      const src = node.getAttribute('src')
      return `<iframe src=${src}></iframe>`
    }
  })

The console.log(node.nodeName) statement returns me this:

P
IFRAME

As you can see the iframe is found but not the <figure> element. Also, the replacement function above doesn't work. I suspect it's because the iframe is wrapped inside the figure element. So I thought I'll just replace the whole figure but that's not possible because turndown doesn't even find it. Why is that?

[Dashing-Nelson]

did you find a solution for it?

[valnub]

Nope :-(

[bambax]

The reason

is ignored is because it's an empty block element (no text content). You would need to add a blank replacement option when initializing, to preserve figure elements even when empty; something like:

turndownService = new TurndownService({blankReplacement: (content, node) => node.isBlock && !node.matches("figure") ? "\n\n" : node.outerHTML})

(The blank replacement rule has precedence on everything else, that's why keep and new rules don't seem to work).

[domchristie]

Yes, I think @bambax is correct. I wonder if the blank rule should have a lesser precedence over added rules and keep/remove rules? I think the blank rule had top priority for performance reasons, but perhaps it's not a big issue. What do you think?

[bambax]

Yes it seems at least 'keep' rules should have priority over blank replacement, because that makes it hard to understand what's happening otherwise.