Editor

​

Overview

​

Props

​

Features

• Rich Text Editing: Full-featured text editor with formatting options
• Real-time Collaboration: Multiple users can edit simultaneously
• Comments & Threads: Floating comments with threaded discussions
• Toolbar: Formatting controls (visible only to editors)
• Floating Toolbar: Context-aware formatting on text selection
• Auto-save: Changes automatically synchronized via Liveblocks
• History: Undo/redo support
• Loading States: Graceful loading experience

​

Usage Example

import { Editor } from '@/components/editor/Editor';
import { RoomProvider } from '@liveblocks/react/suspense';

function DocumentEditor() {
  return (
    <RoomProvider id="room_abc123">
      <Editor 
        roomId="room_abc123" 
        currentUserType="editor" 
      />
    </RoomProvider>
  );
}

​

Read-only Mode

<Editor 
  roomId="room_abc123" 
  currentUserType="viewer" 
/>

​

TypeScript Interface

type EditorProps = {
  roomId: string;
  currentUserType: UserType;
};

type UserType = 'creator' | 'editor' | 'viewer';

​

Editor Configuration

const initialConfig = liveblocksConfig({
  namespace: 'Editor',
  nodes: [HeadingNode],
  onError: (error: Error) => {
    console.error(error);
    throw error;
  },
  theme: Theme,
  editable: currentUserType === 'editor',
});

​

Plugins Included

​

Core Plugins

• RichTextPlugin: Enables rich text editing capabilities
• HistoryPlugin: Undo/redo functionality
• AutoFocusPlugin: Automatically focuses editor on mount

​

Liveblocks Plugins

• LiveblocksPlugin: Enables real-time collaboration
• FloatingComposer: Create new comment threads
• FloatingThreads: Display and interact with comment threads
• Comments: Comment sidebar and management

​

Custom Plugins

• ToolbarPlugin: Main formatting toolbar
• FloatingToolbarPlugin: Context menu on text selection (editors only)
• DeleteModal: Document deletion (editors only)

​

Component Layout

┌─────────────────────────────────┐
│ Toolbar + Delete Modal          │
├─────────────────────────────────┤
│                                 │
│   Editor Content Area           │
│   (800px max width)             │
│                                 │
│   - Rich text editing           │
│   - Floating toolbar            │
│   - Comment threads             │
│                                 │
├─────────────────────────────────┤
│ Liveblocks Features:            │
│ - FloatingComposer (350px)      │
│ - FloatingThreads               │
│ - Comments sidebar              │
└─────────────────────────────────┘

​

Editor States

• not-loaded: Initial state, shows loader
• loading: Loading editor content, shows loader
• ready: Editor fully loaded and interactive
• synchronizing: Syncing changes (seamless to user)

​

Access Control

​

Styling

• .editor-container: Main container
• .toolbar-wrapper: Toolbar wrapper with flex layout
• .editor-wrapper: Content wrapper
• .editor-inner: Content area (max-width: 800px, min-height: 1100px)
• .editor-input: Contenteditable area
• .editor-placeholder: Placeholder text styling

​

Related Components

• CollaborativeRoom - Parent wrapper component
• ToolbarPlugin - Main formatting toolbar
• FloatingToolbarPlugin - Selection-based formatting
• Comments - Comment management