<template>
    <div>
        <div>
            <comment-editor
                :isSimple="globalState.isSimple"
                :fieldName="fieldName"
                @toggle="toggleEditorMode"
                ></comment-editor>
        </div>
    </div>
</template>

<script>
import { defineComponent, inject } from 'vue';
import CommentEditor from "../CommentEditor/component/CommentEditor.vue";

export default defineComponent({
    name: "App",
    components: { CommentEditor },
    props: {
        fieldName: String
    },
    setup() {
        const globalState = inject('globalState');
        const toggleEditorMode = () => {
            globalState.isSimple = !globalState.isSimple;
            localStorage.setItem('editorMode', globalState.isSimple ? 'simple' : 'rich');
        };

        return {
            globalState,
            toggleEditorMode,
        };
    }
});
</script>
