From 59e9325dc575fe744ca510a050c02e2243c7f52c Mon Sep 17 00:00:00 2001
From: Martijn Versluis <martijnversluis@users.noreply.github.com>
Date: Sat, 14 Dec 2024 21:47:36 +0100
Subject: [PATCH] Render section label outside content

Resolves #1474

As requested by @edonv in #1443
---
 src/formatter/templates/html_div_formatter.ts |   9 +-
 .../templates/html_table_formatter.ts         |  13 +-
 test/formatter/html_div_formatter.test.ts     |  40 ++++++
 test/formatter/html_table_formatter.test.ts   | 126 ++++++++++++++++--
 4 files changed, 168 insertions(+), 20 deletions(-)

diff --git a/src/formatter/templates/html_div_formatter.ts b/src/formatter/templates/html_div_formatter.ts
index e7c4b198..1e4ee82b 100644
--- a/src/formatter/templates/html_div_formatter.ts
+++ b/src/formatter/templates/html_div_formatter.ts
@@ -40,10 +40,13 @@ export default (
     ${ each(bodyParagraphs, (paragraph) => `
       <div class="${ paragraphClasses(paragraph) }">
         ${ when(paragraph.isLiteral(), () => `
-          <div class="row">
-            ${ when(isPresent(paragraph.label), () => `
+          ${ when(isPresent(paragraph.label), () => `
+            <div class="row">
               <h3 class="label">${ paragraph.label }</h3>
-            `) }
+            </div>
+          `) }
+
+          <div class="row">
             <div class="literal">${ newlinesToBreaks(renderSection(paragraph, configuration)) }</div>
           </div>
         `).else(() => `
diff --git a/src/formatter/templates/html_table_formatter.ts b/src/formatter/templates/html_table_formatter.ts
index 8989654c..ac6c5d95 100644
--- a/src/formatter/templates/html_table_formatter.ts
+++ b/src/formatter/templates/html_table_formatter.ts
@@ -42,11 +42,18 @@ export default (
       ${ each(bodyParagraphs, (paragraph) => `
         <div class="${ paragraphClasses(paragraph) }">
           ${ when(paragraph.isLiteral(), () => `
+            ${ when(isPresent(paragraph.label), () => `
+              <table class="row">
+                <tr>
+                  <td>
+                    <h3 class="label">${ paragraph.label }</h3>
+                  </td>
+                </tr>
+              </table>
+            `) }
+
             <table class="literal">
               <tr>
-                ${ when(isPresent(paragraph.label), () => `
-                  <td class="label">${ paragraph.label }</td>
-                `) }
                 <td class="contents">${ newlinesToBreaks(renderSection(paragraph, configuration)) }</td>
               </tr>
             </table>
diff --git a/test/formatter/html_div_formatter.test.ts b/test/formatter/html_div_formatter.test.ts
index 7961d710..165fa4a4 100644
--- a/test/formatter/html_div_formatter.test.ts
+++ b/test/formatter/html_div_formatter.test.ts
@@ -169,6 +169,8 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph tab">
           <div class="row">
             <h3 class="label">Tab 1</h3>
+          </div>
+          <div class="row">
             <div class="literal">
               Tab line 1<br>
               Tab line 2
@@ -179,6 +181,8 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph abc">
           <div class="row">
             <h3 class="label">ABC 1</h3>
+          </div>
+          <div class="row">
             <div class="literal">
               ABC line 1<br>
               ABC line 2
@@ -189,6 +193,8 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph ly">
           <div class="row">
             <h3 class="label">LY 1</h3>
+          </div>
+          <div class="row">
             <div class="literal">
               LY line 1<br>
               LY line 2
@@ -211,6 +217,8 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph grid">
           <div class="row">
             <h3 class="label">Grid 1</h3>
+          </div>
+          <div class="row">
             <div class="literal">
               Grid line 1<br>
               Grid line 2
@@ -371,6 +379,8 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph tab">
           <div class="row">
             <h3 class="label">Tab 1</h3>
+          </div>
+          <div class="row">
             <div class="literal">
               Tab line 1<br>
               Tab line 2
@@ -381,6 +391,8 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph abc">
           <div class="row">
             <h3 class="label">ABC 1</h3>
+          </div>
+          <div class="row">
             <div class="literal">
               ABC line 1<br>
               ABC line 2
@@ -391,6 +403,8 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph ly">
           <div class="row">
             <h3 class="label">LY 1</h3>
+          </div>
+          <div class="row">
             <div class="literal">
               LY line 1<br>
               LY line 2
@@ -413,6 +427,8 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph grid">
           <div class="row">
             <h3 class="label">Grid 1</h3>
+          </div>
+          <div class="row">
             <div class="literal">
               Grid line 1<br>
               Grid line 2
@@ -753,6 +769,8 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph tab">
           <div class="row">
             <h3 class="label">Tab 1</h3>
+          </div>
+          <div class="row">
             <div class="literal">
               Tab line 1<br>
               Tab line 2
@@ -763,6 +781,8 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph abc">
           <div class="row">
             <h3 class="label">ABC 1</h3>
+          </div>
+          <div class="row">
             <div class="literal">
               ABC line 1<br>
               ABC line 2
@@ -773,6 +793,8 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph ly">
           <div class="row">
             <h3 class="label">LY 1</h3>
+          </div>
+          <div class="row">
             <div class="literal">
               LY line 1<br>
               LY line 2
@@ -795,6 +817,9 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph grid">
           <div class="row">
             <h3 class="label">Grid 1</h3>
+          </div>
+
+          <div class="row">
             <div class="literal">
               Grid line 1<br>
               Grid line 2
@@ -956,6 +981,9 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph tab">
           <div class="row">
             <h3 class="label">Tab 1</h3>
+          </div>
+
+          <div class="row">
             <div class="literal">
               Tab line 1<br>
               Tab line 2
@@ -966,6 +994,8 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph abc">
           <div class="row">
             <h3 class="label">ABC 1</h3>
+          </div>
+          <div class="row">
             <div class="literal">
               ABC line 1<br>
               ABC line 2
@@ -976,6 +1006,8 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph ly">
           <div class="row">
             <h3 class="label">LY 1</h3>
+          </div>
+          <div class="row">
             <div class="literal">
               LY line 1<br>
               LY line 2
@@ -998,6 +1030,8 @@ describe('HtmlDivFormatter', () => {
         <div class="paragraph grid">
           <div class="row">
             <h3 class="label">Grid 1</h3>
+          </div>
+          <div class="row">
             <div class="literal">
               Grid line 1<br>
               Grid line 2
@@ -1114,6 +1148,9 @@ describe('HtmlDivFormatter', () => {
               <div class="paragraph ${type}">
                 <div class="row">
                   <h3 class="label">${type} section</h3>
+                </div>
+
+                <div class="row">
                   <div class="literal">
                     ${type.toUpperCase()} LINE 1<br>
                     ${type.toUpperCase()} LINE 2
@@ -1138,6 +1175,9 @@ describe('HtmlDivFormatter', () => {
               <div class="paragraph ${type}">
                 <div class="row">
                   <h3 class="label">${type} section</h3>
+                </div>
+
+                <div class="row">
                   <div class="literal">
                     ${type} line 1<br>
                     ${type} line 2
diff --git a/test/formatter/html_table_formatter.test.ts b/test/formatter/html_table_formatter.test.ts
index 68e593ea..b3d1c2b6 100644
--- a/test/formatter/html_table_formatter.test.ts
+++ b/test/formatter/html_table_formatter.test.ts
@@ -151,9 +151,16 @@ describe('HtmlTableFormatter', () => {
         </div>
 
         <div class="paragraph tab">
+          <table class="row">
+            <tr>
+              <td>
+                <h3 class="label">Tab 1</h3>
+              </td>
+            </tr>
+          </table>
+
           <table class="literal">
             <tr>
-              <td class="label">Tab 1</td>
               <td class="contents">
                 Tab line 1<br>
                 Tab line 2
@@ -163,9 +170,16 @@ describe('HtmlTableFormatter', () => {
         </div>
 
         <div class="paragraph abc">
+          <table class="row">
+            <tr>
+              <td>
+                <h3 class="label">ABC 1</h3>
+              </td>
+            </tr>
+          </table>
+
           <table class="literal">
             <tr>
-              <td class="label">ABC 1</td>
               <td class="contents">
                 ABC line 1<br>
                 ABC line 2
@@ -175,9 +189,16 @@ describe('HtmlTableFormatter', () => {
         </div>
 
         <div class="paragraph ly">
+          <table class="row">
+            <tr>
+              <td>
+                <h3 class="label">LY 1</h3>
+              </td>
+            </tr>
+          </table>
+
           <table class="literal">
             <tr>
-              <td class="label">LY 1</td>
               <td class="contents">
                 LY line 1<br>
                 LY line 2
@@ -202,9 +223,16 @@ describe('HtmlTableFormatter', () => {
       </div>
 
       <div class="paragraph grid">
+        <table class="row">
+          <tr>
+            <td>
+              <h3 class="label">Grid 1</h3>
+            </td>
+          </tr>
+        </table>
+
         <table class="literal">
           <tr>
-            <td class="label">Grid 1</td>
             <td class="contents">
               Grid line 1<br>
               Grid line 2
@@ -349,9 +377,16 @@ describe('HtmlTableFormatter', () => {
         </div>
 
         <div class="paragraph tab">
+          <table class="row">
+            <tr>
+              <td>
+                <h3 class="label">Tab 1</h3>
+              </td>
+            </tr>
+          </table>
+
           <table class="literal">
             <tr>
-              <td class="label">Tab 1</td>
               <td class="contents">
                 Tab line 1<br>
                 Tab line 2
@@ -361,9 +396,16 @@ describe('HtmlTableFormatter', () => {
         </div>
 
         <div class="paragraph abc">
+          <table class="row">
+            <tr>
+              <td>
+                <h3 class="label">ABC 1</h3>
+              </td>
+            </tr>
+          </table>
+
           <table class="literal">
             <tr>
-              <td class="label">ABC 1</td>
               <td class="contents">
                 ABC line 1<br>
                 ABC line 2
@@ -373,9 +415,16 @@ describe('HtmlTableFormatter', () => {
         </div>
 
         <div class="paragraph ly">
+          <table class="row">
+            <tr>
+              <td>
+                <h3 class="label">LY 1</h3>
+              </td>
+            </tr>
+          </table>
+
           <table class="literal">
             <tr>
-              <td class="label">LY 1</td>
               <td class="contents">
                 LY line 1<br>
                 LY line 2
@@ -400,9 +449,16 @@ describe('HtmlTableFormatter', () => {
         </div>
 
         <div class="paragraph grid">
+          <table class="row">
+            <tr>
+              <td>
+                <h3 class="label">Grid 1</h3>
+              </td>
+            </tr>
+          </table>
+
           <table class="literal">
             <tr>
-              <td class="label">Grid 1</td>
               <td class="contents">
                 Grid line 1<br>
                 Grid line 2
@@ -741,9 +797,16 @@ describe('HtmlTableFormatter', () => {
         </div>
 
         <div class="paragraph tab">
+          <table class="row">
+            <tr>
+              <td>
+                <h3 class="label">Tab 1</h3>
+              </td>
+            </tr>
+          </table>
+
           <table class="literal">
             <tr>
-              <td class="label">Tab 1</td>
               <td class="contents">
                 Tab line 1<br>
                 Tab line 2
@@ -753,9 +816,16 @@ describe('HtmlTableFormatter', () => {
         </div>
 
         <div class="paragraph abc">
+          <table class="row">
+            <tr>
+              <td>
+                <h3 class="label">ABC 1</h3>
+              </td>
+            </tr>
+          </table>
+
           <table class="literal">
             <tr>
-              <td class="label">ABC 1</td>
               <td class="contents">
                 ABC line 1<br>
                 ABC line 2
@@ -765,9 +835,16 @@ describe('HtmlTableFormatter', () => {
         </div>
 
         <div class="paragraph ly">
+          <table class="row">
+            <tr>
+              <td>
+                <h3 class="label">LY 1</h3>
+              </td>
+            </tr>
+          </table>
+
           <table class="literal">
             <tr>
-              <td class="label">LY 1</td>
               <td class="contents">
                 LY line 1<br>
                 LY line 2</td>
@@ -791,9 +868,16 @@ describe('HtmlTableFormatter', () => {
           </div>
 
           <div class="paragraph grid">
+            <table class="row">
+              <tr>
+                <td>
+                  <h3 class="label">Grid 1</h3>
+                </td>
+              </tr>
+            </table>
+
             <table class="literal">
               <tr>
-                <td class="label">Grid 1</td>
                 <td class="contents">
                   Grid line 1<br>
                   Grid line 2
@@ -947,9 +1031,16 @@ describe('HtmlTableFormatter', () => {
           const expectedOutput = html`
             <div class="chord-sheet">
               <div class="paragraph ${type}">
+                <table class="row">
+                  <tr>
+                    <td>
+                      <h3 class="label">${type} section</h3>
+                    </td>
+                  </tr>
+                </table>
+
                 <table class="literal">
                   <tr>
-                    <td class="label">${type} section</td>
                     <td class="contents">
                       ${type.toUpperCase()} LINE 1<br>
                       ${type.toUpperCase()} LINE 2
@@ -973,9 +1064,16 @@ describe('HtmlTableFormatter', () => {
           const expectedOutput = html`
             <div class="chord-sheet">
               <div class="paragraph ${type}">
+                <table class="row">
+                  <tr>
+                    <td>
+                      <h3 class="label">${type} section</h3>
+                    </td>
+                  </tr>
+                </table>
+
                 <table class="literal">
                   <tr>
-                    <td class="label">${type} section</td>
                     <td class="contents">
                       ${type} line 1<br>
                       ${type} line 2