feat(editor-preview-asyncapi): allow passing additional config (#5007)

Refs #5006

src/plugins/editor-preview-asyncapi/components/AsyncAPIReactComponent.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const AsyncAPIReactComponent = React.lazy(
+  () => import('@asyncapi/react-component/lib/esm/without-parser.js')
+);
+
+export default AsyncAPIReactComponent;

src/plugins/editor-preview-asyncapi/components/EditorPreviewAsyncAPI/EditorPreviewAsyncAPI.jsx

@@ -1,10 +1,6 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { Suspense, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-const AsyncApiReactComponent = React.lazy(
-  () => import('@asyncapi/react-component/lib/esm/without-parser.js')
-);
-
 const Loading = () => <div>Loading...</div>;
 const Parsing = () => <div>Parsing...</div>;
 
@@ -14,12 +10,14 @@ const EditorPreviewAsyncAPI = ({
   editorPreviewAsyncAPISelectors,
 }) => {
   const ParseErrors = getComponent('EditorPreviewAsyncAPIParseErrors');
+  const AsyncAPIReactComponent = getComponent('EditorPreviewAsyncAPIReactComponent');
+
   const isParseInProgress = editorPreviewAsyncAPISelectors.selectIsParseInProgress();
   const isParseSuccess = editorPreviewAsyncAPISelectors.selectIsParseSuccess();
   const isParseFailure = editorPreviewAsyncAPISelectors.selectIsParseFailure();
   const parseResult = editorPreviewAsyncAPISelectors.selectParseResult();
   const parseErrors = editorPreviewAsyncAPISelectors.selectParseErrors();
-  const config = { show: { errors: true } };
+  const config = useMemo(() => ({ show: { errors: true } }), []);
 
   useEffect(() => {
     return () => {
@@ -31,7 +29,7 @@ const EditorPreviewAsyncAPI = ({
     <div className="swagger-editor__editor-preview-asyncapi">
       <Suspense fallback={<Loading />}>
         {isParseInProgress && <Parsing />}
-        {isParseSuccess && <AsyncApiReactComponent schema={parseResult} config={config} />}
+        {isParseSuccess && <AsyncAPIReactComponent schema={parseResult} config={config} />}
         {isParseFailure && <ParseErrors errors={parseErrors} />}
       </Suspense>
     </div>

src/plugins/editor-preview-asyncapi/index.js

@@ -1,4 +1,5 @@
 import EditorPreviewAsyncAPI from './components/EditorPreviewAsyncAPI/EditorPreviewAsyncAPI.jsx';
+import AsyncAPIReactComponent from './components/AsyncAPIReactComponent.jsx';
 import ParseErrors from './components/ParseErrors/ParseErrors.jsx';
 import EditorPreviewWrapper from './wrap-components/EditorPreviewWrapper.jsx';
 import { previewUnmounted, parse, parseStarted, parseSuccess, parseFailure } from './actions.js';
@@ -20,6 +21,7 @@ const EditorPreviewAsyncAPIPlugin = () => ({
   components: {
     EditorPreviewAsyncAPI,
     EditorPreviewAsyncAPIParseErrors: ParseErrors,
+    EditorPreviewAsyncAPIReactComponent: AsyncAPIReactComponent,
   },
   wrapComponents: {
     EditorPreview: EditorPreviewWrapper,