react-simple-wysiwyg

Simple and lightweight React WYSIWYG editor. Demo.

Description

Key features:

• pretty small (~6kb gzipped)
• fast
• simple to configure
• simple to extend
• support automatic LTR and RTL text direction switching for Arabic languages

Of course, it's not so powerful as other complex editors. It DOES NOT:

• ✗ change HTML generated by a browser (sometimes it can be dirty)
• ✗ sanitize HTML (you can use sanitize-html)
• ✗ contain advanced features as others (like table editor, image editor and so on)
• ✗ support old browsers (IE 11 is minimal)

If you need a more powerful solution for React, you'd better take a look at more powerful editors like Slate.js, Tiptap, CKEditor, TinyMCE, Quill or Summernote and so on.

Usage

1. Install with npm:

   npm install react-simple-wysiwyg

   or CDN (unpkg.com)

   <script src="//unpkg.com/react-simple-wysiwyg"></script>

2. Use the component

   import { useState } from 'react';
   import Editor from 'react-simple-wysiwyg';
   
   function App() {
     const [html, setHtml] = useState('my <b>HTML</b>');
   
     function onChange(e) {
       setHtml(e.target.value);
     }
   
     return <Editor value={html} onChange={onChange} />;
   }

Using the Basic (Lightweight) Version

If you don't need advanced features like special characters, structured content, or complex list handling, you can use the basic version to save ~2KB:

import { useState } from 'react';
import BasicEditor from '@amboss-mededu/react-simple-wysiwyg/basic';

function App() {
  const [html, setHtml] = useState('my <b>HTML</b>');

  return <BasicEditor value={html} onChange={(e) => setHtml(e.target.value)} />;
}

The basic version excludes:

• Special characters modal
• List buttons (numbered/bulleted lists)
• Structured content parsing (e.target.structured)
• Advanced list keyboard shortcuts (Tab indentation, Enter/Backspace handling)

Component Props

Generally, all props as well as a ref are passed to the content editable element, which is a div element. It also supports a few additional properties to act like an input element:

• autoFocus
• disabled for read-only mode
• name for onChange event
• placeholder
• tagName 'div' by default
• value

You can also set the root container props using containerProps property.

Custom toolbar

import { useState } from 'react';
import Editor, { BtnBold, BtnItalic, Toolbar } from 'react-simple-wysiwyg';

export default function CustomEditor() {
  const [value, setValue] = useState('simple text');

  function onChange(e) {
    setValue(e.target.value);
  }

  return (
    <Editor value={value} onChange={onChange}>
      <Toolbar>
        <BtnBold />
        <BtnItalic />
      </Toolbar>
    </Editor>
  );
}

Check DefaultEditor.tsx for details.

Custom buttons

This library contains only a basic set of buttons, but it can be extended easily. Check buttons.ts and dropdowns.ts for example. Most of the buttons use document.execCommand. You can find a list of all available commands there. This API is deprecated, but there is still no alternative and there are no plans to remove it from browsers. Most of the popular WYSIWYG editors continue using it.

import Editor, {
  BtnBold,
  BtnItalic,
  createButton,
  EditorProvider,
  Toolbar,
} from 'react-simple-wysiwyg';

const BtnAlignCenter = createButton('Align center', '≡', 'justifyCenter');

export default function CustomEditor({ value, onChange }) {
  return (
    <Editor value={value} onChange={onChange}>
      <Toolbar>
        <BtnBold />
        <BtnItalic />
        <BtnAlignCenter />
      </Toolbar>
    </Editor>
  );
}

Editor style and size

By default, it fills the whole width of the parent element, and the height depends on a content height. It could be customized easily. The root element of the editor has rsw-editor css class, so you could use it in your styles.

Also, you can pass containerProps to customize editor appearance. Here's an example how make the editor resizable:

<Editor
  containerProps={{ style: { resize: 'vertical' } }}
  value={html}
  onChange={onChange}
/>

All css classes are consistent, so feel free to use these names in your css:

• rsw-editor (root container)
• rsw-ce (editable area)
• rsw-toolbar
  • rsw-btn
  • rsw-separator
  • rsw-dd (drop down list)

Troubleshooting

Style issues: no list item bullets, wrong link styles and so on

#31, #44, #45

RSW editor doesn't isolate its styles from the parent styles. It's a pretty common case when you use a global reset or normalize styles which remove bullets or numbers for lists. To fix that, you should redefine these styles again:

.rsw-ce ul {
  list-style: disc;
  padding-left: 2em;
}

.rsw-ce ol {
  list-style: decimal;
  padding-left: 2em;
}

Insert a link which target="_blank"

#55. Also, it's a good example of inserting a custom HTML element.

Release Procedure

This repository uses a squash-and-merge workflow with protected master branch. To release a new version:

1. Publish Pre-release from Feature Branch

On your feature branch, publish a beta version for testing:

npm version prerelease --preid=beta  # e.g., 3.7.0 -> 3.7.1-beta.0
npm publish --tag beta

2. Update e2e Tests

Update e2e/cra/package.json to use the beta version:

"@amboss-mededu/react-simple-wysiwyg": "^3.7.1-beta.0"

Commit and push:

git add e2e/cra/package.json
git commit -m "chore: update e2e to beta version"
git push

3. Create PR and Merge

Create PR for your feature branch → master. CI will pass because the beta version exists in the registry. Squash and merge via GitHub.

4. Publish Stable Release from Master

After merging, checkout master and publish the stable version:

git checkout master
git pull origin master

# Bump to stable version (this also commits, tags, and pushes via postversion hook)
npm version minor  # or major/patch as appropriate

# Publish stable version
npm publish

5. Update e2e to Stable Version

Update e2e/cra/package.json to the stable version and commit:

# Update e2e/cra/package.json to stable version
git add e2e/cra/package.json
git commit -m "chore: update e2e to stable version"
git push origin master

Note: The postversion script automatically handles git tagging and pushing. Beta versions are published with the beta tag to avoid affecting users who install with npm install.

Credits

• Based on lovasoa/react-contenteditable
• Uses Material Design Icons