|
|
|
|
@ -160,7 +160,7 @@
|
|
|
|
|
v-icon(:color='helpShown ? `teal` : ``') mdi-help-circle
|
|
|
|
|
span {{$t('editor:markup.markdownFormattingHelp')}}
|
|
|
|
|
.editor-markdown-editor
|
|
|
|
|
codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
|
|
|
|
|
textarea(ref='cm')
|
|
|
|
|
transition(name='editor-markdown-preview')
|
|
|
|
|
.editor-markdown-preview(v-if='previewShown')
|
|
|
|
|
.editor-markdown-preview-content.contents(ref='editorPreviewContainer')
|
|
|
|
|
@ -188,7 +188,7 @@ import markdownHelp from './markdown/help.vue'
|
|
|
|
|
// ========================================
|
|
|
|
|
|
|
|
|
|
// Code Mirror
|
|
|
|
|
import { codemirror } from 'vue-codemirror'
|
|
|
|
|
import CodeMirror from 'codemirror'
|
|
|
|
|
import 'codemirror/lib/codemirror.css'
|
|
|
|
|
|
|
|
|
|
// Language
|
|
|
|
|
@ -261,6 +261,7 @@ function injectLineNumbers (tokens, idx, options, env, slf) {
|
|
|
|
|
}
|
|
|
|
|
md.renderer.rules.paragraph_open = injectLineNumbers
|
|
|
|
|
md.renderer.rules.heading_open = injectLineNumbers
|
|
|
|
|
md.renderer.rules.blockquote_open = injectLineNumbers
|
|
|
|
|
|
|
|
|
|
// ========================================
|
|
|
|
|
// Vue Component
|
|
|
|
|
@ -268,7 +269,6 @@ md.renderer.rules.heading_open = injectLineNumbers
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
codemirror,
|
|
|
|
|
markdownHelp
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
@ -280,22 +280,7 @@ export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
fabInsertMenu: false,
|
|
|
|
|
code: this.$store.get('editor/content'),
|
|
|
|
|
cmOptions: {
|
|
|
|
|
tabSize: 2,
|
|
|
|
|
mode: 'text/markdown',
|
|
|
|
|
theme: 'wikijs-dark',
|
|
|
|
|
lineNumbers: true,
|
|
|
|
|
lineWrapping: true,
|
|
|
|
|
line: true,
|
|
|
|
|
styleActiveLine: true,
|
|
|
|
|
highlightSelectionMatches: {
|
|
|
|
|
annotateScrollbar: true
|
|
|
|
|
},
|
|
|
|
|
viewportMargin: 50,
|
|
|
|
|
inputStyle: 'contenteditable',
|
|
|
|
|
allowDropFileTypes: ['image/jpg', 'image/png', 'image/svg', 'image/jpeg', 'image/gif']
|
|
|
|
|
},
|
|
|
|
|
cm: null,
|
|
|
|
|
cursorPos: { ch: 0, line: 1 },
|
|
|
|
|
previewShown: true,
|
|
|
|
|
previewHTML: '',
|
|
|
|
|
@ -303,9 +288,6 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
cm() {
|
|
|
|
|
return this.$refs.cm.codemirror
|
|
|
|
|
},
|
|
|
|
|
isMobile() {
|
|
|
|
|
return this.$vuetify.breakpoint.smAndDown
|
|
|
|
|
},
|
|
|
|
|
@ -325,53 +307,6 @@ export default {
|
|
|
|
|
this.activeModal = ''
|
|
|
|
|
this.helpShown = false
|
|
|
|
|
},
|
|
|
|
|
onCmReady(cm) {
|
|
|
|
|
const keyBindings = {
|
|
|
|
|
'F11' (cm) {
|
|
|
|
|
cm.setOption('fullScreen', !cm.getOption('fullScreen'))
|
|
|
|
|
},
|
|
|
|
|
'Esc' (cm) {
|
|
|
|
|
if (cm.getOption('fullScreen')) cm.setOption('fullScreen', false)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
_.set(keyBindings, `${CtrlKey}-S`, cm => {
|
|
|
|
|
this.save()
|
|
|
|
|
return false
|
|
|
|
|
})
|
|
|
|
|
_.set(keyBindings, `${CtrlKey}-B`, cm => {
|
|
|
|
|
this.toggleMarkup({ start: `**` })
|
|
|
|
|
return false
|
|
|
|
|
})
|
|
|
|
|
_.set(keyBindings, `${CtrlKey}-I`, cm => {
|
|
|
|
|
this.toggleMarkup({ start: `*` })
|
|
|
|
|
return false
|
|
|
|
|
})
|
|
|
|
|
_.set(keyBindings, `${CtrlKey}-Alt-Right`, cm => {
|
|
|
|
|
let lvl = this.getHeaderLevel(cm)
|
|
|
|
|
if (lvl >= 6) { lvl = 5 }
|
|
|
|
|
this.setHeaderLine(lvl + 1)
|
|
|
|
|
return false
|
|
|
|
|
})
|
|
|
|
|
_.set(keyBindings, `${CtrlKey}-Alt-Left`, cm => {
|
|
|
|
|
let lvl = this.getHeaderLevel(cm)
|
|
|
|
|
if (lvl <= 1) { lvl = 2 }
|
|
|
|
|
this.setHeaderLine(lvl - 1)
|
|
|
|
|
return false
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
if (this.$vuetify.breakpoint.mdAndUp) {
|
|
|
|
|
cm.setSize(null, 'calc(100vh - 112px - 24px)')
|
|
|
|
|
} else {
|
|
|
|
|
cm.setSize(null, 'calc(100vh - 112px - 16px)')
|
|
|
|
|
}
|
|
|
|
|
cm.setOption('extraKeys', keyBindings)
|
|
|
|
|
cm.on('cursorActivity', cm => {
|
|
|
|
|
this.positionSync(cm)
|
|
|
|
|
this.scrollSync(cm)
|
|
|
|
|
})
|
|
|
|
|
cm.on('paste', this.onCmPaste)
|
|
|
|
|
this.onCmInput(this.code)
|
|
|
|
|
},
|
|
|
|
|
onCmInput: _.debounce(function (newContent) {
|
|
|
|
|
linesMap = []
|
|
|
|
|
this.$store.set('editor/content', newContent)
|
|
|
|
|
@ -497,7 +432,7 @@ export default {
|
|
|
|
|
let currentLine = cm.getCursor().line
|
|
|
|
|
if (currentLine < 3) {
|
|
|
|
|
this.Velocity(this.$refs.editorPreview, 'stop', true)
|
|
|
|
|
this.Velocity(this.$refs.editorPreview.firstChild, 'scroll', { offset: '-50', duration: 1000, container: this.$refs.editorPreview })
|
|
|
|
|
this.Velocity(this.$refs.editorPreview.firstChild, 'scroll', { offset: '-50', duration: 1000, container: this.$refs.editorPreviewContainer })
|
|
|
|
|
} else {
|
|
|
|
|
let closestLine = _.findLast(linesMap, n => n <= currentLine)
|
|
|
|
|
let destElm = this.$refs.editorPreview.querySelector(`[data-line='${closestLine}']`)
|
|
|
|
|
@ -513,9 +448,94 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
toggleFullscreen () {
|
|
|
|
|
this.cm.setOption('fullScreen', true)
|
|
|
|
|
},
|
|
|
|
|
refresh() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.cm.refresh()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// Initialize CodeMirror
|
|
|
|
|
|
|
|
|
|
this.cm = CodeMirror.fromTextArea(this.$refs.cm, {
|
|
|
|
|
tabSize: 2,
|
|
|
|
|
mode: 'text/markdown',
|
|
|
|
|
theme: 'wikijs-dark',
|
|
|
|
|
lineNumbers: true,
|
|
|
|
|
lineWrapping: true,
|
|
|
|
|
line: true,
|
|
|
|
|
styleActiveLine: true,
|
|
|
|
|
highlightSelectionMatches: {
|
|
|
|
|
annotateScrollbar: true
|
|
|
|
|
},
|
|
|
|
|
viewportMargin: 50,
|
|
|
|
|
inputStyle: 'contenteditable',
|
|
|
|
|
allowDropFileTypes: ['image/jpg', 'image/png', 'image/svg', 'image/jpeg', 'image/gif']
|
|
|
|
|
})
|
|
|
|
|
this.cm.setValue(this.$store.get('editor/content'))
|
|
|
|
|
this.cm.on('change', c => {
|
|
|
|
|
this.$store.set('editor/content', c.getValue())
|
|
|
|
|
this.onCmInput(this.$store.get('editor/content'))
|
|
|
|
|
})
|
|
|
|
|
if (this.$vuetify.breakpoint.mdAndUp) {
|
|
|
|
|
this.cm.setSize(null, 'calc(100vh - 112px - 24px)')
|
|
|
|
|
} else {
|
|
|
|
|
this.cm.setSize(null, 'calc(100vh - 112px - 16px)')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Set Keybindings
|
|
|
|
|
|
|
|
|
|
const keyBindings = {
|
|
|
|
|
'F11' (c) {
|
|
|
|
|
c.setOption('fullScreen', !c.getOption('fullScreen'))
|
|
|
|
|
},
|
|
|
|
|
'Esc' (c) {
|
|
|
|
|
if (c.getOption('fullScreen')) c.setOption('fullScreen', false)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
_.set(keyBindings, `${CtrlKey}-S`, c => {
|
|
|
|
|
this.save()
|
|
|
|
|
return false
|
|
|
|
|
})
|
|
|
|
|
_.set(keyBindings, `${CtrlKey}-B`, c => {
|
|
|
|
|
this.toggleMarkup({ start: `**` })
|
|
|
|
|
return false
|
|
|
|
|
})
|
|
|
|
|
_.set(keyBindings, `${CtrlKey}-I`, c => {
|
|
|
|
|
this.toggleMarkup({ start: `*` })
|
|
|
|
|
return false
|
|
|
|
|
})
|
|
|
|
|
_.set(keyBindings, `${CtrlKey}-Alt-Right`, c => {
|
|
|
|
|
let lvl = this.getHeaderLevel(c)
|
|
|
|
|
if (lvl >= 6) { lvl = 5 }
|
|
|
|
|
this.setHeaderLine(lvl + 1)
|
|
|
|
|
return false
|
|
|
|
|
})
|
|
|
|
|
_.set(keyBindings, `${CtrlKey}-Alt-Left`, c => {
|
|
|
|
|
let lvl = this.getHeaderLevel(c)
|
|
|
|
|
if (lvl <= 1) { lvl = 2 }
|
|
|
|
|
this.setHeaderLine(lvl - 1)
|
|
|
|
|
return false
|
|
|
|
|
})
|
|
|
|
|
this.cm.setOption('extraKeys', keyBindings)
|
|
|
|
|
|
|
|
|
|
// Handle cursor movement
|
|
|
|
|
|
|
|
|
|
this.cm.on('cursorActivity', c => {
|
|
|
|
|
this.positionSync(c)
|
|
|
|
|
this.scrollSync(c)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// Handle special paste
|
|
|
|
|
|
|
|
|
|
this.cm.on('paste', this.onCmPaste)
|
|
|
|
|
|
|
|
|
|
// Render initial preview
|
|
|
|
|
|
|
|
|
|
this.onCmInput(this.$store.get('editor/content'))
|
|
|
|
|
this.refresh()
|
|
|
|
|
|
|
|
|
|
this.$root.$on('editorInsert', opts => {
|
|
|
|
|
switch (opts.kind) {
|
|
|
|
|
case 'IMAGE':
|
|
|
|
|
@ -718,10 +738,10 @@ $editor-height-mobile: calc(100vh - 112px - 16px);
|
|
|
|
|
background: mc('blue','800');
|
|
|
|
|
}
|
|
|
|
|
.cm-s-wikijs-dark .CodeMirror-line::selection, .cm-s-wikijs-dark .CodeMirror-line > span::selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::selection {
|
|
|
|
|
background: mc('red', '500');
|
|
|
|
|
background: mc('amber', '500');
|
|
|
|
|
}
|
|
|
|
|
.cm-s-wikijs-dark .CodeMirror-line::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::-moz-selection {
|
|
|
|
|
background: mc('red', '500');
|
|
|
|
|
background: mc('amber', '500');
|
|
|
|
|
}
|
|
|
|
|
.cm-s-wikijs-dark .CodeMirror-gutters {
|
|
|
|
|
background: darken(mc('grey','900'), 6%);
|
|
|
|
|
|
Nick
5 years ago