Desktop: Make table in HTML format horizontally scrollable (#11198)

Co-authored-by: Laurent Cozic <laurent22@users.noreply.github.com>

packages/app-cli/tests/html_to_md/preserve_nested_tables.md

@@ -1 +1 @@
-<table><tbody><tr><td>Left side of the main table</td><td><b>Nested Table</b><table><tbody><tr><td>nested table C1</td><td>nested table C2</td></tr><tr><td>nested table</td><td>nested table</td></tr></tbody></table></td></tr></tbody></table>
+<div class="joplin-table-wrapper"><table><tbody><tr><td>Left side of the main table</td><td><b>Nested Table</b><table><tbody><tr><td>nested table C1</td><td>nested table C2</td></tr><tr><td>nested table</td><td>nested table</td></tr></tbody></table></td></tr></tbody></table></div>

packages/app-cli/tests/html_to_md/table_with_blockquote.md

@@ -1 +1 @@
-<table><thead><tr><th>A</th><th>B</th></tr></thead><tbody><tr><td><blockquote><p>Finally, from so little sleeping and so much reading, his brain dried up and he went completely out of his mind.</p><p>- Miguel de Cervantes</p></blockquote></td><td>d</td></tr></tbody></table>
+<div class="joplin-table-wrapper"><table><thead><tr><th>A</th><th>B</th></tr></thead><tbody><tr><td><blockquote><p>Finally, from so little sleeping and so much reading, his brain dried up and he went completely out of his mind.</p><p>- Miguel de Cervantes</p></blockquote></td><td>d</td></tr></tbody></table></div>

packages/app-cli/tests/html_to_md/table_with_code_1.md

@@ -1 +1 @@
-<table><thead><tr><th>Code</th><th>Description</th></tr><tr><td><pre><code>const test = "hello";</code></pre></td><td>abcd</td></tr><tr><td><pre><code>const test = "hello";</code></pre></td><td>abcd</td></tr></thead></table>
+<div class="joplin-table-wrapper"><table><thead><tr><th>Code</th><th>Description</th></tr><tr><td><pre><code>const test = "hello";</code></pre></td><td>abcd</td></tr><tr><td><pre><code>const test = "hello";</code></pre></td><td>abcd</td></tr></thead></table></div>

packages/app-cli/tests/html_to_md/table_with_code_2.md

@@ -1 +1 @@
-<table class="jop-noMdConv"><thead class="jop-noMdConv"><tr class="jop-noMdConv"><th class="jop-noMdConv">Code</th><th class="jop-noMdConv">Description</th></tr><tr class="jop-noMdConv"><td class="jop-noMdConv"><pre class="jop-noMdConv"><code class="">const test = "hello";</code></pre></td><td class="jop-noMdConv">abcda</td></tr><tr class="jop-noMdConv"><td class="jop-noMdConv"><pre class="jop-noMdConv"><code class="">const test = "hello";</code></pre></td><td class="jop-noMdConv">abcd</td></tr></thead></table>
+<div class="joplin-table-wrapper"><table class="jop-noMdConv"><thead class="jop-noMdConv"><tr class="jop-noMdConv"><th class="jop-noMdConv">Code</th><th class="jop-noMdConv">Description</th></tr><tr class="jop-noMdConv"><td class="jop-noMdConv"><pre class="jop-noMdConv"><code class="">const test = "hello";</code></pre></td><td class="jop-noMdConv">abcda</td></tr><tr class="jop-noMdConv"><td class="jop-noMdConv"><pre class="jop-noMdConv"><code class="">const test = "hello";</code></pre></td><td class="jop-noMdConv">abcd</td></tr></thead></table></div>

packages/app-cli/tests/html_to_md/table_with_code_3.md

@@ -1,10 +1,10 @@
-<table class="jop-noMdConv"><thead class="jop-noMdConv"><tr class="jop-noMdConv"><th class="jop-noMdConv">Code</th><th class="jop-noMdConv">Description</th></tr><tr class="jop-noMdConv"><td class="jop-noMdConv"><pre class="jop-noMdConv"><code class="">const test = "hello";
+<div class="joplin-table-wrapper"><table class="jop-noMdConv"><thead class="jop-noMdConv"><tr class="jop-noMdConv"><th class="jop-noMdConv">Code</th><th class="jop-noMdConv">Description</th></tr><tr class="jop-noMdConv"><td class="jop-noMdConv"><pre class="jop-noMdConv"><code class="">const test = "hello";
-<!-- -->
+
 // Another line
 console.log('Test...');
-<!-- -->
+
 // Blank lines
-<!-- -->
+
-<!-- -->
+
-<!-- -->
+
-// Should not break things.</code></pre></td><td class="jop-noMdConv">abcda</td></tr><tr class="jop-noMdConv"><td class="jop-noMdConv"><pre class="jop-noMdConv"><code class="">const test = "hello";</code></pre></td><td class="jop-noMdConv">abcd</td></tr></thead></table>
+// Should not break things.</code></pre></td><td class="jop-noMdConv">abcda</td></tr><tr class="jop-noMdConv"><td class="jop-noMdConv"><pre class="jop-noMdConv"><code class="">const test = "hello";</code></pre></td><td class="jop-noMdConv">abcd</td></tr></thead></table></div>

packages/app-cli/tests/html_to_md/table_with_heading.md

@@ -1 +1 @@
-<table><thead><tr><th>A</th><th>B</th></tr></thead><tbody><tr><td><h1>Testing</h1><p>hello</p></td><td>d</td></tr></tbody></table>
+<div class="joplin-table-wrapper"><table><thead><tr><th>A</th><th>B</th></tr></thead><tbody><tr><td><h1>Testing</h1><p>hello</p></td><td>d</td></tr></tbody></table></div>

packages/app-cli/tests/html_to_md/table_with_hr.md

@@ -1 +1 @@
-<table><thead><tr><th>A</th><th>B</th></tr></thead><tbody><tr><td>One line<hr>Two line</td><td>d</td></tr></tbody></table>
+<div class="joplin-table-wrapper"><table><thead><tr><th>A</th><th>B</th></tr></thead><tbody><tr><td>One line<hr>Two line</td><td>d</td></tr></tbody></table></div>

packages/app-cli/tests/html_to_md/table_with_list.md

@@ -1 +1 @@
-<table border="1" style="border-collapse: collapse; width: 100%;" data-mce-selected="1"><tbody><tr><td style="width: 50.0518%;">Header 1</td><td style="width: 50.0518%;">Header 2</td></tr><tr><td style="width: 50.0518%;"><br></td><td style="width: 50.0518%;"><ul><li>Check 1</li><li>Check 2</li></ul></td></tr></tbody></table>
+<div class="joplin-table-wrapper"><table border="1" style="border-collapse: collapse; width: 100%;" data-mce-selected="1"><tbody><tr><td style="width: 50.0518%;">Header 1</td><td style="width: 50.0518%;">Header 2</td></tr><tr><td style="width: 50.0518%;"><br></td><td style="width: 50.0518%;"><ul><li>Check 1</li><li>Check 2</li></ul></td></tr></tbody></table></div>

packages/turndown-plugin-gfm/src/tables.js

@@ -4,6 +4,7 @@ var rules = {}
 var alignMap = { left: ':---', right: '---:', center: ':---:' };
 
 let isCodeBlock_ = null;
+let options_ = null;
 
 // We need to cache the result of tableShouldBeSkipped() as it is expensive.
 // Caching it means we went from about 9000 ms for rendering down to 90 ms.
@@ -72,13 +73,33 @@ rules.tableRow = {
 }
 
 rules.table = {
-  // Only convert tables that can result in valid Markdown
-  // Other tables are kept as HTML using `keep` (see below).
   filter: function (node, options) {
-    return node.nodeName === 'TABLE' && !tableShouldBeHtml(node, options);
+    return node.nodeName === 'TABLE';
   },
 
   replacement: function (content, node) {
+    // Only convert tables that can result in valid Markdown
+    // Other tables are kept as HTML using `keep` (see below).
+    if (tableShouldBeHtml(node, options_)) {
+      let html = node.outerHTML;
+      let divParent = nodeParentDiv(node)
+      // Make table in HTML format horizontally scrollable by give table a div parent, so the width of the table is limited to the screen width.
+	    // see https://github.com/laurent22/joplin/pull/10161
+      // test cases:
+      // packages/app-cli/tests/html_to_md/preserve_nested_tables.html
+      // packages/app-cli/tests/html_to_md/table_with_blockquote.html
+      // packages/app-cli/tests/html_to_md/table_with_code_1.html
+      // packages/app-cli/tests/html_to_md/table_with_code_2.html
+      // packages/app-cli/tests/html_to_md/table_with_code_3.html
+      // packages/app-cli/tests/html_to_md/table_with_heading.html
+      // packages/app-cli/tests/html_to_md/table_with_hr.html
+      // packages/app-cli/tests/html_to_md/table_with_list.html
+      if (divParent === null || !divParent.classList.contains('joplin-table-wrapper')){
+        return `\n\n<div class="joplin-table-wrapper">${html}</div>\n\n`;
+      } else {
+        return html
+      }
+    } else {
       if (tableShouldBeSkipped(node)) return content;
 
       // Ensure there are no blank lines
@@ -104,6 +125,7 @@ rules.table = {
       return `\n\n${caption}${tableContent}\n\n`;
     }
   }
+}
 
 rules.tableCaption = {
   filter: ['caption'],
@@ -232,6 +254,15 @@ function tableShouldBeSkipped_(tableNode) {
   return false;
 }
 
+function nodeParentDiv(node) {
+  let parent = node.parentNode;
+  while (parent.nodeName !== 'DIV') {
+    parent = parent.parentNode;
+    if (!parent) return null;
+  }
+  return parent;
+}
+
 function nodeParentTable(node) {
   let parent = node.parentNode;
   while (parent.nodeName !== 'TABLE') {
@@ -261,6 +292,7 @@ function tableColCount(node) {
 
 export default function tables (turndownService) {
   isCodeBlock_ = turndownService.isCodeBlock;
+  options_ = turndownService.options;
 
   turndownService.keep(function (node) {
     if (node.nodeName === 'TABLE' && tableShouldBeHtml(node, turndownService.options)) return true;