ckeditor5-export/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 Export from '../src/export.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: [
			Export,
			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',
			'|',
			'exportButton',
			'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',
				'Arial, sans-serif',
				'Georgia, serif',
				'Impact, Charcoal, sans-serif',
				'Lucida Console, Monaco, monospace',
				'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',
				'TH Sarabun New, sans-serif',
				'Angsana New, serif',
				'EucrosiaUPC, serif',
				'Noto Sans Thai, sans-serif'
			]
		},
		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: false
		},
		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`
			}
		}
	};
}