Advanced Examples

Real-world examples and use cases for HeliosEditor.

Custom Styled Editor

Create a custom-styled editor with your own branding:

<HeliosEditor
  value={content}
  onChange={setContent}
  height="h-96"
  width="max-w-4xl"
  customClasses={{
    wrapper: "border-2 border-purple-300 rounded-xl",
    toolbar: "bg-purple-50 border-purple-200",
    contentArea: "bg-white min-h-64",
    button: "hover:bg-purple-100",
  }}
  uploadConfig={{
    uploadApiUrl: process.env.REACT_APP_UPLOAD_URL,
    clientId: process.env.REACT_APP_CLIENT_ID,
    clientSecret: process.env.REACT_APP_CLIENT_SECRET,
  }}
/>

Sticky Toolbar Example

Create an editor with a sticky toolbar that stays visible while scrolling:

<HeliosEditor
  value={content}
  onChange={setContent}
  stickyToolbar={true}
  stickyOffset={60} // Account for fixed header
  height="h-screen"
/>

Blog Editor Example

A complete blog editor implementation:

function BlogEditor({ post, onSave }) {
  const [content, setContent] = useState(post.content);

  const uploadConfig = {
    uploadApiUrl: "/api/blog/upload-image",
    clientId: "blog-client",
    clientSecret: process.env.REACT_APP_BLOG_SECRET,
  };

  return (
    <div className="max-w-4xl mx-auto">
      <HeliosEditor
        value={content}
        onChange={setContent}
        placeholder="Write your blog post..."
        height="h-96"
        uploadConfig={uploadConfig}
        toolbarOptions={[
          "bold",
          "italic",
          "underline",
          "highlight",
          "headings",
          "alignLeft",
          "alignCenter",
          "alignRight",
          "unorderedList",
          "orderedList",
          "link",
          "insertImage",
          "blockquote",
          "insertTable",
        ]}
      />
      <button onClick={() => onSave(content)}>Save Post</button>
    </div>
  );
}

Minimal Editor

A minimal editor with only essential formatting options:

<HeliosEditor
  value={content}
  onChange={setContent}
  toolbarOptions={[
    'bold',
    'italic',
    'underline',
    'link'
  ]}
  placeholder="Start typing..."
/>

Read-Only Editor

Display content in read-only mode:

<HeliosEditor
  value={content}
  onChange={setContent}
  readOnly={true}
/>

Full-Featured Editor

An editor with all features enabled:

<HeliosEditor
  value={content}
  onChange={setContent}
  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
  ]}
  uploadConfig={uploadConfig}
/>