Components
Changelog

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.

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's components.json

January 9 #7.3

  • toolbar
    • Toolbar: replace items-stretch with items-center
    • use toolbarButtonVariants instead of toggleVariants
    • fix value prop type bug
    • uses now withTooltip, so replace [data-state=on] with aria-checked to avoid conflicts
  • toggle: removed as unused
  • tooltip: add withTooltip, which is used by ToolbarButton

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 exclude className in DropdownMenuContent

December 2023 #6

December 27 #6.3

  • remove 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-common
  • 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'
);

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 with withHOC(ResizableProvide, ...)
  • media-embed-element: wrap the component with withHOC(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
    • comment-more-dropdown
      • fix: edit and delete comments
    • comment-value
      • fix: remove useCommentValue (deprecated from plate 25)
  • toolbar
    • fix: pressed state

September 2023 #4

18 Sept #4.4

  • editor: New component 🎉 See Editor
  • fixed-toolbar-buttons, floating-toolbar-buttons, mode-dropdown-menu:
    • plate 24: rename usePlateReadOnly to useEditorReadOnly
  • code-block-element: changes in code-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'

12 Sept #4.2

  • button: add whitespace-nowrap
  • popover: hidden when printing
  • caption: hidden placeholder when printing
  • highlight-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
  • caption
    • fix: style prop

August 2023 #3

19 August #3.4

  • floating-toolbar - changes:
    • feat: ref support
    • refactor: using useFloatingToolbarState, control floatingOptions default value
    • fix: added fallbackPlacements to keep the floating in the viewport
    • br: remove the following props: portalElement, floatingOptions, ignoreReadOnly, hideToolbar
    • feat: state prop
  • link-floating-toolbar - changes:
    • refactor: control floatingOptions default value
    • fix: added fallbackPlacements to keep the floating in the viewport

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: use mediaResizeHandleVariants
  • media-embed-element: refactor: use mediaResizeHandleVariants
  • resizable - changes:
    • refactor
    • feat: mediaResizeHandleVariants
  • table-cell-element:
    • fix: resizable
    • fix: table selection in firefox

July 2023 #2

27 July #2.2

  • caption - new component
  • image-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
  • media-popover - fix: popover closing
  • resizable - new component
  • table-element - fix: popover closing

17 July #2.1

  • comments-popover - fix: popover not opening on new comment
  • comment-toolbar-button - feat: hide when myUserId is null
  • excalidraw-element - fix: typo

Launch #1

Plate headless components are now available: