From 9fbc25adb8acd1cb7699e8bbfd0fc072cef08312 Mon Sep 17 00:00:00 2001 From: NGPixel Date: Tue, 8 Nov 2022 22:40:43 -0500 Subject: [PATCH] feat: improve table rendering + add markdown-it-decorate module --- client/components/editor/editor-markdown.vue | 2 + client/themes/default/scss/app.scss | 87 ++++++++++++++++++- package.json | 1 + server/models/pages.js | 5 +- .../modules/rendering/html-core/renderer.js | 10 +++ .../rendering/markdown-core/renderer.js | 2 + yarn.lock | 5 ++ 7 files changed, 107 insertions(+), 5 deletions(-) diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue index 6134524d..38f0f353 100644 --- a/client/components/editor/editor-markdown.vue +++ b/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 }) diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss index 99f406db..8bba5e72 100644 --- a/client/themes/default/scss/app.scss +++ b/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 // --------------------------------- diff --git a/package.json b/package.json index dc62e85b..209f19d0 100644 --- a/package.json +++ b/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", diff --git a/server/models/pages.js b/server/models/pages.js index 9bb5d397..dc54af9a 100644 --- a/server/models/pages.js +++ b/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.') } } } diff --git a/server/modules/rendering/html-core/renderer.js b/server/modules/rendering/html-core/renderer.js index d4700530..f0ffbec8 100644 --- a/server/modules/rendering/html-core/renderer.js +++ b/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('
') + } + }) + // -------------------------------- // Escape mustache expresions // -------------------------------- diff --git a/server/modules/rendering/markdown-core/renderer.js b/server/modules/rendering/markdown-core/renderer.js index 42bd12be..5723214e 100644 --- a/server/modules/rendering/markdown-core/renderer.js +++ b/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`) diff --git a/yarn.lock b/yarn.lock index e1b08805..825dd915 100644 --- a/yarn.lock +++ b/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"