From 97f340452b1a6d0333dc777ef21fb3268ff8eb3f Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 20 Mar 2024 17:29:06 +0100 Subject: [PATCH 1/5] =?UTF-8?q?=E2=AC=86=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/e2e-examples/package.json | 6 +- apps/www/package.json | 82 +- .../registry/styles/default/avatar.json | 2 +- .../registry/styles/default/button.json | 2 +- .../registry/styles/default/checkbox.json | 2 +- .../public/registry/styles/default/cloud.json | 4 +- .../styles/default/code-block-element.json | 2 +- .../styles/default/color-dropdown-menu.json | 4 +- .../registry/styles/default/command.json | 2 +- .../styles/default/comments-popover.json | 6 +- .../styles/default/cursor-overlay.json | 2 +- .../registry/styles/default/dialog.json | 2 +- .../registry/styles/default/draggable.json | 2 +- .../styles/default/dropdown-menu.json | 2 +- .../styles/default/emoji-dropdown-menu.json | 4 +- .../styles/default/insert-dropdown-menu.json | 2 +- .../styles/default/link-floating-toolbar.json | 2 +- .../styles/default/media-embed-element.json | 2 +- .../styles/default/media-popover.json | 2 +- .../styles/default/mode-dropdown-menu.json | 2 +- .../styles/default/more-dropdown-menu.json | 2 +- .../registry/styles/default/separator.json | 2 +- .../styles/default/table-cell-element.json | 2 +- .../styles/default/table-element.json | 2 +- .../registry/styles/default/toolbar.json | 2 +- .../default/turn-into-dropdown-menu.json | 2 +- apps/www/src/app/_components/home-tabs.tsx | 2 +- .../src/app/_components/installation-code.tsx | 5 +- apps/www/src/app/announcement-button.tsx | 2 +- apps/www/src/app/docs/[[...slug]]/page.tsx | 6 +- apps/www/src/app/page.tsx | 2 +- apps/www/src/components/api-list.tsx | 2 +- apps/www/src/components/command-menu.tsx | 16 +- apps/www/src/components/component-preview.tsx | 6 +- apps/www/src/components/copy-button.tsx | 22 +- apps/www/src/components/copy-code-button.tsx | 8 +- apps/www/src/components/customizer-drawer.tsx | 4 +- apps/www/src/components/icons.tsx | 8 +- apps/www/src/components/main-nav.tsx | 2 +- apps/www/src/components/mobile-nav.tsx | 4 +- apps/www/src/components/pager.tsx | 4 +- .../playground-insert-dropdown-menu.tsx | 2 +- .../playground-mode-dropdown-menu.tsx | 6 +- .../playground-more-dropdown-menu.tsx | 8 +- .../playground-turn-into-dropdown-menu.tsx | 4 +- .../src/components/plugins-tab-content.tsx | 8 +- apps/www/src/components/setting-checkbox.tsx | 15 +- apps/www/src/components/settings-combobox.tsx | 6 +- apps/www/src/components/settings-toggle.tsx | 2 +- apps/www/src/components/site-header.tsx | 4 +- apps/www/src/components/star-on-github.tsx | 4 +- apps/www/src/components/style-switcher.tsx | 5 +- .../www/src/components/tailwind-indicator.tsx | 2 +- apps/www/src/components/theme-component.tsx | 2 +- apps/www/src/components/themes-button.tsx | 26 +- .../www/src/components/themes-tab-content.tsx | 12 +- apps/www/src/components/ui/accordion.tsx | 4 +- apps/www/src/components/ui/menubar.tsx | 14 +- apps/www/src/components/ui/radio-group.tsx | 4 +- apps/www/src/components/ui/scroll-area.tsx | 6 +- apps/www/src/components/ui/select.tsx | 12 +- apps/www/src/components/ui/sheet.tsx | 5 +- apps/www/src/components/ui/toggle.tsx | 2 +- apps/www/src/lib/rehype-component.ts | 2 +- apps/www/src/lib/rehype-npm-command.ts | 2 +- .../registry/default/example/mode-toggle.tsx | 10 +- .../default/example/version-history-demo.tsx | 6 +- .../src/registry/default/plate-ui/avatar.tsx | 6 +- .../src/registry/default/plate-ui/button.tsx | 4 +- .../registry/default/plate-ui/checkbox.tsx | 4 +- .../plate-ui/cloud-attachment-element.tsx | 2 +- .../default/plate-ui/cloud-image-element.tsx | 2 +- .../default/plate-ui/code-block-combobox.tsx | 4 +- .../plate-ui/color-dropdown-menu-items.tsx | 2 +- .../registry/default/plate-ui/color-input.tsx | 2 +- .../src/registry/default/plate-ui/command.tsx | 6 +- .../default/plate-ui/comment-avatar.tsx | 2 +- .../plate-ui/comment-more-dropdown.tsx | 2 +- .../plate-ui/comment-resolve-button.tsx | 4 +- .../default/plate-ui/cursor-overlay.tsx | 2 +- .../src/registry/default/plate-ui/dialog.tsx | 4 +- .../registry/default/plate-ui/draggable.tsx | 4 +- .../default/plate-ui/dropdown-menu.tsx | 14 +- .../default/plate-ui/emoji-picker-content.tsx | 8 +- .../emoji-picker-search-and-clear.tsx | 6 +- .../default/plate-ui/insert-dropdown-menu.tsx | 2 +- .../plate-ui/link-floating-toolbar.tsx | 4 +- .../default/plate-ui/media-embed-element.tsx | 4 +- .../default/plate-ui/media-popover.tsx | 4 +- .../default/plate-ui/mode-dropdown-menu.tsx | 4 +- .../default/plate-ui/more-dropdown-menu.tsx | 4 +- .../registry/default/plate-ui/separator.tsx | 4 +- .../default/plate-ui/table-cell-element.tsx | 4 +- .../default/plate-ui/table-element.tsx | 8 +- .../src/registry/default/plate-ui/toolbar.tsx | 6 +- .../plate-ui/turn-into-dropdown-menu.tsx | 4 +- apps/www/src/types/unist.ts | 2 +- config/eslint/bases/react.cjs | 2 - package.json | 104 +- packages/alignment/src/types.ts | 8 +- packages/caption/package.json | 2 +- packages/cli/package.json | 24 +- .../src/hooks/useToggleCodeBlockButton.ts | 1 + packages/core/package.json | 14 +- packages/core/src/hooks/useEditableProps.ts | 2 +- .../core/src/types/misc/dom-attributes.ts | 3 - packages/core/src/types/plugin/DOMHandlers.ts | 2 - .../utils/EmojiLibrary/EmojiInlineLibrary.ts | 4 +- packages/floating/package.json | 2 +- packages/serializer-csv/package.json | 2 +- packages/serializer-docx/package.json | 2 +- packages/serializer-html/package.json | 4 +- .../src/utils/stripClassNames.ts | 6 +- packages/utils/src/types/DeepPartial.ts | 23 +- packages/yjs/package.json | 6 +- packages/yjs/src/withPlateYjs.ts | 2 +- .../plate-playground-template/package.json | 2 +- templates/plate-template/package.json | 2 +- yarn.lock | 5619 +++++++++++------ 119 files changed, 3909 insertions(+), 2467 deletions(-) diff --git a/apps/e2e-examples/package.json b/apps/e2e-examples/package.json index e14d83fcde..ca8eea80b3 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 6d8ff0a144..388fc4b4eb 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 273824c7b4..c04b6ca594 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 e5c6a23608..df87df05d5 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 4ba4da9277..1778792ca8 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 a04abcf72c..f17a7cce6a 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 0c9cd9847b..dd26ba1f0e 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 7b7955e215..d0a93b6725 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 e14d99eefc..c826e91dec 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 e66c9179c8..36ab641776 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 0cd1b2847f..63f9898d7c 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 c09b66c857..cbeeab81f2 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 ebb1a6a5e7..2e4c38ba52 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 ed654ace6f..f0321b1e08 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 69ac9de712..544f415abf 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 7fc7582545..acbcdd32ec 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 2865865fdf..07df3a7571 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 8c7431f9eb..ee3767e176 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 c2d66d945e..9d50db8883 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 482eba98d1..e4058fc6f9 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 71a6c439d1..e84a1640b7 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 38faf763e0..e89e37c1b6 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 5bd2b2f034..175092c78e 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 d72e6c9b6e..b192b2672c 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 3e3adc127d..26666421e3 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 82d4faeedc..8a58e7f31b 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 c22ebf6985..15fa561257 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 0bf887248d..536484aa3f 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 194312b9ab..6423ce1af8 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 b669710d97..c9e8a89827 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 32844d57eb..8ebd8a374e 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 4a8155a25d..8f70b4a9f0 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 ca2f622270..fd4b7462b2 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 76f466440e..d913e88f10 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 d6d174ae04..5e05adc469 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 4d986924ba..dd940f45de 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 0557605da9..4583022e0c 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 e5decb1c56..11c036db61 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 1948d4bcf2..ff58690376 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 c1683aae81..d91dd6eb7c 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 49b1c6dfcc..69f9a1405a 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 4b44e881e7..4febf26437 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 00bc045878..d5e5c4c98f 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 cd33d768b5..754edb2e8c 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 6b4de7ee23..726497866c 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 acd303b324..f376b7aa22 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 6764318b78..9832cfbd8b 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 6c369dbe9c..c43bd206be 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 ce64e77f72..245ac7c28c 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 26c213a384..e7d0317191 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 7301cb3b61..f59452139e 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 9ca1310556..d9d5c663fe 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 c44b5c484f..9e866b1afe 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 d8396f9dd4..b2c1d7d175 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 ea20930979..d9ad3fc1e5 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 e59504febf..6152c6ab6d 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 88c4ac5c44..39accceb0b 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 eade70b008..bef96f1762 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 d2ff4286d5..d346562fc9 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 58efcc56a2..25134a0c16 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 2f11981bec..1252a8c1f5 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 06781c4197..57b2be5b92 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 913f404e02..231475ee81 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 22151fad6b..0e3b8033b9 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 792b69d32c..038a9e135f 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 2f0b693b58..84d1f5718d 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 12c4cac2d1..3aad74b518 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 268e629e5a..1dfa60f7da 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 0778123142..78105d1feb 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 56528f1d28..3fdd8d5757 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 95e62949d7..f9f74fd8a4 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 e77c6895f8..4e92f24cc4 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 dc0653655a..265819a6bb 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 709fa63ffd..f41d3608e1 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 051d12a3af..7120b89bf0 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 98ba45c359..71ac6f0e76 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 67b9929438..6b3f69c165 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 97a6cf540b..e813774650 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 9c592f4369..d62bdbd404 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 fdb7371865..cb20b0ff26 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" >