What is the idiomatic way of passing dynamic config to an editor instance?

[chrisui]

From the examples I've seen I can see how a single instance of an editor can be configured by passing config to a plugin or the editor at initialisation time. For example using an env variable for a openai key or calling *Plugin.configure() in the top-level array declaration of editorPlugins in the provided project template.

However I want to have configuration which is dynamic per editor instance, typically accessible within a plugin to adjust behaviour.

Eg. I want to instantiate an editor with different document ids allowing for both a) backend auto save api and b) backend export api called from a plugin, different ai api keys based on customer owning the document, and a callback which the auto save plugin can call.

<MyEditor
  documentId="000"
  onAutoSave={() => { ... }}
  openaiApiKey="secret"
/>

I see a few options such as having a useMemo wrapped plugins array or using the editor.config api however I don't get a sense of what is idiomatic.

Both the mentioned options there seem a bit clunky. Ie. I can't imagine re-creating plugin instances between document loads is optimal (presuming this means I have to re-create the editor and re-mount?) and seems heavy handed to have to wrap up simple prop value changes with some imperative api when this is a react based framework.

Feel I'm missing something obvious 😅

[zbeyens]

You could create a ConfigPlugin and use store hooks like editor.setOption(ConfigPlugin, ...)

[dpnova]

we have a hook useEditorPlugins

we use that hook in a wrapper component to get the editor with the plugin config

and then include it at the same level as things like the DndProvider