{"library":"react-contenteditable","title":"React ContentEditable Component","description":"react-contenteditable is a React component that simplifies the integration of the native `contenteditable` HTML attribute into React applications. It provides a controlled component approach, allowing developers to manage the `innerHTML` of an editable HTML element (like a `div` or `article`) via React state. The package, currently at version 3.3.7, addresses many common challenges associated with `contenteditable` in React, such as cursor jumping and state synchronization, often encountered when directly managing DOM mutations. It abstracts the use of `dangerouslySetInnerHTML`, providing a safer and more idiomatic React interface. While the component is designed to mitigate typical `contenteditable` pitfalls, users should be aware of inherent complexities like input sanitization to prevent XSS attacks and managing rich text pasting. The library ships with TypeScript types.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-contenteditable"],"cli":null},"imports":["import ContentEditable from 'react-contenteditable'","const ContentEditable = require('react-contenteditable')"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ContentEditable from 'react-contenteditable';\n\nclass MyEditor extends React.Component {\n  constructor() {\n    super();\n    this.contentEditable = React.createRef();\n    this.state = { html: \"<p><b>Hello</b> <i>World</i></p>\" };\n  }\n\n  handleChange = (evt) => {\n    this.setState({ html: evt.target.value });\n  };\n\n  // Optional: Sanitize content on blur to prevent XSS or unwanted formatting\n  handleBlur = () => {\n    console.log('Final content:', this.state.html);\n    // In a real app, you might sanitize or save the content here\n    // E.g., this.setState({ html: sanitizeHtml(this.state.html) });\n  };\n\n  render() {\n    return (\n      <ContentEditable\n        innerRef={this.contentEditable}\n        html={this.state.html} // innerHTML of the editable div\n        disabled={false}      // use true to disable editing\n        onChange={this.handleChange} // handle innerHTML change\n        onBlur={this.handleBlur}\n        tagName='article'     // Use a custom HTML tag (uses a div by default)\n        suppressContentEditableWarning={true} // Suppress React's contentEditable warning\n        style={{ border: '1px solid #ccc', minHeight: '100px', padding: '10px' }}\n      />\n    );\n  }\n}\n\nexport default MyEditor;","lang":"javascript","description":"Demonstrates a basic rich text editor using a class component, managing HTML content in state, and handling changes.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}