How to inject additional/custom props on Plate?

[bahrijar]

so I created a form in the plate editor, besides using the readonly property, I want to add an additional property for example named “mode” where this mode has 2 values, namely form or pdf. but I don't know how to add a custom property to the <Plate/> component.

[zbeyens]

You can do it on PlateContent

[bahrijar]

ok, but how can i access the property globally on the plugin (component)?
Like
const editor = useMyEditorState()

i can access the id of editor

[bahrijar]

is it possible to access properties to other plugins like this hook? when I access the Plate id it can be like this

const editor = useMyEditorState()
console.log(editor.id)

[bahrijar]

hello @zbeyens can you tell me about my replies please?

[abhi-bc]

@bahrijar One way to do it is via PlatePlugin. See docs here https://platejs.org/docs/plugin-context#getOption

You can define a plugin, and setOption as whatever you want and then access it easily like this

const MyComponent = () => {
  const { editor, plugin, useOption, type } = useEditorPlugin(MyPlugin);
  
  return <div>{useOption('myOption')}</div>;
};

[bahrijar]

What if the value is dynamic? Can it be done through the Plate plugin?