exportEditorStatePlugin.tsx)¶

Overview¶

A Lexical editor plugin that handles the export and persistence of editor state, managing the conversion of editor content to HTML and saving it to the server with associated metadata.

Features¶

HTML state export
Session storage integration
API state persistence
User authentication
Document metadata handling
Error handling
State change tracking
Request count management

Implementation¶

Props Interface¶

export type ExportInformation = {
  shouldExport?: boolean | null;
  stateID?: string | null;
  editedState?: boolean | null;
  n_requests?: number | null;
};

Plugin Component¶

export function ExportEditorStatePlugin({ 
  shouldExport, 
  stateID, 
  editedState, 
  n_requests 
}: ExportInformation) {
  const [editor] = useLexicalComposerContext();
  const { data } = useSession();
  const userID = data?.user?.userID;

  useEffect(() => {
    if (typeof window !== 'undefined') {
      const clientName = sessionStorage?.getItem('inputtedClientName');
      const documentName = sessionStorage?.getItem('inputtedDocumentName');
      const status = sessionStorage?.getItem('inputtedStatus');

      if (shouldExport && editedState) {
        editor.update(async () => {
          try {
            const html = $generateHtmlFromNodes(editor, null);
            await fetch('/app/api/editor/saveState', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                documentID: stateID,
                status,
                userID,
                clientName,
                documentName,
                state: html,
                editedState: editor.__editedState,
                n_requests,
              })
            });
          } catch (error) {
            console.error('Failed to save state:', error);
          }
        });
      }
    }
  }, [shouldExport, stateID, editedState, n_requests]);
}

Dependencies¶

import { useEffect } from 'react'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { useSession } from 'next-auth/react'
import { $generateHtmlFromNodes } from '@lexical/html'

Components Using This¶

State Management¶

Tracks export state
Manages document metadata
Handles user session
Controls request count
Monitors edit state
Maintains document state

Integration Points¶

Lexical editor context
Session storage
Next.js authentication
API endpoints
HTML generation
State persistence

Usage Example¶

<LexicalComposer initialConfig={editorConfig}>
  <ExportEditorStatePlugin
    shouldExport={true}
    stateID="doc-123"
    editedState={true}
    n_requests={5}
  />
  {/* Other plugins */}
</LexicalComposer>

Notes¶

Handles HTML state generation
Manages document metadata
Integrates with authentication
Provides error handling
Supports state persistence
Tracks edit status
Manages request counts
Uses session storage