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

    Interface AssignmentEditorProps

    Props for the AssignmentEditor component.

    The AssignmentEditor provides a rich text editing interface using TipTap with assignment-specific features including due dates, time estimates, status tracking, user assignment, and per-user activity tracking.

    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
    • Due date and time estimate metadata
    • Status tracking (not started, in progress, on hold, completed)
    • User assignment with participant selection
    • Per-user activity tracking with session timers
    • Activity dashboard for monitoring team progress
    • Full customization (labels, icons, colors, styles)

    Basic usage inside HiyveProvider:

    import { AssignmentEditor } from '@hiyve/react-assignments';

    function AssignmentsSidebar() {
      return <AssignmentEditor title="Assignments" maxHeight={500} enableAutoSave />;
    }

    With customization:

    <AssignmentEditor
      title="Design Review"
      initialTitle="Sprint Planning Task"
      placeholder="Describe the assignment..."
      showMetadata
      showTabs
      enableAutoSave
      enableActivityTracking
      autoSaveInterval={5000}
      labels={{ saving: 'Saving...', saved: 'All changes saved' }}
      onSave={(assignment) => console.log('Saved:', assignment.id)}
      onStatusChange={(status) => console.log('Status:', status)}
    />
    interface AssignmentEditorProps {
        additionalTabs?: readonly {
            id: string;
            label: string;
            render: () => ReactNode;
        }[];
        assignmentTitle?: string;
        autoSaveInterval?: number;
        autoStartSession?: boolean;
        colors?: Partial<AssignmentEditorColors>;
        completedBy?: string[];
        disabled?: boolean;
        enableActivityTracking?: boolean;
        enableAutoSave?: boolean;
        enableFileEmbeds?: boolean;
        enableHighlight?: boolean;
        enableTableSupport?: boolean;
        enableTaskLists?: boolean;
        fileId?: string;
        fileLocation?: string;
        footer?: ReactNode;
        hideAssignedTo?: boolean;
        hideBuiltInActivityTabs?: boolean;
        hideCompleteToggle?: boolean;
        icons?: Partial<AssignmentEditorIcons>;
        initialAssignment?: AssignmentFile;
        initialContent?: JSONContent;
        initialTitle?: string;
        isOwner?: boolean;
        labels?: Partial<AssignmentEditorLabels>;
        maxHeight?: string | number;
        minHeight?: string | number;
        onActivitySessionEnd?: (session: ActivitySession, userId: string) => void;
        onActivityTimerChange?: (state: ActivityTimerSnapshot) => void;
        onAutoSave?: (fileId: string) => void;
        onBlur?: () => void;
        onChange?: (content: JSONContent) => void;
        onClose?: () => void;
        onCompletedByChange?: (completedBy: string[]) => void;
        onFocus?: () => void;
        onOpenEmbed?: EmbedOpenCallback;
        onOpenFilePicker?: () => void;
        onPickFile?: EmbedPickerCallback;
        onSave?: (assignment: AssignmentFile) => void;
        onSaveError?: (error: Error) => void;
        onStatusChange?: (status: AssignmentStatus) => void;
        onTitleChange?: (title: string) => void;
        participantsOverride?: readonly { userId: string; userName?: string }[];
        placeholder?: string;
        practicedMinutes?: number;
        readOnly?: boolean;
        renderProps?: AssignmentEditorRenderProps;
        resolveFile?: EmbedFileResolver;
        restrictActivityToAssignees?: boolean;
        showHeader?: boolean;
        showMetadata?: boolean;
        showTabs?: boolean;
        showTitleInput?: boolean;
        showToolbar?: boolean;
        styles?: Partial<AssignmentEditorStyles>;
        sx?: SxProps<Theme>;
        title?: string;
        userId?: string;
        userName?: string;
    }
    Index

    Properties

    additionalTabs? assignmentTitle? autoSaveInterval? autoStartSession? colors? completedBy? disabled? enableActivityTracking? enableAutoSave? enableFileEmbeds? enableHighlight? enableTableSupport? enableTaskLists? fileId? fileLocation? footer? hideAssignedTo? hideBuiltInActivityTabs? hideCompleteToggle? icons? initialAssignment? initialContent? initialTitle? isOwner? labels? maxHeight? minHeight? onActivitySessionEnd? onActivityTimerChange? onAutoSave? onBlur? onChange? onClose? onCompletedByChange? onFocus? onOpenEmbed? onOpenFilePicker? onPickFile? onSave? onSaveError? onStatusChange? onTitleChange? participantsOverride? placeholder? practicedMinutes? readOnly? renderProps? resolveFile? restrictActivityToAssignees? showHeader? showMetadata? showTabs? showTitleInput? showToolbar? styles? sx? title? userId? userName?

    Properties

    additionalTabs?: readonly { id: string; label: string; render: () => ReactNode }[]

    Extra tabs to add after the editor's built-in tabs. Each tab renders its content via the supplied render() function. Used by consumers (e.g. a music app's "Practice" / "Submissions" tabs) to fold app-specific panes into the editor's tab strip rather than wrapping the editor with their own tabs above it. The editor's title bar stays visible above the tabs regardless of which tab is selected.

    assignmentTitle?: string

    Controlled assignment title — when supplied, overrides the editor's internal title state on every render. Pair with onTitleChange for two-way sync. Use this when the consumer renders the title outside the editor (e.g. above its own tab strip) and needs the persistence layer to save with that value.

    autoSaveInterval?: number

    Auto-save interval in milliseconds (default: 3000)

    autoStartSession?: boolean

    Auto-start an activity session when the editor mounts. Only takes effect for assignees (the user is in assignedTo and is not the owner) and when enableActivityTracking is true. The session auto-ends on unmount, so the time spent reading / working on the assignment lands in userActivities without the assignee needing to remember to press Start. The editor exposes the timer state via onActivityTimerChange so the consumer can render the pause/resume UI wherever it fits in their layout. (default: false)

    colors?: Partial<AssignmentEditorColors>

    Custom colors

    completedBy?: string[]

    Optional controlled value for the per-assignee completion list. When provided, the editor renders this value instead of its own internal state, and surfaces all completion changes through onCompletedByChange for the host to apply. Use this when the host needs to mutate completion from outside (e.g. a teacher toggling per-student completion in a separate panel). Omitting the prop falls back to internal state seeded from initialAssignment.completedBy.

    disabled?: boolean

    Whether the panel is disabled

    enableActivityTracking?: boolean

    Enable per-user activity tracking with session timers (default: false)

    enableAutoSave?: boolean

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

    enableFileEmbeds?: boolean

    Enable the inline file embed feature (default: true). Drives the toolbar's "Insert file" action; the actual picker UI is supplied by the consumer via onPickFile.

    enableHighlight?: boolean

    Enable highlighting (default: true)

    enableTableSupport?: boolean

    Enable table support (default: true)

    enableTaskLists?: boolean

    Enable task list support (default: true)

    fileId?: string

    Existing file ID to update (for editing existing assignments)

    fileLocation?: string

    File storage location (default: '/Assignments')

    footer?: ReactNode

    Optional footer content rendered below the active tab content, pinned to the bottom of the editor. Useful for ambient tools the student should always see (e.g. a metronome). Receives no props — the consumer renders whatever they want.

    hideAssignedTo?: boolean

    Hide just the "Assigned to" row inside the metadata panel — useful for non-owners (e.g. students) who shouldn't see who else is on the assignment. Has no effect when showMetadata is false. (default: false)

    hideBuiltInActivityTabs?: boolean

    Suppress the editor's built-in activity tabs entirely (both the owner's "Activity Dashboard" and the assignee's "My Activity"). Activity tracking still runs in the background — only the tab UI is hidden. Use this when the consumer renders its own activity surface via additionalTabs and the built-in tabs would be redundant. (default: false)

    hideCompleteToggle?: boolean

    Suppress the per-viewer "Mark complete" / "Re-open" button in the metadata bar. Set this when completion is driven externally (e.g. the assignment owner toggles each student's status from a separate activity panel rather than letting assignees self-mark). When true, completedBy mutation is the host's responsibility — typically by passing a controlled completedBy array and updating it via the onCompletedByChange callback. (default: false)

    icons?: Partial<AssignmentEditorIcons>

    Custom icons

    initialAssignment?: AssignmentFile

    Initial assignment data to populate all fields

    initialContent?: JSONContent

    Initial content for the editor (TipTap JSON format)

    initialTitle?: string

    Initial title for the assignment

    isOwner?: boolean

    Override ownership check. When true, always treats user as owner.

    labels?: Partial<AssignmentEditorLabels>

    Custom labels for i18n support

    maxHeight?: string | number

    Maximum height before scrolling

    minHeight?: string | number

    Minimum height of the editor

    onActivitySessionEnd?: (session: ActivitySession, userId: string) => void

    Fires synchronously whenever an activity session is ended (Stop button or editor unmount). The consumer can mirror it to its own persistence layer immediately, without waiting on the editor's debounced auto-save — which doesn't get a chance to fire when the editor unmounts. Sub-minute sessions are rounded up to 1 minute by the tracker, matching what's stored in userActivities.

    onActivityTimerChange?: (state: ActivityTimerSnapshot) => void

    Receives the current activity-timer state (and its controls) every time it changes. The consumer renders the pause / resume / stop UI; the editor itself does not draw a timer bar. Only fires when enableActivityTracking is true.

    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

    onClose?: () => void

    Close callback — renders a close button in the title bar

    onCompletedByChange?: (completedBy: string[]) => void

    Callback fired whenever the per-assignee completion list changes (e.g. an assignee clicks Mark complete or Re-open). Hosts use it to disable submission UI and timers for assignees who have marked the assignment complete on their side.

    onFocus?: () => void

    Callback when editor is focused

    onOpenEmbed?: EmbedOpenCallback

    Click handler for an embed card. Typical implementation: open a modal preview. When omitted, embed cards render but aren't clickable.

    onOpenFilePicker?: () => void

    Optional handler for an "Open existing" affordance rendered in the title bar (left of the title field). Useful when the editor was opened on a fresh blank file and the user wants a way back to a file picker. Omit to hide the button.

    onPickFile?: EmbedPickerCallback

    Picker callback fired when the toolbar's "Insert file" action runs. The consumer renders their own picker UI (file manager modal, etc.) and resolves with the chosen file or null if cancelled. The SDK never owns the picker — it owns the schema + insertion.

    onSave?: (assignment: AssignmentFile) => void

    Callback after successful save

    onSaveError?: (error: Error) => void

    Callback on save error

    onStatusChange?: (status: AssignmentStatus) => void

    Callback when assignment status changes

    onTitleChange?: (title: string) => void

    Callback when title changes

    participantsOverride?: readonly { userId: string; userName?: string }[]

    Override for the participant list the metadata panel uses to populate the "assigned to" picker. By default the editor reads participants from useParticipants() (lesson-room context). When the editor is mounted outside a lesson room — e.g. inside the file-manager overlay — the lesson-room context is empty; supply this prop with the consumer's own roster (the teacher's students) so the picker still works.

    placeholder?: string

    Placeholder text when editor is empty

    practicedMinutes?: number

    Total minutes practiced so far. Only consulted in read-only mode, where it's used to display "X min remaining" against the time estimate. Pass the consumer's running total (e.g. PracticeLog minutes plus the live session) so the label ticks down as the student works.

    readOnly?: boolean

    Whether the editor is read-only

    renderProps?: AssignmentEditorRenderProps

    Optional render-prop slots for customising parts of the editor chrome. Mirrors the pattern in NoteEditor so hosts can inject extra controls (e.g. an AI Magic button) into the toolbar without forking the component.

    resolveFile?: EmbedFileResolver

    Resolves a fileId to a renderable URL (presigned link, public URL, blob URL, etc.). The image-kind embed uses this to render an inline thumbnail; other kinds may use it later. Without it, embeds still render with name + icon.

    restrictActivityToAssignees?: boolean

    When true, only assignees see the "My Activity" tab. The owner sees the Activity Dashboard (read-only view of every assignee's progress) but no controls to log their own session — useful when the owner is the teacher who shouldn't be doing the assignment themselves. (default: false — preserves the v1 behaviour where owners get both the dashboard tab and a My Activity tab.)

    showHeader?: boolean

    Show the header (default: true)

    showMetadata?: boolean

    Show the metadata panel with due date, time, status, and assignees (default: false)

    showTabs?: boolean

    Show the tab bar for switching between editor, activity, and my activity views (default: false)

    showTitleInput?: boolean

    Show the title input field (default: true)

    showToolbar?: boolean

    Show the toolbar (default: true)

    styles?: Partial<AssignmentEditorStyles>

    Custom styles

    sx?: SxProps<Theme>

    MUI sx styling prop

    title?: string

    Header title for the assignments panel (default: 'Assignments')

    userId?: string

    Override for the saved authorId / modifiedBy and ownership-derivation userId. When supplied, takes precedence over the lesson-room localParticipant.userId. Required when the editor opens outside a lesson room (e.g. file manager / library) — without this, the SDK's participant context is empty and assignments save with an empty authorId, which then fails ownership checks on reopen.

    userName?: string

    Optional display name paired with userId. Stored as authorName / modifiedBy metadata. Falls back to localParticipant.userName.

    Settings

    Member Visibility

    On This Page

    Properties