jgm / pandoc

Universal markup converter
https://pandoc.org
Other
34.56k stars 3.38k forks source link

embed element not working in revealjs format #7830

Open cderv opened 2 years ago

cderv commented 2 years ago

This is what we got if we tries to embed a PDF file in HTML file and HTML presentation

❯ echo "![](myplot.pdf)" | pandoc -t revealjs
<section class="slide level6">

<p><embed data-src="myplot.pdf" /></p>
</section>

❯ echo "![](myplot.pdf)" | pandoc -t html
<p><embed src="myplot.pdf" /></p>

There is a special treatment to use data-src for Lazy Loading feature in revealjs instead of src. I believe this is here https://github.com/jgm/pandoc/blob/2e50c8d1378e911095918a42c04643d64946d554/src/Text/Pandoc/Writers/HTML.hs#L1520-L524 This is then applied for various element https://github.com/jgm/pandoc/blob/2e50c8d1378e911095918a42c04643d64946d554/src/Text/Pandoc/Writers/HTML.hs#L1537-L1542 However, revealjs does support only a few, and especially <embed> is not one of them - only img, video, audio and iframe are supported.

        // Media elements with data-src attributes
        queryAll( slide, 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ).forEach( element => {
            if( element.tagName !== 'IFRAME' || this.shouldPreload( element ) ) {
                element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
                element.setAttribute( 'data-lazy-loaded', '' );
                element.removeAttribute( 'data-src' );
            }
        } );

Source: https://github.com/hakimel/reveal.js/blob/f7c59649fe9d72a148860220a66511cefd142907/js/controllers/slidecontent.js#L52-L59 Doc: https://revealjs.com/media/#lazy-loading

We could also ask upstream to support this, but currently I believe this is a bug as you can't insert such document using image syntax for revealjs format because Pandoc will write something not supported by revealjs.

jgm commented 2 years ago

What do you think we should do instead?

cderv commented 2 years ago

Using src attributes as in html output works in revealjs. I believe the data-src attributes for Lazy Loading should be used only for the elements that are supported in revealjs.

cderv commented 2 years ago

We could also ask upstream to support this, but currently I believe this is a bug as you can't insert such document using image syntax for revealjs format because Pandoc will write something not supported by revealjs.

But asking upstream is definitely a solution. Lazy Loading could also work with <embed> I believe. I'll open an issue there.