Cannot configure autosave save function with custom build in react/typescript

[clairefields15]

📝 Provide detailed reproduction steps (if any)

1. Follow the docs to create a custom build with react, adding the autosave plugin and basic RTE plugins like strikethrough, underline, italic (this is the minimum required to replicate this bug).
2. Add an editor config in the react project <CKEditor editor={Editor} config={editorConfiguration} ... etc />
3. Attempt to define autosave in the config like so: const editorConfiguration: EditorConfig = { autosave: { }}

✔️ Expected result

What is the expected result of the above steps? There should be typescript support for adding an autosave/save callback function to the config.

❌ Actual result

What is the actual result of the above steps? There is a typescript error and no way to configure the autosave functionality when using the editor in react.

❓ Possible solution

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

📃 Other details

• Browser: …
• OS: …
• First affected CKEditor version: …
• Installed CKEditor plugins: …

---

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

[clairefields15]

This issue seems urgent, and there is a semi-related bug with the onBlur functionality in the editor. I almost was able to call our autosave function in the onBlur and avoid configuring the autosave/save, but this ended up being extremely buggy because onBlur is called even when clicking on elements in the toolbar such as underline, italic, etc. I think onBlur should only trigger when users click outside of the editor area entirely, and could then function as an autosave feature.

[Witoso]

Hey! EditorConfig type is a pretty generic type that is later augmented by the plugins that are added to the editor. You shouldn't be able to configure autosave if a plugin for it is not there. I'm curious, where's the place that you configure the Plugins for the editor? Is it also in this config object or somewhere else?

onBlur uses internal blur CKEditor event, which relates to an editable loosing focus.

[clairefields15]

Hi! So I did choose to add the autosave plugin from the online builder originally, so it should be an allowed plugin. Here is what my code looks like to configure autosave in the editor, which is working, but I am unable to add the EditorConfig type and get those nice typescript hints to editorConfigurationNoAutosave or getEditorConfigurationWithAutoSave due to errors. For context, our use case of the rich text editor does not always require autosave to be on. Sometimes the RTE is used as part of a form with a discrete "submit" button/action, and sometimes we would like the editor to autosave, hence some of the logic below. If nothing else, hopefully this working example is helpful for others since the react documentation is pretty slim for the editor.

const ColorOptions: ColorOptionType[] = [
	{ color: '#000', label: 'Black' },
	{ color: '#800000', label: 'Maroon' },
...etc ]

const editorConfigurationNoAutosave = {
	fontSize: {
		options: [9, 10, 11, 12, 'default', 14, 18, 24],
	},
	fontColor: {
		colors: ColorOptions,
		columns: 6,
	},
	fontBackgroundColor: {
		colors: ColorOptions,
		columns: 6,
	},
};

const getEditorConfigurationWithAutoSave = (
	onAutoSave: (value: string) => Promise<void>,
) => {
	return {
		...editorConfigurationNoAutosave,
		autosave: {
			save: (editor) => {
				if (typeof onAutoSave === 'function') {
					return onAutoSave(editor.getData());
				}
			},
		},
	};
};


type RichTextEditorProps = {
	value: string;
	onChange: (event: string | React.ChangeEvent<HTMLInputElement>) => void;
	onAutoSave?: (currValue: string) => Promise<void>;
	defaultColor?: string;
	defaultFontSize?: string;
};

export default function RichTextEditor({
	value,
	onChange,
	onAutoSave,
	defaultColor,
	defaultFontSize,
}: RichTextEditorProps) {
	return (
		<CKEditor
			editor={Editor}
			config={
				typeof onAutoSave === 'function'
					? getEditorConfigurationWithAutoSave(onAutoSave)
					: editorConfigurationNoAutosave
			}
			onReady={(editor) => {
				if (defaultFontSize) {
					const size = editor.commands.get('fontSize');
					size?.execute({ value: defaultFontSize });
				}
				if (defaultColor) {
					const size = editor.commands.get('fontColor');
					size?.execute({ value: defaultColor });
				}
			}}
			data={value}
			onChange={(event, editor) => {
				const data = editor.getData();
				onChange(data);
			}}
		/>
	);
}

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).