diff --git a/apps/e2e-examples/package.json b/apps/e2e-examples/package.json index e14d83fcd..ca8eea80b 100644 --- a/apps/e2e-examples/package.json +++ b/apps/e2e-examples/package.json @@ -12,11 +12,11 @@ }, "dependencies": { "@udecode/plate": "workspace:^", - "react-router-dom": "6.14.1" + "react-router-dom": "6.22.3" }, "devDependencies": { "@vitejs/plugin-react": "^3.1.0", - "typescript": "5.1.6", - "vite": "^4.4.3" + "typescript": "5.4.2", + "vite": "^4.5.2" } } diff --git a/apps/www/package.json b/apps/www/package.json index 6d8ff0a14..388fc4b4e 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -17,38 +17,38 @@ "typecheck": "yarn prebuild && tsc --noEmit" }, "dependencies": { - "@faker-js/faker": "^8.2.0", - "@radix-ui/colors": "1.0.0", + "@faker-js/faker": "^8.4.1", + "@radix-ui/colors": "1.0.1", "@radix-ui/react-accessible-icon": "^1.0.3", "@radix-ui/react-accordion": "^1.1.2", - "@radix-ui/react-alert-dialog": "^1.0.4", + "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-aspect-ratio": "^1.0.3", - "@radix-ui/react-avatar": "^1.0.3", + "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-collapsible": "^1.0.3", - "@radix-ui/react-context-menu": "^2.1.4", - "@radix-ui/react-dialog": "^1.0.4", - "@radix-ui/react-dropdown-menu": "^2.0.5", - "@radix-ui/react-hover-card": "^1.0.6", + "@radix-ui/react-context-menu": "^2.1.5", + "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-dropdown-menu": "^2.0.6", + "@radix-ui/react-hover-card": "^1.0.7", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.0.2", - "@radix-ui/react-menubar": "^1.0.3", - "@radix-ui/react-navigation-menu": "^1.1.3", - "@radix-ui/react-popover": "^1.0.6", + "@radix-ui/react-menubar": "^1.0.4", + "@radix-ui/react-navigation-menu": "^1.1.4", + "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-radio-group": "^1.1.3", - "@radix-ui/react-scroll-area": "^1.0.4", + "@radix-ui/react-scroll-area": "^1.0.5", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tabs": "^1.0.4", - "@radix-ui/react-toast": "^1.1.4", + "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-toggle-group": "^1.0.4", "@radix-ui/react-toolbar": "^1.0.4", - "@radix-ui/react-tooltip": "^1.0.6", + "@radix-ui/react-tooltip": "^1.0.7", "@udecode/cn": "workspace:^", "@udecode/plate-alignment": "workspace:^", "@udecode/plate-autoformat": "workspace:^", @@ -106,57 +106,51 @@ "@udecode/slate-react": "workspace:^", "@udecode/slate-utils": "workspace:^", "@udecode/utils": "workspace:^", - "@vercel/analytics": "^1.0.1", - "@vercel/og": "^0.5.8", - "change-case": "^4.1.2", + "@vercel/analytics": "^1.2.2", + "@vercel/og": "^0.6.2", "class-variance-authority": "^0.7.0", - "cmdk": "^0.2.0", + "cmdk": "^0.2.1", "contentlayer": "0.3.4", "date-fns": "^2.30.0", - "embla-carousel-autoplay": "8.0.0-rc15", - "embla-carousel-react": "8.0.0-rc15", - "framer-motion": "^10.16.4", - "geist": "^1.1.0", + "framer-motion": "^10.18.0", "lodash.template": "^4.5.0", "lucide-react": "^0.288.0", - "next": "14.0.4", + "next": "14.1.4", "next-contentlayer": "0.3.4", "next-themes": "^0.2.1", - "nuqs": "^1.14.0", + "nuqs": "^1.17.1", "prism-react-renderer": "^1.3.5", "react": "^18.2.0", "react-dnd": "16.0.1", "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.2.0", - "react-lite-youtube-embed": "^2.3.52", - "react-modal-sheet": "2.0.0", - "react-resizable-panels": "^0.0.55", + "react-lite-youtube-embed": "^2.4.0", "react-syntax-highlighter": "^15.5.0", - "react-tweet": "^3.1.0", - "react-wrap-balancer": "^1.0.0", - "sass": "^1.63.6", + "react-tweet": "^3.2.0", + "react-wrap-balancer": "^1.1.0", + "sass": "^1.72.0", "slate": "0.102.0", "slate-history": "0.100.0", "slate-hyperscript": "0.100.0", "slate-react": "0.102.0", "slate-test-utils": "1.3.2", - "sonner": "^1.2.3", - "tailwind-merge": "^2.2.0", - "unist-builder": "3.0.0", - "unist-util-visit": "^4.1.2" + "sonner": "^1.4.32", + "tailwind-merge": "^2.2.2", + "unist-builder": "4.0.0", + "unist-util-visit": "^5.0.0" }, "resolutions": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { - "@types/lodash.template": "^4.5.1", - "@types/react-color": "^3.0.6", - "@types/react-syntax-highlighter": "^15.5.7", - "autoprefixer": "^10.4.14", - "concurrently": "^8.2.0", + "@types/lodash.template": "^4.5.3", + "@types/react-color": "^3.0.12", + "@types/react-syntax-highlighter": "^15.5.11", + "autoprefixer": "^10.4.18", + "concurrently": "^8.2.2", "mdast-util-toc": "^6.1.1", - "postcss": "^8.4.25", + "postcss": "^8.4.37", "rehype": "^12.0.1", "rehype-autolink-headings": "^6.1.1", "rehype-pretty-code": "^0.6.0", @@ -164,14 +158,14 @@ "remark": "^14.0.3", "remark-code-import": "^1.2.0", "remark-gfm": "^3.0.1", - "rimraf": "^5.0.1", + "rimraf": "^5.0.5", "shiki": "^0.12.1", - "tailwindcss": "^3.4.0", + "tailwindcss": "^3.4.1", "tailwindcss-animate": "^1.0.7", "ts-node": "^10.9.2", "tsx": "^4.7.1", - "typescript": "5.1.6", - "vaul": "^0.6.0" + "typescript": "5.4.2", + "vaul": "^0.9.0" }, "browserslist": { "production": [ diff --git a/apps/www/public/registry/styles/default/avatar.json b/apps/www/public/registry/styles/default/avatar.json index 273824c7b..c04b6ca59 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 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" + "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 size-10 shrink-0 overflow-hidden rounded-full'\n);\n\nexport const AvatarImage = withCn(\n AvatarPrimitive.Image,\n 'aspect-square size-full'\n);\n\nexport const AvatarFallback = withCn(\n AvatarPrimitive.Fallback,\n 'flex size-full items-center justify-center rounded-full bg-muted'\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 e5c6a2360..df87df05d 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 { 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" + "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: 'size-9 rounded-md px-0',\n lg: 'h-11 rounded-md px-8',\n icon: 'size-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/checkbox.json b/apps/www/public/registry/styles/default/checkbox.json index 4ba4da927..1778792ca 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';\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" + "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 a04abcf72..f17a7cce6 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 { 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" + "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 { 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" + "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", 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 0c9cd9847..dd26ba1f0 100644 --- a/apps/www/public/registry/styles/default/code-block-element.json +++ b/apps/www/public/registry/styles/default/code-block-element.json @@ -17,7 +17,7 @@ }, { "name": "code-block-combobox.tsx", - "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" + "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/color-dropdown-menu.json b/apps/www/public/registry/styles/default/color-dropdown-menu.json index 7b7955e21..d0a93b672 100644 --- a/apps/www/public/registry/styles/default/color-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/color-dropdown-menu.json @@ -19,11 +19,11 @@ }, { "name": "color-dropdown-menu-items.tsx", - "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" + "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 { 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" + "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", diff --git a/apps/www/public/registry/styles/default/command.json b/apps/www/public/registry/styles/default/command.json index e14d99eef..c826e91de 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 { 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" + "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 size-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/comments-popover.json b/apps/www/public/registry/styles/default/comments-popover.json index e66c9179c..36ab64177 100644 --- a/apps/www/public/registry/styles/default/comments-popover.json +++ b/apps/www/public/registry/styles/default/comments-popover.json @@ -14,7 +14,7 @@ }, { "name": "comment-avatar.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport { useUserById } from '@udecode/plate-comments';\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from '@/registry/default/plate-ui/avatar';\n\nexport function CommentAvatar({ userId }: { userId: string | null }) {\n const user = useUserById(userId);\n if (!user) return null;\n\n return (\n \n \n {user.name?.[0]}\n \n );\n}\n" + "content": "'use client';\n\nimport React from 'react';\nimport { useUserById } from '@udecode/plate-comments';\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from '@/registry/default/plate-ui/avatar';\n\nexport function CommentAvatar({ userId }: { userId: string | null }) {\n const user = useUserById(userId);\n if (!user) return null;\n\n return (\n \n \n {user.name?.[0]}\n \n );\n}\n" }, { "name": "comment-create-form.tsx", @@ -26,7 +26,7 @@ }, { "name": "comment-more-dropdown.tsx", - "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" + "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,7 +34,7 @@ }, { "name": "comment-resolve-button.tsx", - "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" + "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", diff --git a/apps/www/public/registry/styles/default/cursor-overlay.json b/apps/www/public/registry/styles/default/cursor-overlay.json index 0cd1b2847..63f9898d7 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 { 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" + "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 c09b66c85..cbeeab81f 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';\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" + "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 ebb1a6a5e..2e4c38ba5 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 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" + "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 ed654ace6..f0321b1e0 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 {\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>(({ ...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" + "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-32 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-32 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>(({ ...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/emoji-dropdown-menu.json b/apps/www/public/registry/styles/default/emoji-dropdown-menu.json index 69ac9de71..544f415ab 100644 --- a/apps/www/public/registry/styles/default/emoji-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/emoji-dropdown-menu.json @@ -25,7 +25,7 @@ }, { "name": "emoji-picker-content.tsx", - "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" + "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 size-[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", @@ -37,7 +37,7 @@ }, { "name": "emoji-picker-search-and-clear.tsx", - "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" + "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/insert-dropdown-menu.json b/apps/www/public/registry/styles/default/insert-dropdown-menu.json index 7fc758254..acbcdd32e 100644 --- a/apps/www/public/registry/styles/default/insert-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/insert-dropdown-menu.json @@ -12,7 +12,7 @@ "files": [ { "name": "insert-dropdown-menu.tsx", - "content": "'use client';\n\nimport React from 'react';\nimport { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\nimport { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';\nimport {\n focusEditor,\n insertEmptyElement,\n useEditorRef,\n} from '@udecode/plate-common';\nimport { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3 } from '@udecode/plate-heading';\nimport { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n label: 'Basic blocks',\n items: [\n {\n value: ELEMENT_PARAGRAPH,\n label: 'Paragraph',\n description: 'Paragraph',\n icon: Icons.paragraph,\n },\n {\n value: ELEMENT_H1,\n label: 'Heading 1',\n description: 'Heading 1',\n icon: Icons.h1,\n },\n {\n value: ELEMENT_H2,\n label: 'Heading 2',\n description: 'Heading 2',\n icon: Icons.h2,\n },\n {\n value: ELEMENT_H3,\n label: 'Heading 3',\n description: 'Heading 3',\n icon: Icons.h3,\n },\n {\n value: ELEMENT_BLOCKQUOTE,\n label: 'Quote',\n description: 'Quote (⌘+⇧+.)',\n icon: Icons.blockquote,\n },\n // {\n // value: ELEMENT_TABLE,\n // label: 'Table',\n // description: 'Table',\n // icon: Icons.table,\n // },\n // {\n // value: 'ul',\n // label: 'Bulleted list',\n // description: 'Bulleted list',\n // icon: Icons.ul,\n // },\n // {\n // value: 'ol',\n // label: 'Numbered list',\n // description: 'Numbered list',\n // icon: Icons.ol,\n // },\n // {\n // value: ELEMENT_HR,\n // label: 'Divider',\n // description: 'Divider (---)',\n // icon: Icons.hr,\n // },\n ],\n },\n // {\n // label: 'Media',\n // items: [\n // {\n // value: ELEMENT_CODE_BLOCK,\n // label: 'Code',\n // description: 'Code (```)',\n // icon: Icons.codeblock,\n // },\n // {\n // value: ELEMENT_IMAGE,\n // label: 'Image',\n // description: 'Image',\n // icon: Icons.image,\n // },\n // {\n // value: ELEMENT_MEDIA_EMBED,\n // label: 'Embed',\n // description: 'Embed',\n // icon: Icons.embed,\n // },\n // {\n // value: ELEMENT_EXCALIDRAW,\n // label: 'Excalidraw',\n // description: 'Excalidraw',\n // icon: Icons.excalidraw,\n // },\n // ],\n // },\n // {\n // label: 'Inline',\n // items: [\n // {\n // value: ELEMENT_LINK,\n // label: 'Link',\n // description: 'Link',\n // icon: Icons.link,\n // },\n // ],\n // },\n];\n\nexport function InsertDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n {items.map(({ items: nestedItems, label }, index) => (\n \n {index !== 0 && }\n\n {label}\n {nestedItems.map(\n ({ value: type, label: itemLabel, icon: Icon }) => (\n {\n switch (type) {\n // case ELEMENT_CODE_BLOCK: {\n // insertEmptyCodeBlock(editor);\n //\n // break;\n // }\n // case ELEMENT_IMAGE: {\n // await insertMedia(editor, { type: ELEMENT_IMAGE });\n //\n // break;\n // }\n // case ELEMENT_MEDIA_EMBED: {\n // await insertMedia(editor, {\n // type: ELEMENT_MEDIA_EMBED,\n // });\n //\n // break;\n // }\n // case 'ul':\n // case 'ol': {\n // insertEmptyElement(editor, ELEMENT_PARAGRAPH, {\n // select: true,\n // nextBlock: true,\n // });\n //\n // if (settingsStore.get.checkedId(KEY_LIST_STYLE_TYPE)) {\n // toggleIndentList(editor, {\n // listStyleType: type === 'ul' ? 'disc' : 'decimal',\n // });\n // } else if (settingsStore.get.checkedId('list')) {\n // toggleList(editor, { type });\n // }\n //\n // break;\n // }\n // case ELEMENT_TABLE: {\n // insertTable(editor);\n //\n // break;\n // }\n // case ELEMENT_LINK: {\n // triggerFloatingLink(editor, { focused: true });\n //\n // break;\n // }\n default: {\n insertEmptyElement(editor, type, {\n select: true,\n nextBlock: true,\n });\n }\n }\n\n focusEditor(editor);\n }}\n >\n \n {itemLabel}\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 { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';\nimport {\n focusEditor,\n insertEmptyElement,\n useEditorRef,\n} from '@udecode/plate-common';\nimport { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3 } from '@udecode/plate-heading';\nimport { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n label: 'Basic blocks',\n items: [\n {\n value: ELEMENT_PARAGRAPH,\n label: 'Paragraph',\n description: 'Paragraph',\n icon: Icons.paragraph,\n },\n {\n value: ELEMENT_H1,\n label: 'Heading 1',\n description: 'Heading 1',\n icon: Icons.h1,\n },\n {\n value: ELEMENT_H2,\n label: 'Heading 2',\n description: 'Heading 2',\n icon: Icons.h2,\n },\n {\n value: ELEMENT_H3,\n label: 'Heading 3',\n description: 'Heading 3',\n icon: Icons.h3,\n },\n {\n value: ELEMENT_BLOCKQUOTE,\n label: 'Quote',\n description: 'Quote (⌘+⇧+.)',\n icon: Icons.blockquote,\n },\n // {\n // value: ELEMENT_TABLE,\n // label: 'Table',\n // description: 'Table',\n // icon: Icons.table,\n // },\n // {\n // value: 'ul',\n // label: 'Bulleted list',\n // description: 'Bulleted list',\n // icon: Icons.ul,\n // },\n // {\n // value: 'ol',\n // label: 'Numbered list',\n // description: 'Numbered list',\n // icon: Icons.ol,\n // },\n // {\n // value: ELEMENT_HR,\n // label: 'Divider',\n // description: 'Divider (---)',\n // icon: Icons.hr,\n // },\n ],\n },\n // {\n // label: 'Media',\n // items: [\n // {\n // value: ELEMENT_CODE_BLOCK,\n // label: 'Code',\n // description: 'Code (```)',\n // icon: Icons.codeblock,\n // },\n // {\n // value: ELEMENT_IMAGE,\n // label: 'Image',\n // description: 'Image',\n // icon: Icons.image,\n // },\n // {\n // value: ELEMENT_MEDIA_EMBED,\n // label: 'Embed',\n // description: 'Embed',\n // icon: Icons.embed,\n // },\n // {\n // value: ELEMENT_EXCALIDRAW,\n // label: 'Excalidraw',\n // description: 'Excalidraw',\n // icon: Icons.excalidraw,\n // },\n // ],\n // },\n // {\n // label: 'Inline',\n // items: [\n // {\n // value: ELEMENT_LINK,\n // label: 'Link',\n // description: 'Link',\n // icon: Icons.link,\n // },\n // ],\n // },\n];\n\nexport function InsertDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n {items.map(({ items: nestedItems, label }, index) => (\n \n {index !== 0 && }\n\n {label}\n {nestedItems.map(\n ({ value: type, label: itemLabel, icon: Icon }) => (\n {\n switch (type) {\n // case ELEMENT_CODE_BLOCK: {\n // insertEmptyCodeBlock(editor);\n //\n // break;\n // }\n // case ELEMENT_IMAGE: {\n // await insertMedia(editor, { type: ELEMENT_IMAGE });\n //\n // break;\n // }\n // case ELEMENT_MEDIA_EMBED: {\n // await insertMedia(editor, {\n // type: ELEMENT_MEDIA_EMBED,\n // });\n //\n // break;\n // }\n // case 'ul':\n // case 'ol': {\n // insertEmptyElement(editor, ELEMENT_PARAGRAPH, {\n // select: true,\n // nextBlock: true,\n // });\n //\n // if (settingsStore.get.checkedId(KEY_LIST_STYLE_TYPE)) {\n // toggleIndentList(editor, {\n // listStyleType: type === 'ul' ? 'disc' : 'decimal',\n // });\n // } else if (settingsStore.get.checkedId('list')) {\n // toggleList(editor, { type });\n // }\n //\n // break;\n // }\n // case ELEMENT_TABLE: {\n // insertTable(editor);\n //\n // break;\n // }\n // case ELEMENT_LINK: {\n // triggerFloatingLink(editor, { focused: true });\n //\n // break;\n // }\n default: {\n insertEmptyElement(editor, type, {\n select: true,\n nextBlock: true,\n });\n }\n }\n\n focusEditor(editor);\n }}\n >\n \n {itemLabel}\n \n )\n )}\n \n ))}\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 2865865fd..07df3a757 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 { 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" + "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/media-embed-element.json b/apps/www/public/registry/styles/default/media-embed-element.json index 8c7431f9e..ee3767e17 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 { 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" + "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]:size-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-popover.json b/apps/www/public/registry/styles/default/media-popover.json index c2d66d945..9d50db888 100644 --- a/apps/www/public/registry/styles/default/media-popover.json +++ b/apps/www/public/registry/styles/default/media-popover.json @@ -12,7 +12,7 @@ "files": [ { "name": "media-popover.tsx", - "content": "import React, { useEffect } from 'react';\nimport {\n isSelectionExpanded,\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n} from '@udecode/plate-common';\nimport {\n floatingMediaActions,\n FloatingMedia as FloatingMediaPrimitive,\n useFloatingMediaSelectors,\n} from '@udecode/plate-media';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button, buttonVariants } from './button';\nimport { inputVariants } from './input';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport interface MediaPopoverProps {\n pluginKey?: string;\n children: React.ReactNode;\n}\n\nexport function MediaPopover({ pluginKey, children }: MediaPopoverProps) {\n const readOnly = useReadOnly();\n const selected = useSelected();\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n const isOpen = !readOnly && selected && selectionCollapsed;\n const isEditing = useFloatingMediaSelectors().isEditing();\n\n useEffect(() => {\n if (!isOpen && isEditing) {\n floatingMediaActions.isEditing(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n const element = useElement();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n if (readOnly) return <>{children};\n\n return (\n \n {children}\n\n e.preventDefault()}\n >\n {isEditing ? (\n
\n
\n
\n \n
\n\n \n
\n
\n ) : (\n
\n \n Edit link\n \n\n \n\n \n
\n )}\n \n \n );\n}\n" + "content": "import React, { useEffect } from 'react';\nimport {\n isSelectionExpanded,\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n} from '@udecode/plate-common';\nimport {\n floatingMediaActions,\n FloatingMedia as FloatingMediaPrimitive,\n useFloatingMediaSelectors,\n} from '@udecode/plate-media';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button, buttonVariants } from './button';\nimport { inputVariants } from './input';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport interface MediaPopoverProps {\n pluginKey?: string;\n children: React.ReactNode;\n}\n\nexport function MediaPopover({ pluginKey, children }: MediaPopoverProps) {\n const readOnly = useReadOnly();\n const selected = useSelected();\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n const isOpen = !readOnly && selected && selectionCollapsed;\n const isEditing = useFloatingMediaSelectors().isEditing();\n\n useEffect(() => {\n if (!isOpen && isEditing) {\n floatingMediaActions.isEditing(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n const element = useElement();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n if (readOnly) return <>{children};\n\n return (\n \n {children}\n\n e.preventDefault()}\n >\n {isEditing ? (\n
\n
\n
\n \n
\n\n \n
\n
\n ) : (\n
\n \n Edit link\n \n\n \n\n \n
\n )}\n \n \n );\n}\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/mode-dropdown-menu.json b/apps/www/public/registry/styles/default/mode-dropdown-menu.json index 482eba98d..e4058fc6f 100644 --- a/apps/www/public/registry/styles/default/mode-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/mode-dropdown-menu.json @@ -8,7 +8,7 @@ "files": [ { "name": "mode-dropdown-menu.tsx", - "content": "import React from 'react';\nimport { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\nimport {\n focusEditor,\n useEditorReadOnly,\n useEditorRef,\n usePlateStore,\n} from '@udecode/plate-common';\n\nimport { Icons } 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\nexport function ModeDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const setReadOnly = usePlateStore().set.readOnly();\n const readOnly = useEditorReadOnly();\n const openState = useOpenState();\n\n let value = 'editing';\n if (readOnly) value = 'viewing';\n\n const item: any = {\n editing: (\n <>\n \n Editing\n \n ),\n viewing: (\n <>\n \n Viewing\n \n ),\n };\n\n return (\n \n \n \n {item[value]}\n \n \n\n \n {\n if (newValue !== 'viewing') {\n setReadOnly(false);\n }\n\n if (newValue === 'viewing') {\n setReadOnly(true);\n return;\n }\n\n if (newValue === 'editing') {\n focusEditor(editor);\n return;\n }\n }}\n >\n \n {item.editing}\n \n\n \n {item.viewing}\n \n \n \n \n );\n}\n" + "content": "import React from 'react';\nimport { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\nimport {\n focusEditor,\n useEditorReadOnly,\n useEditorRef,\n usePlateStore,\n} from '@udecode/plate-common';\n\nimport { Icons } 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\nexport function ModeDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const setReadOnly = usePlateStore().set.readOnly();\n const readOnly = useEditorReadOnly();\n const openState = useOpenState();\n\n let value = 'editing';\n if (readOnly) value = 'viewing';\n\n const item: any = {\n editing: (\n <>\n \n Editing\n \n ),\n viewing: (\n <>\n \n Viewing\n \n ),\n };\n\n return (\n \n \n \n {item[value]}\n \n \n\n \n {\n if (newValue !== 'viewing') {\n setReadOnly(false);\n }\n\n if (newValue === 'viewing') {\n setReadOnly(true);\n return;\n }\n\n if (newValue === 'editing') {\n focusEditor(editor);\n return;\n }\n }}\n >\n \n {item.editing}\n \n\n \n {item.viewing}\n \n \n \n \n );\n}\n" } ], "type": "components:plate-ui" diff --git a/apps/www/public/registry/styles/default/more-dropdown-menu.json b/apps/www/public/registry/styles/default/more-dropdown-menu.json index 71a6c439d..e84a1640b 100644 --- a/apps/www/public/registry/styles/default/more-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/more-dropdown-menu.json @@ -10,7 +10,7 @@ "files": [ { "name": "more-dropdown-menu.tsx", - "content": "import React from 'react';\nimport { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\nimport { MARK_SUBSCRIPT, MARK_SUPERSCRIPT } from '@udecode/plate-basic-marks';\nimport { focusEditor, toggleMark, useEditorRef } from '@udecode/plate-common';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function MoreDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n {\n toggleMark(editor, {\n key: MARK_SUBSCRIPT,\n clear: MARK_SUPERSCRIPT,\n });\n focusEditor(editor);\n }}\n >\n \n Superscript\n {/* (⌘+,) */}\n \n {\n toggleMark(editor, {\n key: MARK_SUPERSCRIPT,\n clear: MARK_SUBSCRIPT,\n });\n focusEditor(editor);\n }}\n >\n \n Subscript\n {/* (⌘+.) */}\n \n \n \n );\n}\n" + "content": "import React from 'react';\nimport { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\nimport { MARK_SUBSCRIPT, MARK_SUPERSCRIPT } from '@udecode/plate-basic-marks';\nimport { focusEditor, toggleMark, useEditorRef } from '@udecode/plate-common';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function MoreDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n \n \n \n \n \n \n\n \n {\n toggleMark(editor, {\n key: MARK_SUBSCRIPT,\n clear: MARK_SUPERSCRIPT,\n });\n focusEditor(editor);\n }}\n >\n \n Superscript\n {/* (⌘+,) */}\n \n {\n toggleMark(editor, {\n key: MARK_SUPERSCRIPT,\n clear: MARK_SUBSCRIPT,\n });\n focusEditor(editor);\n }}\n >\n \n Subscript\n {/* (⌘+.) */}\n \n \n \n );\n}\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 38faf763e..e89e37c1b 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 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" + "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-px w-full',\n vertical: 'h-full w-px',\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 5bd2b2f03..175092c78 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 { 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" + "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:size-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 d72e6c9b6..b192b2672 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 from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { PopoverAnchor } from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport {\n isSelectionExpanded,\n PlateElement,\n useEditorRef,\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n withHOC,\n} from '@udecode/plate-common';\nimport {\n mergeTableCells,\n TableProvider,\n TTableElement,\n unmergeTableCells,\n useTableBordersDropdownMenuContentState,\n useTableElement,\n useTableElementState,\n useTableMergeState,\n} from '@udecode/plate-table';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nexport const TableBordersDropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>((props, ref) => {\n const {\n getOnSelectTableBorder,\n hasOuterBorders,\n hasBottomBorder,\n hasLeftBorder,\n hasNoBorders,\n hasRightBorder,\n hasTopBorder,\n } = useTableBordersDropdownMenuContentState();\n\n return (\n \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 = withHOC(\n TableProvider,\n withRef(({ 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" + "content": "import React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { PopoverAnchor } from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport {\n isSelectionExpanded,\n PlateElement,\n useEditorRef,\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n withHOC,\n} from '@udecode/plate-common';\nimport {\n mergeTableCells,\n TableProvider,\n TTableElement,\n unmergeTableCells,\n useTableBordersDropdownMenuContentState,\n useTableElement,\n useTableElementState,\n useTableMergeState,\n} from '@udecode/plate-table';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\nimport { Separator } from './separator';\n\nexport const TableBordersDropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>((props, ref) => {\n const {\n getOnSelectTableBorder,\n hasOuterBorders,\n hasBottomBorder,\n hasLeftBorder,\n hasNoBorders,\n hasRightBorder,\n hasTopBorder,\n } = useTableBordersDropdownMenuContentState();\n\n return (\n \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 = withHOC(\n TableProvider,\n withRef(({ 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/toolbar.json b/apps/www/public/registry/styles/default/toolbar.json index 3e3adc127..26666421e 100644 --- a/apps/www/public/registry/styles/default/toolbar.json +++ b/apps/www/public/registry/styles/default/toolbar.json @@ -10,7 +10,7 @@ "files": [ { "name": "toolbar.tsx", - "content": "'use client';\n\nimport * as React from 'react';\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n ToolbarPrimitive.Root,\n 'relative flex select-none items-center gap-1 bg-background'\n);\n\nexport const ToolbarToggleGroup = withCn(\n ToolbarPrimitive.ToolbarToggleGroup,\n 'flex items-center'\n);\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\nconst toolbarButtonVariants = 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 aria-checked:bg-accent aria-checked:text-accent-foreground',\n outline:\n 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n },\n size: {\n default: 'h-10 px-3',\n sm: 'h-9 px-2',\n lg: 'h-11 px-5',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'sm',\n },\n }\n);\n\nconst ToolbarButton = withTooltip(\n // eslint-disable-next-line react/display-name\n React.forwardRef<\n React.ElementRef,\n Omit<\n React.ComponentPropsWithoutRef,\n 'asChild' | 'value'\n > &\n VariantProps & {\n pressed?: boolean;\n isDropdown?: boolean;\n }\n >(\n (\n { className, variant, size, isDropdown, children, pressed, ...props },\n ref\n ) => {\n return typeof pressed === 'boolean' ? (\n \n \n {isDropdown ? (\n <>\n
{children}
\n
\n \n
\n \n ) : (\n children\n )}\n \n \n ) : (\n \n {children}\n \n );\n }\n )\n);\nToolbarButton.displayName = 'ToolbarButton';\nexport { ToolbarButton };\n\nexport const ToolbarToggleItem = withVariants(\n ToolbarPrimitive.ToggleItem,\n toolbarButtonVariants,\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" + "content": "'use client';\n\nimport * as React from 'react';\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { Icons } from '@/components/icons';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n ToolbarPrimitive.Root,\n 'relative flex select-none items-center gap-1 bg-background'\n);\n\nexport const ToolbarToggleGroup = withCn(\n ToolbarPrimitive.ToolbarToggleGroup,\n 'flex items-center'\n);\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-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = 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])]:size-5'\n ),\n {\n variants: {\n variant: {\n default:\n 'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',\n outline:\n 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n },\n size: {\n default: 'h-10 px-3',\n sm: 'h-9 px-2',\n lg: 'h-11 px-5',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'sm',\n },\n }\n);\n\nconst ToolbarButton = withTooltip(\n // eslint-disable-next-line react/display-name\n React.forwardRef<\n React.ElementRef,\n Omit<\n React.ComponentPropsWithoutRef,\n 'asChild' | 'value'\n > &\n VariantProps & {\n pressed?: boolean;\n isDropdown?: boolean;\n }\n >(\n (\n { className, variant, size, isDropdown, children, pressed, ...props },\n ref\n ) => {\n return typeof pressed === 'boolean' ? (\n \n \n {isDropdown ? (\n <>\n
{children}
\n
\n \n
\n \n ) : (\n children\n )}\n \n \n ) : (\n \n {children}\n \n );\n }\n )\n);\nToolbarButton.displayName = 'ToolbarButton';\nexport { ToolbarButton };\n\nexport const ToolbarToggleItem = withVariants(\n ToolbarPrimitive.ToggleItem,\n toolbarButtonVariants,\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/turn-into-dropdown-menu.json b/apps/www/public/registry/styles/default/turn-into-dropdown-menu.json index 82d4faeed..8a58e7f31 100644 --- a/apps/www/public/registry/styles/default/turn-into-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/turn-into-dropdown-menu.json @@ -12,7 +12,7 @@ "files": [ { "name": "turn-into-dropdown-menu.tsx", - "content": "import React from 'react';\nimport { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\nimport { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';\nimport {\n collapseSelection,\n findNode,\n focusEditor,\n isBlock,\n isCollapsed,\n TElement,\n toggleNodeType,\n useEditorRef,\n useEditorSelector,\n} from '@udecode/plate-common';\nimport { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3 } from '@udecode/plate-heading';\nimport { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n value: ELEMENT_PARAGRAPH,\n label: 'Paragraph',\n description: 'Paragraph',\n icon: Icons.paragraph,\n },\n {\n value: ELEMENT_H1,\n label: 'Heading 1',\n description: 'Heading 1',\n icon: Icons.h1,\n },\n {\n value: ELEMENT_H2,\n label: 'Heading 2',\n description: 'Heading 2',\n icon: Icons.h2,\n },\n {\n value: ELEMENT_H3,\n label: 'Heading 3',\n description: 'Heading 3',\n icon: Icons.h3,\n },\n {\n value: ELEMENT_BLOCKQUOTE,\n label: 'Quote',\n description: 'Quote (⌘+⇧+.)',\n icon: Icons.blockquote,\n },\n // {\n // value: 'ul',\n // label: 'Bulleted list',\n // description: 'Bulleted list',\n // icon: Icons.ul,\n // },\n // {\n // value: 'ol',\n // label: 'Numbered list',\n // description: 'Numbered list',\n // icon: Icons.ol,\n // },\n];\n\nconst defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!;\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n const value: string = useEditorSelector((editor) => {\n if (isCollapsed(editor.selection)) {\n const entry = findNode(editor, {\n match: (n) => isBlock(editor, n),\n });\n\n if (entry) {\n return (\n items.find((item) => item.value === entry[0].type)?.value ??\n ELEMENT_PARAGRAPH\n );\n }\n }\n\n return ELEMENT_PARAGRAPH;\n }, []);\n\n const editor = useEditorRef();\n const openState = useOpenState();\n\n const selectedItem =\n items.find((item) => item.value === value) ?? defaultItem;\n const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;\n\n return (\n \n \n \n \n {selectedItemLabel}\n \n \n\n \n Turn into\n\n {\n // if (type === 'ul' || type === 'ol') {\n // if (settingsStore.get.checkedId(KEY_LIST_STYLE_TYPE)) {\n // toggleIndentList(editor, {\n // listStyleType: type === 'ul' ? 'disc' : 'decimal',\n // });\n // } else if (settingsStore.get.checkedId('list')) {\n // toggleList(editor, { type });\n // }\n // } else {\n // unwrapList(editor);\n toggleNodeType(editor, { activeType: type });\n // }\n\n collapseSelection(editor);\n focusEditor(editor);\n }}\n >\n {items.map(({ value: itemValue, label, icon: Icon }) => (\n \n \n {label}\n \n ))}\n \n \n \n );\n}\n" + "content": "import React from 'react';\nimport { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\nimport { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';\nimport {\n collapseSelection,\n findNode,\n focusEditor,\n isBlock,\n isCollapsed,\n TElement,\n toggleNodeType,\n useEditorRef,\n useEditorSelector,\n} from '@udecode/plate-common';\nimport { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3 } from '@udecode/plate-heading';\nimport { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n value: ELEMENT_PARAGRAPH,\n label: 'Paragraph',\n description: 'Paragraph',\n icon: Icons.paragraph,\n },\n {\n value: ELEMENT_H1,\n label: 'Heading 1',\n description: 'Heading 1',\n icon: Icons.h1,\n },\n {\n value: ELEMENT_H2,\n label: 'Heading 2',\n description: 'Heading 2',\n icon: Icons.h2,\n },\n {\n value: ELEMENT_H3,\n label: 'Heading 3',\n description: 'Heading 3',\n icon: Icons.h3,\n },\n {\n value: ELEMENT_BLOCKQUOTE,\n label: 'Quote',\n description: 'Quote (⌘+⇧+.)',\n icon: Icons.blockquote,\n },\n // {\n // value: 'ul',\n // label: 'Bulleted list',\n // description: 'Bulleted list',\n // icon: Icons.ul,\n // },\n // {\n // value: 'ol',\n // label: 'Numbered list',\n // description: 'Numbered list',\n // icon: Icons.ol,\n // },\n];\n\nconst defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!;\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n const value: string = useEditorSelector((editor) => {\n if (isCollapsed(editor.selection)) {\n const entry = findNode(editor, {\n match: (n) => isBlock(editor, n),\n });\n\n if (entry) {\n return (\n items.find((item) => item.value === entry[0].type)?.value ??\n ELEMENT_PARAGRAPH\n );\n }\n }\n\n return ELEMENT_PARAGRAPH;\n }, []);\n\n const editor = useEditorRef();\n const openState = useOpenState();\n\n const selectedItem =\n items.find((item) => item.value === value) ?? defaultItem;\n const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;\n\n return (\n \n \n \n \n {selectedItemLabel}\n \n \n\n \n Turn into\n\n {\n // if (type === 'ul' || type === 'ol') {\n // if (settingsStore.get.checkedId(KEY_LIST_STYLE_TYPE)) {\n // toggleIndentList(editor, {\n // listStyleType: type === 'ul' ? 'disc' : 'decimal',\n // });\n // } else if (settingsStore.get.checkedId('list')) {\n // toggleList(editor, { type });\n // }\n // } else {\n // unwrapList(editor);\n toggleNodeType(editor, { activeType: type });\n // }\n\n collapseSelection(editor);\n focusEditor(editor);\n }}\n >\n {items.map(({ value: itemValue, label, icon: Icon }) => (\n \n \n {label}\n \n ))}\n \n \n \n );\n}\n" } ], "type": "components:plate-ui" diff --git a/apps/www/src/app/_components/home-tabs.tsx b/apps/www/src/app/_components/home-tabs.tsx index c22ebf698..15fa56125 100644 --- a/apps/www/src/app/_components/home-tabs.tsx +++ b/apps/www/src/app/_components/home-tabs.tsx @@ -63,7 +63,7 @@ export default function HomeTabs() { } }} > - Customize + Customize diff --git a/apps/www/src/app/_components/installation-code.tsx b/apps/www/src/app/_components/installation-code.tsx index 0bf887248..536484aa3 100644 --- a/apps/www/src/app/_components/installation-code.tsx +++ b/apps/www/src/app/_components/installation-code.tsx @@ -2,12 +2,15 @@ import * as React from 'react'; import { ReactNode } from 'react'; import { cn } from '@udecode/cn'; -import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; +import { Prism, SyntaxHighlighterProps } from 'react-syntax-highlighter'; import { vscDarkPlus as theme } from 'react-syntax-highlighter/dist/esm/styles/prism'; import { CopyButton, CopyNpmCommandButton } from '@/components/copy-button'; import * as Typography from '@/components/typography'; +const SyntaxHighlighter = + Prism as typeof React.Component; + export function InstallationCode({ code, children, diff --git a/apps/www/src/app/announcement-button.tsx b/apps/www/src/app/announcement-button.tsx index 194312b9a..6423ce1af 100644 --- a/apps/www/src/app/announcement-button.tsx +++ b/apps/www/src/app/announcement-button.tsx @@ -19,7 +19,7 @@ export function AnnouncementButton() { > 🎉 Introducing the interactive builder. - + ); } diff --git a/apps/www/src/app/docs/[[...slug]]/page.tsx b/apps/www/src/app/docs/[[...slug]]/page.tsx index b669710d9..c9e8a8982 100644 --- a/apps/www/src/app/docs/[[...slug]]/page.tsx +++ b/apps/www/src/app/docs/[[...slug]]/page.tsx @@ -128,7 +128,7 @@ export default async function DocPage({ params }: DocPageProps) {
{isUI ? 'Components' : 'Docs'}
- +
{doc.title}
@@ -151,7 +151,7 @@ export default async function DocPage({ params }: DocPageProps) { className={cn(badgeVariants({ variant: 'secondary' }), 'gap-1')} > Docs - + )} {doc.links?.api && ( @@ -162,7 +162,7 @@ export default async function DocPage({ params }: DocPageProps) { className={cn(badgeVariants({ variant: 'secondary' }), 'gap-1')} > API Reference - + )} {doc.docs?.map((item) => ( diff --git a/apps/www/src/app/page.tsx b/apps/www/src/app/page.tsx index 32844d57e..8ebd8a374 100644 --- a/apps/www/src/app/page.tsx +++ b/apps/www/src/app/page.tsx @@ -51,7 +51,7 @@ export default function IndexPage() { href={siteConfig.links.github} className={cn(buttonVariants({ variant: 'outline' }))} > - + GitHub diff --git a/apps/www/src/components/api-list.tsx b/apps/www/src/components/api-list.tsx index 4a8155a25..8f70b4a9f 100644 --- a/apps/www/src/components/api-list.tsx +++ b/apps/www/src/components/api-list.tsx @@ -46,7 +46,7 @@ export function APIItem({ onClick={(e) => e.stopPropagation()} >
- +
diff --git a/apps/www/src/components/command-menu.tsx b/apps/www/src/components/command-menu.tsx index ca2f62227..fd4b7462b 100644 --- a/apps/www/src/components/command-menu.tsx +++ b/apps/www/src/components/command-menu.tsx @@ -38,8 +38,8 @@ export function CommandItems({ runCommand(() => router.push(item.href as string)); }} > -
- +
+
{item.title} @@ -57,8 +57,8 @@ export function CommandItems({ ); }} > -
- +
+
{item.title} – {heading} @@ -162,7 +162,7 @@ export function CommandMenu({ ...props }: DialogProps) { runCommand(() => router.push(navItem.href as string)); }} > - + {navItem.title} ))} @@ -188,15 +188,15 @@ export function CommandMenu({ ...props }: DialogProps) { runCommand(() => setTheme('light'))}> - + Light runCommand(() => setTheme('dark'))}> - + Dark runCommand(() => setTheme('system'))}> - + System diff --git a/apps/www/src/components/component-preview.tsx b/apps/www/src/components/component-preview.tsx index 76f466440..d913e88f1 100644 --- a/apps/www/src/components/component-preview.tsx +++ b/apps/www/src/components/component-preview.tsx @@ -103,7 +103,7 @@ export function ComponentPreview({ fallback={ // eslint-disable-next-line tailwindcss/no-custom-classname
- + Loading...
} @@ -111,7 +111,7 @@ export function ComponentPreview({
-
{Preview}
+
{Preview}
diff --git a/apps/www/src/components/copy-button.tsx b/apps/www/src/components/copy-button.tsx index d6d174ae0..5e05adc46 100644 --- a/apps/www/src/components/copy-button.tsx +++ b/apps/www/src/components/copy-button.tsx @@ -49,7 +49,7 @@ export function CopyButton({ size="icon" variant="ghost" className={cn( - 'relative z-10 h-6 w-6 text-slate-50 hover:bg-slate-700 hover:text-slate-50', + 'relative z-10 size-6 text-slate-50 hover:bg-slate-700 hover:text-slate-50', className )} onClick={() => { @@ -70,9 +70,9 @@ export function CopyButton({ > Copy {hasCopied ? ( - + ) : ( - + )} ); @@ -109,25 +109,25 @@ export function CopyWithClassNames({ size="icon" variant="ghost" className={cn( - 'relative z-10 h-6 w-6 text-slate-50 hover:bg-slate-700 hover:text-slate-50', + 'relative z-10 size-6 text-slate-50 hover:bg-slate-700 hover:text-slate-50', className )} > {hasCopied ? ( - + ) : ( - + )} Copy copyToClipboard(value)}> - + Component copyToClipboard(classNames)}> - + Classname @@ -172,14 +172,14 @@ export function CopyNpmCommandButton({ size="icon" variant="ghost" className={cn( - 'relative z-10 h-6 w-6 text-slate-50 hover:bg-slate-700 hover:text-slate-50', + 'relative z-10 size-6 text-slate-50 hover:bg-slate-700 hover:text-slate-50', className )} > {hasCopied ? ( - + ) : ( - + )} Copy diff --git a/apps/www/src/components/copy-code-button.tsx b/apps/www/src/components/copy-code-button.tsx index 4d986924b..dd940f45d 100644 --- a/apps/www/src/components/copy-code-button.tsx +++ b/apps/www/src/components/copy-code-button.tsx @@ -44,9 +44,9 @@ export function CopyCodeButton() { className="md:hidden" > {hasCopied ? ( - + ) : ( - + )} Copy @@ -83,9 +83,9 @@ export function CopyCodeButton() { className="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground" > {hasCopied ? ( - + ) : ( - + )} Copy diff --git a/apps/www/src/components/customizer-drawer.tsx b/apps/www/src/components/customizer-drawer.tsx index 0557605da..4583022e0 100644 --- a/apps/www/src/components/customizer-drawer.tsx +++ b/apps/www/src/components/customizer-drawer.tsx @@ -74,9 +74,9 @@ export default function CustomizerDrawer() { setOpen(false)}> diff --git a/apps/www/src/components/icons.tsx b/apps/www/src/components/icons.tsx index e5decb1c5..11c036db6 100644 --- a/apps/www/src/components/icons.tsx +++ b/apps/www/src/components/icons.tsx @@ -366,12 +366,12 @@ export const Icons = { export const iconVariants = cva('', { variants: { variant: { - toolbar: 'h-5 w-5', - menuItem: 'mr-2 h-5 w-5', + toolbar: 'size-5', + menuItem: 'mr-2 size-5', }, size: { - sm: 'mr-2 h-4 w-4', - md: 'mr-2 h-6 w-6', + sm: 'mr-2 size-4', + md: 'mr-2 size-6', }, }, defaultVariants: {}, diff --git a/apps/www/src/components/main-nav.tsx b/apps/www/src/components/main-nav.tsx index 1948d4bcf..ff5869037 100644 --- a/apps/www/src/components/main-nav.tsx +++ b/apps/www/src/components/main-nav.tsx @@ -17,7 +17,7 @@ export function MainNav() { return (
- + {siteConfig.name}
diff --git a/apps/www/src/components/mobile-nav.tsx b/apps/www/src/components/mobile-nav.tsx index c1683aae8..d91dd6eb7 100644 --- a/apps/www/src/components/mobile-nav.tsx +++ b/apps/www/src/components/mobile-nav.tsx @@ -32,7 +32,7 @@ export function MobileNav() { viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" - className="h-5 w-5" + className="size-5" > - + {siteConfig.name} diff --git a/apps/www/src/components/pager.tsx b/apps/www/src/components/pager.tsx index 49b1c6dfc..69f9a1405 100644 --- a/apps/www/src/components/pager.tsx +++ b/apps/www/src/components/pager.tsx @@ -26,7 +26,7 @@ export function DocsPager({ doc }: DocsPagerProps) { href={pager.prev.href} className={cn(buttonVariants({ variant: 'outline' }))} > - + {pager.prev.title} )} @@ -36,7 +36,7 @@ export function DocsPager({ doc }: DocsPagerProps) { className={buttonVariants({ variant: 'outline' })} > {pager.next.title} - + )}
diff --git a/apps/www/src/components/plate-ui/playground-insert-dropdown-menu.tsx b/apps/www/src/components/plate-ui/playground-insert-dropdown-menu.tsx index 4b44e881e..4febf2643 100644 --- a/apps/www/src/components/plate-ui/playground-insert-dropdown-menu.tsx +++ b/apps/www/src/components/plate-ui/playground-insert-dropdown-menu.tsx @@ -252,7 +252,7 @@ export function PlaygroundInsertDropdownMenu(props: DropdownMenuProps) { focusEditor(editor); }} > - + {itemLabel} ) diff --git a/apps/www/src/components/plate-ui/playground-mode-dropdown-menu.tsx b/apps/www/src/components/plate-ui/playground-mode-dropdown-menu.tsx index 00bc04587..d5e5c4c98 100644 --- a/apps/www/src/components/plate-ui/playground-mode-dropdown-menu.tsx +++ b/apps/www/src/components/plate-ui/playground-mode-dropdown-menu.tsx @@ -27,19 +27,19 @@ export function PlaygroundModeDropdownMenu(props: DropdownMenuProps) { const item = { editing: ( <> - + Editing ), suggesting: ( <> - + Suggesting ), viewing: ( <> - + Viewing ), diff --git a/apps/www/src/components/plate-ui/playground-more-dropdown-menu.tsx b/apps/www/src/components/plate-ui/playground-more-dropdown-menu.tsx index cd33d768b..754edb2e8 100644 --- a/apps/www/src/components/plate-ui/playground-more-dropdown-menu.tsx +++ b/apps/www/src/components/plate-ui/playground-more-dropdown-menu.tsx @@ -45,7 +45,7 @@ export function PlaygroundMoreDropdownMenu(props: DropdownMenuProps) { focusEditor(editor); }} > - + Highlight @@ -58,7 +58,7 @@ export function PlaygroundMoreDropdownMenu(props: DropdownMenuProps) { focusEditor(editor); }} > - + Keyboard input @@ -71,7 +71,7 @@ export function PlaygroundMoreDropdownMenu(props: DropdownMenuProps) { focusEditor(editor); }} > - + Superscript {/* (⌘+,) */} @@ -84,7 +84,7 @@ export function PlaygroundMoreDropdownMenu(props: DropdownMenuProps) { focusEditor(editor); }} > - + Subscript {/* (⌘+.) */} diff --git a/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx b/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx index 6b4de7ee2..726497866 100644 --- a/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx +++ b/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx @@ -139,7 +139,7 @@ export function PlaygroundTurnIntoDropdownMenu(props: DropdownMenuProps) { isDropdown className="lg:min-w-[130px]" > - + {selectedItemLabel} @@ -174,7 +174,7 @@ export function PlaygroundTurnIntoDropdownMenu(props: DropdownMenuProps) { value={itemValue} className="min-w-[180px]" > - + {label} ))} diff --git a/apps/www/src/components/plugins-tab-content.tsx b/apps/www/src/components/plugins-tab-content.tsx index acd303b32..f376b7aa2 100644 --- a/apps/www/src/components/plugins-tab-content.tsx +++ b/apps/www/src/components/plugins-tab-content.tsx @@ -112,9 +112,9 @@ export function PluginsTabContentLazy() { }} > {showComponents ? ( - + ) : ( - + )}
@@ -167,13 +167,13 @@ export function PluginsTabContent() { }} > Done - +
{loadingSettings ? (
- +
) : ( diff --git a/apps/www/src/components/setting-checkbox.tsx b/apps/www/src/components/setting-checkbox.tsx index 6764318b7..9832cfbd8 100644 --- a/apps/www/src/components/setting-checkbox.tsx +++ b/apps/www/src/components/setting-checkbox.tsx @@ -89,7 +89,7 @@ export function SettingCheckbox({ className="cursor-pointer leading-none" > {dependencies.length} - + @@ -120,7 +120,7 @@ export function SettingCheckbox({ className="cursor-pointer leading-none" > {conflicts.length} - + @@ -153,12 +153,9 @@ export function SettingCheckbox({ - +
)} @@ -210,10 +207,10 @@ export function SettingCheckbox({ target="_blank" className={cn( buttonVariants({ variant: 'ghost' }), - 'h-9 w-9 p-0' + 'size-9 p-0' )} > - +
)} diff --git a/apps/www/src/components/settings-combobox.tsx b/apps/www/src/components/settings-combobox.tsx index 6c369dbe9..c43bd206b 100644 --- a/apps/www/src/components/settings-combobox.tsx +++ b/apps/www/src/components/settings-combobox.tsx @@ -98,7 +98,7 @@ export function SettingsCombobox() { > {(customizerPlugins as any)[valueId]?.label ?? 'Select a value...'} - + )} @@ -139,7 +139,7 @@ export function SettingsCombobox() { > @@ -162,7 +162,7 @@ export function SettingsCombobox() { })} href={route} > - + )} diff --git a/apps/www/src/components/settings-toggle.tsx b/apps/www/src/components/settings-toggle.tsx index ce64e77f7..245ac7c28 100644 --- a/apps/www/src/components/settings-toggle.tsx +++ b/apps/www/src/components/settings-toggle.tsx @@ -24,7 +24,7 @@ export function SettingsToggle() { pressed={showSettings} onPressedChange={(pressed) => settingsStore.set.showSettings(pressed)} > - + diff --git a/apps/www/src/components/site-header.tsx b/apps/www/src/components/site-header.tsx index 26c213a38..e7d031719 100644 --- a/apps/www/src/components/site-header.tsx +++ b/apps/www/src/components/site-header.tsx @@ -55,7 +55,7 @@ export async function SiteHeader() { 'w-9 px-0' )} > - + GitHub @@ -72,7 +72,7 @@ export async function SiteHeader() { 'w-9 px-0' )} > - + Discord diff --git a/apps/www/src/components/star-on-github.tsx b/apps/www/src/components/star-on-github.tsx index 7301cb3b6..f59452139 100644 --- a/apps/www/src/components/star-on-github.tsx +++ b/apps/www/src/components/star-on-github.tsx @@ -36,10 +36,10 @@ export function StarOnGithub({ count }: { count: number }) { ) )} /> - + Star on GitHub
- + {count > 0 && ( Style: diff --git a/apps/www/src/components/tailwind-indicator.tsx b/apps/www/src/components/tailwind-indicator.tsx index 9ca131055..d9d5c663f 100644 --- a/apps/www/src/components/tailwind-indicator.tsx +++ b/apps/www/src/components/tailwind-indicator.tsx @@ -2,7 +2,7 @@ export function TailwindIndicator() { if (process.env.NODE_ENV === 'production') return null; return ( -
+
xs
sm diff --git a/apps/www/src/components/theme-component.tsx b/apps/www/src/components/theme-component.tsx index c44b5c484..9e866b1af 100644 --- a/apps/www/src/components/theme-component.tsx +++ b/apps/www/src/components/theme-component.tsx @@ -41,7 +41,7 @@ export function ThemeComponent({ name, ...props }: ThemeComponentProps) { - + Loading...
} diff --git a/apps/www/src/components/themes-button.tsx b/apps/www/src/components/themes-button.tsx index d8396f9dd..b2c1d7d17 100644 --- a/apps/www/src/components/themes-button.tsx +++ b/apps/www/src/components/themes-button.tsx @@ -52,26 +52,28 @@ export function ThemesButton() { }) } className={cn( - 'flex h-9 w-9 items-center justify-center rounded-full border-2 text-xs', + 'flex size-9 items-center justify-center rounded-full border-2 text-xs', isActive ? 'border-[--theme-primary]' : 'border-transparent' )} style={ { - '--theme-primary': `hsl(${theme?.activeColor[ - mode === 'dark' ? 'dark' : 'light' - ]})`, + '--theme-primary': `hsl(${ + theme?.activeColor[ + mode === 'dark' ? 'dark' : 'light' + ] + })`, } as React.CSSProperties } > {isActive && ( - + )} {theme.label} @@ -89,11 +91,11 @@ export function ThemesButton() { ) : (
- - - - - + + + + +
)}
@@ -105,7 +107,7 @@ export function ThemesButton() { settingsStore.set.showSettings(true); }} > - + Themes
diff --git a/apps/www/src/components/themes-tab-content.tsx b/apps/www/src/components/themes-tab-content.tsx index ea2093097..d9ad3fc1e 100644 --- a/apps/www/src/components/themes-tab-content.tsx +++ b/apps/www/src/components/themes-tab-content.tsx @@ -53,7 +53,7 @@ export function ThemesTabContent() { - + About styles - {isActive && } + {isActive && } {theme.label} diff --git a/apps/www/src/components/ui/accordion.tsx b/apps/www/src/components/ui/accordion.tsx index e59504feb..6152c6ab6 100644 --- a/apps/www/src/components/ui/accordion.tsx +++ b/apps/www/src/components/ui/accordion.tsx @@ -38,11 +38,11 @@ const AccordionTrigger = React.forwardRef< {...props} > {iconVariant === 'plus' && ( - + )} {children} {iconVariant === 'chevron' && ( - + )} diff --git a/apps/www/src/components/ui/menubar.tsx b/apps/www/src/components/ui/menubar.tsx index 88c4ac5c4..39accceb0 100644 --- a/apps/www/src/components/ui/menubar.tsx +++ b/apps/www/src/components/ui/menubar.tsx @@ -61,7 +61,7 @@ const MenubarSubTrigger = React.forwardRef< {...props} > {children} - + )); MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName; @@ -73,7 +73,7 @@ const MenubarSubContent = React.forwardRef< - + - + {children} @@ -159,9 +159,9 @@ const MenubarRadioItem = React.forwardRef< )} {...props} > - + - + {children} diff --git a/apps/www/src/components/ui/radio-group.tsx b/apps/www/src/components/ui/radio-group.tsx index eade70b00..bef96f176 100644 --- a/apps/www/src/components/ui/radio-group.tsx +++ b/apps/www/src/components/ui/radio-group.tsx @@ -27,13 +27,13 @@ const RadioGroupItem = React.forwardRef< - + ); diff --git a/apps/www/src/components/ui/scroll-area.tsx b/apps/www/src/components/ui/scroll-area.tsx index d2ff4286d..d346562fc 100644 --- a/apps/www/src/components/ui/scroll-area.tsx +++ b/apps/www/src/components/ui/scroll-area.tsx @@ -13,7 +13,7 @@ const ScrollArea = React.forwardRef< className={cn('relative overflow-hidden', className)} {...props} > - + {children} @@ -32,9 +32,9 @@ const ScrollBar = React.forwardRef< className={cn( 'flex touch-none select-none transition-colors', orientation === 'vertical' && - 'h-full w-2.5 border-l border-l-transparent p-[1px]', + 'h-full w-2.5 border-l border-l-transparent p-px', orientation === 'horizontal' && - 'h-2.5 flex-col border-t border-t-transparent p-[1px]', + 'h-2.5 flex-col border-t border-t-transparent p-px', className )} {...props} diff --git a/apps/www/src/components/ui/select.tsx b/apps/www/src/components/ui/select.tsx index 58efcc56a..25134a0c1 100644 --- a/apps/www/src/components/ui/select.tsx +++ b/apps/www/src/components/ui/select.tsx @@ -25,7 +25,7 @@ const SelectTrigger = React.forwardRef< > {children} - + )); @@ -43,7 +43,7 @@ const SelectScrollUpButton = React.forwardRef< )} {...props} > - + )); SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName; @@ -60,7 +60,7 @@ const SelectScrollDownButton = React.forwardRef< )} {...props} > - + )); SelectScrollDownButton.displayName = @@ -74,7 +74,7 @@ const SelectContent = React.forwardRef< - + - + diff --git a/apps/www/src/components/ui/sheet.tsx b/apps/www/src/components/ui/sheet.tsx index 2f11981be..1252a8c1f 100644 --- a/apps/www/src/components/ui/sheet.tsx +++ b/apps/www/src/components/ui/sheet.tsx @@ -31,13 +31,12 @@ interface SheetPortalProps function SheetPortal({ position, - className, children, modal, ...props }: SheetPortalProps) { return ( - +
{children}
 ); @@ -116,7 +115,7 @@ const SheetContent = React.forwardRef< className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary" onClick={onClose} > - + Close )} diff --git a/apps/www/src/components/ui/toggle.tsx b/apps/www/src/components/ui/toggle.tsx index 06781c419..57b2be5b9 100644 --- a/apps/www/src/components/ui/toggle.tsx +++ b/apps/www/src/components/ui/toggle.tsx @@ -7,7 +7,7 @@ import { cva } from 'class-variance-authority'; export const toggleVariants = cva( cn( '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', - '[&_svg:not([data-icon])]:h-5 [&_svg:not([data-icon])]:w-5' + '[&_svg:not([data-icon])]:size-5' ), { variants: { diff --git a/apps/www/src/lib/rehype-component.ts b/apps/www/src/lib/rehype-component.ts index 913f404e0..231475ee8 100644 --- a/apps/www/src/lib/rehype-component.ts +++ b/apps/www/src/lib/rehype-component.ts @@ -12,7 +12,7 @@ import { styles } from '../registry/styles'; // NOTE: shadcn fork export function rehypeComponent() { return async (tree: UnistTree) => { - visit(tree, (node: UnistNode) => { + visit(tree as any, (node: UnistNode) => { if (node.name === 'ComponentSource' || node.name === 'ComponentPreview') { const name = getNodeAttributeByName(node, 'name')?.value as string; diff --git a/apps/www/src/lib/rehype-npm-command.ts b/apps/www/src/lib/rehype-npm-command.ts index 22151fad6..0e3b8033b 100644 --- a/apps/www/src/lib/rehype-npm-command.ts +++ b/apps/www/src/lib/rehype-npm-command.ts @@ -4,7 +4,7 @@ import { UnistNode, UnistTree } from '@/types/unist'; export function rehypeNpmCommand() { return (tree: UnistTree) => { - visit(tree, (node: UnistNode) => { + visit(tree as any, (node: UnistNode) => { if (node.type !== 'element' || node?.tagName !== 'pre') { return; } diff --git a/apps/www/src/registry/default/example/mode-toggle.tsx b/apps/www/src/registry/default/example/mode-toggle.tsx index 792b69d32..038a9e135 100644 --- a/apps/www/src/registry/default/example/mode-toggle.tsx +++ b/apps/www/src/registry/default/example/mode-toggle.tsx @@ -19,22 +19,22 @@ export default function ModeToggle() { setTheme('light')}> - + Light setTheme('dark')}> - + Dark setTheme('system')}> - + System diff --git a/apps/www/src/registry/default/example/version-history-demo.tsx b/apps/www/src/registry/default/example/version-history-demo.tsx index 2f0b693b5..84d1f5718 100644 --- a/apps/www/src/registry/default/example/version-history-demo.tsx +++ b/apps/www/src/registry/default/example/version-history-demo.tsx @@ -33,8 +33,8 @@ import { } from '@udecode/plate-paragraph'; import { useSelected } from 'slate-react'; -import { Button } from '../plate-ui/button'; -import { ParagraphElement } from '../plate-ui/paragraph-element'; +import { Button } from '@/registry/default/plate-ui/button'; +import { ParagraphElement } from '@/registry/default/plate-ui/paragraph-element'; const ELEMENT_INLINE = 'inline'; @@ -177,7 +177,7 @@ function DiffLeaf({ children, ...props }: PlateLeafProps) { insert: 'ins', delete: 'del', update: 'span', - }[diffOperation.type] as React.ElementType; + }[diffOperation.type] as any; return ( diff --git a/apps/www/src/registry/default/plate-ui/avatar.tsx b/apps/www/src/registry/default/plate-ui/avatar.tsx index 12c4cac2d..3aad74b51 100644 --- a/apps/www/src/registry/default/plate-ui/avatar.tsx +++ b/apps/www/src/registry/default/plate-ui/avatar.tsx @@ -5,15 +5,15 @@ import { withCn } from '@udecode/cn'; export const Avatar = withCn( AvatarPrimitive.Root, - 'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full' + 'relative flex size-10 shrink-0 overflow-hidden rounded-full' ); export const AvatarImage = withCn( AvatarPrimitive.Image, - 'aspect-square h-full w-full' + 'aspect-square size-full' ); export const AvatarFallback = withCn( AvatarPrimitive.Fallback, - 'flex h-full w-full items-center justify-center rounded-full bg-muted' + 'flex size-full items-center justify-center rounded-full bg-muted' ); diff --git a/apps/www/src/registry/default/plate-ui/button.tsx b/apps/www/src/registry/default/plate-ui/button.tsx index 268e629e5..1dfa60f7d 100644 --- a/apps/www/src/registry/default/plate-ui/button.tsx +++ b/apps/www/src/registry/default/plate-ui/button.tsx @@ -23,9 +23,9 @@ export const buttonVariants = cva( default: 'h-10 px-4 py-2', xs: 'h-8 rounded-md px-3', sm: 'h-9 rounded-md px-3', - sms: 'h-9 w-9 rounded-md px-0', + sms: 'size-9 rounded-md px-0', lg: 'h-11 rounded-md px-8', - icon: 'h-10 w-10', + icon: 'size-10', none: '', }, isMenu: { diff --git a/apps/www/src/registry/default/plate-ui/checkbox.tsx b/apps/www/src/registry/default/plate-ui/checkbox.tsx index 077812314..78105d1fe 100644 --- a/apps/www/src/registry/default/plate-ui/checkbox.tsx +++ b/apps/www/src/registry/default/plate-ui/checkbox.tsx @@ -11,7 +11,7 @@ export const Checkbox = withRef( ( - + ) diff --git a/apps/www/src/registry/default/plate-ui/cloud-attachment-element.tsx b/apps/www/src/registry/default/plate-ui/cloud-attachment-element.tsx index 56528f1d2..3fdd8d575 100644 --- a/apps/www/src/registry/default/plate-ui/cloud-attachment-element.tsx +++ b/apps/www/src/registry/default/plate-ui/cloud-attachment-element.tsx @@ -47,7 +47,7 @@ export function CloudAttachmentElement({
{upload.status === 'success' && ( diff --git a/apps/www/src/registry/default/plate-ui/cloud-image-element.tsx b/apps/www/src/registry/default/plate-ui/cloud-image-element.tsx index 95e62949d..f9f74fd8a 100644 --- a/apps/www/src/registry/default/plate-ui/cloud-image-element.tsx +++ b/apps/www/src/registry/default/plate-ui/cloud-image-element.tsx @@ -85,7 +85,7 @@ export function CloudImageElement({ alt="" /> )} -
+
{selected && focused && ( diff --git a/apps/www/src/registry/default/plate-ui/code-block-combobox.tsx b/apps/www/src/registry/default/plate-ui/code-block-combobox.tsx index e77c6895f..4e92f24cc 100644 --- a/apps/www/src/registry/default/plate-ui/code-block-combobox.tsx +++ b/apps/www/src/registry/default/plate-ui/code-block-combobox.tsx @@ -54,7 +54,7 @@ export function CodeBlockCombobox() { ? languages.find((language) => language.value === state.value) ?.label : 'Plain Text'} - + @@ -75,7 +75,7 @@ export function CodeBlockCombobox() { > diff --git a/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx b/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx index dc0653655..265819a6b 100644 --- a/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx +++ b/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx @@ -35,7 +35,7 @@ export function ColorDropdownMenuItem({ variant: 'outline', isMenu: true, }), - 'h-6 w-6 border border-solid border-muted p-0', + 'size-6 border border-solid border-muted p-0', !isBrightColor && 'border-transparent text-white', className )} diff --git a/apps/www/src/registry/default/plate-ui/color-input.tsx b/apps/www/src/registry/default/plate-ui/color-input.tsx index 709fa63ff..f41d3608e 100644 --- a/apps/www/src/registry/default/plate-ui/color-input.tsx +++ b/apps/www/src/registry/default/plate-ui/color-input.tsx @@ -19,7 +19,7 @@ export const ColorInput = withRef<'input'>( - + {children} @@ -29,7 +29,7 @@ export function CommandDialog({ children, ...props }: DialogProps) { export const CommandInput = withRef( ({ className, ...props }, ref) => (
- + + {user.name?.[0]} diff --git a/apps/www/src/registry/default/plate-ui/comment-more-dropdown.tsx b/apps/www/src/registry/default/plate-ui/comment-more-dropdown.tsx index 051d12a3a..7120b89bf 100644 --- a/apps/www/src/registry/default/plate-ui/comment-more-dropdown.tsx +++ b/apps/www/src/registry/default/plate-ui/comment-more-dropdown.tsx @@ -29,7 +29,7 @@ export function CommentMoreDropdown() { diff --git a/apps/www/src/registry/default/plate-ui/comment-resolve-button.tsx b/apps/www/src/registry/default/plate-ui/comment-resolve-button.tsx index 98ba45c35..71ac6f0e7 100644 --- a/apps/www/src/registry/default/plate-ui/comment-resolve-button.tsx +++ b/apps/www/src/registry/default/plate-ui/comment-resolve-button.tsx @@ -22,9 +22,9 @@ export function CommentResolveButton() { )} > {comment.isResolved ? ( - + ) : ( - + )} ); diff --git a/apps/www/src/registry/default/plate-ui/cursor-overlay.tsx b/apps/www/src/registry/default/plate-ui/cursor-overlay.tsx index 67b992943..6b3f69c16 100644 --- a/apps/www/src/registry/default/plate-ui/cursor-overlay.tsx +++ b/apps/www/src/registry/default/plate-ui/cursor-overlay.tsx @@ -33,7 +33,7 @@ export function Cursor({
( {children} - + Close diff --git a/apps/www/src/registry/default/plate-ui/draggable.tsx b/apps/www/src/registry/default/plate-ui/draggable.tsx index 97a6cf540..e81377465 100644 --- a/apps/www/src/registry/default/plate-ui/draggable.tsx +++ b/apps/www/src/registry/default/plate-ui/draggable.tsx @@ -80,7 +80,7 @@ export interface DraggableProps const dragHandle = ( - + Drag to move @@ -125,7 +125,7 @@ export const Draggable = withRef<'div', DraggableProps>( classNames.blockToolbar )} > -
+
{isHovered && dragHandle}
diff --git a/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx index 9c592f436..d62bdbd40 100644 --- a/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx @@ -39,19 +39,19 @@ export const DropdownMenuSubTrigger = withRef< {...props} > {children} - + )); export const DropdownMenuSubContent = withCn( DropdownMenuPrimitive.SubContent, - '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' + 'z-50 min-w-32 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' ); const DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, { sideOffset: 4, className: cn( - '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' + 'z-50 min-w-32 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' ), }); @@ -95,9 +95,9 @@ export const DropdownMenuCheckboxItem = withRef< )} {...props} > - + - + {children} @@ -120,9 +120,9 @@ export const DropdownMenuRadioItem = withRef< {...props} > {!hideIcon && ( - + - + )} diff --git a/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx b/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx index fdb737186..cb20b0ff2 100644 --- a/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx +++ b/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx @@ -45,7 +45,7 @@ const Button = memo( onClick={() => onSelect(emoji)} onMouseEnter={() => onMouseOver(emoji)} onMouseLeave={() => onMouseOver()} - className="group relative flex h-[36px] w-[36px] cursor-pointer items-center justify-center border-none bg-transparent text-2xl leading-none" + className="group relative flex size-[36px] cursor-pointer items-center justify-center border-none bg-transparent text-2xl leading-none" >