Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Registry #3695

Merged
merged 1 commit into from
Oct 31, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/align-dropdown-menu.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
},
"files": [
{
"content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useAlignDropdownMenu,\n useAlignDropdownMenuState,\n} from '@udecode/plate-alignment/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n icon: Icons.alignLeft,\n value: 'left',\n },\n {\n icon: Icons.alignCenter,\n value: 'center',\n },\n {\n icon: Icons.alignRight,\n value: 'right',\n },\n {\n icon: Icons.alignJustify,\n value: 'justify',\n },\n];\n\nexport function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) {\n const state = useAlignDropdownMenuState();\n const { radioGroupProps } = useAlignDropdownMenu(state);\n\n const openState = useOpenState();\n const IconValue =\n items.find((item) => item.value === radioGroupProps.value)?.icon ??\n Icons.alignLeft;\n\n return (\n <DropdownMenu modal={false} {...openState} {...props}>\n <DropdownMenuTrigger asChild>\n <ToolbarButton pressed={openState.open} tooltip=\"Align\" isDropdown>\n <IconValue />\n </ToolbarButton>\n </DropdownMenuTrigger>\n\n <DropdownMenuContent className=\"min-w-0\" align=\"start\">\n <DropdownMenuRadioGroup\n className=\"flex flex-col gap-0.5\"\n {...radioGroupProps}\n >\n {items.map(({ icon: Icon, value: itemValue }) => (\n <DropdownMenuRadioItem key={itemValue} value={itemValue} hideIcon>\n <Icon className={iconVariants({ variant: 'toolbar' })} />\n </DropdownMenuRadioItem>\n ))}\n </DropdownMenuRadioGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n",
"content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useAlignDropdownMenu,\n useAlignDropdownMenuState,\n} from '@udecode/plate-alignment/react';\nimport {\n AlignCenterIcon,\n AlignJustifyIcon,\n AlignLeftIcon,\n AlignRightIcon,\n} from 'lucide-react';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n icon: AlignLeftIcon,\n value: 'left',\n },\n {\n icon: AlignCenterIcon,\n value: 'center',\n },\n {\n icon: AlignRightIcon,\n value: 'right',\n },\n {\n icon: AlignJustifyIcon,\n value: 'justify',\n },\n];\n\nexport function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) {\n const state = useAlignDropdownMenuState();\n const { radioGroupProps } = useAlignDropdownMenu(state);\n\n const openState = useOpenState();\n const IconValue =\n items.find((item) => item.value === radioGroupProps.value)?.icon ??\n AlignLeftIcon;\n\n return (\n <DropdownMenu modal={false} {...openState} {...props}>\n <DropdownMenuTrigger asChild>\n <ToolbarButton pressed={openState.open} tooltip=\"Align\" isDropdown>\n <IconValue />\n </ToolbarButton>\n </DropdownMenuTrigger>\n\n <DropdownMenuContent className=\"min-w-0\" align=\"start\">\n <DropdownMenuRadioGroup\n className=\"flex flex-col gap-0.5\"\n {...radioGroupProps}\n >\n {items.map(({ icon: Icon, value: itemValue }) => (\n <DropdownMenuRadioItem key={itemValue} value={itemValue} hideIcon>\n <Icon className=\"size-5\" />\n </DropdownMenuRadioItem>\n ))}\n </DropdownMenuRadioGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n",
"path": "plate-ui/align-dropdown-menu.tsx",
"target": "components/plate-ui/align-dropdown-menu.tsx",
"type": "registry:ui"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/column-group-element.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
},
"files": [
{
"content": "'use client';\n\nimport React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement, useRemoveNodeButton } from '@udecode/plate-common/react';\nimport {\n ColumnItemPlugin,\n useColumnState,\n useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { Delete } from 'lucide-react';\nimport { useReadOnly } from 'slate-react';\n\nimport {\n DoubleColumnOutlined,\n DoubleSideDoubleColumnOutlined,\n LeftSideDoubleColumnOutlined,\n RightSideDoubleColumnOutlined,\n ThreeColumnOutlined,\n} from '@/components/icons';\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, 'my-2')} {...props}>\n <ColumnFloatingToolbar>\n <div className={cn('flex size-full gap-4 rounded')}>{children}</div>\n </ColumnFloatingToolbar>\n </PlateElement>\n );\n }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n const readOnly = useReadOnly();\n\n const {\n setDoubleColumn,\n setDoubleSideDoubleColumn,\n setLeftSideDoubleColumn,\n setRightSideDoubleColumn,\n setThreeColumn,\n } = useColumnState();\n\n const element = useElement<TColumnElement>(ColumnItemPlugin.key);\n\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const isOpen = useDebouncePopoverOpen();\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 h-9 items-center gap-1 [&_svg]:size-4 [&_svg]:text-muted-foreground\">\n <Button size=\"sms\" variant=\"ghost\" onClick={setDoubleColumn}>\n <DoubleColumnOutlined />\n </Button>\n <Button size=\"sms\" variant=\"ghost\" onClick={setThreeColumn}>\n <ThreeColumnOutlined />\n </Button>\n <Button size=\"sms\" variant=\"ghost\" onClick={setRightSideDoubleColumn}>\n <RightSideDoubleColumnOutlined />\n </Button>\n <Button size=\"sms\" variant=\"ghost\" onClick={setLeftSideDoubleColumn}>\n <LeftSideDoubleColumnOutlined />\n </Button>\n <Button\n size=\"sms\"\n variant=\"ghost\"\n onClick={setDoubleSideDoubleColumn}\n >\n <DoubleSideDoubleColumnOutlined />\n </Button>\n\n <Separator orientation=\"vertical\" className=\"my-1\" />\n <Button size=\"sms\" variant=\"ghost\" {...buttonProps}>\n <Delete />\n </Button>\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n",
"content": "'use client';\n\nimport React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement, useRemoveNodeButton } from '@udecode/plate-common/react';\nimport {\n ColumnItemPlugin,\n useColumnState,\n useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { type LucideProps, Delete } 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, 'my-2')} {...props}>\n <ColumnFloatingToolbar>\n <div className={cn('flex size-full gap-4 rounded')}>{children}</div>\n </ColumnFloatingToolbar>\n </PlateElement>\n );\n }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n const readOnly = useReadOnly();\n\n const {\n setDoubleColumn,\n setDoubleSideDoubleColumn,\n setLeftSideDoubleColumn,\n setRightSideDoubleColumn,\n setThreeColumn,\n } = useColumnState();\n\n const element = useElement<TColumnElement>(ColumnItemPlugin.key);\n\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const isOpen = useDebouncePopoverOpen();\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 h-9 items-center gap-1 [&_svg]:size-4 [&_svg]:text-muted-foreground\">\n <Button size=\"sms\" variant=\"ghost\" onClick={setDoubleColumn}>\n <DoubleColumnOutlined />\n </Button>\n <Button size=\"sms\" variant=\"ghost\" onClick={setThreeColumn}>\n <ThreeColumnOutlined />\n </Button>\n <Button size=\"sms\" variant=\"ghost\" onClick={setRightSideDoubleColumn}>\n <RightSideDoubleColumnOutlined />\n </Button>\n <Button size=\"sms\" variant=\"ghost\" onClick={setLeftSideDoubleColumn}>\n <LeftSideDoubleColumnOutlined />\n </Button>\n <Button\n size=\"sms\"\n variant=\"ghost\"\n onClick={setDoubleSideDoubleColumn}\n >\n <DoubleSideDoubleColumnOutlined />\n </Button>\n\n <Separator orientation=\"vertical\" className=\"my-1\" />\n <Button size=\"sms\" variant=\"ghost\" {...buttonProps}>\n <Delete />\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
Loading