Auto-links break inline HTML with decimal numbers

  • Firstly, thank you so much for authoring such a nice plugin. The first time I saw it. Paul Boag, a UK-based UX consultant was using it. I made a note because it was so cool.

    Later I realised YouTube has something similar, although it is As far as I know, limited.

    On the link shown, the HTML breaks when I activate the option to automatically parse skip to timestamp links, it breaks this page (which does not have any timing links on).

    Instead of 

    <div class="page-playback-speed-controls">
  <button type="button" class="playback-rate-button" data-value="0.5" title="Playback Speed 0.5x" aria-label="Playback Speed 0.5x">0.5x</button>
  <button type="button" class="playback-rate-button mejs-active" data-value="1" title="Playback Speed 2x" aria-label="Playback Speed 1x">1x</button>
  <button type="button" class="playback-rate-button" data-value="1.5" title="Playback Speed 1.5x" aria-label="Playback Speed 1.5x">1.5x</button>
  <button type="button" class="playback-rate-button" data-value="2" title="Playback Speed 2x" aria-label="Playback Speed 2x">2x</button>
</div>

    Which is provided via the custom HTML block in Gutenberg. I Get the following

    <div class="page-playback-speed-controls">
  <button type="button" class="playback-rate-button" data-value="<a href=" javascript:void()"="" data-stt-time="0.5">0.5" title="Playback Speed <a href="javascript:void()" class="qed_stt_tslink" data-stt-time="0.5">0.5</a>x" aria-label="Playback Speed <a href="javascript:void()" class="qed_stt_tslink" data-stt-time="0.5">0.5</a>x"><a href="javascript:void()" class="qed_stt_tslink" data-stt-time="0.5">0.5</a>x</button>
  <button type="button" class="playback-rate-button mejs-active" data-value="1" title="Playback Speed 2x" aria-label="Playback Speed 1x">1x</button>
  <button type="button" class="playback-rate-button" data-value="<a href=" javascript:void()"="" data-stt-time="1.5">1.5" title="Playback Speed <a href="javascript:void()" class="qed_stt_tslink" data-stt-time="1.5">1.5</a>x" aria-label="Playback Speed <a href="javascript:void()" class="qed_stt_tslink" data-stt-time="1.5">1.5</a>x"><a href="javascript:void()" class="qed_stt_tslink" data-stt-time="1.5">1.5</a>x</button>
  <button type="button" class="playback-rate-button" data-value="2" title="Playback Speed 2x" aria-label="Playback Speed 2x">2x</button>
</div>

    I Have tested this with all plugins disabled.

    I was wondering if you had a GitHub, I could try to solve this issue via; or if you would mind if I forked the plugin, so that I could make a Gutenberg block, which offers an isolated place to replace the timestamp links, or fixes the detection?

    Hope you’re well.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter LewisCowles

    (@lewiscowles)

    Oh a note. I do not expect my buttons to have any effects when I disable all plugins. They relate to my own plugin, which adjusts the playback rate of media.

    Since the Gutenberg release, with the introduction of native HTML5 media; there is no media-element-js wrapper, so I use this snippet as a lightweight, pure-html way to enable myself and others to still use that plugin.

    I Don’t have any active projects using the skip-to-timestamp functionality. I Just think it is a really cool pattern, and personally can use it on offline sites, where I also like to control playback speed.

Viewing 1 replies (of 1 total)
  • The topic ‘Auto-links break inline HTML with decimal numbers’ is closed to new replies.