Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@felixfeng33
felixfeng33 committed Dec 20, 2024
1 parent 32981c0 commit fbfe5db
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 3 deletions.
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/column-group-element.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
},
"files": [
{
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n useEditorRef,\n useElement,\n useRemoveNodeButton,\n} from '@udecode/plate-common/react';\nimport {\n type TColumnElement,\n type TColumnGroupElement,\n setColumns,\n} from '@udecode/plate-layout';\nimport {\n ColumnItemPlugin,\n ColumnPlugin,\n useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { findNodePath } from '@udecode/slate';\nimport { type LucideProps, Trash2Icon } from 'lucide-react';\nimport { useReadOnly } from 'slate-react';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport const ColumnGroupElement = withRef<typeof PlateElement>(\n ({ children, className, ...props }, ref) => {\n return (\n <PlateElement ref={ref} className={cn(className, 'mb-2')} {...props}>\n <ColumnFloatingToolbar>\n <div className={cn('flex size-full rounded')}>{children}</div>\n </ColumnFloatingToolbar>\n </PlateElement>\n );\n }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n const editor = useEditorRef();\n const readOnly = useReadOnly();\n\n const element = useElement<TColumnElement>(ColumnItemPlugin.key);\n const columnGroupElement = useElement<TColumnGroupElement>(ColumnPlugin.key);\n\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const isOpen = useDebouncePopoverOpen();\n\n const onColumnChange = (widths: string[]) => {\n setColumns(editor, {\n at: findNodePath(editor, columnGroupElement),\n widths,\n });\n };\n\n if (readOnly) return <>{children}</>;\n\n return (\n <Popover open={isOpen} modal={false}>\n <PopoverAnchor>{children}</PopoverAnchor>\n <PopoverContent\n className=\"w-auto p-1\"\n onOpenAutoFocus={(e) => e.preventDefault()}\n align=\"center\"\n side=\"top\"\n sideOffset={10}\n >\n <div className=\"box-content flex items-center [&_svg]:size-4 [&_svg]:text-muted-foreground\">\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['50%', '50%'])}\n >\n <DoubleColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['33%', '33%', '33%'])}\n >\n <ThreeColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['70%', '30%'])}\n >\n <RightSideDoubleColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['30%', '70%'])}\n >\n <LeftSideDoubleColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['25%', '50%', '25%'])}\n >\n <DoubleSideDoubleColumnOutlined />\n </Button>\n\n <Separator orientation=\"vertical\" className=\"mx-1 h-6\" />\n <Button size=\"icon\" variant=\"ghost\" {...buttonProps}>\n <Trash2Icon />\n </Button>\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n\nconst DoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M8.5 3H13V13H8.5V3ZM7.5 2H8.5H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H8.5H7.5H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5ZM7.5 13H3L3 3H7.5V13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst ThreeColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M9.25 3H6.75V13H9.25V3ZM9.25 2H6.75H5.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H5.75H6.75H9.25H10.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H10.25H9.25ZM10.25 3V13H13V3H10.25ZM3 13H5.75V3H3L3 13Z\"\n fill=\"#4C5161\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst RightSideDoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M11.25 3H13V13H11.25V3ZM10.25 2H11.25H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H11.25H10.25H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H10.25ZM10.25 13H3L3 3H10.25V13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst LeftSideDoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M5.75 3H13V13H5.75V3ZM4.75 2H5.75H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H5.75H4.75H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H4.75ZM4.75 13H3L3 3H4.75V13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst DoubleSideDoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M10.25 3H5.75V13H10.25V3ZM10.25 2H5.75H4.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.75H5.75H10.25H11.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H11.25H10.25ZM11.25 3V13H13V3H11.25ZM3 13H4.75V3H3L3 13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n",
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n useEditorRef,\n useElement,\n useRemoveNodeButton,\n} from '@udecode/plate-common/react';\nimport {\n type TColumnElement,\n type TColumnGroupElement,\n setColumns,\n} from '@udecode/plate-layout';\nimport {\n ColumnItemPlugin,\n ColumnPlugin,\n useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { findNodePath } from '@udecode/plate-common';\nimport { type LucideProps, Trash2Icon } from 'lucide-react';\nimport { useReadOnly } from 'slate-react';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport const ColumnGroupElement = withRef<typeof PlateElement>(\n ({ children, className, ...props }, ref) => {\n return (\n <PlateElement ref={ref} className={cn(className, 'mb-2')} {...props}>\n <ColumnFloatingToolbar>\n <div className={cn('flex size-full rounded')}>{children}</div>\n </ColumnFloatingToolbar>\n </PlateElement>\n );\n }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n const editor = useEditorRef();\n const readOnly = useReadOnly();\n\n const element = useElement<TColumnElement>(ColumnItemPlugin.key);\n const columnGroupElement = useElement<TColumnGroupElement>(ColumnPlugin.key);\n\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const isOpen = useDebouncePopoverOpen();\n\n const onColumnChange = (widths: string[]) => {\n setColumns(editor, {\n at: findNodePath(editor, columnGroupElement),\n widths,\n });\n };\n\n if (readOnly) return <>{children}</>;\n\n return (\n <Popover open={isOpen} modal={false}>\n <PopoverAnchor>{children}</PopoverAnchor>\n <PopoverContent\n className=\"w-auto p-1\"\n onOpenAutoFocus={(e) => e.preventDefault()}\n align=\"center\"\n side=\"top\"\n sideOffset={10}\n >\n <div className=\"box-content flex items-center [&_svg]:size-4 [&_svg]:text-muted-foreground\">\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['50%', '50%'])}\n >\n <DoubleColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['33%', '33%', '33%'])}\n >\n <ThreeColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['70%', '30%'])}\n >\n <RightSideDoubleColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['30%', '70%'])}\n >\n <LeftSideDoubleColumnOutlined />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={() => onColumnChange(['25%', '50%', '25%'])}\n >\n <DoubleSideDoubleColumnOutlined />\n </Button>\n\n <Separator orientation=\"vertical\" className=\"mx-1 h-6\" />\n <Button size=\"icon\" variant=\"ghost\" {...buttonProps}>\n <Trash2Icon />\n </Button>\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n\nconst DoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M8.5 3H13V13H8.5V3ZM7.5 2H8.5H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H8.5H7.5H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5ZM7.5 13H3L3 3H7.5V13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst ThreeColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M9.25 3H6.75V13H9.25V3ZM9.25 2H6.75H5.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H5.75H6.75H9.25H10.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H10.25H9.25ZM10.25 3V13H13V3H10.25ZM3 13H5.75V3H3L3 13Z\"\n fill=\"#4C5161\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst RightSideDoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M11.25 3H13V13H11.25V3ZM10.25 2H11.25H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H11.25H10.25H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H10.25ZM10.25 13H3L3 3H10.25V13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst LeftSideDoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M5.75 3H13V13H5.75V3ZM4.75 2H5.75H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H5.75H4.75H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H4.75ZM4.75 13H3L3 3H4.75V13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n\nconst DoubleSideDoubleColumnOutlined = (props: LucideProps) => (\n <svg\n fill=\"none\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n clipRule=\"evenodd\"\n d=\"M10.25 3H5.75V13H10.25V3ZM10.25 2H5.75H4.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.75H5.75H10.25H11.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H11.25H10.25ZM11.25 3V13H13V3H11.25ZM3 13H4.75V3H3L3 13Z\"\n fill=\"#595E6F\"\n fillRule=\"evenodd\"\n />\n </svg>\n);\n",
"path": "plate-ui/column-group-element.tsx",
"target": "components/plate-ui/column-group-element.tsx",
"type": "registry:ui"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/src/registry/default/plate-ui/column-group-element.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
ColumnPlugin,
useDebouncePopoverOpen,
} from '@udecode/plate-layout/react';
import { findNodePath } from '@udecode/slate';
import { findNodePath } from '@udecode/plate-common';
import { type LucideProps, Trash2Icon } from 'lucide-react';
import { useReadOnly } from 'slate-react';

Expand Down
2 changes: 1 addition & 1 deletion templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
ColumnPlugin,
useDebouncePopoverOpen,
} from '@udecode/plate-layout/react';
import { findNodePath } from '@udecode/slate';
import { findNodePath } from '@udecode/plate-common';
import { type LucideProps, Trash2Icon } from 'lucide-react';
import { useReadOnly } from 'slate-react';

Expand Down

0 comments on commit fbfe5db

Please sign in to comment.