Accessing history object of plate editor

[JesseLiii]

Hi plate community,

Loving the plugin!

I need to access the history for more efficient backend transactions (and to integrate history actions with multiple editors on a page). However, I don't have an editor object n my current implementation of plate. Is there any way to access the history object (the stack, along with undo and redo methods) in the editor component (and ideally float them up to parent components?)

Thanks!

const EditorComponent: React.FC<{ value: any[] }> = ({ value }) => {
	const plugins = useMemo(
		() =>
			createMyPlugins([
				// Mark Plugins
				...TextMarkPlugins,
				// elements
				...BlockPlugins,
				// Commands,
				...CommandPlugins,
				...FormatPlugins,
				createBlockPlugin(),
				createComboboxPlugin(),
				// createHistoryPlugin(),
				createNodeIdPlugin({
					options: {
						idCreator: uuidv4,
					},
				}),
			]),
		[]
	);
  
	return (
		<div>
			<Plate<MyValue>
				editableProps={editableProps}
				value={value}
				onChange={(value) => {
					console.log(value);
				}}
				plugins={plugins}
				id='editor'
			>
				<EditorFloatingMenu />
				<EditorSlashMenu />
			</Plate>
		</div>
	);
};

[JesseLiii]

I figured it out :
I simply added
withOverrides: (editor) => { editor.addMark = () => {}; return editor; },
to the plugin

[JesseLiii]

Actually, this disables addMark for all elements, while I need to disable it only for children of a specific block-element.

[12joan]

I think you meant to reply to your other discussion. 🙂

As for how to access the editor instance, there are various ways depending on what you want to do with it. Children of the PlateProvider or Plate component can access it using usePlateEditorState. Plugins can access it in various ways, such as through event handlers, then and withOverride. If you want to pass the editor object up the component tree, lifting up a PlateProvider is the preferred method. Failing that, you can add a child of Plate that passes it up manually using use[Layout]Effect.

[JesseLiii]

Hi 12joan, thanks for the response!

It seems like if I want to access the editor object of multiple editors in the same react component (I have a multi-editor set up, and need their histories as I have cross-editor drag & drop and need to undo both at the same time), I would have to manually pass the editor every time a change happens in any of the editors to a central context?

The logical thing to do would be to hold all the editor objects in the central spot and pass them down to components, but using createMyPlateEditor and passing it as the editor to the component seems to be ignored and the editor object remains empty and unchanged.

Is there no way to do this? Is the only way to essentially pass the editor object up on every change using a custom Plate child component?

[12joan]

Unfortunately, Slate cannot currently be used as a controlled component, so you'll have to code imperatively if you want to control it from the outside. There are various patterns you can use to do this, which have been discussed in serveral different Discussions (although I can't remember which ones).

My advice would be to use a reducer in your top-level component and pass down a dispatch function using context that Plate editors can use to register and deregister themselves on mount/unmount.

[zbeyens]

Solved in #2465.