feat: add mdc parsing

server/locales/en.json

@@ -1230,6 +1230,7 @@
   "common.actions.properties": "Properties",
   "common.actions.refresh": "Refresh",
   "common.actions.rename": "Rename",
+  "common.actions.rerender": "Rerender",
   "common.actions.returnToTop": "Return to top",
   "common.actions.save": "Save",
   "common.actions.saveAndClose": "Save and Close",

server/package-lock.json

@@ -80,6 +80,7 @@
         "markdown-it-footnote": "3.0.3",
         "markdown-it-imsize": "2.0.1",
         "markdown-it-mark": "3.0.1",
+        "markdown-it-mdc": "0.1.3",
         "markdown-it-multimd-table": "4.2.2",
         "markdown-it-sub": "1.0.0",
         "markdown-it-sup": "1.0.0",
@@ -1189,11 +1190,33 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-pTjcqY9E4nOI55Wgpz7eiI8+LzdYnw3qxXCfHyBDdPbYvbyLgWLJGh8EdPvqawwMK1Uo1794AUkkR38Fr0g+2g==",
+      "peer": true
+    },
     "node_modules/@types/long": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz",
       "integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA=="
     },
+    "node_modules/@types/markdown-it": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-13.0.1.tgz",
+      "integrity": "sha512-SUEb8Frsxs3D5Gg9xek6i6EG6XQ5s+O+ZdQzIPESZVZw3Pv3CPQfjCJBI+RgqZd1IBeu18S0Rn600qpPnEK37w==",
+      "peer": true,
+      "dependencies": {
+        "@types/linkify-it": "*",
+        "@types/mdurl": "*"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz",
+      "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
+      "peer": true
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -5855,6 +5878,21 @@
       "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-3.0.1.tgz",
       "integrity": "sha512-HyxjAu6BRsdt6Xcv6TKVQnkz/E70TdGXEFHRYBGLncRE9lBFwDNLVtFojKxjJWgJ+5XxUwLaHXy+2sGBbDn+4A=="
     },
+    "node_modules/markdown-it-mdc": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/markdown-it-mdc/-/markdown-it-mdc-0.1.3.tgz",
+      "integrity": "sha512-HHpN0KiRG96C/FhipO6/fAN/v0FgrM96AZLPiywQHuDIT/9GZN82xviuQPnR+u8rz0j66LVxlCkT2d0be0qgWw==",
+      "dependencies": {
+        "js-yaml": "^4.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@types/markdown-it": "^13.0.1",
+        "markdown-it": "^13.0.1"
+      }
+    },
     "node_modules/markdown-it-multimd-table": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/markdown-it-multimd-table/-/markdown-it-multimd-table-4.2.2.tgz",

server/package.json

@@ -105,6 +105,7 @@
     "markdown-it-footnote": "3.0.3",
     "markdown-it-imsize": "2.0.1",
     "markdown-it-mark": "3.0.1",
+    "markdown-it-mdc": "0.1.3",
     "markdown-it-multimd-table": "4.2.2",
     "markdown-it-sub": "1.0.0",
     "markdown-it-sup": "1.0.0",

server/renderers/markdown.mjs

@@ -10,6 +10,7 @@ import mdSub from 'markdown-it-sub'
 import mdMark from 'markdown-it-mark'
 import mdMultiTable from 'markdown-it-multimd-table'
 import mdFootnote from 'markdown-it-footnote'
+import mdMdc from 'markdown-it-mdc'
 import katex from 'katex'
 import mdImsize from './modules/markdown-it-imsize.mjs'
 import mdUnderline from './modules/markdown-it-underline.mjs'
@@ -71,6 +72,7 @@ export async function render (input, config) {
     .use(mdMark)
     .use(mdFootnote)
     .use(mdImsize)
+    .use(mdMdc)
 
   if (config.underline) {
     md.use(mdUnderline)

ux/package-lock.json

@@ -64,6 +64,7 @@
         "markdown-it-footnote": "3.0.3",
         "markdown-it-imsize": "2.0.1",
         "markdown-it-mark": "3.0.1",
+        "markdown-it-mdc": "0.1.3",
         "markdown-it-multimd-table": "4.2.2",
         "markdown-it-sub": "1.0.0",
         "markdown-it-sup": "1.0.0",
@@ -1434,12 +1435,34 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-pTjcqY9E4nOI55Wgpz7eiI8+LzdYnw3qxXCfHyBDdPbYvbyLgWLJGh8EdPvqawwMK1Uo1794AUkkR38Fr0g+2g==",
+      "peer": true
+    },
     "node_modules/@types/lodash": {
       "version": "4.14.195",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.195.tgz",
       "integrity": "sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==",
       "dev": true
     },
+    "node_modules/@types/markdown-it": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-13.0.1.tgz",
+      "integrity": "sha512-SUEb8Frsxs3D5Gg9xek6i6EG6XQ5s+O+ZdQzIPESZVZw3Pv3CPQfjCJBI+RgqZd1IBeu18S0Rn600qpPnEK37w==",
+      "peer": true,
+      "dependencies": {
+        "@types/linkify-it": "*",
+        "@types/mdurl": "*"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz",
+      "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
+      "peer": true
+    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "dev": true,
@@ -4911,7 +4934,6 @@
     },
     "node_modules/js-yaml": {
       "version": "4.1.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
@@ -5328,6 +5350,21 @@
       "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-3.0.1.tgz",
       "integrity": "sha512-HyxjAu6BRsdt6Xcv6TKVQnkz/E70TdGXEFHRYBGLncRE9lBFwDNLVtFojKxjJWgJ+5XxUwLaHXy+2sGBbDn+4A=="
     },
+    "node_modules/markdown-it-mdc": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/markdown-it-mdc/-/markdown-it-mdc-0.1.3.tgz",
+      "integrity": "sha512-HHpN0KiRG96C/FhipO6/fAN/v0FgrM96AZLPiywQHuDIT/9GZN82xviuQPnR+u8rz0j66LVxlCkT2d0be0qgWw==",
+      "dependencies": {
+        "js-yaml": "^4.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@types/markdown-it": "^13.0.1",
+        "markdown-it": "^13.0.1"
+      }
+    },
     "node_modules/markdown-it-multimd-table": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/markdown-it-multimd-table/-/markdown-it-multimd-table-4.2.2.tgz",

