<template>
    <div class="w-100">
        <j-code-editor :visible="true"
                       v-model="text"
                       ref="ed"></j-code-editor>
    </div>
</template>

<script>
import loc from './rawHtml.resx';
import Raw from './RawHtml';
import { i18n } from "../../../../localization/vue-i18n";
var d = new Raw();
export default {
    i18n: i18n(loc),
    props: {
        /**
         * object of type {
         *  text: '',
         * }
         */
        value: {
            type: Object,
            default() {
                return d.getEmptyData();
            }
        },
        /**
         * object of type { }
         */
        config: {
            type: Object,
            default() {
                return d.getEmptyConfig();
            }
        }
    },
    data() {
        return {
            text: this.value.text
        };
    },
    watch: {
        'value.text': {
            handler() {
                if (this.value.text !== this.text) {
                    this.text = this.value.text;
                }
            },
            deep: true
        },
        text() {
            if (this.value.text !== this.text) {
                this.$emit('input', {
                    text: this.text
                });
            }
        }
    }
}
</script>