refactor: client structure + editor preview logic

This commit is contained in:
NGPixel 2018-02-24 17:35:56 -05:00
parent 37c28691ff
commit 4fa7ed4e93
19 changed files with 26 additions and 8 deletions

View File

@ -137,7 +137,7 @@ let bootstrap = () => {
// Load Icons
// ====================================
import(/* webpackChunkName: "icons" */ '../svg/icons.svg').then(icons => {
import(/* webpackChunkName: "icons" */ './svg/icons.svg').then(icons => {
document.body.insertAdjacentHTML('beforeend', icons)
})
}

View File

@ -62,9 +62,10 @@
.editor-code-main
.editor-code-editor
.editor-code-editor-title Editor
codemirror(ref='cm', v-model='code', :options='cmOptions', @ready="onCmReady")
codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
.editor-code-preview
.editor-code-preview-title Preview
.editor-code-preview-content(v-html='previewHTML')
v-speed-dial(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', :fixed='true', :right='!isMobile', :left='isMobile', :bottom='true')
v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator')
v-icon add_circle
@ -87,6 +88,8 @@
</template>
<script>
import _ from 'lodash'
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
@ -106,6 +109,16 @@ 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'
const md = new MarkdownIt({
html: true,
breaks: true,
linkify: true,
typography: true
})
export default {
components: {
codemirror
@ -127,7 +140,8 @@ export default {
annotateScrollbar: true
},
viewportMargin: 50
}
},
previewHTML: ''
}
},
computed: {
@ -156,7 +170,11 @@ export default {
self.$parent.save()
}
})
}
this.onCmInput(this.code)
},
onCmInput: _.debounce(function (newContent) {
this.previewHTML = md.render(newContent)
}, 500)
}
}
</script>

View File

@ -199,7 +199,7 @@ export default {
<style lang="scss">
.login {
background-color: mc('blue', '800');
background-image: url('../../static/svg/login-bg-motif.svg');
background-image: url('../static/svg/login-bg-motif.svg');
background-repeat: repeat;
background-size: 200px;
width: 100%;
@ -221,7 +221,7 @@ export default {
&::before {
content: '';
position: absolute;
background-image: url('../../static/svg/login-bg.svg');
background-image: url('../static/svg/login-bg.svg');
background-position: center bottom;
background-size: cover;
top: 0;

View File

@ -2,6 +2,6 @@
require('vuetify/src/stylus/main.styl')
require('./scss/app.scss')
require('./js/compatibility.js')
require('./helpers/compatibility.js')
require('offline-plugin/runtime').install()
require('./js/app.js')
require('./app.js')