mirror of
https://github.com/docmost/docmost.git
synced 2026-05-07 14:43:06 +08:00
Philip Okugbe
90488a95b1
* 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
109 lines
2.8 KiB
TypeScript
109 lines
2.8 KiB
TypeScript
import React, { FC } from "react";
|
|
import {
|
|
IconAlignCenter,
|
|
IconAlignLeft,
|
|
IconAlignRight,
|
|
IconCheck,
|
|
} from "@tabler/icons-react";
|
|
import {
|
|
ActionIcon,
|
|
Button,
|
|
Popover,
|
|
rem,
|
|
ScrollArea,
|
|
Tooltip,
|
|
} from "@mantine/core";
|
|
import { useEditor } from "@tiptap/react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
interface TableTextAlignmentProps {
|
|
editor: ReturnType<typeof useEditor>;
|
|
}
|
|
|
|
interface AlignmentItem {
|
|
name: string;
|
|
icon: React.ElementType;
|
|
command: () => void;
|
|
isActive: () => boolean;
|
|
value: string;
|
|
}
|
|
|
|
export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ 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 (
|
|
<Popover
|
|
opened={opened}
|
|
onChange={setOpened}
|
|
position="bottom"
|
|
withArrow
|
|
transitionProps={{ transition: 'pop' }}
|
|
>
|
|
<Popover.Target>
|
|
<Tooltip label={t("Text alignment")} withArrow>
|
|
<ActionIcon
|
|
variant="default"
|
|
size="lg"
|
|
aria-label={t("Text alignment")}
|
|
onClick={() => setOpened(!opened)}
|
|
>
|
|
<activeItem.icon size={18} />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
</Popover.Target>
|
|
|
|
<Popover.Dropdown>
|
|
<ScrollArea.Autosize type="scroll" mah={300}>
|
|
<Button.Group orientation="vertical">
|
|
{items.map((item, index) => (
|
|
<Button
|
|
key={index}
|
|
variant="default"
|
|
leftSection={<item.icon size={16} />}
|
|
rightSection={
|
|
item.isActive() && <IconCheck size={16} />
|
|
}
|
|
justify="left"
|
|
fullWidth
|
|
onClick={() => {
|
|
item.command();
|
|
setOpened(false);
|
|
}}
|
|
style={{ border: "none" }}
|
|
>
|
|
{t(item.name)}
|
|
</Button>
|
|
))}
|
|
</Button.Group>
|
|
</ScrollArea.Autosize>
|
|
</Popover.Dropdown>
|
|
</Popover>
|
|
);
|
|
}; |