feat: improve table rendering + add markdown-it-decorate module

Author: NGPixel

client/components/editor/editor-markdown.vue

@@ -225,6 +225,7 @@ import './markdown/fold'
 // Markdown-it
 import MarkdownIt from 'markdown-it'
 import mdAttrs from 'markdown-it-attrs'
+import mdDecorate from 'markdown-it-decorate'
 import mdEmoji from 'markdown-it-emoji'
 import mdTaskLists from 'markdown-it-task-lists'
 import mdExpandTabs from 'markdown-it-expand-tabs'
@@ -288,6 +289,7 @@ const md = new MarkdownIt({
   .use(mdAttrs, {
     allowedAttributes: ['id', 'class', 'target']
   })
+  .use(mdDecorate)
   .use(underline)
   .use(mdEmoji)
   .use(mdTaskLists, { label: false, labelAfter: false })

client/themes/default/scss/app.scss

@@ -662,13 +662,40 @@
   // ---------------------------------
 
   table {
-    margin: .5rem 1.75rem;
+    margin: .5rem 0;
     border-spacing: 0;
+    border-radius: 5px;
+    border: 1px solid mc('grey', '300');
+
+    @at-root .theme--dark & {
+      border-color: mc('grey', '600');
+    }
+
+    &.dense {
+      td, th {
+        font-size: .85rem;
+        padding: .5rem;
+      }
+    }
 
     th {
       padding: .75rem;
       border-bottom: 2px solid mc('grey', '500');
       color: mc('grey', '600');
+      background-color: mc('grey', '100');
+
+      @at-root .theme--dark & {
+        background-color: darken(mc('grey', '900'), 8%);
+        border-bottom-color: mc('grey', '600');
+        color: mc('grey', '500');
+      }
+
+      &:first-child {
+        border-top-left-radius: 7px;
+      }
+      &:last-child {
+        border-top-right-radius: 7px;
+      }
     }
 
     td {
@@ -677,7 +704,56 @@
 
     tr {
       td {
-        border-bottom: 1px solid mc('grey', '200');
+        border-bottom: 1px solid mc('grey', '300');
+        border-right: 1px solid mc('grey', '100');
+
+        @at-root .theme--dark & {
+          border-bottom-color: mc('grey', '700');
+          border-right-color: mc('grey', '800');
+        }
+
+        &:nth-child(even) {
+          background-color: mc('grey', '50');
+
+          @at-root .theme--dark & {
+            background-color: darken(mc('grey', '900'), 4%);
+          }
+        }
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+
+      &:nth-child(even) {
+        td {
+          background-color: mc('grey', '50');
+
+          @at-root .theme--dark & {
+            background-color: darken(mc('grey', '800'), 8%);
+          }
+
+          &:nth-child(even) {
+            background-color: mc('grey', '100');
+
+            @at-root .theme--dark & {
+              background-color: darken(mc('grey', '800'), 10%);
+            }
+          }
+        }
+      }
+
+      &:last-child {
+        td {
+          border-bottom: none;
+
+          &:first-child {
+            border-bottom-left-radius: 7px;
+          }
+          &:last-child {
+            border-bottom-right-radius: 7px;
+          }
+        }
       }
     }
   }
@@ -699,6 +775,7 @@
         border: 1px solid mc('blue-grey', '100');
         box-shadow: inset -1px -1px 0 0 #FFF, inset 1px 0 0 #FFF;
         padding: .5rem .75rem;
+        border-radius: 0 !important;
 
         @at-root .theme--dark & {
           border-color: mc('grey', '700');
@@ -735,6 +812,12 @@
     }
   }
 
+  // -> Add horizontal scrollbar when table is too wide
+  .table-container {
+    width: 100%;
+    overflow-x: auto;
+  }
+
   // ---------------------------------
   // IMAGES
   // ---------------------------------

package.json

@@ -106,6 +106,7 @@
     "markdown-it": "11.0.1",
     "markdown-it-abbr": "1.0.4",
     "markdown-it-attrs": "3.0.3",
+    "markdown-it-decorate": "1.2.2",
     "markdown-it-emoji": "1.4.0",
     "markdown-it-expand-tabs": "1.0.13",
     "markdown-it-external-links": "0.0.6",

server/models/pages.js

@@ -959,9 +959,8 @@ module.exports = class Page extends Model {
           // -> Save render to cache
           await WIKI.models.pages.savePageToCache(page)
         } else {
-          // -> No render? Possible duplicate issue
-          /* TODO: Detect duplicate and delete */
-          throw new Error('Error while fetching page. Duplicate entry detected. Reload the page to try again.')
+          // -> No render? Last page render failed...
+          throw new Error('Page has no rendered version. Looks like the Last page render failed. Try to edit the page and save it again.')
         }
       }
     }

server/modules/rendering/html-core/renderer.js

@@ -243,6 +243,16 @@ module.exports = {
       }
     })
 
+    // --------------------------------
+    // Wrap root table nodes
+    // --------------------------------
+
+    $('body').contents().toArray().forEach(item => {
+      if (item && item.name === 'table' && item.parent.name === 'body') {
+        $(item).wrap('<div class="table-container"></div>')
+      }
+    })
+
     // --------------------------------
     // Escape mustache expresions
     // --------------------------------

server/modules/rendering/markdown-core/renderer.js

@@ -1,5 +1,6 @@
 const md = require('markdown-it')
 const mdAttrs = require('markdown-it-attrs')
+const mdDecorate = require('markdown-it-decorate')
 const _ = require('lodash')
 const underline = require('./underline')
 
@@ -42,6 +43,7 @@ module.exports = {
     mkdown.use(mdAttrs, {
       allowedAttributes: ['id', 'class', 'target']
     })
+    mkdown.use(mdDecorate)
 
     for (let child of this.children) {
       const renderer = require(`../${_.kebabCase(child.key)}/renderer.js`)

yarn.lock

@@ -12968,6 +12968,11 @@ markdown-it-attrs@3.0.3:
   resolved "https://registry.yarnpkg.com/markdown-it-attrs/-/markdown-it-attrs-3.0.3.tgz#92acdb16fe551cb056c5eb9848413443cafb5231"
   integrity sha512-cLnICU2t61skNCr4Wih/sdza+UbQcqJGZwvqAypnbWA284nzDm+Gpc90iaRk/JjsIy4emag5v3s0rXFhFBWhCA==
 
+markdown-it-decorate@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/markdown-it-decorate/-/markdown-it-decorate-1.2.2.tgz#f1e11d11d837ae78906198f8a2c974f0e646acb7"
+  integrity sha512-7BFWJ97KBXgkaPVjKHISQnhSW8RWQ7yRNXpr8pPUV2Rw4GHvGrgb6CelKCM+GSijP0uSLCAVfc/knWIz+2v/Sw==
+
 markdown-it-emoji@1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz#9bee0e9a990a963ba96df6980c4fddb05dfb4dcc"