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 (optional)
  const currentUser = {
    id: 'user-123',
    name: 'John Doe',
    email: 'john@example.com',
    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>
  );
}

toolbarOptions: {
  enableUndoRedo: boolean;           // Undo/Redo buttons
  enableTextFormatting: boolean;     // Bold, italic, etc.
  enableAlignment: boolean;          // Text alignment
  enableFontControls: boolean;       // Font family/size
  enableTableOptions: boolean;       // Table operations
  enableInsertMenu: boolean;        // Insert options
  enableColorPicker: boolean;        // Color controls
  enableClearOptions: boolean;       // Clear formatting
  enableEmojiPicker: boolean;        // Emoji picker
  enableLinks: boolean;             // Link insertion
  enableFormatTextMenu: boolean;     // Text formatting menu
  enableCodeFormat: boolean;         // Code formatting
  enableAIChat: boolean;             // AI chat integration
  enableTodoList: boolean;           // Checklist support
  enableHtmlViewToggle: boolean;     // HTML view
  enableNotePanels: boolean;         // Note panels
  enableAutocompleteToggle: boolean;  // Autocomplete
}

floatingMenuOptions: {
  bold: boolean;
  italic: boolean;
  underline: boolean;
  uppercase: boolean;
  lowercase: boolean;
  capitalize: boolean;
  strikethrough: boolean;
  subscript: boolean;
  superscript: boolean;
  code: boolean;
  link: boolean;
  aiChat: boolean;
  comment: boolean;
  improve: boolean;
}

autocompleteOptions: {
  minMatchLength: number;    // Minimum characters to trigger
  maxSuggestions: number;    // Maximum suggestions to show
}

interface CurrentUser {
  id: string;
  name: string;
  email: string;
  avatar?: string; // optional
}

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>
  );
}

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('');

  const handleContentChange = (html) => {
    setEditorContent(html);
    console.log('Current content:', html);
  };

  const handleSave = () => {
    localStorage.setItem('saved-content', editorContent);
    console.log('Content saved!');
  };

  const loadSavedContent = () => {
    return localStorage.getItem('saved-content') || '<p>Start writing...</p>';
  };

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

      <button onClick={handleSave}>
        Save Content
      </button>

      <div>
        <h3>Current HTML Content:</h3>
        <pre>{editorContent}</pre>
      </div>
    </div>
  );
}

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>
  );
}