scrollable-text-editors.tsx)¶

Overview¶

A rich text editor component built on the Lexical framework, featuring state persistence, export capabilities, and scrollable content. The component provides a sophisticated editing experience with support for formatting, history management, and automatic state restoration.

Features¶

Rich text editing
State persistence
HTML export/import
Error boundaries
History tracking
Toolbar integration
Scrollable content
Theme customization
Session management
Automatic focus

Dependencies¶

import { LexicalComposer } from '@lexical/react/LexicalComposer'
import { RichTextPlugin } from '@lexical/react/RichTextPlugin'
import { HistoryPlugin } from '@lexical/react/HistoryPlugin'
import { AutoFocusPlugin } from '@lexical/react/AutoFocusPlugin'
import { ToolbarPlugin } from './plugins/ToolbarPlugin'
import { RestoreEditorStatePlugin } from './plugins/RestoreEditorStatePlugin'
import { ExportEditorStatePlugin } from './plugins/ExportEditorStatePlugin'

Props¶

interface LexicalEditorProps {
  initialState?: string;
  onStateChange?: (state: string) => void;
  readOnly?: boolean;
  placeholder?: string;
  stateID?: string;
}

interface ExportInformation {
  stateID: string;
  state: string;
}

Implementation¶

State Management¶

const [editorState, setEditorState] = useState(initialState);
const [isExporting, setIsExporting] = useState(false);

Methods¶

const handleStateChange = (state: string) => {
  setEditorState(state);
  onStateChange?.(state);
};

const handleExport = async () => {
  setIsExporting(true);
  try {
    await exportState({
      stateID,
      state: editorState
    });
  } finally {
    setIsExporting(false);
  }
};

Unique Functionality¶

// Provides rich text editing with state persistence and export capabilities

HTML Structure¶

<LexicalComposer initialConfig={editorConfig}>
  <div className="editor-container">
    <ToolbarPlugin />
    <div className="editor-inner">
      <RichTextPlugin
        contentEditable={<ContentEditable className="editor-input" />}
        placeholder={<Placeholder>{placeholder}</Placeholder>}
        ErrorBoundary={LexicalErrorBoundary}
      />
      <HistoryPlugin />
      <AutoFocusPlugin />
      <RestoreEditorStatePlugin
        initialState={initialState}
        onStateChange={handleStateChange}
      />
      <ExportEditorStatePlugin
        stateID={stateID}
        onExport={handleExport}
        isExporting={isExporting}
      />
    </div>
  </div>
</LexicalComposer>

API Integration¶

Editor state export to server endpoints
State restoration from server
Session management integration

Components Used¶

Notes¶

Supports rich text formatting
Maintains editing history
Handles state persistence
Provides error boundaries
Features automatic focus