chore(react-monaco-editor): resolve issues related to React 18 types

Author: mainframev

packages/react-monaco-editor/src/components/EditorErrorHandler.tsx

@@ -22,7 +22,10 @@ interface IEditorErrorBoundaryState {
  * The example preview should be rendered as a child of this component. (This component can't just
  * render the preview directly because error boundaries only catch errors in passed-in children.)
  */
-export class EditorErrorBoundary extends React.Component<IEditorErrorBoundaryProps, IEditorErrorBoundaryState> {
+export class EditorErrorBoundary extends React.Component<
+  React.PropsWithChildren<IEditorErrorBoundaryProps>,
+  IEditorErrorBoundaryState
+> {
   public state: IEditorErrorBoundaryState = {};
   private _lastGoodChildren: React.ReactNode;
   private _lastErrorTime: number | undefined;

packages/react-monaco-editor/src/components/EditorWrapper.tsx

@@ -79,6 +79,6 @@ export const EditorWrapper: React.FunctionComponent<IEditorWrapperProps> = props
   );
 };
 
-const EditorPreview: React.FunctionComponent<{}> = props => {
-  return <div {...props} />;
+const EditorPreview: React.FunctionComponent<React.PropsWithChildren<unknown>> = props => {
+  return <div {...props}>{props.children}</div>;
 };

packages/react-monaco-editor/src/components/EditorWrapper.types.ts

@@ -12,7 +12,7 @@ export interface IEditorWrapperProps {
   editorClassName?: string;
 
   /** Custom component for the preview. It **must** render the children passed in. */
-  previewAs?: React.ComponentType<{}>;
+  previewAs?: React.ComponentType<React.PropsWithChildren>;
 
   /** Props to use on the wrapper for the rendered example. */
   previewProps?: {};

packages/react-monaco-editor/src/components/TypeScriptSnippet.tsx

@@ -73,7 +73,7 @@ export interface ITypeScriptSnippetProps {
 }
 
 /** TypeScript code snippet with a theme similar to Monaco's VS light. */
-export const TypeScriptSnippet: React.FunctionComponent<ITypeScriptSnippetProps> = props => {
+export const TypeScriptSnippet: React.FunctionComponent<React.PropsWithChildren<ITypeScriptSnippetProps>> = props => {
   return (
     <SyntaxHighlighter className={css(rootClass, props.className)} language="tsx" style={style}>
       {props.children}