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
This commit is contained in:
Philipinho
2025-07-08 23:39:15 -07:00
parent f80004817c
commit acc725db9c

View File

@ -12,6 +12,7 @@ import {
IconColumnRemove, IconColumnRemove,
IconRowRemove, IconRowRemove,
IconSquareToggle, IconSquareToggle,
IconTableRow,
} from "@tabler/icons-react"; } from "@tabler/icons-react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -45,6 +46,10 @@ export const TableCellMenu = React.memo(
editor.chain().focus().deleteRow().run(); editor.chain().focus().deleteRow().run();
}, [editor]); }, [editor]);
const toggleHeaderCell = useCallback(() => {
editor.chain().focus().toggleHeaderCell().run();
}, [editor]);
return ( return (
<BaseBubbleMenu <BaseBubbleMenu
editor={editor} editor={editor}
@ -103,6 +108,17 @@ export const TableCellMenu = React.memo(
<IconRowRemove size={18} /> <IconRowRemove size={18} />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
<Tooltip position="top" label={t("Toggle header cell")}>
<ActionIcon
onClick={toggleHeaderCell}
variant="default"
size="lg"
aria-label={t("Toggle he ader cell")}
>
<IconTableRow size={18} />
</ActionIcon>
</Tooltip>
</ActionIcon.Group> </ActionIcon.Group>
</BaseBubbleMenu> </BaseBubbleMenu>
); );