npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-simple-wysiwyg

v3.2.0

Published

Simple and lightweight React WYSIWYG editor

Downloads

77,218

Readme

react-simple-wysiwyg

Tests NPM version npm bundle size

Simple and lightweight React WYSIWYG editor. Demo.

Description

Screenshot

Key features:

  • pretty small (~9kb, ~4kb 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} />
      );
    }

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' ny default
  • value

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

Custom toolbar

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

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

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

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

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 { 
  BtnBold, 
  BtnItalic, 
  createButton, 
  Editor, 
  EditorProvider, 
  Toolbar
} from 'react-simple-wysiwyg';

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

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

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.

Credits