import type { ReactElement , ReactNode } from 'react' ; import { AnyExtension , isNullOrUndefined , RemirrorManager } from '@remirror/core' ; import { RemirrorPortals , usePortals } from '@remirror/extension-react-component' ; import { ComponentsTheme } from '@remirror/theme' ; import { I18nProps , I18nProvider , RemirrorContext , useReactFramework , useRemirrorContext , } from './hooks' ; import type { ReactFrameworkProps } from './react-framework' ; /**
 * The props for the main `<Remirror />` component.
 */ export interface RemirrorProps < Extension extends AnyExtension = Remirror . Extensions > extends Omit < ReactFrameworkProps < Extension > , 'stringHandler' | 'manager' > , I18nProps { /**
     * This manager composes the extensions provided and provides the
     * functionality used throughout the editor.
     *
     * It is overridden here since there was an issue with type inference when
     * using the manager inherited from `ReactFrameworkProps`.
     */ manager : RemirrorManager < any > ; /**
     * The optional children which can be passed into the [`Remirror`].
     */ children ? : ReactNode ; default autoRender ? : boolean | 'start' | 'end' ; /**
     * An array of hooks that can be passed through to the `Remirror` component
     * and will be called in the order provided. Each hook receives no props but
     * will have access to the `RemirrorContext`.
     *
     * If you'd like access to more
     * state, you can wrap the `Remirror` component in a custom provider and
     * attach your state there. It can then be accessed inside the hook via
     * context.
     */ hooks ? : Array < ( ) => void > ; } /**
 * The default editor placeholder where the prosemirror editor will be rendered.
 */ export const EditorComponent = ( ) : JSX . Element => { return ( < div className = { ComponentsTheme . EDITOR_WRAPPER } { ... useRemirrorContext ( ) . getRootProps ( ) } />); } ; interface HookComponentProps { /**
     * The hook that will be run within the `RemirrorContext`. For access to other
     * contexts, wrap the `<Remirror />` within other contexts and access their
     * values with `useContext`.
     */ hook : ( ) => void ; } /**
 * A component which exists to call a prop-less hook.
 */ const HookComponent = ( props ) => { props . hook ( ) ; return null ; } ; remarks export function Remirror < Extension extends AnyExtension = Remirror . Extensions > ( props ) { const { children , autoRender , i18n , locale , supportedLocales , hooks = [ ] , ... frameworkProps } = props ; const context = useReactFramework ( frameworkProps ) ; const portals = usePortals ( context . portalContainer ) ; const autoRenderAtStart = autoRender === 'start' || autoRender === true || ( ! children && isNullOrUndefined ( autoRender ) ) ; const autoRenderAtEnd = autoRender === 'end' ; return ( < I18nProvider i18n = { i18n } locale = { locale } supportedLocales = { supportedLocales } > < RemirrorContext . Provider value = { context } > < RemirrorPortals portals = { portals } /> { hooks . map ( ( hook , index ) => ( < HookComponent hook = { hook } key = { index } / > ) ) } { autoRenderAtStart && < EditorComponent />} { children } { autoRenderAtEnd && < EditorComponent />} < /RemirrorContext.Provider> < /I18nProvider>); }