From 20f2fd29feb0c12a08fda5638f1a8881e5893387 Mon Sep 17 00:00:00 2001
From: Nicolas Giard <github@ngpixel.com>
Date: Sun, 16 Sep 2018 11:59:22 -0400
Subject: [PATCH] feat: add editor selection + code editor + grapejs POC

---
 client/app.js                                 |   6 +-
 client/components/editor.vue                  |  52 +-
 client/components/editor/editor-code.vue      | 251 +--------
 client/components/editor/editor-markdown.vue  | 497 ++++++++++++++++++
 client/components/editor/editor-wysiwyg.vue   |  62 +++
 dev/webpack/webpack.dev.js                    |  16 +-
 package.json                                  |   2 +
 server/modules/editor/markdown/definition.yml |   2 +-
 server/modules/editor/wysiwyg/definition.yml  |   6 +
 yarn.lock                                     | Bin 450618 -> 459240 bytes
 10 files changed, 639 insertions(+), 255 deletions(-)
 create mode 100644 client/components/editor/editor-markdown.vue
 create mode 100644 client/components/editor/editor-wysiwyg.vue
 create mode 100644 server/modules/editor/wysiwyg/definition.yml

diff --git a/client/app.js b/client/app.js
index fe6edf32..af359669 100644
--- a/client/app.js
+++ b/client/app.js
@@ -156,9 +156,9 @@ let bootstrap = () => {
   // Load Icons
   // ====================================
 
-  import(/* webpackChunkName: "icons" */ './svg/icons.svg').then(icons => {
-    document.body.insertAdjacentHTML('beforeend', icons.default)
-  })
+  // import(/* webpackChunkName: "icons" */ './svg/icons.svg').then(icons => {
+  //   document.body.insertAdjacentHTML('beforeend', icons.default)
+  // })
 }
 
 window.boot.onDOMReady(bootstrap)
diff --git a/client/components/editor.vue b/client/components/editor.vue
index b41a321c..8dd24532 100644
--- a/client/components/editor.vue
+++ b/client/components/editor.vue
@@ -26,7 +26,7 @@
           v-icon(color='blue', :left='$vuetify.breakpoint.lgAndUp') sort_by_alpha
           span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('editor:page') }}
     v-content
-      editor-code
+      component(:is='currentEditor')
       component(:is='currentModal')
       v-dialog(v-model='dialogProgress', persistent, max-width='350')
         v-card(color='blue darken-3', dark)
@@ -38,6 +38,39 @@
               )
             .subheading {{ $t('editor:save.processing') }}
             .caption.blue--text.text--lighten-3 {{ $t('editor:save.pleaseWait') }}
