HtmlDivFormatter behaves differently than HtmlTableFormatter

[beltonk]

I recently switched from HtmlTableFormatter to HtmlDivFormatter, and seems there are some logical different, e.g. sot in HtmlDivFormatter renders .lyrics but not .literals? I'm not sure about other difference, just feel some nuances.

[beltonk]

seems comment directives not rendered as well.

[martijnversluis]

Hey @beltonk. What chord sheet and ChordSheetJS are you using?

I ran a small test:

import { ChordProParser, HtmlDivFormatter } from "https://esm.sh/chordsheetjs";

const chordProTestSong = `
{sot}
One
Two
Three
{eot}`;

const song = new ChordProParser().parse(chordProTestSong);
const output = new HtmlDivFormatter().format(song);
console.log(output);

The output is:

<div class='chord-sheet'>
  <div class='paragraph tab'>
    <div class='row'>
      <h3 class='label'>null</h3>
      <div class='literal'>
        One<br>
        Two<br>
        Three
      </div>
    </div>
  </div>
</div>

So it renders a .literal. I do spot a bug when rendering a null label.

[beltonk]

My fault... I assumed comment & literal are under columns, and mistakenly did some sanitization. Let me test again...

[beltonk]

I can reproduce the issue, whenever there is any other {c: }, {soc}, {sov} directives in the ChordPro, the tab will become lyrics lines instead of literal, no matter where these tags are.

For example,

const chordProTestSong = `
{sot}
One
Two
Three
{eot}
{c:Verse}
`;

const chordProTestSong = `
{c:Intro}
{sot}
One
Two
Three
{eot}
`;

const chordProTestSong = `
{sot}
One
Two
Three
{eot}
{sov}
...
{eov}
`;

Also tested {t:} {st:} has no effect on literal rendering

[martijnversluis]

@beltonk I published 10.2.0 containing a bugfix that should resolve your issue. Please let me know if it does the job 👍