sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-05-07 06:23:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

refresh table menus

Browse Source
This commit is contained in:
Philipinho
2026-02-24 09:58:32 +00:00
parent 22182418ed
commit 052b2042ff
4 changed files with 50 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/editor/components/table/table-background-color.tsx
+2 -1
View File
@@ -95,7 +95,8 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
<Popover.Target>
<Tooltip label={t("Background color")} withArrow>
<ActionIcon
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Background color")}
onClick={() => setOpened(!opened)}
apps/client/src/features/editor/components/table/table-cell-menu.tsx
+19 -7
View File
@@ -16,6 +16,7 @@ import { useTranslation } from "react-i18next";
import { TableBackgroundColor } from "./table-background-color";
import { TableTextAlignment } from "./table-text-alignment";
import { BubbleMenu } from "@tiptap/react/menus";
import classes from "../common/toolbar-menu.module.css";
export const TableCellMenu = React.memo(
({ editor, appendTo }: EditorMenuProps): JSX.Element => {
@@ -69,14 +70,17 @@ export const TableCellMenu = React.memo(
}}
shouldShow={shouldShow}
>
<ActionIcon.Group>
<div className={classes.toolbar}>
<TableBackgroundColor editor={editor} />
<TableTextAlignment editor={editor} />
<div className={classes.divider} />
<Tooltip position="top" label={t("Merge cells")}>
<ActionIcon
onClick={mergeCells}
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Merge cells")}
>
@@ -87,7 +91,8 @@ export const TableCellMenu = React.memo(
<Tooltip position="top" label={t("Split cell")}>
<ActionIcon
onClick={splitCell}
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Split cell")}
>
@@ -95,10 +100,13 @@ export const TableCellMenu = React.memo(
</ActionIcon>
</Tooltip>
<div className={classes.divider} />
<Tooltip position="top" label={t("Delete column")}>
<ActionIcon
onClick={deleteColumn}
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Delete column")}
>
@@ -109,7 +117,8 @@ export const TableCellMenu = React.memo(
<Tooltip position="top" label={t("Delete row")}>
<ActionIcon
onClick={deleteRow}
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Delete row")}
>
@@ -117,17 +126,20 @@ export const TableCellMenu = React.memo(
</ActionIcon>
</Tooltip>
<div className={classes.divider} />
<Tooltip position="top" label={t("Toggle header cell")}>
<ActionIcon
onClick={toggleHeaderCell}
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Toggle header cell")}
>
<IconTableRow size={18} />
</ActionIcon>
</Tooltip>
</ActionIcon.Group>
</div>
</BubbleMenu>
);
}
apps/client/src/features/editor/components/table/table-menu.tsx
+27 -12
View File
@@ -20,6 +20,7 @@ import {
import { BubbleMenu } from "@tiptap/react/menus";
import { isCellSelection } from "@docmost/editor-ext";
import { useTranslation } from "react-i18next";
import classes from "../common/toolbar-menu.module.css";
export const TableMenu = React.memo(
({ editor }: EditorMenuProps): JSX.Element => {
@@ -118,11 +119,12 @@ export const TableMenu = React.memo(
}}
shouldShow={shouldShow}
>
<ActionIcon.Group>
<div className={classes.toolbar}>
<Tooltip position="top" label={t("Add left column")}>
<ActionIcon
onClick={addColumnLeft}
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Add left column")}
>
@@ -133,7 +135,8 @@ export const TableMenu = React.memo(
<Tooltip position="top" label={t("Add right column")}>
<ActionIcon
onClick={addColumnRight}
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Add right column")}
>
@@ -144,7 +147,8 @@ export const TableMenu = React.memo(
<Tooltip position="top" label={t("Delete column")}>
<ActionIcon
onClick={deleteColumn}
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Delete column")}
>
@@ -152,10 +156,13 @@ export const TableMenu = React.memo(
</ActionIcon>
</Tooltip>
<div className={classes.divider} />
<Tooltip position="top" label={t("Add row above")}>
<ActionIcon
onClick={addRowAbove}
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Add row above")}
>
@@ -166,7 +173,8 @@ export const TableMenu = React.memo(
<Tooltip position="top" label={t("Add row below")}>
<ActionIcon
onClick={addRowBelow}
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Add row below")}
>
@@ -177,7 +185,8 @@ export const TableMenu = React.memo(
<Tooltip position="top" label={t("Delete row")}>
<ActionIcon
onClick={deleteRow}
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Delete row")}
>
@@ -185,10 +194,13 @@ export const TableMenu = React.memo(
</ActionIcon>
</Tooltip>
<div className={classes.divider} />
<Tooltip position="top" label={t("Toggle header row")}>
<ActionIcon
onClick={toggleHeaderRow}
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Toggle header row")}
>
@@ -199,7 +211,8 @@ export const TableMenu = React.memo(
<Tooltip position="top" label={t("Toggle header column")}>
<ActionIcon
onClick={toggleHeaderColumn}
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Toggle header column")}
>
@@ -207,18 +220,20 @@ export const TableMenu = React.memo(
</ActionIcon>
</Tooltip>
<div className={classes.divider} />
<Tooltip position="top" label={t("Delete table")}>
<ActionIcon
onClick={deleteTable}
variant="default"
variant="subtle"
c="dark"
size="lg"
color="red"
aria-label={t("Delete table")}
>
<IconTrashX size={18} />
</ActionIcon>
</Tooltip>
</ActionIcon.Group>
</div>
</BubbleMenu>
);
}
apps/client/src/features/editor/components/table/table-text-alignment.tsx
+2 -1
View File
@@ -88,7 +88,8 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
<Popover.Target>
<Tooltip label={t("Text alignment")} withArrow>
<ActionIcon
variant="default"
variant="subtle"
c="dark"
size="lg"
aria-label={t("Text alignment")}
onClick={() => setOpened(!opened)}