da19054555
* Header toggling, resizable columns * Allow all blocks in table cells, disable column resizing in read-only * Fixed dynamic scroll shadows * Refactor, scroll styling * fix scrolling, tweaks * fix: Table layout lost on sort * fix: Caching of grip decorators * refactor * stash * fix first render shadows * stash * First add column grip, styles * Just add column/row click handlers left * fix: isTableSelected for single cell table * Refactor mousedown handlers * fix: 'Add row before' command missing on first row * fix overflow on rhs * fix: Error clicking column grip when menu is open * Hide table controls when printing * Restore table header background * fix: Header behavior when adding columns and rows at the edges * Tweak header styling * fix: Serialize and parsing of column attributes when copy/pasting fix: Column width is lost when changing column alignment
118 lines
2.8 KiB
TypeScript
118 lines
2.8 KiB
TypeScript
import {
|
|
TrashIcon,
|
|
AlignLeftIcon,
|
|
AlignRightIcon,
|
|
AlignCenterIcon,
|
|
InsertLeftIcon,
|
|
InsertRightIcon,
|
|
ArrowIcon,
|
|
MoreIcon,
|
|
TableHeaderColumnIcon,
|
|
} from "outline-icons";
|
|
import { EditorState } from "prosemirror-state";
|
|
import * as React from "react";
|
|
import styled from "styled-components";
|
|
import isNodeActive from "@shared/editor/queries/isNodeActive";
|
|
import { MenuItem } from "@shared/editor/types";
|
|
import { Dictionary } from "~/hooks/useDictionary";
|
|
|
|
export default function tableColMenuItems(
|
|
state: EditorState,
|
|
index: number,
|
|
rtl: boolean,
|
|
dictionary: Dictionary
|
|
): MenuItem[] {
|
|
const { schema } = state;
|
|
|
|
return [
|
|
{
|
|
name: "setColumnAttr",
|
|
tooltip: dictionary.alignLeft,
|
|
icon: <AlignLeftIcon />,
|
|
attrs: { index, alignment: "left" },
|
|
active: isNodeActive(schema.nodes.th, {
|
|
colspan: 1,
|
|
rowspan: 1,
|
|
alignment: "left",
|
|
}),
|
|
},
|
|
{
|
|
name: "setColumnAttr",
|
|
tooltip: dictionary.alignCenter,
|
|
icon: <AlignCenterIcon />,
|
|
attrs: { index, alignment: "center" },
|
|
active: isNodeActive(schema.nodes.th, {
|
|
colspan: 1,
|
|
rowspan: 1,
|
|
alignment: "center",
|
|
}),
|
|
},
|
|
{
|
|
name: "setColumnAttr",
|
|
tooltip: dictionary.alignRight,
|
|
icon: <AlignRightIcon />,
|
|
attrs: { index, alignment: "right" },
|
|
active: isNodeActive(schema.nodes.th, {
|
|
colspan: 1,
|
|
rowspan: 1,
|
|
alignment: "right",
|
|
}),
|
|
},
|
|
{
|
|
name: "separator",
|
|
},
|
|
{
|
|
name: "sortTable",
|
|
tooltip: dictionary.sortAsc,
|
|
attrs: { index, direction: "asc" },
|
|
icon: <SortAscIcon />,
|
|
},
|
|
{
|
|
name: "sortTable",
|
|
tooltip: dictionary.sortDesc,
|
|
attrs: { index, direction: "desc" },
|
|
icon: <SortDescIcon />,
|
|
},
|
|
{
|
|
name: "separator",
|
|
},
|
|
{
|
|
icon: <MoreIcon />,
|
|
children: [
|
|
{
|
|
name: "toggleHeaderColumn",
|
|
label: dictionary.toggleHeader,
|
|
icon: <TableHeaderColumnIcon />,
|
|
visible: index === 0,
|
|
},
|
|
{
|
|
name: rtl ? "addColumnAfter" : "addColumnBefore",
|
|
label: rtl ? dictionary.addColumnAfter : dictionary.addColumnBefore,
|
|
icon: <InsertLeftIcon />,
|
|
attrs: { index },
|
|
},
|
|
{
|
|
name: rtl ? "addColumnBefore" : "addColumnAfter",
|
|
label: rtl ? dictionary.addColumnBefore : dictionary.addColumnAfter,
|
|
icon: <InsertRightIcon />,
|
|
attrs: { index },
|
|
},
|
|
{
|
|
name: "deleteColumn",
|
|
dangerous: true,
|
|
label: dictionary.deleteColumn,
|
|
icon: <TrashIcon />,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
}
|
|
|
|
const SortAscIcon = styled(ArrowIcon)`
|
|
transform: rotate(-90deg);
|
|
`;
|
|
|
|
const SortDescIcon = styled(ArrowIcon)`
|
|
transform: rotate(90deg);
|
|
`;
|