wikijs-fork/client/components/editor/editor-code.vue

257 lines
6.2 KiB
Vue
Raw Normal View History

2018-02-11 05:20:17 +00:00
<template lang='pug'>
.editor-code
.editor-code-main
.editor-code-editor
codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
2018-02-11 05:20:17 +00:00
</template>
<script>
import _ from 'lodash'
2018-02-28 05:54:09 +00:00
// ========================================
// IMPORTS
// ========================================
// Code Mirror
2018-02-11 05:20:17 +00:00
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
// Language
import 'codemirror/mode/markdown/markdown.js'
// Addons
import 'codemirror/addon/selection/active-line.js'
import 'codemirror/addon/display/fullscreen.js'
import 'codemirror/addon/display/fullscreen.css'
import 'codemirror/addon/selection/mark-selection.js'
import 'codemirror/addon/scroll/annotatescrollbar.js'
import 'codemirror/addon/search/matchesonscrollbar.js'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/match-highlighter.js'
2018-02-28 05:54:09 +00:00
// ========================================
// INIT
// ========================================
// Platform detection
const CtrlKey = /Mac/.test(navigator.platform) ? 'Cmd' : 'Ctrl'
// ========================================
// Vue Component
// ========================================
2018-02-11 05:20:17 +00:00
export default {
components: {
codemirror
2018-02-11 05:20:17 +00:00
},
data() {
return {
code: '<h1>Title</h1>\n\n<p>Some text here</p>',
2018-02-11 05:20:17 +00:00
cmOptions: {
tabSize: 2,
mode: 'text/html',
2018-02-25 21:19:08 +00:00
theme: 'wikijs-dark',
lineNumbers: true,
2018-02-11 05:20:17 +00:00
lineWrapping: true,
line: true,
styleActiveLine: true,
highlightSelectionMatches: {
annotateScrollbar: true
},
2018-02-20 05:12:50 +00:00
viewportMargin: 50
}
2018-02-11 05:20:17 +00:00
}
},
computed: {
cm() {
return this.$refs.cm.codemirror
},
isMobile() {
return this.$vuetify.breakpoint.smAndDown
2018-02-11 05:20:17 +00:00
}
},
methods: {
onCmReady(cm) {
2018-02-20 05:12:50 +00:00
let self = this
2018-02-28 05:54:09 +00:00
const keyBindings = {
'F11' (cm) {
2018-02-20 05:12:50 +00:00
cm.setOption('fullScreen', !cm.getOption('fullScreen'))
},
2018-02-28 05:54:09 +00:00
'Esc' (cm) {
2018-02-20 05:12:50 +00:00
if (cm.getOption('fullScreen')) cm.setOption('fullScreen', false)
}
2018-02-28 05:54:09 +00:00
}
_.set(keyBindings, `${CtrlKey}-S`, cm => {
self.$parent.save()
})
cm.setSize(null, 'calc(100vh - 64px)')
2018-02-28 05:54:09 +00:00
cm.setOption('extraKeys', keyBindings)
this.onCmInput(this.code)
},
onCmInput: _.debounce(function (newContent) {
this.$store.set('editor/content', newContent)
}, 500)
2018-02-11 05:20:17 +00:00
}
}
</script>
<style lang='scss'>
.editor-code {
&-main {
display: flex;
width: 100%;
}
&-editor {
background-color: darken(mc('grey', '900'), 4.5%);
2018-02-11 05:20:17 +00:00
flex: 1 1 50%;
display: block;
2018-05-20 22:50:51 +00:00
height: calc(100vh - 96px);
2018-02-11 05:20:17 +00:00
position: relative;
&-title {
background-color: mc('grey', '800');
border-bottom-left-radius: 5px;
display: inline-flex;
height: 30px;
justify-content: center;
align-items: center;
padding: 0 1rem;
color: mc('grey', '500');
position: absolute;
top: 0;
right: 0;
z-index: 7;
2018-02-11 05:20:17 +00:00
text-transform: uppercase;
font-size: .7rem;
cursor: pointer;
@include until($tablet) {
display: none;
}
2018-02-11 05:20:17 +00:00
}
}
2018-02-25 21:22:36 +00:00
// ==========================================
// CODE MIRROR
// ==========================================
.CodeMirror {
height: auto;
2018-02-18 03:18:37 +00:00
2018-02-25 21:22:36 +00:00
.cm-header-1 {
font-size: 1.5rem;
}
.cm-header-2 {
font-size: 1.25rem;
}
.cm-header-3 {
font-size: 1.15rem;
}
.cm-header-4 {
font-size: 1.1rem;
}
.cm-header-5 {
font-size: 1.05rem;
}
.cm-header-6 {
font-size: 1.025rem;
}
2018-02-18 03:18:37 +00:00
}
2018-02-25 21:22:36 +00:00
.CodeMirror-focused .cm-matchhighlight {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
background-position: bottom;
background-repeat: repeat-x;
2018-02-18 03:18:37 +00:00
}
2018-02-25 21:22:36 +00:00
.cm-matchhighlight {
background-color: mc('grey', '800');
2018-02-18 03:18:37 +00:00
}
2018-02-25 21:22:36 +00:00
.CodeMirror-selection-highlight-scrollbar {
background-color: mc('green', '600');
2018-02-18 03:18:37 +00:00
}
2018-02-25 21:22:36 +00:00
.cm-s-wikijs-dark.CodeMirror {
background: darken(mc('grey','900'), 3%);
color: #e0e0e0;
2018-02-18 03:18:37 +00:00
}
2018-02-25 21:22:36 +00:00
.cm-s-wikijs-dark div.CodeMirror-selected {
background: mc('blue','800');
}
.cm-s-wikijs-dark .cm-matchhighlight {
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');
}
.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');
}
.cm-s-wikijs-dark .CodeMirror-gutters {
background: darken(mc('grey','900'), 6%);
border-right: 1px solid mc('grey','900');
}
.cm-s-wikijs-dark .CodeMirror-guttermarker {
color: #ac4142;
}
.cm-s-wikijs-dark .CodeMirror-guttermarker-subtle {
color: #505050;
}
.cm-s-wikijs-dark .CodeMirror-linenumber {
color: mc('grey','800');
}
.cm-s-wikijs-dark .CodeMirror-cursor {
border-left: 1px solid #b0b0b0;
}
.cm-s-wikijs-dark span.cm-comment {
color: mc('orange','800');
}
.cm-s-wikijs-dark span.cm-atom {
color: #aa759f;
}
.cm-s-wikijs-dark span.cm-number {
color: #aa759f;
}
.cm-s-wikijs-dark span.cm-property, .cm-s-wikijs-dark span.cm-attribute {
color: #90a959;
}
.cm-s-wikijs-dark span.cm-keyword {
color: #ac4142;
}
.cm-s-wikijs-dark span.cm-string {
color: #f4bf75;
}
.cm-s-wikijs-dark span.cm-variable {
color: #90a959;
}
.cm-s-wikijs-dark span.cm-variable-2 {
color: #6a9fb5;
}
.cm-s-wikijs-dark span.cm-def {
color: #d28445;
}
.cm-s-wikijs-dark span.cm-bracket {
color: #e0e0e0;
}
.cm-s-wikijs-dark span.cm-tag {
color: #ac4142;
}
.cm-s-wikijs-dark span.cm-link {
color: #aa759f;
}
.cm-s-wikijs-dark span.cm-error {
background: #ac4142;
color: #b0b0b0;
}
.cm-s-wikijs-dark .CodeMirror-activeline-background {
background: mc('grey','900');
}
.cm-s-wikijs-dark .CodeMirror-matchingbracket {
text-decoration: underline;
color: white !important;
2018-02-18 03:18:37 +00:00
}
2018-02-11 05:20:17 +00:00
}
</style>