{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-paste-from-ms-word",
  "framework": "react",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "paste-from-ms-word",
  "dependencies": [
    "@syncfusion/ej2-react-dropdowns",
    "@syncfusion/ej2-react-richtexteditor"
  ],
  "description": "Rich text editor with paste-from-Word cleanup rules and a format-prompt dropdown.",
  "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-paste-from-ms-word.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-paste-from-ms-word/RichTextEditor.tsx",
      "content": "/**\n * Rich Text Editor Paste Cleanup sample\n */\nimport { DropDownListComponent, type FieldSettingsModel } from '@syncfusion/ej2-react-dropdowns';\nimport { HtmlEditor, Image, Inject, Link, PasteCleanup, type PasteCleanupSettingsModel, QuickToolbar, RichTextEditorComponent, Toolbar, Table, Video, Audio, ClipBoardCleanup, AutoFormat } from '@syncfusion/ej2-react-richtexteditor';\nimport * as React from 'react';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n\nfunction PasteCleanupRTE() {\n    let rteObj: RichTextEditorComponent;\n    let formatOption: DropDownListComponent;\n    const pasteCleanupSettings: PasteCleanupSettingsModel = {\n        prompt: true,\n        plainText: false,\n        keepFormat: false\n    }\n    let allowedStylePropertiesEle: HTMLInputElement = null;\n    let allowedStylePropertiesRef: React.Ref<HTMLInputElement> = (element) => {\n        allowedStylePropertiesEle = element;\n    };\n    let deniedTagsEle: HTMLInputElement = null;\n    let deniedTagsRef: React.Ref<HTMLInputElement> = (element) => {\n        deniedTagsEle = element;\n    };\n    let deniedAttributesEle: HTMLInputElement = null;\n    let deniedAttributesRef: React.Ref<HTMLInputElement> = element => {\n        deniedAttributesEle = element;\n    };\n    const popupHeight: string = '200px';\n    const value: string = \"prompt\";\n    const fields: FieldSettingsModel = { text: \"text\", value: \"value\" };\n    const formatData: { [key: string]: Object }[] = [\n        { text: 'Prompt', value: 'prompt' },\n        { text: 'Plain Text', value: 'plainText' },\n        { text: 'Keep Format', value: 'keepFormat' },\n        { text: 'Clean Format', value: 'cleanFormat' }\n    ];\n    function formatChange(): void {\n        if (formatOption.value === 'prompt') {\n            rteObj.pasteCleanupSettings.prompt = true;\n        } else if (formatOption.value === 'plainText') {\n            rteObj.pasteCleanupSettings.prompt = false;\n            rteObj.pasteCleanupSettings.plainText = true;\n        } else if (formatOption.value === 'keepFormat') {\n            rteObj.pasteCleanupSettings.prompt = false;\n            rteObj.pasteCleanupSettings.plainText = false;\n            rteObj.pasteCleanupSettings.keepFormat = true;\n        } else if (formatOption.value === 'cleanFormat') {\n            rteObj.pasteCleanupSettings.prompt = false;\n            rteObj.pasteCleanupSettings.plainText = false;\n            rteObj.pasteCleanupSettings.keepFormat = false;\n        }\n    }\n    function rendereComplete(): void {\n        let allowedStylePropsElem: HTMLElement = allowedStylePropertiesEle;\n        let deniedTagsElem: HTMLElement = deniedTagsEle;\n        let deniedAttrsElem: HTMLElement = deniedAttributesEle;\n        allowedStylePropsElem.addEventListener('blur', (e: FocusEvent) => {\n            onPasteCleanupSettingsChange((e.target as HTMLInputElement).value, 'allowedStyleProps');\n        });\n        deniedAttrsElem.addEventListener('blur', (e: FocusEvent) => {\n            onPasteCleanupSettingsChange((e.target as HTMLInputElement).value, 'deniedAttrs');\n        });\n        deniedTagsElem.addEventListener('blur', (e: FocusEvent) => {\n            onPasteCleanupSettingsChange((e.target as HTMLInputElement).value, 'deniedTags');\n        });\n    }\n\n    function onPasteCleanupSettingsChange(value: any, settingsProperty: string): void {\n        if (!isNullOrUndefined(value)) {\n            const arrayValue = value.split(',').map((item) => item.trim().replace(/^['\"]|['\"]$/g, ''));\n            rteObj.pasteCleanupSettings[settingsProperty] = arrayValue.filter((prop) => prop !== '');\n        }\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=\"PasteCleanup\" ref={(richtexteditor) => { rteObj = richtexteditor }}\n                            pasteCleanupSettings={pasteCleanupSettings}>\n                            <h4>Paste Cleanup in Rich Text Editor<br/></h4><p>The Rich Text Editor automatically <strong>cleans up formatted content</strong> when you paste from external sources like Word, Google Docs, or web pages.</p><p><b>Paste Cleanup properties:</b></p>\n                                <ul>\n                                    <li><strong>Prompt </strong>- specifies whether to enable the prompt when pasting in Rich Text Editor\n                                    </li>\n                                    <li><strong>Plain Text </strong>- specifies whether to paste as plain text or not in Rich Text Editor.\n                                    </li>\n                                    <li><strong>Keep Format</strong>- specifies whether to keep or remove the format when pasting in Rich Text Editor.\n                                    </li>\n                                    <li><strong>Denied Tags</strong> - specifies the tags to restrict when pasting in Rich Text Editor.\n                                    </li>\n                                    <li><strong>Denied Attributes</strong> - specifies the attributes to restrict when pasting in Rich Text Editor.\n                                    </li>\n                                    <li><strong>Allowed Style Properties</strong> - specifies the allowed style properties when pasting in Rich Text Editor.\n                                    </li>\n                                </ul>\n                                <p><span><strong>Try It Out!</strong></span></p><p>Copy content from a web page or document and paste it here. The editor will display a prompt and allow you to input your options.</p>\n                            <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat]} />\n                        </RichTextEditorComponent>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n}\nexport default PasteCleanupRTE;"
    }
  ]
}