Content Review System

Build a content review system where users can view and approve submitted articles. The system should allow reviewers to switch between view-only mode and edit mode, with the ability to make corrections before approval.

Requirements

Editor Setup

Create an editor instance that displays article content. The editor should support basic text formatting including paragraphs, bold text, and italic text.

View and Edit Modes

The system must support two distinct modes:

1. View Mode (Read-only): The default mode where reviewers can read the content but cannot make changes
2. Edit Mode: Activated when reviewers need to make corrections to the article

Implement a toggle mechanism that switches between these two modes. When switching modes, the editor should immediately reflect the change in editability.

Mode Indicator

Display the current mode status to users. Show "View Mode" when the editor is read-only and "Edit Mode" when editing is enabled.

Test Cases

• When the editor is initialized, it starts in view mode (read-only) @test
• When toggled to edit mode, the editor becomes editable @test
• When toggled back to view mode, the editor becomes read-only again @test
• The mode indicator correctly reflects the current state @test

Implementation

@generates

API

/**
 * Creates a content review system with toggleable edit mode
 * @param element - The DOM element to mount the editor
 * @param content - The initial HTML content to display
 * @returns An object with methods to control the review system
 */
export function createReviewSystem(
  element: HTMLElement,
  content: string
): {
  toggleMode: () => void;
  getCurrentMode: () => 'view' | 'edit';
  destroy: () => void;
};

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the rich text editor framework with editable state control.

@tiptap/starter-kit { .dependency }

Provides basic editor extensions for text formatting.