|
|
@ -3,25 +3,28 @@ |
|
|
v-toolbar.editor-markdown-toolbar(dense, color='primary', dark, flat, style='overflow-x: hidden;') |
|
|
v-toolbar.editor-markdown-toolbar(dense, color='primary', dark, flat, style='overflow-x: hidden;') |
|
|
template(v-if='isModalShown') |
|
|
template(v-if='isModalShown') |
|
|
v-spacer |
|
|
v-spacer |
|
|
v-btn.animated.fadeInRight(flat, @click='closeAllModal') |
|
|
|
|
|
v-icon(left) remove_circle_outline |
|
|
|
|
|
|
|
|
v-btn.animated.fadeInRight(text, @click='closeAllModal') |
|
|
|
|
|
v-icon(left) mdi-arrow-left-circle |
|
|
span {{$t('editor:backToEditor')}} |
|
|
span {{$t('editor:backToEditor')}} |
|
|
template(v-else) |
|
|
template(v-else) |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-btn.animated.fadeIn(icon, slot='activator', @click='toggleMarkup({ start: `**` })').mx-0 |
|
|
|
|
|
v-icon mdi-format-bold |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeIn(icon, tile, v-on='on', @click='toggleMarkup({ start: `**` })').mx-0 |
|
|
|
|
|
v-icon mdi-format-bold |
|
|
span {{$t('editor:markup.bold')}} |
|
|
span {{$t('editor:markup.bold')}} |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-btn.animated.fadeIn.wait-p1s(icon, slot='activator', @click='toggleMarkup({ start: `*` })').mx-0 |
|
|
|
|
|
v-icon mdi-format-italic |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeIn.wait-p1s(icon, tile, v-on='on', @click='toggleMarkup({ start: `*` })').mx-0 |
|
|
|
|
|
v-icon mdi-format-italic |
|
|
span {{$t('editor:markup.italic')}} |
|
|
span {{$t('editor:markup.italic')}} |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-btn.animated.fadeIn.wait-p2s(icon, slot='activator', @click='toggleMarkup({ start: `~~` })').mx-0 |
|
|
|
|
|
v-icon mdi-format-strikethrough |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeIn.wait-p2s(icon, tile, v-on='on', @click='toggleMarkup({ start: `~~` })').mx-0 |
|
|
|
|
|
v-icon mdi-format-strikethrough |
|
|
span {{$t('editor:markup.strikethrough')}} |
|
|
span {{$t('editor:markup.strikethrough')}} |
|
|
v-menu(offset-y, open-on-hover) |
|
|
v-menu(offset-y, open-on-hover) |
|
|
template(v-slot:activator='{ on }') |
|
|
template(v-slot:activator='{ on }') |
|
|
v-btn.animated.fadeIn.wait-p3s(icon, v-on='on').mx-0 |
|
|
|
|
|
|
|
|
v-btn.animated.fadeIn.wait-p3s(icon, tile, v-on='on').mx-0 |
|
|
v-icon mdi-format-header-pound |
|
|
v-icon mdi-format-header-pound |
|
|
v-list.py-0 |
|
|
v-list.py-0 |
|
|
template(v-for='(n, idx) in 6') |
|
|
template(v-for='(n, idx) in 6') |
|
|
@ -31,117 +34,137 @@ |
|
|
v-list-item-title {{$t('editor:markup.heading', { level: n })}} |
|
|
v-list-item-title {{$t('editor:markup.heading', { level: n })}} |
|
|
v-divider(v-if='idx < 5') |
|
|
v-divider(v-if='idx < 5') |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-btn.animated.fadeIn.wait-p4s(icon, slot='activator', @click='toggleMarkup({ start: `~` })').mx-0 |
|
|
|
|
|
v-icon mdi-format-subscript |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeIn.wait-p4s(icon, tile, v-on='on', @click='toggleMarkup({ start: `~` })').mx-0 |
|
|
|
|
|
v-icon mdi-format-subscript |
|
|
span {{$t('editor:markup.subscript')}} |
|
|
span {{$t('editor:markup.subscript')}} |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-btn.animated.fadeIn.wait-p5s(icon, slot='activator', @click='toggleMarkup({ start: `^` })').mx-0 |
|
|
|
|
|
v-icon mdi-format-superscript |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeIn.wait-p5s(icon, tile, v-on='on', @click='toggleMarkup({ start: `^` })').mx-0 |
|
|
|
|
|
v-icon mdi-format-superscript |
|
|
span {{$t('editor:markup.superscript')}} |
|
|
span {{$t('editor:markup.superscript')}} |
|
|
v-menu(offset-y, open-on-hover) |
|
|
v-menu(offset-y, open-on-hover) |
|
|
v-btn.animated.fadeIn.wait-p6s(icon, slot='activator').mx-0 |
|
|
|
|
|
v-icon mdi-alpha-t-box-outline |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeIn.wait-p6s(icon, tile, v-on='on').mx-0 |
|
|
|
|
|
v-icon mdi-alpha-t-box-outline |
|
|
v-list.py-0 |
|
|
v-list.py-0 |
|
|
v-list-item(@click='insertBeforeEachLine({ content: `> `})') |
|
|
v-list-item(@click='insertBeforeEachLine({ content: `> `})') |
|
|
v-list-item-action |
|
|
v-list-item-action |
|
|
v-icon format_quote |
|
|
|
|
|
|
|
|
v-icon mdi-alpha-t-box-outline |
|
|
v-list-item-title {{$t('editor:markup.blockquote')}} |
|
|
v-list-item-title {{$t('editor:markup.blockquote')}} |
|
|
v-divider |
|
|
v-divider |
|
|
v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-info}`})') |
|
|
v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-info}`})') |
|
|
v-list-item-action |
|
|
v-list-item-action |
|
|
v-icon(color='blue') format_quote |
|
|
|
|
|
|
|
|
v-icon(color='blue') mdi-alpha-i-box-outline |
|
|
v-list-item-title {{$t('editor:markup.blockquoteInfo')}} |
|
|
v-list-item-title {{$t('editor:markup.blockquoteInfo')}} |
|
|
v-divider |
|
|
v-divider |
|
|
v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-success}`})') |
|
|
v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-success}`})') |
|
|
v-list-item-action |
|
|
v-list-item-action |
|
|
v-icon(color='success') format_quote |
|
|
|
|
|
|
|
|
v-icon(color='success') mdi-alpha-s-box-outline |
|
|
v-list-item-title {{$t('editor:markup.blockquoteSuccess')}} |
|
|
v-list-item-title {{$t('editor:markup.blockquoteSuccess')}} |
|
|
v-divider |
|
|
v-divider |
|
|
v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-warning}`})') |
|
|
v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-warning}`})') |
|
|
v-list-item-action |
|
|
v-list-item-action |
|
|
v-icon(color='warning') format_quote |
|
|
|
|
|
|
|
|
v-icon(color='warning') mdi-alpha-w-box-outline |
|
|
v-list-item-title {{$t('editor:markup.blockquoteWarning')}} |
|
|
v-list-item-title {{$t('editor:markup.blockquoteWarning')}} |
|
|
v-divider |
|
|
v-divider |
|
|
v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-danger}`})') |
|
|
v-list-item(@click='insertBeforeEachLine({ content: `> `, after: `{.is-danger}`})') |
|
|
v-list-item-action |
|
|
v-list-item-action |
|
|
v-icon(color='error') format_quote |
|
|
|
|
|
|
|
|
v-icon(color='error') mdi-alpha-e-box-outline |
|
|
v-list-item-title {{$t('editor:markup.blockquoteError')}} |
|
|
v-list-item-title {{$t('editor:markup.blockquoteError')}} |
|
|
v-divider |
|
|
v-divider |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-btn.animated.fadeIn.wait-p7s(icon, slot='activator', @click='insertBeforeEachLine({ content: `- `})').mx-0 |
|
|
|
|
|
v-icon mdi-format-list-bulleted |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeIn.wait-p7s(icon, tile, v-on='on', @click='insertBeforeEachLine({ content: `- `})').mx-0 |
|
|
|
|
|
v-icon mdi-format-list-bulleted |
|
|
span {{$t('editor:markup.unorderedList')}} |
|
|
span {{$t('editor:markup.unorderedList')}} |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-btn.animated.fadeIn.wait-p8s(icon, slot='activator', @click='insertBeforeEachLine({ content: `1. `})').mx-0 |
|
|
|
|
|
v-icon mdi-format-list-numbered |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeIn.wait-p8s(icon, tile, v-on='on', @click='insertBeforeEachLine({ content: `1. `})').mx-0 |
|
|
|
|
|
v-icon mdi-format-list-numbered |
|
|
span {{$t('editor:markup.orderedList')}} |
|
|
span {{$t('editor:markup.orderedList')}} |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-btn.animated.fadeIn.wait-p9s(icon, slot='activator', @click='toggleMarkup({ start: "`" })').mx-0 |
|
|
|
|
|
v-icon mdi-code-tags |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeIn.wait-p9s(icon, tile, v-on='on', @click='toggleMarkup({ start: "`" })').mx-0 |
|
|
|
|
|
v-icon mdi-code-tags |
|
|
span {{$t('editor:markup.inlineCode')}} |
|
|
span {{$t('editor:markup.inlineCode')}} |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-btn.animated.fadeIn.wait-p10s(icon, slot='activator', @click='toggleMarkup({ start: `<kbd>`, end: `</kbd>` })').mx-0 |
|
|
|
|
|
v-icon mdi-keyboard-variant |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeIn.wait-p10s(icon, tile, v-on='on', @click='toggleMarkup({ start: `<kbd>`, end: `</kbd>` })').mx-0 |
|
|
|
|
|
v-icon mdi-keyboard-variant |
|
|
span {{$t('editor:markup.keyboardKey')}} |
|
|
span {{$t('editor:markup.keyboardKey')}} |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='insertAfter({ content: `---`, newLine: true })').mx-0 |
|
|
|
|
|
v-icon mdi-minus |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeIn.wait-p11s(icon, tile, v-on='on', @click='insertAfter({ content: `---`, newLine: true })').mx-0 |
|
|
|
|
|
v-icon mdi-minus |
|
|
span {{$t('editor:markup.horizontalBar')}} |
|
|
span {{$t('editor:markup.horizontalBar')}} |
|
|
template(v-if='$vuetify.breakpoint.mdAndUp') |
|
|
template(v-if='$vuetify.breakpoint.mdAndUp') |
|
|
v-spacer |
|
|
v-spacer |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-tooltip(bottom, color='primary') |
|
|
v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='previewShown = !previewShown').mx-0 |
|
|
|
|
|
v-icon mdi-book-open-outline |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeIn.wait-p11s(icon, tile, v-on='on', @click='previewShown = !previewShown').mx-0 |
|
|
|
|
|
v-icon mdi-book-open-outline |
|
|
span {{$t('editor:markup.togglePreviewPane')}} |
|
|
span {{$t('editor:markup.togglePreviewPane')}} |
|
|
.editor-markdown-main |
|
|
.editor-markdown-main |
|
|
.editor-markdown-sidebar |
|
|
.editor-markdown-sidebar |
|
|
v-tooltip(right, color='teal') |
|
|
v-tooltip(right, color='teal') |
|
|
v-btn.animated.fadeInLeft(icon, slot='activator', dark, disabled).mx-0 |
|
|
|
|
|
v-icon mdi-link-plus |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeInLeft(icon, tile, v-on='on', dark, disabled).mx-0 |
|
|
|
|
|
v-icon mdi-link-plus |
|
|
span {{$t('editor:markup.insertLink')}} |
|
|
span {{$t('editor:markup.insertLink')}} |
|
|
v-tooltip(right, color='teal') |
|
|
v-tooltip(right, color='teal') |
|
|
v-btn.animated.fadeInLeft.wait-p1s(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0 |
|
|
|
|
|
v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') mdi-folder-multiple-image |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeInLeft.wait-p1s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalMedia`)').mx-0 |
|
|
|
|
|
v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') mdi-folder-multiple-image |
|
|
span {{$t('editor:markup.insertAssets')}} |
|
|
span {{$t('editor:markup.insertAssets')}} |
|
|
v-tooltip(right, color='teal') |
|
|
v-tooltip(right, color='teal') |
|
|
v-btn.animated.fadeInLeft.wait-p2s(icon, slot='activator', dark, @click='toggleModal(`editorModalBlocks`)').mx-0 |
|
|
|
|
|
v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') mdi-post |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeInLeft.wait-p2s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalBlocks`)').mx-0 |
|
|
|
|
|
v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') mdi-view-dashboard-outline |
|
|
span {{$t('editor:markup.insertBlock')}} |
|
|
span {{$t('editor:markup.insertBlock')}} |
|
|
v-tooltip(right, color='teal') |
|
|
v-tooltip(right, color='teal') |
|
|
v-btn.animated.fadeInLeft.wait-p3s(icon, slot='activator', dark, disabled).mx-0 |
|
|
|
|
|
v-icon mdi-code-braces |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeInLeft.wait-p3s(icon, tile, v-on='on', dark, disabled).mx-0 |
|
|
|
|
|
v-icon mdi-code-braces |
|
|
span {{$t('editor:markup.insertCodeBlock')}} |
|
|
span {{$t('editor:markup.insertCodeBlock')}} |
|
|
v-tooltip(right, color='teal') |
|
|
v-tooltip(right, color='teal') |
|
|
v-btn.animated.fadeInLeft.wait-p4s(icon, slot='activator', dark, disabled).mx-0 |
|
|
|
|
|
v-icon mdi-library-video |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeInLeft.wait-p4s(icon, tile, v-on='on', dark, disabled).mx-0 |
|
|
|
|
|
v-icon mdi-library-video |
|
|
span {{$t('editor:markup.insertVideoAudio')}} |
|
|
span {{$t('editor:markup.insertVideoAudio')}} |
|
|
v-tooltip(right, color='teal') |
|
|
v-tooltip(right, color='teal') |
|
|
v-btn.animated.fadeInLeft.wait-p5s(icon, slot='activator', dark, disabled).mx-0 |
|
|
|
|
|
v-icon mdi-chart-multiline |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeInLeft.wait-p5s(icon, tile, v-on='on', dark, disabled).mx-0 |
|
|
|
|
|
v-icon mdi-chart-multiline |
|
|
span {{$t('editor:markup.insertDiagram')}} |
|
|
span {{$t('editor:markup.insertDiagram')}} |
|
|
v-tooltip(right, color='teal') |
|
|
v-tooltip(right, color='teal') |
|
|
v-btn.animated.fadeInLeft.wait-p6s(icon, slot='activator', dark, disabled).mx-0 |
|
|
|
|
|
v-icon mdi-function-variant |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeInLeft.wait-p6s(icon, tile, v-on='on', dark, disabled).mx-0 |
|
|
|
|
|
v-icon mdi-function-variant |
|
|
span {{$t('editor:markup.insertMathExpression')}} |
|
|
span {{$t('editor:markup.insertMathExpression')}} |
|
|
v-tooltip(right, color='teal') |
|
|
v-tooltip(right, color='teal') |
|
|
v-btn.animated.fadeInLeft.wait-p7s(icon, slot='activator', dark, disabled).mx-0 |
|
|
|
|
|
v-icon mdi-table-plus |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeInLeft.wait-p7s(icon, tile, v-on='on', dark, disabled).mx-0 |
|
|
|
|
|
v-icon mdi-table-plus |
|
|
span {{$t('editor:markup.tableHelper')}} |
|
|
span {{$t('editor:markup.tableHelper')}} |
|
|
template(v-if='$vuetify.breakpoint.mdAndUp') |
|
|
template(v-if='$vuetify.breakpoint.mdAndUp') |
|
|
v-spacer |
|
|
v-spacer |
|
|
v-tooltip(right, color='teal') |
|
|
v-tooltip(right, color='teal') |
|
|
v-btn.animated.fadeInLeft.wait-p8s(icon, slot='activator', dark, @click='toggleFullscreen').mx-0 |
|
|
|
|
|
v-icon mdi-overscan |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeInLeft.wait-p8s(icon, tile, v-on='on', dark, @click='toggleFullscreen').mx-0 |
|
|
|
|
|
v-icon mdi-arrow-expand-all |
|
|
span {{$t('editor:markup.distractionFreeMode')}} |
|
|
span {{$t('editor:markup.distractionFreeMode')}} |
|
|
v-tooltip(right, color='teal') |
|
|
v-tooltip(right, color='teal') |
|
|
v-btn.animated.fadeInLeft.wait-p9s(icon, slot='activator', dark, @click='toggleHelp').mx-0 |
|
|
|
|
|
v-icon(:color='helpShown ? `teal` : ``') mdi-help-circle |
|
|
|
|
|
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
|
|
v-btn.animated.fadeInLeft.wait-p9s(icon, tile, v-on='on', dark, @click='toggleHelp').mx-0 |
|
|
|
|
|
v-icon(:color='helpShown ? `teal` : ``') mdi-help-circle |
|
|
span {{$t('editor:markup.markdownFormattingHelp')}} |
|
|
span {{$t('editor:markup.markdownFormattingHelp')}} |
|
|
.editor-markdown-editor |
|
|
.editor-markdown-editor |
|
|
codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput') |
|
|
codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput') |
|
|
transition(name='editor-markdown-preview') |
|
|
transition(name='editor-markdown-preview') |
|
|
.editor-markdown-preview(v-if='previewShown') |
|
|
.editor-markdown-preview(v-if='previewShown') |
|
|
.editor-markdown-preview-content.contents(ref='editorPreview', v-html='previewHTML') |
|
|
|
|
|
|
|
|
.editor-markdown-preview-content.contents |
|
|
|
|
|
div(ref='editorPreview', v-html='previewHTML') |
|
|
|
|
|
|
|
|
v-system-bar.editor-markdown-sysbar(dark, status, color='grey darken-3') |
|
|
v-system-bar.editor-markdown-sysbar(dark, status, color='grey darken-3') |
|
|
.caption.editor-markdown-sysbar-locale {{locale.toUpperCase()}} |
|
|
.caption.editor-markdown-sysbar-locale {{locale.toUpperCase()}} |
|
|
@ -572,7 +595,7 @@ $editor-height-mobile: calc(100vh - 112px - 16px); |
|
|
&-content { |
|
|
&-content { |
|
|
height: $editor-height; |
|
|
height: $editor-height; |
|
|
overflow-y: scroll; |
|
|
overflow-y: scroll; |
|
|
padding: 1rem 1rem 1rem 0; |
|
|
|
|
|
|
|
|
padding: 1rem 1rem 1rem 1rem; |
|
|
width: calc(100% + 1rem + 17px); |
|
|
width: calc(100% + 1rem + 17px); |
|
|
// -ms-overflow-style: none; |
|
|
// -ms-overflow-style: none; |
|
|
|
|
|
|
|
|
@ -593,7 +616,7 @@ $editor-height-mobile: calc(100vh - 112px - 16px); |
|
|
color: #FFF; |
|
|
color: #FFF; |
|
|
|
|
|
|
|
|
.v-toolbar__content { |
|
|
.v-toolbar__content { |
|
|
padding-left: 78px; |
|
|
|
|
|
|
|
|
padding-left: 64px; |
|
|
|
|
|
|
|
|
@include until($tablet) { |
|
|
@include until($tablet) { |
|
|
padding-left: 8px; |
|
|
padding-left: 8px; |
|
|
|
Nick
5 years ago