\n
\n {table.map((rows, rowIndex) =>\n rows.map((value, columIndex) => {\n return (\n
{\n onCellMove(rowIndex, columIndex);\n }}\n />\n );\n })\n )}\n
\n\n
\n {info.rowCount} x {info.colCount}\n
\n
\n \n \n\n
\n \n \n Column\n \n \n {\n tf.insert.tableColumn();\n focusEditor(editor);\n }}\n >\n \n Insert column after\n \n {\n deleteColumn(editor);\n focusEditor(editor);\n }}\n >\n \n Delete column\n \n \n \n\n
\n \n \n Row\n \n \n {\n insertTableRow(editor);\n focusEditor(editor);\n }}\n >\n \n Insert row after\n \n {\n deleteRow(editor);\n focusEditor(editor);\n }}\n >\n \n Delete row\n \n \n {\n deleteTable(editor);\n focusEditor(editor);\n }}\n >\n \n Delete table\n \n \n \n \n \n );\n}\n",
"path": "plate-ui/table-dropdown-menu.tsx",
"target": "components/plate-ui/table-dropdown-menu.tsx",
"type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/table-element.json b/apps/www/public/r/styles/default/table-element.json
index 1f36f11cd0..215cd5f550 100644
--- a/apps/www/public/r/styles/default/table-element.json
+++ b/apps/www/public/r/styles/default/table-element.json
@@ -20,7 +20,7 @@
},
"files": [
{
- "content": "'use client';\n\nimport React from 'react';\n\nimport type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { PopoverAnchor } from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { isSelectionExpanded } from '@udecode/plate-common';\nimport {\n useEditorRef,\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n withHOC,\n} from '@udecode/plate-common/react';\nimport {\n type TTableElement,\n mergeTableCells,\n unmergeTableCells,\n} from '@udecode/plate-table';\nimport {\n TableProvider,\n useTableBordersDropdownMenuContentState,\n useTableElement,\n useTableElementState,\n useTableMergeState,\n} from '@udecode/plate-table/react';\nimport { type LucideProps, Combine, Trash2Icon, Ungroup } from 'lucide-react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\n\nexport const TableBordersDropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>((props, ref) => {\n const {\n getOnSelectTableBorder,\n hasBottomBorder,\n hasLeftBorder,\n hasNoBorders,\n hasOuterBorders,\n hasRightBorder,\n hasTopBorder,\n } = useTableBordersDropdownMenuContentState();\n\n return (\n
\n \n \n \n Bottom Border
\n \n \n \n Top Border
\n \n \n \n Left Border
\n \n \n \n Right Border
\n \n \n\n \n \n \n No Border
\n \n \n \n Outside Borders
\n \n \n \n );\n});\n\nexport const TableFloatingToolbar = withRef
(\n ({ children, ...props }, ref) => {\n const element = useElement();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n\n const readOnly = useReadOnly();\n const selected = useSelected();\n const editor = useEditorRef();\n\n const collapsed = !readOnly && selected && selectionCollapsed;\n const open = !readOnly && selected;\n\n const { canMerge, canUnmerge } = useTableMergeState();\n\n const mergeContent = canMerge && (\n \n );\n\n const unmergeButton = canUnmerge && (\n \n );\n\n const bordersContent = collapsed && (\n <>\n \n \n \n \n\n \n \n \n \n\n \n >\n );\n\n return (\n \n {children}\n {(canMerge || canUnmerge || collapsed) && (\n e.preventDefault()}\n {...props}\n >\n {unmergeButton}\n {mergeContent}\n {bordersContent}\n \n )}\n \n );\n }\n);\n\nexport const TableElement = withHOC(\n TableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const { colSizes, isSelectingCell, marginLeft, minColumnWidth } =\n useTableElementState();\n const { colGroupProps, props: tableProps } = useTableElement();\n\n return (\n \n \n \n \n {colSizes.map((width, index) => (\n \n ))}\n \n\n {children}\n
\n \n \n );\n })\n);\n\nconst BorderAll = (props: LucideProps) => (\n \n);\n\nconst BorderBottom = (props: LucideProps) => (\n \n);\n\nconst BorderLeft = (props: LucideProps) => (\n \n);\n\nconst BorderNone = (props: LucideProps) => (\n \n);\n\nconst BorderRight = (props: LucideProps) => (\n \n);\n\nconst BorderTop = (props: LucideProps) => (\n \n);\n",
+ "content": "'use client';\n\nimport React from 'react';\n\nimport type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { PopoverAnchor } from '@radix-ui/react-popover';\nimport { cn, withRef } from '@udecode/cn';\nimport { isSelectionExpanded } from '@udecode/plate-common';\nimport {\n useEditorRef,\n useEditorSelector,\n useElement,\n useRemoveNodeButton,\n withHOC,\n} from '@udecode/plate-common/react';\nimport {\n type TTableElement,\n mergeTableCells,\n unmergeTableCells,\n} from '@udecode/plate-table';\nimport {\n TableProvider,\n useTableBordersDropdownMenuContentState,\n useTableElement,\n useTableElementState,\n useTableMergeState,\n} from '@udecode/plate-table/react';\nimport { type LucideProps, Combine, Trash2Icon, Ungroup } from 'lucide-react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { Button } from './button';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n} from './dropdown-menu';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverContent, popoverVariants } from './popover';\n\nexport const TableBordersDropdownMenuContent = withRef<\n typeof DropdownMenuPrimitive.Content\n>((props, ref) => {\n const {\n getOnSelectTableBorder,\n hasBottomBorder,\n hasLeftBorder,\n hasNoBorders,\n hasOuterBorders,\n hasRightBorder,\n hasTopBorder,\n } = useTableBordersDropdownMenuContentState();\n\n return (\n \n \n \n \n Bottom Border
\n \n \n \n Top Border
\n \n \n \n Left Border
\n \n \n \n Right Border
\n \n \n\n \n \n \n No Border
\n \n \n \n Outside Borders
\n \n \n \n );\n});\n\nexport const TableFloatingToolbar = withRef(\n ({ children, ...props }, ref) => {\n const element = useElement();\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const selectionCollapsed = useEditorSelector(\n (editor) => !isSelectionExpanded(editor),\n []\n );\n\n const readOnly = useReadOnly();\n const selected = useSelected();\n const editor = useEditorRef();\n\n const collapsed = !readOnly && selected && selectionCollapsed;\n const open = !readOnly && selected;\n\n const { canMerge, canUnmerge } = useTableMergeState();\n\n const mergeContent = canMerge && (\n \n );\n\n const unmergeButton = canUnmerge && (\n \n );\n\n const bordersContent = collapsed && (\n <>\n \n \n \n \n\n \n \n \n \n\n \n >\n );\n\n return (\n \n {children}\n {(canMerge || canUnmerge || collapsed) && (\n e.preventDefault()}\n {...props}\n >\n {unmergeButton}\n {mergeContent}\n {bordersContent}\n \n )}\n \n );\n }\n);\n\nexport const TableElement = withHOC(\n TableProvider,\n withRef(({ children, className, ...props }, ref) => {\n const { colSizes, isSelectingCell, marginLeft, minColumnWidth } =\n useTableElementState();\n const { colGroupProps, props: tableProps } = useTableElement();\n\n return (\n \n \n \n \n {colSizes.map((width, index) => (\n \n ))}\n \n\n {children}\n
\n \n \n );\n })\n);\n\nconst BorderAll = (props: LucideProps) => (\n \n);\n\nconst BorderBottom = (props: LucideProps) => (\n \n);\n\nconst BorderLeft = (props: LucideProps) => (\n \n);\n\nconst BorderNone = (props: LucideProps) => (\n \n);\n\nconst BorderRight = (props: LucideProps) => (\n \n);\n\nconst BorderTop = (props: LucideProps) => (\n \n);\n",
"path": "plate-ui/table-element.tsx",
"target": "components/plate-ui/table-element.tsx",
"type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/toolbar.json b/apps/www/public/r/styles/default/toolbar.json
index 60d117938c..562b75dfdb 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 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 \n
{children}
\n\n
\n \n
\n
\n );\n});\n",
+ "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 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 pressed?: boolean;\n }\n>(({ children, className, pressed, 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 \n
{children}
\n\n
\n \n
\n
\n );\n});\n",
"path": "plate-ui/toolbar.tsx",
"target": "components/plate-ui/toolbar.tsx",
"type": "registry:ui"
diff --git a/apps/www/src/registry/default/example/cards/cards-toolbar.tsx b/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
index b4cb6e4ce0..ce46e4f0b2 100644
--- a/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
+++ b/apps/www/src/registry/default/example/cards/cards-toolbar.tsx
@@ -11,7 +11,6 @@ import {
FontBackgroundColorPlugin,
FontColorPlugin,
} from '@udecode/plate-font/react';
-import { ListStyleType } from '@udecode/plate-indent-list';
import {
AudioPlugin,
FilePlugin,
@@ -33,7 +32,10 @@ import { ColorDropdownMenu } from '@/registry/default/plate-ui/color-dropdown-me
import { CommentToolbarButton } from '@/registry/default/plate-ui/comment-toolbar-button';
import { EmojiDropdownMenu } from '@/registry/default/plate-ui/emoji-dropdown-menu';
import { FixedToolbar } from '@/registry/default/plate-ui/fixed-toolbar';
-import { IndentListToolbarButton } from '@/registry/default/plate-ui/indent-list-toolbar-button';
+import {
+ BulletedIndentListToolbarButton,
+ NumberedIndentListToolbarButton,
+} from '@/registry/default/plate-ui/indent-list-toolbar-button';
import { IndentToolbarButton } from '@/registry/default/plate-ui/indent-toolbar-button';
import { InsertDropdownMenu } from '@/registry/default/plate-ui/insert-dropdown-menu';
import { LineHeightDropdownMenu } from '@/registry/default/plate-ui/line-height-dropdown-menu';
@@ -111,8 +113,8 @@ export function CardsToolbar() {
-
-
+
+
diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
index ffcba0a6e1..b9c5a2d180 100644
--- a/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
+++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar-buttons.tsx
@@ -15,7 +15,6 @@ import {
FontColorPlugin,
} from '@udecode/plate-font/react';
import { HighlightPlugin } from '@udecode/plate-highlight/react';
-import { ListStyleType } from '@udecode/plate-indent-list';
import {
AudioPlugin,
FilePlugin,
@@ -44,7 +43,10 @@ import { CommentToolbarButton } from './comment-toolbar-button';
import { EmojiDropdownMenu } from './emoji-dropdown-menu';
import { ExportToolbarButton } from './export-toolbar-button';
import { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';
-import { IndentListToolbarButton } from './indent-list-toolbar-button';
+import {
+ BulletedIndentListToolbarButton,
+ NumberedIndentListToolbarButton,
+} from './indent-list-toolbar-button';
import { IndentTodoToolbarButton } from './indent-todo-toolbar-button';
import { IndentToolbarButton } from './indent-toolbar-button';
import { InsertDropdownMenu } from './insert-dropdown-menu';
@@ -136,8 +138,8 @@ export function FixedToolbarButtons() {
-
-
+
+
diff --git a/apps/www/src/registry/default/plate-ui/indent-list-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/indent-list-toolbar-button.tsx
index 7e863d6ded..c1d809ac33 100644
--- a/apps/www/src/registry/default/plate-ui/indent-list-toolbar-button.tsx
+++ b/apps/www/src/registry/default/plate-ui/indent-list-toolbar-button.tsx
@@ -2,34 +2,191 @@
import React from 'react';
-import { withRef } from '@udecode/cn';
-import { ListStyleType } from '@udecode/plate-indent-list';
+import { useEditorRef, useEditorSelector } from '@udecode/plate-common/react';
import {
- useIndentListToolbarButton,
- useIndentListToolbarButtonState,
-} from '@udecode/plate-indent-list/react';
+ ListStyleType,
+ someIndentList,
+ toggleIndentList,
+} from '@udecode/plate-indent-list';
import { List, ListOrdered } from 'lucide-react';
-import { ToolbarButton } from './toolbar';
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+ useOpenState,
+} from './dropdown-menu';
+import {
+ ToolbarSplitButton,
+ ToolbarSplitButtonPrimary,
+ ToolbarSplitButtonSecondary,
+} from './toolbar';
+
+export function NumberedIndentListToolbarButton() {
+ const editor = useEditorRef();
+ const openState = useOpenState();
+
+ const pressed = useEditorSelector(
+ (editor) =>
+ someIndentList(editor, [
+ ListStyleType.Decimal,
+ ListStyleType.LowerAlpha,
+ ListStyleType.UpperAlpha,
+ ListStyleType.LowerRoman,
+ ListStyleType.UpperRoman,
+ ]),
+ []
+ );
+
+ return (
+
+ {
+ toggleIndentList(editor, {
+ listStyleType: ListStyleType.Decimal,
+ });
+ }}
+ data-state={pressed ? 'on' : 'off'}
+ >
+
+
-export const IndentListToolbarButton = withRef<
- typeof ToolbarButton,
- {
- nodeType?: ListStyleType;
- }
->(({ nodeType = ListStyleType.Disc }, ref) => {
- const state = useIndentListToolbarButtonState({ nodeType });
- const { props } = useIndentListToolbarButton(state);
+
+
+
+
+
+
+
+
+ toggleIndentList(editor, {
+ listStyleType: ListStyleType.Decimal,
+ })
+ }
+ >
+ Decimal (1, 2, 3)
+
+
+ toggleIndentList(editor, {
+ listStyleType: ListStyleType.LowerAlpha,
+ })
+ }
+ >
+ Lower Alpha (a, b, c)
+
+
+ toggleIndentList(editor, {
+ listStyleType: ListStyleType.UpperAlpha,
+ })
+ }
+ >
+ Upper Alpha (A, B, C)
+
+
+ toggleIndentList(editor, {
+ listStyleType: ListStyleType.LowerRoman,
+ })
+ }
+ >
+ Lower Roman (i, ii, iii)
+
+
+ toggleIndentList(editor, {
+ listStyleType: ListStyleType.UpperRoman,
+ })
+ }
+ >
+ Upper Roman (I, II, III)
+
+
+
+
+
+ );
+}
+
+export function BulletedIndentListToolbarButton() {
+ const editor = useEditorRef();
+ const openState = useOpenState();
+
+ const pressed = useEditorSelector(
+ (editor) =>
+ someIndentList(editor, [
+ ListStyleType.Disc,
+ ListStyleType.Circle,
+ ListStyleType.Square,
+ ]),
+ []
+ );
return (
-
- {nodeType === ListStyleType.Disc ?
: }
-
+
+ {
+ toggleIndentList(editor, {
+ listStyleType: ListStyleType.Disc,
+ });
+ }}
+ data-state={pressed ? 'on' : 'off'}
+ >
+
+
+
+
+
+
+
+
+
+
+
+ toggleIndentList(editor, {
+ listStyleType: ListStyleType.Disc,
+ })
+ }
+ >
+
+
+
+ toggleIndentList(editor, {
+ listStyleType: ListStyleType.Circle,
+ })
+ }
+ >
+
+
+
+ toggleIndentList(editor, {
+ listStyleType: ListStyleType.Square,
+ })
+ }
+ >
+
+
+
+
+
+
);
-});
+}
diff --git a/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx
index a6833cb833..229de1fe88 100644
--- a/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx
+++ b/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx
@@ -1,9 +1,10 @@
'use client';
-import React from 'react';
+import React, { useCallback, useState } from 'react';
import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import { cn } from '@udecode/cn';
import { someNode } from '@udecode/plate-common';
import {
focusEditor,
@@ -40,6 +41,8 @@ import {
} from './dropdown-menu';
import { ToolbarButton } from './toolbar';
+const COLS = 8;
+
export function TableDropdownMenu(props: DropdownMenuProps) {
const tableSelected = useEditorSelector(
(editor) => someNode(editor, { match: { type: TablePlugin.key } }),
@@ -50,6 +53,33 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
const openState = useOpenState();
+ const [table, setTable] = useState(
+ Array.from({ length: COLS }, () => Array.from({ length: COLS }).fill(0))
+ );
+ const [size, setSize] = useState({ colCount: 0, rowCount: 0 });
+
+ const onCellMove = useCallback(
+ (rowIndex: number, colIndex: number) => {
+ const newTables = [...table];
+
+ for (let i = 0; i < newTables.length; i++) {
+ for (let j = 0; j < newTables[i].length; j++) {
+ newTables[i][j] =
+ i >= 0 && i <= rowIndex && j >= 0 && j <= colIndex ? 1 : 0;
+ }
+ }
+
+ setSize({ colCount: colIndex + 1, rowCount: rowIndex + 1 });
+ setTable(newTables);
+ },
+ [table]
+ );
+
+ const onInsertTable = useCallback(() => {
+ insertTable(editor, size);
+ focusEditor(editor);
+ }, [editor, size]);
+
return (
@@ -68,28 +98,31 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
Table
-
- {
- insertTable(editor, {}, { select: true });
- focusEditor(editor);
- }}
- >
-
- Insert table
-
- {
- deleteTable(editor);
- focusEditor(editor);
- }}
- >
-
- Delete table
-
+
+
+
+ {table.map((rows, rowIndex) =>
+ rows.map((value, columIndex) => {
+ return (
+
{
+ onCellMove(rowIndex, columIndex);
+ }}
+ />
+ );
+ })
+ )}
+
+
+
+ {size.rowCount} x {size.colCount}
+
+
@@ -153,6 +186,17 @@ export function TableDropdownMenu(props: DropdownMenuProps) {
Delete row
+
{
+ deleteTable(editor);
+ focusEditor(editor);
+ }}
+ >
+
+ Delete table
+
diff --git a/packages/indent-list/src/lib/queries/someIndentList.ts b/packages/indent-list/src/lib/queries/someIndentList.ts
index 48cab1de52..8e978d3bc1 100644
--- a/packages/indent-list/src/lib/queries/someIndentList.ts
+++ b/packages/indent-list/src/lib/queries/someIndentList.ts
@@ -1,25 +1,24 @@
import { type SlateEditor, someNode } from '@udecode/plate-common';
-import {
- BaseIndentListPlugin,
- INDENT_LIST_KEYS,
- ListStyleType,
-} from '../../index';
+import { BaseIndentListPlugin, INDENT_LIST_KEYS } from '../../index';
-export const someIndentList = (editor: SlateEditor, type: string) => {
+export const someIndentList = (
+ editor: SlateEditor,
+ type: string[] | string
+) => {
return (
!!editor.selection &&
someNode(editor, {
- match: (n) => {
- const list = n[BaseIndentListPlugin.key];
+ match: (n: any) => {
+ const isHasProperty = n.hasOwnProperty(INDENT_LIST_KEYS.checked);
- if ((type as any) === ListStyleType.Disc) {
- return list === ListStyleType.Disc;
+ if (isHasProperty) {
+ return false;
}
- const isHasProperty = n.hasOwnProperty(INDENT_LIST_KEYS.checked);
+ const list = n[BaseIndentListPlugin.key];
- return !!list && list !== ListStyleType.Disc && !isHasProperty;
+ return Array.isArray(type) ? type.includes(list) : list === type;
},
})
);