124 lines
3.0 KiB
Vue
124 lines
3.0 KiB
Vue
<template>
|
|
<div :class="draftActiveStepGetter.componentName">
|
|
<label :for="localFormElement.key" :class="$attrs.labelClass ?? 'col-md-3'"
|
|
>{{ getLabel() }}:</label
|
|
>
|
|
<div>
|
|
<codemirror
|
|
:options="cmOptions"
|
|
class="markdown-preview"
|
|
v-model="textValue"
|
|
:type="localFormElement.type"
|
|
:id="localFormElement.key"
|
|
:name="localFormElement.key"
|
|
ref="myCm"
|
|
></codemirror>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import formBuilderMixin from "@mixins/formBuilderMixin";
|
|
|
|
import { codemirror } from "vue-codemirror";
|
|
import "vue-codemirror/node_modules/codemirror/lib/codemirror.css";
|
|
import "vue-codemirror/node_modules/codemirror/mode/markdown/markdown.js";
|
|
import "vue-codemirror/node_modules/codemirror/mode/javascript/javascript.js";
|
|
import "vue-codemirror/node_modules/codemirror/mode/css/css.js";
|
|
import "vue-codemirror/node_modules/codemirror/mode/vue/vue.js";
|
|
import "vue-codemirror/node_modules/codemirror/mode/htmlmixed/htmlmixed.js";
|
|
import "vue-codemirror/node_modules/codemirror/addon/edit/closebrackets.js";
|
|
import "vue-codemirror/node_modules/codemirror/addon/edit/matchbrackets.js";
|
|
import "vue-codemirror/node_modules/codemirror/addon/edit/closetag.js";
|
|
import "vue-codemirror/node_modules/codemirror/addon/display/placeholder.js";
|
|
import "vue-codemirror/node_modules/codemirror/addon/scroll/simplescrollbars.js";
|
|
import "vue-codemirror/node_modules/codemirror/addon/scroll/simplescrollbars.css";
|
|
import "vue-codemirror/node_modules/codemirror/addon/selection/active-line.js";
|
|
|
|
export default {
|
|
mixins: [formBuilderMixin],
|
|
data() {
|
|
return {
|
|
textValue: "",
|
|
cmOptions: {
|
|
mode: "markdown",
|
|
theme: "default",
|
|
lineNumbers: false,
|
|
placeholder: "",
|
|
lineWrapping: true,
|
|
readOnly: false,
|
|
tabindex: 0,
|
|
autofocus: true,
|
|
matchBrackets: true,
|
|
direction: "rtl",
|
|
|
|
// styleActiveLine: true,
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.cmOptions.placeholder = this.localFormElement.placeholder;
|
|
},
|
|
computed: {
|
|
...mapGetters("entity", ["draftActiveStepGetter"]),
|
|
},
|
|
components: {
|
|
codemirror,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.markdown-preview {
|
|
.CodeMirror-scroll {
|
|
font-family: sahel;
|
|
}
|
|
|
|
.cm-s-default {
|
|
box-shadow: 0px 5px 8px 4px #eee;
|
|
border-radius: 0.5em;
|
|
border: 1px solid #eee;
|
|
.cm-header-1 {
|
|
font-size: 2em;
|
|
}
|
|
.cm-header-2 {
|
|
font-size: 1.75em;
|
|
}
|
|
.cm-header-3 {
|
|
font-size: 1.5em;
|
|
}
|
|
.cm-header-4 {
|
|
font-size: 1.25em;
|
|
}
|
|
.cm-header-5 {
|
|
font-size: 1em;
|
|
}
|
|
.cm-header-6 {
|
|
font-size: 0.875em;
|
|
}
|
|
}
|
|
.CodeMirror-sizer {
|
|
top: 1em;
|
|
margin-right: 1.5em;
|
|
margin-left: 1.5em !important;
|
|
}
|
|
.CodeMirror-placeholder {
|
|
color: #cdcdcd !important;
|
|
}
|
|
|
|
.CodeMirror-hscrollbar {
|
|
display: none !important;
|
|
}
|
|
}
|
|
.EntityImportSection {
|
|
.cm-s-default {
|
|
height: calc(100vh - 22em);
|
|
|
|
.CodeMirror-line {
|
|
line-height: 2;
|
|
}
|
|
}
|
|
}
|
|
</style>
|