feat: table background color, cell header and align (#1352)

* feat: add toggle header cell button to table cell menu

Added ability to toggle header cells directly from the table cell menu. This enhancement includes:
- New toggle header cell button with IconTableRow icon
- Consistent UI/UX with existing table menu patterns
- Proper internationalization support

* fix: typo in aria-label for toggle header cell button

* feat: add table cell background color picker

- Extended TableCell and TableHeader to support backgroundColor attribute
- Created TableBackgroundColor component with 21 color options
- Integrated color picker into table cell menu using Mantine UI
- Added support for both regular cells and header cells
- Updated imports to use custom TableHeader from @docmost/editor-ext

* feat: add text alignment to table cell menu

- Created TableTextAlignment component with left, center, and right alignment options
- Integrated alignment selector into table cell menu
- Shows current alignment icon in the button
- Displays checkmark next to active alignment in dropdown

* background colors

* table background color in dark mode

* add bg color name

* rename color attribute

* increase minimum table width

apps/client/src/features/editor/styles/table.css

@@ -4,6 +4,7 @@
   overflow-x: auto;
   & table {
     overflow-x: hidden;
+    min-width: 700px !important;
   }
 }
 
@@ -38,8 +39,8 @@
 
     th {
       background-color: light-dark(
-              var(--mantine-color-gray-1),
-              var(--mantine-color-dark-5)
+        var(--mantine-color-gray-1),
+        var(--mantine-color-dark-5)
       );
       font-weight: bold;
       text-align: left;
@@ -66,8 +67,54 @@
       position: absolute;
       z-index: 2;
     }
-
   }
 }
 
+/* Table cell background colors with dark mode support */
+.ProseMirror {
+  table {
+    @mixin dark {
+      /* Blue */
+      td[data-background-color="#b4d5ff"],
+      th[data-background-color="#b4d5ff"] {
+        background-color: #1a3a5c !important;
+      }
 
+      /* Green */
+      td[data-background-color="#acf5d2"],
+      th[data-background-color="#acf5d2"] {
+        background-color: #1a4d3a !important;
+      }
+
+      /* Yellow */
+      td[data-background-color="#fef1b4"],
+      th[data-background-color="#fef1b4"] {
+        background-color: #7c5014 !important;
+      }
+
+      /* Red */
+      td[data-background-color="#ffbead"],
+      th[data-background-color="#ffbead"] {
+        background-color: #5c2a23 !important;
+      }
+
+      /* Pink */
+      td[data-background-color="#ffc7fe"],
+      th[data-background-color="#ffc7fe"] {
+        background-color: #4d2a4d !important;
+      }
+
+      /* Gray */
+      td[data-background-color="#eaecef"],
+      th[data-background-color="#eaecef"] {
+        background-color: #2a2e33 !important;
+      }
+
+      /* Purple */
+      td[data-background-color="#c1b7f2"],
+      th[data-background-color="#c1b7f2"] {
+        background-color: #3a2f5c !important;
+      }
+    }
+  }
+}