feat: convert page

client/components/common/nav-header.vue

@@ -150,6 +150,9 @@
                 v-list-item.pl-4(@click='pageSource', v-if='mode !== `source` && hasReadSourcePermission')
                   v-list-item-avatar(size='24', tile): v-icon(color='indigo') mdi-code-tags
                   v-list-item-title.body-2 {{$t('common:header.viewSource')}}
+                v-list-item.pl-4(@click='pageConvert', v-if='hasWritePagesPermission')
+                  v-list-item-avatar(size='24', tile): v-icon(color='indigo') mdi-lightning-bolt
+                  v-list-item-title.body-2 {{$t('common:header.convert')}}
                 v-list-item.pl-4(@click='pageDuplicate', v-if='hasWritePagesPermission')
                   v-list-item-avatar(size='24', tile): v-icon(color='indigo') mdi-content-duplicate
                   v-list-item-title.body-2 {{$t('common:header.duplicate')}}
@@ -237,6 +240,7 @@
     page-selector(mode='move', v-model='movePageModal', :open-handler='pageMoveRename', :path='path', :locale='locale')
     page-selector(mode='create', v-model='duplicateOpts.modal', :open-handler='pageDuplicateHandle', :path='duplicateOpts.path', :locale='duplicateOpts.locale')
     page-delete(v-model='deletePageModal', v-if='path && path.length')
+    page-convert(v-model='convertPageModal', v-if='path && path.length')
 
     .nav-header-dev(v-if='isDevMode')
       v-icon mdi-alert
