@hiyve/react-notes

Rich text meeting notes editor with auto-save and PDF export for Hiyve.

Installation

npx @hiyve/cli login
npm install @hiyve/react-notes
Copy

Quick Start

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

function MeetingNotes() {
  return (
    <HiyveProvider token={roomToken}>
      <NoteEditor
        title="Meeting Notes"
        enableAutoSave
        onSave={(note) => console.log('Saved:', note.id)}
      />
    </HiyveProvider>
  );
}
Copy

Components

Dialogs

CreateNoteDialog

Dialog for creating a new note with a custom name. Handles file creation via the client API and calls back with the new file ID and data.

Hooks

Utilities

NoteEditor Props

Imperative Handle (Ref)

NoteEditor exposes a ref for external control:

import { useRef } from 'react';
import { NoteEditor, type NoteEditorRef } from '@hiyve/react-notes';

function NotesPanel() {
  const editorRef = useRef<NoteEditorRef>(null);

  return (
    <div>
      <button
        onClick={() => editorRef.current?.save()}
        disabled={editorRef.current?.isSaving}
      >
        Save Now
      </button>
      <NoteEditor ref={editorRef} enableAutoSave />
    </div>
  );
}
Copy

The ref provides: save(), isSaving, hasUnsavedChanges, lastSaved, and fileId.

Using Hooks Directly

For custom editor UIs, use the hooks independently:

import { useNoteEditor, useNotePersistence } from '@hiyve/react-notes';

function CustomNoteEditor() {
  const { editor, content, isEmpty, getHTML, focus } = useNoteEditor({
    placeholder: 'Start typing...',
    onUpdate: (content) => console.log('Changed'),
  });

  // Render your own UI around the editor instance
}
Copy

PDF Export

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

async function handleExport() {
  await exportNoteToPdf({
    title: 'Sprint Planning Notes',
    htmlContent: editor.getHTML(),
    authorName: 'Jane Doe',
    pageSize: 'letter',
    orientation: 'portrait',
  });
}
Copy

Session Management

NotesSession provides a complete session workflow -- creating new notes, loading saved notes from file storage, and editing with auto-save:

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

<NotesSession
  labels={{
    emptyState: { message: 'No note open', createButton: 'Create New' },
    header: { newSession: 'New Note' },
  }}
  noteEditorProps={{
    enableAutoSave: true,
    autoSaveInterval: 5000,
  }}
/>
Copy

NotesSessionViewer renders a saved note in read-only mode:

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

<NotesSessionViewer note={savedNoteFile} maxHeight={400} />
Copy

Customization

All visual aspects of the editor are customizable through labels, icons, colors, and styles props. Pass a partial object -- unspecified keys use defaults.

Labels (i18n)

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

<NoteEditor
  labels={{
    title: 'Notas',
    placeholder: 'Escribe tus notas...',
    save: 'Guardar',
    exportPdf: 'Exportar PDF',
    saving: 'Guardando...',
    saved: 'Guardado',
    bold: 'Negrita',
    italic: 'Cursiva',
  }}
/>
Copy

Icons

import { NoteEditor } from '@hiyve/react-notes';
import { FaBold, FaItalic } from 'react-icons/fa';

<NoteEditor
  icons={{
    bold: <FaBold />,
    italic: <FaItalic />,
  }}
/>
Copy

Colors

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

// Light theme
<NoteEditor
  colors={{
    headerBackground: '#f5f5f5',
    editorBackground: '#ffffff',
    editorText: '#212121',
    toolbarBackground: '#fafafa',
    toolbarButtonActive: '#1976d2',
  }}
/>
Copy

Styles

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

// Compact layout
<NoteEditor
  styles={{
    toolbarButtonSize: 28,
    editorPadding: 12,
    editorFontSize: '0.875rem',
    borderRadius: 8,
  }}
/>
Copy

Render Props

Override rendering of the header, toolbar, or save status indicator:

<NoteEditor
  renderProps={{
    renderHeader: (title, defaultContent) => (
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <MyLogo />
        {defaultContent}
      </div>
    ),
    renderToolbar: (editor, defaultContent) => (
      <div>
        {defaultContent}
        <button onClick={() => editor?.chain().focus().toggleBold().run()}>
          Custom Bold
        </button>
      </div>
    ),
  }}
/>
Copy

Defaults and merge functions:

Features

• Rich text formatting (bold, italic, strikethrough, highlight, code)
• Headings (H1, H2, H3)
• Lists (bullet, numbered, task/checkbox)
• Tables with full editing (add/remove rows and columns)
• Blockquotes and horizontal rules
• Auto-save to file storage with debouncing
• PDF export with configurable page size and orientation
• Undo/redo history
• Read-only mode for viewing saved notes
• Dark theme matching other Hiyve components

Constants

Requirements

• @hiyve/react (^2.0.0) -- components must be rendered inside HiyveProvider
• @hiyve/react-collaboration (^1.0.0) -- optional, needed for NotesSession and NotesSessionViewer
• @hiyve/utilities (^1.0.0)
• @mui/material (^5.0.0 || ^6.0.0) and @mui/icons-material
• @emotion/react (^11.0.0) and @emotion/styled (^11.0.0)
• react (^18.0.0)

Rich text editor dependencies are bundled with the package -- no separate installation needed.

License

Proprietary - Hiyve SDK