.editor-code
v-toolbar(color='blue', flat, dense, dark)
v-icon(color='blue lighten-5') edit
v-toolbar-title.white--text Sample Page
.editor-code-toolbar
.editor-code-toolbar-group
.editor-code-toolbar-item(@click='toggleAround("**", "**")')
svg.icons.is-18(role='img')
title Bold
use(xlink:href='#fa-bold')
.editor-code-toolbar-item
svg.icons.is-18(role='img')
title Italic
use(xlink:href='#fa-italic')
.editor-code-toolbar-item
svg.icons.is-18(role='img')
title Strikethrough
use(xlink:href='#fa-strikethrough')
.editor-code-toolbar-group
v-menu(offset-y, open-on-hover)
.editor-code-toolbar-item.is-dropdown(slot='activator')
svg.icons.is-18(role='img')
title Heading
use(xlink:href='#fa-heading')
v-list
v-list-tile(v-for='(n, idx) in 6', @click='', :key='idx')
v-list-tile-action: v-icon format_size
v-list-tile-title Heading {{n}}
.editor-code-toolbar-item
svg.icons.is-18(role='img')
title Blockquote
use(xlink:href='#fa-quote-left')
.editor-code-toolbar-group
.editor-code-toolbar-item
svg.icons.is-18(role='img')
title Unordered List
use(xlink:href='#fa-list-ul')
.editor-code-toolbar-item
svg.icons.is-18(role='img')
title Ordered List
use(xlink:href='#fa-list-ol')
.editor-code-toolbar-group
.editor-code-toolbar-item
svg.icons.is-18(role='img')
title Link
use(xlink:href='#fa-link')
.editor-code-toolbar-group
.editor-code-toolbar-item
svg.icons.is-18(role='img')
title Inline Code
use(xlink:href='#fa-terminal')
.editor-code-toolbar-item
svg.icons.is-18(role='img')
title Code Block
use(xlink:href='#fa-code')
.editor-code-toolbar-group
.editor-code-toolbar-item
svg.icons.is-18(role='img')
title Horizontal Bar
use(xlink:href='#fa-minus')
.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) search
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='true', :right='!isMobile', :left='isMobile', :bottom='true')
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
v-speed-dial(v-model='fabMainMenu', :open-on-hover='true', :direction='saveMenuDirection', transition='slide-x-reverse-transition', :fixed='true', :right='true', :top='!isMobile', :bottom='isMobile')
v-btn(color='white', fab, light, v-model='fabMainMenu' slot='activator')
v-icon(color='blue darken-2') blur_on
v-icon(color='blue darken-2') close
v-btn(color='blue-grey', fab, dark, @click.native.stop='$parent.openModal(`properties`)'): v-icon sort_by_alpha
v-btn(color='green', fab, dark, @click.native.stop='$parent.save()'): v-icon save
v-btn(color='red', fab, dark, small): v-icon not_interested
v-btn(color='orange', fab, dark, small, @click.native.stop='$parent.openModal(`access`)'): v-icon vpn_lock
v-btn(color='indigo', fab, dark, small): v-icon restore
v-btn(color='brown', fab, dark, small): v-icon archive