b50b0d57fe
Former-commit-id: 3bb6cc662da9e9255bd61fef42430c271002fd49 [formerly eaf1785c4f85522e4eb66d00a6ae9dd9ecc4fcb4] [formerly addd3ffe1396e6df84cdc3e8787d57ffb2be3dc6 [formerly 800693ad49e76c880230eb8cd1bc4a95e8c39fff]] Former-commit-id: 6c24d30f26529457202f470620a0ea1d31772b13 [formerly 384d2af17fe100b9db91462eb41337f9dff855f4] Former-commit-id: 94f4933e12f97ee7468c884f041612498e07ba32
55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<template>
|
|
<form id="editor">
|
|
<h2 v-if="hasMetadata">Metadata</h2>
|
|
<textarea v-if="hasMetadata" id="metadata">{{ req.metadata }}</textarea>
|
|
|
|
<h2 v-if="hasMetadata">Body</h2>
|
|
<textarea id="content">{{ req.content }}</textarea>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
import CodeMirror from '@/codemirror'
|
|
|
|
export default {
|
|
name: 'editor',
|
|
computed: {
|
|
...mapState(['req']),
|
|
hasMetadata: function () {
|
|
return (this.req.metadata !== undefined && this.req.metadata !== null)
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
metadata: null,
|
|
content: null
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.content = CodeMirror.fromTextArea(document.getElementById('content'), {
|
|
lineNumbers: (this.req.language !== 'markdown'),
|
|
viewportMargin: Infinity,
|
|
autofocus: true
|
|
})
|
|
|
|
CodeMirror.autoLoadMode(this.content, this.req.language)
|
|
|
|
// Prevent of going on if there is no metadata.
|
|
if (!this.hasMetadata) {
|
|
return
|
|
}
|
|
|
|
this.metadata = CodeMirror.fromTextArea(document.getElementById('metadata'), {
|
|
viewportMargin: Infinity
|
|
})
|
|
},
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|