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

 {

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

 {

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)