āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/udecode/plate/components/changelog ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
Since Plate UI is not a component library, a changelog is maintained here.
Use the CLI to install the latest version of the components.
suggestion-kit: Remove BlockSuggestionuse SuggestionLineBreak instead to fixes styles.use-chat: Fix AI comment hiding when finished.platejs/static path
*-node-static components: Updated imports from @platejs/core/react to platejs/staticeditor-static: Updated PlateStatic import pathexport-toolbar-button: Updated static utilities import pathimport-toolbar-button: Updated static utilities import pathslate-to-html/page: Updated static rendering importscomment-kit, suggestion-kit: Updated static types importsapi/ai/command/route.ts: Fix poor AI generation quality when blockSelecting.ai-kit: Removed unused api parameter from useHooks destructuringblock-selection-kit: Added keyboard shortcut handler to open AI menu with mod+j when blocks are selectedapi/ai/command/route.ts: fix #4669transforms: Fixed slash command duplicate block insertion - prevents creating duplicate blocks when selecting the same block type in empty blocksai-menu:
AILoadingBar component with animated spinner and stop functionalityai-toolbar-button: Streamlined implementationapi/ai/command/route.ts:
gemini-2.5-flash)markdown-joiner-transform: Added smart buffering for smoother streaming of markdown contentuse-chat: Simplified implementation with better error handlingai-kit: Added markdown plugin to AI configurationmarkdown-kit: Added AI plugin integrationlink-node: Added AI-specific click handler functionalityblock-context-menu: Removed redundant AI options (now handled by ai-menu)block-discussion: Minor styling improvementsfixed-toolbar-buttons: Simplified AI button implementationblock-context-menu: Fixed menu position sticking when triggered multiple times in different locationsblock-draggable: Fixed block selection to work with right-click eventsuse-chat: Enhanced chat hook with AI comment support and improved streaming capabilitiesai-menu: Updated AI menu with comment generation options and improved UIai-toolbar-button: Added support for AI comment actionsblock-context-menu: Integrated AI comment options into block context menufixed-toolbar-buttons: Added AI comment button to toolbarai-kit: remove all prompt templates, use directly in api/ai/command/route.ts.api/ai/command/route.ts: Added comment functionality.block-discussion: Removed useFocusedLast check for showing discussion popover.useFocusedLast hook to only show their floating toolbars when their editor is the last focused editor, preventing toolbar conflicts in multi-editor scenarios:
ai-menublock-discussioncolumn-nodemedia-toolbartable-nodeblock-draggable:
block-draggable: Fixed table drag and drop preview display with horizontal scroll compensation. Drag preview elements now correctly display content even when the original element has horizontal scrollblock-draggable: Added isAboutToDrag state to improve preview handling - tracks when drag is about to start (mousedown but not yet dragging) for better preview cleanupai-kit: support custom node typeindent-kit: add KEYS.img to IndentPluginlist-kit: add KEYS.img to ListPluginmarkdown-joiner-transform.ts: add markdownJoinerTransform to transform chunks like [,bold,] to [bold] make the md deserializer happy.api/ai/command/route.ts: use markdownJoinerTransform to transform chunks.list-classic-kit: Added ListPlugin to restore List functionalities (indent with Tab / Shift+Tab, new item when pressing enter, ...).block-draggable: Added support for automatically selecting list item children when dragging. When dragging a list item, all nested items with bigger indent are now included in the drag operationblock-draggable: Updated to use new addOnContextMenu API from BlockSelectionPlugin for cleaner context menu handlingblock-context-menu: Fixed context menu not opening when right-clicking on block margin areasblock-draggable: Added wrapper div with context menu handler to ensure block selection on margin clicksblock-draggable: Added support for dragging multiple blocks using editor's native selection (previously only block-selection was supported)slate-to-html: Added EditorViewDemo component for static editor rendering using createStaticEditorlist-classic-node: Fix styling that affects TaskListElement by force overriding list-style-type (set to none).list-classic-kit: Added TaskListPlugin with TaskListElement componentlist-classic-node: Added TaskListElement and TaskListItemElement components with checkbox supporttransforms-classic: New file for classic list transformsinsert-toolbar-classic-button: New component for inserting classic list types (bulleted, numbered, task)turn-into-toolbar-classic-button: New component for converting blocks to classic list typesfloating-toolbar-classic-buttons: New component for floating toolbar with classic list supportfloating-toolbar-classic-kit: New kit that includes classic list toolbar buttonseditor: Added EditorView component using the new PlateView from @platejs/core/react for static editor rendering with copy functionalitylink-node: Remove useLinklink-node-static: missing getLinkAttributesmedia-image-node: attributes.alt type castinginline-combobox: Fixed combobox not closing when clicking outside the editortransform.ts: add toggleCodeBlock to setBlockMap. Fix the structural error of the code_block created by turn-into-toolbar-button.tsx.block-draggable: Fixed drag and drop functionality with multiple selected blocks and resolved drop positioning issues on margins.block-selection-kit: It is now possible to select the entire table (table), but the rows (tr) will only be selected if your selection box is within the table.table-node: Add block selection styles to the table.table-node: Fix bug affecting cursor position and improve performanceblock-draggable: use getPluginByType instead of getContainerTypeseditor: Fix placeholder positioning **:data-slate-placeholder:!top-1/2 **:data-slate-placeholder:-translate-y-1/2.block-placeholder-kit: Change placeholder color to text-muted-foreground/80 to match editor one.Plate 49
Merging files, using a more consistent naming convention, and removing unused export statements.
Components:
withProps(..., { as: '...' }) plugin components.KEYS from @udecode/plate instead, as a unified source of keys.
ParagraphPlugin.key -> KEYS.pINDENT_LIST_KEYS.listStyleType -> KEYS.listTypeListStyleType.Decimal -> KEYS.olListStyleType.Disc -> KEYS.ullist (classic) -> KEYS.listClassicol (classic) -> KEYS.olClassicul (classic) -> KEYS.ulClassicli (classic) -> KEYS.liClassicaction_item (classic) -> KEYS.listTodoClassic*-element, *-leaf files to *-node (and static versions)ai-anchor-element, merged into ai-nodeai-loading-bar, merged into ai-menuai-menu-items, merged into ai-menualign-dropdown-menu to align-toolbar-button, AlignDropdownMenu to AlignToolbarButtonapi-ai to ai-apiapi-uploadthing to media-uploadthing-apiBlockSelection: fix block selection for tablescode-block-combobox, merged into code-block-nodecode-line-element, merged into code-block-node (and static version)code-syntax-leaf, merged into code-block-node (and static version)color-toolbar-button to font-color-toolbar-button, ColorDropdownMenu to FontColorToolbarButtoncolor-* files, merged into font-color-toolbar-button
color-dropdown-menu to font-color-toolbar-buttoncolumn-group-element, merged into column-node (and static version)comment-create-form, merged into commentdraggable to block-draggable, DraggableAboveNodes to BlockDraggableemoji-input-element to emoji-nodeemoji-* files (except emoji-input-node), merged into emoji-toolbar-button
EmojiToolbarDropdown to EmojiPopover, EmojiDropdownMenu to EmojiToolbarButtonEmojiPicker icons prop is now optional and defaulted to emojiCategoryIcons and emojiSearchIconsimage-preview to media-preview-dialog, ImagePreview to MediaPreviewDialogimage-element to media-image-node
MediaFileElement to FileElement (and static version)MediaAudioElement to AudioElement (and static version)MediaVideoElement to VideoElement (and static version)indent-list-toolbar-button to list-toolbar-button
BulletedIndentListToolbarButton to BulletedListToolbarButtonNumberedIndentListToolbarButton to NumberedListToolbarButtonindent-todo-marker to block-listindent-fire-markerindent-todo-toolbar-button, merged into list-toolbar-buttonIndentTodoToolbarButton into TodoListToolbarButtoninline-equation-element and equation-popover, merged into equation-node (and static version)inline-equation-toolbar-button, merged into equation-toolbar-buttoninsert-dropdown-menu to insert-toolbar-button, InsertDropdownMenu to InsertToolbarButtonline-height-dropdown-menu to line-height-toolbar-button, LineHeightDropdownMenu to LineHeightToolbarButtonlink-floating-toolbar to link-toolbarlist-indent-toolbar-button, merged into list-classic-toolbar-buttonListIndentToolbarButton to IndentToolbarButtonlist-node to list-classic-nodemedia-popover to media-toolbar, MediaPopover to MediaToolbarmode-dropdown-menu to mode-toolbar-button, ModeDropdownMenu to ModeToolbarButtonmore-dropdown-menu to more-toolbar-button, MoreDropdownMenu to MoreToolbarButtonoutdent-toolbar-button, merged into indent-toolbar-buttontable-icons: rename Border* to Border*Iconslash-input-element to slash-input-nodeSuggestionBelowNodes to SuggestionLineBreaktable-cell-element, merged into table-node (and static version)table-row-element, merged into table-node (and static version)table-dropdown-menu to table-toolbar-button, TableDropdownMenu to TableToolbarButtontodo-list-node, merged into list-classic-nodeturn-into-dropdown-menu to turn-into-toolbar-button, TurnIntoDropdownMenu to TurnIntoToolbarButtonexport-toolbar-button, indent-list-plugins: remove fire from listStyleTypesuseCommentEditor: usePlateEditor instead of useCreateEditorplaceholder, withPlaceholder. Migration: use block-placeholder-kit, BlockPlaceholderPlugin instead.line-height-toolbar-button: remove useLineHeightDropdownMenu hook.font-color-toolbar-button: remove useColorInput hook.Plugins:
Renamed all *-plugin, *-plugins files to -kit, and *Plugin, *Plugins to *Kit. A plugin kit is a collection of configured plugins.
editor-plugins to editor-kitequation-plugins to math-kit, equationPlugins to MathKitindent-list-plugins to list-kit, indentListPlugins to ListKitBlockList component to block-list, used in list-kituse-create-editor, use usePlateEditor insteadai-kit: add show shortcut. Remove useHotkeys('mod+j') from ai-menu
comment-kit: add setDraft transform, shortcut
basic-marks-kit, basic-blocks-kit: add shortcuts
transforms, block-draggable: remove STRUCTURE_TYPES, those are now inferred from plugin.node.isContainer. Use instead editor.meta.containerTypes.
Remove structuralTypes from useSelectionFragmentProp usages.
inline-combobox: fix insertPoint not being updated when the combobox is closed.equation-popover: Focus back to the editor when the popover is closed.inline-equation-element: When selecting it should be highlighted.React.forwardRef in a few places.registries from components.jsonnpx shadcn instead of npx shadcxwithRef from all componentscn from @/lib/utils instead of @udecode/cn to stay consistent with shadcn/uiclassName, style props from all element and leaf componentsdraggable:
media-placeholder-element: refactor to use use-upload-file hook instead of uploadthing
npx shadcn@latest add https://platejs.org/r/api-uploadthingai-chat-editor: support none-standard markdown nodes.slash-input-element: add callout support.block-selection-plugins.tsx: fix block selection not working.ai/command: forked smoothStream from ai package now uses 30ms delay by default (only code blocks and tables use 100ms delay).v48 migration:
PlateElement, PlateLeaf and PlateText HTML attributes are moved from top-level props to attributes prop.nodeProps prop from PlateElement, PlateLeaf, PlateText. Use attributes prop instead.block-discussioncomment-leafdate-elementdraggableexcalidraw-elementhr-element + -staticimage-element + -staticlink-elementmedia-audio-elementmedia-file-elementmedia-placeholder-elementmedia-video-elementmention-elementplaceholdersuggestion-leaftable-cell-element + -statictable-elementtag-elementuse-chat: add _abortFakeStream.ai-menu: Fix menu items are displayed incorrectly.ai-loading-bar: Move esc keydown handler to ai-menu.ai/command: add chunking delay to 100ms (Temporary workaround with performance issue).autoformat-plugin: allow starting a new indent list with numbers other than 1ai-leaf: add aiIndicatorVariants to display loading state.cursor-overlay: hide when ai is streaming.api/ai/command: fix chunking issue.Add discussion-plugin:
discussionPlugin to editor-plugins, remove configure from suggestionPluginblock-suggestion, comment to use discussionPlugincomment-create-form to create discussion when none existssuggestion-leaflink-floating-toolbar to support internal links, and placement top when suggestion or comment is activeai-anchor-element: add ai-anchor-element component that is inserted before streaming, removed after streaming, and used for positioning the ai-menuai-loading-bar: add ai-loading-bar component that is used to display the loading progress of the insert mode streamingai-menu: migrate to latest ai packageai-menu-items: add generateMarkdownSampleai-plugins: Remove the single-paragraph limit from promptseditor: introduce PlateContainer componentexport-toolbar-button: fix pdf export issue with html2canvas-proimport-toolbar-button: fix sometimes unable to select the fileai-toolbar-button: add missing @udecode/plate-ai dependency.comment-toolbar-button: add missing comments-plugin registry dependency.font-size-toolbar-button: add missing popover registry dependency.tooltip: add missing button registry dependency.block-context-menu: Prevent opening context menu in read-only modeblock-suggestion: fix stylessuggestion-leaf-static: add static versionsPlate 46 - new code block
code-block-element-static, code-block-element, code-block-combobox: Updated to use lowlight classes. Default to github theme.code-syntax-leaf-static, code-syntax-leaf: Updated to use lowlight token classesprismjs dependency and related styleslowlight plugin option instead of prism optioncode-block-combobox: add Auto language option, change language values to match lowlightautoformat-plugin: prevent autoformat on code blocksimport { all, createLowlight } from 'lowlight';
const lowlight = createLowlight(all);
CodeBlockPlugin.configure({
options: {
lowlight,
},
});
image-preview: prevent block menu on image preivew maskmedia-popover: hide media popover when image preivew is openPlate 45 - new comments & suggestions UI
block-discussion as the main container, used in plate-elementcomment for individual comment displaycomment-create-form with minimal Plate editor for inputcomments-popovercomment-avatarcomment-reply-itemscomment-valuecomment-resolve-buttonblock-suggestionsuggestion-leafsuggestion-line-breakplate-element, import PlateElement from @udecode/plate/react instead. Add in block-selection-plugins:render: {
belowRootNodes: (props) => {
if (!props.className?.includes('slate-selectable')) return null;
return <BlockSelection />;
},
},
comment-more-dropdown: remove useCommentEditButtonState, useCommentDeleteButtonStateimage-element, media-embed-element, media-video-element, mode-dropdown-menu
const width = useResizableValue('width')image-preview: remove useScaleInputState, useImagePreviewStatefloating-toolbar:
useEventEditorSelectors with useEventEditorValuemedia-popover:
floatingMediaActions with FloatingMediaStore.set,useFloatingMediaSelectors with useFloatingMediaValuetable-element: fix styles, show table border controls when collapsedtable-row-element: refactortable-cell-element: selection bg-brandtable-element, table-row-element: support row dnd and selectionplate-element: add blockSelectionClassName propeditor: z-50 for selection areadraggable:
editor.api.blockSelection.replaceSelectedIds with editor.api.blockSelection.clearTooltipButton for drag handlecolumn-element, table-cell-element: add isSelectionAreaVisible checkblock-selection: hide if draggingeditor.api.blockSelection.addSelectedRow with editor.api.blockSelection.set:
ai-menuequation-popoveralign-dropdown-menu: deprecateinline-equation-element and equation-popover: Fix: When selecting an inline equation, the popover should not open, as it causes the selection to be lost.emoji-picker-search-bar: add autoFocusimport-toolbar-button and export-toolbar-button: add markdown supportfixed-toolbar-buttons: add import-toolbar-buttonindent-fire-marker.tsx Add data-plate-prevent-deserialization to prevent deserialization of the fire marker. Change the span tag to li.indent-todo-marker.tsx change the span tag to li.image-element-static.tsx and hr-element-static.tsx: Fix nodeProps not being passed to SlateElement.ai-chat-editor:const aiEditor = usePlateEditor({ plugins });
useAIChatEditor(aiEditor, content);
ai-plugins: remove createAIEditor, it's now created in ai-chat-editorai-chat-editor: just use useAIChatEditor (v42.1)ai-menu: avoid collisions, remove aiEditorRefcommand: add focus-visible:outline-noneeditor-static: update aiChat paddingtransforms: fix insertBlock used by slash commands: it should insert a new block if the newly inserted block is of the same type as the command.block-selection-plugins: update BlockSelectionPluginBlockSelectionPlugin.configure(({ editor }) => ({
options: {
enableContextMenu: true,
isSelectable: (element, path) => {
return (
!['code_line', 'column', 'td'].includes(element.type) &&
!editor.api.block({ above: true, at: path, match: { type: 'tr' } })
);
},
},
}))
table-element, table-element-static
table-iconscolgroup, col width is now set in table-cell-elementtable-row-element: remove hideBorder proptable-cell-element, table-cell-element-static:
table-dropdown-menu:
tooltip: add TooltipButtonindent-list-toolbar-button: Remove IndentListToolbarButton use NumberedIndentListToolbarButton and BulletedIndentListToolbarButton instead.table-dropdown-menu: new insert table interface.column-group-element: fix ColumnFloatingToolbar onColumnChangeexport-toolbar-button: add katex supportplate-element: remove relative classNamePlateElement have had redundant relative class names removed.fixed-toolbar-buttons: add font-size-toolbar-buttonfloating-toolbar: add inline-equation-toolbar-buttonturn-into-dropdown-menu: Fix: after turn into other block, the editor should regain focus.insert-dropdown-menu: add inline equation and equation & fix the focus issueslash-input-element: add equation and inline equationtable-element: fix selectionisSelectingCell && '[&_*::selection]:bg-none'isSelectingCell && '[&_*::selection]:!bg-transparent'Update tailwind.config.cjs for better font support in the HTML export:
fontFamily: {
heading: [
'var(--font-heading)',
'ui-sans-serif',
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI Variable Display',
'Segoe UI',
'Helvetica',
'Apple Color Emoji',
'Arial',
'sans-serif',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji',
],
mono: ['var(--font-mono)', ...fontFamily.mono],
sans: [
'var(--font-sans)',
'ui-sans-serif',
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI Variable Display',
'Segoe UI',
'Helvetica',
'Apple Color Emoji',
'Arial',
'sans-serif',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji',
],
insertColumnGroup, toggleColumnGroup: use columns option instead of layoutwith-draggables. Add DraggableAboveNodes to draggable. Add to DndPlugin config:DndPlugin.configure({ render: { aboveNodes: DraggableAboveNodes } }),
column-element, image-element, media-video-element: Remove useDraggableState. Use const { isDragging, previewRef, handleRef } = useDraggablecolumn-group-element: Remove useColumnState. Use instead:const columnGroupElement = useElement<TColumnGroupElement>(ColumnPlugin.key);
const onColumnChange = (widths: string[]) => {
setColumns(editor, {
at: findNodePath(editor, columnGroupElement),
widths,
});
};
export-toolbar-button: add exportToHtmlPlate 41
-static.tsx. Those are now added along with the default client components.editor: add select-text to editorVariantsdate-element: remove popover when read-onlyindent-todo-marker: use SlateRenderElementProps type instead of PlateRenderElementPropshr-element, media-audio-element, media-embed-element, mention-element: improve cursor stylingmedia-file-element: use <a> instead of div + onClickclassName prop is now placed before inline prop.column-element:
column-group-element:
draggable:
DraggableProvider HOCDropLine children prophttps://github.com/udecode/plate/pull/3809/files
select-editor, tag-element, label, formcmdk dependency with @udecode/cmdk. It's a controllable version of cmdk.command: add variantseditor: add select variantpopover: add animate varianthttps://github.com/udecode/plate/pull/3807/files
toc-element: remove <nav> tag using <div> instead to fix html2canvas issueeditor: remove role="button" to fix html2canvas issueShadcn sync:
input: add text-base md:text-smtextarea: add text-base md:text-smeditor(ai, aiChat variants): add text-base md:text-smtoolbar: Add ToolbarSplitButton, ToolbarSplitButtonPrimary, ToolbarSplitButtonSecondarymedia-toolbar-button: use ToolbarSplitButtonresizable: hide ResizeHandle when read-only// plugins
require("tailwind-scrollbar-hide")
// theme.extend.screens
screens: {
/**
* Matches devices where the primary pointing device is capable of
* hovering conveniently. Usage: main-hover:group-hover:bg-red-500 See:
* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
*
* On iOS devices, buttons inside a .group element that contains
* descendent elements with `group-hover:` CSS rules require two taps to
* click. As a workaround, we disable these rules on devices that cannot
* conveniently hover using `main-hover:`.
*/
'main-hover': {
raw: '(hover: hover)',
},
},
editor:
EditorContainer: remove ref, use useEditorContainerRef insteadcaret-primary selection:bg-brand/25id={editor.uid} to EditorContainer so you can remove scroll_container or any id you may have defined.draggable:
main-hover:group-hover:opacity-100.table-element: fix widthtable-row-element, table-cell-element: support row selectiondraggable prop to date-element, mention-elementdata-plate-focus attribute to link-toolbar-button, link-floating-toolbar, ai-menu inputcursor-overlay:
DragOverCursorPlugin, SelectionOverlayPlugin. Use @udecode/plate-selection instead.ghost-text: hide for xs media, add pointer-events-nonefloating-toolbar: add overflow-x-auto scrollbar-hide to allow horizontal scrolling (mobile)fixed-toolbar: add scrollbar-hideemoji-picker-content: add emoji fontcolumn-element: add w-full as defaultuse-is-touch-deviceblock-context-menu: disable on touch deviceai-toolbar-button: add onMouseDownai-menu-items: add undefined checkblock-selection-plugins: addinject: {
excludeBelowPlugins: ['tr'],
excludePlugins: ['table', 'code_line', 'column_group', 'column'],
},
floating-toolbar-plugin, fixed-toolbar-pluginhr-element, plate-element, transformsblock-context-menu: prevent unselect when clicking on the context menublock-selection: Add editor.getApi(BlockSelectionPlugin).blockSelection.focus() in onCloseAutoFocus.editor: add overflow-x-hidden to prevent horizontal scrollingtable-element: add overflow-x-auto to allow horizontal scrollingeditor: styles + <EditorContainer />lib/transforms.ts. Contains useful transforms for common operations.Icons file dependency. All icons are now imported from lucide-react.dropdown-menucontext-menuinline-comboboxslash-input-elementai-menu-itemsalign-dropdown-menublock-context-menubuttoncode-block-comboboxcolor-dropdown-menu-itemscolor-pickercolumn-group-elementcommandcomment-more-dropdowncontext-menudropdown-menuemoji-dropdown-menuemoji-input-elementimage-previewinline-comboboxinputinsert-dropdown-menuline-height-dropdown-menulink-floating-toolbarmedia-popovermention-input-elementmode-dropdown-menumore-dropdown-menupopoverslash-input-elementtable-dropdown-menutable-elementtoggle-elementtoggle-toolbar-buttonindent-todo-marker-component to indent-todo-marker.slash-input-element: add AI command & add focusEditor optionai-menu, ai-menu-items, ai-toolbar-button, ai-chat-editor, block-context-menu, context-menu, ghost-text, toc-elementcommand: add InputCommandtoolbar new styleeditor demo variantheading-element: remove isFirstBlock propfixed-toolbar, fixed-toolbar-buttons, floating-toolbar, floating-toolbar-buttons, mode-dropdown-menu, turn-into-dropdown-menu, button, cursor-overlay, excalidraw-element, inline-combobox, slash-input-elementshadcx. See CLI and components.json.dropdown-menu(DropdownMenuContent): prevent default on onCloseAutoFocusfloating-toolbar(FloatingToolbar): remove portal, hide on click outside, hide when floating link openturn-into-dropdown-menu(TurnIntoDropdownMenu): add indent list itemstable-dropdown-menu(TableDropdownMenu): select in insertTableemoji-picker: adjust ui emoji pickerblock-selection component for visual selection feedbackplate-element component for rendering the plate element with BlockSelectionparagraph-element and all block elements to use plate-elementdraggable:
useDraggableGutter and useDropLineclassNames prop in favor of a single classNameDraggableProvider wrapperGutter and DropLine as separate componentswith-draggables:
mention-element: prevent IME input interruption on MacOSUse --highlight color for the following components:
comment-leafhighlight-leafUse --brand color for the following components:
block-selectiondraggableheading-element: if the heading is the first block, it should not have a top margincode-block-combobox: filter based on label or valuefloating-toolbar: show toolbar when readOnlyemoji-picker: adapt shadcn themes & stylescursor: Show selection rect/caret if cursor data is undefined.fixed-toolbar: top-0code-block-comboboxcaption: update UI when element caption property changescombobox with inline-comboboxmention-combobox, emoji-combobox and slash-comboboxemoji-input-elementmention-input-element and slash-input-element to use the new comboboxdraggable: add the data-key attribute to facilitate adding selection after the drag-and-drop operation is completedCaptionButton or pass the media element's ID through captionActions.showCaptionId"portalElement prop to floating-toolbardraggable: add portal to fix clipping, button type to stop form submissioneditor: increase x padding to improve drag handle visibilitysite-header: change zIndex to 60fixed-toolbar: change zIndex to 60indent-todo-marker-component: clicking the checkbox removing the focuscolumn-element, column-group-elementcombobox: undo was crashing the editorlist-element: variant styles were missingmention-element: Mention input removed when clicking mention combobox scrollbar
(#2919)toggle-elementtoggle-toolbar-buttoncomponents.jsonplate-components.json to avoid conflict with shadcn's components.jsontoolbar
Toolbar: replace items-stretch with items-centertoolbarButtonVariants instead of toggleVariantsvalue prop type bugwithTooltip, so replace [data-state=on] with aria-checked to avoid conflictstoggle: removed as unusedtooltip: add withTooltip, which is used by ToolbarButtontable-element - TableProvider must now be rendered above TableElement// Before
export const TableElement = withRef<typeof PlateElement>(
({ className, children, ...props }, ref) => {
// ...
}
);
// After
export const TableElement = withHOC(
TableProvider,
withRef<typeof PlateElement>(({ className, children, ...props }, ref) => {
// ...
})
);
dropdown-menu - fix: do not exclude className in DropdownMenuContentremove clsx from dependency: class-variance-utility already exports it as cx
new dependency: @udecode/cn
remove @/lib/utils.ts in favor of cn from @udecode/cn. Replace all imports from @/lib/utils with @udecode/cn
import withProps from @udecode/cn instead of `@udecode/plate
`
all components using forwardRef are now using withRef. withProps, withCn and withVariants are also used to reduce boilerplate.
add withCn to ESLint settings.tailwindcss.callees and classAttributes in your IDE settings
// before
const Avatar = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Root
ref={ref}
className={cn(
'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
className
)}
{...props}
/>
));
Avatar.displayName = AvatarPrimitive.Root.displayName;
export { Avatar };
// after
export const Avatar = withCn(
AvatarPrimitive.Root,
'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full'
);
comboboxinsert-dropdown-menumedia-popovermode-dropdown-menumore-dropdown-menutable-dropdown-menutable-elementturn-into-dropdown-menuimage-element: wrap the component with withHOC(ResizableProvide, ...)media-embed-element: wrap the component with withHOC(ResizableProvide, ...)table-element
table-cell-element
comments-popover
toolbar
editor: New component š See Editorfixed-toolbar-buttons, floating-toolbar-buttons, mode-dropdown-menu:
usePlateReadOnly to useEditorReadOnlycode-block-element: changes in code-block-element.csstable-element
floating-toolbar:
comment-leaf, link-element
body: '[&_.slate-selected]:!bg-primary/20 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-primary [&_.slate-selection-area]:bg-primary/10'button: add whitespace-nowrappopover: hidden when printingcaption: hidden placeholder when printinghighlight-leaf: highlight color is now based on the primary colorlink-floating-toolbar
media-embed-element
align optioncaption
style propfloating-toolbar - changes:
ref supportuseFloatingToolbarState, control floatingOptions default valuefallbackPlacements to keep the floating in the viewportportalElement, floatingOptions, ignoreReadOnly, hideToolbarstate proplink-floating-toolbar - changes:
floatingOptions default valuefallbackPlacements to keep the floating in the viewportmention-element - feat: support bold, italic, underlinetable-cell-element - feat: support table cell backround stylesimage-element: refactor: use mediaResizeHandleVariantsmedia-embed-element: refactor: use mediaResizeHandleVariantsresizable - changes:
mediaResizeHandleVariantstable-cell-element:
caption - new componentimage-element:
caption, resizablemedia-embed-element is now fully headless:
react-lite-youtube-embed, react-tweet to decrease the bundle sizecaption, resizablemedia-popover - fix: popover closingresizable - new componenttable-element - fix: popover closingcomments-popover - fix: popover not opening on new commentcomment-toolbar-button - feat: hide when myUserId is nullexcalidraw-element - fix: typoPlate headless components are now available:
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā