how to install autosave in React, TypeScript project

[surzioarmani]

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { CKEditor } from '@ckeditor/ckeditor5-react';

import { apiPostUploadFile } from '@/api/common/apiComfunc';
import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { Autosave } from '@ckeditor/ckeditor5-autosave';
import { Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import viewToPlainText from '@ckeditor/ckeditor5-clipboard/src/utils/viewtoplaintext';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { FindAndReplace } from '@ckeditor/ckeditor5-find-and-replace';
import { Font, FontFamily } from '@ckeditor/ckeditor5-font';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line';
import {
	Image,
	ImageInsert,
	ImageInsertViaUrl,
	ImageResizeEditing,
	ImageResizeHandles,
	ImageUpload,
} from '@ckeditor/ckeditor5-image';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { AutoLink, Link } from '@ckeditor/ckeditor5-link';
import { ListProperties } from '@ckeditor/ckeditor5-list';
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { RemoveFormat } from '@ckeditor/ckeditor5-remove-format';
import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';
import { SpecialCharacters, SpecialCharactersEssentials } from '@ckeditor/ckeditor5-special-characters';
import { Table, TableCaption, TableCellProperties, TableProperties, TableToolbar } from '@ckeditor/ckeditor5-table';
// import { Base64UploadAdapter } from '@ckeditor/ckeditor5-upload';
import { Button, Row } from 'antd';
import DOMPurify from 'dompurify';
interface PropsType {
	data?: any;
	offImage?: any;
	setData?: React.Dispatch<React.SetStateAction<any>>;
	setPlainText?: React.Dispatch<React.SetStateAction<any>>;
}

const Ckeditor = (props: PropsType) => {
	const { setData, offImage, setPlainText, data } = props; // html whole text
	// const [editor, setEditor] = useState<ClassicEditor | null>(null);
	const [isPreview, setIsPreview] = useState(false);
	const [num, setNum] = useState(0); //only text
	const [fileList, setFileList] = useState([]);
	// const autosavePlugin: PluginConstructor<Editor> = Autosave;
	// 다국어
	const { t } = useTranslation();

	const customColorPalette = [
		{
			color: 'hsl(4, 90%, 58%)',
			label: 'Red',
		},
		{
			color: 'hsl(340, 82%, 52%)',
			label: 'Pink',
		},
		{
			color: 'hsl(291, 64%, 42%)',
			label: 'Purple',
		},
		{
			color: 'hsl(262, 52%, 47%)',
			label: 'Deep Purple',
		},
		{
			color: 'hsl(231, 48%, 48%)',
			label: 'Indigo',
		},
		{
			color: 'hsl(207, 90%, 54%)',
			label: 'Blue',
		},
	];

	/**
	 *
	 * @param {any} editor editor
	 * @param {any} editor.plugins editor.plugins
	 * @param {any} editor.plugins.get editor.plugins.get
	 */
	function uploadPlugin(editor: {
		plugins: {
			get: (arg0: string) => {
				(): any;
				new (): any;
				createUploadAdapter: (loader: any) => { upload(): Promise<unknown> };
			};
		};
	}) {
		editor.plugins.get('FileRepository').createUploadAdapter = (loader: any) => {
			return customUploadAdapter(loader);
		};
	}

	const customUploadAdapter = (loader: { file: Promise<any> }) => {
		setNum(num + 1);
		return {
			upload() {
				return new Promise((resolve, reject) => {
					const formData = new FormData();
					loader.file.then((file: string | Blob) => {
						formData.append('file', file);
						setFileList(prevList => [...prevList, file]);
						apiPostUploadFile(formData).then(res => {
							console.log(res.data);
							// showAlert('', t('com.msg.confirmSaved'), () => {});
							resolve({
								default: '' + res.data,
							});
						});
					});
				});
			},
		};
	};
	const saveData = (value: any) => {
		return new Promise<void>(resolve => {
			// Fake HTTP server's lag.
			setTimeout(() => {
				updateServerDataConsole(data);

				resolve();
			}, 500);
		});
	};
	/**
	 *
	 * @param msg
	 */
	let consoleUpdates = 0;
	/**
	 *
	 * @param msg
	 */
	function updateServerDataConsole(msg: string) {
		const console = document.querySelector('#snippet-autosave-console');

		consoleUpdates++;
		console.classList.add('updated');
		console.textContent = msg;

		setTimeout(() => {
			if (--consoleUpdates == 0) {
				console.classList.remove('updated');
			}
		}, 500);
	}

	const onClickPreview = () => {
		if (isPreview) {
			setIsPreview(false);
		} else {
			setIsPreview(true);
		}
	};

	// useEffect(() => {
	// 	if (editor) {
	// 		const toolbarElement = editor.ui.view.toolbar.element;
	// 		if (!isEdit) {
	// 			toolbarElement.style.display = 'none';
	// 		} else {
	// 			toolbarElement.style.display = 'flex';
	// 		}
	// 	}
	// }, [isEdit, editor]);

	return (
		<>
			{!isPreview ? (
				<CKEditor
					// ref={ref}
					editor={ClassicEditor}
					config={{
						plugins: [
							AutoLink,
							Autosave,
							FindAndReplace,
							// Base64UploadAdapter,
							Link,
							AutoLink,
							RemoveFormat,
							BlockQuote,
							Alignment,
							ListProperties,
							Strikethrough,
							Code,
							SourceEditing,
							HorizontalLine,
							Underline,
							MediaEmbed,
							Table,
							TableToolbar,
							Essentials,
							TableCellProperties,
							TableProperties,
							TableCaption,
							Paragraph,
							Bold,
							Italic,
							Heading,
							Font,
							SpecialCharacters,
							SpecialCharactersEssentials,
							Indent,
							SpecialCharacters,
							FontFamily,
							Image,
							ImageUpload,
							ImageInsertViaUrl,
							ImageInsert,
							Subscript,
							Superscript,
							ImageResizeEditing,
							ImageResizeHandles,
						],
						toolbar: {
							items: [
								'sourceEditing',
								'findAndReplace',
								'undo',
								'redo',
								'|',
								'heading',
								'|',
								'fontSize',
								'fontFamily',
								'fontColor',
								'fontBackgroundColor',
								'horizontalLine',
								'|',
								'bold',
								'italic',
								'alignment',
								'underline',
								'strikethrough',
								'subscript',
								'superscript',
								'removeFormat',
								'-',
								'bulletedList',
								'numberedList',
								'|',
								'link',
								offImage ? null : 'insertImage', // props로  onoff 가능
								'insertTable',
								'blockQuote',
								'mediaEmbed',
								'|',
								'outdent',
								'indent',
								'code',
								'specialCharacters',
							],
							shouldNotGroupWhenFull: true,
						},
						autosave: {
							waitingTime: 5000, // in ms
							save(editor: ClassicEditor) {
								// The saveData() function must return a promise
								// which should be resolved when the data is successfully saved.
								console.log(editor.getData());
								return saveData(editor.getData());
							},
						},
						list: {
							properties: {
								styles: true,
								startIndex: true,
								reversed: true,
							},
						},

						// head: {
						// 	options: [
						// 		{
						// 			model: 'paragraph',
						// 			view: 'p',
						// 			title: '본문',
						// 			class: 'ck-heading_paragraph',
						// 		},
						// 		{
						// 			model: 'heading1',
						// 			view: 'h1',
						// 			title: '헤더1',
						// 			class: 'ck-heading_heading1',
						// 		},
						// 		{
						// 			model: 'heading2',
						// 			view: 'h2',
						// 			title: '헤더2',
						// 			class: 'ck-heading_heading2',
						// 		},
						// 		{
						// 			model: 'heading3',
						// 			view: 'h3',
						// 			title: '헤더3',
						// 			class: 'ck-heading_heading3',
						// 		},
						// 	],
						// },
						image: {
							insert: {
								integrations: ['upload', 'url'],
								type: 'auto',
							},
							resizeOptions: [
								{
									name: 'resizeImage:original',
									value: null,
									label: 'Original',
								},
								{
									name: 'resizeImage:40',
									value: '40',
									label: '40%',
								},
								{
									name: 'resizeImage:60',
									value: '60',
									label: '60%',
								},
							],
							toolbar: ['resizeImage' /* ... */],
						},
						placeholder: '여기에 양식 데이터를 넣어주세요 ',
						language: 'ko',

						alignment: {
							options: ['justify', 'left', 'center', 'right'],
						},
						fontSize: {
							options: [9, 11, 13, 'default', 17, 19, 21],
						},
						fontFamily: {
							options: [
								'default',
								'궁서체',
								'바탕',
								'돋움',
								'Arial',
								'Courier New',
								'Georgia',
								'Lucida Sans Unicode',
								'Tahoma',
								'Times New Roman',
								'Trebuchet MS',
								'Verdana',
							],
							supportAllValues: true,
						},
						table: {
							contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties'],
							tableProperties: {
								borderColors: customColorPalette,
								backgroundColors: customColorPalette,
							},
							tableCellProperties: {
								borderColors: customColorPalette,
								backgroundColors: customColorPalette,
							},
						},
						extraPlugins: [uploadPlugin],
					}}
					data={data}
					// onReady={neweditor => {
					// setEditor(neweditor);
					// }}
					onChange={(event, neweditor) => {
						setData(DOMPurify.sanitize(neweditor.getData()));
						if (setPlainText) {
							setPlainText(viewToPlainText(neweditor.editing.view.document.getRoot()).replace(/\n/g, ''));
						}
					}}
				/>
			) : (
				<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data) }} />
			)}
			<Row>
				<Button type="primary" onClick={onClickPreview}>
					{!isPreview ? t('comfunc.bbs.search.preview') : t('comfunc.bbs.search.nopreview')}
				</Button>
			</Row>
		</>
	);
};

export default Ckeditor;

I followed the guide
but i have some error (Autosave)

i want to know how to using autosave function

[Witoso]

Hi! Please provide the information about the error, or best, provide some reproducible sample for us (zip/repo). We not always have the time to set up the whole project and debug it.