QuillKit - Existing Table Editing Demo

✨ New Feature: Improved Existing Table Support

What's Improved:

Border Color Preservation: Tables loaded from content now have their border colors extracted and preserved when adding rows/columns
Consistent Styling: All tables get normalized with proper styles for resizing (table-layout: fixed, border-collapse, etc.)
Smart Detection: Editor automatically detects and extracts border colors from various formats (hex, rgb, rgba, named colors)
Full Editing Support: All table editing features (add/remove rows/columns, resize, delete) work seamlessly with existing tables

📋 Test Instructions:

Try the Red Table: Click in any cell and use the toolbar buttons to add rows or columns. Notice the new cells inherit the red border color!
Try the Blue Table: Add rows/columns and see that the blue border color is preserved
Try the Green Table: The green border is also maintained when editing
Resize Columns/Rows: Hover over cell edges to see resize handles - all tables are now resizable
Delete Tables: Place cursor in any table and click the delete table button to remove it

<h1>Existing Tables Test</h1>
      <p>Below are three tables that were loaded from HTML content. Each has a different border color that should be preserved when adding rows/columns.</p>
      
      <h2>Red Table (Original Content)</h2>
      <p>This table has red borders (#ff0000):</p>
      <table style="border-collapse: collapse; width: 100%;">
        <tbody>
          <tr>
            <td style="border: 1px solid #ff0000; padding: 8px;">Product</td>
            <td style="border: 1px solid #ff0000; padding: 8px;">Price</td>
            <td style="border: 1px solid #ff0000; padding: 8px;">Quantity</td>
          </tr>
          <tr>
            <td style="border: 1px solid #ff0000; padding: 8px;">Widget A</td>
            <td style="border: 1px solid #ff0000; padding: 8px;">$19.99</td>
            <td style="border: 1px solid #ff0000; padding: 8px;">5</td>
          </tr>
          <tr>
            <td style="border: 1px solid #ff0000; padding: 8px;">Widget B</td>
            <td style="border: 1px solid #ff0000; padding: 8px;">$29.99</td>
            <td style="border: 1px solid #ff0000; padding: 8px;">3</td>
          </tr>
        </tbody>
      </table>
      
      <h2>Blue Table (Original Content)</h2>
      <p>This table has blue borders (#0000ff):</p>
      <table style="border-collapse: collapse; width: 100%;">
        <tbody>
          <tr>
            <td style="border: 1px solid #0000ff; padding: 8px;">Name</td>
            <td style="border: 1px solid #0000ff; padding: 8px;">Email</td>
          </tr>
          <tr>
            <td style="border: 1px solid #0000ff; padding: 8px;">John Doe</td>
            <td style="border: 1px solid #0000ff; padding: 8px;">john@example.com</td>
          </tr>
          <tr>
            <td style="border: 1px solid #0000ff; padding: 8px;">Jane Smith</td>
            <td style="border: 1px solid #0000ff; padding: 8px;">jane@example.com</td>
          </tr>
        </tbody>
      </table>
      
      <h2>Green Table (Original Content)</h2>
      <p>This table has green borders (#00ff00):</p>
      <table style="border-collapse: collapse; width: 100%;">
        <tbody>
          <tr>
            <td style="border: 1px solid #00ff00; padding: 8px;">Task</td>
            <td style="border: 1px solid #00ff00; padding: 8px;">Status</td>
            <td style="border: 1px solid #00ff00; padding: 8px;">Due Date</td>
          </tr>
          <tr>
            <td style="border: 1px solid #00ff00; padding: 8px;">Design mockup</td>
            <td style="border: 1px solid #00ff00; padding: 8px;">Complete</td>
            <td style="border: 1px solid #00ff00; padding: 8px;">2024-01-15</td>
          </tr>
        </tbody>
      </table>
      
      <h2>Test Actions</h2>
      <p>Try these actions on each table:</p>
      <ol>
        <li>Click in any cell of a table</li>
        <li>Click the "Add Row Below" button (↓+) to add a new row</li>
        <li>Click the "Add Column Right" button (→+) to add a new column</li>
        <li>Verify that new cells have the same border color as the existing cells</li>
        <li>Try resizing columns by hovering over cell edges and dragging</li>
        <li>Try removing rows/columns you added</li>
      </ol>

🔍 Technical Details

Border Color Extraction: The editor now automatically extracts border colors from existing tables when they're loaded. It supports:

Hex colors (#RGB, #RRGGBB)
RGB colors (rgb(r, g, b))
RGBA colors (rgba(r, g, b, a))
Named colors (red, blue, green, etc.)

Table Normalization: When tables are detected, the editor:

Extracts the border color from the first cell (if available)
Stores it as a data-border-color attribute on the table
Applies table-layout: fixed for predictable resizing
Ensures border-collapse and width styles are set
Applies consistent padding and borders to all cells

Backward Compatibility: Tables without explicit border colors get a default color (#ddd), and all existing custom styles are preserved.