{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "docx-editor-document-protection",
  "framework": "react",
  "type": "registry:component",
  "component": "DocxEditor",
  "variant": "document-protection",
  "dependencies": [
    "@syncfusion/ej2-react-documenteditor",
    "@syncfusion/ej2-react-buttons"
  ],
  "description": "Word document editor with restrict-editing protection, current user, and editing envelope.",
  "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": true,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/docx-editor-document-protection.md"
  },
  "files": [
    {
      "target": "src/components/docx-editor-document-protection/DocxEditor.tsx",
      "content": "import { useEffect, useRef } from 'react';\nimport { DocumentEditorContainerComponent, Toolbar, Ribbon } from '@syncfusion/ej2-react-documenteditor';\nimport { dataProtection } from './datasource';\nimport { SwitchComponent } from '@syncfusion/ej2-react-buttons';\nDocumentEditorContainerComponent.Inject(Toolbar,Ribbon);\nconst SAMPLE_CSS = `\n.flex-container {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n}\n\n.render-mode-info {\n    background: none;\n    border: none;\n    padding-left: 0px;\n}\n\n.render-mode-info .render-mode-info-icon {\n    height: 16px;\n    width: 16px;\n}\n\n.switchLabel {\n    font-family: \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", sans-serif;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.24px;\n    text-align: right;\n    font-size: 14px;\n    margin-bottom: 3px;\n}\n\n.render-mode-info .render-mode-info-icon::before {\n    line-height: normal;\n}\n\n.buttonSwitch {\n    Width: 40px;\n    Height: 24px;\n}\n\nbody {\n    margin: 0;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n}`;\n\nconst DocumentProtection = () => {\n    useEffect(() => {\n        rendereComplete();\n    }, []);\n    let hostUrl: string =\n        \"https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/\";\n    let container = useRef<DocumentEditorContainerComponent>(null);\n    let settings={showRuler: true};\n    const onLoadDefault = (): void => {\n        container.current.documentEditor.open(JSON.stringify(dataProtection));\n        container.current.documentEditor.documentName = \"Document Protection\";\n        container.current.documentChange = (): void => {\n            container.current.documentEditor.focusIn();\n        };\n    };\n    const rendereComplete = (): void => {\n        container.current.showPropertiesPane = false;\n        container.current.documentEditor.currentUser = \"engineer@mycompany.com\";\n        // container.documentEditor.pageOutline = '#E0E0E0';\n        // container.documentEditor.acceptTab = true;\n        container.current.documentEditor.resize();\n        onLoadDefault();\n    };\n    const change = (args):void=>{\n        if (args.checked) {\n            container.current.toolbarMode = 'Ribbon';\n        }\n        else {\n            container.current.toolbarMode = 'Toolbar';\n        }\n    }\n    return (\n        <div className=\"control-pane\">\n            <style>{SAMPLE_CSS}</style>\n            <div className=\"col-lg-9 control-section\">\n                <div className=\"flex-container\">\n                                  <label className=\"switchLabel\" htmlFor=\"toolbarSwitch\">Ribbon UI</label>\n                            <div className=\"e-message render-mode-info\">\n                                <span className=\"e-msg-icon render-mode-info-icon\" title=\"Turn OFF to switch from Ribbon to toolbar UI\"></span>\n                            </div>\n                                <SwitchComponent cssClass=\"buttonSwitch\" id=\"toolbarSwitch\" change={change} checked={true}></SwitchComponent>\n                                </div>\n                <div id=\"documenteditor_container_body\">\n                    <DocumentEditorContainerComponent\n                        id=\"container\"\n                        ref={container}\n                        style={{ display: \"block\" }}\n                                                height={\"590px\"}\n                        toolbarMode= {\"Ribbon\"}\n                        serviceUrl={hostUrl}\n                        enableToolbar={true}\n                        locale=\"en-US\"\n                        documentEditorSettings={settings}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n}\nexport default DocumentProtection;"
    },
    {
      "target": "src/components/docx-editor-document-protection/datasource.ts",
      "content": "export let dataProtection = { \"sfdt\": \"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\" };\n"
    }
  ]
}