Auto transposing does not work with a custom chord renderer

[no-chris]

function CustomChords() {
    return function (chord) {
        chord.formatted.symbol = chord.formatted.symbol
            .replace('M7', 'maj7')
            .replace('M9', 'maj9');
        return chord;
    };
};

function generateRenderOptions(transposeValue, accidentalsType){
    let options = {};
    let rendererFactoryOptions = { // init
        customFilters: [
            CustomChords()
        ],       
        useShortNamings: true,
        simplify : 'none', 
        transposeValue : 0, 
        accidental : 'original',
        symbolType : 'chord',
        printer : "text"
    };

    // configure rendererFactory options
    rendererFactoryOptions.transposeValue = transposeValue;
    rendererFactoryOptions.accidental = accidentalsType == 'auto' ? 'original' : accidentalsType;
    
    // define chordSymbol renderer
    options.chordSymbolRenderer = chordSymbol.chordRendererFactory(rendererFactoryOptions);
    
    // set general options 
    options.transposeValue = transposeValue;
    options.accidentalsType = accidentalsType ? accidentalsType : "auto";
   
    return options
}

function renderSongChart(songChartCode, options){    
    const parsed = chordMark.parseSong(songChartCode);    
    const rendered = chordMark.renderSong(parsed, options);  
    return rendered;
}

calling renderSongChart(songChartCode, generateRenderOptions(0, "auto")); produces the following rendering of the chord-mark code from my previous post: (rendering issue + chords are not automatically transposed between the two verses)

<div class="cmSong">
   <p class="cmLine"><span class="cmKeyDeclaration">key: D</span></p>
   <div class="cmSection cmSection-Verse">
      <p class="cmLine"><span class="cmSectionLabel">Verse 1</span></p>
      <p class="cmLine"><span class="cmChordLine"><span class="cmBarSeparator">|</span><span class="cmChordSymbol">Dm7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">G7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">Cmaj7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">%</span>     <span class="cmBarSeparator">|</span></span></p>
      <p class="cmLine"><span class="cmLyricLine">The first verse is in the key of C</span></p>
      <p class="cmLine"><span class="cmEmptyLine">&nbsp;</span></p>
      <p class="cmLine"><span class="cmKeyDeclaration">key: G</span></p>    <!-- rendering issue?: should be outside of <div> -->
   </div>
   <div class="cmSection cmSection-Verse">
      <p class="cmLine"><span class="cmSectionLabel">Verse 2</span></p>
      <p class="cmLine cmLine--isFromAutoRepeatChords"><span class="cmChordLine"><span class="cmBarSeparator">|</span><span class="cmChordSymbol">Dm7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">G7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">Cmaj7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">%</span>     <span class="cmBarSeparator">|</span></span></p>
      <p class="cmLine"><span class="cmLyricLine">And the second one in the key of G!</span></p>
   </div>
</div>

if we comment out the line: // options.chordSymbolRenderer = chordSymbol.chordRendererFactory(rendererFactoryOptions); then this is the rendered result: (same rendering issue, but chords are transposed between the two verses)

<div class="cmSong">
   <p class="cmLine"><span class="cmKeyDeclaration">key: D</span></p>
   <div class="cmSection cmSection-Verse">
      <p class="cmLine"><span class="cmSectionLabel">Verse 1</span></p>
      <p class="cmLine"><span class="cmChordLine"><span class="cmBarSeparator">|</span><span class="cmChordSymbol">Dm7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">G7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">CM7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">%</span>     <span class="cmBarSeparator">|</span></span></p>
      <p class="cmLine"><span class="cmLyricLine">The first verse is in the key of C</span></p>
      <p class="cmLine"><span class="cmEmptyLine">&nbsp;</span></p>
      <p class="cmLine"><span class="cmKeyDeclaration">key: G</span></p>    <!-- rendering issue? -->
   </div>
   <div class="cmSection cmSection-Verse">
      <p class="cmLine"><span class="cmSectionLabel">Verse 2</span></p>
      <p class="cmLine cmLine--isFromAutoRepeatChords"><span class="cmChordLine"><span class="cmBarSeparator">|</span><span class="cmChordSymbol">Gm7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">C7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">FM7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">%</span>     <span class="cmBarSeparator">|</span></span></p>
      <p class="cmLine"><span class="cmLyricLine">And the second one in the key of G!</span></p>
   </div>
</div>

Originally posted by @thecodeinventor in #660 (reply in thread)

[no-chris]

this is linked to the logic here
https://github.com/no-chris/chord-mark/blob/master/packages/chord-mark/src/renderer/helpers/renderAllChords.js#L76