refactor: lazy-load simplemde + minimal lodash
This commit is contained in:
NGPixel
51
client/js/components/editor-codeblock.vue
Normal file
51
client/js/components/editor-codeblock.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template lang="pug">
|
||||
transition(:duration="400")
|
||||
.modal(v-show='isShown', v-cloak)
|
||||
transition(name='modal-background')
|
||||
.modal-background(v-show='isShown')
|
||||
.modal-container
|
||||
transition(name='modal-content')
|
||||
.modal-content.is-expanded(v-show='isShown')
|
||||
header.is-green
|
||||
span Insert Code Block
|
||||
section.is-gapless
|
||||
.columns.is-stretched
|
||||
.column.is-one-quarter.modal-sidebar.is-green(style={'max-width':'350px'})
|
||||
.model-sidebar-header Language
|
||||
.model-sidebar-content
|
||||
p.control.is-fullwidth
|
||||
select(v-model='modeSelected')
|
||||
option(v-for='mode in modes', v-bind:value='mode.name') {{ mode.caption }}
|
||||
.column.ace-container
|
||||
#codeblock-editor
|
||||
footer
|
||||
a.button.is-grey.is-outlined(v-on:click='cancel') Discard
|
||||
a.button.is-green(v-on:click='insertCode') Insert Code Block
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'editor-codeblock',
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
isShown () {
|
||||
return this.$store.state.editorCodeblock.shown
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel () {
|
||||
this.$store.dispatch('editorCodeBlock/close')
|
||||
},
|
||||
insertCode () {
|
||||
this.$store.dispatch('alert', {
|
||||
style: 'pink',
|
||||
icon: 'inbox',
|
||||
msg: 'Your code block has been inserted.'
|
||||
})
|
||||
this.cancel()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,6 +1,7 @@
|
||||
'use strict'
|
||||
|
||||
import SimpleMDE from 'simplemde'
|
||||
/* global FuseBox */
|
||||
|
||||
import filesize from 'filesize.js'
|
||||
import $ from 'jquery'
|
||||
|
||||
@@ -45,180 +46,186 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
let self = this
|
||||
mde = new SimpleMDE({
|
||||
autofocus: true,
|
||||
autoDownloadFontAwesome: false,
|
||||
element: this.$refs.editorTextArea,
|
||||
placeholder: 'Enter Markdown formatted content here...',
|
||||
spellChecker: false,
|
||||
status: false,
|
||||
toolbar: [
|
||||
{
|
||||
name: 'bold',
|
||||
action: SimpleMDE.toggleBold,
|
||||
className: 'icon-bold',
|
||||
title: 'Bold'
|
||||
},
|
||||
{
|
||||
name: 'italic',
|
||||
action: SimpleMDE.toggleItalic,
|
||||
className: 'icon-italic',
|
||||
title: 'Italic'
|
||||
},
|
||||
{
|
||||
name: 'strikethrough',
|
||||
action: SimpleMDE.toggleStrikethrough,
|
||||
className: 'icon-strikethrough',
|
||||
title: 'Strikethrough'
|
||||
},
|
||||
'|',
|
||||
{
|
||||
name: 'heading-1',
|
||||
action: SimpleMDE.toggleHeading1,
|
||||
className: 'icon-header fa-header-x fa-header-1',
|
||||
title: 'Big Heading'
|
||||
},
|
||||
{
|
||||
name: 'heading-2',
|
||||
action: SimpleMDE.toggleHeading2,
|
||||
className: 'icon-header fa-header-x fa-header-2',
|
||||
title: 'Medium Heading'
|
||||
},
|
||||
{
|
||||
name: 'heading-3',
|
||||
action: SimpleMDE.toggleHeading3,
|
||||
className: 'icon-header fa-header-x fa-header-3',
|
||||
title: 'Small Heading'
|
||||
},
|
||||
{
|
||||
name: 'quote',
|
||||
action: SimpleMDE.toggleBlockquote,
|
||||
className: 'icon-quote-left',
|
||||
title: 'Quote'
|
||||
},
|
||||
'|',
|
||||
{
|
||||
name: 'unordered-list',
|
||||
action: SimpleMDE.toggleUnorderedList,
|
||||
className: 'icon-th-list',
|
||||
title: 'Bullet List'
|
||||
},
|
||||
{
|
||||
name: 'ordered-list',
|
||||
action: SimpleMDE.toggleOrderedList,
|
||||
className: 'icon-list-ol',
|
||||
title: 'Numbered List'
|
||||
},
|
||||
'|',
|
||||
{
|
||||
name: 'link',
|
||||
action: (editor) => {
|
||||
/* if(!mdeModalOpenState) {
|
||||
mdeModalOpenState = true;
|
||||
$('#modal-editor-link').slideToggle();
|
||||
} */
|
||||
window.alert('Coming soon!')
|
||||
FuseBox.import('/js/simplemde/simplemde.min.js', (SimpleMDE) => {
|
||||
mde = new SimpleMDE({
|
||||
autofocus: true,
|
||||
autoDownloadFontAwesome: false,
|
||||
element: this.$refs.editorTextArea,
|
||||
placeholder: 'Enter Markdown formatted content here...',
|
||||
spellChecker: false,
|
||||
status: false,
|
||||
toolbar: [
|
||||
{
|
||||
name: 'bold',
|
||||
action: SimpleMDE.toggleBold,
|
||||
className: 'icon-bold',
|
||||
title: 'Bold'
|
||||
},
|
||||
className: 'icon-link2',
|
||||
title: 'Insert Link'
|
||||
},
|
||||
{
|
||||
name: 'image',
|
||||
action: (editor) => {
|
||||
if (!mdeModalOpenState) {
|
||||
vueImage.open()
|
||||
}
|
||||
{
|
||||
name: 'italic',
|
||||
action: SimpleMDE.toggleItalic,
|
||||
className: 'icon-italic',
|
||||
title: 'Italic'
|
||||
},
|
||||
className: 'icon-image',
|
||||
title: 'Insert Image'
|
||||
},
|
||||
{
|
||||
name: 'file',
|
||||
action: (editor) => {
|
||||
if (!mdeModalOpenState) {
|
||||
vueFile.open()
|
||||
}
|
||||
{
|
||||
name: 'strikethrough',
|
||||
action: SimpleMDE.toggleStrikethrough,
|
||||
className: 'icon-strikethrough',
|
||||
title: 'Strikethrough'
|
||||
},
|
||||
className: 'icon-paper',
|
||||
title: 'Insert File'
|
||||
},
|
||||
{
|
||||
name: 'video',
|
||||
action: (editor) => {
|
||||
if (!mdeModalOpenState) {
|
||||
vueVideo.open()
|
||||
}
|
||||
'|',
|
||||
{
|
||||
name: 'heading-1',
|
||||
action: SimpleMDE.toggleHeading1,
|
||||
className: 'icon-header fa-header-x fa-header-1',
|
||||
title: 'Big Heading'
|
||||
},
|
||||
className: 'icon-video-camera2',
|
||||
title: 'Insert Video Player'
|
||||
},
|
||||
'|',
|
||||
{
|
||||
name: 'inline-code',
|
||||
action: (editor) => {
|
||||
if (!editor.codemirror.doc.somethingSelected()) {
|
||||
return alerts.pushError('Invalid selection', 'You must select at least 1 character first.')
|
||||
}
|
||||
let curSel = editor.codemirror.doc.getSelections()
|
||||
curSel = _.map(curSel, (s) => {
|
||||
return '`' + s + '`'
|
||||
})
|
||||
editor.codemirror.doc.replaceSelections(curSel)
|
||||
{
|
||||
name: 'heading-2',
|
||||
action: SimpleMDE.toggleHeading2,
|
||||
className: 'icon-header fa-header-x fa-header-2',
|
||||
title: 'Medium Heading'
|
||||
},
|
||||
className: 'icon-terminal',
|
||||
title: 'Inline Code'
|
||||
},
|
||||
{
|
||||
name: 'code-block',
|
||||
action: (editor) => {
|
||||
if (!mdeModalOpenState) {
|
||||
if (mde.codemirror.doc.somethingSelected()) {
|
||||
vueCodeBlock.initContent = mde.codemirror.doc.getSelection()
|
||||
{
|
||||
name: 'heading-3',
|
||||
action: SimpleMDE.toggleHeading3,
|
||||
className: 'icon-header fa-header-x fa-header-3',
|
||||
title: 'Small Heading'
|
||||
},
|
||||
{
|
||||
name: 'quote',
|
||||
action: SimpleMDE.toggleBlockquote,
|
||||
className: 'icon-quote-left',
|
||||
title: 'Quote'
|
||||
},
|
||||
'|',
|
||||
{
|
||||
name: 'unordered-list',
|
||||
action: SimpleMDE.toggleUnorderedList,
|
||||
className: 'icon-th-list',
|
||||
title: 'Bullet List'
|
||||
},
|
||||
{
|
||||
name: 'ordered-list',
|
||||
action: SimpleMDE.toggleOrderedList,
|
||||
className: 'icon-list-ol',
|
||||
title: 'Numbered List'
|
||||
},
|
||||
'|',
|
||||
{
|
||||
name: 'link',
|
||||
action: (editor) => {
|
||||
/* if(!mdeModalOpenState) {
|
||||
mdeModalOpenState = true;
|
||||
$('#modal-editor-link').slideToggle();
|
||||
} */
|
||||
window.alert('Coming soon!')
|
||||
},
|
||||
className: 'icon-link2',
|
||||
title: 'Insert Link'
|
||||
},
|
||||
{
|
||||
name: 'image',
|
||||
action: (editor) => {
|
||||
// if (!mdeModalOpenState) {
|
||||
// vueImage.open()
|
||||
// }
|
||||
},
|
||||
className: 'icon-image',
|
||||
title: 'Insert Image'
|
||||
},
|
||||
{
|
||||
name: 'file',
|
||||
action: (editor) => {
|
||||
// if (!mdeModalOpenState) {
|
||||
// vueFile.open()
|
||||
// }
|
||||
},
|
||||
className: 'icon-paper',
|
||||
title: 'Insert File'
|
||||
},
|
||||
{
|
||||
name: 'video',
|
||||
action: (editor) => {
|
||||
// if (!mdeModalOpenState) {
|
||||
// vueVideo.open()
|
||||
// }
|
||||
},
|
||||
className: 'icon-video-camera2',
|
||||
title: 'Insert Video Player'
|
||||
},
|
||||
'|',
|
||||
{
|
||||
name: 'inline-code',
|
||||
action: (editor) => {
|
||||
if (!editor.codemirror.doc.somethingSelected()) {
|
||||
return self.$store.dispatch('alert', {
|
||||
style: 'orange',
|
||||
icon: 'marquee',
|
||||
msg: 'Invalid selection. Select at least 1 character.'
|
||||
})
|
||||
}
|
||||
|
||||
vueCodeBlock.open()
|
||||
}
|
||||
let curSel = editor.codemirror.doc.getSelections()
|
||||
curSel = self._.map(curSel, (s) => {
|
||||
return '`' + s + '`'
|
||||
})
|
||||
editor.codemirror.doc.replaceSelections(curSel)
|
||||
},
|
||||
className: 'icon-terminal',
|
||||
title: 'Inline Code'
|
||||
},
|
||||
className: 'icon-code',
|
||||
title: 'Code Block'
|
||||
},
|
||||
'|',
|
||||
{
|
||||
name: 'table',
|
||||
action: (editor) => {
|
||||
window.alert('Coming soon!')
|
||||
// todo
|
||||
{
|
||||
name: 'code-block',
|
||||
action: (editor) => {
|
||||
// if (!mdeModalOpenState) {
|
||||
// if (mde.codemirror.doc.somethingSelected()) {
|
||||
// vueCodeBlock.initContent = mde.codemirror.doc.getSelection()
|
||||
// }
|
||||
|
||||
// vueCodeBlock.open()
|
||||
// }
|
||||
},
|
||||
className: 'icon-code',
|
||||
title: 'Code Block'
|
||||
},
|
||||
className: 'icon-table',
|
||||
title: 'Insert Table'
|
||||
},
|
||||
{
|
||||
name: 'horizontal-rule',
|
||||
action: SimpleMDE.drawHorizontalRule,
|
||||
className: 'icon-minus2',
|
||||
title: 'Horizontal Rule'
|
||||
'|',
|
||||
{
|
||||
name: 'table',
|
||||
action: (editor) => {
|
||||
window.alert('Coming soon!')
|
||||
// todo
|
||||
},
|
||||
className: 'icon-table',
|
||||
title: 'Insert Table'
|
||||
},
|
||||
{
|
||||
name: 'horizontal-rule',
|
||||
action: SimpleMDE.drawHorizontalRule,
|
||||
className: 'icon-minus2',
|
||||
title: 'Horizontal Rule'
|
||||
}
|
||||
],
|
||||
shortcuts: {
|
||||
'toggleBlockquote': null,
|
||||
'toggleFullScreen': null
|
||||
}
|
||||
],
|
||||
shortcuts: {
|
||||
'toggleBlockquote': null,
|
||||
'toggleFullScreen': null
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// Save
|
||||
// Save
|
||||
|
||||
this.$root.$on('editor-save', this.save)
|
||||
$(window).bind('keydown', (ev) => {
|
||||
if (ev.ctrlKey || ev.metaKey) {
|
||||
switch (String.fromCharCode(ev.which).toLowerCase()) {
|
||||
case 's':
|
||||
ev.preventDefault()
|
||||
self.save()
|
||||
break
|
||||
this.$root.$on('editor-save', this.save)
|
||||
$(window).bind('keydown', (ev) => {
|
||||
if (ev.ctrlKey || ev.metaKey) {
|
||||
switch (String.fromCharCode(ev.which).toLowerCase()) {
|
||||
case 's':
|
||||
ev.preventDefault()
|
||||
self.save()
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
this.$store.dispatch('pageLoader/complete')
|
||||
this.$store.dispatch('pageLoader/complete')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user