How to use Autosave in React (error)

[surzioarmani]

📝 Provide detailed reproduction steps (if any)

1. … i use docs in Ckeditor5 Autosave Feature
2. … and i installed and import auto save (import { Autosave } from '@ckeditor/ckeditor5-autosave';)
3. … and i added plugin Autosave

✔️ Expected result

working

What is the expected result of the above steps?

❌ Actual result

Type 'typeof Autosave' is not assignable to type 'string | PluginConstructor'.
Type 'typeof Autosave' is not assignable to type 'PluginClassConstructor & PluginStaticMembers'.
Type 'typeof Autosave' is not assignable to type 'PluginClassConstructor'.
Types of construct signatures are incompatible.
Type 'new (editor: Editor) => Autosave' is not assignable to type 'new (editor: Editor) => PluginInterface'.
Types of parameters 'editor' and 'editor' are incompatible.
What is the actual result of the above steps?

❓ Possible solution

If you have ideas, you can list them here. Otherwise, you can delete this section.

📃 Other details

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 { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
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 { CKEditor } from '@ckeditor/ckeditor5-react';
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 { 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 { 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: window.URL.createObjectURL(new Blob([res.data])),
							});
						});
					});
				});
			},
		};
	};

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

	/**
	 *
	 * @param data
	 */
	function saveData(data: any) {
		return new Promise<void>(resolve => {
			setTimeout(() => {
				console.log('Saved', data);

				resolve();
			}, 5000);
		});
	}

	// 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: [
							FindAndReplace,
							Autosave,
							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,
						],
						autosave: {
							waitingTime: 5000, // in ms
							save(editor: any) {
								return saveData(editor.getData());
							},
						},
						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,
						},
						list: {
							properties: {
								styles: true,
								startIndex: true,
								reversed: true,
							},
						},
					
						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' /* ... */],
						},
				
						language: 'ko',

						alignment: {
							options: ['justify', 'left', 'center', 'right'],
						},
						fontSize: {
							options: [9, 11, 13, 'default', 17, 19, 21],
						},
						
						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;

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Witoso]

Duplicate: ckeditor/ckeditor5-react#454