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

    Interface NoteEditorProps

    Props for the NoteEditor component.

    The NoteEditor provides a rich text editing interface using TipTap with support for tables, task lists, and auto-save to S3.

    Features:

    • Rich text formatting (bold, italic, strikethrough, highlight)
    • Headings (H1, H2, H3)
    • Lists (bullet, numbered, task)
    • Tables with full editing support
    • Blockquotes and horizontal rules
    • Auto-save to S3 with debouncing
    • PDF export
    • Full customization (labels, icons, colors, styles)

    Basic usage inside HiyveProvider:

    import { NoteEditor } from '@hiyve/react-notes';

    function NotesSidebar() {
      return <NoteEditor title="Notes" maxHeight={500} enableAutoSave />;
    }

    With customization:

    <NoteEditor
      title="Meeting Notes"
      initialTitle="Sprint Planning"
      placeholder="Take notes here..."
      enableAutoSave
      autoSaveInterval={5000}
      labels={{ saving: 'Saving...', saved: 'All changes saved' }}
      onSave={(note) => console.log('Saved:', note.id)}
    />
    interface NoteEditorProps {
        autoSaveInterval?: number;
        colors?: Partial<NoteEditorColors>;
        disabled?: boolean;
        enableAutoSave?: boolean;
        enableHighlight?: boolean;
        enablePdfExport?: boolean;
        enableTableSupport?: boolean;
        enableTaskLists?: boolean;
        enableTextColor?: boolean;
        fileId?: string;
        fileLocation?: string;
        icons?: Partial<NoteEditorIcons>;
        initialContent?: JSONContent;
        initialTitle?: string;
        labels?: Partial<NoteEditorLabels>;
        maxHeight?: string | number;
        minHeight?: string | number;
        onAutoSave?: (fileId: string) => void;
        onBlur?: () => void;
        onChange?: (content: JSONContent) => void;
        onFocus?: () => void;
        onSave?: (note: NoteFile) => void;
        onSaveError?: (error: Error) => void;
        onTitleChange?: (title: string) => void;
        placeholder?: string;
        readOnly?: boolean;
        renderProps?: NoteEditorRenderProps;
        showHeader?: boolean;
        showTitleInput?: boolean;
        showToolbar?: boolean;
        styles?: Partial<NoteEditorStyles>;
        sx?: SxProps<Theme>;
        title?: string;
    }
    Index

    Properties

    autoSaveInterval? colors? disabled? enableAutoSave? enableHighlight? enablePdfExport? enableTableSupport? enableTaskLists? enableTextColor? fileId? fileLocation? icons? initialContent? initialTitle? labels? maxHeight? minHeight? onAutoSave? onBlur? onChange? onFocus? onSave? onSaveError? onTitleChange? placeholder? readOnly? renderProps? showHeader? showTitleInput? showToolbar? styles? sx? title?

    Properties

    autoSaveInterval?: number

    Auto-save interval in milliseconds (default: 3000)

    colors?: Partial<NoteEditorColors>

    Custom colors

    disabled?: boolean

    Whether the panel is disabled

    enableAutoSave?: boolean

    Enable auto-save to file storage (default: false)

    enableHighlight?: boolean

    Enable highlighting (default: true)

    enablePdfExport?: boolean

    Enable PDF export button (default: true)

    enableTableSupport?: boolean

    Enable table support (default: true)

    enableTaskLists?: boolean

    Enable task list support (default: true)

    enableTextColor?: boolean

    Enable text color picker (default: true)

    fileId?: string

    Existing file ID to update (for editing existing notes)

    fileLocation?: string

    File storage location (default: '/Notes')

    icons?: Partial<NoteEditorIcons>

    Custom icons

    initialContent?: JSONContent

    Initial content for the editor (TipTap JSON format)

    initialTitle?: string

    Initial title for the note

    labels?: Partial<NoteEditorLabels>

    Custom labels for i18n support

    maxHeight?: string | number

    Maximum height before scrolling

    minHeight?: string | number

    Minimum height of the editor

    onAutoSave?: (fileId: string) => void

    Callback after successful auto-save with file ID

    onBlur?: () => void

    Callback when editor is blurred

    onChange?: (content: JSONContent) => void

    Callback when content changes

    onFocus?: () => void

    Callback when editor is focused

    onSave?: (note: NoteFile) => void

    Callback after successful save

    onSaveError?: (error: Error) => void

    Callback on save error

    onTitleChange?: (title: string) => void

    Callback when title changes

    placeholder?: string

    Placeholder text when editor is empty

    readOnly?: boolean

    Whether the editor is read-only

    renderProps?: NoteEditorRenderProps

    Render props for advanced customization

    showHeader?: boolean

    Show the header (default: true)

    showTitleInput?: boolean

    Show the title input field (default: true)

    showToolbar?: boolean

    Show the toolbar (default: true)

    styles?: Partial<NoteEditorStyles>

    Custom styles

    sx?: SxProps<Theme>

    MUI sx styling prop

    title?: string

    Header title for the notes panel (default: 'Notes')

    Settings

    Member Visibility

    On This Page

    Properties