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.
December 2024 #17
December 28 #17.8
export-toolbar-button
: addkatex
supportplate-element
: removerelative
className- All components using the
PlateElement
have had redundantrelative
class names removed.
December 27 #17.7
fixed-toolbar-buttons
: addfont-size-toolbar-button
floating-toolbar
: addinline-equation-toolbar-button
turn-into-dropdown-menu
: Fix: after turn into other block, the editor should regain focus.insert-dropdown-menu
: addinline equation
andequation
& fix the focus issueslash-input-element
: addequation
andinline equation
December 25 #17.6
indent-list-toolbar-button
: RemoveIndentListToolbarButton
useNumberedIndentListToolbarButton
andBulletedIndentListToolbarButton
instead.table-dropdown-menu
: new insert table interface.
December 23 #17.5
table-element
: fix selection- before:
isSelectingCell && '[&_*::selection]:bg-none'
- after:
isSelectingCell && '[&_*::selection]:!bg-transparent'
December 21 #17.4
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',
],
December 20 #17.3
insertColumnGroup
,toggleColumnGroup
: usecolumns
option instead oflayout
- Remove
with-draggables
. AddDraggableAboveNodes
todraggable
. Add toDndPlugin
config:
DndPlugin.configure({ render: { aboveNodes: DraggableAboveNodes } }),
column-element
,image-element
,media-video-element
: RemoveuseDraggableState
. Useconst { isDragging, previewRef, handleRef } = useDraggable
column-group-element
: RemoveuseColumnState
. Use instead:
const columnGroupElement = useElement<TColumnGroupElement>(ColumnPlugin.key);
const onColumnChange = (widths: string[]) => {
setColumns(editor, {
at: findNodePath(editor, columnGroupElement),
widths,
});
};
export-toolbar-button
: addexportToHtml
December 19 #17.2
Plate 41
- New RSC components for element and leaf components, filename ending with
-static.tsx
. Those are now added along with the default client components. editor
: addselect-text
toeditorVariants
date-element
: remove popover when read-onlyindent-todo-marker
: useSlateRenderElementProps
type instead ofPlateRenderElementProps
hr-element
,media-audio-element
,media-embed-element
,mention-element
: improve cursor stylingmedia-file-element
: use<a>
instead ofdiv
+onClick
- all element and leaf components:
className
prop is now placed before inline prop.
December 16 #17.1
-
column-element
:- Add drag and drop support for columns
- Add drag handle with tooltip
- Fix column spacing and padding
-
column-group-element
:- Remove gap between columns
- Remove margin top
-
draggable
:- Remove
DraggableProvider
HOC - Remove
DropLine
children prop
- Remove
November 2024 #16
November 26 #16.9
https://github.com/udecode/plate/pull/3809/files
- Add
select-editor
,tag-element
,label
,form
- Replace
cmdk
dependency with@udecode/cmdk
. It's a controllable version ofcmdk
. command
: add variantseditor
: addselect
variantpopover
: addanimate
variant
https://github.com/udecode/plate/pull/3807/files
toc-element
: remove<nav>
tag using<div>
instead to fix html2canvas issueeditor
: removerole="button"
to fix html2canvas issue
November 21 #16.8
Shadcn sync:
input
: addtext-base md:text-sm
textarea
: addtext-base md:text-sm
editor
(ai
,aiChat
variants): addtext-base md:text-sm
November 14 #16.7
toolbar
: AddToolbarSplitButton
,ToolbarSplitButtonPrimary
,ToolbarSplitButtonSecondary
media-toolbar-button
: useToolbarSplitButton
November 13 #16.6
resizable
: hideResizeHandle
when read-only
November 8 #16.5
- Add this to your tailwind config:
// 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
: removeref
, useuseEditorContainerRef
instead- add
caret-primary selection:bg-brand/25
- add
id={editor.uid}
toEditorContainer
so you can removescroll_container
or any id you may have defined.
draggable
:- fix a critical mobile ux issue: focusing the editor required two taps because of the group hover styles. Fixed with
main-hover:group-hover:opacity-100
. - for xs media, show only if selected
- fix a critical mobile ux issue: focusing the editor required two taps because of the group hover styles. Fixed with
table-element
: fix widthtable-row-element
,table-cell-element
: support row selection- Add
draggable
prop todate-element
,mention-element
- Add
data-plate-focus
attribute tolink-toolbar-button
,link-floating-toolbar
,ai-menu
input cursor-overlay
:- support collapsed selection
- remove
DragOverCursorPlugin
,SelectionOverlayPlugin
. Use@udecode/plate-selection
instead.
ghost-text
: hide for xs media, addpointer-events-none
floating-toolbar
: addoverflow-x-auto scrollbar-hide
to allow horizontal scrolling (mobile)fixed-toolbar
: addscrollbar-hide
emoji-picker-content
: add emoji fontcolumn-element
: addw-full
as default- New hook:
use-is-touch-device
block-context-menu
: disable on touch deviceai-toolbar-button
: addonMouseDown
ai-menu-items
: add undefined checkblock-selection-plugins
: add
inject: {
excludeBelowPlugins: ['tr'],
excludePlugins: ['table', 'code_line', 'column_group', 'column'],
},
- Add
floating-toolbar-plugin
,fixed-toolbar-plugin
- misc:
hr-element
,plate-element
,transforms
November 7 #16.4
block-context-menu
: prevent unselect when clicking on the context menublock-selection
: Addeditor.getApi(BlockSelectionPlugin).blockSelection.focus()
in onCloseAutoFocus.
November 6 #16.3
editor
: addoverflow-x-hidden
to prevent horizontal scrollingtable-element
: addoverflow-x-auto
to allow horizontal scrolling
November 5 #16.2
- Fixed color-picker clear button's styles
- Replace toggle-element button with css transitions
November 1 #16.1
editor
: styles +<EditorContainer />
October 2024 #15
October 31 #15.6
- Added
lib/transforms.ts
. Contains useful transforms for common operations. - Removed
Icons
file dependency. All icons are now imported fromlucide-react
. - Fixed and modified some styles in emoji and color picker.
- Group styling:
dropdown-menu
context-menu
inline-combobox
- Added groups and items to
slash-input-element
- Spacing and sizing update:
ai-menu-items
align-dropdown-menu
block-context-menu
button
code-block-combobox
color-dropdown-menu-items
color-picker
column-group-element
command
comment-more-dropdown
context-menu
dropdown-menu
emoji-dropdown-menu
emoji-input-element
image-preview
inline-combobox
input
insert-dropdown-menu
line-height-dropdown-menu
link-floating-toolbar
media-popover
mention-input-element
mode-dropdown-menu
more-dropdown-menu
popover
slash-input-element
table-dropdown-menu
table-element
toggle-element
toggle-toolbar-button
October 26 #15.5
- Rename
indent-todo-marker-component
toindent-todo-marker
.
October 25 #15.4
slash-input-element
: add AI command & addfocusEditor
option
October 24 #15.3
- Add
ai-menu
,ai-menu-items
,ai-toolbar-button
,ai-chat-editor
,block-context-menu
,context-menu
,ghost-text
,toc-element
command
: addInputCommand
toolbar
new styleeditor
demo variantheading-element
: removeisFirstBlock
prop- misc:
fixed-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-element
October 14 #15.3
- New cli:
shadcx
. See CLI and components.json.
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
component for visual selection feedback - New
plate-element
component for rendering the plate element withBlockSelection
- Updated
paragraph-element
and all block elements to useplate-element
draggable
:- 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
:- 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
highlight-leaf
Use --brand
color for the following components:
block-selection
draggable
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: