feat: markdown spellcheck mode
This commit is contained in:
parent
55bea7d48b
commit
abe86928fb
@ -100,9 +100,14 @@
|
|||||||
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-if='previewShown')
|
||||||
|
template(v-slot:activator='{ on }')
|
||||||
|
v-btn.animated.fadeIn.wait-p1s(icon, tile, v-on='on', @click='spellModeActive = !spellModeActive').mx-0
|
||||||
|
v-icon(:color='spellModeActive ? `amber` : `white`') mdi-spellcheck
|
||||||
|
span {{$t('editor:markup.toggleSpellcheck')}}
|
||||||
v-tooltip(bottom, color='primary')
|
v-tooltip(bottom, color='primary')
|
||||||
template(v-slot:activator='{ on }')
|
template(v-slot:activator='{ on }')
|
||||||
v-btn.animated.fadeIn.wait-p11s(icon, tile, v-on='on', @click='previewShown = !previewShown').mx-0
|
v-btn.animated.fadeIn.wait-p2s(icon, tile, v-on='on', @click='previewShown = !previewShown').mx-0
|
||||||
v-icon mdi-book-open-outline
|
v-icon mdi-book-open-outline
|
||||||
span {{$t('editor:markup.togglePreviewPane')}}
|
span {{$t('editor:markup.togglePreviewPane')}}
|
||||||
.editor-markdown-main
|
.editor-markdown-main
|
||||||
@ -164,7 +169,13 @@
|
|||||||
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='editorPreviewContainer')
|
.editor-markdown-preview-content.contents(ref='editorPreviewContainer')
|
||||||
div(ref='editorPreview', v-html='previewHTML')
|
div(
|
||||||
|
ref='editorPreview'
|
||||||
|
v-html='previewHTML'
|
||||||
|
:spellcheck='spellModeActive'
|
||||||
|
:contenteditable='spellModeActive'
|
||||||
|
@blur='spellModeActive = false'
|
||||||
|
)
|
||||||
|
|
||||||
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()}}
|
||||||
@ -372,6 +383,7 @@ export default {
|
|||||||
previewShown: true,
|
previewShown: true,
|
||||||
previewHTML: '',
|
previewHTML: '',
|
||||||
helpShown: false,
|
helpShown: false,
|
||||||
|
spellModeActive: false,
|
||||||
insertLinkDialog: false
|
insertLinkDialog: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -396,6 +408,13 @@ export default {
|
|||||||
Array.from(this.$refs.editorPreview.querySelectorAll('pre.line-numbers')).forEach(pre => pre.classList.add('prismjs'))
|
Array.from(this.$refs.editorPreview.querySelectorAll('pre.line-numbers')).forEach(pre => pre.classList.add('prismjs'))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
spellModeActive (newValue, oldValue) {
|
||||||
|
if (newValue) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.editorPreview.focus()
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -828,6 +847,10 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
|
|||||||
height: $editor-height-mobile;
|
height: $editor-height-mobile;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
p.line {
|
p.line {
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user