{t('common.viewingAs')}
\n Locale: {locale}\n\n {cleaned}\n {encoded && (\n \n {encoded}\n \n )}\n
\n )\n}\n```\n\n**Key points for manual handling (legacy approach)**:\n- Place `data-prepr-edit-target` on the root element (e.g., ``)\n- Render the cleaned text normally\n- Put encoded text in a hidden `` for edit mode detection\n- Add `suppressHydrationWarning` to prevent React warnings\n\n**Upgrade to v2.2.0+** to eliminate this manual work and benefit from automatic cleaning!\n\n## 📊 How It Works\n\n### Middleware Functionality\n\nThe middleware automatically:\n1. **Generates customer IDs**: Creates unique visitor identifiers\n2. **Tracks UTM parameters**: Captures marketing campaign data\n3. **Manages segments**: Handles audience segmentation\n4. **Processes A/B tests**: Manages variant assignments\n5. **Sets headers**: Adds necessary headers for API calls\n\n### Toolbar Features\n\nThe toolbar provides:\n- **Segment selection**: Switch between different audience segments\n- **A/B testing**: Toggle between variants A and B\n- **Edit mode**: Visual content editing capabilities\n- **Reset functionality**: Clear personalization settings\n\n### Visual Editing\n\nWhen edit mode is enabled, the package:\n1. **Auto-cleans stega encoding** (v2.2.0+): Automatically removes invisible Unicode characters that cause layout shifts\n2. **Scans content**: Identifies editable content using Stega encoding\n3. **Highlights elements**: Shows proximity-based highlighting\n4. **Provides overlays**: Click-to-edit functionality\n5. **Syncs with Prepr**: Direct integration with Prepr's editing interface\n\n#### Automatic Stega Cleaning (v2.2.0+)\n\nVersion 2.2.0 introduces automatic stega text cleaning in preview mode:\n- Stega-encoded text is automatically cleaned after page load\n- No layout shifts from invisible Unicode characters\n- Works seamlessly with `letter-spacing` and `ReactWrapBalancer`\n- Data attributes persist for instant edit mode activation\n- Backward compatible with manual split patterns\n\nNo manual stega handling is required in v2.2.0 and later!\n\n## 🔄 Upgrading from v1 to v2\n\nIf you're upgrading from v1, please follow the [Upgrade Guide](./UPGRADE_GUIDE.md) for detailed migration instructions.\n\n## 📜 License\n\nMIT License - see the [LICENSE](./LICENSE) file for details.\n\n## 🆘 Support\n\n- **Documentation**: [Prepr Documentation](https://docs.prepr.io)\n- **Issues**: [GitHub Issues](https://github.com/preprio/prepr-nextjs/issues)\n- **Support**: [Prepr Support](https://prepr.io/support)\n","readmeFilename":"README.md"}