Other Features

Explore all available features and configure which tools appear in the toolbar.

Basic Usage

Configure which tools appear in the toolbar using the toolbarOptions prop:

// Minimal toolbar
<HeliosEditor
  toolbarOptions={['bold', 'italic', 'link']}
  // ... other props
/>

// Full toolbar (default)
<HeliosEditor
  toolbarOptions={[
    'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript',
    'highlight', 'fontColor', 'headings', 'fontFamily',
    'lineSpacing', 'alignLeft', 'alignCenter', 'alignRight',
    'alignJustify', 'unorderedList', 'orderedList', 'todoList',
    'increaseIndent', 'decreaseIndent', 'link', 'insertImage',
    'blockquote', 'codeBlock', 'pageBreak', 'caseChange', 'insertTable',
    'comments', 'mentionUsers', // Collaboration features
    'importWord', 'exportWord', 'exportPDF' // Import/Export features
  ]}
  // ... other props
/>

Available Options

Basic Formatting

bold

italic

underline

strikethrough

subscript

superscript

highlight

fontColor

Structure

headings

fontFamily

lineSpacing

alignLeft

alignCenter

alignRight

alignJustify

Lists & Indentation

unorderedList

orderedList

todoList

increaseIndent

decreaseIndent

Content

link

insertImage

blockquote

codeBlock

insertTable

pageBreak

Collaboration

comments

mentionUsers

comments - Add, view, and manage comments on selected text
mentionUsers - Tag and mention users in the document

Import/Export

importWord

exportWord

exportPDF

importWord - Import from Word (.docx) files
exportWord - Export to Word (.doc) format
exportPDF - Export to PDF and download

Utilities

caseChange

Example: Blog Editor

<HeliosEditor
  value={content}
  onChange={setContent}
  placeholder="Write your blog post..."
  toolbarOptions={[
    "bold",
    "italic",
    "underline",
    "highlight",
    "headings",
    "alignLeft",
    "alignCenter",
    "alignRight",
    "unorderedList",
    "orderedList",
    "link",
    "insertImage",
    "blockquote",
    "insertTable",
  ]}
/>