Add TableCellImproved, TableHeaderImproved extensions and MenuSelectTableBorderStyle control #185
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| import { findParentNodeClosestToPos, posToDOMRect } from "@tiptap/core"; | ||
| import { findParentNodeOfType } from "prosemirror-utils"; | ||
| import { useMemo } from "react"; | ||
| import { makeStyles } from "tss-react/mui"; | ||
| import type { Except } from "type-fest"; | ||
|
|
@@ -9,7 +10,6 @@ import { useRichTextEditorContext } from "./context"; | |
| import TableMenuControls, { | ||
| type TableMenuControlsProps, | ||
| } from "./controls/TableMenuControls"; | ||
| import DebounceRender, { | ||
| type DebounceRenderProps, | ||
| } from "./utils/DebounceRender"; | ||
|
|
@@ -70,15 +70,6 @@ export default function TableBubbleMenu({ | |
| const editor = useRichTextEditorContext(); | ||
| const { classes } = useStyles(); | ||
|
|
||
|
Comment on lines
-73
to
-80
There was a problem hiding this comment. Removing this condition does make it easier to ensure the "nested" menu logic works if editor focus inadvertently gets removed, but this has the downside that even if a user clicks out of the editor and is no longer interacting with it, the bubble menu stays open. Perhaps that's a worthwhile tradeoff. (as mentioned in #185 (comment)) |
||
| // We want to position the table menu outside the entire table, rather than at the | ||
| // current cursor position, so that it's essentially static even as the table changes | ||
| // in size and doesn't "block" things within the table while you're trying to edit. | ||
|
|
@@ -143,10 +134,16 @@ export default function TableBubbleMenu({ | |
| <TableMenuControls className={classes.controls} labels={labels} /> | ||
| ); | ||
|
|
||
| const tableNode = findParentNodeOfType(editor.state.schema.nodes.table)( | ||
| editor.state.selection | ||
| ); | ||
|
|
||
| const shouldOpen = Boolean(tableNode); | ||
|
Comment on lines
+137
to
+141
There was a problem hiding this comment. Can you explain the rationale behind this vs I imagine Tiptap may have a util equivalent to |
||
|
|
||
| return ( | ||
| <ControlledBubbleMenu | ||
| editor={editor} | ||
| open={shouldOpen} | ||
| anchorEl={bubbleMenuAnchorEl} | ||
| // So the menu doesn't move as columns are added, removed, or resized, we | ||
| // prefer "foo-start" rather than the centered "foo" placement. Similarly, | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,193 @@ | ||
| import BorderStyle from "@mui/icons-material/BorderStyle"; | ||
| import { ClickAwayListener, Fade, Paper, Popper } from "@mui/material"; | ||
| import * as React from "react"; | ||
| import { makeStyles } from "tss-react/mui"; | ||
| import { useRichTextEditorContext } from "../context"; | ||
| import { | ||
| BorderStyleDashed, | ||
| BorderStyleDotted, | ||
| BorderStyleDouble, | ||
| BorderStyleGroove, | ||
| BorderStyleInset, | ||
| BorderStyleNone, | ||
| BorderStyleOutset, | ||
| BorderStyleRidge, | ||
| BorderStyleSolid, | ||
| } from "../icons"; | ||
| import { Z_INDEXES } from "../styles"; | ||
| import MenuButton from "./MenuButton"; | ||
| import type { MenuButtonTooltipProps } from "./MenuButtonTooltip"; | ||
| import MenuControlsContainer from "./MenuControlsContainer"; | ||
|
|
||
| export type BorderStyleSelectOption = { | ||
| value: string; | ||
| IconComponent: React.ElementType<{ | ||
| className: string; | ||
| }>; | ||
| label?: string; | ||
| shortcutKeys?: MenuButtonTooltipProps["shortcutKeys"]; | ||
| }; | ||
|
|
||
| export type MenuSelectTableBorderStyleProps = { | ||
| options?: BorderStyleSelectOption[]; | ||
| label?: string; | ||
| className?: string; | ||
| }; | ||
|
|
||
| const useStyles = makeStyles({ name: { MenuSelectTableBorderStyle } })( | ||
| (theme) => ({ | ||
| root: { | ||
| zIndex: Z_INDEXES.BUBBLE_MENU, | ||
| }, | ||
|
|
||
| paper: { | ||
| backgroundColor: theme.palette.background.default, | ||
| }, | ||
|
Comment on lines
+43
to
+45
There was a problem hiding this comment. This leads to a lint warning currently, since it's not used: https://github.com/sjdemartini/mui-tiptap/actions/runs/7368820861/job/20510696875?pr=185#step:10:12 (I will probably update eslint so that it returns a failing status code even for warnings, since ideally CI would flag this more noisily and prevent warnings from being merged.) edit: now enforced as of #192 |
||
| }) | ||
| ); | ||
|
|
||
| const DEFAULT_BORDER_STYLE_OPTIONS: BorderStyleSelectOption[] = [ | ||
|
There was a problem hiding this comment. Is it correct that many of these options don't display differently than "solid" with the default mui-tiptap styles that have borderWidth set to 1px, and they'd require >1px borders to be visually distinct? |
||
| { | ||
| value: "solid", | ||
| label: "Solid", | ||
| IconComponent: BorderStyleSolid, | ||
| }, | ||
| { | ||
| value: "dashed", | ||
| label: "Dashed", | ||
| IconComponent: BorderStyleDashed, | ||
| }, | ||
| { | ||
| value: "dotted", | ||
| label: "Dotted", | ||
| IconComponent: BorderStyleDotted, | ||
| }, | ||
| { | ||
| value: "double", | ||
| label: "Double", | ||
| IconComponent: BorderStyleDouble, | ||
| }, | ||
| { | ||
| value: "groove", | ||
| label: "Groove", | ||
| IconComponent: BorderStyleGroove, | ||
| }, | ||
| { | ||
| value: "ridge", | ||
| label: "Ridge", | ||
| IconComponent: BorderStyleRidge, | ||
| }, | ||
| { | ||
| value: "inset", | ||
| label: "Inset", | ||
| IconComponent: BorderStyleInset, | ||
| }, | ||
| { | ||
| value: "outset", | ||
| label: "Outset", | ||
| IconComponent: BorderStyleOutset, | ||
| }, | ||
| { | ||
| value: "none", | ||
| label: "None", | ||
| IconComponent: BorderStyleNone, | ||
| }, | ||
| ]; | ||
|
|
||
| export default function MenuSelectTableBorderStyle({ | ||
| options = DEFAULT_BORDER_STYLE_OPTIONS, | ||
| label, | ||
| className, | ||
| }: MenuSelectTableBorderStyleProps) { | ||
| const editor = useRichTextEditorContext(); | ||
| const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); | ||
| const open = Boolean(anchorEl); | ||
| const { classes, cx } = useStyles(); | ||
| const handleClick = (event: React.MouseEvent<HTMLElement>) => { | ||
| anchorEl ? handleClose() : setAnchorEl(event.currentTarget); | ||
| }; | ||
| const handleClose = () => { | ||
| setAnchorEl(null); | ||
| }; | ||
|
|
||
| if (!editor?.isEditable) { | ||
| return null; | ||
| } | ||
|
|
||
| const IconComponent = | ||
| options.find( | ||
| (option) => | ||
| editor.getAttributes("tableHeader").borderStyle === option.value || | ||
| editor.getAttributes("tableCell").borderStyle === option.value | ||
| )?.IconComponent ?? BorderStyle; | ||
|
|
||
| return ( | ||
| <> | ||
| <MenuButton | ||
| tooltipLabel={label ?? "Border style"} | ||
| IconComponent={IconComponent} | ||
| onClick={handleClick} | ||
| selected={open} | ||
| aria-haspopup="true" | ||
| aria-expanded={open ? "true" : undefined} | ||
| aria-controls={open ? "border-style-menu" : undefined} | ||
|
There was a problem hiding this comment. Thanks for being mindful of accessibility. I don't see the |
||
| /> | ||
| <Popper | ||
| transition | ||
| open={open} | ||
| anchorEl={anchorEl} | ||
| placement="bottom-start" | ||
| className={cx(classes.root, className)} | ||
| > | ||
| {({ TransitionProps }) => ( | ||
| <Fade {...TransitionProps} timeout={100}> | ||
| <div> | ||
| <ClickAwayListener | ||
| mouseEvent="onMouseDown" | ||
| touchEvent="onTouchStart" | ||
| onClickAway={handleClose} | ||
| > | ||
| <Paper elevation={5}> | ||
| <MenuControlsContainer | ||
| className={className} | ||
| direction="vertical" | ||
|
There was a problem hiding this comment. Clever to reuse this component for this purpose, with this new prop! |
||
| > | ||
| {options.map((option) => ( | ||
| <MenuButton | ||
| key={option.value} | ||
| tooltipLabel={option.label ?? option.value} | ||
| tooltipPlacement="right" | ||
| IconComponent={option.IconComponent} | ||
| onClick={() => | ||
| editor | ||
| .chain() | ||
| .focus() | ||
| .setCellAttribute("borderStyle", option.value) | ||
| .updateAttributes("tableHeader", { | ||
| borderStyle: option.value, | ||
| }) | ||
|
Comment on lines
+165
to
+168
There was a problem hiding this comment. I take it |
||
| .run() | ||
| } | ||
| disabled={ | ||
| !editor | ||
| .can() | ||
| .setCellAttribute("borderStyle", option.value) | ||
| } | ||
| selected={ | ||
| editor.getAttributes("tableHeader").borderStyle === | ||
| option.value || | ||
| editor.getAttributes("tableCell").borderStyle === | ||
| option.value | ||
| } | ||
| /> | ||
| ))} | ||
| </MenuControlsContainer> | ||
| </Paper> | ||
| </ClickAwayListener> | ||
| </div> | ||
| </Fade> | ||
| )} | ||
| </Popper> | ||
| </> | ||
| ); | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a reason this is pinned with 2.0.4 minimum instead of 2.0.0-beta.210 like the other dependencies? Would this not work if the end user only has 2.0.0 installed for instance?