@@ -255,7 +259,8 @@ import movePageMutation from 'gql/common/common-pages-mutation-move.gql'
 
 export default {
   components: {
-    PageDelete: () => import('./page-delete.vue')
+    PageDelete: () => import('./page-delete.vue'),
+    PageConvert: () => import('./page-convert.vue')
   },
   props: {
     dense: {
@@ -274,6 +279,7 @@ export default {
       searchAdvMenuShown: false,
       newPageModal: false,
       movePageModal: false,
+      convertPageModal: false,
       deletePageModal: false,
       locales: siteLangs,
       isDevMode: false,
@@ -354,6 +360,9 @@ export default {
     this.$root.$on('pageMove', () => {
       this.pageMove()
     })
+    this.$root.$on('pageConvert', () => {
+      this.pageConvert()
+    })
     this.$root.$on('pageDuplicate', () => {
       this.pageDuplicate()
     })
@@ -416,6 +425,9 @@ export default {
     pageDuplicateHandle ({ locale, path }) {
       window.location.assign(`/e/${locale}/${path}?from=${this.$store.get('page/id')}`)
     },
+    pageConvert () {
+      this.convertPageModal = true
+    },
     pageMove () {
       this.movePageModal = true
     },

client/components/common/page-convert.vue

+<template lang='pug'>
+  v-dialog(
+    v-model='isShown'
+    max-width='550'
+    persistent
+    overlay-color='blue-grey darken-4'
+    overlay-opacity='.7'
+    )
+    v-card
+      .dialog-header.is-short.is-dark
+        v-icon.mr-2(color='white') mdi-lightning-bolt
+        span {{$t('common:page.convert')}}
+      v-card-text.pt-5
+        i18next.body-2(path='common:page.convertTitle', tag='div')
+          span.blue-grey--text.text--darken-2(place='title') {{pageTitle}}
+        v-select.mt-5(
+          :items=`[
+            { value: 'markdown', text: 'Markdown' },
+            { value: 'ckeditor', text: 'Visual Editor' },
+            { value: 'code', text: 'Raw HTML' }
+          ]`
+          outlined
+          dense
+          hide-details
+          v-model='newEditor'
+        )
+        .caption.mt-5 {{$t('common:page.convertSubtitle')}}
+      v-card-chin
+        v-spacer
+        v-btn(text, @click='discard', :disabled='loading') {{$t('common:actions.cancel')}}
+        v-btn.px-4(color='grey darken-3', @click='convertPage', :loading='loading').white--text {{$t('common:actions.convert')}}
+</template>
+
+<script>
+import _ from 'lodash'
+import { get } from 'vuex-pathify'
+import gql from 'graphql-tag'
+
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      newEditor: ''
+    }
+  },
+  computed: {
+    isShown: {
+      get() { return this.value },
+      set(val) { this.$emit('input', val) }
+    },
+    pageTitle: get('page/title'),
+    pagePath: get('page/path'),
+    pageLocale: get('page/locale'),
+    pageId: get('page/id'),
+    pageEditor: get('page/editor')
+  },
+  mounted () {
+    this.newEditor = this.pageEditor
+  },
+  methods: {
+    discard() {
+      this.isShown = false
+    },
+    async convertPage() {
+      this.loading = true
+      this.$store.commit(`loadingStart`, 'page-convert')
+      this.$nextTick(async () => {
+        try {
+          const resp = await this.$apollo.mutate({
+            mutation: gql`
+              mutation (
+                $id: Int!
+                $editor: String!
+                ) {
+                  pages {
+                    convert(
+                      id: $id
+                      editor: $editor
+                    ) {
+                      responseResult {
+                        succeeded
+                        errorCode
+                        slug
+                        message
+                      }
+                    }
+                  }
+              }
+            `,
+            variables: {
+              id: this.pageId,
+              editor: this.newEditor
+            }
+          })
+          if (_.get(resp, 'data.pages.convert.responseResult.succeeded', false)) {
+            this.isShown = false
+            _.delay(() => {
+              window.location.assign(`/e/${this.pageLocale}/${this.pagePath}`)
+            }, 400)
+          } else {
+            throw new Error(_.get(resp, 'data.pages.convert.responseResult.message', this.$t('common:error.unexpected')))
+          }
+        } catch (err) {
+          this.$store.commit('pushGraphError', err)
+        }
+        this.$store.commit(`loadingStop`, 'page-convert')
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+</style>

client/store/page.js

@@ -14,6 +14,7 @@ const state = {
   tags: [],
   title: '',
   updatedAt: '',
+  editor: '',
   mode: '',
   scriptJs: '',
   scriptCss: '',

client/themes/default/components/page.vue

@@ -242,6 +242,18 @@
                         color='white'
                         light
                         v-on='on'
+                        @click='pageConvert'
+                        )
+                        v-icon(size='20') mdi-lightning-bolt
+                    span {{$t('common:header.convert')}}
+                  v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasWritePagesPermission')
+                    template(v-slot:activator='{ on }')
+                      v-btn(
+                        fab
+                        small
+                        color='white'
+                        light
+                        v-on='on'
                         @click='pageDuplicate'
                         )
                         v-icon(size='20') mdi-content-duplicate
@@ -314,7 +326,7 @@ import _ from 'lodash'
 import ClipboardJS from 'clipboard'
 import Vue from 'vue'
 
-Vue.component('tabset', Tabset)
+Vue.component('Tabset', Tabset)
 
 Prism.plugins.autoloader.languages_path = '/_assets/js/prism/'
 Prism.plugins.NormalizeWhitespace.setDefaults({
@@ -397,6 +409,10 @@ export default {
       type: Number,
       default: 0
     },
+    editor: {
+      type: String,
+      default: ''
+    },
     isPublished: {
       type: Boolean,
       default: false
@@ -516,6 +532,7 @@ export default {
     this.$store.set('page/path', this.path)
     this.$store.set('page/tags', this.tags)
     this.$store.set('page/title', this.title)
+    this.$store.set('page/editor', this.editor)
     this.$store.set('page/updatedAt', this.updatedAt)
     if (this.effectivePermissions) {
       this.$store.set('page/effectivePermissions', JSON.parse(Buffer.from(this.effectivePermissions, 'base64').toString()))
@@ -597,6 +614,9 @@ export default {
     pageSource () {
       this.$root.$emit('pageSource')
     },
+    pageConvert () {
+      this.$root.$emit('pageConvert')
+    },
     pageDuplicate () {
       this.$root.$emit('pageDuplicate')
     },

package.json

@@ -39,6 +39,7 @@
     "@aoberoi/passport-slack": "1.0.5",
     "@azure/storage-blob": "12.2.1",
     "@exlinc/keycloak-passport": "1.0.2",
+    "@joplin/turndown-plugin-gfm": "1.0.27",
     "@root/csr": "0.8.1",
     "@root/keypairs": "0.10.1",
     "@root/pem": "1.0.4",
@@ -176,6 +177,7 @@
     "striptags": "3.1.1",
     "subscriptions-transport-ws": "0.9.18",
     "tar-fs": "2.1.0",
+    "turndown": "7.0.0",
     "twemoji": "13.0.1",
     "uslug": "1.0.4",
     "uuid": "8.3.1",

server/graph/resolvers/page.js

@@ -399,6 +399,22 @@ module.exports = {
       }
     },
     /**
+     * CONVERT PAGE
+     */
+    async convert(obj, args, context) {
+      try {
+        await WIKI.models.pages.convertPage({
+          ...args,
+          user: context.req.user
+        })
+        return {
+          responseResult: graphHelper.generateSuccess('Page has been converted.')
+        }
+      } catch (err) {
+        return graphHelper.generateError(err)
+      }
+    },
+    /**
      * MOVE PAGE
      */
     async move(obj, args, context) {

server/graph/schemas/page.graphql

@@ -112,6 +112,11 @@ type PageMutation {
     title: String
   ): PageResponse @auth(requires: ["write:pages", "manage:pages", "manage:system"])
 
+  convert(
+    id: Int!
+    editor: String!
+  ): DefaultResponse @auth(requires: ["write:pages", "manage:pages", "manage:system"])
+
   move(
     id: Int!
     destinationPath: String!

server/models/pages.js

@@ -9,6 +9,9 @@ const striptags = require('striptags')
 const emojiRegex = require('emoji-regex')
 const he = require('he')
 const CleanCSS = require('clean-css')
+const TurndownService = require('turndown')
+const turndownPluginGfm = require('@joplin/turndown-plugin-gfm').gfm
+const cheerio = require('cheerio')
 
 /* global WIKI */
 
@@ -140,6 +143,7 @@ module.exports = class Page extends Model {
       creatorId: 'uint',
       creatorName: 'string',
       description: 'string',
+      editorKey: 'string',
       isPrivate: 'boolean',
       isPublished: 'boolean',
       publishEndDate: 'string',
@@ -472,6 +476,134 @@ module.exports = class Page extends Model {
   }
 
   /**
+   * Convert an Existing Page
+   *
+   * @param {Object} opts Page Properties
+   * @returns {Promise} Promise of the Page Model Instance
+   */
+  static async convertPage(opts) {
+    // -> Fetch original page
+    const ogPage = await WIKI.models.pages.query().findById(opts.id)
+    if (!ogPage) {
+      throw new Error('Invalid Page Id')
+    }
+
+    // -> Check for page access
+    if (!WIKI.auth.checkAccess(opts.user, ['write:pages'], {
+      locale: ogPage.localeCode,
+      path: ogPage.path
+    })) {
+      throw new WIKI.Error.PageUpdateForbidden()
+    }
+
+    // -> Check content type
+    const sourceContentType = ogPage.contentType
+    const targetContentType = _.get(_.find(WIKI.data.editors, ['key', opts.editor]), `contentType`, 'text')
+    const shouldConvert = sourceContentType !== targetContentType
+    let convertedContent = null
+
+    // -> Convert content
+    if (shouldConvert) {
+      // -> Markdown => HTML
+      if (sourceContentType === 'markdown' && targetContentType === 'html') {
+        if (!ogPage.render) {
+          throw new Error('Aborted conversion because rendered page content is empty!')
+        }
+        convertedContent = ogPage.render
+
+        const $ = cheerio.load(convertedContent, {
+          decodeEntities: true
+        })
+
+        if ($.root().children().length > 0) {
+          $('.toc-anchor').remove()
+
+          convertedContent = $.html('body').replace('<body>', '').replace('</body>', '').replace(/&#x([0-9a-f]{1,6});/ig, (entity, code) => {
+            code = parseInt(code, 16)
+
+            // Don't unescape ASCII characters, assuming they're encoded for a good reason
+            if (code < 0x80) return entity
+
+            return String.fromCodePoint(code)
+          })
+        }
+
+      // -> HTML => Markdown
+      } else if (sourceContentType === 'html' && targetContentType === 'markdown') {
+        const td = new TurndownService({
+          bulletListMarker: '-',
+          codeBlockStyle: 'fenced',
+          emDelimiter: '*',
+          fence: '```',
+          headingStyle: 'atx',
+          hr: '---',
+          linkStyle: 'inlined',
+          preformattedCode: true,
+          strongDelimiter: '**'
+        })
+
+        td.use(turndownPluginGfm)
+
+        td.keep(['kbd'])
+
+        td.addRule('subscript', {
+          filter: ['sub'],
+          replacement: c => `~${c}~`
+        })
+
+        td.addRule('superscript', {
+          filter: ['sup'],
+          replacement: c => `^${c}^`
+        })
+
+        td.addRule('underline', {
+          filter: ['u'],
+          replacement: c => `_${c}_`
+        })
+
+        td.addRule('removeTocAnchors', {
+          filter: (n, o) => {
+            return n.nodeName === 'A' && n.classList.contains('toc-anchor')
+          },
+          replacement: c => ''
+        })
+
+        convertedContent = td.turndown(ogPage.content)
+      // -> Unsupported
+      } else {
+        throw new Error('Unsupported source / destination content types combination.')
+      }
+    }
+
+    // -> Create version snapshot
+    if (shouldConvert) {
+      await WIKI.models.pageHistory.addVersion({
+        ...ogPage,
+        isPublished: ogPage.isPublished === true || ogPage.isPublished === 1,
+        action: 'updated',
+        versionDate: ogPage.updatedAt
+      })
+    }
+
+    // -> Update page
+    await WIKI.models.pages.query().patch({
+      contentType: targetContentType,
+      editorKey: opts.editor,
+      ...(convertedContent ? { content: convertedContent } : {})
+    }).where('id', ogPage.id)
+    const page = await WIKI.models.pages.getPageFromDb(ogPage.id)
+
+    await WIKI.models.pages.deletePageFromCache(page.hash)
+    WIKI.events.outbound.emit('deletePageFromCache', page.hash)
+
+    // -> Update on Storage
+    await WIKI.models.storage.pageEvent({
+      event: 'updated',
+      page
+    })
+  }
+
+  /**
    * Move a Page
    *
    * @param {Object} opts Page Properties
@@ -872,6 +1004,7 @@ module.exports = class Page extends Model {
       creatorId: page.creatorId,
       creatorName: page.creatorName,
       description: page.description,
+      editorKey: page.editorKey,
       extra: {
         css: _.get(page, 'extra.css', ''),
         js: _.get(page, 'extra.js', '')

server/views/page.pug

@@ -20,6 +20,7 @@ block body
       updated-at=page.updatedAt
       author-name=page.authorName
       :author-id=page.authorId
+      editor=page.editorKey
       :is-published=page.isPublished.toString()
       toc=Buffer.from(page.toc).toString('base64')
       :page-id=page.id