diff --git a/templates/plate-template/src/components/icons.tsx b/templates/plate-template/src/components/icons.tsx
deleted file mode 100644
index 9d3f1ff20b..0000000000
--- a/templates/plate-template/src/components/icons.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import React from 'react';
-import { cva } from 'class-variance-authority';
-import {
- AlignCenter,
- AlignJustify,
- AlignLeft,
- AlignRight,
- Baseline,
- Bold,
- Check,
- ChevronDown,
- ChevronRight,
- ChevronsUpDown,
- Code2,
- Edit2,
- ExternalLink,
- Eye,
- FileCode,
- GripVertical,
- Heading1,
- Heading2,
- Heading3,
- Heading4,
- Heading5,
- Heading6,
- Image,
- Indent,
- Italic,
- Keyboard,
- Link2,
- Link2Off,
- List,
- ListOrdered,
- LucideProps,
- MessageSquare,
- MessageSquarePlus,
- Minus,
- Moon,
- MoreHorizontal,
- Outdent,
- PaintBucket,
- Pilcrow,
- Plus,
- Quote,
- RectangleHorizontal,
- RectangleVertical,
- RotateCcw,
- Search,
- Settings,
- Smile,
- Strikethrough,
- Subscript,
- SunMedium,
- Superscript,
- Table,
- Text,
- Trash,
- Twitter,
- Underline,
- WrapText,
- X,
-} from 'lucide-react';
-
-import type { LucideIcon } from 'lucide-react';
-
-export type Icon = LucideIcon;
-
-const borderAll = (props: LucideProps) => (
-
-);
-
-const borderBottom = (props: LucideProps) => (
-
-);
-
-const borderLeft = (props: LucideProps) => (
-
-);
-
-const borderNone = (props: LucideProps) => (
-
-);
-
-const borderRight = (props: LucideProps) => (
-
-);
-
-const borderTop = (props: LucideProps) => (
-
-);
-
-export const Icons = {
- add: Plus,
- alignCenter: AlignCenter,
- alignJustify: AlignJustify,
- alignLeft: AlignLeft,
- alignRight: AlignRight,
- arrowDown: ChevronDown,
- bg: PaintBucket,
- blockquote: Quote,
- bold: Bold,
- borderAll,
- borderBottom,
- borderLeft,
- borderNone,
- borderRight,
- borderTop,
- check: Check,
- chevronRight: ChevronRight,
- chevronsUpDown: ChevronsUpDown,
- clear: X,
- close: X,
- code: Code2,
- codeblock: FileCode,
- color: Baseline,
- column: RectangleVertical,
- comment: MessageSquare,
- commentAdd: MessageSquarePlus,
- delete: Trash,
- dragHandle: GripVertical,
- editing: Edit2,
- emoji: Smile,
- externalLink: ExternalLink,
- h1: Heading1,
- h2: Heading2,
- h3: Heading3,
- h4: Heading4,
- h5: Heading5,
- h6: Heading6,
- image: Image,
- indent: Indent,
- italic: Italic,
- kbd: Keyboard,
- lineHeight: WrapText,
- link: Link2,
- minus: Minus,
- more: MoreHorizontal,
- ol: ListOrdered,
- outdent: Outdent,
- paragraph: Pilcrow,
- refresh: RotateCcw,
- row: RectangleHorizontal,
- search: Search,
- settings: Settings,
- strikethrough: Strikethrough,
- subscript: Subscript,
- superscript: Superscript,
- table: Table,
- text: Text,
- trash: Trash,
- ul: List,
- underline: Underline,
- unlink: Link2Off,
- viewing: Eye,
-
- // www
- gitHub: (props: LucideProps) => (
-
- ),
- logo: (props: LucideProps) => (
-
- ),
- moon: Moon,
- sun: SunMedium,
- twitter: Twitter,
-};
-
-export const iconVariants = cva('', {
- variants: {
- variant: {
- toolbar: 'size-5',
- menuItem: 'mr-2 size-5',
- },
- size: {
- sm: 'mr-2 size-4',
- md: 'mr-2 size-6',
- },
- },
- defaultVariants: {},
-});
diff --git a/templates/plate-template/src/components/plate-ui/button.tsx b/templates/plate-template/src/components/plate-ui/button.tsx
index 1dfa60f7da..d017db41fe 100644
--- a/templates/plate-template/src/components/plate-ui/button.tsx
+++ b/templates/plate-template/src/components/plate-ui/button.tsx
@@ -1,56 +1,56 @@
import * as React from 'react';
+
import { Slot } from '@radix-ui/react-slot';
import { cn, withRef } from '@udecode/cn';
-import { cva, VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
export const buttonVariants = cva(
- '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',
+ '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',
{
+ defaultVariants: {
+ size: 'sm',
+ variant: 'default',
+ },
variants: {
+ isMenu: {
+ true: 'w-full cursor-pointer justify-start',
+ },
+ size: {
+ icon: 'size-[28px] rounded-md px-1.5',
+ lg: 'h-10 rounded-md px-4',
+ md: 'h-8 px-3 text-sm',
+ none: '',
+ sm: 'h-[28px] rounded-md px-2.5',
+ xs: 'h-8 rounded-md px-3 text-xs',
+ },
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+ ghost: 'hover:bg-accent hover:text-accent-foreground',
+ inlineLink: 'text-base text-primary underline underline-offset-4',
+ link: 'text-primary underline-offset-4 hover:underline',
outline:
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
secondary:
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
- ghost: 'hover:bg-accent hover:text-accent-foreground',
- link: 'text-primary underline-offset-4 hover:underline',
- inlineLink: 'text-base text-primary underline underline-offset-4',
- },
- size: {
- default: 'h-10 px-4 py-2',
- xs: 'h-8 rounded-md px-3',
- sm: 'h-9 rounded-md px-3',
- sms: 'size-9 rounded-md px-0',
- lg: 'h-11 rounded-md px-8',
- icon: 'size-10',
- none: '',
- },
- isMenu: {
- true: 'h-auto w-full cursor-pointer justify-start',
},
},
- defaultVariants: {
- variant: 'default',
- size: 'default',
- },
}
);
export const Button = withRef<
'button',
- VariantProps
& {
+ {
asChild?: boolean;
- }
->(({ className, isMenu, variant, size, asChild = false, ...props }, ref) => {
+ } & VariantProps
+>(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {
const Comp = asChild ? Slot : 'button';
return (
);
diff --git a/templates/plate-template/src/components/plate-ui/editor.tsx b/templates/plate-template/src/components/plate-ui/editor.tsx
index 826c737f8a..8ff68de2b2 100644
--- a/templates/plate-template/src/components/plate-ui/editor.tsx
+++ b/templates/plate-template/src/components/plate-ui/editor.tsx
@@ -1,43 +1,50 @@
+'use client';
+
import React from 'react';
-import { cn } from '@udecode/cn';
-import { PlateContent, PlateContentProps } from '@udecode/plate-common/react';
-import { cva } from 'class-variance-authority';
+import type { PlateContentProps } from '@udecode/plate-common/react';
import type { VariantProps } from 'class-variance-authority';
+import { cn } from '@udecode/cn';
+import { PlateContent } from '@udecode/plate-common/react';
+import { cva } from 'class-variance-authority';
+
const editorVariants = cva(
cn(
- 'relative overflow-x-auto whitespace-pre-wrap break-words',
- 'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',
+ 'relative overflow-x-auto whitespace-pre-wrap break-words text-foreground',
+ 'min-h-[80px] w-full rounded-md bg-background px-6 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',
'[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',
'[&_[data-slate-placeholder]]:top-[auto_!important]',
'[&_strong]:font-bold'
),
{
+ defaultVariants: {
+ focusRing: true,
+ size: 'sm',
+ variant: 'outline',
+ },
variants: {
- variant: {
- outline: 'border border-input',
- ghost: '',
- },
- focused: {
- true: 'ring-2 ring-ring ring-offset-2',
- },
disabled: {
true: 'cursor-not-allowed opacity-50',
},
focusRing: {
- true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
false: '',
+ true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+ },
+ focused: {
+ true: 'ring-2 ring-ring ring-offset-2',
},
size: {
- sm: 'text-sm',
md: 'text-base',
+ sm: 'text-sm',
+ },
+ variant: {
+ aiChat:
+ 'max-h-[min(70vh,320px)] w-full overflow-y-auto rounded-none border-b px-3 py-2 text-sm',
+ demo: 'min-h-full w-full px-16 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
+ ghost: '',
+ outline: 'border border-input',
},
- },
- defaultVariants: {
- variant: 'outline',
- focusRing: true,
- size: 'sm',
},
}
);
@@ -50,8 +57,8 @@ const Editor = React.forwardRef(
{
className,
disabled,
- focused,
focusRing,
+ focused,
readOnly,
size,
variant,
@@ -65,16 +72,17 @@ const Editor = React.forwardRef(
className={cn(
editorVariants({
disabled,
- focused,
focusRing,
+ focused,
size,
variant,
}),
className
)}
- disableDefaultStyles
readOnly={disabled ?? readOnly}
aria-disabled={disabled}
+ data-plate-selectable
+ disableDefaultStyles
{...props}
/>
diff --git a/templates/plate-template/src/components/plate-ui/tooltip.tsx b/templates/plate-template/src/components/plate-ui/tooltip.tsx
index b872ea03ec..ca6e82ab74 100644
--- a/templates/plate-template/src/components/plate-ui/tooltip.tsx
+++ b/templates/plate-template/src/components/plate-ui/tooltip.tsx
@@ -1,19 +1,27 @@
'use client';
import React from 'react';
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { withCn, withProps } from '@udecode/cn';
-export const TooltipProvider = TooltipPrimitive.Provider;
+export const TooltipProvider = withProps(TooltipPrimitive.Provider, {
+ delayDuration: 0,
+ disableHoverableContent: true,
+ skipDelayDuration: 0,
+});
+
export const Tooltip = TooltipPrimitive.Root;
+
export const TooltipTrigger = TooltipPrimitive.Trigger;
+
export const TooltipPortal = TooltipPrimitive.Portal;
export const TooltipContent = withCn(
withProps(TooltipPrimitive.Content, {
sideOffset: 4,
}),
- 'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md'
+ 'z-50 overflow-hidden rounded-md bg-black px-3 py-1.5 text-sm font-semibold text-white shadow-md'
);
export function withTooltip<
@@ -21,8 +29,7 @@ export function withTooltip<
>(Component: T) {
return React.forwardRef<
React.ElementRef