React Plume Editor

A React component for a rich text editor with AI-powered assistance using Google's Gemini API.

Features

• Rich text editing with formatting options
• AI assistance for text generation, correction, and rewriting
• Export to HTML
• Responsive design
• Word and reading time counters

Installation

npm install react-plume-editor

Peer Dependencies

This package requires the following peer dependencies:

• React >= 19.2.0
• React DOM >= 19.2.3
• React Router DOM >= 6.0.0

Install them if not already present:

npm install react react-dom react-router-dom

Usage

import React, { useState, useEffect } from 'react';
import { Plume } from 'react-plume-editor';
import 'react-plume-editor/dist/plume-editor.css';

function App() {
  const [content, setContent] = useState('<p>Start writing...</p>');
  const [loadedContent, setLoadedContent] = useState(null);

  // Load saved content from server/localStorage on mount
  useEffect(() => {
    const savedContent = localStorage.getItem('plume-content');
    if (savedContent) {
      setLoadedContent(savedContent);
    }
  }, []);

  const handleContentChange = (htmlContent) => {
    setContent(htmlContent);
    // Save to server or localStorage
    localStorage.setItem('plume-content', htmlContent);
    // Convert to code/markdown and send to server
    console.log('Content changed:', htmlContent);
  };

  return (
    <div>
      <Plume
        apiKey="your-gemini-api-key"
        initialContent={loadedContent || content}
        onChange={handleContentChange}
        config={{
          buttonTexts: {
            export: 'Download'
          },
          showExportButton: true,
          aiPrompts: {
            textImprovement: 'You are a professional editor. Improve this text: {instruction}',
            quickActions: {
              fix: 'Fix all grammar and spelling errors in this text.',
              formal: 'Rewrite this text in a formal business tone.'
            }
          }
        }}
      />
    </div>
  );
}

export default App;

API

Component

The Plume component is a self-contained editor with header, main editor area, and footer.

It includes:

• Text formatting toolbar
• AI menu for text assistance
• Export functionality
• Word count and reading time display

Props

• apiKey (string, required): Your Google Gemini API key for AI features.
• config (PlumeConfig, optional): Configuration object for customizing the editor.
• onChange (function, optional): Callback function called whenever the editor content changes. Receives the HTML content as a string parameter. Use this to export/save content to your server.
• initialContent (string, optional): Initial HTML content to load into the editor. Use this to import/load previously saved content.

PlumeConfig

• buttonTexts (object, optional):
  • export (string, optional): Text for the export button. Default: "Export"
• showExportButton (boolean, optional): Whether to show the export button. Default: true
• aiPrompts (object, optional): Customize AI prompts and instructions
  • textImprovement (string, optional): Custom prompt template for text improvement operations
  • continuation (string, optional): Custom prompt template for text continuation
  • quickActions (object, optional): Custom prompts for quick actions
    • fix (string, optional): Prompt for grammar/spelling correction
    • shorten (string, optional): Prompt for text summarization
    • expand (string, optional): Prompt for text expansion
    • formal (string, optional): Prompt for formal tone conversion
    • casual (string, optional): Prompt for casual tone conversion

Content Import/Export

The editor provides onChange and initialContent props for seamless content management:

Exporting Content

Use the onChange callback to receive HTML content whenever the user edits the document. This content can be saved to your server, converted to other formats (like Markdown), or stored locally.

Importing Content

Use the initialContent prop to load previously saved HTML content back into the editor. This allows users to continue editing where they left off.

Configuration

The editor uses Google's Gemini API for AI features. You will need to configure your API key in the component's service file or provide it via environment variables.

Styling

Import the CSS file to apply default styles:

import 'plume-editor/dist/plume-editor.css';

Development

To run the development server:

npm run dev

To build the package:

npm run build

License

NEHO Proprietary Software License Agreement (NehoPSLA)

See LICENSE.md for full license terms.

Contributing

Contributions are welcome. Please open an issue or submit a pull request.