|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
<template lang='pug'>
|
|
|
|
|
.editor-code
|
|
|
|
|
v-toolbar.editor-code-toolbar(dense, color='primary', dark)
|
|
|
|
|
.editor-markdown
|
|
|
|
|
v-toolbar.editor-markdown-toolbar(dense, color='primary', dark)
|
|
|
|
|
v-tooltip(top)
|
|
|
|
|
v-btn(icon, slot='activator').mx-0
|
|
|
|
|
v-icon format_bold
|
|
|
|
@ -50,17 +50,17 @@
|
|
|
|
|
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
|
|
|
|
|
.editor-markdown-main
|
|
|
|
|
.editor-markdown-editor
|
|
|
|
|
.editor-markdown-editor-title(v-if='previewShown', @click='previewShown = false') Editor
|
|
|
|
|
.editor-markdown-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.contents(ref='editorPreview', v-html='previewHTML')
|
|
|
|
|
transition(name='editor-markdown-preview')
|
|
|
|
|
.editor-markdown-preview(v-if='previewShown')
|
|
|
|
|
.editor-markdown-preview-title(@click='previewShown = false') Preview
|
|
|
|
|
.editor-markdown-preview-content.contents(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-speed-dial.editor-markdown-insert(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', fixed, bottom, :right='!previewShown || $vuetify.breakpoint.smAndDown')
|
|
|
|
|
v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator')
|
|
|
|
|
v-icon add_circle
|
|
|
|
|
v-icon close
|
|
|
|
@ -262,7 +262,7 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang='scss'>
|
|
|
|
|
.editor-code {
|
|
|
|
|
.editor-markdown {
|
|
|
|
|
&-main {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
@ -372,6 +372,13 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-insert:not(.v-speed-dial--right) {
|
|
|
|
|
@include from($tablet) {
|
|
|
|
|
left: 50%;
|
|
|
|
|
margin-left: -28px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ==========================================
|
|
|
|
|
// Fix FAB revealing under codemirror
|
|
|
|
|
// ==========================================
|
|
|
|
|