Examples & Live Demos

Switch between the Live Preview tab to test interactive editors directly in your browser and the React Code tab to view the complete code snippets.

---

1. Basic Controlled Component

Minimal controlled component using value and onChange with useState.

1. Basic Controlled Component

import { useState } from 'react';
import { Editor, type EditorInit } from '@erag/text-editor-react';
import '@erag/text-editor-react/style.css';

const editorConfig: EditorInit = {
    placeholder: 'Start typing...',
};

export default function App() {
    const [content, setContent] = useState('<p>Hello World!</p>');

    return <Editor value={content} onChange={setContent} init={editorConfig} />;
}

---

2. Custom Toolbar & Menubar

Minimal custom toolbar preset with top menubar disabled.

2. Custom Toolbar Configuration

import { useState } from 'react';
import { Editor, type EditorInit } from '@erag/text-editor-react';
import '@erag/text-editor-react/style.css';

const editorConfig: EditorInit = {
    height: 240,
    menubar: false,
    statusbar: true,
    toolbar:
        'undo redo | bold italic underline | lineheight alignment | ' +
        'bullist numlist checklist outdent indent | removeformat',
};

export default function App() {
    const [content, setContent] = useState('<h2>Customized Editor</h2>');

    return <Editor value={content} onChange={setContent} init={editorConfig} />;
}

---

3. Readonly & Disabled Modes

Dynamically toggle the editor between editable, readonly, and disabled states.

3. Readonly & Disabled Modes

Readonly Mode Disabled State

import { useState } from 'react';
import { Editor } from '@erag/text-editor-react';
import '@erag/text-editor-react/style.css';

export default function App() {
    const [content, setContent] = useState('<p>Dynamic state toggling.</p>');
    const [isReadOnly, setIsReadOnly] = useState(false);
    const [isDisabled, setIsDisabled] = useState(false);

    return (
        <>
            <div className="controls">
                <label>
                    <input
                        type="checkbox"
                        checked={isReadOnly}
                        onChange={(event) => setIsReadOnly(event.target.checked)}
                    />{' '}
                    Readonly
                </label>
                <label>
                    <input
                        type="checkbox"
                        checked={isDisabled}
                        onChange={(event) => setIsDisabled(event.target.checked)}
                    />{' '}
                    Disabled
                </label>
            </div>

            <Editor
                value={content}
                onChange={setContent}
                readOnly={isReadOnly}
                disabled={isDisabled}
            />
        </>
    );
}

---

4. Programmatic Control (Ref API)

Trigger focus, insert HTML, or clear content programmatically using useRef<EditorInstance>.

4. Programmatic API Control

import { useRef, useState } from 'react';
import { Editor, type EditorInstance } from '@erag/text-editor-react';
import '@erag/text-editor-react/style.css';

export default function App() {
    const [content, setContent] = useState('<p>Initial content...</p>');
    const editor = useRef<EditorInstance>(null);

    function insertGreeting(): void {
        editor.current?.focus();
        editor.current?.insertHtml('<p><strong>Hello from API!</strong> 👋</p>');
    }

    function clearContent(): void {
        editor.current?.clear();
    }

    return (
        <>
            <button type="button" onClick={insertGreeting}>
                Insert Greeting
            </button>
            <button type="button" onClick={clearContent}>
                Clear
            </button>

            <Editor ref={editor} value={content} onChange={setContent} />
        </>
    );
}

---

5. Mentions (@) Autocomplete

Type @ in the editor to trigger team member autocomplete.

5. Mentions (@) Autocomplete

import { useState } from 'react';
import {
    Editor,
    type EditorInit,
    type MentionItem,
} from '@erag/text-editor-react';
import '@erag/text-editor-react/style.css';

const teamMembers: MentionItem[] = [
    {
        id: 1,
        label: 'Damon Cross',
        description: 'Senior Backend Developer',
        value: 'damon@example.com',
    },
    {
        id: 2,
        label: 'Ava Mitchell',
        description: 'Product Designer',
        value: 'ava@example.com',
    },
];

