Skip to content

W
wiki-js
Commit 20f2fd29 authored by Nicolas Giard's avatar Nicolas Giard
Browse files
Options

feat: add editor selection + code editor + grapejs POC

parent 578ea577
Hide whitespace changes
Inline Side-by-side
Showing with 639 additions and 255 deletions
client/app.js
View file @ 20f2fd29
...@@ -156,9 +156,9 @@ let bootstrap = () => { ...@@ -156,9 +156,9 @@ let bootstrap = () => {
// Load Icons // Load Icons
// ==================================== // ====================================
import(/* webpackChunkName: "icons" */ './svg/icons.svg').then(icons => { // import(/* webpackChunkName: "icons" */ './svg/icons.svg').then(icons => {
document.body.insertAdjacentHTML('beforeend', icons.default) // document.body.insertAdjacentHTML('beforeend', icons.default)
}) // })
} }
window.boot.onDOMReady(bootstrap) window.boot.onDOMReady(bootstrap)
client/components/editor.vue
View file @ 20f2fd29
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
v-icon(color='blue', :left='$vuetify.breakpoint.lgAndUp') sort_by_alpha v-icon(color='blue', :left='$vuetify.breakpoint.lgAndUp') sort_by_alpha
span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('editor:page') }} span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('editor:page') }}
v-content v-content
editor-code component(:is='currentEditor')
component(:is='currentModal') component(:is='currentModal')
v-dialog(v-model='dialogProgress', persistent, max-width='350') v-dialog(v-model='dialogProgress', persistent, max-width='350')
v-card(color='blue darken-3', dark) v-card(color='blue darken-3', dark)
...@@ -38,6 +38,39 @@ ...@@ -38,6 +38,39 @@
) )
.subheading {{ $t('editor:save.processing') }} .subheading {{ $t('editor:save.processing') }}
.caption.blue--text.text--lighten-3 {{ $t('editor:save.pleaseWait') }} .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( v-snackbar(
:color='notification.style' :color='notification.style'
...@@ -69,12 +102,16 @@ export default { ...@@ -69,12 +102,16 @@ export default {
components: { components: {
AtomSpinner, AtomSpinner,
editorCode: () => import(/* webpackChunkName: "editor-code" */ './editor/editor-code.vue'), 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') editorModalProperties: () => import(/* webpackChunkName: "editor" */ './editor/editor-modal-properties.vue')
}, },
data() { data() {
return { return {
currentModal: '', currentModal: '',
dialogProgress: false currentEditor: '',
dialogProgress: false,
dialogEditorSelector: false
} }
}, },
computed: { computed: {
...@@ -85,11 +122,20 @@ export default { ...@@ -85,11 +122,20 @@ export default {
mounted() { mounted() {
if (this.mode === 'create') { if (this.mode === 'create') {
_.delay(() => { _.delay(() => {
this.openModal('properties') this.dialogEditorSelector = true
}, 500) }, 500)
} }
}, },
methods: { methods: {
selectEditor(name) {
this.currentEditor = `editor${_.startCase(name)}`
this.dialogEditorSelector = false
if (this.mode === 'create') {
_.delay(() => {
this.openModal('properties')
}, 500)
}
},
openModal(name) { openModal(name) {
this.currentModal = `editorModal${_.startCase(name)}` this.currentModal = `editorModal${_.startCase(name)}`
}, },
......
client/components/editor/editor-code.vue
View file @ 20f2fd29
<template lang='pug'> <template lang='pug'>
.editor-code .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-main
.editor-code-editor .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') 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> </template>
<script> <script>
...@@ -95,20 +29,6 @@ import 'codemirror/addon/search/matchesonscrollbar.js' ...@@ -95,20 +29,6 @@ import 'codemirror/addon/search/matchesonscrollbar.js'
import 'codemirror/addon/search/searchcursor.js' import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/match-highlighter.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 // INIT
// ======================================== // ========================================
...@@ -116,44 +36,6 @@ import Prism from '@/libs/prism/prism.js' ...@@ -116,44 +36,6 @@ import Prism from '@/libs/prism/prism.js'
// Platform detection // Platform detection
const CtrlKey = /Mac/.test(navigator.platform) ? 'Cmd' : 'Ctrl' 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 // Vue Component
// ======================================== // ========================================
...@@ -164,11 +46,10 @@ export default { ...@@ -164,11 +46,10 @@ export default {
}, },
data() { data() {
return { return {
fabInsertMenu: false, code: '<h1>Title</h1>\n\n<p>Some text here</p>',
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: { cmOptions: {
tabSize: 2, tabSize: 2,
mode: 'text/markdown', mode: 'text/html',
theme: 'wikijs-dark', theme: 'wikijs-dark',
lineNumbers: true, lineNumbers: true,
lineWrapping: true, lineWrapping: true,
...@@ -178,9 +59,7 @@ export default { ...@@ -178,9 +59,7 @@ export default {
annotateScrollbar: true annotateScrollbar: true
}, },
viewportMargin: 50 viewportMargin: 50
}, }
previewShown: true,
previewHTML: ''
} }
}, },
computed: { computed: {
...@@ -206,55 +85,13 @@ export default { ...@@ -206,55 +85,13 @@ export default {
self.$parent.save() self.$parent.save()
}) })
cm.setSize(null, 'calc(100vh - 100px)') cm.setSize(null, 'calc(100vh - 64px)')
cm.setOption('extraKeys', keyBindings) cm.setOption('extraKeys', keyBindings)
cm.on('cursorActivity', cm => {
this.toolbarSync(cm)
this.scrollSync(cm)
})
this.onCmInput(this.code) this.onCmInput(this.code)
}, },
onCmInput: _.debounce(function (newContent) { onCmInput: _.debounce(function (newContent) {
linesMap = []
this.$store.set('editor/content', newContent) this.$store.set('editor/content', newContent)
this.previewHTML = md.render(newContent) }, 500)
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> </script>
...@@ -296,84 +133,6 @@ export default { ...@@ -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 // CODE MIRROR
// ========================================== // ==========================================
......
client/components/editor/editor-markdown.vue 0 → 100644
View file @ 20f2fd29
<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>
client/components/editor/editor-wysiwyg.vue 0 → 100644
View file @ 20f2fd29
<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>
dev/webpack/webpack.dev.js
View file @ 20f2fd29
...@@ -121,7 +121,8 @@ module.exports = { ...@@ -121,7 +121,8 @@ module.exports = {
{ {
test: /\.svg$/, test: /\.svg$/,
exclude: [ exclude: [
path.join(process.cwd(), 'client/svg') path.join(process.cwd(), 'client/svg'),
path.join(process.cwd(), 'node_modules/grapesjs')
], ],
use: [ use: [
{ {
...@@ -136,7 +137,8 @@ module.exports = { ...@@ -136,7 +137,8 @@ module.exports = {
{ {
test: /\.svg$/, test: /\.svg$/,
include: [ 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: [ use: [
{ {
...@@ -153,6 +155,16 @@ module.exports = { ...@@ -153,6 +155,16 @@ module.exports = {
] ]
}, },
{ {
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
},
{
test: /.jsx$/, test: /.jsx$/,
loader: 'babel-loader', loader: 'babel-loader',
exclude: /node_modules/, exclude: /node_modules/,
......
package.json
View file @ 20f2fd29
...@@ -203,6 +203,7 @@ ...@@ -203,6 +203,7 @@
"eslint-plugin-standard": "4.0.0", "eslint-plugin-standard": "4.0.0",
"eslint-plugin-vue": "4.7.1", "eslint-plugin-vue": "4.7.1",
"file-loader": "2.0.0", "file-loader": "2.0.0",
"grapesjs": "0.14.29",
"graphiql": "0.11.11", "graphiql": "0.11.11",
"graphql-persisted-document-loader": "1.0.1", "graphql-persisted-document-loader": "1.0.1",
"graphql-tag": "^2.9.2", "graphql-tag": "^2.9.2",
...@@ -230,6 +231,7 @@ ...@@ -230,6 +231,7 @@
"raw-loader": "0.5.1", "raw-loader": "0.5.1",
"react": "16.5.0", "react": "16.5.0",
"react-dom": "16.5.0", "react-dom": "16.5.0",
"resolve-url-loader": "3.0.0",
"sass-loader": "7.1.0", "sass-loader": "7.1.0",
"sass-resources-loader": "1.3.3", "sass-resources-loader": "1.3.3",
"script-ext-html-webpack-plugin": "2.0.1", "script-ext-html-webpack-plugin": "2.0.1",
......
server/modules/editor/markdown/definition.yml
View file @ 20f2fd29
key: markdown key: markdown
title: Markdown title: Markdown
description: Default Markdown editor description: Basic Markdown editor
contentType: markdown contentType: markdown
author: requarks.io author: requarks.io
props: {} props: {}
server/modules/editor/wysiwyg/definition.yml 0 → 100644
View file @ 20f2fd29
key: wysiwyg
title: WYSIWYG
description: Advanced Visual HTML Builder
contentType: html
author: requarks.io
props: {}
yarn.lock
View file @ 20f2fd29
This diff was suppressed by a .gitattributes entry.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment