Anyway I can have one toolbar and multiple fields on page?

[azankorejo]

Hello everybody,

I'm creating feature where I will have many editors but the editors will be at different places on the page and what I want is that to have one toolbar controlling each and every editor on the page.

e.g.

[zbeyens]

You can either create multiple controlled editors or use id parameter in editor hooks like useEditorRef or useEditorSelector. Most toolbar components do not support id prop so you'd need to fork hooks like these

plate/packages/plate-utils/src/useMarkToolbarButton.ts

Lines 4 to 39 in c86175c

	export const useMarkToolbarButtonState = ({
	nodeType,
	clear,
	}: {
	nodeType: string;
	clear?: string | string[];
	}) => {
	const pressed = useEditorSelector(
	(editor) => isMarkActive(editor, nodeType),
	[nodeType]
	);
	return {
	pressed,
	nodeType,
	clear,
	};
	};
	export const useMarkToolbarButton = (
	state: ReturnType<typeof useMarkToolbarButtonState>
	) => {
	const editor = useEditorRef();
	return {
	props: {
	pressed: state.pressed,
	onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => {
	e.preventDefault();
	},
	onClick: () => {
	toggleMark(editor, { key: state.nodeType, clear: state.clear });
	},
	},
	};
	};

The most efficient solution would be to add a new provider in core that stores an activeId used editor hooks if defined.

[azankorejo]

Ahh great thanks for the help @zbeyens
I'll try these approaches.