diff --git a/.eslintrc.cjs b/.eslintrc.cjs index e4b702d0ab..326e0906d6 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -36,6 +36,14 @@ module.exports = { '**/scripts/*.mts', ], overrides: [ + { + files: ['**/registry/default/**/*'], + rules: { + 'jsx-a11y/iframe-has-title': 'off', + 'jsx-a11y/media-has-caption': 'off', + 'react/jsx-no-comment-textnodes': 'off', + }, + }, { files: ['*.ts', '*.tsx', '*.mts'], parserOptions: { diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx index 9c325803e5..5c4af4da9f 100644 --- a/apps/www/content/docs/components/changelog.mdx +++ b/apps/www/content/docs/components/changelog.mdx @@ -11,6 +11,14 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver ## November 2024 #16 +### November 21 #16.8 + +Shadcn sync: + +- `input`: add `text-base md:text-sm` +- `textarea`: add `text-base md:text-sm` +- `editor`(`ai`, `aiChat` variants): add `text-base md:text-sm` + ### November 14 #16.7 - `toolbar`: Add `ToolbarSplitButton`, `ToolbarSplitButtonPrimary`, `ToolbarSplitButtonSecondary` diff --git a/apps/www/content/docs/components/cli.mdx b/apps/www/content/docs/components/cli.mdx index 6488d65701..e925154f58 100644 --- a/apps/www/content/docs/components/cli.mdx +++ b/apps/www/content/docs/components/cli.mdx @@ -32,6 +32,7 @@ Options: -f, --force force overwrite of existing components.json. (default: false) -y, --yes skip confirmation prompt. (default: false) -c, --cwd the working directory. defaults to the current directory. + -a, --all add all available components. (default: false) -n, --name registry name. (default: plate) -s, --silent mute output (default: false) --src-dir use the src directory when creating a new project (default: false) @@ -118,13 +119,6 @@ Here's an example `components.json` file configured for [shadcn/ui](https://ui.s "style": "default", "rsc": true, "tsx": true, - "aliases": { - "components": "@/components", - "hooks": "@/hooks", - "lib": "@/lib", - "ui": "@/components/ui", - "utils": "@/lib/utils" - }, "tailwind": { "baseColor": "slate", "config": "tailwind.config.ts", @@ -132,6 +126,14 @@ Here's an example `components.json` file configured for [shadcn/ui](https://ui.s "cssVariables": true, "prefix": "" }, + "aliases": { + "components": "@/components", + "hooks": "@/hooks", + "lib": "@/lib", + "ui": "@/components/ui", + "utils": "@/lib/utils" + }, + "iconLibrary": "lucide", "registries": { "plate": { "aliases": { diff --git a/apps/www/content/docs/components/dark-mode/next.mdx b/apps/www/content/docs/components/dark-mode/next.mdx index 9bcb06461a..188e59c8c6 100644 --- a/apps/www/content/docs/components/dark-mode/next.mdx +++ b/apps/www/content/docs/components/dark-mode/next.mdx @@ -22,9 +22,11 @@ npm install next-themes import * as React from 'react'; import { ThemeProvider as NextThemesProvider } from 'next-themes'; -import { type ThemeProviderProps } from 'next-themes/dist/types'; -export function ThemeProvider({ children, ...props }: ThemeProviderProps) { +export function ThemeProvider({ + children, + ...props +}: React.ComponentProps) { return {children}; } ``` diff --git a/apps/www/content/docs/components/installation/manual.mdx b/apps/www/content/docs/components/installation/manual.mdx index c921b1c584..70c3b4fc87 100644 --- a/apps/www/content/docs/components/installation/manual.mdx +++ b/apps/www/content/docs/components/installation/manual.mdx @@ -21,6 +21,8 @@ npm install slate slate-dom slate-react slate-history slate-hyperscript @udecode ### Configure path aliases +Configure the path aliases in your `tsconfig.json` file. + ```json {3-6} title="tsconfig.json" { "compilerOptions": { @@ -42,7 +44,7 @@ npm install slate slate-dom slate-react slate-history slate-hyperscript @udecode ### Configure components.json -Create [components.json](/docs/components/components-json) at the root of your project, then add the following: +Create a [components.json](/docs/components/components-json) in the root of your project. ```json { @@ -50,13 +52,6 @@ Create [components.json](/docs/components/components-json) at the root of your p "style": "default", "rsc": true, "tsx": true, - "aliases": { - "components": "@/components", - "hooks": "@/hooks", - "lib": "@/lib", - "ui": "@/components/ui", - "utils": "@/lib/utils" - }, "tailwind": { "baseColor": "slate", "config": "tailwind.config.ts", @@ -64,6 +59,14 @@ Create [components.json](/docs/components/components-json) at the root of your p "cssVariables": true, "prefix": "" }, + "aliases": { + "components": "@/components", + "hooks": "@/hooks", + "lib": "@/lib", + "ui": "@/components/ui", + "utils": "@/lib/utils" + }, + "iconLibrary": "lucide", "registries": { "plate": { "aliases": { diff --git a/apps/www/next.config.ts b/apps/www/next.config.ts index 5bf512c151..b4c16f3f40 100644 --- a/apps/www/next.config.ts +++ b/apps/www/next.config.ts @@ -26,6 +26,10 @@ const nextConfig = async (phase: string) => { ], }, + outputFileTracingIncludes: { + '/blocks/*': ['./registry/**/*'], + }, + // Configure domains to allow for optimized image loading. // https://nextjs.org/docs/api-reference/next.config.js/react-strict-mod reactStrictMode: true, diff --git a/apps/www/package.json b/apps/www/package.json index 5a8612e7ca..98fb2974f3 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -144,7 +144,7 @@ "match-sorter": "6.3.4", "next": "15.0.3", "next-contentlayer2": "^0.4.6", - "next-themes": "^0.3.0", + "next-themes": "^0.4.3", "nuqs": "^2.0.3", "prismjs": "^1.29.0", "react": "^18.3.1", @@ -175,7 +175,7 @@ "unist-util-visit": "^5.0.0", "uploadthing": "7.2.0", "use-file-picker": "2.1.2", - "vaul": "0.9.0" + "vaul": "1.1.1" }, "devDependencies": { "@shikijs/compat": "^1.17.5", diff --git a/apps/www/public/r/icons/index.json b/apps/www/public/r/icons/index.json new file mode 100644 index 0000000000..bf65dca463 --- /dev/null +++ b/apps/www/public/r/icons/index.json @@ -0,0 +1,150 @@ +{ + "AlertCircle": { + "lucide": "AlertCircle", + "radix": "ExclamationTriangleIcon" + }, + "ArrowLeft": { + "lucide": "ArrowLeft", + "radix": "ArrowLeftIcon" + }, + "ArrowRight": { + "lucide": "ArrowRight", + "radix": "ArrowRightIcon" + }, + "ArrowUpDown": { + "lucide": "ArrowUpDown", + "radix": "CaretSortIcon" + }, + "BellRing": { + "lucide": "BellRing", + "radix": "BellIcon" + }, + "Bold": { + "lucide": "Bold", + "radix": "FontBoldIcon" + }, + "Calculator": { + "lucide": "Calculator", + "radix": "ComponentPlaceholderIcon" + }, + "Calendar": { + "lucide": "Calendar", + "radix": "CalendarIcon" + }, + "Check": { + "lucide": "Check", + "radix": "CheckIcon" + }, + "ChevronDown": { + "lucide": "ChevronDown", + "radix": "ChevronDownIcon" + }, + "ChevronLeft": { + "lucide": "ChevronLeft", + "radix": "ChevronLeftIcon" + }, + "ChevronRight": { + "lucide": "ChevronRight", + "radix": "ChevronRightIcon" + }, + "ChevronUp": { + "lucide": "ChevronUp", + "radix": "ChevronUpIcon" + }, + "ChevronsUpDown": { + "lucide": "ChevronsUpDown", + "radix": "CaretSortIcon" + }, + "Circle": { + "lucide": "Circle", + "radix": "DotFilledIcon" + }, + "Copy": { + "lucide": "Copy", + "radix": "CopyIcon" + }, + "CreditCard": { + "lucide": "CreditCard", + "radix": "ComponentPlaceholderIcon" + }, + "GripVertical": { + "lucide": "GripVertical", + "radix": "DragHandleDots2Icon" + }, + "Italic": { + "lucide": "Italic", + "radix": "FontItalicIcon" + }, + "Loader2": { + "lucide": "Loader2", + "radix": "ReloadIcon" + }, + "Mail": { + "lucide": "Mail", + "radix": "EnvelopeClosedIcon" + }, + "MailOpen": { + "lucide": "MailOpen", + "radix": "EnvelopeOpenIcon" + }, + "Minus": { + "lucide": "Minus", + "radix": "MinusIcon" + }, + "Moon": { + "lucide": "Moon", + "radix": "MoonIcon" + }, + "MoreHorizontal": { + "lucide": "MoreHorizontal", + "radix": "DotsHorizontalIcon" + }, + "PanelLeft": { + "lucide": "PanelLeft", + "radix": "ViewVerticalIcon" + }, + "Plus": { + "lucide": "Plus", + "radix": "PlusIcon" + }, + "Search": { + "lucide": "Search", + "radix": "MagnifyingGlassIcon" + }, + "Send": { + "lucide": "Send", + "radix": "PaperPlaneIcon" + }, + "Settings": { + "lucide": "Settings", + "radix": "GearIcon" + }, + "Slash": { + "lucide": "Slash", + "radix": "SlashIcon" + }, + "Smile": { + "lucide": "Smile", + "radix": "FaceIcon" + }, + "Sun": { + "lucide": "Sun", + "radix": "SunIcon" + }, + "Terminal": { + "lucide": "Terminal", + "radix": "RocketIcon" + }, + "Underline": { + "lucide": "Underline", + "radix": "UnderlineIcon" + }, + "User": { + "lucide": "User", + "radix": "PersonIcon" + }, + "X": { + "lucide": "X", + "radix": "Cross2Icon" + } +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/basic-elements-demo.json b/apps/www/public/r/styles/default/basic-elements-demo.json index f4d49778a3..fdf9457d89 100644 --- a/apps/www/public/r/styles/default/basic-elements-demo.json +++ b/apps/www/public/r/styles/default/basic-elements-demo.json @@ -16,7 +16,7 @@ "type": "registry:example" }, { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const basicElementsValue: any = (\n \n Blocks\n \n Easily create headings of various levels, from H1 to H6, to structure your\n content and make it more organized.\n \n \n Create blockquotes to emphasize important information or highlight quotes\n from external sources.\n \n \n {/* eslint-disable-next-line react/jsx-no-comment-textnodes */}\n // Use code blocks to showcase code snippets\n {`function greet() {`}\n {` console.info('Hello World!');`}\n {`}`}\n \n \n);\n", + "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const basicElementsValue: any = (\n \n Blocks\n \n Easily create headings of various levels, from H1 to H6, to structure your\n content and make it more organized.\n \n \n Create blockquotes to emphasize important information or highlight quotes\n from external sources.\n \n \n // Use code blocks to showcase code snippets\n {`function greet() {`}\n {` console.info('Hello World!');`}\n {`}`}\n \n \n);\n", "path": "example/values/basic-elements-value.tsx", "target": "components/basic-elements-value.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/basic-nodes-demo.json b/apps/www/public/r/styles/default/basic-nodes-demo.json index 0e91c0718f..e530abc640 100644 --- a/apps/www/public/r/styles/default/basic-nodes-demo.json +++ b/apps/www/public/r/styles/default/basic-nodes-demo.json @@ -26,7 +26,7 @@ "type": "registry:example" }, { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const basicElementsValue: any = (\n \n Blocks\n \n Easily create headings of various levels, from H1 to H6, to structure your\n content and make it more organized.\n \n \n Create blockquotes to emphasize important information or highlight quotes\n from external sources.\n \n \n {/* eslint-disable-next-line react/jsx-no-comment-textnodes */}\n // Use code blocks to showcase code snippets\n {`function greet() {`}\n {` console.info('Hello World!');`}\n {`}`}\n \n \n);\n", + "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const basicElementsValue: any = (\n \n Blocks\n \n Easily create headings of various levels, from H1 to H6, to structure your\n content and make it more organized.\n \n \n Create blockquotes to emphasize important information or highlight quotes\n from external sources.\n \n \n // Use code blocks to showcase code snippets\n {`function greet() {`}\n {` console.info('Hello World!');`}\n {`}`}\n \n \n);\n", "path": "example/values/basic-elements-value.tsx", "target": "components/basic-elements-value.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/button.json b/apps/www/public/r/styles/default/button.json index 3c14623f30..658cebeca3 100644 --- a/apps/www/public/r/styles/default/button.json +++ b/apps/www/public/r/styles/default/button.json @@ -10,7 +10,7 @@ }, "files": [ { - "content": "import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn, withRef } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n {\n defaultVariants: {\n size: 'sm',\n variant: 'default',\n },\n variants: {\n isMenu: {\n true: 'w-full cursor-pointer justify-start',\n },\n size: {\n icon: 'size-[28px] rounded-md px-1.5',\n lg: 'h-10 rounded-md px-4',\n md: 'h-8 px-3 text-sm',\n none: '',\n sm: 'h-[28px] rounded-md px-2.5',\n xs: 'h-8 rounded-md px-3 text-xs',\n },\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 ghost: 'hover:bg-accent hover:text-accent-foreground',\n inlineLink: 'text-base text-primary underline underline-offset-4',\n link: 'text-primary underline-offset-4 hover:underline',\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 },\n },\n }\n);\n\nexport const Button = withRef<\n 'button',\n {\n asChild?: boolean;\n } & VariantProps\n>(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button';\n\n return (\n \n );\n});\n", + "content": "import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn, withRef } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n {\n defaultVariants: {\n size: 'sm',\n variant: 'default',\n },\n variants: {\n isMenu: {\n true: 'w-full cursor-pointer justify-start',\n },\n size: {\n icon: 'size-[28px] rounded-md px-1.5',\n lg: 'h-9 rounded-md px-4',\n md: 'h-8 px-3 text-sm',\n none: '',\n sm: 'h-[28px] rounded-md px-2.5',\n xs: 'h-8 rounded-md px-3 text-xs',\n },\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 ghost: 'hover:bg-accent hover:text-accent-foreground',\n inlineLink: 'text-base text-primary underline underline-offset-4',\n link: 'text-primary underline-offset-4 hover:underline',\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 },\n },\n }\n);\n\nexport const Button = withRef<\n 'button',\n {\n asChild?: boolean;\n } & VariantProps\n>(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button';\n\n return (\n \n );\n});\n", "path": "plate-ui/button.tsx", "target": "components/plate-ui/button.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/editor.json b/apps/www/public/r/styles/default/editor.json index df15e69c48..e70f1dc920 100644 --- a/apps/www/public/r/styles/default/editor.json +++ b/apps/www/public/r/styles/default/editor.json @@ -15,7 +15,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { PlateContentProps } from '@udecode/plate-common/react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\nimport {\n PlateContent,\n useEditorContainerRef,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst editorContainerVariants = cva(\n 'relative w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: 'h-full',\n demo: 'h-[650px]',\n },\n },\n }\n);\n\nexport const EditorContainer = ({\n className,\n variant,\n ...props\n}: React.HTMLAttributes &\n VariantProps) => {\n const editor = useEditorRef();\n const containerRef = useEditorContainerRef();\n\n return (\n \n );\n};\n\nEditorContainer.displayName = 'EditorContainer';\n\nconst editorVariants = cva(\n cn(\n 'group/editor',\n 'relative w-full overflow-x-hidden whitespace-pre-wrap break-words',\n 'rounded-md ring-offset-background placeholder:text-muted-foreground/80 focus-visible:outline-none',\n '[&_[data-slate-placeholder]]:text-muted-foreground/80 [&_[data-slate-placeholder]]:!opacity-100',\n '[&_[data-slate-placeholder]]:top-[auto_!important]',\n '[&_strong]:font-bold'\n ),\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n },\n focused: {\n true: 'ring-2 ring-ring ring-offset-2',\n },\n variant: {\n ai: 'w-full px-0 text-sm',\n aiChat:\n 'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-sm',\n default:\n 'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n demo: 'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n fullWidth: 'size-full px-16 pb-72 pt-4 text-base sm:px-24',\n none: '',\n },\n },\n }\n);\n\nexport type EditorProps = PlateContentProps &\n VariantProps;\n\nexport const Editor = React.forwardRef(\n ({ className, disabled, focused, variant, ...props }, ref) => {\n return (\n \n );\n }\n);\n\nEditor.displayName = 'Editor';\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport type { PlateContentProps } from '@udecode/plate-common/react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\nimport {\n PlateContent,\n useEditorContainerRef,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { cva } from 'class-variance-authority';\n\nconst editorContainerVariants = cva(\n 'relative w-full cursor-text overflow-y-auto caret-primary selection:bg-brand/25 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-brand/25 [&_.slate-selection-area]:bg-brand/15',\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: 'h-full',\n demo: 'h-[650px]',\n },\n },\n }\n);\n\nexport const EditorContainer = ({\n className,\n variant,\n ...props\n}: React.HTMLAttributes &\n VariantProps) => {\n const editor = useEditorRef();\n const containerRef = useEditorContainerRef();\n\n return (\n \n );\n};\n\nEditorContainer.displayName = 'EditorContainer';\n\nconst editorVariants = cva(\n cn(\n 'group/editor',\n 'relative w-full overflow-x-hidden whitespace-pre-wrap break-words',\n 'rounded-md ring-offset-background placeholder:text-muted-foreground/80 focus-visible:outline-none',\n '[&_[data-slate-placeholder]]:text-muted-foreground/80 [&_[data-slate-placeholder]]:!opacity-100',\n '[&_[data-slate-placeholder]]:top-[auto_!important]',\n '[&_strong]:font-bold'\n ),\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n },\n focused: {\n true: 'ring-2 ring-ring ring-offset-2',\n },\n variant: {\n ai: 'w-full px-0 text-base md:text-sm',\n aiChat:\n 'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm',\n default:\n 'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n demo: 'size-full px-16 pb-72 pt-4 text-base sm:px-[max(64px,calc(50%-350px))]',\n fullWidth: 'size-full px-16 pb-72 pt-4 text-base sm:px-24',\n none: '',\n },\n },\n }\n);\n\nexport type EditorProps = PlateContentProps &\n VariantProps;\n\nexport const Editor = React.forwardRef(\n ({ className, disabled, focused, variant, ...props }, ref) => {\n return (\n \n );\n }\n);\n\nEditor.displayName = 'Editor';\n", "path": "plate-ui/editor.tsx", "target": "components/plate-ui/editor.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/iframe-demo.json b/apps/www/public/r/styles/default/iframe-demo.json index d282db54b4..9f2e1fec10 100644 --- a/apps/www/public/r/styles/default/iframe-demo.json +++ b/apps/www/public/r/styles/default/iframe-demo.json @@ -1,7 +1,7 @@ { "files": [ { - "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { iframeValue } from '@/registry/default/example/values/iframe-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { EditableVoidPlugin } from './editable-voids-demo';\n\nexport function IFrame({ children, ...props }: any) {\n const [contentRef, setContentRef] = useState(null);\n const mountNode = contentRef?.contentWindow?.document.body;\n\n return (\n // eslint-disable-next-line jsx-a11y/iframe-has-title\n \n );\n}\n\nexport default function IframeDemo() {\n const editor = useCreateEditor({\n plugins: [...editorPlugins, EditableVoidPlugin],\n value: iframeValue,\n });\n\n return (\n \n );\n}\n", + "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { iframeValue } from '@/registry/default/example/values/iframe-value';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { EditableVoidPlugin } from './editable-voids-demo';\n\nexport function IFrame({ children, ...props }: any) {\n const [contentRef, setContentRef] = useState(null);\n const mountNode = contentRef?.contentWindow?.document.body;\n\n return (\n \n );\n}\n\nexport default function IframeDemo() {\n const editor = useCreateEditor({\n plugins: [...editorPlugins, EditableVoidPlugin],\n value: iframeValue,\n });\n\n return (\n \n );\n}\n", "path": "example/iframe-demo.tsx", "target": "components/iframe-demo.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/input.json b/apps/www/public/r/styles/default/input.json index 3f4858d2ac..12d8741a6a 100644 --- a/apps/www/public/r/styles/default/input.json +++ b/apps/www/public/r/styles/default/input.json @@ -5,7 +5,7 @@ }, "files": [ { - "content": "import React from 'react';\n\nimport { cn, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const inputVariants = cva(\n 'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n {\n defaultVariants: {\n h: 'md',\n variant: 'default',\n },\n variants: {\n h: {\n md: 'h-10 px-3 py-2',\n sm: 'h-[28px] px-1.5 py-1',\n },\n variant: {\n default:\n 'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n ghost: 'border-none focus-visible:ring-transparent',\n },\n },\n }\n);\n\nexport type InputProps = React.ComponentPropsWithoutRef<'input'> &\n VariantProps;\n\nexport const Input = withVariants('input', inputVariants, ['variant', 'h']);\n\nexport type FloatingInputProps = InputProps & {\n label: string;\n};\n\nexport function FloatingInput({\n id,\n className,\n label,\n ...props\n}: FloatingInputProps) {\n return (\n <>\n \n {label}\n \n \n \n );\n}\n", + "content": "import React from 'react';\n\nimport { cn, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const inputVariants = cva(\n 'flex w-full rounded-md bg-transparent text-base file:border-0 file:bg-background file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n {\n defaultVariants: {\n h: 'md',\n variant: 'default',\n },\n variants: {\n h: {\n md: 'h-10 px-3 py-2',\n sm: 'h-[28px] px-1.5 py-1',\n },\n variant: {\n default:\n 'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n ghost: 'border-none focus-visible:ring-transparent',\n },\n },\n }\n);\n\nexport type InputProps = React.ComponentPropsWithoutRef<'input'> &\n VariantProps;\n\nexport const Input = withVariants('input', inputVariants, ['variant', 'h']);\n\nexport type FloatingInputProps = InputProps & {\n label: string;\n};\n\nexport function FloatingInput({\n id,\n className,\n label,\n ...props\n}: FloatingInputProps) {\n return (\n <>\n \n {label}\n \n \n \n );\n}\n", "path": "plate-ui/input.tsx", "target": "components/plate-ui/input.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/media-audio-element.json b/apps/www/public/r/styles/default/media-audio-element.json index ebd5c043ef..1a84c8f8f7 100644 --- a/apps/www/public/r/styles/default/media-audio-element.json +++ b/apps/www/public/r/styles/default/media-audio-element.json @@ -20,7 +20,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { withHOC } from '@udecode/plate-common/react';\nimport { useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { PlateElement } from './plate-element';\n\nexport const MediaAudioElement = withHOC(\n ResizableProvider,\n withRef(\n ({ children, className, nodeProps, ...props }, ref) => {\n const { align = 'center', readOnly, unsafeUrl } = useMediaState();\n\n return (\n \n
\n
\n {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n
\n\n \n \n \n
\n {children}\n \n );\n }\n )\n);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { withHOC } from '@udecode/plate-common/react';\nimport { useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { PlateElement } from './plate-element';\n\nexport const MediaAudioElement = withHOC(\n ResizableProvider,\n withRef(\n ({ children, className, nodeProps, ...props }, ref) => {\n const { align = 'center', readOnly, unsafeUrl } = useMediaState();\n\n return (\n \n
\n
\n
\n\n \n \n \n
\n {children}\n \n );\n }\n )\n);\n", "path": "plate-ui/media-audio-element.tsx", "target": "components/plate-ui/media-audio-element.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/reset-node-demo.json b/apps/www/public/r/styles/default/reset-node-demo.json index c0682ccad6..62f19e6db0 100644 --- a/apps/www/public/r/styles/default/reset-node-demo.json +++ b/apps/www/public/r/styles/default/reset-node-demo.json @@ -7,7 +7,7 @@ "type": "registry:example" }, { - "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const basicElementsValue: any = (\n \n Blocks\n \n Easily create headings of various levels, from H1 to H6, to structure your\n content and make it more organized.\n \n \n Create blockquotes to emphasize important information or highlight quotes\n from external sources.\n \n \n {/* eslint-disable-next-line react/jsx-no-comment-textnodes */}\n // Use code blocks to showcase code snippets\n {`function greet() {`}\n {` console.info('Hello World!');`}\n {`}`}\n \n \n);\n", + "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const basicElementsValue: any = (\n \n Blocks\n \n Easily create headings of various levels, from H1 to H6, to structure your\n content and make it more organized.\n \n \n Create blockquotes to emphasize important information or highlight quotes\n from external sources.\n \n \n // Use code blocks to showcase code snippets\n {`function greet() {`}\n {` console.info('Hello World!');`}\n {`}`}\n \n \n);\n", "path": "example/values/basic-elements-value.tsx", "target": "components/basic-elements-value.tsx", "type": "registry:example" diff --git a/apps/www/public/r/styles/default/toolbar.json b/apps/www/public/r/styles/default/toolbar.json index a5ab23b6a5..60d117938c 100644 --- a/apps/www/public/r/styles/default/toolbar.json +++ b/apps/www/public/r/styles/default/toolbar.json @@ -7,7 +7,7 @@ }, "files": [ { - "content": "'use client';\n\nimport * as React from 'react';\n\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar';\nimport { cn, withCn, withRef, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { ChevronDown } from 'lucide-react';\n\nimport { Separator } from './separator';\nimport { withTooltip } from './tooltip';\n\nexport const Toolbar = withCn(\n ToolbarPrimitive.Root,\n 'relative flex select-none items-center'\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 'mx-2 my-1 w-px shrink-0 bg-border'\n);\n\nconst toolbarButtonVariants = cva(\n cn(\n 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium text-foreground 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])]:size-4'\n ),\n {\n defaultVariants: {\n size: 'sm',\n variant: 'default',\n },\n variants: {\n size: {\n default: 'h-10 px-3',\n lg: 'h-11 px-5',\n sm: 'h-7 px-2',\n },\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 },\n }\n);\n\nconst dropdownArrowVariants = cva(\n cn(\n 'inline-flex items-center justify-center rounded-r-md text-sm font-medium text-foreground 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 {\n defaultVariants: {\n size: 'sm',\n variant: 'default',\n },\n variants: {\n size: {\n default: 'h-10 w-6',\n lg: 'h-11 w-8',\n sm: 'h-7 w-4',\n },\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-l-0 border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n },\n },\n }\n);\n\nconst ToolbarButton = withTooltip(\n // eslint-disable-next-line react/display-name\n React.forwardRef<\n React.ElementRef,\n {\n isDropdown?: boolean;\n pressed?: boolean;\n } & Omit<\n React.ComponentPropsWithoutRef,\n 'asChild' | 'value'\n > &\n VariantProps\n >(\n (\n { children, className, isDropdown, pressed, size, variant, ...props },\n ref\n ) => {\n return typeof pressed === 'boolean' ? (\n \n \n {isDropdown ? (\n <>\n
\n {children}\n
\n
\n \n
\n \n ) : (\n children\n )}\n \n \n ) : (\n \n {children}\n \n );\n }\n )\n);\nToolbarButton.displayName = 'ToolbarButton';\n\nexport { ToolbarButton };\n\nexport const ToolbarSplitButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ children, className, ...props }, ref) => {\n return (\n \n {children}\n \n );\n});\n\nexport const ToolbarSplitButtonPrimary = React.forwardRef<\n React.ElementRef,\n Omit, 'value'>\n>(({ children, className, size, variant, ...props }, ref) => {\n return (\n \n {children}\n \n );\n});\n\nexport const ToolbarSplitButtonSecondary = React.forwardRef<\n HTMLButtonElement,\n React.ComponentPropsWithoutRef<'span'> &\n VariantProps\n>(({ className, size, variant, ...props }, ref) => {\n return (\n e.stopPropagation()}\n role=\"button\"\n {...props}\n >\n \n \n );\n});\n\nToolbarSplitButton.displayName = 'ToolbarButton';\n\nexport const ToolbarToggleItem = withVariants(\n ToolbarPrimitive.ToggleItem,\n toolbarButtonVariants,\n ['variant', 'size']\n);\n\nexport const ToolbarGroup = withRef<'div'>(({ children, className }, ref) => {\n return (\n