From 69fd413224bd774efaf83d989d51feeb5efbca0d Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Mon, 18 Dec 2023 16:00:48 +0100
Subject: [PATCH] fix(table): fix table too wide

fix #9
---
 src/hooks/useMarkdown.hook.ts | 12 ++++++++++--
 src/styles/app.scss           |  4 ++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useMarkdown.hook.ts b/src/hooks/useMarkdown.hook.ts
index 17ca1c3..a213e24 100644
--- a/src/hooks/useMarkdown.hook.ts
+++ b/src/hooks/useMarkdown.hook.ts
@@ -1,5 +1,6 @@
 import markdownItClass from '@toycode/markdown-it-class'
 import MarkdownIt from 'markdown-it'
+import Renderer from 'markdown-it/lib/renderer'
 import blockEmbedPlugin from 'markdown-it-block-embed'
 import markdownItCheckbox from 'markdown-it-checkbox'
 import markdownItFootnote from 'markdown-it-footnote'
@@ -21,8 +22,7 @@ const md = new MarkdownIt({
     h3: ['title', 'is-4'],
     h4: ['title', 'is-5'],
     h5: ['title', 'is-6'],
-    h6: ['title', 'is-6'],
-    table: ['table', 'is-fullwidth']
+    h6: ['title', 'is-6']
   })
   .use(html5Media)
   .use(blockEmbedPlugin, {
@@ -40,6 +40,14 @@ const md = new MarkdownIt({
     height: 400
   })
 
+const rules: Renderer.RenderRuleRecord = {
+  table_close: () => '</table>\n</div>',
+  table_open: () =>
+    '<div class="table-wrapper table is-fullwidth is striped">\n<table>\n'
+}
+
+md.renderer.rules = { ...md.renderer.rules, ...rules }
+
 export const useMarkdown = (defaultPrefix?: Ref<string> | string) => {
   const getRawContent = (content: string) => decodeBase64ToUTF8(content)
   const renderFromUTF8 = (content: string, prefix?: string) =>
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 5080132..0f0f629 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -93,6 +93,10 @@ a {
   transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s;
 }
 
+.table-wrapper {
+  overflow-x: auto;
+}
+
 @media print {
 
   html,