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/components/table/table-cell-menu.tsx

@@ -12,8 +12,11 @@ import {
   IconColumnRemove,
   IconRowRemove,
   IconSquareToggle,
+  IconTableRow,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
+import { TableBackgroundColor } from "./table-background-color";
+import { TableTextAlignment } from "./table-text-alignment";
 
 export const TableCellMenu = React.memo(
   ({ editor, appendTo }: EditorMenuProps): JSX.Element => {
@@ -45,6 +48,10 @@ export const TableCellMenu = React.memo(
       editor.chain().focus().deleteRow().run();
     }, [editor]);
 
+    const toggleHeaderCell = useCallback(() => {
+      editor.chain().focus().toggleHeaderCell().run();
+    }, [editor]);
+
     return (
       <BaseBubbleMenu
         editor={editor}
@@ -60,6 +67,9 @@ export const TableCellMenu = React.memo(
         shouldShow={shouldShow}
       >
         <ActionIcon.Group>
+          <TableBackgroundColor editor={editor} />
+          <TableTextAlignment editor={editor} />
+          
           <Tooltip position="top" label={t("Merge cells")}>
             <ActionIcon
               onClick={mergeCells}
@@ -103,6 +113,17 @@ export const TableCellMenu = React.memo(
               <IconRowRemove size={18} />
             </ActionIcon>
           </Tooltip>
+
+          <Tooltip position="top" label={t("Toggle header cell")}>
+            <ActionIcon
+              onClick={toggleHeaderCell}
+              variant="default"
+              size="lg"
+              aria-label={t("Toggle header cell")}
+            >
+              <IconTableRow size={18} />
+            </ActionIcon>
+          </Tooltip>
         </ActionIcon.Group>
       </BaseBubbleMenu>
     );