<template>
    <textarea name="editor5" id="editor5" class="form-control" style="width:100%" ref="editorContainer"></textarea>
  </template>
  
  <script>
  
  export default {
    props: {
      bbsCn: {
        type: Object,
        required: true
      }
    },
    setup(props) {
      const editorContainer = ref(null);
      let editor = null;
  
      const createEditor = () => {
        ClassicEditor
          .create(editorContainer.value, {
            extraPlugins: [MyCustomUploadAdapterPlugin],
            removePlugins: ['MediaEmbed', 'MediaEmbedToolbar'],
            image: {
              toolbar: [
                'imageTextAlternative',
                '|',
                'imageStyle:alignLeft',
                'imageStyle:alignCenter',
                'imageStyle:alignRight',
                '|',
                'resizeImage:50',
                'resizeImage:75',
                'resizeImage:original',
                'resizeImage:custom',
              ],
              resizeOptions: [
                {
                  name: 'resizeImage:original',
                  value: null,
                  icon: 'original'
                },
                {
                  name: 'resizeImage:custom',
                  value: 'custom',
                  icon: 'custom'
                },
                {
                  name: 'resizeImage:50',
                  value: '50',
                  icon: 'medium'
                },
                {
                  name: 'resizeImage:75',
                  value: '75',
                  icon: 'large'
                }
              ],
            },
            fontFamily: {
              options: [
                'default',
                '궁서체',
                '바탕',
                '돋움',
                "Arial, Helvetica, sans-serif",
                "Courier New, Courier, monospace",
                "Georgia, serif",
                "Lucida Sans Unicode, Lucida Grande, sans-serif",
                "Tahoma, Geneva, sans-serif",
                "Times New Roman, Times, serif",
                "Trebuchet MS, Helvetica, sans-serif",
                "Verdana, Geneva, sans-serif",
              ],
            },
            table: {
              contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties'],
              tableProperties: {
                defaultProperties: {
                  borderStyle: 'solid',
                  borderColor: 'hsl(0, 0%, 0%)',
                  borderWidth: '1px',
                }
              },
              tableCellProperties: {
                defaultProperties: {
                  borderStyle: 'solid',
                  borderColor: 'hsl(0, 0%, 0%)',
                  borderWidth: '1px',
                }
              }
            }
          })
          .then(editorInstance => {
            editor = editorInstance;
            editor.setData(props.bbsCn.bbsCn);
            editor.model.document.on('change', () => {
              props.bbsCn.bbsCn = editor.getData();
            });
          })
          .catch(error => {
            console.error('There was a problem initializing the editor.', error);
          });
      };
  
      const MyCustomUploadAdapterPlugin = (editor) => {
        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
          return new UploadAdapter(loader);
        };
      };
  
      onMounted(() => {
        createEditor(); // Ensure the editor is created when the component is mounted
      });
  
      onBeforeUnmount(() => {  // Changed from beforeDestroy to onBeforeUnmount for Vue 3
        if (editor) {
          editor.destroy()
            .then(() => {
              editor = null;
            });
        }
      });
  
      return {
        editorContainer,
      };
    },
  }
  </script>
  
  <style scoped>
  .editor-container {
    min-height: 300px; /* 에디터 컨테이너의 최소 높이 설정 */
    border: 1px solid #ccc; /* 에디터 컨테이너의 테두리 설정 */
  }
  /* 필요에 따라 스타일 추가 */
  </style>
  