feat: editor page props UI improvements + codemirror fix

client/components/admin/admin-dashboard.vue

@@ -56,7 +56,7 @@
         v-card.radius-7.animated.fadeInUp.wait-p2s
           v-toolbar(:color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-5`', dense, flat)
             v-spacer
-            .overline Recent Pages
+            .overline {{$t('admin:dashboard.recentPages')}}
             v-spacer
           v-data-table.pb-2(
             :items='recentPages'
@@ -72,27 +72,28 @@
                 td.admin-pages-path
                   v-chip(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`') {{ props.item.locale }}
                   span.ml-2.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') / {{ props.item.path }}
-                td.text-right(width='250') {{ props.item.updatedAt | moment('calendar') }}
+                td.text-right.caption(width='250') {{ props.item.updatedAt | moment('calendar') }}
       v-flex(xs12, xl6)
         v-card.radius-7.animated.fadeInUp.wait-p4s
           v-toolbar(:color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-5`', dense, flat)
             v-spacer
-            .overline Most Popular Pages
+            .overline {{$t('admin:dashboard.mostPopularPages')}}
             v-spacer
           v-data-table.pb-2(
             :items='popularPages'
+            :headers='headers'
+            :loading='popularPagesLoading'
             hide-default-footer
             hide-default-header
             )
-            template(slot='items' slot-scope='props')
+            template(slot='item', slot-scope='props')
-              td(width='20', style='padding-right: 0;'): v-icon insert_drive_file
+              tr.is-clickable(:active='props.selected', @click='$router.push(`/pages/` + props.item.id)')
-              td
+                td
-                .body-2.primary--text {{ props.item.title }}
+                  .body-2: strong {{ props.item.title }}
-                .caption.grey--text.text--darken-2 {{ props.item.description }}
+                td.admin-pages-path
-              td.caption /{{ props.item.path }}
+                  v-chip(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`') {{ props.item.locale }}
-              td.grey--text.text--darken-2(width='250')
+                  span.ml-2.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') / {{ props.item.path }}
-                .caption: strong Updated {{ props.item.updatedAt | moment('from') }}
+                td.text-right.caption(width='250') {{ props.item.updatedAt | moment('calendar') }}
-                .caption Created {{ props.item.createdAt | moment('calendar') }}
 
       v-flex(xs12)
         v-card.dashboard-contribute.animated.fadeInUp.wait-p4s
@@ -123,6 +124,7 @@ export default {
       recentPages: [],
       recentPagesLoading: false,
       popularPages: [],
+      popularPagesLoading: false,
       headers: [
         { text: 'ID', value: 'id', width: 80 },
         { text: 'Title', value: 'title' },

client/components/editor/editor-code.vue

@@ -13,7 +13,7 @@ import _ from 'lodash'
 // ========================================
 
 // Code Mirror
-import { codemirror } from 'vue-codemirror'
+import CodeMirror from 'codemirror'
 import 'codemirror/lib/codemirror.css'
 
 // Language
@@ -41,9 +41,6 @@ const CtrlKey = /Mac/.test(navigator.platform) ? 'Cmd' : 'Ctrl'
 // ========================================
 
 export default {
-  components: {
-    codemirror
-  },
   data() {
     return {
       code: '<h1>Title</h1>\n\n<p>Some text here</p>',

client/components/editor/editor-markdown.vue

@@ -160,7 +160,7 @@
                 v-icon(:color='helpShown ? `teal` : ``') mdi-help-circle
             span {{$t('editor:markup.markdownFormattingHelp')}}
       .editor-markdown-editor
-        codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
+        textarea(ref='cm')
       transition(name='editor-markdown-preview')
         .editor-markdown-preview(v-if='previewShown')
           .editor-markdown-preview-content.contents(ref='editorPreviewContainer')
@@ -188,7 +188,7 @@ import markdownHelp from './markdown/help.vue'
 // ========================================
 
 // Code Mirror
-import { codemirror } from 'vue-codemirror'
+import CodeMirror from 'codemirror'
 import 'codemirror/lib/codemirror.css'
 
 // Language
@@ -261,6 +261,7 @@ function injectLineNumbers (tokens, idx, options, env, slf) {
 }
 md.renderer.rules.paragraph_open = injectLineNumbers
 md.renderer.rules.heading_open = injectLineNumbers
+md.renderer.rules.blockquote_open = injectLineNumbers
 
 // ========================================
 // Vue Component
@@ -268,7 +269,6 @@ md.renderer.rules.heading_open = injectLineNumbers
 
 export default {
   components: {
-    codemirror,
     markdownHelp
   },
   props: {
@@ -280,22 +280,7 @@ export default {
   data() {
     return {
       fabInsertMenu: false,
-      code: this.$store.get('editor/content'),
+      cm: null,
-      cmOptions: {
-        tabSize: 2,
-        mode: 'text/markdown',
-        theme: 'wikijs-dark',
-        lineNumbers: true,
-        lineWrapping: true,
-        line: true,
-        styleActiveLine: true,
-        highlightSelectionMatches: {
-          annotateScrollbar: true
-        },
-        viewportMargin: 50,
-        inputStyle: 'contenteditable',
-        allowDropFileTypes: ['image/jpg', 'image/png', 'image/svg', 'image/jpeg', 'image/gif']
-      },
       cursorPos: { ch: 0, line: 1 },
       previewShown: true,
       previewHTML: '',
@@ -303,9 +288,6 @@ export default {
     }
   },
   computed: {
-    cm() {
-      return this.$refs.cm.codemirror
-    },
     isMobile() {
       return this.$vuetify.breakpoint.smAndDown
     },
@@ -325,53 +307,6 @@ export default {
       this.activeModal = ''
       this.helpShown = false
     },
-    onCmReady(cm) {
-      const keyBindings = {
-        'F11' (cm) {
-          cm.setOption('fullScreen', !cm.getOption('fullScreen'))
-        },
-        'Esc' (cm) {
-          if (cm.getOption('fullScreen')) cm.setOption('fullScreen', false)
-        }
-      }
-      _.set(keyBindings, `${CtrlKey}-S`, cm => {
-        this.save()
-        return false
-      })
-      _.set(keyBindings, `${CtrlKey}-B`, cm => {
-        this.toggleMarkup({ start: `**` })
-        return false
-      })
-      _.set(keyBindings, `${CtrlKey}-I`, cm => {
-        this.toggleMarkup({ start: `*` })
-        return false
-      })
-      _.set(keyBindings, `${CtrlKey}-Alt-Right`, cm => {
-        let lvl = this.getHeaderLevel(cm)
-        if (lvl >= 6) { lvl = 5 }
-        this.setHeaderLine(lvl + 1)
-        return false
-      })
-      _.set(keyBindings, `${CtrlKey}-Alt-Left`, cm => {
-        let lvl = this.getHeaderLevel(cm)
-        if (lvl <= 1) { lvl = 2 }
-        this.setHeaderLine(lvl - 1)
-        return false
-      })
-
-      if (this.$vuetify.breakpoint.mdAndUp) {
-        cm.setSize(null, 'calc(100vh - 112px - 24px)')
-      } else {
-        cm.setSize(null, 'calc(100vh - 112px - 16px)')
-      }
-      cm.setOption('extraKeys', keyBindings)
-      cm.on('cursorActivity', cm => {
-        this.positionSync(cm)
-        this.scrollSync(cm)
-      })
-      cm.on('paste', this.onCmPaste)
-      this.onCmInput(this.code)
-    },
     onCmInput: _.debounce(function (newContent) {
       linesMap = []
       this.$store.set('editor/content', newContent)
@@ -497,7 +432,7 @@ export default {
       let currentLine = cm.getCursor().line
       if (currentLine < 3) {
         this.Velocity(this.$refs.editorPreview, 'stop', true)
-        this.Velocity(this.$refs.editorPreview.firstChild, 'scroll', { offset: '-50', duration: 1000, container: this.$refs.editorPreview })
+        this.Velocity(this.$refs.editorPreview.firstChild, 'scroll', { offset: '-50', duration: 1000, container: this.$refs.editorPreviewContainer })
       } else {
         let closestLine = _.findLast(linesMap, n => n <= currentLine)
         let destElm = this.$refs.editorPreview.querySelector(`[data-line='${closestLine}']`)
@@ -513,9 +448,94 @@ export default {
     },
     toggleFullscreen () {
       this.cm.setOption('fullScreen', true)
+    },
+    refresh() {
+      this.$nextTick(() => {
+        this.cm.refresh()
+      })
     }
   },
   mounted() {
+    // Initialize CodeMirror
+
+    this.cm = CodeMirror.fromTextArea(this.$refs.cm, {
+      tabSize: 2,
+      mode: 'text/markdown',
+      theme: 'wikijs-dark',
+      lineNumbers: true,
+      lineWrapping: true,
+      line: true,
+      styleActiveLine: true,
+      highlightSelectionMatches: {
+        annotateScrollbar: true
+      },
+      viewportMargin: 50,
+      inputStyle: 'contenteditable',
+      allowDropFileTypes: ['image/jpg', 'image/png', 'image/svg', 'image/jpeg', 'image/gif']
+    })
+    this.cm.setValue(this.$store.get('editor/content'))
+    this.cm.on('change', c => {
+      this.$store.set('editor/content', c.getValue())
+      this.onCmInput(this.$store.get('editor/content'))
+    })
+    if (this.$vuetify.breakpoint.mdAndUp) {
+      this.cm.setSize(null, 'calc(100vh - 112px - 24px)')
+    } else {
+      this.cm.setSize(null, 'calc(100vh - 112px - 16px)')
+    }
+
+    // Set Keybindings
+
+    const keyBindings = {
+      'F11' (c) {
+        c.setOption('fullScreen', !c.getOption('fullScreen'))
+      },
+      'Esc' (c) {
+        if (c.getOption('fullScreen')) c.setOption('fullScreen', false)
+      }
+    }
+    _.set(keyBindings, `${CtrlKey}-S`, c => {
+      this.save()
+      return false
+    })
+    _.set(keyBindings, `${CtrlKey}-B`, c => {
+      this.toggleMarkup({ start: `**` })
+      return false
+    })
+    _.set(keyBindings, `${CtrlKey}-I`, c => {
+      this.toggleMarkup({ start: `*` })
+      return false
+    })
+    _.set(keyBindings, `${CtrlKey}-Alt-Right`, c => {
+      let lvl = this.getHeaderLevel(c)
+      if (lvl >= 6) { lvl = 5 }
+      this.setHeaderLine(lvl + 1)
+      return false
+    })
+    _.set(keyBindings, `${CtrlKey}-Alt-Left`, c => {
+      let lvl = this.getHeaderLevel(c)
+      if (lvl <= 1) { lvl = 2 }
+      this.setHeaderLine(lvl - 1)
+      return false
+    })
+    this.cm.setOption('extraKeys', keyBindings)
+
+    // Handle cursor movement
+
+    this.cm.on('cursorActivity', c => {
+      this.positionSync(c)
+      this.scrollSync(c)
+    })
+
+    // Handle special paste
+
+    this.cm.on('paste', this.onCmPaste)
+
+    // Render initial preview
+
+    this.onCmInput(this.$store.get('editor/content'))
+    this.refresh()
+
     this.$root.$on('editorInsert', opts => {
       switch (opts.kind) {
         case 'IMAGE':
@@ -718,10 +738,10 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
     background: mc('blue','800');
   }
   .cm-s-wikijs-dark .CodeMirror-line::selection, .cm-s-wikijs-dark .CodeMirror-line > span::selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::selection {
-    background: mc('red', '500');
+    background: mc('amber', '500');
   }
   .cm-s-wikijs-dark .CodeMirror-line::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::-moz-selection {
-    background: mc('red', '500');
+    background: mc('amber', '500');
   }
   .cm-s-wikijs-dark .CodeMirror-gutters {
     background: darken(mc('grey','900'), 6%);

client/components/editor/editor-modal-media.vue

@@ -66,15 +66,15 @@
                     @click.right.prevent=''
                     :class='currentFileId === props.item.id ? ($vuetify.theme.dark ? `grey darken-3-d5` : `teal lighten-5`) : ``'
                     )
-                    td.text-xs-right(v-if='$vuetify.breakpoint.smAndUp') {{ props.item.id }}
+                    td.caption(v-if='$vuetify.breakpoint.smAndUp') {{ props.item.id }}
                     td
-                      .body-2(:class='currentFileId === props.item.id ? `teal--text` : ``') {{ props.item.filename }}
+                      .body-2: strong(:class='currentFileId === props.item.id ? `teal--text` : ``') {{ props.item.filename }}
                       .caption.grey--text {{ props.item.description }}
                     td.text-xs-center(v-if='$vuetify.breakpoint.lgAndUp')
-                      v-chip.ma-0(small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`')
+                      v-chip.ma-0(x-small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`')
-                        .caption {{props.item.ext.toUpperCase().substring(1)}}
+                        .overline {{props.item.ext.toUpperCase().substring(1)}}
-                    td(v-if='$vuetify.breakpoint.mdAndUp') {{ props.item.fileSize | prettyBytes }}
+                    td.caption(v-if='$vuetify.breakpoint.mdAndUp') {{ props.item.fileSize | prettyBytes }}
-                    td(v-if='$vuetify.breakpoint.mdAndUp') {{ props.item.createdAt | moment('from') }}
+                    td.caption(v-if='$vuetify.breakpoint.mdAndUp') {{ props.item.createdAt | moment('from') }}
                     td(v-if='$vuetify.breakpoint.smAndUp')
                       v-menu(offset-x, min-width='200')
                         template(v-slot:activator='{ on }')
@@ -293,12 +293,12 @@ export default {
     },
     headers() {
       return _.compact([
-        this.$vuetify.breakpoint.smAndUp && { text: this.$t('editor:assets.headerId'), value: 'id', width: 50, align: 'right' },
+        this.$vuetify.breakpoint.smAndUp && { text: this.$t('editor:assets.headerId'), value: 'id', width: 80 },
         { text: this.$t('editor:assets.headerFilename'), value: 'filename' },
-        this.$vuetify.breakpoint.lgAndUp && { text: this.$t('editor:assets.headerType'), value: 'ext', width: 50 },
+        this.$vuetify.breakpoint.lgAndUp && { text: this.$t('editor:assets.headerType'), value: 'ext', width: 90 },
         this.$vuetify.breakpoint.mdAndUp && { text: this.$t('editor:assets.headerFileSize'), value: 'fileSize', width: 110 },
         this.$vuetify.breakpoint.mdAndUp && { text: this.$t('editor:assets.headerAdded'), value: 'createdAt', width: 175 },
-        this.$vuetify.breakpoint.smAndUp && { text: this.$t('editor:assets.headerActions'), value: '', width: 40, sortable: false, align: 'right' }
+        this.$vuetify.breakpoint.smAndUp && { text: this.$t('editor:assets.headerActions'), value: '', width: 80, sortable: false, align: 'right' }
       ])
     },
     isFolderNameValid() {

client/components/editor/editor-modal-properties.vue

@@ -2,7 +2,7 @@
   v-dialog(
     v-model='isShown'
     persistent
-    width='1100'
+    width='1000'
     :fullscreen='$vuetify.breakpoint.smAndDown'
     )
     .dialog-header
@@ -17,159 +17,204 @@
         v-icon(left) mdi-check
         span {{ $t('common:actions.ok') }}
     v-card(tile)
-      v-card-text.pt-5
+      v-tabs(color='white', background-color='blue darken-1', dark, centered)
-        .overline.pb-5 {{$t('editor:props.pageInfo')}}
+        v-tab {{$t('editor:props.info')}}
-        v-text-field(
+        v-tab {{$t('editor:props.scheduling')}}
-          ref='iptTitle'
+        v-tab {{$t('editor:props.social')}}
-          outlined
+        v-tab-item
-          :label='$t(`editor:props.title`)'
+          v-card-text.pt-5
-          counter='255'
+            .overline.pb-5 {{$t('editor:props.pageInfo')}}
-          v-model='title'
+            v-text-field(
-          )
+              ref='iptTitle'
-        v-text-field(
+              outlined
-          outlined
+              :label='$t(`editor:props.title`)'
-          :label='$t(`editor:props.shortDescription`)'
+              counter='255'
-          counter='255'
+              v-model='title'
-          v-model='description'
-          persistent-hint
-          :hint='$t(`editor:props.shortDescriptionHint`)'
-          )
-      v-divider
-      v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`')
-        .overline.pb-5 {{$t('editor:props.pathCategorization')}}
-        v-container.pa-0(fluid, grid-list-lg)
-          v-layout(row, wrap)
-            v-flex(xs12, md2)
-              v-select(
-                outlined
-                :label='$t(`editor:props.locale`)'
-                suffix='/'
-                :items='namespaces'
-                v-model='locale'
-                hide-details
-                :disabled='mode !== "create"'
               )
-            v-flex(xs12, md10)
+            v-text-field(
-              v-text-field(
+              outlined
-                outlined
+              :label='$t(`editor:props.shortDescription`)'
-                :label='$t(`editor:props.path`)'
+              counter='255'
-                append-icon='mdi-folder-search'
+              v-model='description'
-                v-model='path'
+              persistent-hint
-                :hint='$t(`editor:props.pathHint`)'
+              :hint='$t(`editor:props.shortDescriptionHint`)'
-                persistent-hint
+              )
-                @click:append='showPathSelector'
+          v-divider
-                :disabled='mode !== "create"'
+          v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`')
-                )
+            .overline.pb-5 {{$t('editor:props.path')}}
-        v-combobox(
+            v-container.pa-0(fluid, grid-list-lg)
-          chips
+              v-layout(row, wrap)
-          deletable-chips
+                v-flex(xs12, md2)
-          :label='$t(`editor:props.tags`)'
+                  v-select(
-          outlined
-          multiple
-          v-model='tags'
-          single-line
-          :hint='`COMING SOON - ` + $t(`editor:props.tagsHint`)'
-          persistent-hint
-          disabled
-          )
-      v-divider
-      v-card-text.py-5.grey(:class='darkMode ? `darken-3-d5` : `lighten-4`')
-        .overline.pb-5 {{$t('editor:props.publishState')}} #[v-chip.ml-3(label, color='grey', small, outlined).white--text coming soon]
-        v-container.pa-0(fluid, grid-list-lg)
-          v-layout(row, wrap)
-            v-flex(xs12, md4)
-              v-switch(
-                :label='$t(`editor:props.publishToggle`)'
-                v-model='isPublished'
-                color='primary'
-                :hint='$t(`editor:props.publishToggleHint`)'
-                persistent-hint
-                disabled
-                )
-            v-flex(xs12, md4)
-              v-dialog(
-                ref='menuPublishStart'
-                :close-on-content-click='false'
-                v-model='isPublishStartShown'
-                :return-value.sync='publishStartDate'
-                full-width
-                width='460px'
-                :disabled='!isPublished || true'
-                )
-                template(v-slot:activator='{ on }')
-                  v-text-field(
-                    v-on='on'
-                    :label='$t(`editor:props.publishStart`)'
-                    v-model='publishStartDate'
-                    prepend-icon='mdi-calendar-check'
-                    readonly
                     outlined
-                    clearable
+                    :label='$t(`editor:props.locale`)'
-                    :hint='$t(`editor:props.publishStartHint`)'
+                    suffix='/'
+                    :items='namespaces'
+                    v-model='locale'
+                    hide-details
+                    :disabled='mode !== "create"'
+                  )
+                v-flex(xs12, md10)
+                  v-text-field(
+                    outlined
+                    :label='$t(`editor:props.path`)'
+                    append-icon='mdi-folder-search'
+                    v-model='path'
+                    :hint='$t(`editor:props.pathHint`)'
                     persistent-hint
+                    @click:append='showPathSelector'
+                    :disabled='mode !== "create"'
+                    )
+          v-divider
+          v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d5` : `lighten-4`')
+            .overline.pb-5 {{$t('editor:props.categorization')}}
+            v-combobox(
+              chips
+              deletable-chips
+              :label='$t(`editor:props.tags`)'
+              outlined
+              multiple
+              v-model='tags'
+              :hint='$t(`editor:props.tagsHint`)'
+              persistent-hint
+              clearable
+              height='130'
+              )
+        v-tab-item
+          v-card-text
+            .overline.pb-5 {{$t('editor:props.publishState')}} #[v-chip.ml-3(label, color='grey', small, outlined).white--text coming soon]
+            v-switch(
+              :label='$t(`editor:props.publishToggle`)'
+              v-model='isPublished'
+              color='primary'
+              :hint='$t(`editor:props.publishToggleHint`)'
+              persistent-hint
+              disabled
+              )
+          v-divider
+          v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`')
+            v-container.pa-0(fluid, grid-list-lg)
+              v-row
+                v-col(cols='6')
+                  v-dialog(
+                    ref='menuPublishStart'
+                    :close-on-content-click='false'
+                    v-model='isPublishStartShown'
+                    :return-value.sync='publishStartDate'
+                    full-width
+                    width='460px'
                     :disabled='!isPublished || true'
                     )
-                v-date-picker(
+                    template(v-slot:activator='{ on }')
-                  v-model='publishStartDate'
+                      v-text-field(
-                  :min='(new Date()).toISOString().substring(0, 10)'
+                        v-on='on'
-                  color='primary'
+                        :label='$t(`editor:props.publishStart`)'
-                  reactive
+                        v-model='publishStartDate'
-                  scrollable
+                        prepend-icon='mdi-calendar-check'
-                  landscape
+                        readonly
-                  )
+                        outlined
-                  v-spacer
+                        clearable
-                  v-btn(
+                        :hint='$t(`editor:props.publishStartHint`)'
-                    flat=''
+                        persistent-hint
-                    color='primary'
+                        :disabled='!isPublished || true'
-                    @click='isPublishStartShown = false'
+                        )
-                    ) {{$t('common:actions.cancel')}}
+                    v-date-picker(
-                  v-btn(
+                      v-model='publishStartDate'
-                    flat=''
+                      :min='(new Date()).toISOString().substring(0, 10)'
-                    color='primary'
+                      color='primary'
-                    @click='$refs.menuPublishStart.save(publishStartDate)'
+                      reactive
-                    ) {{$t('common:actions.ok')}}
+                      scrollable
-            v-flex(xs12, md4)
+                      landscape
-              v-dialog(
+                      )
-                ref='menuPublishEnd'
+                      v-spacer
-                :close-on-content-click='false'
+                      v-btn(
-                v-model='isPublishEndShown'
+                        flat=''
-                :return-value.sync='publishEndDate'
+                        color='primary'
-                full-width
+                        @click='isPublishStartShown = false'
-                width='460px'
+                        ) {{$t('common:actions.cancel')}}
-                :disabled='!isPublished || true'
+                      v-btn(
-                )
+                        flat=''
-                template(v-slot:activator='{ on }')
+                        color='primary'
-                  v-text-field(
+                        @click='$refs.menuPublishStart.save(publishStartDate)'
-                    v-on='on'
+                        ) {{$t('common:actions.ok')}}
-                    :label='$t(`editor:props.publishEnd`)'
+                v-col(cols='6')
-                    v-model='publishEndDate'
+                  v-dialog(
-                    prepend-icon='mdi-calendar-remove'
+                    ref='menuPublishEnd'
-                    readonly
+                    :close-on-content-click='false'
-                    outlined
+                    v-model='isPublishEndShown'
-                    clearable
+                    :return-value.sync='publishEndDate'
-                    :hint='$t(`editor:props.publishEndHint`)'
+                    full-width
-                    persistent-hint
+                    width='460px'
                     :disabled='!isPublished || true'
                     )
-                v-date-picker(
+                    template(v-slot:activator='{ on }')
-                  v-model='publishEndDate'
+                      v-text-field(
-                  :min='(new Date()).toISOString().substring(0, 10)'
+                        v-on='on'
-                  color='primary'
+                        :label='$t(`editor:props.publishEnd`)'
-                  reactive
+                        v-model='publishEndDate'
-                  scrollable
+                        prepend-icon='mdi-calendar-remove'
-                  landscape
+                        readonly
-                  )
+                        outlined
-                  v-spacer
+                        clearable
-                  v-btn(
+                        :hint='$t(`editor:props.publishEndHint`)'
-                    flat=''
+                        persistent-hint
-                    color='primary'
+                        :disabled='!isPublished || true'
-                    @click='isPublishEndShown = false'
+                        )
-                    ) {{$t('common:actions.cancel')}}
+                    v-date-picker(
-                  v-btn(
+                      v-model='publishEndDate'
-                    flat=''
+                      :min='(new Date()).toISOString().substring(0, 10)'
-                    color='primary'
+                      color='primary'
-                    @click='$refs.menuPublishEnd.save(publishEndDate)'
+                      reactive
-                    ) {{$t('common:actions.ok')}}
+                      scrollable
+                      landscape
+                      )
+                      v-spacer
+                      v-btn(
+                        flat=''
+                        color='primary'
+                        @click='isPublishEndShown = false'
+                        ) {{$t('common:actions.cancel')}}
+                      v-btn(
+                        flat=''
+                        color='primary'
+                        @click='$refs.menuPublishEnd.save(publishEndDate)'
+                        ) {{$t('common:actions.ok')}}
+
+        v-tab-item
+          v-card-text
+            .overline.pb-5 {{$t('editor:props.socialFeatures')}} #[v-chip.ml-3(label, color='grey', small, outlined).white--text coming soon]
+            v-switch(
+              :label='$t(`editor:props.allowComments`)'
+              v-model='isPublished'
+              color='primary'
+              :hint='$t(`editor:props.allowCommentsHint`)'
+              persistent-hint
+              disabled
+              )
+            v-switch(
+              :label='$t(`editor:props.allowRatings`)'
+              v-model='isPublished'
+              color='primary'
+              :hint='$t(`editor:props.allowRatingsHint`)'
+              persistent-hint
+              disabled
+              )
+            v-switch(
+              :label='$t(`editor:props.displayAuthor`)'
+              v-model='isPublished'
+              color='primary'
+              :hint='$t(`editor:props.displayAuthorHint`)'
+              persistent-hint
+              disabled
+              )
+            v-switch(
+              :label='$t(`editor:props.displaySharingBar`)'
+              v-model='isPublished'
+              color='primary'
+              :hint='$t(`editor:props.displaySharingBarHint`)'
+              persistent-hint
+              disabled
+              )
 
     page-selector(mode='create', v-model='pageSelectorShown', :path='path', :locale='locale', :open-handler='setPath')
     v-tour(name='editorPropertiesTour', :steps='tourSteps')

package.json

@@ -206,6 +206,7 @@
     "cache-loader": "4.1.0",
     "chart.js": "2.8.0",
     "clean-webpack-plugin": "3.0.0",
+    "codemirror": "5.48.4",
     "copy-webpack-plugin": "5.0.4",
     "core-js": "3.2.1",
     "css-loader": "3.2.0",
@@ -274,7 +275,6 @@
     "vue-apollo": "3.0.0-rc.2",
     "vue-chartjs": "3.4.2",
     "vue-clipboards": "1.3.0",
-    "vue-codemirror": "4.0.6",
     "vue-filepond": "5.1.3",
     "vue-hot-reload-api": "2.3.3",
     "vue-loader": "15.7.1",

yarn.lock

@@ -4250,10 +4250,10 @@ codemirror-graphql@^0.9.0:
     graphql-language-service-interface "^2.1.0"
     graphql-language-service-parser "^1.3.0"
 
-codemirror@^5.41.0:
+codemirror@5.48.4:
-  version "5.43.0"
+  version "5.48.4"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.43.0.tgz#2454b5e0f7005dc9945ab7b0d9594ccf233da040"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.48.4.tgz#4210fbe92be79a88f0eea348fab3ae78da85ce47"
-  integrity sha512-mljwQWUaWIf85I7QwTBryF2ASaIvmYAL4s5UCanCJFfKeXOKhrqdHWdHiZWAMNT+hjLTCnVx2S/SYTORIgxsgA==
+  integrity sha512-pUhZXDQ6qXSpWdwlgAwHEkd4imA0kf83hINmUEzJpmG80T/XLtDDEzZo8f6PQLuRCcUQhmzqqIo3ZPTRaWByRA==
 
 codemirror@^5.47.0:
   version "5.48.0"
@@ -5283,11 +5283,6 @@ dicer@0.3.0:
   dependencies:
     streamsearch "0.1.2"
 
-diff-match-patch@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.4.tgz#6ac4b55237463761c4daf0dc603eb869124744b1"
-  integrity sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg==
-
 diff-sequences@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
@@ -15030,14 +15025,6 @@ vue-clipboards@1.3.0:
   dependencies:
     clipboard "^1.7.1"
 
-vue-codemirror@4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/vue-codemirror/-/vue-codemirror-4.0.6.tgz#b786bb80d8d762a93aab8e46f79a81006f0437c4"
-  integrity sha512-ilU7Uf0mqBNSSV3KT7FNEeRIxH4s1fmpG4TfHlzvXn0QiQAbkXS9lLfwuZpaBVEnpP5CSE62iGJjoliTuA8poQ==
-  dependencies:
-    codemirror "^5.41.0"
-    diff-match-patch "^1.0.0"
-
 vue-eslint-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz#00f4e4da94ec974b821a26ff0ed0f7a78402b8a1"