+      v-dialog(v-model='dialogEditorSelector', persistent, max-width='550')
+        v-card(color='blue darken-3', dark)
+          v-card-text.text-xs-center.py-4
+            .subheading Which editor do you want to use?
+            v-container(grid-list-lg, fluid)
+              v-layout(row, wrap, justify-center)
+                v-flex(xs4)
+                  v-card(
+                    hover
+                    light
+                    ripple
+                    )
+                    v-card-text.text-xs-center(@click='selectEditor("code")')
+                      v-icon(large, color='primary') code
+                      .body-2.mt-2 Code
+                v-flex(xs4)
+                  v-card(
+                    hover
+                    light
+                    ripple
+                    )
+                    v-card-text.text-xs-center(@click='selectEditor("markdown")')
+                      v-icon(large, color='primary') list_alt
+                      .body-2.mt-2 Markdown
+                v-flex(xs4)
+                  v-card.grey(
+                    hover
+                    light
+                    ripple
+                    )
+                    v-card-text.text-xs-center(@click='selectEditor("wysiwyg")')
+                      v-icon(large, color='grey darken-1') web
+                      .body-2.mt-2.grey--text.text--darken-2 Visual Builder
 
     v-snackbar(
       :color='notification.style'
@@ -69,12 +102,16 @@ export default {
   components: {
     AtomSpinner,
     editorCode: () => import(/* webpackChunkName: "editor-code" */ './editor/editor-code.vue'),
+    editorMarkdown: () => import(/* webpackChunkName: "editor-markdown" */ './editor/editor-markdown.vue'),
+    editorWysiwyg: () => import(/* webpackChunkName: "editor-wysiwyg" */ './editor/editor-wysiwyg.vue'),
     editorModalProperties: () => import(/* webpackChunkName: "editor" */ './editor/editor-modal-properties.vue')
   },
   data() {
     return {
       currentModal: '',
-      dialogProgress: false
+      currentEditor: '',
+      dialogProgress: false,
+      dialogEditorSelector: false
     }
   },
   computed: {
@@ -85,11 +122,20 @@ export default {
   mounted() {
     if (this.mode === 'create') {
       _.delay(() => {
-        this.openModal('properties')
+        this.dialogEditorSelector = true
       }, 500)
     }
   },
   methods: {
+    selectEditor(name) {
+      this.currentEditor = `editor${_.startCase(name)}`
+      this.dialogEditorSelector = false
+      if (this.mode === 'create') {
+        _.delay(() => {
+          this.openModal('properties')
+        }, 500)
+      }
+    },
     openModal(name) {
       this.currentModal = `editorModal${_.startCase(name)}`
     },
diff --git a/client/components/editor/editor-code.vue b/client/components/editor/editor-code.vue
index 68d9241e..2da081b5 100644
--- a/client/components/editor/editor-code.vue
+++ b/client/components/editor/editor-code.vue
@@ -1,74 +1,8 @@
 <template lang='pug'>
   .editor-code
-    v-toolbar.editor-code-toolbar(dense, color='primary', dark)
-      v-tooltip(top)
-        v-btn(icon, slot='activator').mx-0
-          v-icon format_bold
-        span Bold
-      v-tooltip(top)
-        v-btn(icon, slot='activator').mx-0
-          v-icon format_italic
-        span Italic
-      v-tooltip(top)
-        v-btn(icon, slot='activator').mx-0
-          v-icon format_strikethrough
-        span Strikethrough
-      v-menu(offset-y, open-on-hover)
-        v-btn(icon, slot='activator').mx-0
-          v-icon font_download
-        v-list
-          v-list-tile(v-for='(n, idx) in 6', @click='', :key='idx')
-            v-list-tile-action
-              v-icon font_download
-            v-list-tile-title Heading {{n}}
-      v-tooltip(top)
-        v-btn(icon, slot='activator').mx-0
-          v-icon format_quote
-        span Blockquote
-      v-tooltip(top)
-        v-btn(icon, slot='activator').mx-0
-          v-icon format_list_bulleted
-        span Unordered List
-      v-tooltip(top)
-        v-btn(icon, slot='activator').mx-0
-          v-icon format_list_numbered
-        span Ordered List
-      v-tooltip(top)
-        v-btn(icon, slot='activator').mx-0
-          v-icon insert_link
-        span Link
-      v-tooltip(top)
-        v-btn(icon, slot='activator').mx-0
-          v-icon space_bar
-        span Inline Code
-      v-tooltip(top)
-        v-btn(icon, slot='activator').mx-0
-          v-icon code
-        span Code Block
-      v-tooltip(top)
-        v-btn(icon, slot='activator').mx-0
-          v-icon remove
-        span Horizontal Bar
-
     .editor-code-main
       .editor-code-editor
-        .editor-code-editor-title(v-if='previewShown', @click='previewShown = false') Editor
-        .editor-code-editor-title(v-else='previewShown', @click='previewShown = true'): v-icon(dark) drag_indicator
         codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
-      transition(name='editor-code-preview')
-        .editor-code-preview(v-if='previewShown')
-          .editor-code-preview-title(@click='previewShown = false') Preview
-          .editor-code-preview-content.markdown-content(ref='editorPreview', v-html='previewHTML')
-
-      v-speed-dial(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', fixed, left, bottom)
-        v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator')
-          v-icon add_circle
-          v-icon close
-        v-btn(color='teal', fab, dark): v-icon image
-        v-btn(color='pink', fab, dark): v-icon insert_drive_file
-        v-btn(color='red', fab, dark): v-icon play_circle_outline
-        v-btn(color='purple', fab, dark): v-icon multiline_chart
-        v-btn(color='indigo', fab, dark): v-icon functions
 </template>
 
 <script>
@@ -95,20 +29,6 @@ import 'codemirror/addon/search/matchesonscrollbar.js'
 import 'codemirror/addon/search/searchcursor.js'
 import 'codemirror/addon/search/match-highlighter.js'
 
-// Markdown-it
-import MarkdownIt from 'markdown-it'
-import mdEmoji from 'markdown-it-emoji'
-import mdTaskLists from 'markdown-it-task-lists'
-import mdExpandTabs from 'markdown-it-expand-tabs'
-import mdAbbr from 'markdown-it-abbr'
-import mdSup from 'markdown-it-sup'
-import mdSub from 'markdown-it-sub'
-import mdMark from 'markdown-it-mark'
-import mdImsize from 'markdown-it-imsize'
-
-// Prism (Syntax Highlighting)
-import Prism from '@/libs/prism/prism.js'
-
 // ========================================
 // INIT
 // ========================================
@@ -116,44 +36,6 @@ import Prism from '@/libs/prism/prism.js'
 // Platform detection
 const CtrlKey = /Mac/.test(navigator.platform) ? 'Cmd' : 'Ctrl'
 
-// Markdown Instance
-const md = new MarkdownIt({
-  html: true,
-  breaks: true,
-  linkify: true,
-  typography: true,
-  highlight(str, lang) {
-    return `<pre class="line-numbers"><code class="language-${lang}">${str}</code></pre>`
-  }
-})
-  .use(mdEmoji)
-  .use(mdTaskLists)
-  .use(mdExpandTabs)
-  .use(mdAbbr)
-  .use(mdSup)
-  .use(mdSub)
-  .use(mdMark)
-  .use(mdImsize)
-
-// ========================================
-// HELPER FUNCTIONS
-// ========================================
-
-// Inject line numbers for preview scroll sync
-let linesMap = []
-function injectLineNumbers (tokens, idx, options, env, slf) {
-  let line
-  if (tokens[idx].map && tokens[idx].level === 0) {
-    line = tokens[idx].map[0]
-    tokens[idx].attrJoin('class', 'line')
-    tokens[idx].attrSet('data-line', String(line))
-    linesMap.push(line)
-  }
-  return slf.renderToken(tokens, idx, options, env, slf)
-}
-md.renderer.rules.paragraph_open = injectLineNumbers
-md.renderer.rules.heading_open = injectLineNumbers
-
 // ========================================
 // Vue Component
 // ========================================
@@ -164,11 +46,10 @@ export default {
   },
   data() {
     return {
-      fabInsertMenu: false,
-      code: '# Header 1\n\nSample **Text**\nhttp://wiki.js.org\n:rocket: :) :( :| :P\n\n## Header 2\nSample Text\n\n```javascript\nvar test = require("test");\n\n// some comment\nconst foo = bar(\'param\') + 1.234;\n```\n\n### Header 3\nLorem *ipsum* ~~text~~',
+      code: '<h1>Title</h1>\n\n<p>Some text here</p>',
       cmOptions: {
         tabSize: 2,
-        mode: 'text/markdown',
+        mode: 'text/html',
         theme: 'wikijs-dark',
         lineNumbers: true,
         lineWrapping: true,
@@ -178,9 +59,7 @@ export default {
           annotateScrollbar: true
         },
         viewportMargin: 50
-      },
-      previewShown: true,
-      previewHTML: ''
+      }
     }
   },
   computed: {
@@ -206,55 +85,13 @@ export default {
         self.$parent.save()
       })
 
-      cm.setSize(null, 'calc(100vh - 100px)')
+      cm.setSize(null, 'calc(100vh - 64px)')
       cm.setOption('extraKeys', keyBindings)
-      cm.on('cursorActivity', cm => {
-        this.toolbarSync(cm)
-        this.scrollSync(cm)
-      })
       this.onCmInput(this.code)
     },
     onCmInput: _.debounce(function (newContent) {
-      linesMap = []
       this.$store.set('editor/content', newContent)
-      this.previewHTML = md.render(newContent)
-      this.$nextTick(() => {
-        Prism.highlightAllUnder(this.$refs.editorPreview)
-        this.scrollSync(this.cm)
-      })
-    }, 500),
-    /**
-     * Update toolbar state
-     */
-    toolbarSync(cm) {
-      const pos = cm.getCursor('start')
-      const token = cm.getTokenAt(pos)
-
-      if (!token.type) { return }
-
-      console.info(token)
-    },
-    /**
-     * Update scroll sync
-     */
-    scrollSync: _.debounce(function (cm) {
-      if (!this.previewShown || cm.somethingSelected()) { return }
-      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 })
-      } else {
-        let closestLine = _.findLast(linesMap, n => n <= currentLine)
-        let destElm = this.$refs.editorPreview.querySelector(`[data-line='${closestLine}']`)
-        if (destElm) {
-          this.Velocity(this.$refs.editorPreview, 'stop', true)
-          this.Velocity(destElm, 'scroll', { offset: '-100', duration: 1000, container: this.$refs.editorPreview })
-        }
-      }
-    }, 500),
-    toggleAround (before, after) {
-
-    }
+    }, 500)
   }
 }
 </script>
