eddyter 1.3.30

package/README.md

@@ -0,0 +1,444 @@
+# Eddyter
+
+A configurable rich text editor component with API key authentication.
+
+## Installation
+
+```bash
+npm install eddyter
+# or
+yarn add eddyter
+```
+
+## 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
+
+## React Native Integration
+
+You can use Eddyter in React Native applications via WebView by loading a deployed version of the editor.
+
+### Prerequisites
+
+```bash
+npm install react-native-webview
+# or
+yarn add react-native-webview
+```
+
+### RichTextEditor Component
+
+Create a reusable `RichTextEditor` component that wraps the WebView:
+
+```tsx
+import React, { useRef, useState, useCallback } from 'react';
+import { View, ActivityIndicator, Text, StyleSheet } from 'react-native';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+
+interface RichTextEditorProps {
+  editorBaseUrl: string;
+  apiKey: string;
+  initialContent?: string;
+  theme?: 'light' | 'dark';
+  style?: object;
+  onChange?: (content: string) => void;
+  onReady?: () => void;
+  onAuthSuccess?: () => void;
+  onAuthError?: (error: string) => void;
+}
+
+interface WebViewMessage {
+  type: string;
+  payload?: Record<string, unknown>;
+}
+
+export const RichTextEditor: React.FC<RichTextEditorProps> = ({
+  editorBaseUrl,
+  apiKey,
+  initialContent,
+  theme = 'light',
+  style,
+  onChange,
+  onReady,
+  onAuthSuccess,
+  onAuthError,
+}) => {
+  const webViewRef = useRef<WebView>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const buildEditorUrl = () => {
+    const baseUrl = editorBaseUrl.replace(/\/$/, '');
+    const params = new URLSearchParams();
+    if (apiKey) params.append('apiKey', apiKey);
+    if (theme) params.append('theme', theme);
+    return `${baseUrl}?${params.toString()}`;
+  };
+
+  const handleMessage = useCallback((event: WebViewMessageEvent) => {
+    try {
+      const message: WebViewMessage = JSON.parse(event.nativeEvent.data);
+
+      switch (message.type) {
+        case 'EDITOR_READY':
+          setIsLoading(false);
+          onReady?.();
+          // Send initial content after editor is ready
+          if (initialContent && webViewRef.current) {
+            webViewRef.current.postMessage(
+              JSON.stringify({
+                type: 'SET_CONTENT',
+                payload: { content: initialContent },
+              })
+            );
+          }
+          break;
+
+        case 'CONTENT_CHANGE':
+          onChange?.(message.payload?.content as string || '');
+          break;
+
+        case 'AUTH_SUCCESS':
+          onAuthSuccess?.();
+          break;
+
+        case 'AUTH_ERROR':
+          onAuthError?.(message.payload?.error as string);
+          break;
+      }
+    } catch (e) {
+      console.warn('[RichTextEditor] Failed to parse message:', e);
+    }
+  }, [onChange, onReady, onAuthSuccess, onAuthError, initialContent]);
+
+  const handleError = useCallback((syntheticEvent: any) => {
+    const { nativeEvent } = syntheticEvent;
+    setError(nativeEvent.description || 'Failed to load editor');
+    setIsLoading(false);
+  }, []);
+
+  if (error) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>Failed to load editor</Text>
+        <Text style={styles.errorDetail}>{error}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <WebView
+        ref={webViewRef}
+        source={{ uri: buildEditorUrl() }}
+        style={styles.webview}
+        onMessage={handleMessage}
+        onError={handleError}
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        startInLoadingState={false}
+        scalesPageToFit={true}
+        allowsInlineMediaPlayback={true}
+        keyboardDisplayRequiresUserAction={false}
+      />
+      {isLoading && (
+        <View style={styles.loadingOverlay}>
+          <ActivityIndicator size="large" color="#007AFF" />
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  webview: { flex: 1, backgroundColor: 'transparent' },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  },
+  errorContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
+  errorText: { fontSize: 18, fontWeight: 'bold', color: '#FF3B30' },
+  errorDetail: { fontSize: 14, color: '#666', marginTop: 8, textAlign: 'center' },
+});
+```
+
+### Usage Example
+
+```tsx
+import React, { useState } from 'react';
+import { View, KeyboardAvoidingView, Platform } from 'react-native';
+import { RichTextEditor } from './components/RichTextEditor';
+
+const EDITOR_CONFIG = {
+  editorBaseUrl: 'https://your-deployed-editor-url.com',
+  apiKey: 'your-api-key',
+};
+
+function NoteEditorScreen() {
+  const [content, setContent] = useState('');
+
+  return (
+    <KeyboardAvoidingView
+      style={{ flex: 1 }}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
+      <RichTextEditor
+        editorBaseUrl={EDITOR_CONFIG.editorBaseUrl}
+        apiKey={EDITOR_CONFIG.apiKey}
+        theme="light"
+        initialContent="<p>Start writing...</p>"
+        onChange={setContent}
+        onReady={() => console.log('Editor ready')}
+        onAuthSuccess={() => console.log('Authenticated')}
+        onAuthError={(error) => console.error('Auth failed:', error)}
+      />
+    </KeyboardAvoidingView>
+  );
+}
+```
+
+### Message Protocol
+
+The editor and React Native communicate via `postMessage`. Here are the supported message types:
+
+| Message Type | Direction | Description |
+|--------------|-----------|-------------|
+| `EDITOR_READY` | Editor → RN | Editor has finished loading |
+| `CONTENT_CHANGE` | Editor → RN | Content was modified (payload: `{ content: string }`) |
+| `AUTH_SUCCESS` | Editor → RN | API key authentication succeeded |
+| `AUTH_ERROR` | Editor → RN | Authentication failed (payload: `{ error: string }`) |
+| `SET_CONTENT` | RN → Editor | Set editor content (payload: `{ content: string }`) |
+
+### Sending Content to Editor
+
+After receiving the `EDITOR_READY` message, you can programmatically set content:
+
+```tsx
+webViewRef.current?.postMessage(
+  JSON.stringify({
+    type: 'SET_CONTENT',
+    payload: { content: '<p>New content here</p>' },
+  })
+);
+```
+
+## Usage
+
+### Important: Importing Styles
+To ensure proper styling of the editor components including tables, you must import the package's CSS:
+
+```jsx
+// Import the styles in your application
+import 'eddyter/style.css';
+```
+
+### Basic Setup
+
+```jsx
+import React from 'react';
+import {
+  ConfigurableEditorWithAuth,
+  EditorProvider,
+  defaultEditorConfig
+} from 'eddyter';
+// Import required styles
+import 'eddyter/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: '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>
+  );
+}
+```
+
+## 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
+
+```jsx
+import React from 'react';
+import { ConfigurableEditorWithAuth, EditorProvider } from 'eddyter';
+import 'eddyter/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
+
+```jsx
+import React, { useState } from 'react';
+import { ConfigurableEditorWithAuth, EditorProvider } from 'eddyter';
+import 'eddyter/style.css';
+
+function App() {
+  const [editorContent, setEditorContent] = useState('');
+
+  // Current user (typically from your auth system)
+  const currentUser = {
+    id: 'user-456',
+    name: 'Jane Smith',
+    email: 'jane@example.com'
+  };
+
+  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
+
+```jsx
+import React from 'react';
+import { ConfigurableEditorWithAuth, EditorProvider } from 'eddyter';
+import 'eddyter/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.

package/dist/App.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const App: FC;
+export default App;

package/dist/Provider/EditorProvider.d.ts

@@ -0,0 +1,27 @@
+import { EditorConfigTypes } from '../types';
+export interface CurrentUser {
+    id: string;
+    name: string;
+    email?: string;
+    avatar?: string;
+}
+interface EditorContextType {
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    error: string | null;
+    editorConfig: EditorConfigTypes | null;
+    projectName: string | null;
+    isPaidPlan: boolean;
+    apiKey: string | null;
+    currentUser: CurrentUser | null;
+    verifyKey: (apiKey: string) => Promise<void>;
+}
+export declare const useEditor: () => EditorContextType;
+interface EditorProviderProps {
+    children: React.ReactNode;
+    defaultFontFamilies?: string[];
+    mentionUserList?: string[];
+    currentUser?: CurrentUser;
+}
+export declare const EditorProvider: React.FC<EditorProviderProps>;
+export {};

package/dist/Provider/LexicalProvider.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface LexicalProviderProps {
+    children: ReactNode;
+}
+declare const LexicalProvider: ({ children }: LexicalProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default LexicalProvider;

package/dist/api/ai/index.d.ts

@@ -0,0 +1,31 @@
+type AiStreamType = {
+    content: string;
+    onMessage: (message: string) => void;
+};
+export declare const AiStream: ({ content, onMessage }: AiStreamType) => Promise<void>;
+export declare const AiJsonResponse: ({ content }: {
+    content: string;
+}) => Promise<any>;
+export declare const AiImageResponse: ({ content }: {
+    content: string;
+}) => Promise<any>;
+export declare const AiEditorAction: ({ content, provider, apiKey, }: {
+    content: string;
+    provider?: string | undefined;
+    apiKey?: string | undefined;
+}) => Promise<any>;
+export declare const AiTextEnhance: ({ content, apiKey }: {
+    content: string;
+    apiKey?: string | undefined;
+}) => Promise<any>;
+export declare const GetCreditsInfo: ({ apiKey }: {
+    apiKey?: string | undefined;
+}) => Promise<any>;
+export declare const GetUserInfo: ({ apiKey }: {
+    apiKey?: string | undefined;
+}) => Promise<any>;
+export declare const AiTextTransform: ({ content, apiKey }: {
+    content: string;
+    apiKey?: string | undefined;
+}) => Promise<any>;
+export {};

package/dist/api/auth.d.ts

@@ -0,0 +1,108 @@
+export interface EditorConfig {
+    customizations: {
+        enableToolbar: boolean;
+        toolbarOptions: {
+            enableUndoRedo: boolean;
+            enableTextFormatting: boolean;
+            enableAlignment: boolean;
+            enableFontControls: boolean;
+            enableTableOptions: boolean;
+            enableInsertMenu: boolean;
+            enableColorPicker: boolean;
+            enableClearOptions: boolean;
+            enableEmojiPicker: boolean;
+            enableLinks: boolean;
+            enableFormatTextMenu: boolean;
+            enableCodeFormat: boolean;
+            enableAIChat: boolean;
+            enableTodoList: boolean;
+            enableHtmlViewToggle: boolean;
+            enableAutocompleteToggle: boolean;
+        };
+        enableFloatingMenu: boolean;
+        htmlViewOption: boolean;
+        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;
+        };
+    };
+    expiresAt: string;
+    isValid: boolean;
+    paidPlan: boolean;
+    status: string;
+}
+export interface ProjectData {
+    id: string;
+    name: string;
+    paidPlan: boolean;
+    customizations: {
+        enableToolbar: boolean;
+        toolbarOptions: {
+            enableUndoRedo: boolean;
+            enableTextFormatting: boolean;
+            enableAlignment: boolean;
+            enableFontControls: boolean;
+            enableTableOptions: boolean;
+            enableInsertMenu: boolean;
+            enableColorPicker: boolean;
+            enableClearOptions: boolean;
+            enableEmojiPicker: boolean;
+            enableLinks: boolean;
+            enableFormatTextMenu: boolean;
+            enableCodeFormat: boolean;
+            enableAIChat: boolean;
+            enableTodoList: boolean;
+            enableAutocompleteToggle: boolean;
+        };
+        enableFloatingMenu: boolean;
+        htmlViewOption: boolean;
+        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;
+        };
+    };
+    expiresAt: string;
+    isValid: boolean;
+    status: string;
+    createdAt: string;
+    updatedAt: string;
+}
+export interface ApiResponse {
+    success: boolean;
+    message: string;
+    data: ProjectData;
+}
+/**
+ * Internal function to get the API endpoint
+ * This encapsulates the endpoint logic within the package
+ */
+export declare const getApiEndpoint: () => string;
+/**
+ * Verify the API key by making a request to the API endpoint
+ * @param apiKey The API key to verify
+ */
+export declare const verifyApiKey: (apiKey: string) => Promise<ApiResponse>;

package/dist/api/config/axios.d.ts

@@ -0,0 +1,2 @@
+import { AxiosInstance } from 'axios';
+export declare const backendAPI: AxiosInstance;

package/dist/api/config/endpoints.d.ts

@@ -0,0 +1,21 @@
+export declare const apiEndpoints: {
+    chat: {
+        stream: string;
+        json: string;
+        textEnhance: string;
+        textTransform: string;
+        imageCreation: string;
+        editorAction: string;
+        credits: string;
+        userInfo: string;
+    };
+    project: {
+        fileUpload: string;
+    };
+    transcript: {
+        voiceTranscript: string;
+    };
+    linkPreview: {
+        getPreview: string;
+    };
+};

package/dist/api/featureSuggestion.d.ts

@@ -0,0 +1,23 @@
+export interface FeatureSuggestion {
+    id: string;
+    title: string;
+    description: string;
+    link?: string;
+    status: string;
+    createdAt: string;
+    upvotes: number;
+    adminResponse?: string;
+    isImplemented: boolean;
+    reviewedAt?: string;
+    reviewedBy?: string;
+    tags?: string[];
+}
+export interface CreateSuggestionData {
+    title: string;
+    description: string;
+    link?: string | null;
+    tags?: string[];
+}
+export declare class FeatureSuggestionAPI {
+    static createSuggestion(data: CreateSuggestionData, apiKey?: string): Promise<FeatureSuggestion>;
+}

package/dist/api/linkPreview.d.ts

@@ -0,0 +1,15 @@
+export interface LinkPreviewData {
+    url: string;
+    title: string | null;
+    description: string | null;
+    image: string | null;
+    favicon: string | null;
+    siteName: string | null;
+    type: 'website' | 'image' | 'video' | 'pdf' | 'other';
+    contentType?: string;
+}
+export declare function fetchLinkPreview({ url, apiKey, }: {
+    url: string;
+    apiKey?: string;
+}): Promise<LinkPreviewData | null>;
+export declare function clearLinkPreviewCache(): void;

package/dist/api/transcript/index.d.ts

@@ -0,0 +1 @@
+export declare const getAssemblyAIToken: () => Promise<any>;