From 5e366d38ddd85f01765bf59ae8476a4271463096 Mon Sep 17 00:00:00 2001 From: Felix Feng Date: Sat, 28 Dec 2024 09:09:24 +0800 Subject: [PATCH 1/4] revert --- .../default/plate-ui/color-picker.tsx | 12 +-- .../default/plate-ui/dropdown-menu.tsx | 31 ++++++- .../default/plate-ui/insert-dropdown-menu.tsx | 91 +++++++------------ .../plate-ui/turn-into-dropdown-menu.tsx | 56 +++++------- 4 files changed, 91 insertions(+), 99 deletions(-) diff --git a/apps/www/src/registry/default/plate-ui/color-picker.tsx b/apps/www/src/registry/default/plate-ui/color-picker.tsx index 45eea1a651..e51c8dc533 100644 --- a/apps/www/src/registry/default/plate-ui/color-picker.tsx +++ b/apps/www/src/registry/default/plate-ui/color-picker.tsx @@ -10,11 +10,7 @@ import { ColorDropdownMenuItems, } from './color-dropdown-menu-items'; import { ColorCustom } from './colors-custom'; -import { - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuLabel, -} from './dropdown-menu'; +import { DropdownMenuGroup, DropdownMenuItem } from './dropdown-menu'; export const ColorPickerContent = withRef< 'div', @@ -42,8 +38,7 @@ export const ColorPickerContent = withRef< ) => { return (
- - Custom Colors + - - Default Colors + +>(({ label, ...props }, ref) => { + return ( + <> + + + + {label && {label}} + {props.children} + + + ); +}); export const DropdownMenuPortal = DropdownMenuPrimitive.Portal; diff --git a/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx index c629858e4f..a540c40b4e 100644 --- a/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx @@ -19,10 +19,6 @@ import { TocPlugin } from '@udecode/plate-heading/react'; import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; import { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list'; import { LinkPlugin } from '@udecode/plate-link/react'; -import { - EquationPlugin, - InlineEquationPlugin, -} from '@udecode/plate-math/react'; import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react'; import { TablePlugin } from '@udecode/plate-table/react'; import { TogglePlugin } from '@udecode/plate-toggle/react'; @@ -44,7 +40,6 @@ import { PilcrowIcon, PlusIcon, QuoteIcon, - RadicalIcon, SquareIcon, TableIcon, TableOfContentsIcon, @@ -59,9 +54,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, - DropdownMenuPortal, - DropdownMenuRadioGroup, - DropdownMenuRadioItem, + DropdownMenuItem, DropdownMenuTrigger, useOpenState, } from './dropdown-menu'; @@ -199,12 +192,12 @@ const groups: Group[] = [ label: '3 columns', value: 'action_three_columns', }, - { - focusEditor: false, - icon: , - label: 'Equation', - value: EquationPlugin.key, - }, + // { + // focusEditor: false, + // icon: , + // label: 'Equation', + // value: EquationPlugin.key, + // }, ].map((item) => ({ ...item, onSelect: (editor, value) => { @@ -226,12 +219,12 @@ const groups: Group[] = [ label: 'Date', value: DatePlugin.key, }, - { - focusEditor: false, - icon: , - label: 'Inline Equation', - value: InlineEquationPlugin.key, - }, + // { + // focusEditor: false, + // icon: , + // label: 'Inline Equation', + // value: InlineEquationPlugin.key, + // }, ].map((item) => ({ ...item, onSelect: (editor, value) => { @@ -253,44 +246,28 @@ export function InsertDropdownMenu(props: DropdownMenuProps) { - - - - {groups.map(({ group, items: nestedItems }) => ( - - { - const item = nestedItems.find((i) => i.value === value); - - if (item) { - const { focusEditor: isFocusEditor = true, onSelect } = - item; - - onSelect(editor, value); - isFocusEditor && focusEditor(editor); - } - }} - label={group} - > - {nestedItems.map(({ icon, label, value }) => ( - - {icon} - {label} - - ))} - - + + {groups.map(({ group, items: nestedItems }) => ( + + {nestedItems.map(({ icon, label, value, onSelect }) => ( + { + onSelect(editor, value); + focusEditor(editor); + }} + > + {icon} + {label} + ))} - - - + + ))} + ); } diff --git a/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx index 2d4117cdad..fdb8881937 100644 --- a/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx @@ -38,8 +38,6 @@ import { import { DropdownMenu, DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, @@ -140,36 +138,30 @@ export function TurnIntoDropdownMenu(props: DropdownMenuProps) { - - - - - { - setBlockType(editor, type); - focusEditor(editor); - }} - label="Turn into" - > - {turnIntoItems.map(({ icon, label, value: itemValue }) => ( - - {icon} - {label} - - ))} - - - - - + + { + setBlockType(editor, type); + focusEditor(editor); + }} + label="Turn into" + > + {turnIntoItems.map(({ icon, label, value: itemValue }) => ( + + {icon} + {label} + + ))} + + ); } From 9506bbe622a72d97f6daffc063c56c610a66d3a9 Mon Sep 17 00:00:00 2001 From: Felix Feng Date: Sat, 28 Dec 2024 09:10:09 +0800 Subject: [PATCH 2/4] fix --- .../registry/default/plate-ui/turn-into-dropdown-menu.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx index fdb8881937..f9d42791ed 100644 --- a/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx @@ -140,13 +140,16 @@ export function TurnIntoDropdownMenu(props: DropdownMenuProps) { { + e.preventDefault(); + focusEditor(editor); + }} align="start" > { setBlockType(editor, type); - focusEditor(editor); }} label="Turn into" > From 5605f65b9c4213b1734d47fa637f98518ac55006 Mon Sep 17 00:00:00 2001 From: Felix Feng Date: Sat, 28 Dec 2024 09:13:19 +0800 Subject: [PATCH 3/4] sync template --- apps/www/public/r/index.json | 3 +- .../r/styles/default/color-dropdown-menu.json | 2 +- .../r/styles/default/dropdown-menu.json | 2 +- .../r/styles/default/equation-element.json | 3 +- .../styles/default/insert-dropdown-menu.json | 2 +- .../default/turn-into-dropdown-menu.json | 2 +- .../plate-playground-template/package.json | 4 +- .../plate-playground-template/pnpm-lock.yaml | 14 +-- .../editor/plugins/equation-plugins.ts | 1 + .../src/components/plate-ui/color-picker.tsx | 12 +-- .../src/components/plate-ui/dropdown-menu.tsx | 31 ++++++- .../plate-ui/insert-dropdown-menu.tsx | 91 +++++++------------ .../plate-ui/turn-into-dropdown-menu.tsx | 59 ++++++------ 13 files changed, 112 insertions(+), 114 deletions(-) diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json index 1a24740f5d..82f3af3a92 100644 --- a/apps/www/public/r/index.json +++ b/apps/www/public/r/index.json @@ -346,7 +346,8 @@ }, { "dependencies": [ - "@udecode/plate-math" + "@udecode/plate-math", + "react-textarea-autosize" ], "doc": { "description": "Displays a LaTeX equation element with an editable popover for inputting and rendering mathematical expressions.", diff --git a/apps/www/public/r/styles/default/color-dropdown-menu.json b/apps/www/public/r/styles/default/color-dropdown-menu.json index ddbb70a95e..41e027f9e2 100644 --- a/apps/www/public/r/styles/default/color-dropdown-menu.json +++ b/apps/www/public/r/styles/default/color-dropdown-menu.json @@ -43,7 +43,7 @@ "type": "registry:ui" }, { - "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { EraserIcon } from 'lucide-react';\n\nimport {\n type TColor,\n ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorCustom } from './colors-custom';\nimport {\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n} from './dropdown-menu';\n\nexport const ColorPickerContent = withRef<\n 'div',\n {\n clearColor: () => void;\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n color?: string;\n }\n>(\n (\n {\n className,\n clearColor,\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\n ...props\n },\n ref\n ) => {\n return (\n
\n \n Custom Colors\n \n \n \n Default Colors\n \n \n {color && (\n \n \n \n Clear\n \n \n )}\n
\n );\n }\n);\n\nexport const ColorPicker = React.memo(\n ColorPickerContent,\n (prev, next) =>\n prev.color === next.color &&\n prev.colors === next.colors &&\n prev.customColors === next.customColors\n);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { EraserIcon } from 'lucide-react';\n\nimport {\n type TColor,\n ColorDropdownMenuItems,\n} from './color-dropdown-menu-items';\nimport { ColorCustom } from './colors-custom';\nimport { DropdownMenuGroup, DropdownMenuItem } from './dropdown-menu';\n\nexport const ColorPickerContent = withRef<\n 'div',\n {\n clearColor: () => void;\n colors: TColor[];\n customColors: TColor[];\n updateColor: (color: string) => void;\n updateCustomColor: (color: string) => void;\n color?: string;\n }\n>(\n (\n {\n className,\n clearColor,\n color,\n colors,\n customColors,\n updateColor,\n updateCustomColor,\n ...props\n },\n ref\n ) => {\n return (\n
\n \n \n \n \n \n \n {color && (\n \n \n \n Clear\n \n \n )}\n
\n );\n }\n);\n\nexport const ColorPicker = React.memo(\n ColorPickerContent,\n (prev, next) =>\n prev.color === next.color &&\n prev.colors === next.colors &&\n prev.customColors === next.customColors\n);\n", "path": "plate-ui/color-picker.tsx", "target": "components/plate-ui/color-picker.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/dropdown-menu.json b/apps/www/public/r/styles/default/dropdown-menu.json index adcd89b1c3..d7750f6221 100644 --- a/apps/www/public/r/styles/default/dropdown-menu.json +++ b/apps/www/public/r/styles/default/dropdown-menu.json @@ -10,7 +10,7 @@ }, "files": [ { - "content": "'use client';\n\nimport * as React from 'react';\nimport { useCallback, useState } from 'react';\n\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';\nimport { Check, ChevronRight } from 'lucide-react';\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\n\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nexport const DropdownMenuGroup = withCn(DropdownMenuPrimitive.Group, 'py-1.5');\n\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nexport const DropdownMenuRadioGroup = React.forwardRef<\n HTMLDivElement,\n { label?: React.ReactNode } & React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.RadioGroup\n >\n>(({ label, ...props }, ref) => {\n return (\n <>\n \n\n \n {label && {label}}\n {props.children}\n \n \n );\n});\n\nexport const DropdownMenuSubTrigger = withRef<\n typeof DropdownMenuPrimitive.SubTrigger,\n {\n inset?: boolean;\n }\n>(({ children, className, inset, ...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 py-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 className: cn(\n 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover 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 sideOffset: 4,\n});\n\nexport const DropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>(({ ...props }, ref) => (\n \n {\n e.preventDefault();\n }}\n {...props}\n />\n \n));\n\nconst menuItemVariants = cva(\n 'relative mx-1 flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\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>(({ children, className, ...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>(({ children, className, hideIcon, ...props }, ref) => (\n \n {!hideIcon && (\n \n \n \n \n \n )}\n {children}\n \n));\n\nconst dropdownMenuLabelVariants = cva(\n cn(\n 'mx-1 select-none px-2 pb-2 pt-1.5 text-xs font-semibold text-muted-foreground'\n ),\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';\n\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';\nimport { Check, ChevronRight } from 'lucide-react';\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\n\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\n\nexport const DropdownMenuGroup = React.forwardRef<\n HTMLDivElement,\n { label?: React.ReactNode } & React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.Group\n >\n>(({ label, ...props }, ref) => {\n return (\n <>\n \n\n \n {label && {label}}\n {props.children}\n \n \n );\n});\n\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\n\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\n\nexport const DropdownMenuRadioGroup = React.forwardRef<\n HTMLDivElement,\n { label?: React.ReactNode } & React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.RadioGroup\n >\n>(({ label, ...props }, ref) => {\n return (\n <>\n \n\n \n {label && {label}}\n {props.children}\n \n \n );\n});\n\nexport const DropdownMenuSubTrigger = withRef<\n typeof DropdownMenuPrimitive.SubTrigger,\n {\n inset?: boolean;\n }\n>(({ children, className, inset, ...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 py-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 className: cn(\n 'z-50 min-w-32 overflow-hidden rounded-md border bg-popover 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 sideOffset: 4,\n});\n\nexport const DropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>(({ ...props }, ref) => (\n \n {\n e.preventDefault();\n }}\n {...props}\n />\n \n));\n\nconst menuItemVariants = cva(\n 'relative mx-1 flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\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>(({ children, className, ...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>(({ children, className, hideIcon, ...props }, ref) => (\n \n {!hideIcon && (\n \n \n \n \n \n )}\n {children}\n \n));\n\nconst dropdownMenuLabelVariants = cva(\n cn(\n 'mx-1 select-none px-2 pb-2 pt-1.5 text-xs font-semibold text-muted-foreground'\n ),\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", "path": "plate-ui/dropdown-menu.tsx", "target": "components/plate-ui/dropdown-menu.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/equation-element.json b/apps/www/public/r/styles/default/equation-element.json index bc219792d6..691241b3e2 100644 --- a/apps/www/public/r/styles/default/equation-element.json +++ b/apps/www/public/r/styles/default/equation-element.json @@ -1,6 +1,7 @@ { "dependencies": [ - "@udecode/plate-math" + "@udecode/plate-math", + "react-textarea-autosize" ], "doc": { "description": "Displays a LaTeX equation element with an editable popover for inputting and rendering mathematical expressions.", diff --git a/apps/www/public/r/styles/default/insert-dropdown-menu.json b/apps/www/public/r/styles/default/insert-dropdown-menu.json index 1873349596..02bd9e2dec 100644 --- a/apps/www/public/r/styles/default/insert-dropdown-menu.json +++ b/apps/www/public/r/styles/default/insert-dropdown-menu.json @@ -21,7 +21,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n type PlateEditor,\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n EquationPlugin,\n InlineEquationPlugin,\n} from '@udecode/plate-math/react';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n CalendarIcon,\n ChevronRightIcon,\n Columns3Icon,\n FileCodeIcon,\n FilmIcon,\n Heading1Icon,\n Heading2Icon,\n Heading3Icon,\n ImageIcon,\n Link2Icon,\n ListIcon,\n ListOrderedIcon,\n MinusIcon,\n PenToolIcon,\n PilcrowIcon,\n PlusIcon,\n QuoteIcon,\n RadicalIcon,\n SquareIcon,\n TableIcon,\n TableOfContentsIcon,\n} from 'lucide-react';\n\nimport {\n insertBlock,\n insertInlineElement,\n} from '@/components/editor/transforms';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\ntype Group = {\n group: string;\n items: Item[];\n};\n\ninterface Item {\n icon: React.ReactNode;\n onSelect: (editor: PlateEditor, value: string) => void;\n value: string;\n focusEditor?: boolean;\n label?: string;\n}\n\nconst groups: Group[] = [\n {\n group: 'Basic blocks',\n items: [\n {\n icon: ,\n label: 'Paragraph',\n value: ParagraphPlugin.key,\n },\n {\n icon: ,\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n icon: ,\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n icon: ,\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n icon: ,\n label: 'Table',\n value: TablePlugin.key,\n },\n {\n icon: ,\n label: 'Code',\n value: CodeBlockPlugin.key,\n },\n {\n icon: ,\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n {\n icon: ,\n label: 'Divider',\n value: HorizontalRulePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Lists',\n items: [\n {\n icon: ,\n label: 'Bulleted list',\n value: ListStyleType.Disc,\n },\n {\n icon: ,\n label: 'Numbered list',\n value: ListStyleType.Decimal,\n },\n {\n icon: ,\n label: 'To-do list',\n value: INDENT_LIST_KEYS.todo,\n },\n {\n icon: ,\n label: 'Toggle list',\n value: TogglePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Media',\n items: [\n {\n icon: ,\n label: 'Image',\n value: ImagePlugin.key,\n },\n {\n icon: ,\n label: 'Embed',\n value: MediaEmbedPlugin.key,\n },\n {\n icon: ,\n label: 'Excalidraw',\n value: ExcalidrawPlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Advanced blocks',\n items: [\n {\n icon: ,\n label: 'Table of contents',\n value: TocPlugin.key,\n },\n {\n icon: ,\n label: '3 columns',\n value: 'action_three_columns',\n },\n {\n focusEditor: false,\n icon: ,\n label: 'Equation',\n value: EquationPlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Inline',\n items: [\n {\n icon: ,\n label: 'Link',\n value: LinkPlugin.key,\n },\n {\n focusEditor: true,\n icon: ,\n label: 'Date',\n value: DatePlugin.key,\n },\n {\n focusEditor: false,\n icon: ,\n label: 'Inline Equation',\n value: InlineEquationPlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertInlineElement(editor, value);\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 \n \n {groups.map(({ group, items: nestedItems }) => (\n \n {\n const item = nestedItems.find((i) => i.value === value);\n\n if (item) {\n const { focusEditor: isFocusEditor = true, onSelect } =\n item;\n\n onSelect(editor, value);\n isFocusEditor && focusEditor(editor);\n }\n }}\n label={group}\n >\n {nestedItems.map(({ icon, label, value }) => (\n \n {icon}\n {label}\n \n ))}\n \n \n ))}\n \n \n \n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n type PlateEditor,\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n CalendarIcon,\n ChevronRightIcon,\n Columns3Icon,\n FileCodeIcon,\n FilmIcon,\n Heading1Icon,\n Heading2Icon,\n Heading3Icon,\n ImageIcon,\n Link2Icon,\n ListIcon,\n ListOrderedIcon,\n MinusIcon,\n PenToolIcon,\n PilcrowIcon,\n PlusIcon,\n QuoteIcon,\n SquareIcon,\n TableIcon,\n TableOfContentsIcon,\n} from 'lucide-react';\n\nimport {\n insertBlock,\n insertInlineElement,\n} from '@/components/editor/transforms';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\ntype Group = {\n group: string;\n items: Item[];\n};\n\ninterface Item {\n icon: React.ReactNode;\n onSelect: (editor: PlateEditor, value: string) => void;\n value: string;\n focusEditor?: boolean;\n label?: string;\n}\n\nconst groups: Group[] = [\n {\n group: 'Basic blocks',\n items: [\n {\n icon: ,\n label: 'Paragraph',\n value: ParagraphPlugin.key,\n },\n {\n icon: ,\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n icon: ,\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n icon: ,\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n icon: ,\n label: 'Table',\n value: TablePlugin.key,\n },\n {\n icon: ,\n label: 'Code',\n value: CodeBlockPlugin.key,\n },\n {\n icon: ,\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n {\n icon: ,\n label: 'Divider',\n value: HorizontalRulePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Lists',\n items: [\n {\n icon: ,\n label: 'Bulleted list',\n value: ListStyleType.Disc,\n },\n {\n icon: ,\n label: 'Numbered list',\n value: ListStyleType.Decimal,\n },\n {\n icon: ,\n label: 'To-do list',\n value: INDENT_LIST_KEYS.todo,\n },\n {\n icon: ,\n label: 'Toggle list',\n value: TogglePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Media',\n items: [\n {\n icon: ,\n label: 'Image',\n value: ImagePlugin.key,\n },\n {\n icon: ,\n label: 'Embed',\n value: MediaEmbedPlugin.key,\n },\n {\n icon: ,\n label: 'Excalidraw',\n value: ExcalidrawPlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Advanced blocks',\n items: [\n {\n icon: ,\n label: 'Table of contents',\n value: TocPlugin.key,\n },\n {\n icon: ,\n label: '3 columns',\n value: 'action_three_columns',\n },\n // {\n // focusEditor: false,\n // icon: ,\n // label: 'Equation',\n // value: EquationPlugin.key,\n // },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Inline',\n items: [\n {\n icon: ,\n label: 'Link',\n value: LinkPlugin.key,\n },\n {\n focusEditor: true,\n icon: ,\n label: 'Date',\n value: DatePlugin.key,\n },\n // {\n // focusEditor: false,\n // icon: ,\n // label: 'Inline Equation',\n // value: InlineEquationPlugin.key,\n // },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertInlineElement(editor, value);\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 {groups.map(({ group, items: nestedItems }) => (\n \n {nestedItems.map(({ icon, label, value, onSelect }) => (\n {\n onSelect(editor, value);\n focusEditor(editor);\n }}\n >\n {icon}\n {label}\n \n ))}\n \n ))}\n \n \n );\n}\n", "path": "plate-ui/insert-dropdown-menu.tsx", "target": "components/plate-ui/insert-dropdown-menu.tsx", "type": "registry:ui" diff --git a/apps/www/public/r/styles/default/turn-into-dropdown-menu.json b/apps/www/public/r/styles/default/turn-into-dropdown-menu.json index b16ea0d770..defbb1af4b 100644 --- a/apps/www/public/r/styles/default/turn-into-dropdown-menu.json +++ b/apps/www/public/r/styles/default/turn-into-dropdown-menu.json @@ -21,7 +21,7 @@ }, "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n useSelectionFragmentProp,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n ChevronRightIcon,\n Columns3Icon,\n FileCodeIcon,\n Heading1Icon,\n Heading2Icon,\n Heading3Icon,\n ListIcon,\n ListOrderedIcon,\n PilcrowIcon,\n QuoteIcon,\n SquareIcon,\n} from 'lucide-react';\n\nimport {\n STRUCTURAL_TYPES,\n getBlockType,\n setBlockType,\n} from '@/components/editor/transforms';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst turnIntoItems = [\n {\n icon: ,\n keywords: ['paragraph'],\n label: 'Text',\n value: ParagraphPlugin.key,\n },\n {\n icon: ,\n keywords: ['title', 'h1'],\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n icon: ,\n keywords: ['subtitle', 'h2'],\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n icon: ,\n keywords: ['subtitle', 'h3'],\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n icon: ,\n keywords: ['unordered', 'ul', '-'],\n label: 'Bulleted list',\n value: ListStyleType.Disc,\n },\n {\n icon: ,\n keywords: ['ordered', 'ol', '1'],\n label: 'Numbered list',\n value: ListStyleType.Decimal,\n },\n {\n icon: ,\n keywords: ['checklist', 'task', 'checkbox', '[]'],\n label: 'To-do list',\n value: INDENT_LIST_KEYS.todo,\n },\n {\n icon: ,\n keywords: ['collapsible', 'expandable'],\n label: 'Toggle list',\n value: TogglePlugin.key,\n },\n {\n icon: ,\n keywords: ['```'],\n label: 'Code',\n value: CodeBlockPlugin.key,\n },\n {\n icon: ,\n keywords: ['citation', 'blockquote', '>'],\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n {\n icon: ,\n label: '3 columns',\n value: 'action_three_columns',\n },\n];\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n const value = useSelectionFragmentProp({\n defaultValue: ParagraphPlugin.key,\n getProp: (node) => getBlockType(node as any),\n structuralTypes: STRUCTURAL_TYPES,\n });\n const selectedItem = React.useMemo(\n () =>\n turnIntoItems.find(\n (item) => item.value === (value ?? ParagraphPlugin.key)\n ) ?? turnIntoItems[0],\n [value]\n );\n\n return (\n \n \n \n {selectedItem.label}\n \n \n\n \n \n \n \n {\n setBlockType(editor, type);\n focusEditor(editor);\n }}\n label=\"Turn into\"\n >\n {turnIntoItems.map(({ icon, label, value: itemValue }) => (\n \n {icon}\n {label}\n \n ))}\n \n \n \n \n \n \n );\n}\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n useSelectionFragmentProp,\n} from '@udecode/plate-common/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n ChevronRightIcon,\n Columns3Icon,\n FileCodeIcon,\n Heading1Icon,\n Heading2Icon,\n Heading3Icon,\n ListIcon,\n ListOrderedIcon,\n PilcrowIcon,\n QuoteIcon,\n SquareIcon,\n} from 'lucide-react';\n\nimport {\n STRUCTURAL_TYPES,\n getBlockType,\n setBlockType,\n} from '@/components/editor/transforms';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst turnIntoItems = [\n {\n icon: ,\n keywords: ['paragraph'],\n label: 'Text',\n value: ParagraphPlugin.key,\n },\n {\n icon: ,\n keywords: ['title', 'h1'],\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n icon: ,\n keywords: ['subtitle', 'h2'],\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n icon: ,\n keywords: ['subtitle', 'h3'],\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n icon: ,\n keywords: ['unordered', 'ul', '-'],\n label: 'Bulleted list',\n value: ListStyleType.Disc,\n },\n {\n icon: ,\n keywords: ['ordered', 'ol', '1'],\n label: 'Numbered list',\n value: ListStyleType.Decimal,\n },\n {\n icon: ,\n keywords: ['checklist', 'task', 'checkbox', '[]'],\n label: 'To-do list',\n value: INDENT_LIST_KEYS.todo,\n },\n {\n icon: ,\n keywords: ['collapsible', 'expandable'],\n label: 'Toggle list',\n value: TogglePlugin.key,\n },\n {\n icon: ,\n keywords: ['```'],\n label: 'Code',\n value: CodeBlockPlugin.key,\n },\n {\n icon: ,\n keywords: ['citation', 'blockquote', '>'],\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n {\n icon: ,\n label: '3 columns',\n value: 'action_three_columns',\n },\n];\n\nexport function TurnIntoDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n const value = useSelectionFragmentProp({\n defaultValue: ParagraphPlugin.key,\n getProp: (node) => getBlockType(node as any),\n structuralTypes: STRUCTURAL_TYPES,\n });\n const selectedItem = React.useMemo(\n () =>\n turnIntoItems.find(\n (item) => item.value === (value ?? ParagraphPlugin.key)\n ) ?? turnIntoItems[0],\n [value]\n );\n\n return (\n \n \n \n {selectedItem.label}\n \n \n\n {\n e.preventDefault();\n focusEditor(editor);\n }}\n align=\"start\"\n >\n {\n setBlockType(editor, type);\n }}\n label=\"Turn into\"\n >\n {turnIntoItems.map(({ icon, label, value: itemValue }) => (\n \n {icon}\n {label}\n \n ))}\n \n \n \n );\n}\n", "path": "plate-ui/turn-into-dropdown-menu.tsx", "target": "components/plate-ui/turn-into-dropdown-menu.tsx", "type": "registry:ui" diff --git a/templates/plate-playground-template/package.json b/templates/plate-playground-template/package.json index 350577a949..fe9e13e41f 100644 --- a/templates/plate-playground-template/package.json +++ b/templates/plate-playground-template/package.json @@ -61,7 +61,7 @@ "@udecode/plate-line-height": "41.0.0", "@udecode/plate-link": "41.0.0", "@udecode/plate-markdown": "41.0.0", - "@udecode/plate-math": "41.0.4", + "@udecode/plate-math": "41.0.11", "@udecode/plate-media": "41.0.0", "@udecode/plate-mention": "41.0.0", "@udecode/plate-node-id": "41.0.0", @@ -75,7 +75,6 @@ "@udecode/plate-toggle": "41.0.0", "@udecode/plate-trailing-block": "41.0.0", "@uploadthing/react": "7.1.0", - "react-textarea-autosize": "^8.5.5", "ai": "^4.0.21", "class-variance-authority": "0.7.1", "clsx": "^2.1.1", @@ -94,6 +93,7 @@ "react-lite-youtube-embed": "^2.4.0", "react-player": "^2.16.0", "react-resizable-panels": "^2.1.7", + "react-textarea-autosize": "^8.5.6", "react-tweet": "^3.2.1", "slate": "^0.112.0", "slate-dom": "^0.111.0", diff --git a/templates/plate-playground-template/pnpm-lock.yaml b/templates/plate-playground-template/pnpm-lock.yaml index 1a8ce2f9c3..ba579231ef 100644 --- a/templates/plate-playground-template/pnpm-lock.yaml +++ b/templates/plate-playground-template/pnpm-lock.yaml @@ -153,8 +153,8 @@ importers: specifier: 41.0.0 version: 41.0.0(@udecode/plate-common@41.0.5(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.25.0)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0) '@udecode/plate-math': - specifier: 41.0.4 - version: 41.0.4(@udecode/plate-common@41.0.5(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.25.0)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0) + specifier: 41.0.11 + version: 41.0.11(@udecode/plate-common@41.0.5(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.25.0)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0) '@udecode/plate-media': specifier: 41.0.0 version: 41.0.0(@udecode/plate-common@41.0.5(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.25.0)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0) @@ -249,7 +249,7 @@ importers: specifier: ^2.1.7 version: 2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-textarea-autosize: - specifier: ^8.5.5 + specifier: ^8.5.6 version: 8.5.6(@types/react@18.3.12)(react@18.3.1) react-tweet: specifier: ^3.2.1 @@ -1871,10 +1871,10 @@ packages: slate-hyperscript: '>=0.66.0' slate-react: '>=0.111.0' - '@udecode/plate-math@41.0.4': - resolution: {integrity: sha512-VSrUaQFkE5A5WjaHYZL01B9wP6xLaFhXvq1EQg1nChx9ueC40RixSdQTgSk1zzODh3pJYvf5kMb035n5lMY+PQ==} + '@udecode/plate-math@41.0.11': + resolution: {integrity: sha512-X2zAlskM9evdZTe0I6INPBBbHR+ED5WsR0fu2JaQYNAAr33RBsogl+aftQkC7u+TaZ12cJ5lF6iMW+zLSeg5pQ==} peerDependencies: - '@udecode/plate-common': '>=41.0.2' + '@udecode/plate-common': '>=41.0.5' react: '>=16.8.0' react-dom: '>=16.8.0' slate: '>=0.112.0' @@ -6134,7 +6134,7 @@ snapshots: transitivePeerDependencies: - supports-color - '@udecode/plate-math@41.0.4(@udecode/plate-common@41.0.5(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.25.0)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0)': + '@udecode/plate-math@41.0.11(@udecode/plate-common@41.0.5(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.25.0)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0)': dependencies: '@udecode/plate-common': 41.0.5(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.25.0)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0) katex: 0.16.11 diff --git a/templates/plate-playground-template/src/components/editor/plugins/equation-plugins.ts b/templates/plate-playground-template/src/components/editor/plugins/equation-plugins.ts index 70f9c06067..008ccbbeb2 100644 --- a/templates/plate-playground-template/src/components/editor/plugins/equation-plugins.ts +++ b/templates/plate-playground-template/src/components/editor/plugins/equation-plugins.ts @@ -1,3 +1,4 @@ +'use client'; import { EquationPlugin, InlineEquationPlugin, diff --git a/templates/plate-playground-template/src/components/plate-ui/color-picker.tsx b/templates/plate-playground-template/src/components/plate-ui/color-picker.tsx index 45eea1a651..e51c8dc533 100644 --- a/templates/plate-playground-template/src/components/plate-ui/color-picker.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/color-picker.tsx @@ -10,11 +10,7 @@ import { ColorDropdownMenuItems, } from './color-dropdown-menu-items'; import { ColorCustom } from './colors-custom'; -import { - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuLabel, -} from './dropdown-menu'; +import { DropdownMenuGroup, DropdownMenuItem } from './dropdown-menu'; export const ColorPickerContent = withRef< 'div', @@ -42,8 +38,7 @@ export const ColorPickerContent = withRef< ) => { return (
- - Custom Colors + - - Default Colors + +>(({ label, ...props }, ref) => { + return ( + <> + + + + {label && {label}} + {props.children} + + + ); +}); export const DropdownMenuPortal = DropdownMenuPrimitive.Portal; diff --git a/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx index 391c349065..b53ca0a4eb 100644 --- a/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/insert-dropdown-menu.tsx @@ -19,10 +19,6 @@ import { TocPlugin } from '@udecode/plate-heading/react'; import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; import { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list'; import { LinkPlugin } from '@udecode/plate-link/react'; -import { - EquationPlugin, - InlineEquationPlugin, -} from '@udecode/plate-math/react'; import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react'; import { TablePlugin } from '@udecode/plate-table/react'; import { TogglePlugin } from '@udecode/plate-toggle/react'; @@ -44,7 +40,6 @@ import { PilcrowIcon, PlusIcon, QuoteIcon, - RadicalIcon, SquareIcon, TableIcon, TableOfContentsIcon, @@ -59,9 +54,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, - DropdownMenuPortal, - DropdownMenuRadioGroup, - DropdownMenuRadioItem, + DropdownMenuItem, DropdownMenuTrigger, useOpenState, } from './dropdown-menu'; @@ -199,12 +192,12 @@ const groups: Group[] = [ label: '3 columns', value: 'action_three_columns', }, - { - focusEditor: false, - icon: , - label: 'Equation', - value: EquationPlugin.key, - }, + // { + // focusEditor: false, + // icon: , + // label: 'Equation', + // value: EquationPlugin.key, + // }, ].map((item) => ({ ...item, onSelect: (editor, value) => { @@ -226,12 +219,12 @@ const groups: Group[] = [ label: 'Date', value: DatePlugin.key, }, - { - focusEditor: false, - icon: , - label: 'Inline Equation', - value: InlineEquationPlugin.key, - }, + // { + // focusEditor: false, + // icon: , + // label: 'Inline Equation', + // value: InlineEquationPlugin.key, + // }, ].map((item) => ({ ...item, onSelect: (editor, value) => { @@ -253,44 +246,28 @@ export function InsertDropdownMenu(props: DropdownMenuProps) { - - - - {groups.map(({ group, items: nestedItems }) => ( - - { - const item = nestedItems.find((i) => i.value === value); - - if (item) { - const { focusEditor: isFocusEditor = true, onSelect } = - item; - - onSelect(editor, value); - isFocusEditor && focusEditor(editor); - } - }} - label={group} - > - {nestedItems.map(({ icon, label, value }) => ( - - {icon} - {label} - - ))} - - + + {groups.map(({ group, items: nestedItems }) => ( + + {nestedItems.map(({ icon, label, value, onSelect }) => ( + { + onSelect(editor, value); + focusEditor(editor); + }} + > + {icon} + {label} + ))} - - - + + ))} + ); } diff --git a/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx index 090d34a7f1..8bf34187d9 100644 --- a/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/turn-into-dropdown-menu.tsx @@ -38,8 +38,6 @@ import { import { DropdownMenu, DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, @@ -140,36 +138,33 @@ export function TurnIntoDropdownMenu(props: DropdownMenuProps) { - - - - - { - setBlockType(editor, type); - focusEditor(editor); - }} - label="Turn into" - > - {turnIntoItems.map(({ icon, label, value: itemValue }) => ( - - {icon} - {label} - - ))} - - - - - + { + e.preventDefault(); + focusEditor(editor); + }} + align="start" + > + { + setBlockType(editor, type); + }} + label="Turn into" + > + {turnIntoItems.map(({ icon, label, value: itemValue }) => ( + + {icon} + {label} + + ))} + + ); } From 8575eb8beb45d09e0611dafb0cee44fa1672b54a Mon Sep 17 00:00:00 2001 From: Felix Feng Date: Sat, 28 Dec 2024 09:19:03 +0800 Subject: [PATCH 4/4] equation button --- .../default/plate-ui/insert-dropdown-menu.tsx | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx index a540c40b4e..11dc5499d5 100644 --- a/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx @@ -19,6 +19,10 @@ import { TocPlugin } from '@udecode/plate-heading/react'; import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; import { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list'; import { LinkPlugin } from '@udecode/plate-link/react'; +import { + EquationPlugin, + InlineEquationPlugin, +} from '@udecode/plate-math/react'; import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react'; import { TablePlugin } from '@udecode/plate-table/react'; import { TogglePlugin } from '@udecode/plate-toggle/react'; @@ -40,6 +44,7 @@ import { PilcrowIcon, PlusIcon, QuoteIcon, + RadicalIcon, SquareIcon, TableIcon, TableOfContentsIcon, @@ -192,12 +197,12 @@ const groups: Group[] = [ label: '3 columns', value: 'action_three_columns', }, - // { - // focusEditor: false, - // icon: , - // label: 'Equation', - // value: EquationPlugin.key, - // }, + { + focusEditor: false, + icon: , + label: 'Equation', + value: EquationPlugin.key, + }, ].map((item) => ({ ...item, onSelect: (editor, value) => { @@ -219,12 +224,12 @@ const groups: Group[] = [ label: 'Date', value: DatePlugin.key, }, - // { - // focusEditor: false, - // icon: , - // label: 'Inline Equation', - // value: InlineEquationPlugin.key, - // }, + { + focusEditor: false, + icon: , + label: 'Inline Equation', + value: InlineEquationPlugin.key, + }, ].map((item) => ({ ...item, onSelect: (editor, value) => {