sourabhrealtime/src/CollaborationApp.jsx

ROBUST RICH TEXT EDITOR: Single-pane contentEditable with direct text selection formatting, speech features, undo/redo, professional UI - Perfect TipTap alternative

import React, { useState, useEffect } from 'react';
import { AuthProvider, useAuth } from './AuthProvider';
import LoginForm from './LoginForm';
import ProjectManager from './ProjectManager';
import { RealtimeEditor } from './RealtimeEditor';
import ApprovalWorkflow from './ApprovalWorkflow';

const CollaborationAppContent = ({ 
  apiUrl = 'http://localhost:3002',
  requireApproval = true,
  showProjectManager = true,
  onProjectChange,
  defaultProjectId = null
}) => {
  const { user, isAuthenticated, logout } = useAuth();
  const [currentView, setCurrentView] = useState('dashboard');
  const [selectedProject, setSelectedProject] = useState(null);
  const [projectContent, setProjectContent] = useState('');

  useEffect(() => {
    if (defaultProjectId && isAuthenticated) {
      setSelectedProject({ id: defaultProjectId, name: 'Default Project' });
      setCurrentView('editor');
    }
  }, [defaultProjectId, isAuthenticated]);

  const handleProjectSelect = (project) => {
    setSelectedProject(project);
    setCurrentView('editor');
    onProjectChange?.(project);
  };

  const handleBackToDashboard = () => {
    setCurrentView('dashboard');
    setSelectedProject(null);
  };

  const handleLogout = () => {
    logout();
    setCurrentView('dashboard');
    setSelectedProject(null);
  };

  if (!isAuthenticated) {
    return (
      <LoginForm 
        onSuccess={(user) => {
          console.log('User logged in:', user);
        }}
      />
    );
  }

  return (
    <div className="sourabhrealtime-collaboration-app">
      {/* Header */}
      <div className="sourabhrealtime-app-header">
        <div className="sourabhrealtime-app-title">
          <h1>Real-time Collaboration</h1>
          {selectedProject && (
            <span className="sourabhrealtime-project-name">
              - {selectedProject.name}
            </span>
          )}
        </div>
        
        <div className="sourabhrealtime-app-nav">
          {currentView === 'editor' && (
            <button
              onClick={handleBackToDashboard}
              className="sourabhrealtime-button sourabhrealtime-button-secondary"
            >
              ← Back to Dashboard
            </button>
          )}
          
          <div className="sourabhrealtime-user-menu">
            <span className="sourabhrealtime-user-name">{user.name}</span>
            <span className="sourabhrealtime-user-role">({user.role})</span>
            <button
              onClick={handleLogout}
              className="sourabhrealtime-button sourabhrealtime-button-small"
            >
              Logout
            </button>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="sourabhrealtime-app-content">
        {currentView === 'dashboard' && showProjectManager && (
          <ProjectManager
            apiUrl={apiUrl}
            onProjectSelect={handleProjectSelect}
            onProjectCreate={(project) => {
              console.log('Project created:', project);
            }}
          />
        )}

        {currentView === 'editor' && selectedProject && (
          <div className="sourabhrealtime-editor-view">
            <div className="sourabhrealtime-editor-header">
              <h2>{selectedProject.name}</h2>
              <div className="sourabhrealtime-editor-info">
                <span>Project ID: {selectedProject.id}</span>
                {requireApproval && user.role !== 'admin' && user.role !== 'super_admin' && (
                  <span className="sourabhrealtime-approval-notice">
                    Changes require approval
                  </span>
                )}
              </div>
            </div>

            <div className="sourabhrealtime-editor-container">
              <RealtimeEditor
                apiUrl={apiUrl}
                projectId={selectedProject.id}
                userId={user.id}
                userName={user.name}
                userRole={user.role}
                initialContent={projectContent}
                onContentChange={(content) => {
                  if (!requireApproval || user.role === 'admin' || user.role === 'super_admin') {
                    setProjectContent(content);
                  }
                }}
                onConnectionChange={(connected) => {
                  console.log('Connection status:', connected);
                }}
                onCollaboratorsChange={(collaborators) => {
                  console.log('Collaborators:', collaborators);
                }}
                showAdminPanel={user.role === 'admin' || user.role === 'super_admin'}
                showInvitations={true}
                height={400}
                debug={false}
              />

              {/* Approval Workflow for Admins */}
              {(user.role === 'admin' || user.role === 'super_admin') && requireApproval && (
                <div className="sourabhrealtime-approval-section">
                  <ApprovalWorkflow
                    apiUrl={apiUrl}
                    projectId={selectedProject.id}
                    onApprovalChange={(changeId, approved) => {
                      console.log('Change', changeId, approved ? 'approved' : 'rejected');
                    }}
                  />
                </div>
              )}
            </div>
          </div>
        )}
      </div>

      {/* Footer */}
      <div className="sourabhrealtime-app-footer">
        <p>Real-time Collaboration Platform v2.2.0</p>
        <div className="sourabhrealtime-footer-links">
          <span>Connected Users: {user ? 1 : 0}</span>
          <span>Role: {user?.role}</span>
        </div>
      </div>
    </div>
  );
};

export const CollaborationApp = (props) => {
  return (
    <AuthProvider apiUrl={props.apiUrl}>
      <CollaborationAppContent {...props} />
    </AuthProvider>
  );
};

// Simple wrapper for backward compatibility
export const SimpleCollaborationApp = ({ 
  apiUrl = 'http://localhost:3002',
  projectId,
  userId,
  userName,
  userRole = 'editor'
}) => {
  return (
    <CollaborationApp
      apiUrl={apiUrl}
      defaultProjectId={projectId}
      showProjectManager={false}
      requireApproval={false}
    />
  );
};

export default CollaborationApp;