@@ -296,84 +133,6 @@ export default {
     }
   }
 
-  &-preview {
-    flex: 1 1 50%;
-    background-color: mc('grey', '100');
-    position: relative;
-    height: calc(100vh - 100px);
-    overflow: hidden;
-
-    @include until($tablet) {
-      display: none;
-    }
-
-    &-enter-active, &-leave-active {
-      transition: max-width .5s ease;
-      max-width: 50vw;
-
-      .editor-code-preview-content {
-        width: 50vw;
-        overflow:hidden;
-      }
-    }
-    &-enter, &-leave-to {
-      max-width: 0;
-    }
-
-    &-content {
-      height: calc(100vh - 100px);
-      overflow-y: scroll;
-      padding: 30px 1rem 1rem 1rem;
-      width: calc(100% + 1rem + 17px)
-      // -ms-overflow-style: none;
-
-      // &::-webkit-scrollbar {
-      //   width: 0px;
-      //   background: transparent;
-      // }
-    }
-
-    &-title {
-      background-color: rgba(mc('blue', '100'), .75);
-      border-bottom-right-radius: 5px;
-      display: inline-flex;
-      height: 30px;
-      justify-content: center;
-      align-items: center;
-      padding: 0 1rem;
-      color: mc('blue', '800');
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 2;
-      text-transform: uppercase;
-      font-size: .7rem;
-      cursor: pointer;
-    }
-  }
-
-  &-toolbar {
-    background-color: mc('blue', '700');
-    background-image: linear-gradient(to bottom, mc('blue', '700') 0%, mc('blue','800') 100%);
-    color: #FFF;
-
-    .v-toolbar__content {
-      padding-left: 16px;
-
-      @include until($tablet) {
-        padding-left: 8px;
-      }
-    }
-  }
-
-  // ==========================================
-  // Fix FAB revealing under codemirror
-  // ==========================================
-
-  .speed-dial--fixed {
-    z-index: 8;
-  }
-
   // ==========================================
   // CODE MIRROR
   // ==========================================
diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue
new file mode 100644
index 00000000..68d9241e
--- /dev/null
+++ b/client/components/editor/editor-markdown.vue
@@ -0,0 +1,497 @@
+<template lang='pug'>
+  .editor-code
+    v-toolbar.editor-code-toolbar(dense, color='primary', dark)
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon format_bold
+        span Bold
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon format_italic
+        span Italic
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon format_strikethrough
+        span Strikethrough
+      v-menu(offset-y, open-on-hover)
+        v-btn(icon, slot='activator').mx-0
+          v-icon font_download
+        v-list
+          v-list-tile(v-for='(n, idx) in 6', @click='', :key='idx')
+            v-list-tile-action
+              v-icon font_download
+            v-list-tile-title Heading {{n}}
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon format_quote
+        span Blockquote
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon format_list_bulleted
+        span Unordered List
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon format_list_numbered
+        span Ordered List
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon insert_link
+        span Link
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon space_bar
+        span Inline Code
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon code
+        span Code Block
+      v-tooltip(top)
+        v-btn(icon, slot='activator').mx-0
+          v-icon remove
+        span Horizontal Bar
+
+    .editor-code-main
+      .editor-code-editor
+        .editor-code-editor-title(v-if='previewShown', @click='previewShown = false') Editor
+        .editor-code-editor-title(v-else='previewShown', @click='previewShown = true'): v-icon(dark) drag_indicator
+        codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
+      transition(name='editor-code-preview')
+        .editor-code-preview(v-if='previewShown')
+          .editor-code-preview-title(@click='previewShown = false') Preview
+          .editor-code-preview-content.markdown-content(ref='editorPreview', v-html='previewHTML')
+
+      v-speed-dial(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', fixed, left, bottom)
+        v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator')
+          v-icon add_circle
+          v-icon close
+        v-btn(color='teal', fab, dark): v-icon image
+        v-btn(color='pink', fab, dark): v-icon insert_drive_file
+        v-btn(color='red', fab, dark): v-icon play_circle_outline
+        v-btn(color='purple', fab, dark): v-icon multiline_chart
+        v-btn(color='indigo', fab, dark): v-icon functions
+</template>
+
+<script>
+import _ from 'lodash'
+
+// ========================================
+// IMPORTS
+// ========================================
+
+// Code Mirror
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+
+// Language
+import 'codemirror/mode/markdown/markdown.js'
+
+// Addons
+import 'codemirror/addon/selection/active-line.js'
+import 'codemirror/addon/display/fullscreen.js'
+import 'codemirror/addon/display/fullscreen.css'
+import 'codemirror/addon/selection/mark-selection.js'
+import 'codemirror/addon/scroll/annotatescrollbar.js'
+import 'codemirror/addon/search/matchesonscrollbar.js'
+import 'codemirror/addon/search/searchcursor.js'
+import 'codemirror/addon/search/match-highlighter.js'
+
+// Markdown-it
+import MarkdownIt from 'markdown-it'
+import mdEmoji from 'markdown-it-emoji'
+import mdTaskLists from 'markdown-it-task-lists'
+import mdExpandTabs from 'markdown-it-expand-tabs'
+import mdAbbr from 'markdown-it-abbr'
+import mdSup from 'markdown-it-sup'
+import mdSub from 'markdown-it-sub'
+import mdMark from 'markdown-it-mark'
+import mdImsize from 'markdown-it-imsize'
+
+// Prism (Syntax Highlighting)
+import Prism from '@/libs/prism/prism.js'
+
+// ========================================
+// INIT
+// ========================================
+
+// Platform detection
+const CtrlKey = /Mac/.test(navigator.platform) ? 'Cmd' : 'Ctrl'
+
+// Markdown Instance
+const md = new MarkdownIt({
+  html: true,
+  breaks: true,
+  linkify: true,
+  typography: true,
+  highlight(str, lang) {
+    return `<pre class="line-numbers"><code class="language-${lang}">${str}</code></pre>`
+  }
+})
+  .use(mdEmoji)
+  .use(mdTaskLists)
+  .use(mdExpandTabs)
+  .use(mdAbbr)
+  .use(mdSup)
+  .use(mdSub)
+  .use(mdMark)
+  .use(mdImsize)
+
+// ========================================
+// HELPER FUNCTIONS
+// ========================================
+
+// Inject line numbers for preview scroll sync
+let linesMap = []
+function injectLineNumbers (tokens, idx, options, env, slf) {
+  let line
+  if (tokens[idx].map && tokens[idx].level === 0) {
+    line = tokens[idx].map[0]
+    tokens[idx].attrJoin('class', 'line')
+    tokens[idx].attrSet('data-line', String(line))
+    linesMap.push(line)
+  }
+  return slf.renderToken(tokens, idx, options, env, slf)
+}
+md.renderer.rules.paragraph_open = injectLineNumbers
+md.renderer.rules.heading_open = injectLineNumbers
+
+// ========================================
+// Vue Component
+// ========================================
+
+export default {
+  components: {
+    codemirror
+  },
+  data() {
+    return {
+      fabInsertMenu: false,
+      code: '# Header 1\n\nSample **Text**\nhttp://wiki.js.org\n:rocket: :) :( :| :P\n\n## Header 2\nSample Text\n\n```javascript\nvar test = require("test");\n\n// some comment\nconst foo = bar(\'param\') + 1.234;\n```\n\n### Header 3\nLorem *ipsum* ~~text~~',
+      cmOptions: {
+        tabSize: 2,
+        mode: 'text/markdown',
+        theme: 'wikijs-dark',
+        lineNumbers: true,
+        lineWrapping: true,
+        line: true,
+        styleActiveLine: true,
+        highlightSelectionMatches: {
+          annotateScrollbar: true
+        },
+        viewportMargin: 50
+      },
+      previewShown: true,
+      previewHTML: ''
+    }
+  },
+  computed: {
+    cm() {
+      return this.$refs.cm.codemirror
+    },
+    isMobile() {
+      return this.$vuetify.breakpoint.smAndDown
+    }
+  },
+  methods: {
+    onCmReady(cm) {
+      let self = this
+      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 => {
+        self.$parent.save()
+      })
+
+      cm.setSize(null, 'calc(100vh - 100px)')
+      cm.setOption('extraKeys', keyBindings)
+      cm.on('cursorActivity', cm => {
+        this.toolbarSync(cm)
+        this.scrollSync(cm)
+      })
+      this.onCmInput(this.code)
+    },
+    onCmInput: _.debounce(function (newContent) {
+      linesMap = []
+      this.$store.set('editor/content', newContent)
+      this.previewHTML = md.render(newContent)
+      this.$nextTick(() => {
+        Prism.highlightAllUnder(this.$refs.editorPreview)
+        this.scrollSync(this.cm)
+      })
+    }, 500),
+    /**
+     * Update toolbar state
+     */
+    toolbarSync(cm) {
+      const pos = cm.getCursor('start')
+      const token = cm.getTokenAt(pos)
+
+      if (!token.type) { return }
+
+      console.info(token)
+    },
+    /**
+     * Update scroll sync
+     */
+    scrollSync: _.debounce(function (cm) {
+      if (!this.previewShown || cm.somethingSelected()) { return }
+      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 })
+      } else {
+        let closestLine = _.findLast(linesMap, n => n <= currentLine)
+        let destElm = this.$refs.editorPreview.querySelector(`[data-line='${closestLine}']`)
+        if (destElm) {
+          this.Velocity(this.$refs.editorPreview, 'stop', true)
+          this.Velocity(destElm, 'scroll', { offset: '-100', duration: 1000, container: this.$refs.editorPreview })
+        }
+      }
+    }, 500),
+    toggleAround (before, after) {
+
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+.editor-code {
+  &-main {
+    display: flex;
+    width: 100%;
+  }
+
+  &-editor {
+    background-color: darken(mc('grey', '900'), 4.5%);
+    flex: 1 1 50%;
+    display: block;
+    height: calc(100vh - 96px);
+    position: relative;
+
+    &-title {
+      background-color: mc('grey', '800');
+      border-bottom-left-radius: 5px;
+      display: inline-flex;
+      height: 30px;
+      justify-content: center;
+      align-items: center;
+      padding: 0 1rem;
+      color: mc('grey', '500');
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 7;
+      text-transform: uppercase;
+      font-size: .7rem;
+      cursor: pointer;
+
+      @include until($tablet) {
+        display: none;
+      }
+    }
+  }
+
+  &-preview {
+    flex: 1 1 50%;
+    background-color: mc('grey', '100');
+    position: relative;
+    height: calc(100vh - 100px);
+    overflow: hidden;
+
+    @include until($tablet) {
+      display: none;
+    }
+
+    &-enter-active, &-leave-active {
+      transition: max-width .5s ease;
+      max-width: 50vw;
+
+      .editor-code-preview-content {
+        width: 50vw;
+        overflow:hidden;
+      }
+    }
+    &-enter, &-leave-to {
+      max-width: 0;
+    }
+
+    &-content {
+      height: calc(100vh - 100px);
+      overflow-y: scroll;
+      padding: 30px 1rem 1rem 1rem;
+      width: calc(100% + 1rem + 17px)
+      // -ms-overflow-style: none;
+
+      // &::-webkit-scrollbar {
+      //   width: 0px;
+      //   background: transparent;
+      // }
+    }
+
+    &-title {
+      background-color: rgba(mc('blue', '100'), .75);
+      border-bottom-right-radius: 5px;
+      display: inline-flex;
+      height: 30px;
+      justify-content: center;
+      align-items: center;
+      padding: 0 1rem;
+      color: mc('blue', '800');
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      text-transform: uppercase;
+      font-size: .7rem;
+      cursor: pointer;
+    }
+  }
+
+  &-toolbar {
+    background-color: mc('blue', '700');
+    background-image: linear-gradient(to bottom, mc('blue', '700') 0%, mc('blue','800') 100%);
+    color: #FFF;
+
+    .v-toolbar__content {
+      padding-left: 16px;
+
+      @include until($tablet) {
+        padding-left: 8px;
+      }
+    }
+  }
+
+  // ==========================================
+  // Fix FAB revealing under codemirror
+  // ==========================================
+
+  .speed-dial--fixed {
+    z-index: 8;
+  }
+
+  // ==========================================
+  // CODE MIRROR
+  // ==========================================
+
+  .CodeMirror {
+    height: auto;
+
+    .cm-header-1 {
+      font-size: 1.5rem;
+    }
+    .cm-header-2 {
+      font-size: 1.25rem;
+    }
+    .cm-header-3 {
+      font-size: 1.15rem;
+    }
+    .cm-header-4 {
+      font-size: 1.1rem;
+    }
+    .cm-header-5 {
+      font-size: 1.05rem;
+    }
+    .cm-header-6 {
+      font-size: 1.025rem;
+    }
+  }
+
+  .CodeMirror-focused .cm-matchhighlight {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+    background-position: bottom;
+    background-repeat: repeat-x;
+  }
+  .cm-matchhighlight {
+    background-color: mc('grey', '800');
+  }
+  .CodeMirror-selection-highlight-scrollbar {
+    background-color: mc('green', '600');
+  }
+
+  .cm-s-wikijs-dark.CodeMirror {
+    background: darken(mc('grey','900'), 3%);
+    color: #e0e0e0;
+  }
+  .cm-s-wikijs-dark div.CodeMirror-selected {
+    background: mc('blue','800');
+  }
+  .cm-s-wikijs-dark .cm-matchhighlight {
+    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');
+  }
+  .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');
+  }
+  .cm-s-wikijs-dark .CodeMirror-gutters {
+    background: darken(mc('grey','900'), 6%);
+    border-right: 1px solid mc('grey','900');
+  }
+  .cm-s-wikijs-dark .CodeMirror-guttermarker {
+    color: #ac4142;
+  }
+  .cm-s-wikijs-dark .CodeMirror-guttermarker-subtle {
+    color: #505050;
+  }
+  .cm-s-wikijs-dark .CodeMirror-linenumber {
+    color: mc('grey','800');
+  }
+  .cm-s-wikijs-dark .CodeMirror-cursor {
+    border-left: 1px solid #b0b0b0;
+  }
+  .cm-s-wikijs-dark span.cm-comment {
+    color: mc('orange','800');
+  }
+  .cm-s-wikijs-dark span.cm-atom {
+    color: #aa759f;
+  }
+  .cm-s-wikijs-dark span.cm-number {
+    color: #aa759f;
+  }
+  .cm-s-wikijs-dark span.cm-property, .cm-s-wikijs-dark span.cm-attribute {
+    color: #90a959;
+  }
+  .cm-s-wikijs-dark span.cm-keyword {
+    color: #ac4142;
+  }
+  .cm-s-wikijs-dark span.cm-string {
+    color: #f4bf75;
+  }
+  .cm-s-wikijs-dark span.cm-variable {
+    color: #90a959;
+  }
+  .cm-s-wikijs-dark span.cm-variable-2 {
+    color: #6a9fb5;
+  }
+  .cm-s-wikijs-dark span.cm-def {
+    color: #d28445;
+  }
+  .cm-s-wikijs-dark span.cm-bracket {
+    color: #e0e0e0;
+  }
+  .cm-s-wikijs-dark span.cm-tag {
+    color: #ac4142;
+  }
+  .cm-s-wikijs-dark span.cm-link {
+    color: #aa759f;
+  }
+  .cm-s-wikijs-dark span.cm-error {
+    background: #ac4142;
+    color: #b0b0b0;
+  }
+  .cm-s-wikijs-dark .CodeMirror-activeline-background {
+    background: mc('grey','900');
+  }
+  .cm-s-wikijs-dark .CodeMirror-matchingbracket {
+    text-decoration: underline;
+    color: white !important;
+  }
+
+}
+</style>
diff --git a/client/components/editor/editor-wysiwyg.vue b/client/components/editor/editor-wysiwyg.vue
new file mode 100644
index 00000000..ef189403
--- /dev/null
+++ b/client/components/editor/editor-wysiwyg.vue
@@ -0,0 +1,62 @@
+<template lang='pug'>
+  .editor-wysiwyg
+    div(ref='editor')
+
+</template>
+
+<script>
+import 'grapesjs/dist/css/grapes.min.css'
+import grapesjs from 'grapesjs'
+
+let editor
+
+export default {
+  mounted() {
+    editor = grapesjs.init({
+      container: this.$refs.editor,
+      width: 'auto',
+      height: 'calc(100vh - 64px)',
+      storageManager: { type: null },
+      // panels: { defaults: [] }
+      blockManager: {
+        blocks: [
+          {
+            id: 'section', // id is mandatory
+            label: '<b>Section</b>', // You can use HTML/SVG inside labels
+            attributes: { class: 'gjs-block-section' },
+            content: `<section>
+              <h1>This is a simple title</h1>
+              <div>This is just a Lorem text: Lorem ipsum dolor sit amet</div>
+            </section>`
+          }, {
+            id: 'text',
+            label: 'Text',
+            content: '<div data-gjs-type="text">Insert your text here</div>',
+          }, {
+            id: 'image',
+            label: 'Image',
+            // Select the component once it's dropped
+            select: true,
+            // You can pass components as a JSON instead of a simple HTML string,
+            // in this case we also use a defined component type `image`
+            content: { type: 'image' },
+            // This triggers `active` event on dropped components and the `image`
+            // reacts by opening the AssetManager
+            activate: true
+          }
+        ]
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+
+.gjs-block {
+  width: auto;
+  height: auto;
+  min-height: auto;
+}
+
+</style>
diff --git a/dev/webpack/webpack.dev.js b/dev/webpack/webpack.dev.js
index fddbddb2..4656268a 100644
--- a/dev/webpack/webpack.dev.js
+++ b/dev/webpack/webpack.dev.js
@@ -121,7 +121,8 @@ module.exports = {
       {
         test: /\.svg$/,
         exclude: [
-          path.join(process.cwd(), 'client/svg')
+          path.join(process.cwd(), 'client/svg'),
+          path.join(process.cwd(), 'node_modules/grapesjs')
         ],
         use: [
           {
@@ -136,7 +137,8 @@ module.exports = {
       {
         test: /\.svg$/,
         include: [
-          path.join(process.cwd(), 'client/svg')
+          path.join(process.cwd(), 'client/svg'),
+          path.join(process.cwd(), 'node_modules/grapesjs/src/styles/fonts/main-fonts.svg')
         ],
         use: [
           {
@@ -152,6 +154,16 @@ module.exports = {
           { loader: 'graphql-tag/loader' }
         ]
       },
+      {
+        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [{
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+            outputPath: 'fonts/'
+          }
+        }]
+      },
       {
         test: /.jsx$/,
         loader: 'babel-loader',
diff --git a/package.json b/package.json
index 59649010..f4179448 100644
--- a/package.json
+++ b/package.json
@@ -203,6 +203,7 @@
     "eslint-plugin-standard": "4.0.0",
     "eslint-plugin-vue": "4.7.1",
     "file-loader": "2.0.0",
+    "grapesjs": "0.14.29",
     "graphiql": "0.11.11",
     "graphql-persisted-document-loader": "1.0.1",
     "graphql-tag": "^2.9.2",
@@ -230,6 +231,7 @@
     "raw-loader": "0.5.1",
     "react": "16.5.0",
     "react-dom": "16.5.0",
+    "resolve-url-loader": "3.0.0",
     "sass-loader": "7.1.0",
     "sass-resources-loader": "1.3.3",
     "script-ext-html-webpack-plugin": "2.0.1",
diff --git a/server/modules/editor/markdown/definition.yml b/server/modules/editor/markdown/definition.yml
index 8a72c37a..25304ae4 100644
--- a/server/modules/editor/markdown/definition.yml
+++ b/server/modules/editor/markdown/definition.yml
@@ -1,6 +1,6 @@
 key: markdown
 title: Markdown
-description: Default Markdown editor
+description: Basic Markdown editor
 contentType: markdown
 author: requarks.io
 props: {}
diff --git a/server/modules/editor/wysiwyg/definition.yml b/server/modules/editor/wysiwyg/definition.yml
new file mode 100644
index 00000000..e84ec3f5
--- /dev/null
+++ b/server/modules/editor/wysiwyg/definition.yml
@@ -0,0 +1,6 @@
+key: wysiwyg
+title: WYSIWYG
+description: Advanced Visual HTML Builder
+contentType: html
+author: requarks.io
+props: {}
diff --git a/yarn.lock b/yarn.lock
index 424081869fb622533be206230d49cb1c5fcf857d..11787a8b73c34ba307f4333d1ba4b5b19761bbd3 100644
GIT binary patch
delta 5662
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

delta 333
zcmV-T0kZz+gB-fR8?Zvuv%%FhP6l!<WNBt*mqCdFM7Po;0f!8iIBNnAm!NJ0F1MvI
z0T3wyZ!(u*T>?b6a9shJJD1qS0S}k$1pzLX@R<P?w{DpMp9#03qXC*GxA@8d&H=Y%
z%>jB6x3J&=Sq_)E?*XB=Ht_*(C<0_+lfcmymru<DF1O(t0#gsS)hYs9O}8F<0{K}6
zaxH0YKwg&+)&v%puUrKzw$=itFt=R@1D?CLlf(mn8<+V51PzxW<pZ|2|K<Y%1h)+A
z1D*u81o8uB1-Enf1IGoo=l%oyS_f%kWi51ad6zMM21K{PS_CXBw~K}Z-r2VnVFhGU
z0dSXb69z@MVYLMj9=BT61<wQqXJRdAWq6lSkpo1x<l6;8IJZF*25bqpW*!FWTbBoW
f2BidEF)lZkL45*0mnwV)>X&YM2Aj7OeFoHo$!UZ?