Skip to content

Commit

Permalink
Merge branch 'main' into docs/plate-controller
Browse files Browse the repository at this point in the history
  • Loading branch information
@12joan
12joan committed Jan 8, 2024
2 parents 517ba2a + 7988905 commit edbf260
Show file tree
Hide file tree
Showing 4 changed files with 157 additions and 165 deletions.
8 changes: 0 additions & 8 deletions BREAKING_CHANGES.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,3 @@
# 30.0.0

## @udecode/plate-table@30.0.0

### Major Changes

- [#2867](https://github.com/udecode/plate/pull/2867) by [@12joan](https://github.com/12joan) – Fix: TableProvider is incorrectly shared by all tables in the editor. TableProvider must now be rendered as part of TableElement.

# 29.0.0

## @udecode/plate-utils@29.0.0
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/registry/styles/default/table-element.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"files": [
{
"name": "table-element.tsx",
"content": "import React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { PopoverAnchor } from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport {\n isSelectionExpanded,\n PlateElement,\n useEditorRef,\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n} from '@udecode/plate-common';\nimport {\n mergeTableCells,\n TTableElement,\n unmergeTableCells,\n useTableBordersDropdownMenuContentState,\n useTableElement,\n useTableElementState,\n useTableMergeState,\n} from '@udecode/plate-table';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nexport const TableBordersDropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>((props, ref) => {\n const {\n getOnSelectTableBorder,\n hasOuterBorders,\n hasBottomBorder,\n hasLeftBorder,\n hasNoBorders,\n hasRightBorder,\n hasTopBorder,\n } = useTableBordersDropdownMenuContentState();\n\n return (\n <DropdownMenuContent\n ref={ref}\n className={cn('min-w-[220px]')}\n side=\"right\"\n align=\"start\"\n sideOffset={0}\n {...props}\n >\n <DropdownMenuCheckboxItem\n checked={hasBottomBorder}\n onCheckedChange={getOnSelectTableBorder('bottom')}\n >\n <Icons.borderBottom className={iconVariants({ size: 'sm' })} />\n <div>Bottom Border</div>\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={hasTopBorder}\n onCheckedChange={getOnSelectTableBorder('top')}\n >\n <Icons.borderTop className={iconVariants({ size: 'sm' })} />\n <div>Top Border</div>\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={hasLeftBorder}\n onCheckedChange={getOnSelectTableBorder('left')}\n >\n <Icons.borderLeft className={iconVariants({ size: 'sm' })} />\n <div>Left Border</div>\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={hasRightBorder}\n onCheckedChange={getOnSelectTableBorder('right')}\n >\n <Icons.borderRight className={iconVariants({ size: 'sm' })} />\n <div>Right Border</div>\n </DropdownMenuCheckboxItem>\n\n <Separator />\n\n <DropdownMenuCheckboxItem\n checked={hasNoBorders}\n onCheckedChange={getOnSelectTableBorder('none')}\n >\n <Icons.borderNone className={iconVariants({ size: 'sm' })} />\n <div>No Border</div>\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={hasOuterBorders}\n onCheckedChange={getOnSelectTableBorder('outer')}\n >\n <Icons.borderAll className={iconVariants({ size: 'sm' })} />\n <div>Outside Borders</div>\n </DropdownMenuCheckboxItem>\n </DropdownMenuContent>\n );\n});\n\nexport const TableFloatingToolbar = withRef<typeof PopoverContent>(\n ({ children, ...props }, ref) => {\n const element = useElement<TTableElement>();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n\n const readOnly = useReadOnly();\n const selected = useSelected();\n const editor = useEditorRef();\n\n const collapsed = !readOnly && selected && selectionCollapsed;\n const open = !readOnly && selected;\n\n const { canMerge, canUnmerge } = useTableMergeState();\n\n const mergeContent = canMerge && (\n <Button\n contentEditable={false}\n variant=\"ghost\"\n isMenu\n onClick={() => mergeTableCells(editor)}\n >\n <Icons.combine className=\"mr-2 h-4 w-4\" />\n Merge\n </Button>\n );\n\n const unmergeButton = canUnmerge && (\n <Button\n contentEditable={false}\n variant=\"ghost\"\n isMenu\n onClick={() => unmergeTableCells(editor)}\n >\n <Icons.ungroup className=\"mr-2 h-4 w-4\" />\n Unmerge\n </Button>\n );\n\n const bordersContent = collapsed && (\n <>\n <DropdownMenu modal={false}>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" isMenu>\n <Icons.borderAll className=\"mr-2 h-4 w-4\" />\n Borders\n </Button>\n </DropdownMenuTrigger>\n\n <DropdownMenuPortal>\n <TableBordersDropdownMenuContent />\n </DropdownMenuPortal>\n </DropdownMenu>\n\n <Button contentEditable={false} variant=\"ghost\" isMenu {...buttonProps}>\n <Icons.delete className=\"mr-2 h-4 w-4\" />\n Delete\n </Button>\n </>\n );\n\n return (\n <Popover open={open} modal={false}>\n <PopoverAnchor asChild>{children}</PopoverAnchor>\n {(canMerge || canUnmerge || collapsed) && (\n <PopoverContent\n ref={ref}\n className={cn(\n popoverVariants(),\n 'flex w-[220px] flex-col gap-1 p-1'\n )}\n onOpenAutoFocus={(e) => e.preventDefault()}\n {...props}\n >\n {unmergeButton}\n {mergeContent}\n {bordersContent}\n </PopoverContent>\n )}\n </Popover>\n );\n }\n);\n\nexport const TableElement = withRef<typeof PlateElement>(\n ({ className, children, ...props }, ref) => {\n const { colSizes, isSelectingCell, minColumnWidth, marginLeft } =\n useTableElementState();\n const { props: tableProps, colGroupProps } = useTableElement();\n\n return (\n <TableFloatingToolbar>\n <div style={{ paddingLeft: marginLeft }}>\n <PlateElement\n ref={ref}\n asChild\n className={cn(\n 'my-4 ml-px mr-0 table h-px w-full table-fixed border-collapse',\n isSelectingCell && '[&_*::selection]:bg-none',\n className\n )}\n {...tableProps}\n {...props}\n >\n <table>\n <colgroup {...colGroupProps}>\n {colSizes.map((width, index) => (\n <col\n key={index}\n style={{\n minWidth: minColumnWidth,\n width: width || undefined,\n }}\n />\n ))}\n </colgroup>\n\n <tbody className=\"min-w-full\">{children}</tbody>\n </table>\n </PlateElement>\n </div>\n </TableFloatingToolbar>\n );\n }\n);\n"
"content": "import React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { PopoverAnchor } from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport {\n isSelectionExpanded,\n PlateElement,\n useEditorRef,\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n withHOC,\n} from '@udecode/plate-common';\nimport {\n mergeTableCells,\n TableProvider,\n TTableElement,\n unmergeTableCells,\n useTableBordersDropdownMenuContentState,\n useTableElement,\n useTableElementState,\n useTableMergeState,\n} from '@udecode/plate-table';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nexport const TableBordersDropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>((props, ref) => {\n const {\n getOnSelectTableBorder,\n hasOuterBorders,\n hasBottomBorder,\n hasLeftBorder,\n hasNoBorders,\n hasRightBorder,\n hasTopBorder,\n } = useTableBordersDropdownMenuContentState();\n\n return (\n <DropdownMenuContent\n ref={ref}\n className={cn('min-w-[220px]')}\n side=\"right\"\n align=\"start\"\n sideOffset={0}\n {...props}\n >\n <DropdownMenuCheckboxItem\n checked={hasBottomBorder}\n onCheckedChange={getOnSelectTableBorder('bottom')}\n >\n <Icons.borderBottom className={iconVariants({ size: 'sm' })} />\n <div>Bottom Border</div>\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={hasTopBorder}\n onCheckedChange={getOnSelectTableBorder('top')}\n >\n <Icons.borderTop className={iconVariants({ size: 'sm' })} />\n <div>Top Border</div>\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={hasLeftBorder}\n onCheckedChange={getOnSelectTableBorder('left')}\n >\n <Icons.borderLeft className={iconVariants({ size: 'sm' })} />\n <div>Left Border</div>\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={hasRightBorder}\n onCheckedChange={getOnSelectTableBorder('right')}\n >\n <Icons.borderRight className={iconVariants({ size: 'sm' })} />\n <div>Right Border</div>\n </DropdownMenuCheckboxItem>\n\n <Separator />\n\n <DropdownMenuCheckboxItem\n checked={hasNoBorders}\n onCheckedChange={getOnSelectTableBorder('none')}\n >\n <Icons.borderNone className={iconVariants({ size: 'sm' })} />\n <div>No Border</div>\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={hasOuterBorders}\n onCheckedChange={getOnSelectTableBorder('outer')}\n >\n <Icons.borderAll className={iconVariants({ size: 'sm' })} />\n <div>Outside Borders</div>\n </DropdownMenuCheckboxItem>\n </DropdownMenuContent>\n );\n});\n\nexport const TableFloatingToolbar = withRef<typeof PopoverContent>(\n ({ children, ...props }, ref) => {\n const element = useElement<TTableElement>();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n\n const readOnly = useReadOnly();\n const selected = useSelected();\n const editor = useEditorRef();\n\n const collapsed = !readOnly && selected && selectionCollapsed;\n const open = !readOnly && selected;\n\n const { canMerge, canUnmerge } = useTableMergeState();\n\n const mergeContent = canMerge && (\n <Button\n contentEditable={false}\n variant=\"ghost\"\n isMenu\n onClick={() => mergeTableCells(editor)}\n >\n <Icons.combine className=\"mr-2 h-4 w-4\" />\n Merge\n </Button>\n );\n\n const unmergeButton = canUnmerge && (\n <Button\n contentEditable={false}\n variant=\"ghost\"\n isMenu\n onClick={() => unmergeTableCells(editor)}\n >\n <Icons.ungroup className=\"mr-2 h-4 w-4\" />\n Unmerge\n </Button>\n );\n\n const bordersContent = collapsed && (\n <>\n <DropdownMenu modal={false}>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" isMenu>\n <Icons.borderAll className=\"mr-2 h-4 w-4\" />\n Borders\n </Button>\n </DropdownMenuTrigger>\n\n <DropdownMenuPortal>\n <TableBordersDropdownMenuContent />\n </DropdownMenuPortal>\n </DropdownMenu>\n\n <Button contentEditable={false} variant=\"ghost\" isMenu {...buttonProps}>\n <Icons.delete className=\"mr-2 h-4 w-4\" />\n Delete\n </Button>\n </>\n );\n\n return (\n <Popover open={open} modal={false}>\n <PopoverAnchor asChild>{children}</PopoverAnchor>\n {(canMerge || canUnmerge || collapsed) && (\n <PopoverContent\n ref={ref}\n className={cn(\n popoverVariants(),\n 'flex w-[220px] flex-col gap-1 p-1'\n )}\n onOpenAutoFocus={(e) => e.preventDefault()}\n {...props}\n >\n {unmergeButton}\n {mergeContent}\n {bordersContent}\n </PopoverContent>\n )}\n </Popover>\n );\n }\n);\n\nexport const TableElement = withHOC(\n TableProvider,\n withRef<typeof PlateElement>(({ className, children, ...props }, ref) => {\n const { colSizes, isSelectingCell, minColumnWidth, marginLeft } =\n useTableElementState();\n const { props: tableProps, colGroupProps } = useTableElement();\n\n return (\n <TableFloatingToolbar>\n <div style={{ paddingLeft: marginLeft }}>\n <PlateElement\n ref={ref}\n asChild\n className={cn(\n 'my-4 ml-px mr-0 table h-px w-full table-fixed border-collapse',\n isSelectingCell && '[&_*::selection]:bg-none',\n className\n )}\n {...tableProps}\n {...props}\n >\n <table>\n <colgroup {...colGroupProps}>\n {colSizes.map((width, index) => (\n <col\n key={index}\n style={{\n minWidth: minColumnWidth,\n width: width || undefined,\n }}\n />\n ))}\n </colgroup>\n\n <tbody className=\"min-w-full\">{children}</tbody>\n </table>\n </PlateElement>\n </div>\n </TableFloatingToolbar>\n );\n })\n);\n"
}
],
"type": "components:plate-ui"
Expand Down
2 changes: 1 addition & 1 deletion packages/table/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

### Major Changes

- [#2867](https://github.com/udecode/plate/pull/2867) by [@12joan](https://github.com/12joan) – Fix: TableProvider is incorrectly shared by all tables in the editor. TableProvider must now be rendered as part of TableElement.
- [#2867](https://github.com/udecode/plate/pull/2867) by [@12joan](https://github.com/12joan) – Fix: in v28, `TableProvider` was incorrectly shared by all tables in the editor. `TableProvider` must now be rendered as part of `TableElement`.

### Patch Changes

Expand Down
Loading

0 comments on commit edbf260

Please sign in to comment.