Hiyve Components - v1.0.0
    Preparing search index...

    Interface NoteEditorRenderProps

    Render props for advanced NoteEditor customization.

    Use these to completely customize how specific elements are rendered while still leveraging the component's logic.

    <NoteEditor
      renderProps={{
        renderHeader: (title, defaultContent) => (
          <Box sx={{ display: 'flex', alignItems: 'center' }}>
            <MyCustomIcon />
            {defaultContent}
          </Box>
        ),
        renderToolbar: (editor, defaultContent) => (
          <Box>
            {defaultContent}
            <MyCustomButton onClick={() => editor?.chain().focus().run()} />
          </Box>
        ),
      }}
    />
    interface NoteEditorRenderProps {
        renderHeader?: (title: string, defaultContent: ReactNode) => ReactNode;
        renderSaveStatus?: (
            isSaving: boolean,
            hasUnsavedChanges: boolean,
            lastSaved: Date | null,
            error: string | null,
            defaultContent: ReactNode,
        ) => ReactNode;
        renderToolbar?: (
            editor: Editor | null,
            defaultContent: ReactNode,
        ) => ReactNode;
        renderToolbarExtras?: (editor: Editor | null) => ReactNode;
    }
    Index

    Properties

    renderHeader? renderSaveStatus? renderToolbar? renderToolbarExtras?

    Properties

    renderHeader?: (title: string, defaultContent: ReactNode) => ReactNode

    Custom render function for the header.

    Type Declaration

      • (title: string, defaultContent: ReactNode): ReactNode

      • Parameters

        • title: string

          The header title

        • defaultContent: ReactNode

          The default rendered header

        Returns ReactNode

        Custom React content for the header

    renderSaveStatus?: (
        isSaving: boolean,
        hasUnsavedChanges: boolean,
        lastSaved: Date | null,
        error: string | null,
        defaultContent: ReactNode,
    ) => ReactNode

    Custom render function for the save status indicator.

    Type Declaration

      • (
            isSaving: boolean,
            hasUnsavedChanges: boolean,
            lastSaved: Date | null,
            error: string | null,
            defaultContent: ReactNode,
        ): ReactNode

      • Parameters

        • isSaving: boolean

          Whether currently saving

        • hasUnsavedChanges: boolean

          Whether there are unsaved changes

        • lastSaved: Date | null

          Last saved timestamp

        • error: string | null

          Error message if any

        • defaultContent: ReactNode

          The default rendered status

        Returns ReactNode

        Custom React content for the status indicator

    renderToolbar?: (editor: Editor | null, defaultContent: ReactNode) => ReactNode

    Custom render function for the toolbar.

    Type Declaration

      • (editor: Editor | null, defaultContent: ReactNode): ReactNode

      • Parameters

        • editor: Editor | null

          The TipTap editor instance

        • defaultContent: ReactNode

          The default rendered toolbar

        Returns ReactNode

        Custom React content for the toolbar

    renderToolbarExtras?: (editor: Editor | null) => ReactNode

    Inline adornment rendered inside the default toolbar's flex container, positioned after the formatting buttons but before the trailing PDF-export spacer. Use this instead of renderToolbar when you just want to slot one extra control (e.g. an AI Magic button) into the existing toolbar without reconstructing it.

    Settings

    Member Visibility

    On This Page

    Properties