Add code form element

package.json

@@ -25,6 +25,7 @@
     "axios": "^0.18.0",
     "blueimp-load-image": "^2.19.0",
     "ckeditor": "^4.10.0",
+    "codemirror": "^5.40.2",
     "dragula": "^3.7.2",
     "dropzone": "^5.4.0",
     "escape-html": "^1.0.3",

src/js/appServices.js

@@ -59,6 +59,7 @@ export default {
     FileAttachmentFormElement: () => import('./formElements/fileAttachment'),
     MediaPreviewFormElement: () => import('./formElements/mediaPreview'),
     MediaFormElement: () => import('./formElements/media'),
-    NestedSelectFormElement: () => import('./formElements/nestedSelect')
+    NestedSelectFormElement: () => import('./formElements/nestedSelect'),
+    CodeFormElement: () => import('./formElements/code')
 
 };

src/js/formElements/code.vue

@@ -0,0 +1,98 @@
+<template>
+    <element-wrapper v-bind="elementWrapperProps">
+        <div
+             ref="content"
+             v-once
+             v-bind="inputAttributes"
+         ></div>
+    </element-wrapper>
+</template>
+
+<script>
+import base from './base';
+import ElementWrapper from 'cmf/js/formElements/elementWrapper';
+import {assign} from 'cmf/js/library/toolkit';
+import CodeMirror from 'codemirror';
+import 'codemirror/mode/htmlmixed/htmlmixed.js';
+import 'codemirror/lib/codemirror.css';
+
+export default {
+
+    elementType: 'code',
+
+    components: {ElementWrapper},
+
+    mixins: [base],
+
+    props: {
+        value: {type: String, default: ''},
+        editorConfig: {type: Object}
+    },
+
+    data() {
+        return {
+            editorValue: this.value
+        };
+    },
+
+    watch: {
+
+        value(newValue) {
+
+            if (newValue !== this.editorValue && this.editor) {
+                this.editorValue = newValue;
+                this.editor.setValue(newValue);
+            }
+
+        }
+
+    },
+
+    mounted() {
+
+        const options = assign({
+            lineNumbers: true
+        }, this.editorConfig, {
+            readOnly: this.readOnly,
+            value: this.value
+        });
+
+        const editor = this.editor = CodeMirror(this.$refs.content, options);
+
+        editor.on('change', () => {
+
+            const newValue = editor.getValue();
+
+            this.editorValue = newValue;
+            this.$emit('input', newValue);
+
+        });
+
+    }
+
+};
+</script>
+
+<style lang="scss">
+
+    .codeInputType1 {
+
+        .CodeMirror {
+
+            font-size: 1.6em; line-height: 1.5;
+            border: 1px solid $colorGrayLight2; border-radius: em(4,16);
+            height: auto;
+
+        }
+
+        .CodeMirror-scroll {
+            min-height: 8em;
+        }
+
+        .cm-s-default .cm-atom {
+            color: $colorMain1;
+        }
+
+    }
+
+</style>

src/js/formElements/elementDefaults.js

@@ -181,6 +181,13 @@ export default {
                     label: {class: 'labelType2'},
                     wrapper: {class: 'inputBlockType1'}
                 }
+            },
+            code: {
+                attributes: {
+                    label: {class: 'labelType2'},
+                    wrapper: {class: 'inputBlockType1'},
+                    inputWrapper: {class: 'codeInputType1'}
+                }
             }
         },
         sideRegion: {