ct-rich-text-editor 1.1.8 → 1.1.9

package/README.md

@@ -34,8 +34,8 @@ import 'ct-rich-text-editor/style.css';
 
 ```jsx
 import React from 'react';
-import { 
-  ConfigurableEditorWithAuth, 
+import {
+  ConfigurableEditorWithAuth,
   EditorProvider,
   defaultEditorConfig
 } from 'ct-rich-text-editor';
@@ -44,7 +44,12 @@ import 'ct-rich-text-editor/style.css';
 
 function App() {
   const apiKey = 'your-api-key'; // Replace with your actual API key
-  
+
+  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}
@@ -52,6 +57,8 @@ function App() {
     >
       <ConfigurableEditorWithAuth
         apiKey={apiKey}
+        onChange={handleContentChange}
+        initialContent="<p>Welcome to the editor!</p>"
         onAuthSuccess={() => console.log('Authentication successful')}
         onAuthError={(error) => console.error('Authentication error:', error)}
       />
@@ -79,20 +86,13 @@ 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)
 - `onAuthSuccess`: Callback function when authentication is successful (optional)
 - `onAuthError`: Callback function when authentication fails (optional)
-- `showToolbar`: Boolean to show/hide the toolbar (optional, default: true)
-- `showFloatingMenu`: Boolean to show/hide the floating menu (optional, default: true)
-- `showHtmlView`: Boolean to show/hide HTML view option (optional, default: true)
-- `initialContent`: Initial content for the editor (optional)
-- `onChange`: Callback function when editor content changes (optional)
-- `readOnly`: Boolean to make editor read-only (optional, default: false)
-- `placeholder`: Placeholder text when editor is empty (optional)
-- `theme`: Custom theme object for styling (optional)
-- `plugins`: Array of custom plugins (optional)
-- `aiEnabled`: Boolean to enable/disable AI features (optional, default: false)
-- `onAiResponse`: Callback function for AI responses (optional)
-- `onAiError`: Callback function for AI errors (optional)
+- `customVerifyKey`: Custom function to verify API key (optional)
 
 ## Examples
 
@@ -116,7 +116,61 @@ function App() {
 }
 ```
 
-### Editor with Custom Configuration
+### Editor with Content Handling
+
+```jsx
+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);
+    // 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>
+        <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} 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
 
 ```jsx
 import React from 'react';
@@ -124,18 +178,34 @@ 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"
-        showToolbar={true}
-        showFloatingMenu={true}
-        showHtmlView={true}
-        readOnly={false}
-        placeholder="Start typing..."
-        aiEnabled={true}
-        onAiResponse={(response) => console.log('AI Response:', response)}
-        onAiError={(error) => console.error('AI Error:', error)}
+        customVerifyKey={customVerifyKey}
+        onChange={(html) => console.log('Content changed:', html)}
       />
     </EditorProvider>
   );

package/dist/components/ConfigurableEditorWithAuth.d.ts

@@ -4,7 +4,7 @@ import { ApiResponse } from '../api/auth';
 interface ConfigurableEditorWithAuthProps {
     apiKey: string;
     initialContent?: string;
-    onChange?: (content: string) => void;
+    onChange?: (html: string) => void;
     defaultFontFamilies?: string[];
     mentionUserList?: string[];
     onAuthSuccess?: () => void;