remark-embedder/core

htmlToHast returning empty value

bradgarropy opened this issue · 4 comments

bradgarropy commented
  • remark-embedder-core version: 1.2.1
  • node version: 12.18.0
  • npm version: 6.14.4

Relevant code or config

Markdown processing code.

const html = await remark()
    .use(remarkGFM)
    .use(remarkSlug)
    .use(remarkAutolinkHeadings)
    .use(remarkExternalLinks)
    .use(remarkEmbedder, {
        transformers: [twitch, youtube],
    })
    .use(remarkPrism, {transformInlineCode: true})
    .use(remarkHTML)
    .process(content)

YouTube transformer.

const name = "YouTube"

const shouldTransform = url => {
    return url.includes("youtu.be")
}

const getHTML = string => {
    const {pathname, searchParams} = new URL(string)
    const id = pathname.slice(1)
    const start = searchParams.get("t")

    let src = `https://www.youtube-nocookie.com/embed/${id}`

    if (start) {
        src = `${src}?start=${start}`
    }

    const html = `
        <div class="youtube">
            <iframe
                title=${id}
                src=${src}
                frameBorder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
            >
            </iframe>
        </div>
    `

    return html
}

export default {name, shouldTransform, getHTML}

Markdown link.

https://youtu.be/W7y03fsqHJw?t=2503

What you did

Added the @remark-embedder/core package into my markdown parsing workflow and included a custom youtube transformer (which worked in gatsby).

What happened

I can see my transformers being run and returning the appropriate html. However, the node is never updated with the transformed html.

Reproduction repository

https://github.com/bradgarropy/bradgarropy.com/tree/next

Working on a minimal reproduction repository right now.

Problem description

After adding some logs to the module, I've confirmed that the proper html is being returned from the transformer, but the htmlToHast function isn't working as expected.

Here is the return from htmlToHast.

{
  "type": "text",
  "value": "\n        ",
}

Suggested solution

Not sure just yet.

bradgarropy commented

I found out why this is happening! My custom transformer is returning html like this:

const html = `
    <div class="youtube">
        <iframe
            title=${id}
            src=${src}
            frameBorder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
        >
        </iframe>
    </div>
`

And it turns out that the htmlToHast function isn't handling the leading newline properly. I add a .trim() onto the html string and all is good!

Maybe we can consider adding a .trim() on this line?

kentcdodds commented

Let's put that here: https://github.com/remark-embedder/core/blob/main/src/index.ts#L112

Want to make a pull request?

Also, thanks!

  • 👍1
bradgarropy commented

I'd love to! Give me a few and I'll send it over!

github-actions commented

🎉 This issue has been resolved in version 1.2.3 🎉

The release is available on:

Your semantic-release bot 📦🚀