From 2b3fde3e7c6b6b1c5f1229a3a03f786cd54f6a50 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 27 Dec 2023 01:57:16 +0000 Subject: [PATCH] docs --- apps/www/package.json | 2 +- .../styles/default/align-dropdown-menu.json | 2 +- .../registry/styles/default/avatar.json | 2 +- .../styles/default/blockquote-element.json | 2 +- .../registry/styles/default/button.json | 2 +- .../registry/styles/default/caption.json | 2 +- .../registry/styles/default/checkbox.json | 2 +- .../public/registry/styles/default/cloud.json | 8 +++---- .../styles/default/code-block-element.json | 4 ++-- .../registry/styles/default/code-leaf.json | 2 +- .../styles/default/code-line-element.json | 2 +- .../styles/default/code-syntax-leaf.json | 2 +- .../styles/default/color-dropdown-menu.json | 6 ++--- .../registry/styles/default/combobox.json | 2 +- .../registry/styles/default/command.json | 2 +- .../registry/styles/default/comment-leaf.json | 2 +- .../styles/default/comments-popover.json | 10 ++++---- .../styles/default/cursor-overlay.json | 2 +- .../registry/styles/default/dialog.json | 2 +- .../registry/styles/default/draggable.json | 2 +- .../styles/default/dropdown-menu.json | 2 +- .../registry/styles/default/editor.json | 2 +- .../styles/default/emoji-combobox.json | 2 +- .../styles/default/emoji-dropdown-menu.json | 10 ++++---- .../styles/default/excalidraw-element.json | 2 +- .../styles/default/fixed-toolbar.json | 2 +- .../styles/default/floating-toolbar.json | 2 +- .../styles/default/heading-element.json | 2 +- .../styles/default/highlight-leaf.json | 2 +- .../registry/styles/default/hr-element.json | 2 +- .../styles/default/image-element.json | 2 +- .../default/indent-list-toolbar-button.json | 2 +- .../styles/default/indent-toolbar-button.json | 2 +- .../public/registry/styles/default/input.json | 2 +- .../registry/styles/default/kbd-leaf.json | 2 +- .../registry/styles/default/link-element.json | 2 +- .../styles/default/link-floating-toolbar.json | 2 +- .../styles/default/link-toolbar-button.json | 2 +- .../registry/styles/default/list-element.json | 2 +- .../styles/default/list-toolbar-button.json | 2 +- .../styles/default/mark-toolbar-button.json | 2 +- .../styles/default/media-embed-element.json | 2 +- .../styles/default/media-toolbar-button.json | 2 +- .../styles/default/mention-combobox.json | 2 +- .../styles/default/mention-element.json | 2 +- .../styles/default/mention-input-element.json | 2 +- .../default/outdent-toolbar-button.json | 2 +- .../styles/default/paragraph-element.json | 2 +- .../registry/styles/default/placeholder.json | 2 +- .../registry/styles/default/popover.json | 2 +- .../registry/styles/default/resizable.json | 2 +- .../styles/default/search-highlight-leaf.json | 2 +- .../registry/styles/default/separator.json | 2 +- .../styles/default/table-cell-element.json | 2 +- .../styles/default/table-element.json | 2 +- .../styles/default/table-row-element.json | 2 +- .../styles/default/todo-list-element.json | 2 +- .../registry/styles/default/toggle.json | 2 +- .../registry/styles/default/toolbar.json | 2 +- .../registry/styles/default/tooltip.json | 2 +- yarn.lock | 24 +++++++++---------- 61 files changed, 86 insertions(+), 86 deletions(-) diff --git a/apps/www/package.json b/apps/www/package.json index 7d47a6592e..1a71a2ffe1 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -99,10 +99,10 @@ "@udecode/plate-test-utils": "workspace:^", "@udecode/plate-trailing-block": "workspace:^", "@udecode/plate-utils": "workspace:^", + "@udecode/react-utils": "workspace:^", "@udecode/slate": "workspace:^", "@udecode/slate-react": "workspace:^", "@udecode/slate-utils": "workspace:^", - "@udecode/react-utils": "workspace:^", "@udecode/utils": "workspace:^", "@vercel/analytics": "^1.0.1", "@vercel/og": "^0.5.8", diff --git a/apps/www/public/registry/styles/default/align-dropdown-menu.json b/apps/www/public/registry/styles/default/align-dropdown-menu.json index 09faec8230..b1a67ae8c2 100644 --- a/apps/www/public/registry/styles/default/align-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/align-dropdown-menu.json @@ -10,7 +10,7 @@ "files": [ { "name": "align-dropdown-menu.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\nimport {\n useAlignDropdownMenu,\n useAlignDropdownMenuState,\n} from '@udecode/plate-alignment';\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 value: 'left',\n icon: Icons.alignLeft,\n },\n {\n value: 'center',\n icon: Icons.alignCenter,\n },\n {\n value: 'right',\n icon: Icons.alignRight,\n },\n {\n value: 'justify',\n icon: Icons.alignJustify,\n },\n];\n\nexport interface AlignDropdownMenuProps extends DropdownMenuProps {}\n\nexport function AlignDropdownMenu({\n children,\n ...props\n}: AlignDropdownMenuProps) {\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 \n \n \n \n \n \n\n \n \n {items.map(({ value: itemValue, icon: Icon }) => (\n \n \n \n ))}\n \n \n \n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\nimport {\n useAlignDropdownMenu,\n useAlignDropdownMenuState,\n} from '@udecode/plate-alignment';\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 value: 'left',\n icon: Icons.alignLeft,\n },\n {\n value: 'center',\n icon: Icons.alignCenter,\n },\n {\n value: 'right',\n icon: Icons.alignRight,\n },\n {\n value: 'justify',\n icon: Icons.alignJustify,\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 \n \n \n \n \n \n\n \n \n {items.map(({ value: itemValue, icon: Icon }) => (\n \n \n \n ))}\n \n \n \n );\n}\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/avatar.json b/apps/www/public/registry/styles/default/avatar.json index 6106b1af24..273824c7b4 100644 --- a/apps/www/public/registry/styles/default/avatar.json +++ b/apps/www/public/registry/styles/default/avatar.json @@ -7,7 +7,7 @@ "files": [ { "name": "avatar.tsx", - "content": "'use client';\n\nimport * as React from 'react';\nimport * as AvatarPrimitive from '@radix-ui/react-avatar';\n\nimport { cn } from '@/lib/utils';\n\nconst Avatar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\nconst AvatarImage = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\nconst AvatarFallback = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\nexport { Avatar, AvatarImage, AvatarFallback };\n" + "content": "'use client';\n\nimport * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { withCn } from '@udecode/cn';\n\nexport const Avatar = withCn(\n AvatarPrimitive.Root,\n 'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full'\n);\n\nexport const AvatarImage = withCn(\n AvatarPrimitive.Image,\n 'aspect-square h-full w-full'\n);\n\nexport const AvatarFallback = withCn(\n AvatarPrimitive.Fallback,\n 'flex h-full w-full items-center justify-center rounded-full bg-muted'\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/blockquote-element.json b/apps/www/public/registry/styles/default/blockquote-element.json index 1a98f3295a..f6ba653f88 100644 --- a/apps/www/public/registry/styles/default/blockquote-element.json +++ b/apps/www/public/registry/styles/default/blockquote-element.json @@ -7,7 +7,7 @@ "files": [ { "name": "blockquote-element.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport { PlateElement, PlateElementProps } from '@udecode/plate-common';\n\nimport { cn } from '@/lib/utils';\n\nconst BlockquoteElement = React.forwardRef<\n React.ElementRef,\n PlateElementProps\n>(({ className, children, ...props }, ref) => {\n return (\n \n
{children}
\n \n );\n});\nBlockquoteElement.displayName = 'BlockquoteElement';\n\nexport { BlockquoteElement };\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common';\n\nexport const BlockquoteElement = withRef(\n ({ className, children, ...props }, ref) => {\n return (\n \n
{children}
\n \n );\n }\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/button.json b/apps/www/public/registry/styles/default/button.json index 9f79b86106..e5c6a23608 100644 --- a/apps/www/public/registry/styles/default/button.json +++ b/apps/www/public/registry/styles/default/button.json @@ -7,7 +7,7 @@ "files": [ { "name": "button.tsx", - "content": "import * as React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst buttonVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n outline:\n 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n inlineLink: 'text-base text-primary underline underline-offset-4',\n },\n size: {\n default: 'h-10 px-4 py-2',\n xs: 'h-8 rounded-md px-3',\n sm: 'h-9 rounded-md px-3',\n sms: 'h-9 w-9 rounded-md px-0',\n lg: 'h-11 rounded-md px-8',\n icon: 'h-10 w-10',\n none: '',\n },\n isMenu: {\n true: 'h-auto w-full cursor-pointer justify-start',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef(\n ({ className, isMenu, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button';\n return (\n \n );\n }\n);\nButton.displayName = 'Button';\n\nexport { Button, buttonVariants };\n" + "content": "import * as React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn, withRef } from '@udecode/cn';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n outline:\n 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n inlineLink: 'text-base text-primary underline underline-offset-4',\n },\n size: {\n default: 'h-10 px-4 py-2',\n xs: 'h-8 rounded-md px-3',\n sm: 'h-9 rounded-md px-3',\n sms: 'h-9 w-9 rounded-md px-0',\n lg: 'h-11 rounded-md px-8',\n icon: 'h-10 w-10',\n none: '',\n },\n isMenu: {\n true: 'h-auto w-full cursor-pointer justify-start',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nexport const Button = withRef<\n 'button',\n VariantProps & {\n asChild?: boolean;\n }\n>(({ className, isMenu, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button';\n\n return (\n \n );\n});\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/caption.json b/apps/www/public/registry/styles/default/caption.json index 7d8891c944..01d0c7ec8c 100644 --- a/apps/www/public/registry/styles/default/caption.json +++ b/apps/www/public/registry/styles/default/caption.json @@ -7,7 +7,7 @@ "files": [ { "name": "caption.tsx", - "content": "import React, { ComponentProps } from 'react';\nimport {\n Caption as CaptionPrimitive,\n CaptionTextarea as CaptionTextareaPrimitive,\n} from '@udecode/plate-caption';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst captionVariants = cva('max-w-full', {\n variants: {\n align: {\n left: 'mr-auto',\n center: 'mx-auto',\n right: 'ml-auto',\n },\n },\n defaultVariants: {\n align: 'center',\n },\n});\n\nconst Caption = React.forwardRef<\n React.ElementRef,\n ComponentProps & VariantProps\n>(({ className, align, ...props }, ref) => (\n \n));\nCaption.displayName = 'Caption';\n\nconst CaptionTextarea = React.forwardRef<\n React.ElementRef,\n ComponentProps\n>(({ className, ...props }, ref) => (\n \n));\nCaptionTextarea.displayName = 'CaptionTextarea';\n\nexport { Caption, CaptionTextarea };\n" + "content": "import { cn, withCn, withVariants } from '@udecode/cn';\nimport {\n Caption as CaptionPrimitive,\n CaptionTextarea as CaptionTextareaPrimitive,\n} from '@udecode/plate-caption';\nimport { cva } from 'class-variance-authority';\n\nconst captionVariants = cva('max-w-full', {\n variants: {\n align: {\n left: 'mr-auto',\n center: 'mx-auto',\n right: 'ml-auto',\n },\n },\n defaultVariants: {\n align: 'center',\n },\n});\n\nexport const Caption = withVariants(CaptionPrimitive, captionVariants, [\n 'align',\n]);\n\nexport const CaptionTextarea = withCn(\n CaptionTextareaPrimitive,\n cn(\n 'mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit',\n 'focus:outline-none focus:[&::placeholder]:opacity-0',\n 'text-center print:placeholder:text-transparent'\n )\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/checkbox.json b/apps/www/public/registry/styles/default/checkbox.json index 24c92e8515..4ba4da9277 100644 --- a/apps/www/public/registry/styles/default/checkbox.json +++ b/apps/www/public/registry/styles/default/checkbox.json @@ -7,7 +7,7 @@ "files": [ { "name": "checkbox.tsx", - "content": "'use client';\n\nimport * as React from 'react';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\n\nconst Checkbox = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n \n \n));\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\nexport { Checkbox };\n" + "content": "'use client';\n\nimport * as React from 'react';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { cn, withRef } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nexport const Checkbox = withRef(\n ({ className, ...props }, ref) => (\n \n \n \n \n \n )\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/cloud.json b/apps/www/public/registry/styles/default/cloud.json index 0dcaf2cb36..a04abcf72c 100644 --- a/apps/www/public/registry/styles/default/cloud.json +++ b/apps/www/public/registry/styles/default/cloud.json @@ -11,11 +11,11 @@ }, { "name": "cloud-attachment-element.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport {\n TCloudAttachmentElement,\n useCloudAttachmentElementState,\n} from '@udecode/plate-cloud';\nimport { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\n\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudAttachmentElementProps\n extends PlateElementProps {}\n\nexport function CloudAttachmentElement({\n className,\n ...props\n}: CloudAttachmentElementProps) {\n const { children, element } = props;\n\n const { focused, selected, upload } = useCloudAttachmentElementState({\n element,\n });\n\n return (\n \n
\n \n
\n
\n
{element.filename}
\n \n
\n {element.bytes} bytes\n
\n \n
\n \n {upload.status === 'success' && (\n \n \n \n )}\n \n {children}\n \n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@udecode/cn';\nimport {\n TCloudAttachmentElement,\n useCloudAttachmentElementState,\n} from '@udecode/plate-cloud';\nimport { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';\n\nimport { Icons } from '@/components/icons';\n\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudAttachmentElementProps\n extends PlateElementProps {}\n\nexport function CloudAttachmentElement({\n className,\n ...props\n}: CloudAttachmentElementProps) {\n const { children, element } = props;\n\n const { focused, selected, upload } = useCloudAttachmentElementState({\n element,\n });\n\n return (\n \n
\n \n
\n
\n
{element.filename}
\n \n
\n {element.bytes} bytes\n
\n \n
\n \n {upload.status === 'success' && (\n \n \n \n )}\n \n {children}\n \n );\n}\n" }, { "name": "cloud-image-element.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport {\n TCloudImageElement,\n useCloudImageElementState,\n} from '@udecode/plate-cloud';\nimport { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';\n\nimport { cn } from '@/lib/utils';\n\nimport { ResizeControls } from './cloud-resize-controls';\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudImageElementProps\n extends PlateElementProps {}\n\nexport function CloudImageElement({\n className,\n ...props\n}: CloudImageElementProps) {\n const { children, element } = props;\n\n const { focused, selected, src, srcSet, size, upload, setSize } =\n useCloudImageElementState({ element });\n\n return (\n \n on the inside is display: 'block'.\n */\n verticalAlign: 'top',\n /**\n * Disable user select. We use our own selection display.\n */\n userSelect: 'none',\n }}\n >\n {src === '' ? (\n \n ) : (\n // eslint-disable-next-line @next/next/no-img-element\n \n )}\n
\n \n
\n {selected && focused && (\n \n )}\n \n {children}\n \n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@udecode/cn';\nimport {\n TCloudImageElement,\n useCloudImageElementState,\n} from '@udecode/plate-cloud';\nimport { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';\n\nimport { ResizeControls } from './cloud-resize-controls';\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudImageElementProps\n extends PlateElementProps {}\n\nexport function CloudImageElement({\n className,\n ...props\n}: CloudImageElementProps) {\n const { children, element } = props;\n\n const { focused, selected, src, srcSet, size, upload, setSize } =\n useCloudImageElementState({ element });\n\n return (\n \n on the inside is display: 'block'.\n */\n verticalAlign: 'top',\n /**\n * Disable user select. We use our own selection display.\n */\n userSelect: 'none',\n }}\n >\n {src === '' ? (\n \n ) : (\n \n )}\n
\n \n
\n {selected && focused && (\n \n )}\n \n {children}\n \n );\n}\n" }, { "name": "cloud-resize-controls.tsx", @@ -23,11 +23,11 @@ }, { "name": "cloud-status-bar.tsx", - "content": "'use client';\n\nimport React, { HTMLAttributes, useEffect, useRef, useState } from 'react';\nimport { Upload, UploadProgress } from '@udecode/plate-cloud';\n\nimport { cn } from '@/lib/utils';\n\nexport function ProgressBar({\n upload,\n className,\n ...props\n}: {\n upload: UploadProgress;\n} & HTMLAttributes) {\n const [width, setWidth] = useState(null);\n const ref = useRef(null);\n\n useEffect(() => {\n if (ref.current) setWidth(ref.current.offsetWidth);\n }, []);\n\n /**\n * This formula looks a little funny because we want the `0` value of the\n * progress bar to have a width that is still the height of the progress bar.\n *\n * This is for a few reasons:\n *\n * 1. We want the zero point to start with the progress bar being a circle\n * 2. If we want rounded edges, if the width is shorter than the height,\n * we get an oval instead of a circle\n * 3. The halfway point looks visually wrong because of the circle progress\n * bar when it is technically at the halfway point.\n */\n const progressWidth =\n width == null\n ? 0\n : (upload.sentBytes / upload.totalBytes) * (width - 16) + 16;\n\n return (\n \n \n \n );\n}\n\nexport function FailBar({\n className,\n ...props\n}: HTMLAttributes) {\n return (\n \n );\n}\n\nexport function StatusBar(props: {\n upload: Upload;\n children?: React.ReactNode;\n}) {\n const { upload, children } = props;\n switch (upload.status) {\n case 'progress': {\n return ;\n }\n case 'error': {\n return Upload Failed;\n }\n case 'not-found': {\n return Uploading...;\n }\n case 'success': {\n return children || null;\n }\n default: {\n throw new Error(`Should be unreachable`);\n }\n }\n}\n" + "content": "'use client';\n\nimport React, { HTMLAttributes, useEffect, useRef, useState } from 'react';\nimport { cn } from '@udecode/cn';\nimport { Upload, UploadProgress } from '@udecode/plate-cloud';\n\nexport function ProgressBar({\n upload,\n className,\n ...props\n}: {\n upload: UploadProgress;\n} & HTMLAttributes) {\n const [width, setWidth] = useState(null);\n const ref = useRef(null);\n\n useEffect(() => {\n if (ref.current) setWidth(ref.current.offsetWidth);\n }, []);\n\n /**\n * This formula looks a little funny because we want the `0` value of the\n * progress bar to have a width that is still the height of the progress bar.\n *\n * This is for a few reasons:\n *\n * 1. We want the zero point to start with the progress bar being a circle\n * 2. If we want rounded edges, if the width is shorter than the height,\n * we get an oval instead of a circle\n * 3. The halfway point looks visually wrong because of the circle progress\n * bar when it is technically at the halfway point.\n */\n const progressWidth =\n width == null\n ? 0\n : (upload.sentBytes / upload.totalBytes) * (width - 16) + 16;\n\n return (\n \n \n \n );\n}\n\nexport function FailBar({\n className,\n ...props\n}: HTMLAttributes) {\n return (\n \n );\n}\n\nexport function StatusBar(props: {\n upload: Upload;\n children?: React.ReactNode;\n}) {\n const { upload, children } = props;\n switch (upload.status) {\n case 'progress': {\n return ;\n }\n case 'error': {\n return Upload Failed;\n }\n case 'not-found': {\n return Uploading...;\n }\n case 'success': {\n return children || null;\n }\n default: {\n throw new Error(`Should be unreachable`);\n }\n }\n}\n" }, { "name": "cloud-toolbar-buttons.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport { PlateCloudEditor } from '@udecode/plate-cloud';\nimport { useEditorRef, Value } from '@udecode/plate-common';\n\nconst buttonStyle: React.CSSProperties = {\n marginRight: 4,\n background: '#f0f0f0',\n border: 'none',\n padding: 8,\n cursor: 'pointer',\n};\n\nexport function CloudToolbarButtons() {\n const editor = useEditorRef();\n const getSaveValue = () => {\n console.info('editor.children', editor.children);\n console.info('editor.cloud.getSaveValue()', editor.cloud.getSaveValue());\n };\n\n const finishUploads = async () => {\n const start = Date.now();\n // eslint-disable-next-line no-console\n console.info('start finishUploads');\n await editor.cloud.finishUploads();\n const end = Date.now();\n // NOTE: We don't use backtick with curly brace replacement because it\n // doesn't work with gen:code script at time of writing.\n // eslint-disable-next-line no-console\n console.info(`end finishUploads in ms:`, end - start);\n };\n\n return (\n <>\n \n \n \n Note: After clicking a button, output will be shown in console.\n \n \n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { PlateCloudEditor } from '@udecode/plate-cloud';\nimport { useEditorRef, Value } from '@udecode/plate-common';\n\nconst buttonStyle: React.CSSProperties = {\n marginRight: 4,\n background: '#f0f0f0',\n border: 'none',\n padding: 8,\n cursor: 'pointer',\n};\n\nexport function CloudToolbarButtons() {\n const editor = useEditorRef();\n const getSaveValue = () => {\n console.info('editor.children', editor.children);\n console.info('editor.cloud.getSaveValue()', editor.cloud.getSaveValue());\n };\n\n const finishUploads = async () => {\n await editor.cloud.finishUploads();\n };\n\n return (\n <>\n \n \n \n Note: After clicking a button, output will be shown in console.\n \n \n );\n}\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/code-block-element.json b/apps/www/public/registry/styles/default/code-block-element.json index a32f355518..0c9cd9847b 100644 --- a/apps/www/public/registry/styles/default/code-block-element.json +++ b/apps/www/public/registry/styles/default/code-block-element.json @@ -9,7 +9,7 @@ "files": [ { "name": "code-block-element.tsx", - "content": "'use client';\n\nimport './code-block-element.css';\n\nimport React, { forwardRef } from 'react';\nimport {\n TCodeBlockElement,\n useCodeBlockElementState,\n} from '@udecode/plate-code-block';\nimport { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';\n\nimport { cn } from '@/lib/utils';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\n\nconst CodeBlockElement = forwardRef<\n HTMLDivElement,\n PlateElementProps\n>(({ className, ...props }, ref) => {\n const { children, element } = props;\n\n const state = useCodeBlockElementState({ element });\n\n return (\n \n 
\n        {children}\n
\n\n {state.syntax && (\n \n \n \n )}\n \n );\n});\nCodeBlockElement.displayName = 'CodeBlockElement';\n\nexport { CodeBlockElement };\n" + "content": "'use client';\n\nimport './code-block-element.css';\n\nimport React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block';\nimport { PlateElement } from '@udecode/plate-common';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\n\nexport const CodeBlockElement = withRef(\n ({ className, children, ...props }, ref) => {\n const { element } = props;\n const state = useCodeBlockElementState({ element });\n\n return (\n \n 
\n          {children}\n
\n\n {state.syntax && (\n \n \n \n )}\n \n );\n }\n);\n" }, { "name": "code-block-element.css", @@ -17,7 +17,7 @@ }, { "name": "code-block-combobox.tsx", - "content": "'use client';\n\nimport React, { useState } from 'react';\nimport {\n CODE_BLOCK_LANGUAGES,\n CODE_BLOCK_LANGUAGES_POPULAR,\n useCodeBlockCombobox,\n useCodeBlockComboboxState,\n} from '@udecode/plate-code-block';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n} from './command';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\nconst languages: { value: string; label: string }[] = [\n { value: 'text', label: 'Plain Text' },\n ...Object.entries({\n ...CODE_BLOCK_LANGUAGES_POPULAR,\n ...CODE_BLOCK_LANGUAGES,\n }).map(([key, val]) => ({\n value: key,\n label: val as string,\n })),\n];\n\nexport function CodeBlockCombobox() {\n const state = useCodeBlockComboboxState();\n const { commandItemProps } = useCodeBlockCombobox(state);\n\n const [open, setOpen] = useState(false);\n\n if (state.readOnly) return null;\n\n return (\n \n \n \n {state.value\n ? languages.find((language) => language.value === state.value)\n ?.label\n : 'Plain Text'}\n \n \n \n \n \n \n No language found.\n\n \n {languages.map((language) => (\n {\n commandItemProps.onSelect(_value);\n setOpen(false);\n }}\n >\n \n {language.label}\n \n ))}\n \n \n \n \n );\n}\n" + "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { cn } from '@udecode/cn';\nimport {\n CODE_BLOCK_LANGUAGES,\n CODE_BLOCK_LANGUAGES_POPULAR,\n useCodeBlockCombobox,\n useCodeBlockComboboxState,\n} from '@udecode/plate-code-block';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n} from './command';\nimport { Popover, PopoverContent, PopoverTrigger } from './popover';\n\nconst languages: { value: string; label: string }[] = [\n { value: 'text', label: 'Plain Text' },\n ...Object.entries({\n ...CODE_BLOCK_LANGUAGES_POPULAR,\n ...CODE_BLOCK_LANGUAGES,\n }).map(([key, val]) => ({\n value: key,\n label: val as string,\n })),\n];\n\nexport function CodeBlockCombobox() {\n const state = useCodeBlockComboboxState();\n const { commandItemProps } = useCodeBlockCombobox(state);\n\n const [open, setOpen] = useState(false);\n\n if (state.readOnly) return null;\n\n return (\n \n \n \n {state.value\n ? languages.find((language) => language.value === state.value)\n ?.label\n : 'Plain Text'}\n \n \n \n \n \n \n No language found.\n\n \n {languages.map((language) => (\n {\n commandItemProps.onSelect(_value);\n setOpen(false);\n }}\n >\n \n {language.label}\n \n ))}\n \n \n \n \n );\n}\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/code-leaf.json b/apps/www/public/registry/styles/default/code-leaf.json index bb74eb7ab2..cae6b336cf 100644 --- a/apps/www/public/registry/styles/default/code-leaf.json +++ b/apps/www/public/registry/styles/default/code-leaf.json @@ -7,7 +7,7 @@ "files": [ { "name": "code-leaf.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport { PlateLeaf, PlateLeafProps } from '@udecode/plate-common';\n\nimport { cn } from '@/lib/utils';\n\nexport function CodeLeaf({ className, children, ...props }: PlateLeafProps) {\n return (\n \n {children}\n \n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common';\n\nexport const CodeLeaf = withRef(\n ({ className, children, ...props }, ref) => {\n return (\n \n {children}\n \n );\n }\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/code-line-element.json b/apps/www/public/registry/styles/default/code-line-element.json index 8e3421dd60..9d572e8af8 100644 --- a/apps/www/public/registry/styles/default/code-line-element.json +++ b/apps/www/public/registry/styles/default/code-line-element.json @@ -7,7 +7,7 @@ "files": [ { "name": "code-line-element.tsx", - "content": "'use client';\n\nimport React, { forwardRef } from 'react';\nimport { PlateElement, PlateElementProps } from '@udecode/plate-common';\n\nconst CodeLineElement = forwardRef(\n (props, ref) => \n);\nCodeLineElement.displayName = 'CodeLineElement';\n\nexport { CodeLineElement };\n" + "content": "'use client';\n\nimport React from 'react';\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common';\n\nexport const CodeLineElement = withRef((props, ref) => (\n \n));\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/code-syntax-leaf.json b/apps/www/public/registry/styles/default/code-syntax-leaf.json index 8ab2cb456a..dab2db26c4 100644 --- a/apps/www/public/registry/styles/default/code-syntax-leaf.json +++ b/apps/www/public/registry/styles/default/code-syntax-leaf.json @@ -7,7 +7,7 @@ "files": [ { "name": "code-syntax-leaf.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport { useCodeSyntaxLeaf } from '@udecode/plate-code-block';\nimport { PlateLeaf, PlateLeafProps } from '@udecode/plate-common';\n\nexport function CodeSyntaxLeaf({ children, ...props }: PlateLeafProps) {\n const { leaf } = props;\n\n const { tokenProps } = useCodeSyntaxLeaf({ leaf });\n\n return (\n \n {children}\n \n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { withRef } from '@udecode/cn';\nimport { useCodeSyntaxLeaf } from '@udecode/plate-code-block';\nimport { PlateLeaf } from '@udecode/plate-common';\n\nexport const CodeSyntaxLeaf = withRef(\n ({ children, ...props }, ref) => {\n const { leaf } = props;\n\n const { tokenProps } = useCodeSyntaxLeaf({ leaf });\n\n return (\n \n {children}\n \n );\n }\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/color-dropdown-menu.json b/apps/www/public/registry/styles/default/color-dropdown-menu.json index 341cbba45b..14b687463a 100644 --- a/apps/www/public/registry/styles/default/color-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/color-dropdown-menu.json @@ -19,15 +19,15 @@ }, { "name": "color-dropdown-menu-items.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\nimport { buttonVariants } from '@/registry/default/plate-ui/button';\nimport { DropdownMenuItem } from '@/registry/default/plate-ui/dropdown-menu';\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from '@/registry/default/plate-ui/tooltip';\n\nimport { TColor } from './color-dropdown-menu';\n\ntype ColorDropdownMenuItemProps = {\n value: string;\n isBrightColor: boolean;\n isSelected: boolean;\n updateColor: (color: string) => void;\n name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n name,\n value,\n isBrightColor,\n isSelected,\n updateColor,\n className,\n ...props\n}: ColorDropdownMenuItemProps) {\n const content = (\n {\n e.preventDefault();\n updateColor(value);\n }}\n {...props}\n >\n {isSelected ? : null}\n \n );\n\n return name ? (\n \n {content}\n {name}\n \n ) : (\n content\n );\n}\n\ntype ColorDropdownMenuItemsProps = {\n color?: string;\n colors: TColor[];\n updateColor: (color: string) => void;\n} & React.HTMLAttributes;\n\nexport function ColorDropdownMenuItems({\n color,\n colors,\n updateColor,\n className,\n ...props\n}: ColorDropdownMenuItemsProps) {\n return (\n \n {colors.map(({ name, value, isBrightColor }) => (\n \n ))}\n \n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';\nimport { cn } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport { TColor } from './color-dropdown-menu';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';\n\ntype ColorDropdownMenuItemProps = {\n value: string;\n isBrightColor: boolean;\n isSelected: boolean;\n updateColor: (color: string) => void;\n name?: string;\n} & DropdownMenuItemProps;\n\nexport function ColorDropdownMenuItem({\n name,\n value,\n isBrightColor,\n isSelected,\n updateColor,\n className,\n ...props\n}: ColorDropdownMenuItemProps) {\n const content = (\n {\n e.preventDefault();\n updateColor(value);\n }}\n {...props}\n >\n {isSelected ? : null}\n \n );\n\n return name ? (\n \n {content}\n {name}\n \n ) : (\n content\n );\n}\n\ntype ColorDropdownMenuItemsProps = {\n color?: string;\n colors: TColor[];\n updateColor: (color: string) => void;\n} & React.HTMLAttributes;\n\nexport function ColorDropdownMenuItems({\n color,\n colors,\n updateColor,\n className,\n ...props\n}: ColorDropdownMenuItemsProps) {\n return (\n \n {colors.map(({ name, value, isBrightColor }) => (\n \n ))}\n \n );\n}\n" }, { "name": "color-input.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport { useColorInput } from '@udecode/plate-font';\n\nimport { cn } from '@/lib/utils';\n\nexport function ColorInput({\n value = '#000000',\n onChange,\n children,\n className,\n ...props\n}: React.InputHTMLAttributes) {\n const { inputRef, childProps } = useColorInput();\n\n return (\n
\n {React.Children.map(children, (child) => {\n if (!child) return child;\n\n return React.cloneElement(child as React.ReactElement, childProps);\n })}\n\n \n
\n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { useComposedRef } from '@udecode/plate-common';\nimport { useColorInput } from '@udecode/plate-font';\n\nexport const ColorInput = withRef<'input'>(\n ({ value = '#000000', children, className, ...props }, ref) => {\n const { inputRef, childProps } = useColorInput();\n\n return (\n
\n {React.Children.map(children, (child) => {\n if (!child) return child;\n\n return React.cloneElement(child as React.ReactElement, childProps);\n })}\n\n \n
\n );\n }\n);\n" }, { "name": "color-picker.tsx", - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { buttonVariants } from '@/registry/default/plate-ui/button';\nimport { DropdownMenuItem } from '@/registry/default/plate-ui/dropdown-menu';\nimport { Separator } from '@/registry/default/plate-ui/separator';\n\nimport { TColor } from './color-dropdown-menu';\nimport { ColorDropdownMenuItems } from './color-dropdown-menu-items';\nimport { ColorsCustom } from './colors-custom';\n\ntype ColorPickerProps = {\n color?: string;\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n clearColor: () => void;\n} & React.HTMLAttributes;\n\nexport function ColorPickerContent({\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\n clearColor,\n className,\n ...props\n}: ColorPickerProps) {\n return (\n
\n \n\n \n\n \n {color && (\n \n Clear\n \n )}\n
\n );\n}\n\nexport const ColorPicker = React.memo(\n ColorPickerContent,\n (prev, next) =>\n prev.color === next.color &&\n prev.colors === next.colors &&\n prev.customColors === next.customColors\n);\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn, withRef } from '@udecode/cn';\n\nimport { buttonVariants } from './button';\nimport { TColor } from './color-dropdown-menu';\nimport { ColorDropdownMenuItems } from './color-dropdown-menu-items';\nimport { ColorsCustom } from './colors-custom';\nimport { DropdownMenuItem } from './dropdown-menu';\nimport { Separator } from './separator';\n\nexport const ColorPickerContent = withRef<\n 'div',\n {\n color?: string;\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n clearColor: () => void;\n }\n>(\n (\n {\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\n clearColor,\n className,\n ...props\n },\n ref\n ) => {\n return (\n \n \n\n \n\n \n {color && (\n \n Clear\n \n )}\n \n );\n }\n);\n\nexport const ColorPicker = React.memo(\n ColorPickerContent,\n (prev, next) =>\n prev.color === next.color &&\n prev.colors === next.colors &&\n prev.customColors === next.customColors\n);\n" }, { "name": "colors-custom.tsx", diff --git a/apps/www/public/registry/styles/default/combobox.json b/apps/www/public/registry/styles/default/combobox.json index 360793ad1e..9d7688375e 100644 --- a/apps/www/public/registry/styles/default/combobox.json +++ b/apps/www/public/registry/styles/default/combobox.json @@ -9,7 +9,7 @@ "files": [ { "name": "combobox.tsx", - "content": "'use client';\n\nimport React, { useEffect } from 'react';\nimport * as Popover from '@radix-ui/react-popover';\nimport {\n comboboxActions,\n ComboboxContentItemProps,\n ComboboxContentProps,\n ComboboxProps,\n Data,\n NoData,\n TComboboxItem,\n useActiveComboboxStore,\n useComboboxContent,\n useComboboxContentState,\n useComboboxControls,\n useComboboxItem,\n useComboboxSelectors,\n} from '@udecode/plate-combobox';\nimport {\n useEditorRef,\n useEditorSelector,\n useEventEditorSelectors,\n usePlateSelectors,\n} from '@udecode/plate-common';\nimport { createVirtualRef } from '@udecode/plate-floating';\n\nimport { cn } from '@/lib/utils';\n\nexport function ComboboxItem({\n combobox,\n index,\n item,\n onRenderItem,\n}: ComboboxContentItemProps) {\n const { props } = useComboboxItem({ item, index, combobox, onRenderItem });\n\n return (\n \n );\n}\n\nexport function ComboboxContent(\n props: ComboboxContentProps\n) {\n const {\n component: Component,\n items,\n portalElement,\n combobox,\n onRenderItem,\n } = props;\n\n const editor = useEditorRef();\n\n const filteredItems =\n useComboboxSelectors.filteredItems() as TComboboxItem[];\n const activeComboboxStore = useActiveComboboxStore()!;\n\n const state = useComboboxContentState({ items, combobox });\n const { menuProps, targetRange } = useComboboxContent(state);\n\n return (\n \n \n\n \n event.preventDefault()}\n >\n {Component ? Component({ store: activeComboboxStore }) : null}\n\n {filteredItems.map((item, index) => (\n \n ))}\n \n \n \n );\n}\n\n/**\n * Register the combobox id, trigger, onSelectItem\n * Renders the combobox if active.\n */\nexport function Combobox({\n id,\n trigger,\n searchPattern,\n onSelectItem,\n controlled,\n maxSuggestions,\n filter,\n sort,\n disabled: _disabled,\n ...props\n}: ComboboxProps) {\n const storeItems = useComboboxSelectors.items();\n const disabled =\n _disabled ?? (storeItems.length === 0 && !props.items?.length);\n\n const focusedEditorId = useEventEditorSelectors.focus?.();\n const combobox = useComboboxControls();\n const activeId = useComboboxSelectors.activeId();\n const selectionDefined = useEditorSelector(\n (editor) => !!editor.selection,\n []\n );\n const editorId = usePlateSelectors().id();\n\n useEffect(() => {\n comboboxActions.setComboboxById({\n id,\n trigger,\n searchPattern,\n controlled,\n onSelectItem,\n maxSuggestions,\n filter,\n sort,\n });\n }, [\n id,\n trigger,\n searchPattern,\n controlled,\n onSelectItem,\n maxSuggestions,\n filter,\n sort,\n ]);\n\n if (\n !combobox ||\n !selectionDefined ||\n focusedEditorId !== editorId ||\n activeId !== id ||\n disabled\n ) {\n return null;\n }\n\n return ;\n}\n" + "content": "'use client';\n\nimport React, { useEffect } from 'react';\nimport * as Popover from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport {\n comboboxActions,\n ComboboxContentItemProps,\n ComboboxContentProps,\n ComboboxProps,\n useActiveComboboxStore,\n useComboboxContent,\n useComboboxContentState,\n useComboboxControls,\n useComboboxItem,\n useComboboxSelectors,\n} from '@udecode/plate-combobox';\nimport {\n useEditorRef,\n useEditorSelector,\n useEventEditorSelectors,\n usePlateSelectors,\n} from '@udecode/plate-common';\nimport { createVirtualRef } from '@udecode/plate-floating';\n\nexport const ComboboxItem = withRef<'div', ComboboxContentItemProps>(\n ({ combobox, index, item, onRenderItem, className, ...rest }, ref) => {\n const { props } = useComboboxItem({ item, index, combobox, onRenderItem });\n\n return (\n \n );\n }\n);\n\nexport function ComboboxContent(props: ComboboxContentProps) {\n const {\n component: Component,\n items,\n portalElement,\n combobox,\n onRenderItem,\n } = props;\n\n const editor = useEditorRef();\n\n const filteredItems = useComboboxSelectors.filteredItems();\n const activeComboboxStore = useActiveComboboxStore()!;\n\n const state = useComboboxContentState({ items, combobox });\n const { menuProps, targetRange } = useComboboxContent(state);\n\n return (\n \n \n\n \n event.preventDefault()}\n >\n {Component ? Component({ store: activeComboboxStore }) : null}\n\n {filteredItems.map((item, index) => (\n \n ))}\n \n \n \n );\n}\n\nexport function Combobox({\n id,\n trigger,\n searchPattern,\n onSelectItem,\n controlled,\n maxSuggestions,\n filter,\n sort,\n disabled: _disabled,\n ...props\n}: ComboboxProps) {\n const storeItems = useComboboxSelectors.items();\n const disabled =\n _disabled ?? (storeItems.length === 0 && !props.items?.length);\n\n const focusedEditorId = useEventEditorSelectors.focus?.();\n const combobox = useComboboxControls();\n const activeId = useComboboxSelectors.activeId();\n const selectionDefined = useEditorSelector(\n (editor) => !!editor.selection,\n []\n );\n const editorId = usePlateSelectors().id();\n\n useEffect(() => {\n comboboxActions.setComboboxById({\n id,\n trigger,\n searchPattern,\n controlled,\n onSelectItem,\n maxSuggestions,\n filter,\n sort,\n });\n }, [\n id,\n trigger,\n searchPattern,\n controlled,\n onSelectItem,\n maxSuggestions,\n filter,\n sort,\n ]);\n\n if (\n !combobox ||\n !selectionDefined ||\n focusedEditorId !== editorId ||\n activeId !== id ||\n disabled\n ) {\n return null;\n }\n\n return ;\n}\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/command.json b/apps/www/public/registry/styles/default/command.json index af872f9005..e14d99eefc 100644 --- a/apps/www/public/registry/styles/default/command.json +++ b/apps/www/public/registry/styles/default/command.json @@ -9,7 +9,7 @@ "files": [ { "name": "command.tsx", - "content": "'use client';\n\nimport * as React from 'react';\nimport { type DialogProps } from '@radix-ui/react-dialog';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\n\nimport { Dialog, DialogContent } from './dialog';\n\nconst Command = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nCommand.displayName = CommandPrimitive.displayName;\n\ninterface CommandDialogProps extends DialogProps {}\n\nfunction CommandDialog({ children, ...props }: CommandDialogProps) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nconst CommandInput = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n
\n \n \n
\n));\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst CommandList = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>((props, ref) => (\n \n));\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nfunction CommandShortcut({\n className,\n ...props\n}: React.HTMLAttributes) {\n return (\n \n );\n}\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n};\n" + "content": "'use client';\n\nimport * as React from 'react';\nimport { type DialogProps } from '@radix-ui/react-dialog';\nimport { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { Icons } from '@/components/icons';\n\nimport { Dialog, DialogContent } from './dialog';\n\nexport const Command = withCn(\n CommandPrimitive,\n 'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground'\n);\n\nexport function CommandDialog({ children, ...props }: DialogProps) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nexport const CommandInput = withRef(\n ({ className, ...props }, ref) => (\n
\n \n \n
\n )\n);\n\nexport const CommandList = withCn(\n CommandPrimitive.List,\n 'max-h-[500px] overflow-y-auto overflow-x-hidden'\n);\n\nexport const CommandEmpty = withCn(\n CommandPrimitive.Empty,\n 'py-6 text-center text-sm'\n);\n\nexport const CommandGroup = withCn(\n CommandPrimitive.Group,\n 'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground'\n);\n\nexport const CommandSeparator = withCn(\n CommandPrimitive.Separator,\n '-mx-1 h-px bg-border'\n);\n\nexport const CommandItem = withCn(\n CommandPrimitive.Item,\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'\n);\n\nexport const CommandShortcut = withCn(\n createPrimitiveElement('span'),\n 'ml-auto text-xs tracking-widest text-muted-foreground'\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/comment-leaf.json b/apps/www/public/registry/styles/default/comment-leaf.json index b39184e1ba..f4ea558f0d 100644 --- a/apps/www/public/registry/styles/default/comment-leaf.json +++ b/apps/www/public/registry/styles/default/comment-leaf.json @@ -7,7 +7,7 @@ "files": [ { "name": "comment-leaf.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport {\n TCommentText,\n useCommentLeaf,\n useCommentLeafState,\n} from '@udecode/plate-comments';\nimport { PlateLeaf, PlateLeafProps, Value } from '@udecode/plate-common';\n\nimport { cn } from '@/lib/utils';\n\nexport function CommentLeaf({\n className,\n ...props\n}: PlateLeafProps) {\n const { children, nodeProps, leaf } = props;\n\n const state = useCommentLeafState({ leaf });\n const { props: rootProps } = useCommentLeaf(state);\n\n // hide resolved comments\n if (!state.commentCount) return <>{children};\n\n let aboveChildren = <>{children};\n\n if (!state.isActive) {\n for (let i = 1; i < state.commentCount; i++) {\n aboveChildren = {aboveChildren};\n }\n }\n\n return (\n \n {aboveChildren}\n \n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@udecode/cn';\nimport {\n TCommentText,\n useCommentLeaf,\n useCommentLeafState,\n} from '@udecode/plate-comments';\nimport { PlateLeaf, PlateLeafProps, Value } from '@udecode/plate-common';\n\nexport function CommentLeaf({\n className,\n ...props\n}: PlateLeafProps) {\n const { children, nodeProps, leaf } = props;\n\n const state = useCommentLeafState({ leaf });\n const { props: rootProps } = useCommentLeaf(state);\n\n if (!state.commentCount) return <>{children};\n\n let aboveChildren = <>{children};\n\n if (!state.isActive) {\n for (let i = 1; i < state.commentCount; i++) {\n aboveChildren = {aboveChildren};\n }\n }\n\n return (\n \n {aboveChildren}\n \n );\n}\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/comments-popover.json b/apps/www/public/registry/styles/default/comments-popover.json index 23259ea590..e66c9179c8 100644 --- a/apps/www/public/registry/styles/default/comments-popover.json +++ b/apps/www/public/registry/styles/default/comments-popover.json @@ -10,7 +10,7 @@ "files": [ { "name": "comments-popover.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport {\n CommentProvider,\n CommentsPositioner,\n SCOPE_ACTIVE_COMMENT,\n useFloatingCommentsContentState,\n useFloatingCommentsState,\n} from '@udecode/plate-comments';\nimport { PortalBody } from '@udecode/plate-common';\n\nimport { cn } from '@/lib/utils';\nimport { popoverVariants } from '@/registry/default/plate-ui/popover';\n\nimport { CommentCreateForm } from './comment-create-form';\nimport { CommentItem } from './comment-item';\nimport { CommentReplyItems } from './comment-reply-items';\n\nexport type FloatingCommentsContentProps = {\n disableForm?: boolean;\n};\n\nexport function CommentsPopoverContent(props: FloatingCommentsContentProps) {\n const { disableForm } = props;\n\n const { ref, activeCommentId, hasNoComment, myUserId } =\n useFloatingCommentsContentState();\n\n return (\n \n
\n {!hasNoComment && (\n <>\n \n\n \n \n )}\n\n {!!myUserId && !disableForm && }\n
\n \n );\n}\n\nexport function CommentsPopover() {\n const { loaded, activeCommentId } = useFloatingCommentsState();\n\n if (!loaded || !activeCommentId) return null;\n\n return (\n \n \n \n \n \n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@udecode/cn';\nimport {\n CommentProvider,\n CommentsPositioner,\n SCOPE_ACTIVE_COMMENT,\n useFloatingCommentsContentState,\n useFloatingCommentsState,\n} from '@udecode/plate-comments';\nimport { PortalBody } from '@udecode/plate-common';\n\nimport { CommentCreateForm } from './comment-create-form';\nimport { CommentItem } from './comment-item';\nimport { CommentReplyItems } from './comment-reply-items';\nimport { popoverVariants } from './popover';\n\nexport type FloatingCommentsContentProps = {\n disableForm?: boolean;\n};\n\nexport function CommentsPopoverContent(props: FloatingCommentsContentProps) {\n const { disableForm } = props;\n\n const { ref, activeCommentId, hasNoComment, myUserId } =\n useFloatingCommentsContentState();\n\n return (\n \n
\n {!hasNoComment && (\n <>\n \n\n \n \n )}\n\n {!!myUserId && !disableForm && }\n
\n \n );\n}\n\nexport function CommentsPopover() {\n const { loaded, activeCommentId } = useFloatingCommentsState();\n\n if (!loaded || !activeCommentId) return null;\n\n return (\n \n \n \n \n \n );\n}\n" }, { "name": "comment-avatar.tsx", @@ -18,7 +18,7 @@ }, { "name": "comment-create-form.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport {\n CommentNewSubmitButton,\n CommentNewTextarea,\n useCommentsSelectors,\n} from '@udecode/plate-comments';\n\nimport { cn } from '@/lib/utils';\nimport { buttonVariants } from '@/registry/default/plate-ui/button';\nimport { inputVariants } from '@/registry/default/plate-ui/input';\n\nimport { CommentAvatar } from './comment-avatar';\n\nexport function CommentCreateForm() {\n const myUserId = useCommentsSelectors().myUserId();\n\n return (\n
\n \n\n
\n \n\n \n Comment\n \n
\n
\n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@udecode/cn';\nimport {\n CommentNewSubmitButton,\n CommentNewTextarea,\n useCommentsSelectors,\n} from '@udecode/plate-comments';\n\nimport { buttonVariants } from './button';\nimport { CommentAvatar } from './comment-avatar';\nimport { inputVariants } from './input';\n\nexport function CommentCreateForm() {\n const myUserId = useCommentsSelectors().myUserId();\n\n return (\n
\n \n\n
\n \n\n \n Comment\n \n
\n
\n );\n}\n" }, { "name": "comment-item.tsx", @@ -26,7 +26,7 @@ }, { "name": "comment-more-dropdown.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport {\n useCommentDeleteButton,\n useCommentDeleteButtonState,\n useCommentEditButton,\n useCommentEditButtonState,\n} from '@udecode/plate-comments';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\nimport { Button } from '@/registry/default/plate-ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/default/plate-ui/dropdown-menu';\n\nexport function CommentMoreDropdown() {\n const editButtonState = useCommentEditButtonState();\n const { props: editProps } = useCommentEditButton(editButtonState);\n const deleteButtonState = useCommentDeleteButtonState();\n const { props: deleteProps } = useCommentDeleteButton(deleteButtonState);\n\n return (\n \n \n \n \n \n Edit comment\n Delete comment\n \n \n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@udecode/cn';\nimport {\n useCommentDeleteButton,\n useCommentDeleteButtonState,\n useCommentEditButton,\n useCommentEditButtonState,\n} from '@udecode/plate-comments';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from './dropdown-menu';\n\nexport function CommentMoreDropdown() {\n const editButtonState = useCommentEditButtonState();\n const { props: editProps } = useCommentEditButton(editButtonState);\n const deleteButtonState = useCommentDeleteButtonState();\n const { props: deleteProps } = useCommentDeleteButton(deleteButtonState);\n\n return (\n \n \n \n \n \n Edit comment\n Delete comment\n \n \n );\n}\n" }, { "name": "comment-reply-items.tsx", @@ -34,11 +34,11 @@ }, { "name": "comment-resolve-button.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport {\n CommentResolveButton as CommentResolveButtonPrimitive,\n useComment,\n} from '@udecode/plate-comments';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\nimport { buttonVariants } from '@/registry/default/plate-ui/button';\n\nexport function CommentResolveButton() {\n const comment = useComment()!;\n\n return (\n \n {comment.isResolved ? (\n \n ) : (\n \n )}\n \n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@udecode/cn';\nimport {\n CommentResolveButton as CommentResolveButtonPrimitive,\n useComment,\n} from '@udecode/plate-comments';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\n\nexport function CommentResolveButton() {\n const comment = useComment()!;\n\n return (\n \n {comment.isResolved ? (\n \n ) : (\n \n )}\n \n );\n}\n" }, { "name": "comment-value.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport {\n CommentEditActions,\n CommentEditTextarea,\n} from '@udecode/plate-comments';\n\nimport { cn } from '@/lib/utils';\nimport { buttonVariants } from '@/registry/default/plate-ui/button';\nimport { inputVariants } from '@/registry/default/plate-ui/input';\n\nexport function CommentValue() {\n return (\n
\n \n\n
\n \n Cancel\n \n\n \n Save\n \n
\n
\n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@udecode/cn';\nimport {\n CommentEditActions,\n CommentEditTextarea,\n} from '@udecode/plate-comments';\n\nimport { buttonVariants } from './button';\nimport { inputVariants } from './input';\n\nexport function CommentValue() {\n return (\n
\n \n\n
\n \n Cancel\n \n\n \n Save\n \n
\n
\n );\n}\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/cursor-overlay.json b/apps/www/public/registry/styles/default/cursor-overlay.json index 9e37fd5ef7..0cd1b2847f 100644 --- a/apps/www/public/registry/styles/default/cursor-overlay.json +++ b/apps/www/public/registry/styles/default/cursor-overlay.json @@ -5,7 +5,7 @@ "files": [ { "name": "cursor-overlay.tsx", - "content": "import React from 'react';\nimport { createZustandStore } from '@udecode/plate-common';\nimport {\n CursorData,\n CursorOverlay as CursorOverlayPrimitive,\n CursorOverlayProps,\n CursorProps,\n} from '@udecode/plate-cursor';\n\nimport { cn } from '@/lib/utils';\n\nexport const cursorStore = createZustandStore('cursor')({\n cursors: {},\n});\n\nexport function Cursor({\n data,\n selectionRects,\n caretPosition,\n disableCaret,\n disableSelection,\n classNames,\n}: CursorProps) {\n if (!data) {\n return null;\n }\n\n const { style, selectionStyle = style } = data;\n\n return (\n <>\n {!disableSelection &&\n selectionRects.map((position, i) => (\n \n ))}\n {!disableCaret && caretPosition && (\n \n )}\n \n );\n}\n\nexport function CursorOverlay({ cursors, ...props }: CursorOverlayProps) {\n const dynamicCursors = cursorStore.use.cursors();\n\n const allCursors = { ...cursors, ...dynamicCursors };\n\n return (\n \n );\n}\n" + "content": "import React from 'react';\nimport { cn } from '@udecode/cn';\nimport { createZustandStore } from '@udecode/plate-common';\nimport {\n CursorData,\n CursorOverlay as CursorOverlayPrimitive,\n CursorOverlayProps,\n CursorProps,\n} from '@udecode/plate-cursor';\n\nexport const cursorStore = createZustandStore('cursor')({\n cursors: {},\n});\n\nexport function Cursor({\n data,\n selectionRects,\n caretPosition,\n disableCaret,\n disableSelection,\n classNames,\n}: CursorProps) {\n if (!data) {\n return null;\n }\n\n const { style, selectionStyle = style } = data;\n\n return (\n <>\n {!disableSelection &&\n selectionRects.map((position, i) => (\n \n ))}\n {!disableCaret && caretPosition && (\n \n )}\n \n );\n}\n\nexport function CursorOverlay({ cursors, ...props }: CursorOverlayProps) {\n const dynamicCursors = cursorStore.use.cursors();\n\n const allCursors = { ...cursors, ...dynamicCursors };\n\n return (\n \n );\n}\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/dialog.json b/apps/www/public/registry/styles/default/dialog.json index 4c46626808..c09b66c857 100644 --- a/apps/www/public/registry/styles/default/dialog.json +++ b/apps/www/public/registry/styles/default/dialog.json @@ -7,7 +7,7 @@ "files": [ { "name": "dialog.tsx", - "content": "'use client';\n\nimport * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n);\nDialogHeader.displayName = 'DialogHeader';\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n);\nDialogFooter.displayName = 'DialogFooter';\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogClose,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n};\n" + "content": "'use client';\n\nimport * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport const DialogOverlay = withCn(\n DialogPrimitive.Overlay,\n 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'\n);\n\nexport const DialogContent = withRef(\n ({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n )\n);\n\nexport const DialogHeader = withCn(\n createPrimitiveElement('div'),\n 'flex flex-col space-y-1.5 text-center sm:text-left'\n);\n\nexport const DialogFooter = withCn(\n createPrimitiveElement('div'),\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2'\n);\n\nexport const DialogTitle = withCn(\n DialogPrimitive.Title,\n 'text-lg font-semibold leading-none tracking-tight'\n);\n\nexport const DialogDescription = withCn(\n DialogPrimitive.Description,\n 'text-sm text-muted-foreground'\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/draggable.json b/apps/www/public/registry/styles/default/draggable.json index 2a5309b712..ebb1a6a5e7 100644 --- a/apps/www/public/registry/styles/default/draggable.json +++ b/apps/www/public/registry/styles/default/draggable.json @@ -11,7 +11,7 @@ "files": [ { "name": "draggable.tsx", - "content": "'use client';\n\nimport React, { forwardRef } from 'react';\nimport { ClassNames, PlateElementProps, TEditor } from '@udecode/plate-common';\nimport {\n DragItemNode,\n useDraggable,\n useDraggableState,\n} from '@udecode/plate-dnd';\nimport { DropTargetMonitor } from 'react-dnd';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\n\nimport { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';\n\nexport interface DraggableProps\n extends PlateElementProps,\n ClassNames<{\n /**\n * Block and gutter.\n */\n blockAndGutter: string;\n\n /**\n * Block.\n */\n block: string;\n\n /**\n * Gutter at the left side of the editor.\n * It has the height of the block\n */\n gutterLeft: string;\n\n /**\n * Block toolbar wrapper in the gutter left.\n * It has the height of a line of the block.\n */\n blockToolbarWrapper: string;\n\n /**\n * Block toolbar in the gutter.\n */\n blockToolbar: string;\n\n blockWrapper: string;\n\n /**\n * Button to dnd the block, in the block toolbar.\n */\n dragHandle: string;\n\n /**\n * Icon of the drag button, in the drag icon.\n */\n dragIcon: string;\n\n /**\n * Show a dropline above or below the block when dragging a block.\n */\n dropLine: string;\n }> {\n /**\n * Intercepts the drop handling.\n * If `false` is returned, the default drop behavior is called after.\n * If `true` is returned, the default behavior is not called.\n */\n onDropHandler?: (\n editor: TEditor,\n props: {\n monitor: DropTargetMonitor;\n dragItem: DragItemNode;\n nodeRef: any;\n id: string;\n }\n ) => boolean;\n}\n\nconst dragHandle = (\n \n \n \n \n Drag to move\n \n);\n\nconst Draggable = forwardRef(\n ({ className, classNames = {}, onDropHandler, ...props }, ref) => {\n const { children, element } = props;\n\n const state = useDraggableState({ element, onDropHandler });\n const { dropLine, isDragging, isHovered } = state;\n const {\n groupProps,\n droplineProps,\n gutterLeftProps,\n previewRef,\n handleRef,\n } = useDraggable(state);\n\n return (\n \n \n
\n \n
\n {isHovered && dragHandle}\n
\n
\n \n \n\n
\n {children}\n\n {!!dropLine && (\n \n )}\n
\n \n );\n }\n);\nDraggable.displayName = 'Draggable';\n\nexport { Draggable };\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { ClassNames, PlateElementProps, TEditor } from '@udecode/plate-common';\nimport {\n DragItemNode,\n useDraggable,\n useDraggableState,\n} from '@udecode/plate-dnd';\nimport { DropTargetMonitor } from 'react-dnd';\n\nimport { Icons } from '@/components/icons';\n\nimport { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';\n\nexport interface DraggableProps\n extends PlateElementProps,\n ClassNames<{\n /**\n * Block and gutter.\n */\n blockAndGutter: string;\n\n /**\n * Block.\n */\n block: string;\n\n /**\n * Gutter at the left side of the editor.\n * It has the height of the block\n */\n gutterLeft: string;\n\n /**\n * Block toolbar wrapper in the gutter left.\n * It has the height of a line of the block.\n */\n blockToolbarWrapper: string;\n\n /**\n * Block toolbar in the gutter.\n */\n blockToolbar: string;\n\n blockWrapper: string;\n\n /**\n * Button to dnd the block, in the block toolbar.\n */\n dragHandle: string;\n\n /**\n * Icon of the drag button, in the drag icon.\n */\n dragIcon: string;\n\n /**\n * Show a dropline above or below the block when dragging a block.\n */\n dropLine: string;\n }> {\n /**\n * Intercepts the drop handling.\n * If `false` is returned, the default drop behavior is called after.\n * If `true` is returned, the default behavior is not called.\n */\n onDropHandler?: (\n editor: TEditor,\n props: {\n monitor: DropTargetMonitor;\n dragItem: DragItemNode;\n nodeRef: any;\n id: string;\n }\n ) => boolean;\n}\n\nconst dragHandle = (\n \n \n \n \n Drag to move\n \n);\n\nexport const Draggable = withRef<'div', DraggableProps>(\n ({ className, classNames = {}, onDropHandler, ...props }, ref) => {\n const { children, element } = props;\n\n const state = useDraggableState({ element, onDropHandler });\n const { dropLine, isDragging, isHovered } = state;\n const {\n groupProps,\n droplineProps,\n gutterLeftProps,\n previewRef,\n handleRef,\n } = useDraggable(state);\n\n return (\n \n \n
\n \n
\n {isHovered && dragHandle}\n
\n
\n \n \n\n
\n {children}\n\n {!!dropLine && (\n \n )}\n
\n \n );\n }\n);\n" }, { "name": "with-draggables.tsx", diff --git a/apps/www/public/registry/styles/default/dropdown-menu.json b/apps/www/public/registry/styles/default/dropdown-menu.json index 95cdc11072..95fc5dc607 100644 --- a/apps/www/public/registry/styles/default/dropdown-menu.json +++ b/apps/www/public/registry/styles/default/dropdown-menu.json @@ -7,7 +7,7 @@ "files": [ { "name": "dropdown-menu.tsx", - "content": "'use client';\n\nimport * as React from 'react';\nimport { useCallback, useState } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group;\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean;\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n));\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubTrigger.displayName;\n\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nDropdownMenuSubContent.displayName =\n DropdownMenuPrimitive.SubContent.displayName;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, sideOffset = 4, ...props }, ref) => (\n \n \n \n));\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;\n\nexport const menuItemVariants = cva(\n cn(\n 'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',\n 'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'\n ),\n {\n variants: {\n inset: {\n true: 'pl-8',\n },\n },\n }\n);\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef &\n VariantProps\n>(({ className, inset, ...props }, ref) => (\n \n));\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n));\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName;\n\ninterface DropdownMenuRadioItemProps\n extends React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.RadioItem\n > {\n hideIcon?: boolean;\n}\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef,\n DropdownMenuRadioItemProps\n>(({ className, children, hideIcon, ...props }, ref) => (\n \n {!hideIcon && (\n \n \n \n \n \n )}\n {children}\n \n));\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean;\n }\n>(({ className, inset, ...props }, ref) => (\n \n));\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.HTMLAttributes) {\n return (\n \n );\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut';\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup,\n};\n\nexport const useOpenState = () => {\n const [open, setOpen] = useState(false);\n\n const onOpenChange = useCallback(\n (_value = !open) => {\n setOpen(_value);\n },\n [open]\n );\n\n return {\n open,\n onOpenChange,\n };\n};\n" + "content": "'use client';\n\nimport * as React from 'react';\nimport { useCallback, useState } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport {\n cn,\n createPrimitiveElement,\n withCn,\n withProps,\n withRef,\n withVariants,\n} from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nexport const DropdownMenuSubTrigger = withRef<\n typeof DropdownMenuPrimitive.SubTrigger,\n {\n inset?: boolean;\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n));\n\nexport const DropdownMenuSubContent = withCn(\n DropdownMenuPrimitive.SubContent,\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n);\n\nconst DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {\n sideOffset: 4,\n className: cn(\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'\n ),\n});\n\nexport const DropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>(({ className, ...props }, ref) => (\n \n \n \n));\n\nconst menuItemVariants = cva(\n cn(\n 'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',\n 'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'\n ),\n {\n variants: {\n inset: {\n true: 'pl-8',\n },\n },\n }\n);\n\nexport const DropdownMenuItem = withVariants(\n DropdownMenuPrimitive.Item,\n menuItemVariants,\n ['inset']\n);\n\nexport const DropdownMenuCheckboxItem = withRef<\n typeof DropdownMenuPrimitive.CheckboxItem\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n));\n\nexport const DropdownMenuRadioItem = withRef<\n typeof DropdownMenuPrimitive.RadioItem,\n {\n hideIcon?: boolean;\n }\n>(({ className, children, hideIcon, ...props }, ref) => (\n \n {!hideIcon && (\n \n \n \n \n \n )}\n {children}\n \n));\n\nconst dropdownMenuLabelVariants = cva(\n cn('select-none px-2 py-1.5 text-sm font-semibold'),\n {\n variants: {\n inset: {\n true: 'pl-8',\n },\n },\n }\n);\n\nexport const DropdownMenuLabel = withVariants(\n DropdownMenuPrimitive.Label,\n dropdownMenuLabelVariants,\n ['inset']\n);\n\nexport const DropdownMenuSeparator = withCn(\n DropdownMenuPrimitive.Separator,\n '-mx-1 my-1 h-px bg-muted'\n);\n\nexport const DropdownMenuShortcut = withCn(\n createPrimitiveElement('span'),\n 'ml-auto text-xs tracking-widest opacity-60'\n);\n\nexport const useOpenState = () => {\n const [open, setOpen] = useState(false);\n\n const onOpenChange = useCallback(\n (_value = !open) => {\n setOpen(_value);\n },\n [open]\n );\n\n return {\n open,\n onOpenChange,\n };\n};\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/editor.json b/apps/www/public/registry/styles/default/editor.json index 6b0409a576..1071322cf1 100644 --- a/apps/www/public/registry/styles/default/editor.json +++ b/apps/www/public/registry/styles/default/editor.json @@ -5,7 +5,7 @@ "files": [ { "name": "editor.tsx", - "content": "import React from 'react';\nimport { PlateContent } from '@udecode/plate-common';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nimport type { PlateContentProps } from '@udecode/plate-common';\nimport type { VariantProps } from 'class-variance-authority';\n\nconst editorVariants = cva(\n cn(\n 'relative overflow-x-auto whitespace-pre-wrap break-words',\n 'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',\n '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',\n '[&_[data-slate-placeholder]]:top-[auto_!important]',\n '[&_strong]:font-bold'\n ),\n {\n variants: {\n variant: {\n outline: 'border border-input',\n ghost: '',\n },\n focused: {\n true: 'ring-2 ring-ring ring-offset-2',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n },\n focusRing: {\n true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n false: '',\n },\n size: {\n sm: 'text-sm',\n md: 'text-base',\n },\n },\n defaultVariants: {\n variant: 'outline',\n focusRing: true,\n size: 'sm',\n },\n }\n);\n\nexport type EditorProps = PlateContentProps &\n VariantProps;\n\nconst Editor = React.forwardRef(\n (\n {\n className,\n disabled,\n focused,\n focusRing,\n readOnly,\n size,\n variant,\n ...props\n },\n ref\n ) => {\n return (\n
\n \n
\n );\n }\n);\nEditor.displayName = 'Editor';\n\nexport { Editor };\n" + "content": "import React from 'react';\nimport { cn } from '@udecode/cn';\nimport { PlateContent } from '@udecode/plate-common';\nimport { cva } from 'class-variance-authority';\n\nimport type { PlateContentProps } from '@udecode/plate-common';\nimport type { VariantProps } from 'class-variance-authority';\n\nconst editorVariants = cva(\n cn(\n 'relative overflow-x-auto whitespace-pre-wrap break-words',\n 'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',\n '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',\n '[&_[data-slate-placeholder]]:top-[auto_!important]',\n '[&_strong]:font-bold'\n ),\n {\n variants: {\n variant: {\n outline: 'border border-input',\n ghost: '',\n },\n focused: {\n true: 'ring-2 ring-ring ring-offset-2',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n },\n focusRing: {\n true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n false: '',\n },\n size: {\n sm: 'text-sm',\n md: 'text-base',\n },\n },\n defaultVariants: {\n variant: 'outline',\n focusRing: true,\n size: 'sm',\n },\n }\n);\n\nexport type EditorProps = PlateContentProps &\n VariantProps;\n\nconst Editor = React.forwardRef(\n (\n {\n className,\n disabled,\n focused,\n focusRing,\n readOnly,\n size,\n variant,\n ...props\n },\n ref\n ) => {\n return (\n
\n \n
\n );\n }\n);\nEditor.displayName = 'Editor';\n\nexport { Editor };\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/emoji-combobox.json b/apps/www/public/registry/styles/default/emoji-combobox.json index 7c848cd6cd..d99c7a7a8f 100644 --- a/apps/www/public/registry/styles/default/emoji-combobox.json +++ b/apps/www/public/registry/styles/default/emoji-combobox.json @@ -7,7 +7,7 @@ "files": [ { "name": "emoji-combobox.tsx", - "content": "import React from 'react';\nimport { ComboboxItemProps } from '@udecode/plate-combobox';\nimport {\n EmojiItemData,\n KEY_EMOJI,\n TEmojiCombobox,\n useEmojiComboboxState,\n} from '@udecode/plate-emoji';\n\nimport { Combobox } from './combobox';\n\nexport function EmojiComboboxItem({ item }: ComboboxItemProps) {\n const {\n data: { id, emoji },\n } = item;\n\n return (\n
\n {emoji} :{id}:\n
\n );\n}\n\nexport function EmojiCombobox({\n pluginKey = KEY_EMOJI,\n id = pluginKey,\n ...props\n}: TEmojiCombobox) {\n const { trigger, onSelectItem } = useEmojiComboboxState({ pluginKey });\n\n return (\n \n );\n}\n" + "content": "import React from 'react';\nimport { ComboboxItemProps } from '@udecode/plate-combobox';\nimport {\n EmojiItemData,\n KEY_EMOJI,\n TEmojiCombobox,\n useEmojiComboboxState,\n} from '@udecode/plate-emoji';\n\nimport { Combobox } from './combobox';\n\nexport function EmojiComboboxItem({ item }: ComboboxItemProps) {\n const {\n data: { id, emoji },\n } = item;\n\n return (\n
\n {emoji} :{id}:\n
\n );\n}\n\nexport function EmojiCombobox({\n pluginKey = KEY_EMOJI,\n id = pluginKey,\n ...props\n}: TEmojiCombobox) {\n const { trigger, onSelectItem } = useEmojiComboboxState({ pluginKey });\n\n return (\n \n );\n}\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/emoji-dropdown-menu.json b/apps/www/public/registry/styles/default/emoji-dropdown-menu.json index 8eb64526ce..69ac9de712 100644 --- a/apps/www/public/registry/styles/default/emoji-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/emoji-dropdown-menu.json @@ -9,7 +9,7 @@ "files": [ { "name": "emoji-dropdown-menu.tsx", - "content": "import React from 'react';\nimport {\n EmojiDropdownMenuOptions,\n useEmojiDropdownMenuState,\n} from '@udecode/plate-emoji';\n\nimport { Icons } from '@/components/icons';\nimport { EmojiToolbarDropdown } from '@/registry/default/plate-ui/emoji-toolbar-dropdown';\nimport {\n ToolbarButton,\n ToolbarButtonProps,\n} from '@/registry/default/plate-ui/toolbar';\n\nimport { emojiCategoryIcons, emojiSearchIcons } from './emoji-icons';\nimport { EmojiPicker } from './emoji-picker';\n\ntype EmojiDropdownMenuProps = {\n options?: EmojiDropdownMenuOptions;\n} & ToolbarButtonProps;\n\nexport function EmojiDropdownMenu({\n options,\n ...props\n}: EmojiDropdownMenuProps) {\n const { isOpen, setIsOpen, emojiPickerState } =\n useEmojiDropdownMenuState(options);\n\n return (\n \n \n \n }\n isOpen={isOpen}\n setIsOpen={setIsOpen}\n >\n \n \n );\n}\n" + "content": "import React from 'react';\nimport {\n EmojiDropdownMenuOptions,\n useEmojiDropdownMenuState,\n} from '@udecode/plate-emoji';\n\nimport { Icons } from '@/components/icons';\n\nimport { emojiCategoryIcons, emojiSearchIcons } from './emoji-icons';\nimport { EmojiPicker } from './emoji-picker';\nimport { EmojiToolbarDropdown } from './emoji-toolbar-dropdown';\nimport { ToolbarButton } from './toolbar';\n\ntype EmojiDropdownMenuProps = {\n options?: EmojiDropdownMenuOptions;\n} & React.ComponentPropsWithoutRef;\n\nexport function EmojiDropdownMenu({\n options,\n ...props\n}: EmojiDropdownMenuProps) {\n const { isOpen, setIsOpen, emojiPickerState } =\n useEmojiDropdownMenuState(options);\n\n return (\n \n \n \n }\n isOpen={isOpen}\n setIsOpen={setIsOpen}\n >\n \n \n );\n}\n" }, { "name": "emoji-toolbar-dropdown.tsx", @@ -21,15 +21,15 @@ }, { "name": "emoji-picker.tsx", - "content": "import React from 'react';\nimport { EmojiSettings, UseEmojiPickerType } from '@udecode/plate-emoji';\n\nimport { cn } from '@/lib/utils';\n\nimport { EmojiPickerContent } from './emoji-picker-content';\nimport { EmojiPickerNavigation } from './emoji-picker-navigation';\nimport { EmojiPickerPreview } from './emoji-picker-preview';\nimport { EmojiPickerSearchAndClear } from './emoji-picker-search-and-clear';\nimport { EmojiPickerSearchBar } from './emoji-picker-search-bar';\n\nexport function EmojiPicker({\n i18n,\n searchValue,\n setSearch,\n clearSearch,\n isSearching,\n hasFound,\n searchResult,\n emoji,\n onSelectEmoji,\n onMouseOver,\n emojiLibrary,\n icons,\n handleCategoryClick,\n focusedCategory,\n visibleCategories,\n refs,\n settings = EmojiSettings,\n}: UseEmojiPickerType) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n" + "content": "import React from 'react';\nimport { cn } from '@udecode/cn';\nimport { EmojiSettings, UseEmojiPickerType } from '@udecode/plate-emoji';\n\nimport { EmojiPickerContent } from './emoji-picker-content';\nimport { EmojiPickerNavigation } from './emoji-picker-navigation';\nimport { EmojiPickerPreview } from './emoji-picker-preview';\nimport { EmojiPickerSearchAndClear } from './emoji-picker-search-and-clear';\nimport { EmojiPickerSearchBar } from './emoji-picker-search-bar';\n\nexport function EmojiPicker({\n i18n,\n searchValue,\n setSearch,\n clearSearch,\n isSearching,\n hasFound,\n searchResult,\n emoji,\n onSelectEmoji,\n onMouseOver,\n emojiLibrary,\n icons,\n handleCategoryClick,\n focusedCategory,\n visibleCategories,\n refs,\n settings = EmojiSettings,\n}: UseEmojiPickerType) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n" }, { "name": "emoji-picker-content.tsx", - "content": "import React, { memo, useCallback } from 'react';\nimport {\n Emoji,\n EmojiSettings,\n GridRow,\n UseEmojiPickerType,\n} from '@udecode/plate-emoji';\n\nimport { cn } from '@/lib/utils';\n\nexport type EmojiPickerContentProps = Pick<\n UseEmojiPickerType,\n | 'i18n'\n | 'onMouseOver'\n | 'onSelectEmoji'\n | 'emojiLibrary'\n | 'isSearching'\n | 'searchResult'\n | 'visibleCategories'\n | 'refs'\n | 'settings'\n>;\n\nexport type EmojiButtonProps = {\n index: number;\n emoji: Emoji;\n onSelect: (emoji: Emoji) => void;\n onMouseOver: (emoji?: Emoji) => void;\n};\n\nexport type RowOfButtonsProps = Pick<\n UseEmojiPickerType,\n 'onMouseOver' | 'onSelectEmoji' | 'emojiLibrary'\n> & {\n row: GridRow;\n};\n\nconst Button = memo(\n ({ index, emoji, onSelect, onMouseOver }: EmojiButtonProps) => {\n return (\n onSelect(emoji)}\n onMouseEnter={() => onMouseOver(emoji)}\n onMouseLeave={() => onMouseOver()}\n className=\"group relative flex h-[36px] w-[36px] cursor-pointer items-center justify-center border-none bg-transparent text-2xl leading-none\"\n >\n \n \n {emoji.skins[0].native}\n \n \n );\n }\n);\nButton.displayName = 'Button';\n\nconst RowOfButtons = memo(\n ({ row, emojiLibrary, onSelectEmoji, onMouseOver }: RowOfButtonsProps) => (\n
\n {row.elements.map((emojiId, index) => (\n \n ))}\n
\n )\n);\nRowOfButtons.displayName = 'RowOfButtons';\n\nexport function EmojiPickerContent({\n i18n,\n onSelectEmoji,\n onMouseOver,\n emojiLibrary,\n isSearching = false,\n searchResult,\n visibleCategories,\n refs,\n settings = EmojiSettings,\n}: EmojiPickerContentProps) {\n const getRowWidth = settings.perLine.value * settings.buttonSize.value;\n\n const isCategoryVisible = useCallback(\n (categoryId: any) => {\n return visibleCategories.has(categoryId)\n ? visibleCategories.get(categoryId)\n : false;\n },\n [visibleCategories]\n );\n\n const EmojiList = useCallback(() => {\n return emojiLibrary\n .getGrid()\n .sections()\n .map(({ id: categoryId }) => {\n const section = emojiLibrary.getGrid().section(categoryId);\n const { buttonSize } = settings;\n\n return (\n \n
\n {i18n.categories[categoryId]}\n
\n \n {isCategoryVisible(categoryId) &&\n section\n .getRows()\n .map((row: GridRow, index) => (\n \n ))}\n \n \n );\n });\n }, [\n emojiLibrary,\n getRowWidth,\n i18n.categories,\n isCategoryVisible,\n onSelectEmoji,\n onMouseOver,\n settings,\n ]);\n\n const SearchList = useCallback(() => {\n return (\n
\n
\n {i18n.searchResult}\n
\n
\n {searchResult.map((emoji: Emoji, index: number) => (\n \n ))}\n
\n
\n );\n }, [\n emojiLibrary,\n getRowWidth,\n i18n.searchResult,\n searchResult,\n onSelectEmoji,\n onMouseOver,\n ]);\n\n return (\n \n
\n {isSearching ? SearchList() : EmojiList()}\n
\n \n );\n}\n" + "content": "import React, { memo, useCallback } from 'react';\nimport { cn } from '@udecode/cn';\nimport {\n Emoji,\n EmojiSettings,\n GridRow,\n UseEmojiPickerType,\n} from '@udecode/plate-emoji';\n\nexport type EmojiPickerContentProps = Pick<\n UseEmojiPickerType,\n | 'i18n'\n | 'onMouseOver'\n | 'onSelectEmoji'\n | 'emojiLibrary'\n | 'isSearching'\n | 'searchResult'\n | 'visibleCategories'\n | 'refs'\n | 'settings'\n>;\n\nexport type EmojiButtonProps = {\n index: number;\n emoji: Emoji;\n onSelect: (emoji: Emoji) => void;\n onMouseOver: (emoji?: Emoji) => void;\n};\n\nexport type RowOfButtonsProps = Pick<\n UseEmojiPickerType,\n 'onMouseOver' | 'onSelectEmoji' | 'emojiLibrary'\n> & {\n row: GridRow;\n};\n\nconst Button = memo(\n ({ index, emoji, onSelect, onMouseOver }: EmojiButtonProps) => {\n return (\n onSelect(emoji)}\n onMouseEnter={() => onMouseOver(emoji)}\n onMouseLeave={() => onMouseOver()}\n className=\"group relative flex h-[36px] w-[36px] cursor-pointer items-center justify-center border-none bg-transparent text-2xl leading-none\"\n >\n \n \n {emoji.skins[0].native}\n \n \n );\n }\n);\nButton.displayName = 'Button';\n\nconst RowOfButtons = memo(\n ({ row, emojiLibrary, onSelectEmoji, onMouseOver }: RowOfButtonsProps) => (\n
\n {row.elements.map((emojiId, index) => (\n \n ))}\n
\n )\n);\nRowOfButtons.displayName = 'RowOfButtons';\n\nexport function EmojiPickerContent({\n i18n,\n onSelectEmoji,\n onMouseOver,\n emojiLibrary,\n isSearching = false,\n searchResult,\n visibleCategories,\n refs,\n settings = EmojiSettings,\n}: EmojiPickerContentProps) {\n const getRowWidth = settings.perLine.value * settings.buttonSize.value;\n\n const isCategoryVisible = useCallback(\n (categoryId: any) => {\n return visibleCategories.has(categoryId)\n ? visibleCategories.get(categoryId)\n : false;\n },\n [visibleCategories]\n );\n\n const EmojiList = useCallback(() => {\n return emojiLibrary\n .getGrid()\n .sections()\n .map(({ id: categoryId }) => {\n const section = emojiLibrary.getGrid().section(categoryId);\n const { buttonSize } = settings;\n\n return (\n \n
\n {i18n.categories[categoryId]}\n
\n \n {isCategoryVisible(categoryId) &&\n section\n .getRows()\n .map((row: GridRow, index) => (\n \n ))}\n \n \n );\n });\n }, [\n emojiLibrary,\n getRowWidth,\n i18n.categories,\n isCategoryVisible,\n onSelectEmoji,\n onMouseOver,\n settings,\n ]);\n\n const SearchList = useCallback(() => {\n return (\n
\n
\n {i18n.searchResult}\n
\n
\n {searchResult.map((emoji: Emoji, index: number) => (\n \n ))}\n
\n
\n );\n }, [\n emojiLibrary,\n getRowWidth,\n i18n.searchResult,\n searchResult,\n onSelectEmoji,\n onMouseOver,\n ]);\n\n return (\n \n
\n {isSearching ? SearchList() : EmojiList()}\n
\n \n );\n}\n" }, { "name": "emoji-picker-navigation.tsx", - "content": "import React from 'react';\nimport {\n EmojiCategoryList,\n IEmojiFloatingLibrary,\n UseEmojiPickerType,\n} from '@udecode/plate-emoji';\n\nimport { cn } from '@/lib/utils';\n\nexport type EmojiPickerNavigationProps = Pick<\n UseEmojiPickerType,\n 'i18n' | 'emojiLibrary' | 'icons' | 'focusedCategory'\n> & {\n onClick: (id: EmojiCategoryList) => void;\n};\n\nconst getBarProperty = (\n emojiLibrary: IEmojiFloatingLibrary,\n focusedCategory?: EmojiCategoryList\n) => {\n let width = 0;\n let position = 0;\n if (focusedCategory) {\n width = 100 / emojiLibrary.getGrid().size;\n position = focusedCategory\n ? emojiLibrary.indexOf(focusedCategory) * 100\n : 0;\n }\n\n return { width, position };\n};\n\nexport function EmojiPickerNavigation({\n i18n,\n icons,\n emojiLibrary,\n focusedCategory,\n onClick,\n}: EmojiPickerNavigationProps) {\n const { width, position } = getBarProperty(emojiLibrary, focusedCategory);\n\n return (\n \n
\n {emojiLibrary\n .getGrid()\n .sections()\n .map(({ id }) => (\n onClick(id)}\n >\n \n {icons.categories[id].outline}\n \n \n ))}\n \n
\n \n );\n}\n" + "content": "import React from 'react';\nimport { cn } from '@udecode/cn';\nimport {\n EmojiCategoryList,\n IEmojiFloatingLibrary,\n UseEmojiPickerType,\n} from '@udecode/plate-emoji';\n\nexport type EmojiPickerNavigationProps = Pick<\n UseEmojiPickerType,\n 'i18n' | 'emojiLibrary' | 'icons' | 'focusedCategory'\n> & {\n onClick: (id: EmojiCategoryList) => void;\n};\n\nconst getBarProperty = (\n emojiLibrary: IEmojiFloatingLibrary,\n focusedCategory?: EmojiCategoryList\n) => {\n let width = 0;\n let position = 0;\n if (focusedCategory) {\n width = 100 / emojiLibrary.getGrid().size;\n position = focusedCategory\n ? emojiLibrary.indexOf(focusedCategory) * 100\n : 0;\n }\n\n return { width, position };\n};\n\nexport function EmojiPickerNavigation({\n i18n,\n icons,\n emojiLibrary,\n focusedCategory,\n onClick,\n}: EmojiPickerNavigationProps) {\n const { width, position } = getBarProperty(emojiLibrary, focusedCategory);\n\n return (\n \n
\n {emojiLibrary\n .getGrid()\n .sections()\n .map(({ id }) => (\n onClick(id)}\n >\n \n {icons.categories[id].outline}\n \n \n ))}\n \n
\n \n );\n}\n" }, { "name": "emoji-picker-preview.tsx", @@ -37,7 +37,7 @@ }, { "name": "emoji-picker-search-and-clear.tsx", - "content": "import React from 'react';\nimport { UseEmojiPickerType } from '@udecode/plate-emoji';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\n\nexport type EmojiPickerSearchAndClearProps = Pick<\n UseEmojiPickerType,\n 'i18n' | 'searchValue' | 'clearSearch'\n>;\n\nexport function EmojiPickerSearchAndClear({\n i18n,\n searchValue,\n clearSearch,\n}: EmojiPickerSearchAndClearProps) {\n return (\n <>\n \n \n \n {searchValue && (\n \n \n \n )}\n \n );\n}\n" + "content": "import React from 'react';\nimport { cn } from '@udecode/cn';\nimport { UseEmojiPickerType } from '@udecode/plate-emoji';\n\nimport { Icons } from '@/components/icons';\n\nexport type EmojiPickerSearchAndClearProps = Pick<\n UseEmojiPickerType,\n 'i18n' | 'searchValue' | 'clearSearch'\n>;\n\nexport function EmojiPickerSearchAndClear({\n i18n,\n searchValue,\n clearSearch,\n}: EmojiPickerSearchAndClearProps) {\n return (\n <>\n \n \n \n {searchValue && (\n \n \n \n )}\n \n );\n}\n" }, { "name": "emoji-picker-search-bar.tsx", diff --git a/apps/www/public/registry/styles/default/excalidraw-element.json b/apps/www/public/registry/styles/default/excalidraw-element.json index 8184910b90..4d2e6b076a 100644 --- a/apps/www/public/registry/styles/default/excalidraw-element.json +++ b/apps/www/public/registry/styles/default/excalidraw-element.json @@ -7,7 +7,7 @@ "files": [ { "name": "excalidraw-element.tsx", - "content": "import React from 'react';\nimport { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';\nimport {\n TExcalidrawElement,\n useExcalidrawElement,\n} from '@udecode/plate-excalidraw';\n\nexport function ExcalidrawElement({\n nodeProps,\n ...props\n}: PlateElementProps) {\n const { children, element } = props;\n\n const { Excalidraw, excalidrawProps } = useExcalidrawElement({\n element,\n });\n\n return (\n \n
\n
\n {Excalidraw && (\n \n )}\n
\n
\n {children}\n \n );\n}\n" + "content": "import React from 'react';\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common';\nimport { useExcalidrawElement } from '@udecode/plate-excalidraw';\n\nexport const ExcalidrawElement = withRef(\n ({ nodeProps, ...props }, ref) => {\n const { children, element } = props;\n\n const { Excalidraw, excalidrawProps } = useExcalidrawElement({\n element,\n });\n\n return (\n \n
\n
\n {Excalidraw && (\n \n )}\n
\n
\n {children}\n \n );\n }\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/fixed-toolbar.json b/apps/www/public/registry/styles/default/fixed-toolbar.json index 4bf110d325..405f13ec8d 100644 --- a/apps/www/public/registry/styles/default/fixed-toolbar.json +++ b/apps/www/public/registry/styles/default/fixed-toolbar.json @@ -7,7 +7,7 @@ "files": [ { "name": "fixed-toolbar.tsx", - "content": "import React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport { Toolbar, ToolbarProps } from './toolbar';\n\nconst FixedToolbar = React.forwardRef(\n ({ className, ...props }: ToolbarProps, ref) => {\n return (\n \n );\n }\n);\nFixedToolbar.displayName = 'FixedToolbar';\n\nexport { FixedToolbar };\n" + "content": "import { withCn } from '@udecode/cn';\n\nimport { Toolbar } from './toolbar';\n\nexport const FixedToolbar = withCn(\n Toolbar,\n 'supports-backdrop-blur:bg-background/60 sticky left-0 top-[57px] z-50 w-full justify-between overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 backdrop-blur'\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/floating-toolbar.json b/apps/www/public/registry/styles/default/floating-toolbar.json index 601c13530a..ae6a8e9670 100644 --- a/apps/www/public/registry/styles/default/floating-toolbar.json +++ b/apps/www/public/registry/styles/default/floating-toolbar.json @@ -9,7 +9,7 @@ "files": [ { "name": "floating-toolbar.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport { PortalBody, useComposedRef } from '@udecode/plate-common';\nimport {\n flip,\n FloatingToolbarState,\n offset,\n useFloatingToolbar,\n useFloatingToolbarState,\n} from '@udecode/plate-floating';\n\nimport { cn } from '@/lib/utils';\n\nimport { Toolbar, ToolbarProps } from './toolbar';\n\nexport interface FloatingToolbarProps extends ToolbarProps {\n state?: FloatingToolbarState;\n}\n\nconst FloatingToolbar = React.forwardRef<\n React.ElementRef,\n FloatingToolbarProps\n>(({ state, children, ...props }, componentRef) => {\n const floatingToolbarState = useFloatingToolbarState({\n ...state,\n floatingOptions: {\n placement: 'top',\n middleware: [\n offset(12),\n flip({\n padding: 12,\n fallbackPlacements: [\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n ],\n }),\n ],\n ...state?.floatingOptions,\n },\n });\n\n const {\n ref: floatingRef,\n props: rootProps,\n hidden,\n } = useFloatingToolbar(floatingToolbarState);\n\n const ref = useComposedRef(componentRef, floatingRef);\n\n if (hidden) return null;\n\n return (\n \n \n {children}\n \n \n );\n});\nFloatingToolbar.displayName = 'FloatingToolbar';\n\nexport { FloatingToolbar };\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { PortalBody, useComposedRef } from '@udecode/plate-common';\nimport {\n flip,\n FloatingToolbarState,\n offset,\n useFloatingToolbar,\n useFloatingToolbarState,\n} from '@udecode/plate-floating';\n\nimport { Toolbar } from './toolbar';\n\nexport const FloatingToolbar = withRef<\n typeof Toolbar,\n {\n state?: FloatingToolbarState;\n }\n>(({ state, children, ...props }, componentRef) => {\n const floatingToolbarState = useFloatingToolbarState({\n ...state,\n floatingOptions: {\n placement: 'top',\n middleware: [\n offset(12),\n flip({\n padding: 12,\n fallbackPlacements: [\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n ],\n }),\n ],\n ...state?.floatingOptions,\n },\n });\n\n const {\n ref: floatingRef,\n props: rootProps,\n hidden,\n } = useFloatingToolbar(floatingToolbarState);\n\n const ref = useComposedRef(componentRef, floatingRef);\n\n if (hidden) return null;\n\n return (\n \n \n {children}\n \n \n );\n});\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/heading-element.json b/apps/www/public/registry/styles/default/heading-element.json index d122efaf06..56adb83fc8 100644 --- a/apps/www/public/registry/styles/default/heading-element.json +++ b/apps/www/public/registry/styles/default/heading-element.json @@ -7,7 +7,7 @@ "files": [ { "name": "heading-element.tsx", - "content": "import React from 'react';\nimport { PlateElement, PlateElementProps } from '@udecode/plate-common';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nconst headingVariants = cva('', {\n variants: {\n variant: {\n h1: 'mb-1 mt-[2em] font-heading text-4xl font-bold',\n h2: 'mb-px mt-[1.4em] font-heading text-2xl font-semibold tracking-tight',\n h3: 'mb-px mt-[1em] font-heading text-xl font-semibold tracking-tight',\n h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',\n h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',\n h6: 'mt-[0.75em] text-base font-semibold tracking-tight',\n },\n isFirstBlock: {\n true: 'mt-0',\n false: '',\n },\n },\n});\n\nexport function HeadingElement({\n className,\n variant = 'h1',\n isFirstBlock,\n children,\n ...props\n}: PlateElementProps & VariantProps) {\n const { element, editor } = props;\n\n const Element = variant!;\n\n return (\n \n {children}\n \n );\n}\n" + "content": "import React from 'react';\nimport { withRef, withVariants } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common';\nimport { cva } from 'class-variance-authority';\n\nconst headingVariants = cva('', {\n variants: {\n variant: {\n h1: 'mb-1 mt-[2em] font-heading text-4xl font-bold',\n h2: 'mb-px mt-[1.4em] font-heading text-2xl font-semibold tracking-tight',\n h3: 'mb-px mt-[1em] font-heading text-xl font-semibold tracking-tight',\n h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',\n h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',\n h6: 'mt-[0.75em] text-base font-semibold tracking-tight',\n },\n isFirstBlock: {\n true: 'mt-0',\n false: '',\n },\n },\n});\n\nconst HeadingElementVariants = withVariants(PlateElement, headingVariants, [\n 'isFirstBlock',\n 'variant',\n]);\n\nexport const HeadingElement = withRef(\n ({ variant = 'h1', isFirstBlock, children, ...props }, ref) => {\n const { element, editor } = props;\n\n const Element = variant!;\n\n return (\n \n {children}\n \n );\n }\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/highlight-leaf.json b/apps/www/public/registry/styles/default/highlight-leaf.json index a17015d91e..60b43d656e 100644 --- a/apps/www/public/registry/styles/default/highlight-leaf.json +++ b/apps/www/public/registry/styles/default/highlight-leaf.json @@ -7,7 +7,7 @@ "files": [ { "name": "highlight-leaf.tsx", - "content": "import React from 'react';\nimport { PlateLeaf, PlateLeafProps } from '@udecode/plate-common';\n\nimport { cn } from '@/lib/utils';\n\nexport function HighlightLeaf({\n className,\n children,\n ...props\n}: PlateLeafProps) {\n return (\n \n {children}\n \n );\n}\n" + "content": "import React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common';\n\nexport const HighlightLeaf = withRef(\n ({ className, children, ...props }, ref) => (\n \n {children}\n \n )\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/hr-element.json b/apps/www/public/registry/styles/default/hr-element.json index d301f54c77..4324762b2f 100644 --- a/apps/www/public/registry/styles/default/hr-element.json +++ b/apps/www/public/registry/styles/default/hr-element.json @@ -7,7 +7,7 @@ "files": [ { "name": "hr-element.tsx", - "content": "import React from 'react';\nimport { PlateElement, PlateElementProps } from '@udecode/plate-common';\nimport { useFocused, useSelected } from 'slate-react';\n\nimport { cn } from '@/lib/utils';\n\nconst HrElement = React.forwardRef<\n React.ElementRef,\n PlateElementProps\n>(({ className, nodeProps, ...props }, ref) => {\n const { children } = props;\n\n const selected = useSelected();\n const focused = useFocused();\n\n return (\n \n
\n \n
\n {children}\n \n );\n});\nHrElement.displayName = 'HrElement';\n\nexport { HrElement };\n" + "content": "import React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common';\nimport { useFocused, useSelected } from 'slate-react';\n\nexport const HrElement = withRef(\n ({ className, nodeProps, ...props }, ref) => {\n const { children } = props;\n\n const selected = useSelected();\n const focused = useFocused();\n\n return (\n \n
\n \n
\n {children}\n \n );\n }\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/image-element.json b/apps/www/public/registry/styles/default/image-element.json index 340b5bf52d..32b069ad3c 100644 --- a/apps/www/public/registry/styles/default/image-element.json +++ b/apps/www/public/registry/styles/default/image-element.json @@ -11,7 +11,7 @@ "files": [ { "name": "image-element.tsx", - "content": "import React from 'react';\nimport {\n PlateElement,\n PlateElementProps,\n Value,\n withHOC,\n} from '@udecode/plate-common';\nimport {\n ELEMENT_IMAGE,\n Image,\n TImageElement,\n useMediaState,\n} from '@udecode/plate-media';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { cn } from '@/lib/utils';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n mediaResizeHandleVariants,\n Resizable,\n ResizeHandle,\n} from './resizable';\n\nconst ImageElement = withHOC(\n ResizableProvider,\n ({\n className,\n children,\n nodeProps,\n ...props\n }: PlateElementProps) => {\n const { readOnly, focused, selected, align = 'center' } = useMediaState();\n const width = useResizableStore().get.width();\n\n return (\n \n \n
\n \n \n \n \n \n\n \n \n \n
\n\n {children}\n \n \n );\n }\n);\nImageElement.displayName = 'ImageElement';\n\nexport { ImageElement };\n" + "content": "import React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, withHOC } from '@udecode/plate-common';\nimport { ELEMENT_IMAGE, Image, useMediaState } from '@udecode/plate-media';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n mediaResizeHandleVariants,\n Resizable,\n ResizeHandle,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n ResizableProvider,\n withRef(\n ({ className, children, nodeProps, ...props }, ref) => {\n const { readOnly, focused, selected, align = 'center' } = useMediaState();\n const width = useResizableStore().get.width();\n\n return (\n \n \n
\n \n \n \n \n \n\n \n \n \n
\n\n {children}\n \n \n );\n }\n )\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/indent-list-toolbar-button.json b/apps/www/public/registry/styles/default/indent-list-toolbar-button.json index 0e2b37f4d4..571a1e78f8 100644 --- a/apps/www/public/registry/styles/default/indent-list-toolbar-button.json +++ b/apps/www/public/registry/styles/default/indent-list-toolbar-button.json @@ -9,7 +9,7 @@ "files": [ { "name": "indent-list-toolbar-button.tsx", - "content": "import React from 'react';\nimport {\n ListStyleType,\n useIndentListToolbarButton,\n useIndentListToolbarButtonState,\n} from '@udecode/plate-indent-list';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton, ToolbarButtonProps } from './toolbar';\n\nexport function IndentListToolbarButton({\n nodeType = ListStyleType.Disc,\n}: ToolbarButtonProps & { nodeType?: ListStyleType }) {\n const state = useIndentListToolbarButtonState({ nodeType });\n const { props } = useIndentListToolbarButton(state);\n\n return (\n \n {nodeType === ListStyleType.Disc ? : }\n \n );\n}\n" + "content": "import React from 'react';\nimport { withRef } from '@udecode/cn';\nimport {\n ListStyleType,\n useIndentListToolbarButton,\n useIndentListToolbarButtonState,\n} from '@udecode/plate-indent-list';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const IndentListToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType?: ListStyleType;\n }\n>(({ nodeType = ListStyleType.Disc }, ref) => {\n const state = useIndentListToolbarButtonState({ nodeType });\n const { props } = useIndentListToolbarButton(state);\n\n return (\n \n {nodeType === ListStyleType.Disc ? : }\n \n );\n});\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/indent-toolbar-button.json b/apps/www/public/registry/styles/default/indent-toolbar-button.json index ff29afe00b..e19dd0107d 100644 --- a/apps/www/public/registry/styles/default/indent-toolbar-button.json +++ b/apps/www/public/registry/styles/default/indent-toolbar-button.json @@ -9,7 +9,7 @@ "files": [ { "name": "indent-toolbar-button.tsx", - "content": "import React from 'react';\nimport { useIndentButton } from '@udecode/plate-indent';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport function IndentToolbarButton() {\n const { props } = useIndentButton();\n\n return (\n \n \n \n );\n}\n" + "content": "import React from 'react';\nimport { withRef } from '@udecode/cn';\nimport { useIndentButton } from '@udecode/plate-indent';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const IndentToolbarButton = withRef(\n (rest, ref) => {\n const { props } = useIndentButton();\n\n return (\n \n \n \n );\n }\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/input.json b/apps/www/public/registry/styles/default/input.json index 0c7f677149..2a29c6f631 100644 --- a/apps/www/public/registry/styles/default/input.json +++ b/apps/www/public/registry/styles/default/input.json @@ -5,7 +5,7 @@ "files": [ { "name": "input.tsx", - "content": "import * as React from 'react';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nexport const inputVariants = cva(\n 'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n {\n variants: {\n variant: {\n default:\n 'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n ghost: 'border-none focus-visible:ring-transparent',\n },\n h: {\n sm: 'h-9 px-3 py-2',\n md: 'h-10 px-3 py-2',\n },\n },\n defaultVariants: {\n variant: 'default',\n h: 'md',\n },\n }\n);\n\nexport interface InputProps\n extends React.InputHTMLAttributes,\n VariantProps {}\n\nconst Input = React.forwardRef(\n ({ className, variant, type, ...props }, ref) => {\n return (\n \n );\n }\n);\nInput.displayName = 'Input';\n\nexport { Input };\n" + "content": "import { withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nexport const inputVariants = cva(\n 'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n {\n variants: {\n variant: {\n default:\n 'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n ghost: 'border-none focus-visible:ring-transparent',\n },\n h: {\n sm: 'h-9 px-3 py-2',\n md: 'h-10 px-3 py-2',\n },\n },\n defaultVariants: {\n variant: 'default',\n h: 'md',\n },\n }\n);\n\nexport const Input = withVariants('input', inputVariants, ['variant', 'h']);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/kbd-leaf.json b/apps/www/public/registry/styles/default/kbd-leaf.json index 5e2fda1204..502da697a6 100644 --- a/apps/www/public/registry/styles/default/kbd-leaf.json +++ b/apps/www/public/registry/styles/default/kbd-leaf.json @@ -7,7 +7,7 @@ "files": [ { "name": "kbd-leaf.tsx", - "content": "import React from 'react';\nimport { PlateLeaf, PlateLeafProps } from '@udecode/plate-common';\n\nimport { cn } from '@/lib/utils';\n\nexport function KbdLeaf({ className, children, ...props }: PlateLeafProps) {\n return (\n \n {children}\n \n );\n}\n" + "content": "import React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common';\n\nexport const KbdLeaf = withRef(\n ({ className, children, ...props }, ref) => (\n \n {children}\n \n )\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/link-element.json b/apps/www/public/registry/styles/default/link-element.json index b9ee37fd80..8e320fd29c 100644 --- a/apps/www/public/registry/styles/default/link-element.json +++ b/apps/www/public/registry/styles/default/link-element.json @@ -7,7 +7,7 @@ "files": [ { "name": "link-element.tsx", - "content": "import React from 'react';\nimport { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';\nimport { TLinkElement, useLink } from '@udecode/plate-link';\n\nimport { cn } from '@/lib/utils';\n\nconst LinkElement = React.forwardRef<\n React.ElementRef,\n PlateElementProps\n>(({ className, children, ...props }, ref) => {\n const { props: linkProps } = useLink({ element: props.element });\n\n return (\n \n {children}\n \n );\n});\nLinkElement.displayName = 'LinkElement';\n\nexport { LinkElement };\n" + "content": "import React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, useElement } from '@udecode/plate-common';\nimport { TLinkElement, useLink } from '@udecode/plate-link';\n\nexport const LinkElement = withRef(\n ({ className, children, ...props }, ref) => {\n const element = useElement();\n const { props: linkProps } = useLink({ element });\n\n return (\n \n {children}\n \n );\n }\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/link-floating-toolbar.json b/apps/www/public/registry/styles/default/link-floating-toolbar.json index a140212ac0..2865865fdf 100644 --- a/apps/www/public/registry/styles/default/link-floating-toolbar.json +++ b/apps/www/public/registry/styles/default/link-floating-toolbar.json @@ -12,7 +12,7 @@ "files": [ { "name": "link-floating-toolbar.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport {\n flip,\n offset,\n UseVirtualFloatingOptions,\n} from '@udecode/plate-floating';\nimport {\n FloatingLinkUrlInput,\n LinkFloatingToolbarState,\n LinkOpenButton,\n useFloatingLinkEdit,\n useFloatingLinkEditState,\n useFloatingLinkInsert,\n useFloatingLinkInsertState,\n} from '@udecode/plate-link';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport { inputVariants } from './input';\nimport { popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nconst floatingOptions: UseVirtualFloatingOptions = {\n placement: 'bottom-start',\n middleware: [\n offset(12),\n flip({\n padding: 12,\n fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],\n }),\n ],\n};\n\nexport interface LinkFloatingToolbarProps {\n state?: LinkFloatingToolbarState;\n}\n\nexport function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {\n const insertState = useFloatingLinkInsertState({\n ...state,\n floatingOptions: {\n ...floatingOptions,\n ...state?.floatingOptions,\n },\n });\n const {\n props: insertProps,\n ref: insertRef,\n hidden,\n textInputProps,\n } = useFloatingLinkInsert(insertState);\n\n const editState = useFloatingLinkEditState({\n ...state,\n floatingOptions: {\n ...floatingOptions,\n ...state?.floatingOptions,\n },\n });\n const {\n props: editProps,\n ref: editRef,\n editButtonProps,\n unlinkButtonProps,\n } = useFloatingLinkEdit(editState);\n\n if (hidden) return null;\n\n const input = (\n
\n
\n
\n \n
\n\n \n
\n\n \n\n
\n
\n \n
\n \n
\n
\n );\n\n const editContent = editState.isEditing ? (\n input\n ) : (\n
\n \n Edit link\n \n\n \n\n \n \n \n\n \n\n \n \n \n
\n );\n\n return (\n <>\n \n {input}\n \n\n \n {editContent}\n \n \n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@udecode/cn';\nimport {\n flip,\n offset,\n UseVirtualFloatingOptions,\n} from '@udecode/plate-floating';\nimport {\n FloatingLinkUrlInput,\n LinkFloatingToolbarState,\n LinkOpenButton,\n useFloatingLinkEdit,\n useFloatingLinkEditState,\n useFloatingLinkInsert,\n useFloatingLinkInsertState,\n} from '@udecode/plate-link';\n\nimport { Icons } from '@/components/icons';\n\nimport { buttonVariants } from './button';\nimport { inputVariants } from './input';\nimport { popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nconst floatingOptions: UseVirtualFloatingOptions = {\n placement: 'bottom-start',\n middleware: [\n offset(12),\n flip({\n padding: 12,\n fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],\n }),\n ],\n};\n\nexport interface LinkFloatingToolbarProps {\n state?: LinkFloatingToolbarState;\n}\n\nexport function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {\n const insertState = useFloatingLinkInsertState({\n ...state,\n floatingOptions: {\n ...floatingOptions,\n ...state?.floatingOptions,\n },\n });\n const {\n props: insertProps,\n ref: insertRef,\n hidden,\n textInputProps,\n } = useFloatingLinkInsert(insertState);\n\n const editState = useFloatingLinkEditState({\n ...state,\n floatingOptions: {\n ...floatingOptions,\n ...state?.floatingOptions,\n },\n });\n const {\n props: editProps,\n ref: editRef,\n editButtonProps,\n unlinkButtonProps,\n } = useFloatingLinkEdit(editState);\n\n if (hidden) return null;\n\n const input = (\n
\n
\n
\n \n
\n\n \n
\n\n \n\n
\n
\n \n
\n \n
\n
\n );\n\n const editContent = editState.isEditing ? (\n input\n ) : (\n
\n \n Edit link\n \n\n \n\n \n \n \n\n \n\n \n \n \n
\n );\n\n return (\n <>\n \n {input}\n \n\n \n {editContent}\n \n \n );\n}\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/link-toolbar-button.json b/apps/www/public/registry/styles/default/link-toolbar-button.json index 31b3d79c58..33f1fed23e 100644 --- a/apps/www/public/registry/styles/default/link-toolbar-button.json +++ b/apps/www/public/registry/styles/default/link-toolbar-button.json @@ -9,7 +9,7 @@ "files": [ { "name": "link-toolbar-button.tsx", - "content": "import React from 'react';\nimport {\n useLinkToolbarButton,\n useLinkToolbarButtonState,\n} from '@udecode/plate-link';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport function LinkToolbarButton() {\n const state = useLinkToolbarButtonState();\n const { props } = useLinkToolbarButton(state);\n\n return (\n \n \n \n );\n}\n" + "content": "import React from 'react';\nimport { withRef } from '@udecode/cn';\nimport {\n useLinkToolbarButton,\n useLinkToolbarButtonState,\n} from '@udecode/plate-link';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const LinkToolbarButton = withRef((rest, ref) => {\n const state = useLinkToolbarButtonState();\n const { props } = useLinkToolbarButton(state);\n\n return (\n \n \n \n );\n});\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/list-element.json b/apps/www/public/registry/styles/default/list-element.json index 3b80a00b6f..bda4303cfa 100644 --- a/apps/www/public/registry/styles/default/list-element.json +++ b/apps/www/public/registry/styles/default/list-element.json @@ -7,7 +7,7 @@ "files": [ { "name": "list-element.tsx", - "content": "import React from 'react';\nimport { PlateElement, PlateElementProps } from '@udecode/plate-common';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst listVariants = cva('m-0 ps-6', {\n variants: {\n variant: {\n ul: 'list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]',\n ol: 'list-decimal',\n },\n },\n});\n\nexport function ListElement({\n className,\n children,\n variant = 'ul',\n ...props\n}: PlateElementProps & VariantProps) {\n const Element = variant!;\n\n return (\n \n {children}\n \n );\n}\n" + "content": "import React from 'react';\nimport { withRef, withVariants } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common';\nimport { cva } from 'class-variance-authority';\n\nconst listVariants = cva('m-0 ps-6', {\n variants: {\n variant: {\n ul: 'list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]',\n ol: 'list-decimal',\n },\n },\n});\n\nconst ListElementVariants = withVariants(PlateElement, listVariants, [\n 'variant',\n]);\n\nexport const ListElement = withRef(\n ({ className, children, variant = 'ul', ...props }, ref) => {\n const Component = variant!;\n\n return (\n \n {children}\n \n );\n }\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/list-toolbar-button.json b/apps/www/public/registry/styles/default/list-toolbar-button.json index a2b48be6f4..e0a294f88a 100644 --- a/apps/www/public/registry/styles/default/list-toolbar-button.json +++ b/apps/www/public/registry/styles/default/list-toolbar-button.json @@ -9,7 +9,7 @@ "files": [ { "name": "list-toolbar-button.tsx", - "content": "import React from 'react';\nimport {\n ELEMENT_UL,\n useListToolbarButton,\n useListToolbarButtonState,\n} from '@udecode/plate-list';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport function ListToolbarButton({\n nodeType = ELEMENT_UL,\n}: {\n nodeType?: string;\n}) {\n const state = useListToolbarButtonState({ nodeType });\n const { props } = useListToolbarButton(state);\n\n return (\n \n {nodeType === ELEMENT_UL ? : }\n \n );\n}\n" + "content": "import React from 'react';\nimport { withRef } from '@udecode/cn';\nimport {\n ELEMENT_UL,\n useListToolbarButton,\n useListToolbarButtonState,\n} from '@udecode/plate-list';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const ListToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType?: string;\n }\n>(({ nodeType = ELEMENT_UL, ...rest }, ref) => {\n const state = useListToolbarButtonState({ nodeType });\n const { props } = useListToolbarButton(state);\n\n return (\n \n {nodeType === ELEMENT_UL ? : }\n \n );\n});\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/mark-toolbar-button.json b/apps/www/public/registry/styles/default/mark-toolbar-button.json index c447acd742..148931a6cf 100644 --- a/apps/www/public/registry/styles/default/mark-toolbar-button.json +++ b/apps/www/public/registry/styles/default/mark-toolbar-button.json @@ -9,7 +9,7 @@ "files": [ { "name": "mark-toolbar-button.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport {\n useMarkToolbarButton,\n useMarkToolbarButtonState,\n} from '@udecode/plate-common';\n\nimport { ToolbarButton, ToolbarButtonProps } from './toolbar';\n\nexport interface MarkToolbarButtonProps\n extends Pick {\n nodeType: string;\n clear?: string | string[];\n}\n\n/**\n * Toolbar button to toggle the mark of the leaves in selection.\n */\nexport function MarkToolbarButton({\n clear,\n nodeType,\n ...props\n}: MarkToolbarButtonProps) {\n const state = useMarkToolbarButtonState({ clear, nodeType });\n const { props: buttonProps } = useMarkToolbarButton(state);\n\n return ;\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { withRef } from '@udecode/cn';\nimport {\n useMarkToolbarButton,\n useMarkToolbarButtonState,\n} from '@udecode/plate-common';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const MarkToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType: string;\n clear?: string | string[];\n }\n>(({ clear, nodeType, ...rest }, ref) => {\n const state = useMarkToolbarButtonState({ clear, nodeType });\n const { props } = useMarkToolbarButton(state);\n\n return ;\n});\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/media-embed-element.json b/apps/www/public/registry/styles/default/media-embed-element.json index df37b6daf5..8c7431f9eb 100644 --- a/apps/www/public/registry/styles/default/media-embed-element.json +++ b/apps/www/public/registry/styles/default/media-embed-element.json @@ -13,7 +13,7 @@ "files": [ { "name": "media-embed-element.tsx", - "content": "import React from 'react';\nimport {\n PlateElement,\n PlateElementProps,\n Value,\n withHOC,\n} from '@udecode/plate-common';\nimport {\n ELEMENT_MEDIA_EMBED,\n parseTwitterUrl,\n parseVideoUrl,\n TMediaEmbedElement,\n useMediaState,\n} from '@udecode/plate-media';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\nimport LiteYouTubeEmbed from 'react-lite-youtube-embed';\nimport { Tweet } from 'react-tweet';\n\nimport { cn } from '@/lib/utils';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n mediaResizeHandleVariants,\n Resizable,\n ResizeHandle,\n} from './resizable';\n\nconst MediaEmbedElement = withHOC(\n ResizableProvider,\n // eslint-disable-next-line react/display-name\n React.forwardRef<\n React.ElementRef,\n PlateElementProps\n >(({ className, children, ...props }, ref) => {\n const {\n align = 'center',\n focused,\n readOnly,\n selected,\n embed,\n isTweet,\n isVideo,\n isYoutube,\n } = useMediaState({\n urlParsers: [parseTwitterUrl, parseVideoUrl],\n });\n const width = useResizableStore().get.width();\n const provider = embed?.provider;\n\n return (\n \n \n
\n \n \n\n {isVideo ? (\n isYoutube ? (\n _iframe]:absolute [&_>_iframe]:left-0 [&_>_iframe]:top-0 [&_>_iframe]:h-full [&_>_iframe]:w-full',\n '[&_>_.lty-playbtn]:z-[1] [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',\n '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',\n '[&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[\"\"]',\n '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',\n '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',\n '[&.lyt-activated]:cursor-[unset]',\n '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',\n '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:!opacity-0'\n )}\n />\n ) : (\n \n \n \n )\n ) : null}\n\n {isTweet && (\n \n \n \n )}\n\n \n \n\n \n \n \n
\n\n {children}\n \n \n );\n })\n);\nMediaEmbedElement.displayName = 'MediaEmbedElement';\n\nexport { MediaEmbedElement };\n" + "content": "import React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, withHOC } from '@udecode/plate-common';\nimport {\n ELEMENT_MEDIA_EMBED,\n parseTwitterUrl,\n parseVideoUrl,\n useMediaState,\n} from '@udecode/plate-media';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\nimport LiteYouTubeEmbed from 'react-lite-youtube-embed';\nimport { Tweet } from 'react-tweet';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport {\n mediaResizeHandleVariants,\n Resizable,\n ResizeHandle,\n} from './resizable';\n\nexport const MediaEmbedElement = withHOC(\n ResizableProvider,\n withRef(({ className, children, ...props }, ref) => {\n const {\n align = 'center',\n focused,\n readOnly,\n selected,\n embed,\n isTweet,\n isVideo,\n isYoutube,\n } = useMediaState({\n urlParsers: [parseTwitterUrl, parseVideoUrl],\n });\n const width = useResizableStore().get.width();\n const provider = embed?.provider;\n\n return (\n \n \n
\n \n \n\n {isVideo ? (\n isYoutube ? (\n _iframe]:absolute [&_>_iframe]:left-0 [&_>_iframe]:top-0 [&_>_iframe]:h-full [&_>_iframe]:w-full',\n '[&_>_.lty-playbtn]:z-[1] [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',\n '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',\n '[&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[\"\"]',\n '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',\n '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',\n '[&.lyt-activated]:cursor-[unset]',\n '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',\n '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:!opacity-0'\n )}\n />\n ) : (\n \n \n \n )\n ) : null}\n\n {isTweet && (\n \n \n \n )}\n\n \n \n\n \n \n \n
\n\n {children}\n \n \n );\n })\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/media-toolbar-button.json b/apps/www/public/registry/styles/default/media-toolbar-button.json index ab6d359cff..1675a748db 100644 --- a/apps/www/public/registry/styles/default/media-toolbar-button.json +++ b/apps/www/public/registry/styles/default/media-toolbar-button.json @@ -9,7 +9,7 @@ "files": [ { "name": "media-toolbar-button.tsx", - "content": "import React from 'react';\nimport {\n ELEMENT_IMAGE,\n ELEMENT_MEDIA_EMBED,\n useMediaToolbarButton,\n} from '@udecode/plate-media';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport function MediaToolbarButton({\n nodeType,\n}: {\n nodeType?: typeof ELEMENT_IMAGE | typeof ELEMENT_MEDIA_EMBED;\n}) {\n const { props } = useMediaToolbarButton({ nodeType });\n\n return (\n \n \n \n );\n}\n" + "content": "import React from 'react';\nimport { withRef } from '@udecode/cn';\nimport {\n ELEMENT_IMAGE,\n ELEMENT_MEDIA_EMBED,\n useMediaToolbarButton,\n} from '@udecode/plate-media';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const MediaToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType?: typeof ELEMENT_IMAGE | typeof ELEMENT_MEDIA_EMBED;\n }\n>(({ nodeType, ...rest }, ref) => {\n const { props } = useMediaToolbarButton({ nodeType });\n\n return (\n \n \n \n );\n});\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/mention-combobox.json b/apps/www/public/registry/styles/default/mention-combobox.json index 8b5d014c3c..6e1ba83579 100644 --- a/apps/www/public/registry/styles/default/mention-combobox.json +++ b/apps/www/public/registry/styles/default/mention-combobox.json @@ -10,7 +10,7 @@ "files": [ { "name": "mention-combobox.tsx", - "content": "import React from 'react';\nimport { ComboboxProps, Data, NoData } from '@udecode/plate-combobox';\nimport { getPluginOptions, useEditorRef } from '@udecode/plate-common';\nimport {\n ELEMENT_MENTION,\n getMentionOnSelectItem,\n MentionPlugin,\n} from '@udecode/plate-mention';\n\nimport { Combobox } from './combobox';\n\nexport interface MentionComboboxProps\n extends Partial> {\n pluginKey?: string;\n}\n\nexport function MentionCombobox({\n pluginKey = ELEMENT_MENTION,\n id = pluginKey,\n ...props\n}: MentionComboboxProps) {\n const editor = useEditorRef();\n\n const { trigger } = getPluginOptions(editor, pluginKey);\n\n return (\n \n );\n}\n" + "content": "import React from 'react';\nimport { ComboboxProps } from '@udecode/plate-combobox';\nimport { getPluginOptions, useEditorRef } from '@udecode/plate-common';\nimport {\n ELEMENT_MENTION,\n getMentionOnSelectItem,\n MentionPlugin,\n} from '@udecode/plate-mention';\n\nimport { Combobox } from './combobox';\n\nexport function MentionCombobox({\n pluginKey = ELEMENT_MENTION,\n id = pluginKey,\n ...props\n}: Partial & {\n pluginKey?: string;\n}) {\n const editor = useEditorRef();\n\n const { trigger } = getPluginOptions(editor, pluginKey);\n\n return (\n \n );\n}\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/mention-element.json b/apps/www/public/registry/styles/default/mention-element.json index 321eb0b6fe..dd182f9e71 100644 --- a/apps/www/public/registry/styles/default/mention-element.json +++ b/apps/www/public/registry/styles/default/mention-element.json @@ -7,7 +7,7 @@ "files": [ { "name": "mention-element.tsx", - "content": "import React, { forwardRef } from 'react';\nimport {\n getHandler,\n PlateElement,\n PlateElementProps,\n Value,\n} from '@udecode/plate-common';\nimport { TMentionElement } from '@udecode/plate-mention';\nimport { useFocused, useSelected } from 'slate-react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface MentionElementProps\n extends PlateElementProps {\n /**\n * Prefix rendered before mention\n */\n prefix?: string;\n onClick?: (mentionNode: any) => void;\n renderLabel?: (mentionable: TMentionElement) => string;\n}\n\nconst MentionElement = forwardRef<\n React.ElementRef,\n MentionElementProps\n>(({ prefix, renderLabel, className, onClick, ...props }, ref) => {\n const { children, element } = props;\n\n const selected = useSelected();\n const focused = useFocused();\n\n return (\n \n {prefix}\n {renderLabel ? renderLabel(element) : element.value}\n {children}\n \n );\n});\n\nMentionElement.displayName = 'MentionElement';\n\nexport { MentionElement };\n" + "content": "import React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { getHandler, PlateElement, useElement } from '@udecode/plate-common';\nimport { TMentionElement } from '@udecode/plate-mention';\nimport { useFocused, useSelected } from 'slate-react';\n\nexport const MentionElement = withRef<\n typeof PlateElement,\n {\n prefix?: string;\n onClick?: (mentionNode: any) => void;\n renderLabel?: (mentionable: TMentionElement) => string;\n }\n>(({ children, prefix, renderLabel, className, onClick, ...props }, ref) => {\n const element = useElement();\n const selected = useSelected();\n const focused = useFocused();\n\n return (\n \n {prefix}\n {renderLabel ? renderLabel(element) : element.value}\n {children}\n \n );\n});\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/mention-input-element.json b/apps/www/public/registry/styles/default/mention-input-element.json index d353402a36..8747c8f0b9 100644 --- a/apps/www/public/registry/styles/default/mention-input-element.json +++ b/apps/www/public/registry/styles/default/mention-input-element.json @@ -7,7 +7,7 @@ "files": [ { "name": "mention-input-element.tsx", - "content": "import React from 'react';\nimport {\n getHandler,\n PlateElement,\n PlateElementProps,\n Value,\n} from '@udecode/plate-common';\nimport { TMentionElement } from '@udecode/plate-mention';\nimport { useFocused, useSelected } from 'slate-react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface MentionInputElementProps\n extends PlateElementProps {\n onClick?: (mentionNode: any) => void;\n}\n\nconst MentionInputElement = React.forwardRef<\n React.ElementRef,\n MentionInputElementProps\n>(({ className, onClick, ...props }, ref) => {\n const { children, element } = props;\n\n const selected = useSelected();\n const focused = useFocused();\n\n return (\n \n {children}\n \n );\n});\nMentionInputElement.displayName = 'MentionInputElement';\n\nexport { MentionInputElement };\n" + "content": "import React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { getHandler, PlateElement } from '@udecode/plate-common';\nimport { useFocused, useSelected } from 'slate-react';\n\nexport const MentionInputElement = withRef<\n typeof PlateElement,\n {\n onClick?: (mentionNode: any) => void;\n }\n>(({ className, onClick, ...props }, ref) => {\n const { children, element } = props;\n\n const selected = useSelected();\n const focused = useFocused();\n\n return (\n \n {children}\n \n );\n});\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/outdent-toolbar-button.json b/apps/www/public/registry/styles/default/outdent-toolbar-button.json index e9e3ef2989..50a00c113e 100644 --- a/apps/www/public/registry/styles/default/outdent-toolbar-button.json +++ b/apps/www/public/registry/styles/default/outdent-toolbar-button.json @@ -9,7 +9,7 @@ "files": [ { "name": "outdent-toolbar-button.tsx", - "content": "import React from 'react';\nimport { useOutdentButton } from '@udecode/plate-indent';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport function OutdentToolbarButton() {\n const { props } = useOutdentButton();\n\n return (\n \n \n \n );\n}\n" + "content": "import React from 'react';\nimport { withRef } from '@udecode/cn';\nimport { useOutdentButton } from '@udecode/plate-indent';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const OutdentToolbarButton = withRef(\n (rest, ref) => {\n const { props } = useOutdentButton();\n\n return (\n \n \n \n );\n }\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/paragraph-element.json b/apps/www/public/registry/styles/default/paragraph-element.json index 215f3e5226..14a50af74d 100644 --- a/apps/www/public/registry/styles/default/paragraph-element.json +++ b/apps/www/public/registry/styles/default/paragraph-element.json @@ -7,7 +7,7 @@ "files": [ { "name": "paragraph-element.tsx", - "content": "import React from 'react';\nimport { PlateElement, PlateElementProps } from '@udecode/plate-common';\n\nimport { cn } from '@/lib/utils';\n\nconst ParagraphElement = React.forwardRef<\n React.ElementRef,\n PlateElementProps\n>(({ className, children, ...props }: PlateElementProps, ref) => {\n return (\n \n {children}\n \n );\n});\nParagraphElement.displayName = 'ParagraphElement';\n\nexport { ParagraphElement };\n" + "content": "import { withCn } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common';\n\nexport const ParagraphElement = withCn(PlateElement, 'm-0 px-0 py-1');\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/placeholder.json b/apps/www/public/registry/styles/default/placeholder.json index ced9d1de34..36e705fad8 100644 --- a/apps/www/public/registry/styles/default/placeholder.json +++ b/apps/www/public/registry/styles/default/placeholder.json @@ -9,7 +9,7 @@ "files": [ { "name": "placeholder.tsx", - "content": "import React from 'react';\nimport {\n createNodeHOC,\n createNodesHOC,\n PlaceholderProps,\n usePlaceholderState,\n} from '@udecode/plate-common';\nimport { ELEMENT_H1 } from '@udecode/plate-heading';\nimport { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';\n\nimport { cn } from '@/lib/utils';\n\nexport const Placeholder = (props: PlaceholderProps) => {\n const { children, placeholder, nodeProps } = props;\n\n const { enabled } = usePlaceholderState(props);\n\n return React.Children.map(children, (child) => {\n return React.cloneElement(child, {\n className: child.props.className,\n nodeProps: {\n ...nodeProps,\n className: cn(\n enabled &&\n 'before:absolute before:cursor-text before:opacity-30 before:content-[attr(placeholder)]'\n ),\n placeholder,\n },\n });\n });\n};\n\nexport const withPlaceholder = createNodeHOC(Placeholder);\nexport const withPlaceholdersPrimitive = createNodesHOC(Placeholder);\n\nexport const withPlaceholders = (components: any) =>\n withPlaceholdersPrimitive(components, [\n {\n key: ELEMENT_PARAGRAPH,\n placeholder: 'Type a paragraph',\n hideOnBlur: true,\n query: {\n maxLevel: 1,\n },\n },\n {\n key: ELEMENT_H1,\n placeholder: 'Untitled',\n hideOnBlur: false,\n },\n ]);\n" + "content": "import React from 'react';\nimport { cn } from '@udecode/cn';\nimport {\n createNodeHOC,\n createNodesHOC,\n PlaceholderProps,\n usePlaceholderState,\n} from '@udecode/plate-common';\nimport { ELEMENT_H1 } from '@udecode/plate-heading';\nimport { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';\n\nexport const Placeholder = (props: PlaceholderProps) => {\n const { children, placeholder, nodeProps } = props;\n\n const { enabled } = usePlaceholderState(props);\n\n return React.Children.map(children, (child) => {\n return React.cloneElement(child, {\n className: child.props.className,\n nodeProps: {\n ...nodeProps,\n className: cn(\n enabled &&\n 'before:absolute before:cursor-text before:opacity-30 before:content-[attr(placeholder)]'\n ),\n placeholder,\n },\n });\n });\n};\n\nexport const withPlaceholder = createNodeHOC(Placeholder);\nexport const withPlaceholdersPrimitive = createNodesHOC(Placeholder);\n\nexport const withPlaceholders = (components: any) =>\n withPlaceholdersPrimitive(components, [\n {\n key: ELEMENT_PARAGRAPH,\n placeholder: 'Type a paragraph',\n hideOnBlur: true,\n query: {\n maxLevel: 1,\n },\n },\n {\n key: ELEMENT_H1,\n placeholder: 'Untitled',\n hideOnBlur: false,\n },\n ]);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/popover.json b/apps/www/public/registry/styles/default/popover.json index 1015a1aeaf..b3f27339af 100644 --- a/apps/www/public/registry/styles/default/popover.json +++ b/apps/www/public/registry/styles/default/popover.json @@ -7,7 +7,7 @@ "files": [ { "name": "popover.tsx", - "content": "'use client';\n\nimport * as React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\nexport const popoverVariants = cva(\n 'w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden'\n);\n\nconst PopoverContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, style, align = 'center', sideOffset = 4, ...props }, ref) => (\n \n \n \n));\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n\nexport { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };\n" + "content": "'use client';\n\nimport * as React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nexport const Popover = PopoverPrimitive.Root;\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\n\nexport const popoverVariants = cva(\n 'w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden'\n);\n\nexport const PopoverContent = withRef(\n ({ className, style, align = 'center', sideOffset = 4, ...props }, ref) => (\n \n \n \n )\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/resizable.json b/apps/www/public/registry/styles/default/resizable.json index 5018bcb8a4..c14b93d813 100644 --- a/apps/www/public/registry/styles/default/resizable.json +++ b/apps/www/public/registry/styles/default/resizable.json @@ -7,7 +7,7 @@ "files": [ { "name": "resizable.tsx", - "content": "'use client';\n\nimport React, { ComponentProps } from 'react';\nimport {\n Resizable as ResizablePrimitive,\n ResizeHandle as ResizeHandlePrimitive,\n} from '@udecode/plate-resizable';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nexport const mediaResizeHandleVariants = cva(\n cn(\n 'top-0 flex w-6 select-none flex-col justify-center',\n \"after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100\"\n ),\n {\n variants: {\n direction: {\n left: '-left-3 -ml-3 pl-3',\n right: '-right-3 -mr-3 items-end pr-3',\n },\n },\n }\n);\n\nconst resizeHandleVariants = cva(cn('absolute z-40'), {\n variants: {\n direction: {\n left: 'h-full cursor-col-resize',\n right: 'h-full cursor-col-resize',\n top: 'w-full cursor-row-resize',\n bottom: 'w-full cursor-row-resize',\n },\n },\n});\n\nconst ResizeHandle = React.forwardRef<\n React.ElementRef,\n ComponentProps &\n Omit, 'direction'>\n>(({ className, ...props }, ref) => (\n \n));\nResizeHandle.displayName = 'ResizeHandle';\n\nconst resizableVariants = cva('', {\n variants: {\n align: {\n left: 'mr-auto',\n center: 'mx-auto',\n right: 'ml-auto',\n },\n },\n});\n\nconst Resizable = React.forwardRef<\n React.ElementRef,\n ComponentProps &\n VariantProps\n>(({ className, align, ...props }, ref) => (\n \n));\nResizable.displayName = 'Resizable';\n\nexport { Resizable, ResizeHandle };\n" + "content": "'use client';\n\nimport React from 'react';\nimport { cn, withRef, withVariants } from '@udecode/cn';\nimport {\n Resizable as ResizablePrimitive,\n ResizeHandle as ResizeHandlePrimitive,\n} from '@udecode/plate-resizable';\nimport { cva } from 'class-variance-authority';\n\nexport const mediaResizeHandleVariants = cva(\n cn(\n 'top-0 flex w-6 select-none flex-col justify-center',\n \"after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100\"\n ),\n {\n variants: {\n direction: {\n left: '-left-3 -ml-3 pl-3',\n right: '-right-3 -mr-3 items-end pr-3',\n },\n },\n }\n);\n\nconst resizeHandleVariants = cva(cn('absolute z-40'), {\n variants: {\n direction: {\n left: 'h-full cursor-col-resize',\n right: 'h-full cursor-col-resize',\n top: 'w-full cursor-row-resize',\n bottom: 'w-full cursor-row-resize',\n },\n },\n});\n\nconst ResizeHandleVariants = withVariants(\n ResizeHandlePrimitive,\n resizeHandleVariants,\n ['direction']\n);\n\nexport const ResizeHandle = withRef(\n (props, ref) => (\n \n )\n);\n\nconst resizableVariants = cva('', {\n variants: {\n align: {\n left: 'mr-auto',\n center: 'mx-auto',\n right: 'ml-auto',\n },\n },\n});\n\nexport const Resizable = withVariants(ResizablePrimitive, resizableVariants, [\n 'align',\n]);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/search-highlight-leaf.json b/apps/www/public/registry/styles/default/search-highlight-leaf.json index b4493ac283..4754b4ae47 100644 --- a/apps/www/public/registry/styles/default/search-highlight-leaf.json +++ b/apps/www/public/registry/styles/default/search-highlight-leaf.json @@ -7,7 +7,7 @@ "files": [ { "name": "search-highlight-leaf.tsx", - "content": "import React from 'react';\nimport { PlateLeaf, PlateLeafProps } from '@udecode/plate-common';\n\nimport { cn } from '@/lib/utils';\n\nexport function SearchHighlightLeaf({ className, ...props }: PlateLeafProps) {\n return ;\n}\n" + "content": "import { withCn } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common';\n\nexport const SearchHighlightLeaf = withCn(PlateLeaf, 'bg-yellow-100');\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/separator.json b/apps/www/public/registry/styles/default/separator.json index c10fb639bf..38faf763e0 100644 --- a/apps/www/public/registry/styles/default/separator.json +++ b/apps/www/public/registry/styles/default/separator.json @@ -7,7 +7,7 @@ "files": [ { "name": "separator.tsx", - "content": "'use client';\n\nimport * as React from 'react';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\n\nimport { cn } from '@/lib/utils';\n\nconst Separator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(\n (\n { className, orientation = 'horizontal', decorative = true, ...props },\n ref\n ) => (\n \n )\n);\nSeparator.displayName = SeparatorPrimitive.Root.displayName;\n\nexport { Separator };\n" + "content": "'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport { withProps, withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nconst separatorVariants = cva('shrink-0 bg-border', {\n variants: {\n orientation: {\n horizontal: 'h-[1px] w-full',\n vertical: 'h-full w-[1px]',\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n },\n});\n\nexport const Separator = withVariants(\n withProps(SeparatorPrimitive.Root, {\n orientation: 'horizontal',\n decorative: true,\n }),\n separatorVariants\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/table-cell-element.json b/apps/www/public/registry/styles/default/table-cell-element.json index 9175604cb5..5bd2b2f034 100644 --- a/apps/www/public/registry/styles/default/table-cell-element.json +++ b/apps/www/public/registry/styles/default/table-cell-element.json @@ -9,7 +9,7 @@ "files": [ { "name": "table-cell-element.tsx", - "content": "import React from 'react';\nimport { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';\nimport {\n TTableCellElement,\n useTableCellElement,\n useTableCellElementResizable,\n useTableCellElementResizableState,\n useTableCellElementState,\n} from '@udecode/plate-table';\n\nimport { cn } from '@/lib/utils';\n\nimport { ResizeHandle } from './resizable';\n\nexport interface TableCellElementProps\n extends PlateElementProps {\n hideBorder?: boolean;\n isHeader?: boolean;\n}\n\nconst TableCellElement = React.forwardRef<\n React.ElementRef,\n TableCellElementProps\n>(({ children, className, style, hideBorder, isHeader, ...props }, ref) => {\n const { element } = props;\n\n const {\n colIndex,\n rowIndex,\n readOnly,\n selected,\n hovered,\n hoveredLeft,\n rowSize,\n borders,\n isSelectingCell,\n colSpan,\n } = useTableCellElementState();\n const { props: cellProps } = useTableCellElement({ element: props.element });\n const resizableState = useTableCellElementResizableState({\n colIndex,\n rowIndex,\n colSpan,\n });\n\n const { rightProps, bottomProps, leftProps, hiddenLeft } =\n useTableCellElementResizable(resizableState);\n\n const Cell = isHeader ? 'th' : 'td';\n\n return (\n _*]:m-0',\n 'before:h-full before:w-full',\n selected && 'before:z-10 before:bg-muted',\n \"before:absolute before:box-border before:select-none before:content-['']\",\n borders &&\n cn(\n borders.bottom?.size &&\n `before:border-b before:border-b-border`,\n borders.right?.size && `before:border-r before:border-r-border`,\n borders.left?.size && `before:border-l before:border-l-border`,\n borders.top?.size && `before:border-t before:border-t-border`\n )\n ),\n className\n )}\n {...cellProps}\n {...props}\n style={\n {\n '--cellBackground': element.background,\n ...style,\n } as React.CSSProperties\n }\n >\n \n \n {children}\n \n\n {!isSelectingCell && (\n \n {!readOnly && (\n <>\n \n \n {!hiddenLeft && (\n \n )}\n\n {hovered && (\n \n )}\n {hoveredLeft && (\n \n )}\n \n )}\n \n )}\n \n \n );\n});\nTableCellElement.displayName = 'TableCellElement';\n\nconst TableCellHeaderElement = React.forwardRef<\n React.ElementRef,\n TableCellElementProps\n>((props, ref) => {\n return ;\n});\nTableCellHeaderElement.displayName = 'TableCellHeaderElement';\n\nexport { TableCellElement, TableCellHeaderElement };\n" + "content": "import React from 'react';\nimport { cn, withProps, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common';\nimport {\n useTableCellElement,\n useTableCellElementResizable,\n useTableCellElementResizableState,\n useTableCellElementState,\n} from '@udecode/plate-table';\n\nimport { ResizeHandle } from './resizable';\n\nexport const TableCellElement = withRef<\n typeof PlateElement,\n {\n hideBorder?: boolean;\n isHeader?: boolean;\n }\n>(({ children, className, style, hideBorder, isHeader, ...props }, ref) => {\n const { element } = props;\n\n const {\n colIndex,\n rowIndex,\n readOnly,\n selected,\n hovered,\n hoveredLeft,\n rowSize,\n borders,\n isSelectingCell,\n colSpan,\n } = useTableCellElementState();\n const { props: cellProps } = useTableCellElement({ element: props.element });\n const resizableState = useTableCellElementResizableState({\n colIndex,\n rowIndex,\n colSpan,\n });\n\n const { rightProps, bottomProps, leftProps, hiddenLeft } =\n useTableCellElementResizable(resizableState);\n\n const Cell = isHeader ? 'th' : 'td';\n\n return (\n _*]:m-0',\n 'before:h-full before:w-full',\n selected && 'before:z-10 before:bg-muted',\n \"before:absolute before:box-border before:select-none before:content-['']\",\n borders &&\n cn(\n borders.bottom?.size &&\n `before:border-b before:border-b-border`,\n borders.right?.size && `before:border-r before:border-r-border`,\n borders.left?.size && `before:border-l before:border-l-border`,\n borders.top?.size && `before:border-t before:border-t-border`\n )\n ),\n className\n )}\n {...cellProps}\n {...props}\n style={\n {\n '--cellBackground': element.background,\n ...style,\n } as React.CSSProperties\n }\n >\n \n \n {children}\n \n\n {!isSelectingCell && (\n \n {!readOnly && (\n <>\n \n \n {!hiddenLeft && (\n \n )}\n\n {hovered && (\n \n )}\n {hoveredLeft && (\n \n )}\n \n )}\n \n )}\n \n \n );\n});\nTableCellElement.displayName = 'TableCellElement';\n\nexport const TableCellHeaderElement = withProps(TableCellElement, {\n isHeader: true,\n});\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/table-element.json b/apps/www/public/registry/styles/default/table-element.json index 13b6a7ebd6..af378ef7aa 100644 --- a/apps/www/public/registry/styles/default/table-element.json +++ b/apps/www/public/registry/styles/default/table-element.json @@ -9,7 +9,7 @@ "files": [ { "name": "table-element.tsx", - "content": "import React, { forwardRef } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { PopoverAnchor, PopoverContentProps } from '@radix-ui/react-popover';\nimport {\n isSelectionExpanded,\n PlateElement,\n PlateElementProps,\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 { cn } from '@/lib/utils';\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\nconst TableBordersDropdownMenuContent = forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\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 \n \n \n
Bottom Border
\n \n \n \n
Top Border
\n \n \n \n
Left Border
\n \n \n \n
Right Border
\n \n\n \n\n \n \n
No Border
\n \n \n \n
Outside Borders
\n \n \n );\n});\nTableBordersDropdownMenuContent.displayName = 'TableBordersDropdownMenuContent';\n\nconst TableFloatingToolbar = React.forwardRef<\n React.ElementRef,\n PopoverContentProps\n>(({ children, ...props }, ref) => {\n const element = useElement();\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 mergeTableCells(editor)}\n >\n \n Merge\n \n );\n\n const unmergeButton = canUnmerge && (\n unmergeTableCells(editor)}\n >\n \n Unmerge\n \n );\n\n const bordersContent = collapsed && (\n <>\n \n \n \n \n\n \n \n \n \n\n \n \n );\n\n return (\n \n {children}\n {(canMerge || canUnmerge || collapsed) && (\n e.preventDefault()}\n {...props}\n >\n {unmergeButton}\n {mergeContent}\n {bordersContent}\n \n )}\n \n );\n});\nTableFloatingToolbar.displayName = 'TableFloatingToolbar';\n\nconst TableElement = React.forwardRef<\n React.ElementRef,\n PlateElementProps\n>(({ className, children, ...props }, ref) => {\n const { colSizes, isSelectingCell, minColumnWidth, marginLeft } =\n useTableElementState();\n const { props: tableProps, colGroupProps } = useTableElement();\n\n return (\n \n
\n \n \n \n {colSizes.map((width, index) => (\n \n ))}\n \n\n {children}\n
\n \n
\n \n );\n});\nTableElement.displayName = 'TableElement';\n\nexport { TableElement, TableFloatingToolbar, TableBordersDropdownMenuContent };\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} 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 \n \n \n
Bottom Border
\n \n \n \n
Top Border
\n \n \n \n
Left Border
\n \n \n \n
Right Border
\n \n\n \n\n \n \n
No Border
\n \n \n \n
Outside Borders
\n \n \n );\n});\n\nexport const TableFloatingToolbar = withRef(\n ({ children, ...props }, ref) => {\n const element = useElement();\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 mergeTableCells(editor)}\n >\n \n Merge\n \n );\n\n const unmergeButton = canUnmerge && (\n unmergeTableCells(editor)}\n >\n \n Unmerge\n \n );\n\n const bordersContent = collapsed && (\n <>\n \n \n \n \n\n \n \n \n \n\n \n \n );\n\n return (\n \n {children}\n {(canMerge || canUnmerge || collapsed) && (\n e.preventDefault()}\n {...props}\n >\n {unmergeButton}\n {mergeContent}\n {bordersContent}\n \n )}\n \n );\n }\n);\n\nexport const TableElement = withRef(\n ({ className, children, ...props }, ref) => {\n const { colSizes, isSelectingCell, minColumnWidth, marginLeft } =\n useTableElementState();\n const { props: tableProps, colGroupProps } = useTableElement();\n\n return (\n \n
\n \n \n \n {colSizes.map((width, index) => (\n \n ))}\n \n\n {children}\n
\n \n
\n \n );\n }\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/table-row-element.json b/apps/www/public/registry/styles/default/table-row-element.json index 5895feaf41..8eb846425c 100644 --- a/apps/www/public/registry/styles/default/table-row-element.json +++ b/apps/www/public/registry/styles/default/table-row-element.json @@ -7,7 +7,7 @@ "files": [ { "name": "table-row-element.tsx", - "content": "import React from 'react';\nimport { PlateElement, PlateElementProps } from '@udecode/plate-common';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PlateTableRowElementProps extends PlateElementProps {\n hideBorder?: boolean;\n}\n\nconst TableRowElement = React.forwardRef<\n React.ElementRef,\n PlateTableRowElementProps\n>(({ hideBorder, children, ...props }, ref) => {\n return (\n \n {children}\n \n );\n});\nTableRowElement.displayName = 'TableRowElement';\n\nexport { TableRowElement };\n" + "content": "import React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common';\n\nexport const TableRowElement = withRef<\n typeof PlateElement,\n {\n hideBorder?: boolean;\n }\n>(({ hideBorder, children, ...props }, ref) => {\n return (\n \n {children}\n \n );\n});\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/todo-list-element.json b/apps/www/public/registry/styles/default/todo-list-element.json index 8a291a4973..ae37207ab1 100644 --- a/apps/www/public/registry/styles/default/todo-list-element.json +++ b/apps/www/public/registry/styles/default/todo-list-element.json @@ -9,7 +9,7 @@ "files": [ { "name": "todo-list-element.tsx", - "content": "import React from 'react';\nimport { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';\nimport {\n TTodoListItemElement,\n useTodoListElement,\n useTodoListElementState,\n} from '@udecode/plate-list';\n\nimport { cn } from '@/lib/utils';\n\nimport { Checkbox } from './checkbox';\n\nexport type TodoListElementProps = PlateElementProps<\n Value,\n TTodoListItemElement\n>;\n\nexport function TodoListElement({\n className,\n children,\n ...props\n}: TodoListElementProps) {\n const { element } = props;\n const state = useTodoListElementState({ element });\n const { checkboxProps } = useTodoListElement(state);\n\n return (\n \n \n \n \n \n {children}\n \n \n );\n}\n" + "content": "import React from 'react';\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common';\nimport {\n useTodoListElement,\n useTodoListElementState,\n} from '@udecode/plate-list';\n\nimport { Checkbox } from './checkbox';\n\nexport const TodoListElement = withRef(\n ({ className, children, ...props }, ref) => {\n const { element } = props;\n const state = useTodoListElementState({ element });\n const { checkboxProps } = useTodoListElement(state);\n\n return (\n \n \n \n \n \n {children}\n \n \n );\n }\n);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/toggle.json b/apps/www/public/registry/styles/default/toggle.json index c2c2acfe5e..251cd238ca 100644 --- a/apps/www/public/registry/styles/default/toggle.json +++ b/apps/www/public/registry/styles/default/toggle.json @@ -7,7 +7,7 @@ "files": [ { "name": "toggle.tsx", - "content": "'use client';\n\nimport * as React from 'react';\nimport * as TogglePrimitive from '@radix-ui/react-toggle';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst toggleVariants = cva(\n cn(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n '[&_svg:not([data-icon])]:h-5 [&_svg:not([data-icon])]:w-5'\n ),\n {\n variants: {\n variant: {\n default:\n 'bg-transparent hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n outline:\n 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n floating: 'rounded-full bg-primary text-primary-foreground',\n },\n size: {\n default: 'h-10 px-3',\n sm: 'h-9 px-2',\n lg: 'h-11 px-5',\n circle: 'p-3',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nexport type ToggleProps = React.ComponentPropsWithoutRef<\n typeof TogglePrimitive.Root\n> &\n VariantProps;\n\nconst Toggle = React.forwardRef<\n React.ElementRef,\n ToggleProps\n>(({ className, variant, size, ...props }, ref) => (\n \n));\n\nToggle.displayName = TogglePrimitive.Root.displayName;\n\nexport { Toggle, toggleVariants };\n" + "content": "'use client';\n\nimport * as TogglePrimitive from '@radix-ui/react-toggle';\nimport { cn, withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nexport const toggleVariants = cva(\n cn(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n '[&_svg:not([data-icon])]:h-5 [&_svg:not([data-icon])]:w-5'\n ),\n {\n variants: {\n variant: {\n default:\n 'bg-transparent hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n outline:\n 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n floating: 'rounded-full bg-primary text-primary-foreground',\n },\n size: {\n default: 'h-10 px-3',\n sm: 'h-9 px-2',\n lg: 'h-11 px-5',\n circle: 'p-3',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nexport const Toggle = withVariants(TogglePrimitive.Root, toggleVariants, [\n 'size',\n 'variant',\n]);\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/toolbar.json b/apps/www/public/registry/styles/default/toolbar.json index b117252625..0395e35d0e 100644 --- a/apps/www/public/registry/styles/default/toolbar.json +++ b/apps/www/public/registry/styles/default/toolbar.json @@ -11,7 +11,7 @@ "files": [ { "name": "toolbar.tsx", - "content": "'use client';\n\nimport * as React from 'react';\nimport { ReactNode } from 'react';\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Icons } from '@/components/icons';\n\nimport { Separator } from './separator';\nimport { ToggleProps, toggleVariants } from './toggle';\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipTrigger,\n} from './tooltip';\n\nconst toolbarVariants = cva(\n 'relative flex select-none items-stretch gap-1 bg-background'\n);\n\nexport const linkVariants = cva('font-medium underline underline-offset-4');\n\nconst ToolbarToggleGroup = ToolbarPrimitive.ToggleGroup;\n\nexport interface ToolbarProps\n extends React.ComponentPropsWithoutRef {}\n\nconst Toolbar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef &\n VariantProps\n>(({ className, ...props }, ref) => (\n \n));\nToolbar.displayName = ToolbarPrimitive.Root.displayName;\n\nconst ToolbarLink = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef &\n VariantProps\n>(({ className, ...props }, ref) => (\n \n));\nToolbarLink.displayName = ToolbarPrimitive.Link.displayName;\n\nconst ToolbarSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nToolbarSeparator.displayName = ToolbarPrimitive.Separator.displayName;\n\nexport interface ToolbarButtonProps\n extends React.ComponentPropsWithoutRef,\n VariantProps,\n Omit {\n buttonType?: 'button' | 'toggle';\n pressed?: boolean;\n tooltip?: ReactNode;\n isDropdown?: boolean;\n}\n\nconst ToolbarButton = React.forwardRef<\n React.ElementRef,\n ToolbarButtonProps\n>(\n (\n {\n className,\n variant,\n size = 'sm',\n isDropdown,\n children,\n pressed,\n value,\n tooltip,\n ...props\n },\n ref\n ) => {\n const [isLoaded, setIsLoaded] = React.useState(false);\n\n React.useEffect(() => {\n setIsLoaded(true);\n }, []);\n\n const content =\n typeof pressed === 'boolean' ? (\n \n \n
{children}
\n
\n {isDropdown && (\n \n )}\n
\n \n \n ) : (\n \n {children}\n \n );\n\n return isLoaded && tooltip ? (\n \n {content}\n\n \n {tooltip}\n \n \n ) : (\n <>{content}\n );\n }\n);\nToolbarButton.displayName = ToolbarPrimitive.Button.displayName;\n\nconst ToolbarToggleItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef &\n VariantProps\n>(({ className, variant, size, ...props }, ref) => (\n \n));\nToolbarToggleItem.displayName = ToolbarPrimitive.ToggleItem.displayName;\n\nconst ToolbarGroup = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & { noSeparator?: boolean }\n>(({ noSeparator, className, children }, ref) => {\n const childArr = React.Children.map(children, (c) => c);\n if (!childArr || childArr.length === 0) return null;\n\n return (\n
\n {!noSeparator && (\n
\n \n
\n )}\n\n
{children}
\n
\n );\n});\nToolbarGroup.displayName = 'ToolbarGroup';\n\nexport {\n Toolbar,\n ToolbarLink,\n ToolbarToggleGroup,\n ToolbarSeparator,\n ToolbarToggleItem,\n ToolbarButton,\n ToolbarGroup,\n};\n" + "content": "'use client';\n\nimport * as React from 'react';\nimport { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\n\nimport { Icons } from '@/components/icons';\n\nimport { Separator } from './separator';\nimport { Toggle, toggleVariants } from './toggle';\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipTrigger,\n} from './tooltip';\n\nexport const Toolbar = withCn(\n ToolbarPrimitive.Root,\n 'relative flex select-none items-stretch gap-1 bg-background'\n);\n\nexport const ToolbarToggleGroup = ToolbarPrimitive.ToggleGroup;\n\nexport const ToolbarLink = withCn(\n ToolbarPrimitive.Link,\n 'font-medium underline underline-offset-4'\n);\n\nexport const ToolbarSeparator = withCn(\n ToolbarPrimitive.Separator,\n 'my-1 w-[1px] shrink-0 bg-border'\n);\n\nexport const ToolbarButton = withRef<\n typeof ToolbarPrimitive.Button,\n Omit, 'type'> & {\n buttonType?: 'button' | 'toggle';\n pressed?: boolean;\n tooltip?: ReactNode;\n isDropdown?: boolean;\n }\n>(\n (\n {\n className,\n variant,\n size = 'sm',\n isDropdown,\n children,\n pressed,\n value,\n tooltip,\n ...props\n },\n ref\n ) => {\n const [isLoaded, setIsLoaded] = React.useState(false);\n\n React.useEffect(() => {\n setIsLoaded(true);\n }, []);\n\n const content =\n typeof pressed === 'boolean' ? (\n \n \n
{children}
\n
\n {isDropdown && (\n \n )}\n
\n \n \n ) : (\n \n {children}\n \n );\n\n return isLoaded && tooltip ? (\n \n {content}\n\n \n {tooltip}\n \n \n ) : (\n <>{content}\n );\n }\n);\n\nexport const ToolbarToggleItem = withVariants(\n ToolbarPrimitive.ToggleItem,\n toggleVariants,\n ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<\n 'div',\n {\n noSeparator?: boolean;\n }\n>(({ className, children, noSeparator }, ref) => {\n const childArr = React.Children.map(children, (c) => c);\n if (!childArr || childArr.length === 0) return null;\n\n return (\n
\n {!noSeparator && (\n
\n \n
\n )}\n\n
{children}
\n
\n );\n});\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/tooltip.json b/apps/www/public/registry/styles/default/tooltip.json index ab0faac642..b0aae82b2b 100644 --- a/apps/www/public/registry/styles/default/tooltip.json +++ b/apps/www/public/registry/styles/default/tooltip.json @@ -7,7 +7,7 @@ "files": [ { "name": "tooltip.tsx", - "content": "'use client';\n\nimport * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\n\nimport { cn } from '@/lib/utils';\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\nconst Tooltip = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipPortal = TooltipPrimitive.Portal;\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, sideOffset = 4, ...props }, ref) => (\n \n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nexport {\n Tooltip,\n TooltipTrigger,\n TooltipPortal,\n TooltipContent,\n TooltipProvider,\n};\n" + "content": "'use client';\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { withCn, withProps } from '@udecode/cn';\n\nexport const TooltipProvider = TooltipPrimitive.Provider;\nexport const Tooltip = TooltipPrimitive.Root;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\nexport const TooltipPortal = TooltipPrimitive.Portal;\n\nexport const TooltipContent = withCn(\n withProps(TooltipPrimitive.Content, {\n sideOffset: 4,\n }),\n 'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md'\n);\n" } ], "type": "components:plate-ui" diff --git a/yarn.lock b/yarn.lock index 6e125809e7..c2abd5b36f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6146,12 +6146,11 @@ __metadata: languageName: node linkType: hard -"@udecode/cn@workspace:packages/cn": +"@udecode/cn@workspace:^, @udecode/cn@workspace:packages/cn": version: 0.0.0-use.local resolution: "@udecode/cn@workspace:packages/cn" dependencies: "@udecode/react-utils": "npm:24.3.0" - clsx: "npm:^1.2.1" peerDependencies: class-variance-authority: ">=0.7.0" react: ">=16.8.0" @@ -6800,13 +6799,13 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-serializer-csv@npm:28.0.0, @udecode/plate-serializer-csv@workspace:^, @udecode/plate-serializer-csv@workspace:packages/serializer-csv": +"@udecode/plate-serializer-csv@npm:28.1.2, @udecode/plate-serializer-csv@workspace:^, @udecode/plate-serializer-csv@workspace:packages/serializer-csv": version: 0.0.0-use.local resolution: "@udecode/plate-serializer-csv@workspace:packages/serializer-csv" dependencies: "@types/papaparse": "npm:^5.3.7" "@udecode/plate-common": "npm:28.0.0" - "@udecode/plate-table": "npm:28.0.0" + "@udecode/plate-table": "npm:28.1.2" papaparse: "npm:^5.4.1" peerDependencies: react: ">=16.8.0" @@ -6818,7 +6817,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-serializer-docx@npm:28.0.0, @udecode/plate-serializer-docx@workspace:^, @udecode/plate-serializer-docx@workspace:packages/serializer-docx": +"@udecode/plate-serializer-docx@npm:28.1.2, @udecode/plate-serializer-docx@workspace:^, @udecode/plate-serializer-docx@workspace:packages/serializer-docx": version: 0.0.0-use.local resolution: "@udecode/plate-serializer-docx@workspace:packages/serializer-docx" dependencies: @@ -6828,7 +6827,7 @@ __metadata: "@udecode/plate-indent-list": "npm:28.0.0" "@udecode/plate-media": "npm:28.0.0" "@udecode/plate-paragraph": "npm:28.0.0" - "@udecode/plate-table": "npm:28.0.0" + "@udecode/plate-table": "npm:28.1.2" validator: "npm:^13.9.0" peerDependencies: react: ">=16.8.0" @@ -6914,7 +6913,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-table@npm:28.0.0, @udecode/plate-table@workspace:^, @udecode/plate-table@workspace:packages/table": +"@udecode/plate-table@npm:28.1.2, @udecode/plate-table@workspace:^, @udecode/plate-table@workspace:packages/table": version: 0.0.0-use.local resolution: "@udecode/plate-table@workspace:packages/table" dependencies: @@ -7058,13 +7057,13 @@ __metadata: "@udecode/plate-reset-node": "npm:28.0.0" "@udecode/plate-resizable": "npm:28.0.0" "@udecode/plate-select": "npm:28.0.0" - "@udecode/plate-serializer-csv": "npm:28.0.0" - "@udecode/plate-serializer-docx": "npm:28.0.0" + "@udecode/plate-serializer-csv": "npm:28.1.2" + "@udecode/plate-serializer-docx": "npm:28.1.2" "@udecode/plate-serializer-html": "npm:28.0.0" "@udecode/plate-serializer-md": "npm:28.0.0" "@udecode/plate-suggestion": "npm:28.0.0" "@udecode/plate-tabbable": "npm:28.0.0" - "@udecode/plate-table": "npm:28.0.0" + "@udecode/plate-table": "npm:28.1.2" "@udecode/plate-trailing-block": "npm:28.0.0" peerDependencies: react: ">=16.8.0" @@ -7076,7 +7075,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/react-utils@npm:24.3.0, @udecode/react-utils@workspace:packages/react-utils": +"@udecode/react-utils@npm:24.3.0, @udecode/react-utils@workspace:^, @udecode/react-utils@workspace:packages/react-utils": version: 0.0.0-use.local resolution: "@udecode/react-utils@workspace:packages/react-utils" dependencies: @@ -21604,6 +21603,7 @@ __metadata: "@types/lodash.template": "npm:^4.5.1" "@types/react-color": "npm:^3.0.6" "@types/react-syntax-highlighter": "npm:^15.5.7" + "@udecode/cn": "workspace:^" "@udecode/plate-alignment": "workspace:^" "@udecode/plate-autoformat": "workspace:^" "@udecode/plate-basic-elements": "workspace:^" @@ -21653,6 +21653,7 @@ __metadata: "@udecode/plate-test-utils": "workspace:^" "@udecode/plate-trailing-block": "workspace:^" "@udecode/plate-utils": "workspace:^" + "@udecode/react-utils": "workspace:^" "@udecode/slate": "workspace:^" "@udecode/slate-react": "workspace:^" "@udecode/slate-utils": "workspace:^" @@ -21662,7 +21663,6 @@ __metadata: autoprefixer: "npm:^10.4.14" change-case: "npm:^4.1.2" class-variance-authority: "npm:^0.7.0" - clsx: "npm:^1.2.1" cmdk: "npm:^0.2.0" concurrently: "npm:^8.2.0" contentlayer: "npm:0.3.4"