{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-auto-save",
  "framework": "react",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "auto-save",
  "dependencies": [
    "@syncfusion/ej2-react-richtexteditor"
  ],
  "description": "Rich text editor persists the draft automatically while the user edits its content.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/rich-text-editor-auto-save.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-auto-save/RichTextEditor.tsx",
      "content": "/**\n * Rich Text Editor Auto Save sample\n */\nimport * as React from 'react';\nimport { RichTextEditorComponent, HtmlEditor, Inject, Toolbar, Image, Link, QuickToolbar, type ToolbarSettingsModel, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat } from '@syncfusion/ej2-react-richtexteditor';\nimport {isNullOrUndefined } from '@syncfusion/ej2-base';\nfunction AutoSave() {\n    let savingEle: HTMLDivElement;\n    let savingRef: React.Ref<HTMLDivElement> = (element) => {\n        savingEle = element;\n    };\n    let savedELe: HTMLDivElement;\n    let savedRef: React.Ref<HTMLDivElement> = (element) => {\n        savedELe = element;\n    };\n    let rteObj: RichTextEditorComponent;\n    // Rich Text Editor items list\n    const items: string[] = ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'Blockquote',\n        'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo'];\n    //Rich Text Editor ToolbarSettings\n    const toolbarSettings: ToolbarSettingsModel = {\n        items: items\n    };\n    function updateStatus() {\n        savingEle.style.display = 'block';\n        savedELe.style.display = 'none';\n        setTimeout(() => {\n            if (!isNullOrUndefined(savingEle) && !isNullOrUndefined(savedELe)) {\n                savingEle.style.display = 'none';\n                savedELe.style.display = 'block';\n            }\n        }, 500);\n    }\n    return (\n        <div className='control-pane'>\n            <div className='col-lg-8'>\n                <div className='control-section' id=\"rteAPI\">\n                    <div className='rte-control-section'>\n                        <RichTextEditorComponent id=\"autoSaveRTE\" ref={(richtexteditor) => { rteObj = richtexteditor }}\n                            enablePersistence={true} placeholder={'Start to type a content to save'} saveInterval={5000} toolbarSettings={toolbarSettings} change={updateStatus.bind(this)} >\n                            <h2>Welcome to the Rich Text Editor Demo!📝</h2>\n                                <p style={{ textAlign: 'start' }}>Experience the power of modern content editing with advanced formatting, media embedding, and many other features. You can explore this demo for yourself.</p>\n                                <h5>Explore the Possibilities! 🚀</h5>\n                                <ul>\n                                    <li><b>Highly customizable</b> - You can configure the toolbar, enable/disable features, and fine-tune the editing experience to match your needs.</li>\n                                    <li><b>Seamless content pasting</b> - Copy and paste from Microsoft Word, Outlook, or other editors or sources while preserving formatting, styles, and structure.</li>\n                                    <li><b>Import Word documents</b> - Convert <b>DOCX</b><b> files</b> into editable HTML content inside the editor using the Import from Word feature.</li>\n                                    <li><b>One-click Export</b> - Save your document as <b>PDF</b> 📄 or <b>Word (DOCX)</b> 📝 with just a single click.</li>\n                                    <li><b>@Mentions</b> - Type <span className=\"e-mention-chip\"><a href=\"mailto:albert@gmail.com\" title=\"albert@gmail.com\">@Albert</a></span> to see available suggestions and tag users in your content.</li>\n                                    <li><b>Image Management</b> - Use the File Manager to browse, upload, and manage images within the editor.</li>\n                                </ul>\n                                <p><br /></p>\n                                <h5>Powerful Features!</h5>\n                                <p>A quick overview of the essential features of the Rich Text Editor.<br /></p>\n                                <table className=\"e-rte-table\" style={{ width: '61.0405%', minWidth: '0px', height: '82px' }}>\n                                    <thead>\n                                        <tr>\n                                            <th style={{ width: '29.9807%' }}>Feature<br /></th>\n                                            <th style={{ width: '70.0193%' }}>Description<br /></th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        <tr>\n                                            <td style={{ width: '29.981%' }}>Text Formatting<br /></td>\n                                            <td style={{ width: '70.0193%' }}>Bold, Italic, Underline, Strikethrough, and more.<br /></td>\n                                        </tr>\n                                        <tr>\n                                            <td style={{ width: '29.9807%' }}>Lists &amp; Indentation<br /></td>\n                                            <td style={{ width: '70.019%' }}>Ordered, unordered, nested lists.<br /></td>\n                                        </tr>\n                                        <tr>\n                                            <td style={{ width: '29.9807%' }}>Tables<br /></td>\n                                            <td style={{ width: '70.019%' }}>Insert and edit tables with styling.<br /></td>\n                                        </tr>\n                                        <tr>\n                                            <td style={{ width: '29.9807%' }}>Media Embedding<br /></td>\n                                            <td style={{ width: '70.019%' }}>Images, videos, and iframes.<br /></td>\n                                        </tr>\n                                        <tr>\n                                            <td style={{ width: '29.9807%' }}>Mentions<br /></td>\n                                            <td style={{ width: '70.019%' }}>Tag users and add comments<br /></td>\n                                        </tr>\n                                    </tbody>\n                                </table>\n                                <p><br /></p>\n                                <h5>Effortless Image Handling!</h5>\n                                <p>Insert, resize, align, and manage images seamlessly within the editor.<br /></p>\n                                <p style={{ textAlign: 'center' }}>\n                                    <img alt=\"Sky with sun\" src=\"https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png\" width=\"400\" height=\"200\" className=\"e-rte-image e-imgcenter\" />\n                                </p>\n                                <p><br /></p>\n                                <p style={{ textAlign: 'center' }}><b>\"Great writing begins with a great editor.\"</b><b> ✍️</b> <br /></p>\n                            <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat]} />\n                        </RichTextEditorComponent>\n                        <div id='statusEle' className='current-status'>\n                            <div id='saving' ref={savingRef} style={{ display: 'none' }}>\n                                <div className=\"e-icons e-icon-refresh\"> </div>\n                                <p className='status-text'> Saving changes</p>\n                            </div>\n                            <div id='saved' ref={savedRef} style={{ display: 'none' }}>\n                                <span className=\"e-icons e-icon-tick\"> </span>\n                                <p className='status-text'>Changes saved</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n\n    );\n}\nexport default AutoSave;"
    }
  ]
}