<template>
    <div :id="id"></div>
</template>

<script>
import { defineComponent } from 'vue';
import '../assets/editors/synapeditor/synapeditor.min.js';
import '../assets/editors/synapeditor/synapeditor.min.css';

export default defineComponent({
    props: {
        id: {
            type: String
        }
    },
    mounted() {
        const config = {
            'editor.license': { 'key': ['U2FsdGVkX19Vs74tRTLU2PwfP0zqDRbV39SIyZCSrCfWh8FKOxtR9tArgt3XTJ5gprND+LyqlwuTodf4lp9LrLcL4nye27pz7IC4F6a6PB+PsP5WZVT/b1O+SXZPZGWv5QayR+N0USPLIO2O+g/UJaZX+hVnQOglmqBODbv969u5NDOA5RvnQZY3O5LKL2dj'] },
            'editor.size.width': '800px',
            'editor.size.height': '500px'
        };
        const html = '';
        const eventListener = {
            initialized:  () => {
                console.log('에디터 초기화 완료');
            }
        };
        new SynapEditor(this.id, config, html, eventListener);
    }
});
</script>

<script setup>
import SynapEditorComponent from './components/SynapEditorComponent.vue'; // SynapEditorComponent 가져오기
</script>

<template>
  <main>
    <h2>Synap Editor</h2>
    <SynapEditorComponent id="synapeditor" />
  </main>
</template>