ux/package.json

@@ -69,6 +69,7 @@
     "markdown-it-footnote": "3.0.3",
     "markdown-it-imsize": "2.0.1",
     "markdown-it-mark": "3.0.1",
+    "markdown-it-mdc": "0.1.3",
     "markdown-it-multimd-table": "4.2.2",
     "markdown-it-sub": "1.0.0",
     "markdown-it-sup": "1.0.0",

ux/src/components/FileManager.vue

@@ -247,7 +247,7 @@ q-layout.fileman(view='hHh lpR lFr', container)
                 q-item-section.fileman-filelist-side(side, v-if='item.side')
                   .text-caption {{item.side}}
                 //- RIGHT-CLICK MENU
-                q-menu(
+                q-menu.translucent-menu(
                   touch-position
                   context-menu
                   auto-close
@@ -264,6 +264,10 @@ q-layout.fileman(view='hHh lpR lFr', container)
                         q-item-section(side)
                           q-icon(name='las la-edit', color='orange')
                         q-item-section {{ t(`common.actions.edit`) }}
+                      q-item(clickable, v-if='item.type === `page`', @click='rerenderPage(item)')
+                        q-item-section(side)
+                          q-icon(name='las la-magic', color='orange')
+                        q-item-section {{ t(`common.actions.rerender`) }}
                       q-item(clickable, v-if='item.type !== `folder`', @click='openItem(item)')
                         q-item-section(side)
                           q-icon(name='las la-eye', color='primary')
@@ -786,6 +790,15 @@ function reloadFolder (folderId) {
 // PAGE METHODS
 // --------------------------------------
 
+function rerenderPage (item) {
+  $q.dialog({
+    component: defineAsyncComponent(() => import('src/components/RerenderPageDialog.vue')),
+    componentProps: {
+      id: item.id
+    }
+  })
+}
+
 function delPage (pageId, pageName) {
   $q.dialog({
     component: defineAsyncComponent(() => import('src/components/PageDeleteDialog.vue')),

ux/src/components/PageActionsCol.vue

@@ -95,7 +95,7 @@
         transition-show='jump-left'
         )
         q-list(padding, style='min-width: 225px;')
-          q-item(clickable, v-if='userStore.can(`manage:pages`)')
+          q-item(clickable, disabled, v-if='userStore.can(`manage:pages`)')
             q-item-section.items-center(avatar)
               q-icon(color='deep-orange-9', name='las la-atom', size='sm')
             q-item-section
@@ -105,7 +105,7 @@
               q-icon(color='deep-orange-9', name='las la-magic', size='sm')
             q-item-section
               q-item-label Rerender Page
-          q-item(clickable)
+          q-item(clickable, disabled)
             q-item-section.items-center(avatar)
               q-icon(color='deep-orange-9', name='las la-sun', size='sm')
             q-item-section

ux/src/components/RerenderPageDialog.vue

@@ -12,6 +12,15 @@ import { useDialogPluginComponent, useQuasar } from 'quasar'
 import { computed, onMounted, reactive } from 'vue'
 import { usePageStore } from 'src/stores/page'
 
+// PROPS
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  }
+})
+
 // EMITS
 
 defineEmits([
@@ -52,7 +61,7 @@ async function rerenderPage () {
         }
       `,
       variables: {
-        id: pageStore.id
+        id: props.id
       }
     })
     if (resp?.data?.rerenderPage?.operation?.succeeded) {

ux/src/css/app.scss

@@ -222,7 +222,7 @@ body::-webkit-scrollbar-thumb {
 
 .translucent-menu {
   @at-root .body--light & {
-    background-color: rgba(255,255,255,.9);
+    background-color: rgba(255,255,255,.8);
   }
   @at-root .body--dark & {
     background-color: rgba($dark,.7);

ux/src/renderers/markdown.js

@@ -10,6 +10,7 @@ import mdSub from 'markdown-it-sub'
 import mdMark from 'markdown-it-mark'
 import mdMultiTable from 'markdown-it-multimd-table'
 import mdFootnote from 'markdown-it-footnote'
+import mdMdc from 'markdown-it-mdc'
 import katex from 'katex'
 import mdUnderline from './modules/markdown-it-underline'
 import mdImsize from './modules/markdown-it-imsize'
@@ -72,6 +73,7 @@ export class MarkdownRenderer {
       .use(mdMark)
       .use(mdFootnote)
       .use(mdImsize)
+      .use(mdMdc)
 
     if (config.underline) {
       this.md.use(mdUnderline)