React Simple WYSIWYG Editor

Common errors

• TypeError: Editor is not a function

  cause Attempting to use `Editor` as a named import when it is the default export of the package.
  fix Change the import statement from `import { Editor } from 'react-simple-wysiwyg';` to `import Editor from 'react-simple-wysiwyg';`

• A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

  cause The `value` prop provided to the `Editor` component changes between `undefined` and a string, typically because the initial state is not set or is conditionally applied.
  fix Ensure the `value` prop is always provided and managed by React state, even if it's an empty string initially. For example, use `const [html, setHtml] = useState('');` to initialize the content as an empty string.

• Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `YourComponent`.

  cause This error often occurs when toolbar button components (e.g., `BtnBold`, `BtnItalic`) are not imported as named exports or are used incorrectly outside the `<Toolbar>` component.
  fix Verify that all toolbar-related components are correctly imported as named exports (e.g., `import { Toolbar, BtnBold } from 'react-simple-wysiwyg';`) and are rendered as children of the `<Toolbar>` component within the `<Editor>`.

Warnings

• deprecated The underlying `document.execCommand` API, which `react-simple-wysiwyg` heavily relies on for rich text operations, is deprecated. While currently functional across most browsers, its long-term support and future behavior are uncertain, and it lacks a modern, standardized replacement.
  Fix: Be aware of this API's status. There is no direct fix provided by the library, as it's an upstream browser API issue. For applications requiring future-proof or more advanced editor capabilities, consider alternatives built on different technologies (e.g., ProseMirror, Lexical).
• gotcha This editor explicitly DOES NOT sanitize HTML input. User-provided content, especially if sourced from untrusted inputs, must be sanitized externally (e.g., using `sanitize-html`) before being rendered or stored, to prevent Cross-Site Scripting (XSS) vulnerabilities.
  Fix: Integrate a robust HTML sanitization library (such as `sanitize-html`) into your application's data flow. Apply sanitization to any HTML content retrieved from the editor's `onChange` event before displaying it or persisting it to a database.
• gotcha The editor does not include advanced features like table editing, image uploading/embedding, spell check, or complex media integration. It focuses on basic text formatting.
  Fix: Evaluate your application's rich text requirements. If advanced features are crucial, explore more feature-rich WYSIWYG editors. If `react-simple-wysiwyg`'s core functionality is sufficient, custom solutions for specific missing features might be integrated, but understand the library's design limitations.
• gotcha By default, the editor does not modify or normalize the raw HTML generated by the browser's `contenteditable` element. This can sometimes result in 'dirty' or inconsistent HTML output depending on user interactions and browser specifics.
  Fix: If clean and consistent HTML output is a critical requirement, you may need to implement a post-processing step to normalize or clean the HTML string received from the editor's `onChange` event, or opt for an editor that offers more explicit control over HTML generation.

Install

• npm install react-simple-wysiwyg npm
• yarn add react-simple-wysiwyg yarn
• pnpm add react-simple-wysiwyg pnpm

Imports

• Editor
  wrong:

  import { Editor } from 'react-simple-wysiwyg'; // Editor is the default export, not named.

  correct:

  import Editor from 'react-simple-wysiwyg';

  The primary WYSIWYG component is exported as a default module.
• Toolbar
  wrong:

  import Toolbar from 'react-simple-wysiwyg'; // Toolbar is a named export.

  correct:

  import { Toolbar } from 'react-simple-wysiwyg';

  Used for composing custom toolbars with specific buttons.
• BtnBold
  wrong:

  const { BtnBold } = require('react-simple-wysiwyg'); // This package is ESM-first and ships TypeScript types. Prefer ESM imports.

  correct:

  import { BtnBold } from 'react-simple-wysiwyg';

  Example of a pre-built toolbar button component. Other buttons like `BtnItalic` are also named exports.
• createButton

  import { createButton } from 'react-simple-wysiwyg';

  A utility function for programmatically creating custom toolbar buttons with `document.execCommand`.

Quickstart

This quickstart demonstrates how to set up `react-simple-wysiwyg` as a controlled component within a React functional component, managing its HTML content using React's `useState` hook. It also shows basic styling and output display.

import { useState } from 'react';
import Editor from 'react-simple-wysiwyg';

function MyRichTextEditor() {
  const [htmlContent, setHtmlContent] = useState('Write your <b>rich text</b> here!');

  // The onChange event provides an event object with e.target.value containing the HTML string.
  function handleChange(e: { target: { value: string } }) {
    setHtmlContent(e.target.value);
  }

  return (
    <div style={{ maxWidth: '800px', margin: '20px auto', padding: '15px', border: '1px solid #ddd', borderRadius: '8px' }}>
      <h2>My Simple Editor</h2>
      <Editor 
        value={htmlContent}
        onChange={handleChange}
        containerProps={{ style: { marginTop: '15px', border: '1px solid #ccc', borderRadius: '4px' } }}
        placeholder="Start typing..."
      />
      <p style={{ marginTop: '20px', fontSize: '0.9em', color: '#666' }}>
        Current HTML Output (for demonstration):
      </p>
      <pre style={{ background: '#f8f8f8', padding: '10px', borderRadius: '4px', overflowX: 'auto' }}>
        {htmlContent}
      </pre>
    </div>
  );
}

// To render this in a typical React application:
// import React from 'react';
// import ReactDOM from 'react-dom/client';
// const root = ReactDOM.createRoot(document.getElementById('root')!);
// root.render(<React.StrictMode><MyRichTextEditor /></React.StrictMode>);