<template>
    <textarea id="editor" name="html" style="display: none;"></textarea>
</template>

<script>
import CodeMirror from "codemirror/lib/codemirror";

// Modes
import "codemirror/mode/htmlmixed/htmlmixed";

// Key bindings
import "codemirror/keymap/sublime";

// Addons
import "codemirror/addon/edit/closebrackets";
import "codemirror/addon/edit/closetag";
import "codemirror/addon/edit/matchbrackets";
import "codemirror/addon/edit/matchtags";
import "codemirror/addon/edit/trailingspace";
import "codemirror/addon/display/autorefresh";
import "codemirror/addon/selection/active-line";

// Hints
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/hint/css-hint";
import "codemirror/addon/hint/javascript-hint";
import "codemirror/addon/hint/html-hint";

// Main export object
export default {
    props : {
        html : {
            type : String,
            default : null
        },
    },

    data() {
        return {
            code : null,
            editor : null
        }
    },

    mounted() {
        if (this.html) {
            this.code = this.html;
        }

        let _this = this;
        this.editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
            lineNumbers : true,
            indentUnit : 4,
            theme : "material-ocean",
            mode : 'htmlmixed',

            // Key map
            keyMap : 'sublime',
            extraKeys : {
                "Tab" : "autocomplete"
            },

            // Addons
            autoCloseBrackets : true,
            autoCloseTags : true,
            matchBrackets : true,
            matchTags : true,
            showTrailingSpace : true,
            autoRefresh : true,
            styleActiveLine : true,
            showHint : true,
        });

        // Set the content of the editor
        this.editor.setValue(this.code);
        this.editor.focus();
        this.editor.refresh();
        this.editor.execCommand('goDocEnd');
    },
}
</script>
