From fc820eb1b6a0429e3ec9a282a6dca34e8c29bfd1 Mon Sep 17 00:00:00 2001 From: NGPixel Date: Fri, 7 Apr 2023 06:24:52 +0000 Subject: [PATCH] feat: save editor render --- server/graph/schemas/page.graphql | 3 +++ server/models/pages.js | 5 +++++ server/tasks/workers/render-page.js | 2 +- ux/src/components/EditorMarkdown.vue | 9 +++++---- ux/src/components/EditorWysiwyg.vue | 15 ++++++++++++--- ux/src/stores/page.js | 4 ++++ 6 files changed, 30 insertions(+), 8 deletions(-) diff --git a/server/graph/schemas/page.graphql b/server/graph/schemas/page.graphql index e6993aa8..5f8ab204 100644 --- a/server/graph/schemas/page.graphql +++ b/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 diff --git a/server/models/pages.js b/server/models/pages.js index 2f7527ed..97c0a354 100644 --- a/server/models/pages.js +++ b/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') } diff --git a/server/tasks/workers/render-page.js b/server/tasks/workers/render-page.js index 4a8e4278..6e3d236b 100644 --- a/server/tasks/workers/render-page.js +++ b/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 ]`) diff --git a/ux/src/components/EditorMarkdown.vue b/ux/src/components/EditorMarkdown.vue index 502e4cb4..a343921d 100644 --- a/ux/src/components/EditorMarkdown.vue +++ b/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' ) @@ -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 diff --git a/ux/src/components/EditorWysiwyg.vue b/ux/src/components/EditorWysiwyg.vue index ff73fb61..55c0074c 100644 --- a/ux/src/components/EditorWysiwyg.vue +++ b/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: '

Iā€™m running Tiptap with Vue.js. šŸŽ‰

', // editorStore.content, + content: pageStore.content && pageStore.content.startsWith('{') ? JSON.parse(pageStore.content) : `

${pageStore.content}

`, extensions: [ StarterKit.configure({ codeBlock: false, @@ -716,8 +719,14 @@ function init () { TextStyle, Typography ], - onUpdate: () => { - // this.$store.set('page/render', editor.getHTML()) + onUpdate: ({ editor }) => { + editorStore.$patch({ + lastChangeTimestamp: DateTime.utc() + }) + pageStore.$patch({ + content: JSON.stringify(editor.getJSON()), + render: editor.getHTML() + }) } }) } diff --git a/ux/src/stores/page.js b/ux/src/stores/page.js index 391ca2e3..ad099cad 100644 --- a/ux/src/stores/page.js +++ b/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',