Prompt: WYSIWYG Rich Text Editor with Image Upload and Tables (FPC010)

Prompt Description

Develop a sophisticated WYSIWYG (What You See Is What You Get) Rich Text Editor similar to those found in CMS systems or advanced blogging platforms. This is a highly complex front-end challenge.

**Core Features:**
1.  **Editable Content Area (`data-testid='wysiwyg-editor'`):** A `div` with `contenteditable='true'`, serving as the primary editing surface. Must support `role='textbox'` and `aria-multiline='true'`.
2.  **Comprehensive Toolbar (`data-testid='wysiwyg-toolbar'`):**
    *   **Text Formatting:** Bold, Italic, Underline, Strikethrough, Subscript, Superscript.
    *   **Block Formatting:** Paragraph, Heading Levels (H1-H6 via a dropdown/select).
    *   **List Formatting:** Unordered List, Ordered List.
    *   **Alignment:** Left, Center, Right, Justify.
    *   **Links:** Create/Edit Hyperlink (should open a small modal to input URL and text).
    *   **Image Upload (Simulated):** A button to 'Insert Image'. Clicking it should open a prompt/modal asking for an image URL. Upon providing a URL, the image is inserted into the editor content. Image should be resizable (basic handles or fixed size options).
    *   **Table Insertion:** A button to 'Insert Table'. Opens a small modal/grid to select table dimensions (e.g., 3x2 grid). Inserts an empty, editable HTML table into the editor.
    *   **Undo/Redo:** Buttons for undoing and redoing actions.
3.  **Output:** A mechanism to get the HTML content of the editor (e.g., a button 'View HTML' that displays the editor's `innerHTML` in a `<pre>` tag or logs to console).

**Technical & Accessibility Requirements:**
*   **Rich Text Engine:** MUST implement logic for applying and removing formatting using `document.execCommand` (understanding its limitations for a simulation is fine) or preferably by directly manipulating the DOM and selection ranges for more robust behavior. This is the core challenge.
*   **Toolbar Accessibility:** All toolbar buttons MUST be proper `<button>` elements, fully keyboard accessible, and use `aria-pressed` to indicate active states for toggleable formats (Bold, Italic). Dropdowns (e.g., for Headings) must follow ARIA menu/listbox patterns.
*   **Editor Accessibility:** The contenteditable area itself must be navigable. Semantic meaning of formatted text (e.g., headings are `<h1>`, lists are `<ul>`) must be preserved in the underlying HTML.
*   **Modals (for Links, Image, Table):** Must be accessible (trap focus, Escape to close, proper ARIA roles like `dialog`).
*   **Image and Table Manipulation:** Inserted images should be focusable and ideally have basic resizing. Inserted tables should allow typing into cells.
*   Responsive toolbar and editor area.
*   Styling: Tailwind CSS where appropriate, but significant custom CSS/JS will be required for the toolbar's appearance, button states, modal dialogs, and the editor's behavior (e.g., custom list styling if not using default, table cell borders within editor).

**Testing Identifiers:**
*   Editable Content Area: `data-testid='wysiwyg-editor'`
*   Toolbar: `data-testid='wysiwyg-toolbar'`
*   Bold Button: `data-testid='toolbar-btn-bold'`
*   Heading Selector (dropdown/select): `data-testid='toolbar-select-heading'`
*   Insert Image Button: `data-testid='toolbar-btn-image'`
*   Insert Table Button: `data-testid='toolbar-btn-table'`
*   Link Modal (example input): `data-testid='link-modal-url-input'`
*   View HTML Output Area (if used): `data-testid='html-output-area'`

Key Links & Info