SwaggerEditor@next: passing the configuration to AsyncAPI plugin

[char0n]

We need a way to pass the configuration to AsyncAPI plugin via Swagger UI constructor. Is there a way already?

Refs #4493

[char0n]

This PR (#5007) opened possibility to pass additional configuration to AsyncAPI React Component.

To actually pass a configuration to AsyncAPI React Component, EditorPreviewAsyncAPIReactComponent needs to be wrapped and within the wrapper the custom config can be provided. Here is an example.

const AsyncAPICustomConfigPlugin = () => ({
  wrapComponents: {
    EditorPreviewAsyncAPIReactComponent: (Original) => ({ schema, config: defaultConfig }) => {
      // defaultConfig = { show: { errors: true } }
      const customConfig = { ...defaultConfig, sidebar: true };

      return <Original schema={schema} config={customConfig} />;
    }
  }
})

const root = createRoot(document.getElementById('swagger-editor'));
root.render(
  <SwaggerEditor 
    url="https://raw.githubusercontent.com/asyncapi/spec/v2.6.0/examples/streetlights-kafka.yml"
    plugins=[AsyncAPICustomConfigPlugin] 
  />
);

[char0n]

Released as https://github.com/swagger-api/swagger-editor/releases/tag/v5.0.0-alpha.95