feat: save editor render

server/graph/schemas/page.graphql

@@ -85,6 +85,7 @@ extend type Mutation {
     publishEndDate: Date
     publishStartDate: Date
     relations: [PageRelationInput!]
+    render: String
     scriptCss: String
     scriptJsLoad: String
     scriptJsUnload: String
@@ -236,6 +237,7 @@ type PageVersion {
   path: String
   publishEndDate: Date
   publishStartDate: Date
+  render: String
   tags: [String]
   title: String
   versionId: Int
@@ -342,6 +344,7 @@ input PageUpdateInput {
   publishStartDate: Date
   publishState: PagePublishState
   relations: [PageRelationInput!]
+  render: String
   scriptJsLoad: String
   scriptJsUnload: String
   scriptCss: String

server/models/pages.js

@@ -46,6 +46,7 @@ module.exports = class Page extends Model {
         publishEndDate: {type: 'string'},
         content: {type: 'string'},
         contentType: {type: 'string'},
+        render: {type: 'string'},
         siteId: {type: 'string'},
         createdAt: {type: 'string'},
         updatedAt: {type: 'string'}
@@ -321,6 +322,7 @@ module.exports = class Page extends Model {
       publishEndDate: opts.publishEndDate?.toISO(),
       publishStartDate: opts.publishStartDate?.toISO(),
       relations: opts.relations ?? [],
+      render: opts.render ?? '',
       siteId: opts.siteId,
       title: opts.title,
       toc: '[]',
@@ -445,6 +447,9 @@ module.exports = class Page extends Model {
 
     if ('content' in opts.patch) {
       patch.content = opts.patch.content
+      if ('render' in opts.patch) {
+        patch.render = opts.patch.render
+      }
       historyData.affectedFields.push('content')
     }
 

server/tasks/workers/render-page.js

@@ -18,7 +18,7 @@ module.exports = async ({ payload }) => {
 
     const pipeline = await WIKI.db.renderers.getRenderingPipeline(page.contentType)
 
-    let output = page.content
+    let output = page.render
 
     if (_.isEmpty(page.content)) {
       WIKI.logger.warn(`Failed to render page ID ${payload.id} because content was empty: [ FAILED ]`)

ux/src/components/EditorMarkdown.vue

@@ -228,7 +228,7 @@
         .editor-markdown-preview-content.contents(ref='editorPreviewContainer')
           div(
             ref='editorPreview'
-            v-html='state.previewHTML'
+            v-html='pageStore.render'
             )
 </template>
 
@@ -286,7 +286,6 @@ const cmRef = ref(null)
 
 const state = reactive({
   previewShown: true,
-  previewHTML: '',
   previewScrollSync: true
 })
 
@@ -403,10 +402,12 @@ function toggleMarkup ({ start, end }) {
   cm.value.doc.replaceSelections(cm.value.doc.getSelections().map(s => start + s + end))
 }
 
-const onCmInput = debounce(processContent, 600)
+const onCmInput = debounce(processContent, 500)
 
 function processContent (newContent) {
-  state.previewHTML = md.render(newContent)
+  pageStore.$patch({
+    render: md.render(newContent)
+  })
 }
 
 // MOUNTED

ux/src/components/EditorWysiwyg.vue

@@ -114,8 +114,10 @@ import { onBeforeUnmount, onMounted, reactive, shallowRef } from 'vue'
 
 import { useMeta, useQuasar, setCssVar } from 'quasar'
 import { useI18n } from 'vue-i18n'
+import { DateTime } from 'luxon'
 
 import { useEditorStore } from 'src/stores/editor'
+import { usePageStore } from 'src/stores/page'
 import { useSiteStore } from 'src/stores/site'
 
 // QUASAR
@@ -125,6 +127,7 @@ const $q = useQuasar()
 // STORES
 
 const editorStore = useEditorStore()
+const pageStore = usePageStore()
 const siteStore = useSiteStore()
 
 // I18N
@@ -678,7 +681,7 @@ function init () {
 
   // -> Initialize TipTap
   editor = useEditor({
-    content: '<p>I’m running Tiptap with Vue.js. 🎉</p>', // editorStore.content,
+    content: pageStore.content && pageStore.content.startsWith('{') ? JSON.parse(pageStore.content) : `<p>${pageStore.content}</p>`,
     extensions: [
       StarterKit.configure({
         codeBlock: false,
@@ -716,8 +719,14 @@ function init () {
       TextStyle,
       Typography
     ],
-    onUpdate: () => {
+    onUpdate: ({ editor }) => {
-      // this.$store.set('page/render', editor.getHTML())
+      editorStore.$patch({
+        lastChangeTimestamp: DateTime.utc()
+      })
+      pageStore.$patch({
+        content: JSON.stringify(editor.getJSON()),
+        render: editor.getHTML()
+      })
     }
   })
 }

ux/src/stores/page.js

@@ -126,6 +126,7 @@ const gqlMutations = {
       $publishEndDate: Date
       $publishStartDate: Date
       $relations: [PageRelationInput!]
+      $render: String
       $scriptCss: String
       $scriptJsLoad: String
       $scriptJsUnload: String
@@ -152,6 +153,7 @@ const gqlMutations = {
         publishEndDate: $publishEndDate
         publishStartDate: $publishStartDate
         relations: $relations
+        render: $render
         scriptCss: $scriptCss
         scriptJsLoad: $scriptJsLoad
         scriptJsUnload: $scriptJsUnload
@@ -336,6 +338,7 @@ export const usePageStore = defineStore('page', {
                 'publishStartDate',
                 'publishState',
                 'relations',
+                'render',
                 'scriptJsLoad',
                 'scriptJsUnload',
                 'scriptCss',
@@ -401,6 +404,7 @@ export const usePageStore = defineStore('page', {
                 'publishStartDate',
                 'publishState',
                 'relations',
+                'render',
                 'scriptJsLoad',
                 'scriptJsUnload',
                 'scriptCss',