liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
NGPixel 2022-11-08 22:40:43 -05:00
parent d98e0b3cd0
commit 9fbc25adb8
No known key found for this signature in database
GPG Key ID: 8FDA2F1757F60D63
7 changed files with 107 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/editor/editor-markdown.vue
View File

@ -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 })

87
client/themes/default/scss/app.scss
View File

@ -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
// ---------------------------------

1
package.json
View File

@ -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",

5
server/models/pages.js
View File

@ -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.')
}
}
}

10
server/modules/rendering/html-core/renderer.js
View File

@ -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
// --------------------------------

2
server/modules/rendering/markdown-core/renderer.js
View File

@ -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`)

5
yarn.lock
View File

@ -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"