jsw-rich-text-editer

A modern, feature-rich WYSIWYG editor for React applications.

Installation

npm install jsw-rich-text-editer
# or
yarn add jsw-rich-text-editer

Usage

Import the component and usage styles in your React application:

import React, { useState } from 'react';
import RichTextEditor from 'jsw-rich-text-editer';

function App() {
  const [content, setContent] = useState("<p>Hello World</p>");

  return (
    <div className="App">
      <RichTextEditor
        value={content}
        onChange={(newContent) => setContent(newContent)}
        enviorment="dev" // or "prod" for server-side image upload
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Description | |------|------|-------------| | value | string | The HTML content string to display in the editor. | | onChange | function | Callback function triggered when content changes. Receives the new HTML string. | | disable | boolean | Optional. If true, the editor becomes read-only. | | enviorment | string | "dev" (default) uses Base64 for images. "prod" expects a backend upload endpoint. |

Features

• Rich Text Formatting: Bold, Italic, Underline, Strike-through, Sub/Superscript.
• Typography: Font Family, Font Size, Text Color, Background Color.
• Structure: Headings (H1-H3), Paragraphs, Lists (Bullet), Indentation.
• Media: Image insertion with Left/Right alignment and text wrapping.
• Layout:
  • Tables: Insert custom tables (rows x cols).
  • Columns: Insert 2-column flex layouts for side-by-side content.
• Spacing: Line Height adjustment (1.0 - 2.5).
• UI: Dark-themed toolbar with custom dropdowns for a premium feel.