Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <template lang='pug'>
.b-markdown-widget.position-relative(tabindex='-1')
AnimGroup(anim='fade' @onEnter="refreshEditor()")
.b-markdown-edit(v-show="inEdit" key='1')
.b-markdown-header.d-flex.justify-content-between.text-light.bg-secondary
.mt-1
h6 Markdown Editor
.d-flex.justify-content-end
.b-clickable(@click="togglePreview" data-toggle="tooltip" data-placement="top"
:title="( showPreview ? 'Edit' : 'Preview' ) + ' (Ctrl+Enter)'")
i.fas.fa-edit(v-if="showPreview")
i.fas.fa-eye(v-else)
slot(name="buttons" v-bind='{ showPreview }')
.border
AnimGroup(anim='flip' @onEnter="refreshEditor()" :appear='false')
.b-markdown-preview.b-markdown-edit(v-if="showPreview" key='11').pl-2
MarkdownViewer(v-model="editValue" ref="mdViewerPreview" :options="mdOptions")
BaseRibbon(value="Preview")
.b-markdown-editor(v-show="!showPreview" key='12').p-0.m-0
CodeMirrorEditor(v-model="editValue" ref="cmEditor" :options="cmOptions" :maxLength='maxLength')
template(v-for='(index, name) in $scopedSlots' v-slot:[name]='data')
slot(:name='name' v-bind='data')
.b-markdown-preview.m-2(v-if="!inEdit" key='2')
MarkdownViewer(v-model="value" ref="mdViewer" :options="mdOptions" key='5')
</template>
<script>
export { default } from "./BaseMarkdownWidget.vue.js";
</script>
<style>
.b-markdown-widget {
width: 100%;
border-radius: 5px;
}
.b-markdown-widget:focus {
outline: 0px solid transparent;
}
.b-markdown-edit {
min-height: 150px;
}
.b-markdown-edit.fade-leave-active,
.b-markdown-preview.fade-leave-active,
.b-markdown-editor.flip-leave-active,
.b-markdown-preview.flip-leave-active {
position: absolute !important;
top: 0;
}
.b-markdown-header {
padding: 5px 10px !important;
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.b-markdown-header h6 {
margin: 0px !important;
}
</style>
|