diff --git a/apps/client/src/features/editor/components/table/table-cell-menu.tsx b/apps/client/src/features/editor/components/table/table-cell-menu.tsx index 7756eb737..2ea2e8ddd 100644 --- a/apps/client/src/features/editor/components/table/table-cell-menu.tsx +++ b/apps/client/src/features/editor/components/table/table-cell-menu.tsx @@ -16,6 +16,7 @@ import { } 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 => { @@ -67,6 +68,7 @@ export const TableCellMenu = React.memo( > + ; +} + +interface AlignmentItem { + name: string; + icon: React.ElementType; + command: () => void; + isActive: () => boolean; + value: string; +} + +export const TableTextAlignment: FC = ({ editor }) => { + const { t } = useTranslation(); + const [opened, setOpened] = React.useState(false); + + const items: AlignmentItem[] = [ + { + name: "Align left", + value: "left", + isActive: () => editor.isActive({ textAlign: "left" }), + command: () => editor.chain().focus().setTextAlign("left").run(), + icon: IconAlignLeft, + }, + { + name: "Align center", + value: "center", + isActive: () => editor.isActive({ textAlign: "center" }), + command: () => editor.chain().focus().setTextAlign("center").run(), + icon: IconAlignCenter, + }, + { + name: "Align right", + value: "right", + isActive: () => editor.isActive({ textAlign: "right" }), + command: () => editor.chain().focus().setTextAlign("right").run(), + icon: IconAlignRight, + }, + ]; + + const activeItem = items.find((item) => item.isActive()) || items[0]; + + return ( + + + + setOpened(!opened)} + > + + + + + + + + + {items.map((item, index) => ( + + ))} + + + + + ); +}; \ No newline at end of file