.editor-markdown
.editor-markdown-main
.editor-markdown-sidebar
//--------------------------------------------------------
//- SIDE TOOLBAR
//--------------------------------------------------------
q-btn(
icon='mdi-link-variant-plus'
padding='sm sm'
flat
)
q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertLink') }}
q-btn(
icon='mdi-image-plus-outline'
padding='sm sm'
flat
@click='insertAssets'
)
q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertAssets') }}
q-btn(
icon='mdi-code-json'
padding='sm sm'
flat
)
q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertCodeBlock') }}
q-btn(
icon='mdi-table-large-plus'
padding='sm sm'
flat
@click='insertTable'
)
q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertTable') }}
q-btn(
icon='mdi-tab-plus'
padding='sm sm'
flat
)
q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertTabset') }}
q-btn(
icon='mdi-chart-multiline'
padding='sm sm'
flat
)
q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertDiagram') }}
q-btn(
icon='mdi-book-plus'
padding='sm sm'
flat
)
q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertFootnote') }}
q-btn(
icon='mdi-cookie-plus'
padding='sm sm'
flat
)
q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertEmoji') }}
q-btn(
icon='mdi-line-scan'
padding='sm sm'
flat
@click='insertHorizontalBar'
)
q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertHorizontalBar') }}
q-space
span.editor-markdown-type Markdown
.editor-markdown-mid
//--------------------------------------------------------
//- TOP TOOLBAR
//--------------------------------------------------------
.editor-markdown-toolbar
q-btn(
icon='mdi-format-bold'
padding='xs sm'
flat
@click='toggleMarkup({ start: `**` })'
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.markup.bold') }}
q-btn(
icon='mdi-format-italic'
padding='xs sm'
flat
@click='toggleMarkup({ start: `*` })'
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.markup.italic') }}
q-btn(
icon='mdi-format-strikethrough'
padding='xs sm'
flat
@click='toggleMarkup({ start: `~~` })'
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.markup.strikethrough') }}
q-btn(
icon='mdi-format-header-pound'
padding='xs sm'
flat
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.markup.header') }}
q-menu(auto-close)
q-list(separator)
q-item(
v-for='lvl in 6'
clickable
@click='setHeaderLine(lvl)'
)
q-item-section(side)
q-icon(:name='`mdi-format-header-` + lvl')
q-item-section {{ t('editor.markup.headerLevel', { level: lvl }) }}
q-btn(
icon='mdi-format-subscript'
padding='xs sm'
flat
@click='toggleMarkup({ start: `~` })'
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.markup.subscript') }}
q-btn(
icon='mdi-format-superscript'
padding='xs sm'
flat
@click='toggleMarkup({ start: `^` })'
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.markup.superscript') }}
q-btn(
icon='mdi-alpha-t-box-outline'
padding='xs sm'
flat
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.markup.blockquoteAdmonitions') }}
q-menu(auto-close)
q-list(separator)
q-item(clickable, @click='insertBeforeEachLine({ content: `> `})')
q-item-section(side)
q-icon(name='mdi-format-quote-close')
q-item-section {{ t('editor.markup.blockquote') }}
q-item(clickable, @click='insertBeforeEachLine({ content: `> `, after: `{.is-info}`})')
q-item-section(side)
q-icon(name='mdi-information-box', color='blue-7')
q-item-section {{ t('editor.markup.admonitionInfo') }}
q-item(clickable, @click='insertBeforeEachLine({ content: `> `, after: `{.is-success}`})')
q-item-section(side)
q-icon(name='mdi-check-circle', color='positive')
q-item-section {{ t('editor.markup.admonitionSuccess') }}
q-item(clickable, @click='insertBeforeEachLine({ content: `> `, after: `{.is-warning}`})')
q-item-section(side)
q-icon(name='mdi-alert-box', color='orange')
q-item-section {{ t('editor.markup.admonitionWarning') }}
q-item(clickable, @click='insertBeforeEachLine({ content: `> `, after: `{.is-danger}`})')
q-item-section(side)
q-icon(name='mdi-close-box', color='negative')
q-item-section {{ t('editor.markup.admonitionDanger') }}
q-btn(
icon='mdi-format-list-bulleted'
padding='xs sm'
flat
@click='insertBeforeEachLine({ content: `- `})'
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.markup.unorderedList') }}
q-btn(
icon='mdi-format-list-numbered'
padding='xs sm'
flat
@click='insertBeforeEachLine({ content: `1. `})'
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.markup.orderedList') }}
q-btn(
icon='mdi-format-list-checks'
padding='xs sm'
flat
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.markup.taskList') }}
q-menu(auto-close)
q-list(separator)
q-item(clickable, @click='insertBeforeEachLine({ content: `- [ ] `})')
q-item-section(side)
q-icon(name='mdi-checkbox-blank-outline')
q-item-section {{ t('editor.markup.taskListUnchecked') }}
q-item(clickable, @click='insertBeforeEachLine({ content: `- [x] `})')
q-item-section(side)
q-icon(name='mdi-checkbox-outline')
q-item-section {{ t('editor.markup.taskListChecked') }}
q-btn(
icon='mdi-code-tags'
padding='xs sm'
flat
@click='toggleMarkup({ start: "`" })'
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.markup.inlineCode') }}
q-btn(
icon='mdi-keyboard-variant'
padding='xs sm'
flat
@click='toggleMarkup({ start: ``, end: `` })'
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.markup.keyboardKey') }}
q-btn(
v-if='!state.previewShown'
icon='mdi-eye-arrow-right-outline'
padding='xs sm'
flat
@click='state.previewShown = true'
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.togglePreviewPane') }}
//--------------------------------------------------------
//- CODEMIRROR
//--------------------------------------------------------
.editor-markdown-editor
textarea(ref='cmRef')
transition(name='editor-markdown-preview')
.editor-markdown-preview(v-if='state.previewShown')
.editor-markdown-preview-toolbar
strong: em {{ t('editor.renderPreview') }}
q-separator.q-ml-md.q-mr-sm(vertical, inset)
q-btn(
icon='mdi-arrow-vertical-lock'
padding='xs sm'
flat
@click='state.previewScrollSync = !state.previewScrollSync'
:color='state.previewScrollSync ? `primary` : null'
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.toggleScrollSync') }}
q-btn(
icon='mdi-eye-off-outline'
padding='xs sm'
flat
@click='state.previewShown = false'
)
q-tooltip(anchor='top middle' self='bottom middle') {{ t('editor.togglePreviewPane') }}
.editor-markdown-preview-content.contents(ref='editorPreviewContainer')
div(
ref='editorPreview'
v-html='state.previewHTML'
)