<script setup lang="ts">
import CKEditor from '@/components/CKEditor'
import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor'
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'
import UnderlinePlugin from '@ckeditor/ckeditor5-basic-styles/src/underline'
import StrikethroughPlugin from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link'
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading'
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'
import ListPlugin from '@ckeditor/ckeditor5-list/src/list'
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'

import { mdToHtml } from '@/utils/markdown'
import { getNoteById } from '@/composables/useNotes'

const props = defineProps<{
  note: Note
}>()

const editor = BalloonEditor
const editorData = mdToHtml(props.note.content, 'c@', getNoteById)
const editorConfig = {
  plugins: [
    EssentialsPlugin,
    BoldPlugin,
    ItalicPlugin,
    UnderlinePlugin,
    StrikethroughPlugin,
    LinkPlugin,
    HeadingPlugin,
    ParagraphPlugin,
    ListPlugin,
    AutoformatPlugin,
  ],

  toolbar: {
    items: [
      'bold',
      'italic',
      'underline',
      'strikethrough',
      'link',
      'undo',
      'redo',
      'heading',
      'bulletedList',
      'numberedList',
    ],
  },
}
</script>
<template>
  <div>
    <CKEditor
      class="h-full"
      :editor="editor"
      v-model="editorData"
      :config="editorConfig"
    ></CKEditor>
  </div>
</template>
<style>
.ck-content {
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
</style>
