<script setup lang="ts">
import { Ckeditor } from '@ckeditor/ckeditor5-vue'
import {
  AutoLink,
  BlockQuote,
  Bold,
  ClassicEditor,
  Essentials,
  Heading,
  Image,
  ImageCaption,
  ImageInsert,
  ImageInsertViaUrl,
  ImageResize,
  ImageStyle,
  ImageToolbar,
  Italic,
  Link,
  LinkImage,
  List,
  Paragraph,
  Table,
  TableCaption,
  TableCellProperties,
  TableColumnResize,
  TableProperties,
  TableToolbar,
  type EditorConfig,
} from 'ckeditor5'
import 'ckeditor5/ckeditor5.css'

const model = defineModel<string>({ required: true })

const editorConfig: EditorConfig = {
  licenseKey: import.meta.env.VITE_CKEDITOR_LICENSE_KEY || 'GPL',
  plugins: [
    Essentials, Paragraph, Heading, Bold, Italic, Link, AutoLink, List, BlockQuote,
    Image, ImageCaption, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle,
    ImageToolbar, LinkImage, Table, TableCaption, TableCellProperties,
    TableColumnResize, TableProperties, TableToolbar,
  ],
  toolbar: {
    items: [
      'heading', '|', 'bold', 'italic', 'link', '|', 'insertTable', 'insertImage',
      '|', 'bulletedList', 'numberedList', 'blockQuote', '|', 'undo', 'redo',
    ],
    shouldNotGroupWhenFull: false,
  },
  heading: {
    options: [
      { model: 'paragraph', title: '正文', class: 'ck-heading_paragraph' },
      { model: 'heading2', view: 'h2', title: '标题', class: 'ck-heading_heading2' },
      { model: 'heading3', view: 'h3', title: '小标题', class: 'ck-heading_heading3' },
    ],
  },
  link: { addTargetToExternalLinks: true, defaultProtocol: 'https://' },
  image: {
    insert: { integrations: ['insertImageViaUrl'] },
    toolbar: [
      'toggleImageCaption', 'imageTextAlternative', '|', 'imageStyle:inline',
      'imageStyle:wrapText', 'imageStyle:breakText', '|', 'resizeImage', 'linkImage',
    ],
  },
  table: {
    contentToolbar: [
      'tableColumn', 'tableRow', 'mergeTableCells', 'toggleTableCaption',
      'tableProperties', 'tableCellProperties',
    ],
  },
}
</script>

<template>
  <Ckeditor
    v-model="model"
    :editor="ClassicEditor"
    :config="editorConfig"
  />
</template>
