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;
    }
    Index

    Properties

    renderHeader? renderSaveStatus? renderToolbar?

    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

    Settings

    Member Visibility

    On This Page

    Properties