ckeditor5-import/sample/ckeditor.ts

declare global {
	interface Window {
		editor: ClassicEditor;
	}
}

import '@esi_package/ckeditor5-mathlive/mathlive.bundle.js';

import {
	ClassicEditor,
	Autoformat,
	Base64UploadAdapter,
	BlockQuote,
	Bold,
	Code,
	CodeBlock,
	Essentials,
	Heading,
	Image,
	ImageCaption,
	ImageStyle,
	ImageToolbar,
	ImageUpload,
	Indent,
	Italic,
	Link,
	List,
	MediaEmbed,
	Paragraph,
	Table,
	TableToolbar,
	FontFamily,
	FontColor,
	FontSize,
	FontBackgroundColor,
	Alignment,
	Underline
} from 'ckeditor5';
import { Mathlive, MathlivePanelview } from '@esi_package/ckeditor5-mathlive';

import CKEditorInspector from '@ckeditor/ckeditor5-inspector';

import Import from '../src/import.js';

import 'ckeditor5/ckeditor5.css';

import '@esi_package/ckeditor5-mathlive/mathlive.bundle.css';
import '@esi_package/ckeditor5-mathlive/index.css';

ClassicEditor
	.create( document.getElementById( 'editor' )!, {
		plugins: [
			Import,
			Essentials,
			Autoformat,
			BlockQuote,
			Bold,
			Heading,
			Image,
			ImageCaption,
			ImageStyle,
			ImageToolbar,
			ImageUpload,
			Indent,
			Italic,
			Link,
			List,
			MediaEmbed,
			Paragraph,
			Table,
			TableToolbar,
			CodeBlock,
			Code,
			Base64UploadAdapter,
			FontFamily,
			FontColor,
			FontSize,
			FontBackgroundColor,
			Alignment,
			Underline,
			Mathlive
		],
		toolbar: [
			'undo',
			'redo',
			'|',
			'importDocx',
			'insertDocx',
			'mathlive',
			'|',
			'heading',
			'|',
			'alignment',
			'|',
			'underline',
			'bold',
			'italic',
			'link',
			'code',
			'bulletedList',
			'numberedList',
			'|',
			'outdent',
			'indent',
			'|',
			'uploadImage',
			'blockQuote',
			'insertTable',
			'mediaEmbed',
			'codeBlock',
			'|',
			'fontFamily',
			'fontColor',
			'fontSize',
			'fontBackgroundColor'
		],
		image: {
			toolbar: [
				'imageStyle:inline',
				'imageStyle:block',
				'imageStyle:side',
				'|',
				'imageTextAlternative'
			]
		},
		table: {
			contentToolbar: [
				'tableColumn',
				'tableRow',
				'mergeTableCells'
			]
		},
		fontSize: {
			options: [
				generatePtSetting( 14 ),
				generatePtSetting( 16 ),
				generatePtSetting( 18 ),
				generatePtSetting( 20 )
			]
		},
		fontFamily: {
			options: [
				'default',
				// let's add some microsoft word fonts by dictionary but not too much
				'Angsana New',
				'AngsanaUPC',
				'Arial',
				'EucrosiaUPC',
				'FreesiaUPC',
				'JasmineUPC',
				'KodchiangUPC',
				'Leelawadee',
				'Leelawadee UI',
				'Microsoft Sans Serif',
				'PMingLiU',
				'Tahoma',
				'Times New Roman',
				'Trebuchet MS',
				'Verdana'
			]
		},
		mathlive: {
			renderMathPanel( element ) {
				let panelView: MathlivePanelview | null = new MathlivePanelview();
				panelView.setTextForInsertButton( 'สอดแทรกเลย!' );
				panelView.setTextForPanelHeader( 'เครื่องมือคณิตศาสตร์' );
				panelView.setSpawnPanelOnLeft( false ); // default is false, set to true to spawn on the left
				panelView.setSpawnPanelOnTop( false ); // default is false, set to true to spawn on top
				panelView.mount( element );
				return () => {
					panelView?.destroy();
					panelView = null;
				};
			},
			mathPanelDestroyOnClose: true,
			openPanelWhenEquationSelected: true
		},
		fontColor: {
			colorPicker: {
				format: 'hex'
			}
		},
		fontBackgroundColor: {
			colorPicker: {
				format: 'hex'
			}
		}
	} )
	.then( editor => {
		window.editor = editor;
		CKEditorInspector.attach( editor );
		window.console.log( 'CKEditor 5 is ready.', editor );
	} )
	.catch( err => {
		window.console.error( err.stack );
	} );

function generatePtSetting( size: number ): any {
	return {
		model: size,
		title: `${ size }pt`,
		view: {
			name: 'span',
			styles: {
				'font-size': `${ size }pt`
			}
		}
	};
}