chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue

<template>
    <div>
        <div>
            <comment-editor :isSimple="globalState.isSimple" @toggle="toggleEditorMode" @change="handleChange"></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 },
    setup() {
        const globalState = inject('globalState');
        const fieldName = inject('fieldName')
        const toggleEditorMode = () => {
            globalState.isSimple = !globalState.isSimple;
            localStorage.setItem('editorMode', globalState.isSimple ? 'simple' : 'rich');
        };

        const handleChange = (newContent) => {
            const hiddenField = document.querySelector(`input[name="${fieldName}"]`);
            if (hiddenField) {
                hiddenField.value = newContent || '';
            }
        };

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