const editorConfig: EditorInit = {
    height: 280,
    mentions: {
        enabled: true,
        items: teamMembers,
    },
};

export default function App() {
    const [content, setContent] = useState(
        '<p>Type <strong>@</strong> to mention someone.</p>',
    );

    return <Editor value={content} onChange={setContent} init={editorConfig} />;
}

---

6. Merge Tags ({{) & Slide-out Drawer

Type {{ or open the Merge Tags sidebar drawer.

6. Merge Tags & Drawer

import { useState } from 'react';
import {
    Editor,
    type EditorInit,
    type MergeTagItem,
} from '@erag/text-editor-react';
import '@erag/text-editor-react/style.css';

const tags: MergeTagItem[] = [
    { name: 'Client name', value: 'client.name', group: 'Client Details' },
    { name: 'Proposal ID', value: 'proposal.id', group: 'Proposal' },
];

const editorConfig: EditorInit = {
    height: 280,
    mergeTags: {
        enabled: true,
        items: tags,
    },
};

export default function App() {
    const [content, setContent] = useState(
        '<p>Dear <code>&#123;&#123; client.name &#125;&#125;</code>...</p>',
    );

    return <Editor value={content} onChange={setContent} init={editorConfig} />;
}

---

7. Templates Selection

Select structured document templates from the top menu.

7. Templates Selection

import { useState } from 'react';
import { Editor, type EditorInit } from '@erag/text-editor-react';
import '@erag/text-editor-react/style.css';

const editorConfig: EditorInit = {
    height: 280,
    templates: {
        enabled: true,
        items: [
            {
                id: 'welcome-email',
                label: 'Welcome Email',
                description: 'Client onboarding template',
                content:
                    '<h2>Welcome Aboard!</h2><p>Dear Customer, welcome.</p>',
            },
        ],
    },
};

export default function App() {
    const [content, setContent] = useState('<p>Select a template...</p>');

    return <Editor value={content} onChange={setContent} init={editorConfig} />;
}

---

8. Image Uploads & Progress

Drag & drop or select images with simulated progress reporting.

8. Image Uploads with Progress

import { useState } from 'react';
import {
    Editor,
    type EditorInit,
    type ImagesUploadHandler,
} from '@erag/text-editor-react';
import '@erag/text-editor-react/style.css';

const handleImageUpload: ImagesUploadHandler = async (blobInfo, progress) => {
    return new Promise((resolve) => {
        let p = 0;
        const interval = setInterval(() => {
            p += 25;
            progress(p);
            if (p >= 100) {
                clearInterval(interval);
                resolve('https://picsum.photos/600/350');
            }
        }, 150);
    });
};

const editorConfig: EditorInit = {
    height: 300,
    imagesUploadHandler: handleImageUpload,
};

export default function App() {
    const [content, setContent] = useState('<p>Upload or drag an image...</p>');

    return <Editor value={content} onChange={setContent} init={editorConfig} />;
}

---

9. Enterprise All-in-One Suite

Complete production-grade setup with all plugins, mentions, merge tags, templates, and full toolbar.

9. Full Enterprise Suite

import { useState } from 'react';
import { Editor, type EditorInit } from '@erag/text-editor-react';
import '@erag/text-editor-react/style.css';

const editorConfig: EditorInit = {
    height: 350,
    menubar: true,
    statusbar: true,
    mentions: { enabled: true, items: [...] },
    mergeTags: { enabled: true, items: [...] },
    templates: { enabled: true, items: [...] },
    toolbar: 'undo redo | blocks fontfamily fontsize lineheight | bold italic underline | forecolor backcolor | alignment | bullist numlist checklist outdent indent | link image media table | code preview fullscreen',
};

export default function App() {
    const [content, setContent] = useState('<h2>Enterprise Document Editor 🚀</h2>');

    return <Editor value={content} onChange={setContent} init={editorConfig} />;
}