FEATURE: add overflow-y auto to Markdown tables

app/assets/javascripts/pretty-text/engines/discourse-markdown/table.js.es6

@@ -1,6 +1,15 @@
 export function setup(helper) {
-  // this is built in now
+
-  // TODO: sanitizer needs fixing, does not properly support this yet
+  helper.registerPlugin(md => {
+
+    md.renderer.rules.table_open = function(){
+      return '<div class="md-table">\n<table>';
+    };
+
+    md.renderer.rules.table_close = function(){
+      return '</table>\n</div>';
+    };
+  });
 
   // we need a custom callback for style handling
   helper.whiteList({
@@ -24,5 +33,6 @@ export function setup(helper) {
       'tr',
       'th',
       'td',
+      'div.md-table'
   ]);
 }

app/assets/stylesheets/common/base/compose.scss

@@ -297,3 +297,7 @@ div.ac-wrap {
     color: lighten($primary, 40%);
   }
 }
+
+.md-table {
+  overflow-y: auto;
+}

spec/components/pretty_text_spec.rb

@@ -965,6 +965,7 @@ HTML
     MD
 
     expected = <<~HTML
+      <div class="md-table">
       <table>
       <thead>
       <tr>
@@ -981,6 +982,7 @@ HTML
       </tr>
       </tbody>
       </table>
+      </div>
     HTML
 
     expect(PrettyText.cook(markdown)).to eq(expected.strip)