CT Rich Text Editor

⚠️ DEPRECATED

This package has been renamed and is no longer maintained.

Please use eddyter instead for the latest updates and features.

npm install eddyter

A configurable rich text editor component with API key authentication.

Installation

npm install ct-rich-text-editor
# or
yarn add ct-rich-text-editor

Features

• Rich text editor with extensive formatting options
• API key authentication
• Configurable UI components (toolbar, floating menu)
• HTML view option
• Support for tables, images, links, and more
• AI chat integration (for premium plans)
• Environment-based API configuration

Usage

Important: Importing Styles

To ensure proper styling of the editor components including tables, you must import the package's CSS:

// Import the styles in your application
import 'ct-rich-text-editor/style.css';

Basic Setup

import React from 'react';
import {
  ConfigurableEditorWithAuth,
  EditorProvider,
  defaultEditorConfig
} from 'ct-rich-text-editor';
// Import required styles
import 'ct-rich-text-editor/style.css';

function App() {
  const apiKey = 'your-api-key'; // Replace with your actual API key

  // Current logged-in user for comments
  const currentUser = {
    id: 'user-123',
    name: 'John Doe',
    email: '[email protected]',
    avatar: 'https://example.com/avatar.jpg' // optional
  };

  const handleContentChange = (html) => {
    console.log('Editor HTML content:', html);
    // Handle the HTML content (save to state, send to server, etc.)
  };

  return (
    <EditorProvider
      defaultFontFamilies={defaultEditorConfig.defaultFontFamilies}
      currentUser={currentUser}
    >
      <ConfigurableEditorWithAuth
        apiKey={apiKey}
        onChange={handleContentChange}
        initialContent="<p>Welcome to the editor!</p>"
        mentionUserList={["Alice", "Bob", "Charlie"]}
        onAuthSuccess={() => console.log('Authentication successful')}
        onAuthError={(error) => console.error('Authentication error:', error)}
      />
    </EditorProvider>
  );
}

API Reference

EditorProvider

Provides authentication and configuration context for the editor.

Props

• children: React nodes to render
• defaultFontFamilies: Array of font names (optional)
• currentUser: Current logged-in user for comments (optional) - Object with id, name, email, and optional avatar

ConfigurableEditorWithAuth

The main editor component with authentication.

Props

• apiKey: Your API key for authentication (required)
• initialContent: Initial HTML content for the editor (optional) - string
• onChange: Callback function when editor content changes (optional) - receives HTML string
• defaultFontFamilies: Array of font names for the font selector (optional)
• mentionUserList: Array of usernames for mention functionality (optional) - Array of strings like ["Alice", "Bob", "Charlie"]
• onAuthSuccess: Callback function when authentication is successful (optional)
• onAuthError: Callback function when authentication fails (optional)
• customVerifyKey: Custom function to verify API key (optional)

Examples

Basic Editor with Authentication

import React from 'react';
import { ConfigurableEditorWithAuth, EditorProvider } from 'ct-rich-text-editor';
import 'ct-rich-text-editor/style.css';

function App() {
  return (
    <EditorProvider>
      <ConfigurableEditorWithAuth
        apiKey="your-api-key"
        onAuthSuccess={() => console.log('Authenticated')}
        onAuthError={(error) => console.error(error)}
      />
    </EditorProvider>
  );
}

Editor with Content Handling

import React, { useState } from 'react';
import { ConfigurableEditorWithAuth, EditorProvider } from 'ct-rich-text-editor';
import 'ct-rich-text-editor/style.css';

function App() {
  const [editorContent, setEditorContent] = useState('');

  // Current user (typically from your auth system)
  const currentUser = {
    id: 'user-456',
    name: 'Jane Smith',
    email: '[email protected]'
  };

  const handleContentChange = (html) => {
    setEditorContent(html);
    console.log('Current content:', html);
    // You can also save to localStorage, send to API, etc.
  };

  const handleSave = () => {
    // Save the HTML content to your backend or localStorage
    localStorage.setItem('saved-content', editorContent);
    console.log('Content saved!');
  };

  const loadSavedContent = () => {
    const saved = '<p>Start writing your content here...</p>';
    return saved;
  };

  return (
    <div>
      <EditorProvider currentUser={currentUser}>
        <ConfigurableEditorWithAuth
          apiKey="your-api-key"
          initialContent={loadSavedContent()}
          onChange={handleContentChange}
          defaultFontFamilies={['Arial', 'Helvetica', 'Times New Roman']}
          mentionUserList={['Alice', 'Bob', 'Charlie']}
          onAuthSuccess={() => console.log('Ready to edit!')}
          onAuthError={(error) => console.error('Auth failed:', error)}
        />
      </EditorProvider>

      <button onClick={handleSave} style={{ marginTop: '10px', padding: '10px' }}>
        Save Content
      </button>

      <div style={{ marginTop: '20px', padding: '10px', background: '#f5f5f5' }}>
        <h3>Current HTML Content:</h3>
        <pre>{editorContent}</pre>
      </div>
    </div>
  );
}

Custom API Key Verification

import React from 'react';
import { ConfigurableEditorWithAuth, EditorProvider } from 'ct-rich-text-editor';
import 'ct-rich-text-editor/style.css';

function App() {
  const customVerifyKey = async (apiKey) => {
    try {
      const response = await fetch('/api/verify-key', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ apiKey })
      });

      const data = await response.json();

      return {
        success: data.valid,
        message: data.message || 'API key verified'
      };
    } catch (error) {
      return {
        success: false,
        message: 'Failed to verify API key'
      };
    }
  };

  return (
    <EditorProvider>
      <ConfigurableEditorWithAuth
        apiKey="your-api-key"
        customVerifyKey={customVerifyKey}
        onChange={(html) => console.log('Content changed:', html)}
      />
    </EditorProvider>
  );
}

License

This project is licensed under the MIT License - see the LICENSE file for details.