minimal-wysiwyg-editor

A minimal React WYSIWYG editor component that uses a native contentEditable surface with a tiny toolbar.

Features:

• Bold, Italic, Underline, Strikethrough
• Bullet list (ul with li)
• Checkbox insertion
• Image insertion (URL or custom picker)
• Link creation

Install

npm i minimal-wysiwyg-editor

Peer deps:

• react and react-dom (v17+)

Usage

import React, { useState } from "react";
import { MinimalEditor } from "minimal-wysiwyg-editor";

export default function App() {
  const [html, setHtml] = useState("");
  return (
    <div style={{ maxWidth: 640, margin: "40px auto" }}>
      <MinimalEditor
        value={html}
        onChange={setHtml}
        placeholder="Type here..."
      />
      <h3>Output</h3>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
}

API

<MinimalEditor /> props:

• value?: string initial/controlled HTML
• onChange?: (html: string) => void called on input/blur with HTML
• placeholder?: string placeholder text when empty
• className?: string wrapper class
• style?: React.CSSProperties wrapper inline styles
• onImagePick?: () => Promise<string|null> | string | null custom image URL provider

Ref:

• getHTML(): string
• setHTML(html: string): void
• focus(): void

Notes

• The editor uses document.execCommand for formatting and inserts. While deprecated, it remains widely supported for basic operations and keeps this package dependency-free.
• If you persist user-generated HTML, you should sanitize it before storing or rendering to avoid XSS. This package does not include a sanitizer to remain minimal.

Build

npm run build

Outputs ESM/CJS builds with type declarations into dist/.