diff --git a/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx
index 48d06464c7..a2d0cdaf57 100644
--- a/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx
@@ -2,18 +2,18 @@
import React from 'react';
import { cn, withRef } from '@udecode/cn';
-import { PlateLeaf } from '@udecode/plate-common';
+import { PlateLeaf } from '@udecode/plate-common/react';
export const CodeLeaf = withRef(
- ({ className, children, ...props }, ref) => {
+ ({ children, className, ...props }, ref) => {
return (
{children}
diff --git a/templates/plate-playground-template/src/components/plate-ui/code-line-element.tsx b/templates/plate-playground-template/src/components/plate-ui/code-line-element.tsx
index 02bdfe4f96..52ecca5f3e 100644
--- a/templates/plate-playground-template/src/components/plate-ui/code-line-element.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/code-line-element.tsx
@@ -2,7 +2,7 @@
import React from 'react';
import { withRef } from '@udecode/cn';
-import { PlateElement } from '@udecode/plate-common';
+import { PlateElement } from '@udecode/plate-common/react';
export const CodeLineElement = withRef((props, ref) => (
diff --git a/templates/plate-playground-template/src/components/plate-ui/code-syntax-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/code-syntax-leaf.tsx
index 065981ae83..6aac9a7656 100644
--- a/templates/plate-playground-template/src/components/plate-ui/code-syntax-leaf.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/code-syntax-leaf.tsx
@@ -2,8 +2,8 @@
import React from 'react';
import { withRef } from '@udecode/cn';
-import { useCodeSyntaxLeaf } from '@udecode/plate-code-block';
-import { PlateLeaf } from '@udecode/plate-common';
+import { useCodeSyntaxLeaf } from '@udecode/plate-code-block/react';
+import { PlateLeaf } from '@udecode/plate-common/react';
export const CodeSyntaxLeaf = withRef(
({ children, ...props }, ref) => {
diff --git a/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu-items.tsx b/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu-items.tsx
index 265819a6bb..c1ca932ee8 100644
--- a/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu-items.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu-items.tsx
@@ -1,49 +1,50 @@
'use client';
import React from 'react';
-import { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';
import { cn } from '@udecode/cn';
import { Icons } from '@/components/icons';
import { buttonVariants } from './button';
-import { TColor } from './color-dropdown-menu';
import { DropdownMenuItem } from './dropdown-menu';
import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+import type { TColor } from './color-dropdown-menu';
+import type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';
+
type ColorDropdownMenuItemProps = {
- value: string;
isBrightColor: boolean;
isSelected: boolean;
- updateColor: (color: string) => void;
name?: string;
+ updateColor: (color: string) => void;
+ value: string;
} & DropdownMenuItemProps;
export function ColorDropdownMenuItem({
- name,
- value,
+ className,
isBrightColor,
isSelected,
+ name,
updateColor,
- className,
+ value,
...props
}: ColorDropdownMenuItemProps) {
const content = (
{
e.preventDefault();
updateColor(value);
}}
+ style={{ backgroundColor: value }}
{...props}
>
{isSelected ? : null}
@@ -67,10 +68,10 @@ type ColorDropdownMenuItemsProps = {
} & React.HTMLAttributes;
export function ColorDropdownMenuItems({
+ className,
color,
colors,
updateColor,
- className,
...props
}: ColorDropdownMenuItemsProps) {
return (
@@ -78,14 +79,14 @@ export function ColorDropdownMenuItems({
className={cn('grid grid-cols-[repeat(10,1fr)] gap-1', className)}
{...props}
>
- {colors.map(({ name, value, isBrightColor }) => (
+ {colors.map(({ isBrightColor, name, value }) => (
))}
diff --git a/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu.tsx
index 510d07cebe..d5b96dfd3e 100644
--- a/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/color-dropdown-menu.tsx
@@ -1,11 +1,10 @@
'use client';
import React from 'react';
-import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
import {
useColorDropdownMenu,
useColorDropdownMenuState,
-} from '@udecode/plate-font';
+} from '@udecode/plate-font/react';
import { DEFAULT_COLORS, DEFAULT_CUSTOM_COLORS } from './color-constants';
import { ColorPicker } from './color-picker';
@@ -16,10 +15,12 @@ import {
} from './dropdown-menu';
import { ToolbarButton } from './toolbar';
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
export type TColor = {
+ isBrightColor: boolean;
name: string;
value: string;
- isBrightColor: boolean;
};
type ColorDropdownMenuProps = {
@@ -28,18 +29,18 @@ type ColorDropdownMenuProps = {
} & DropdownMenuProps;
export function ColorDropdownMenu({
+ children,
nodeType,
tooltip,
- children,
}: ColorDropdownMenuProps) {
const state = useColorDropdownMenuState({
- nodeType,
+ closeOnSelect: true,
colors: DEFAULT_COLORS,
customColors: DEFAULT_CUSTOM_COLORS,
- closeOnSelect: true,
+ nodeType,
});
- const { menuProps, buttonProps } = useColorDropdownMenu(state);
+ const { buttonProps, menuProps } = useColorDropdownMenu(state);
return (
@@ -51,12 +52,12 @@ export function ColorDropdownMenu({
diff --git a/templates/plate-playground-template/src/components/plate-ui/color-input.tsx b/templates/plate-playground-template/src/components/plate-ui/color-input.tsx
index f41d3608e1..8f104715ef 100644
--- a/templates/plate-playground-template/src/components/plate-ui/color-input.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/color-input.tsx
@@ -2,12 +2,12 @@
import React from 'react';
import { cn, withRef } from '@udecode/cn';
-import { useComposedRef } from '@udecode/plate-common';
-import { useColorInput } from '@udecode/plate-font';
+import { useComposedRef } from '@udecode/plate-common/react';
+import { useColorInput } from '@udecode/plate-font/react';
export const ColorInput = withRef<'input'>(
- ({ value = '#000000', children, className, ...props }, ref) => {
- const { inputRef, childProps } = useColorInput();
+ ({ children, className, value = '#000000', ...props }, ref) => {
+ const { childProps, inputRef } = useColorInput();
return (
@@ -18,8 +18,8 @@ export const ColorInput = withRef<'input'>(
})}
void;
color?: string;
colors: TColor[];
customColors: TColor[];
updateColor: (color: string) => void;
updateCustomColor: (color: string) => void;
- clearColor: () => void;
}
>(
(
{
+ className,
+ clearColor,
color,
colors,
customColors,
updateColor,
updateCustomColor,
- clearColor,
- className,
...props
},
ref
) => {
return (
diff --git a/templates/plate-playground-template/src/components/plate-ui/colors-custom.tsx b/templates/plate-playground-template/src/components/plate-ui/colors-custom.tsx
index b90b2cd9f1..e33f82702a 100644
--- a/templates/plate-playground-template/src/components/plate-ui/colors-custom.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/colors-custom.tsx
@@ -1,21 +1,24 @@
'use client';
import React from 'react';
-import { useColorsCustom, useColorsCustomState } from '@udecode/plate-font';
+import {
+ useColorsCustom,
+ useColorsCustomState,
+} from '@udecode/plate-font/react';
-import { buttonVariants } from '@/components/plate-ui/button';
-import { DropdownMenuItem } from '@/components/plate-ui/dropdown-menu';
-
-import { TColor } from './color-dropdown-menu';
+import { buttonVariants } from './button';
import { ColorDropdownMenuItems } from './color-dropdown-menu-items';
import { ColorInput } from './color-input';
+import { DropdownMenuItem } from './dropdown-menu';
+
+import type { TColor } from './color-dropdown-menu';
type ColorsCustomProps = {
color?: string;
colors: TColor[];
customColors: TColor[];
- updateCustomColor: (color: string) => void;
updateColor: (color: string) => void;
+ updateCustomColor: (color: string) => void;
};
export function ColorsCustom({
@@ -38,8 +41,8 @@ export function ColorsCustom({
diff --git a/templates/plate-playground-template/src/components/plate-ui/combobox.tsx b/templates/plate-playground-template/src/components/plate-ui/combobox.tsx
deleted file mode 100644
index 55db97eb49..0000000000
--- a/templates/plate-playground-template/src/components/plate-ui/combobox.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-'use client';
-
-import React, { useEffect } from 'react';
-import * as Popover from '@radix-ui/react-popover';
-import { cn, withRef } from '@udecode/cn';
-import {
- comboboxActions,
- ComboboxContentItemProps,
- ComboboxContentProps,
- ComboboxProps,
- useActiveComboboxStore,
- useComboboxContent,
- useComboboxContentState,
- useComboboxControls,
- useComboboxItem,
- useComboboxSelectors,
-} from '@udecode/plate-combobox';
-import {
- useEditorRef,
- useEditorSelector,
- useEventEditorSelectors,
- usePlateSelectors,
-} from '@udecode/plate-common';
-import { createVirtualRef } from '@udecode/plate-floating';
-
-export const ComboboxItem = withRef<'div', ComboboxContentItemProps>(
- ({ combobox, index, item, onRenderItem, className, ...rest }, ref) => {
- const { props } = useComboboxItem({ item, index, combobox, onRenderItem });
-
- return (
-
- );
- }
-);
-
-export function ComboboxContent(props: ComboboxContentProps) {
- const {
- component: Component,
- items,
- portalElement,
- combobox,
- onRenderItem,
- } = props;
-
- const editor = useEditorRef();
-
- const filteredItems = useComboboxSelectors.filteredItems();
- const activeComboboxStore = useActiveComboboxStore()!;
-
- const state = useComboboxContentState({ items, combobox });
- const { menuProps, targetRange } = useComboboxContent(state);
-
- return (
-
-
-
-
- event.preventDefault()}
- >
- {Component ? Component({ store: activeComboboxStore }) : null}
-
- {filteredItems.map((item, index) => (
-
- ))}
-
-
-
- );
-}
-
-export function Combobox({
- id,
- trigger,
- searchPattern,
- onSelectItem,
- controlled,
- maxSuggestions,
- filter,
- sort,
- disabled: _disabled,
- ...props
-}: ComboboxProps) {
- const storeItems = useComboboxSelectors.items();
- const disabled =
- _disabled ?? (storeItems.length === 0 && !props.items?.length);
-
- const focusedEditorId = useEventEditorSelectors.focus?.();
- const combobox = useComboboxControls();
- const activeId = useComboboxSelectors.activeId();
- const selectionDefined = useEditorSelector(
- (editor) => !!editor.selection,
- []
- );
- const editorId = usePlateSelectors().id();
-
- useEffect(() => {
- comboboxActions.setComboboxById({
- id,
- trigger,
- searchPattern,
- controlled,
- onSelectItem,
- maxSuggestions,
- filter,
- sort,
- });
- }, [
- id,
- trigger,
- searchPattern,
- controlled,
- onSelectItem,
- maxSuggestions,
- filter,
- sort,
- ]);
-
- if (
- !combobox ||
- !selectionDefined ||
- focusedEditorId !== editorId ||
- activeId !== id ||
- disabled
- ) {
- return null;
- }
-
- return ;
-}
diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-avatar.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-avatar.tsx
index 067375a998..4d1d460712 100644
--- a/templates/plate-playground-template/src/components/plate-ui/comment-avatar.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/comment-avatar.tsx
@@ -1,21 +1,20 @@
'use client';
import React from 'react';
-import { useUserById } from '@udecode/plate-comments';
+import { CommentsPlugin } from '@udecode/plate-comments/react';
+import { useEditorPlugin } from '@udecode/plate-common/react';
-import {
- Avatar,
- AvatarFallback,
- AvatarImage,
-} from '@/components/plate-ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from './avatar';
+
+export function CommentAvatar({ userId }: { userId: null | string }) {
+ const { useOption } = useEditorPlugin(CommentsPlugin);
+ const user = useOption('userById', userId);
-export function CommentAvatar({ userId }: { userId: string | null }) {
- const user = useUserById(userId);
if (!user) return null;
return (
-
+
{user.name?.[0]}
);
diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-create-form.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-create-form.tsx
index 545516bceb..71c139f5f2 100644
--- a/templates/plate-playground-template/src/components/plate-ui/comment-create-form.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/comment-create-form.tsx
@@ -5,15 +5,18 @@ import { cn } from '@udecode/cn';
import {
CommentNewSubmitButton,
CommentNewTextarea,
- useCommentsSelectors,
-} from '@udecode/plate-comments';
+ CommentsPlugin,
+} from '@udecode/plate-comments/react';
+import { useEditorPlugin } from '@udecode/plate-common/react';
import { buttonVariants } from './button';
import { CommentAvatar } from './comment-avatar';
import { inputVariants } from './input';
export function CommentCreateForm() {
- const myUserId = useCommentsSelectors().myUserId();
+ const { useOption } = useEditorPlugin(CommentsPlugin);
+
+ const myUserId = useOption('myUserId');
return (
diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-item.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-item.tsx
index c4068ba53d..9bf30a037b 100644
--- a/templates/plate-playground-template/src/components/plate-ui/comment-item.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/comment-item.tsx
@@ -3,9 +3,10 @@
import React from 'react';
import {
CommentProvider,
- useCommentById,
+ CommentsPlugin,
useCommentItemContentState,
-} from '@udecode/plate-comments';
+} from '@udecode/plate-comments/react';
+import { useEditorPlugin } from '@udecode/plate-common/react';
import { formatDistance } from 'date-fns';
import { CommentAvatar } from './comment-avatar';
@@ -20,11 +21,11 @@ type PlateCommentProps = {
function CommentItemContent() {
const {
comment,
+ commentText,
+ editingValue,
isMyComment,
isReplyComment,
user,
- editingValue,
- commentText,
} = useCommentItemContentState();
return (
@@ -59,11 +60,13 @@ function CommentItemContent() {
}
export function CommentItem({ commentId }: PlateCommentProps) {
- const comment = useCommentById(commentId);
+ const { useOption } = useEditorPlugin(CommentsPlugin);
+ const comment = useOption('commentById', commentId);
+
if (!comment) return null;
return (
-