Changelog
Latest component updates and announcements.
Since Plate UI is not a component library, a changelog is maintained here.
Use the CLI to install the latest version of the components.
October 2024 #15
October 10 #15.3
dropdown-menu
(DropdownMenuContent
): prevent default ononCloseAutoFocus
floating-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 ininsertTable
October 4 #15.2
- feat
emoji-picker
: adjust ui emoji picker
October 1 #15.1
- New
block-selection.tsx
component for visual selection feedback - New
plate-element.tsx
component for rendering the plate element withBlockSelection
- Updated
paragraph-element.tsx
and all block elements to useplate-element.tsx
draggable.tsx
:- Refactored to use new hooks:
useDraggableGutter
anduseDropLine
- Removed
classNames
prop in favor of a singleclassName
- Added
DraggableProvider
wrapper - Introduced
Gutter
andDropLine
as separate components
- Refactored to use new hooks:
with-draggables.tsx
:- Updated to use new className format for draggable props
- fix
mention-element
: prevent IME input interruption on MacOS
Use --highlight
color for the following components:
comment-leaf.tsx
highlight-leaf.tsx
Use --brand
color for the following components:
block-selection.tsx
draggable.tsx
September 2024 #14
September 29 #14.3
- fix
heading-element
: if the heading is the first block, it should not have a top margin
September 13 #14.2
- fix
code-block-combobox
: filter based on label or value
September 10 #14.1
- fix
floating-toolbar
: show toolbar when readOnly
August 2024 #13
August 27 #13.3
- Migrate to Plate 37
August 26 #13.2
- feat
emoji-picker
: adapt shadcn themes & styles
August 12 #13.1
- add mermaid to list of supported languages in preparation for Excalidraw improvements.
July 2024 #12
July 14 #12.2
- fix
cursor
: Show selection rect/caret if cursor data is undefined.
July 12 #12.1
fixed-toolbar
:top-0
June 2024 #11
June 23 #11.3
- breaking change: move list of supported prismjs languages to
code-block-combobox
June 13 #11.2
- fix
caption
: update UI when elementcaption
property changes
June 6 #11.1
- replace
combobox
withinline-combobox
- remove
mention-combobox
,emoji-combobox
andslash-combobox
- add
emoji-input-element
- update
mention-input-element
andslash-input-element
to use the new combobox - feat
draggable
: add the data-key attribute to facilitate adding selection after the drag-and-drop operation is completed - breaking change: Open the caption by using
CaptionButton
or pass the media element's ID throughcaptionActions.showCaptionId
" - add
portalElement
prop tofloating-toolbar
May 2024 #10
May 30 #10.2
- fix
draggable
: add portal to fix clipping, button type to stop form submission - fix
editor
: increase x padding to improve drag handle visibility
May 24 #10.1
- fix
site-header
: change zIndex to 60 - fix
fixed-toolbar
: change zIndex to 60
April 2024 #9
April 30 #9.3
- fix
indent-todo-marker-component
: clicking the checkbox removing the focus
April 17 #9.2
- add
column-element
,column-group-element
April 6 #9.1
- fix
combobox
: undo was crashing the editor
February 2024 #8
February 6 #8.2
- fix
list-element
: variant styles were missing
February 5 #8.1
- fix
mention-element
: Mention input removed when clicking mention combobox scrollbar (#2919)
January 2024 #7
January 31 #7.5
- add
toggle-element
- add
toggle-toolbar-button
January 11 #7.4
- add support for custom ui dir in
components.json
- add support for
plate-components.json
to avoid conflict with shadcn'scomponents.json
January 9 #7.3
toolbar
Toolbar
: replaceitems-stretch
withitems-center
- use
toolbarButtonVariants
instead oftoggleVariants
- fix
value
prop type bug - uses now
withTooltip
, so replace[data-state=on]
witharia-checked
to avoid conflicts
toggle
: removed as unusedtooltip
: addwithTooltip
, which is used byToolbarButton
January 8 #7.2
table-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) => {
// ...
})
);
January 2 #7.1
dropdown-menu
- fix: do not excludeclassName
inDropdownMenuContent
December 2023 #6
December 27 #6.3
-
remove
clsx
from dependency:class-variance-utility
already exports it ascx
-
new dependency:
@udecode/cn
-
remove
@/lib/utils.ts
in favor ofcn
from@udecode/cn
. Replace all imports from@/lib/utils
with@udecode/cn
-
import
withProps
from@udecode/cn
instead of `@udecode/plate-common`
-
all components using
forwardRef
are now usingwithRef
.withProps
,withCn
andwithVariants
are also used to reduce boilerplate. -
add
withCn
to ESLintsettings.tailwindcss.callees
andclassAttributes
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'
);
December 25 #6.2
- dialog
- Plate 28, includes a few optimizations: changes
combobox
insert-dropdown-menu
media-popover
mode-dropdown-menu
more-dropdown-menu
table-dropdown-menu
table-element
turn-into-dropdown-menu
December 10 #6.1
image-element
: wrap the component withwithHOC(ResizableProvide, ...)
media-embed-element
: wrap the component withwithHOC(ResizableProvide, ...)
November 2023 #5
28 Nov #5.1
table-element
- feat: merging support (plate 26)
table-cell-element
- feat: merging support (plate 26)
comments-popover
toolbar
- fix: pressed state
September 2023 #4
18 Sept #4.4
editor
: New component 🎉 See Editorfixed-toolbar-buttons
,floating-toolbar-buttons
,mode-dropdown-menu
:- plate 24: rename
usePlateReadOnly
touseEditorReadOnly
- plate 24: rename
code-block-element
: changes incode-block-element.css
15 Sept #4.3
table-element
- fix: typing in a table should keep the floating toolbar opened
floating-toolbar
:- fix: import
comment-leaf
,link-element
- feat: use primary color
- block selection:
- add this class to
body
:'[&_.slate-selected]:!bg-primary/20 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-primary [&_.slate-selection-area]:bg-primary/10'
- add this class to
12 Sept #4.2
button
: addwhitespace-nowrap
popover
: hidden when printingcaption
: hidden placeholder when printinghighlight-leaf
: highlight color is now based on the primary color
2 Sept #4.1
link-floating-toolbar
- fix: props type
media-embed-element
- fix: use
align
option
- fix: use
caption
- fix:
style
prop
- fix:
August 2023 #3
19 August #3.4
floating-toolbar
- changes:- feat:
ref
support - refactor: using
useFloatingToolbarState
, controlfloatingOptions
default value - fix: added
fallbackPlacements
to keep the floating in the viewport - br: remove the following props:
portalElement
,floatingOptions
,ignoreReadOnly
,hideToolbar
- feat:
state
prop
- feat:
link-floating-toolbar
- changes:- refactor: control
floatingOptions
default value - fix: added
fallbackPlacements
to keep the floating in the viewport
- refactor: control
9 August #3.3
mention-element
- feat: support bold, italic, underline
3 August #3.2
table-cell-element
- feat: support table cell backround styles
2 August #3.1
image-element
: refactor: usemediaResizeHandleVariants
media-embed-element
: refactor: usemediaResizeHandleVariants
resizable
- changes:- refactor
- feat:
mediaResizeHandleVariants
table-cell-element
:
July 2023 #2
27 July #2.2
caption
- new componentimage-element
:- refactor: state
- new registry deps:
caption
,resizable
media-embed-element
is now fully headless:- new deps:
react-lite-youtube-embed
,react-tweet
to decrease the bundle size - new registry deps:
caption
,resizable
- new deps:
media-popover
- fix: popover closingresizable
- new componenttable-element
- fix: popover closing
17 July #2.1
comments-popover
- fix: popover not opening on new commentcomment-toolbar-button
- feat: hide whenmyUserId
is nullexcalidraw-element
- fix: typo
Launch #1
Plate headless components are now available: