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.

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 from lucide-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.tsx
    • align-dropdown-menu.tsx
    • block-context-menu.tsx
    • button.tsx
    • code-block-combobox.tsx
    • color-dropdown-menu-items.tsx
    • color-picker.tsx
    • column-group-element.tsx
    • command.tsx
    • comment-more-dropdown.tsx
    • context-menu.tsx
    • dropdown-menu.tsx
    • emoji-dropdown-menu.tsx
    • emoji-input-element.tsx
    • image-preview.tsx
    • inline-combobox.tsx
    • input.tsx
    • insert-dropdown-menu.tsx
    • line-height-dropdown-menu.tsx
    • link-floating-toolbar.tsx
    • media-popover.tsx
    • mention-input-element.tsx
    • mode-dropdown-menu.tsx
    • more-dropdown-menu.tsx
    • popover.tsx
    • slash-input-element.tsx
    • table-dropdown-menu.tsx
    • table-element.tsx
    • toggle-element.tsx
    • toggle-toolbar-button.tsx

October 26 #15.5

  • Rename indent-todo-marker-component to indent-todo-marker.

October 25 #15.4

  • slash-input-element: add AI command & add focusEditor 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: add InputCommand
  • toolbar new style
  • editor demo variant
  • heading-element: remove isFirstBlock 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

October 10 #15.3

  • dropdown-menu(DropdownMenuContent): prevent default on onCloseAutoFocus
  • floating-toolbar(FloatingToolbar): remove portal, hide on click outside, hide when floating link open
  • turn-into-dropdown-menu(TurnIntoDropdownMenu): add indent list items
  • table-dropdown-menu(TableDropdownMenu): select in insertTable

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 with BlockSelection
  • Updated paragraph-element.tsx and all block elements to use plate-element.tsx
  • draggable.tsx:
    • Refactored to use new hooks: useDraggableGutter and useDropLine
    • Removed classNames prop in favor of a single className
    • Added DraggableProvider wrapper
    • Introduced Gutter and DropLine as separate components
  • 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 element caption property changes

June 6 #11.1

  • replace combobox with inline-combobox
  • remove mention-combobox, emoji-combobox and slash-combobox
  • add emoji-input-element
  • update mention-input-element and slash-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 through captionActions.showCaptionId"
  • add portalElement prop to floating-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'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: