index.tsx

Overview

index.tsx defines and exports a React functional component named FormatPreserveEditor. This component provides a text editing interface that preserves the formatting of the input text, allowing users to view and edit multi-line or preformatted text content seamlessly.

The component toggles between a read-only view mode, which displays the text with preserved whitespace and formatting, and an editing mode that provides a resizable textarea for modifying the content. Upon losing focus (blur event) in editing mode, the component saves the changes and switches back to view mode.

This file is primarily focused on user interaction for editing text while maintaining the original formatting, making it useful in applications involving code snippets, poetry, configuration files, or any text where whitespace is significant.

Component: FormatPreserveEditor

Description

FormatPreserveEditor is a React component that displays text content either as formatted static text or an editable textarea. It preserves the formatting of the text during editing and viewing.

Props

State

Methods

• handleEdit(): void
  Sets the component into editing mode. Triggered when the user clicks the displayed text (<pre> element).

• handleSave(): void
  Invokes the onSave callback with the current content and switches back to view mode. Triggered on textarea blur event.

Usage Example

import FormatPreserveEditor from './index';

function App() {
  const handleSave = (value: string) => {
    console.log('Saved content:', value);
  };

  return (
    <FormatPreserveEditor
      initialValue="Line 1\nLine 2\n    Indented line"
      onSave={handleSave}
      className="my-custom-textarea"
    />
  );
}

Rendered Output

• View Mode:
  Shows the content inside a <pre> element preserving whitespace and formatting. Clicking the text switches to editing mode.

• Editing Mode:
  Shows a <Textarea> component allowing multi-line editing with automatic resizing (up to 100 rows), transparent background, and secondary text color styling. When the textarea loses focus, the content is saved, and the component returns to view mode.

Implementation Details

• The component uses React's useState hook to manage content and isEditing states.

• The Textarea component is imported from a UI library (@/components/ui/textarea) and supports features such as autoSize and autoFocus.

• The utility function cn (from @/lib/utils) is used to conditionally combine CSS class names for styling the textarea.

• The component ensures that whitespace and formatting are preserved in the view by using a <pre> tag.

• Editing begins on click and ends on blur, providing an intuitive inline editing experience.

• The maximum height of the textarea is controlled by autoSize={{ maxRows: 100 }}, preventing excessive growth.

Interaction with Other Parts of the Application

• Textarea Component (@/components/ui/textarea): The editing interface relies on this reusable UI component for rendering the editable multi-line text area. It likely provides enhanced textarea features such as auto-resizing and styling.

• Utility function cn (@/lib/utils): Used for managing CSS class names dynamically, allowing combining passed-in classes with default styles.

• Parent Components / Consumers: They provide the initial text value via initialValue and handle the saved content through the onSave callback, enabling integration with data stores, APIs, or other application logic.

This file is self-contained in terms of state management but depends on UI components and utility functions from the project’s shared libraries.

Mermaid Component Diagram

componentDiagram
    component FormatPreserveEditor {
        +Props: initialValue: string
        +Props: onSave(value: string): void
        +Props: className?: string
        +State: content: string
        +State: isEditing: boolean
        +handleEdit(): void
        +handleSave(): void
        +render(): JSX.Element
    }
    component Textarea
    component cn

    FormatPreserveEditor --> Textarea : uses
    FormatPreserveEditor --> cn : uses

Summary

This file implements a user-friendly, formatting-preserving text editor component in React. It balances between display and edit modes, preserving text formatting using <pre> and allowing intuitive inline editing with automatic textarea resizing. It integrates cleanly into larger applications via props and callbacks, leveraging project-specific UI and utility modules.