Enhanced Table Block for Email Template Builder

I'll update the table block to provide a visual editor instead of requiring HTML input. This will make it much easier to create and edit tables in your email templates.

Enhanced Table Block with Visual Editor

I've updated the table block in your email template builder to use a visual editor instead of requiring HTML input. This makes it much easier to create and edit tables in your email templates.

New Table Editor Features

1. Visual Table Editing:

   • Add and remove rows and columns with simple button clicks
   • Edit cell content directly in the table
   • No HTML knowledge required

2. Table Styling Options:

   • Set border color with a color picker
   • Adjust cell padding
   • Control table width
   • Set text alignment (left, center, right)

3. Table Structure Options:

   • Toggle header row
   • Add as many rows and columns as needed
   • Remove unwanted rows and columns

4. Live Preview:

   • See how your table will look in the email as you make changes

How It Works

1. The table data is stored in a structured JSON format that includes:

   • Row and cell data
   • Style information
   • Header row configuration
2. When you edit the table, the changes are immediately reflected in the preview
3. When the template is saved, the table is converted to proper HTML that will display correctly in email clients

This visual table editor makes it much easier to create professional-looking tables for your email templates without needing to write any HTML code.

Fixing the Infinite Update Loop

I'll revise the code to fix the "Maximum update depth exceeded" error that occurs when previewing a template at /templates/edit/1. This error happens when there's an infinite loop of state updates.

Fixed the Infinite Update Loop

I've revised the code to fix the "Maximum update depth exceeded" error that was occurring when previewing a template at /templates/edit/1. This error was happening due to an infinite loop of state updates between components.

Key Changes Made:

1. In the Template Editor (template-editor.tsx):

   • Added initializedRef to ensure the initialization of blocks from content only happens once
   • Added updatingContentRef to prevent circular updates between blocks and content
   • Used a setTimeout to reset the update flag to ensure state updates are properly sequenced

2. In the Table Editor (table-editor.tsx):

   • Added isInitialRender ref to skip the first update to prevent unnecessary re-renders
   • Added isUpdatingFromState ref to prevent circular updates between props and state
   • Added proper comparison before updating state from props to prevent unnecessary updates
   • Used setTimeout to ensure state updates are properly sequenced

How These Changes Fix the Issue:

The main problem was that we had circular dependencies in our state updates:

• When blocks changed, we updated the content
• When content changed, we updated the blocks
• This created an infinite loop

By adding reference flags to track when updates are happening and ensuring we only update when necessary, we've broken this circular dependency and prevented the infinite loop.

These changes maintain all the functionality of the email template builder while fixing the error that was occurring when editing templates.