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.

November 2024 #16

November 14 #16.7

Add ToolbarSplitButton in toolbar.tsx.

November 13 #16.6

  • resizable: hide ResizeHandle 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: remove ref, use useEditorContainerRef instead
    • add caret-primary selection:bg-brand/25
    • add id={editor.uid} to EditorContainer so you can remove scroll_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
  • table-element: fix width
  • table-row-element, table-cell-element: support row selection
  • Add draggable prop to date-element, mention-element
  • Add data-plate-focus attribute to link-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, add pointer-events-none
  • floating-toolbar: add overflow-x-auto scrollbar-hide to allow horizontal scrolling (mobile)
  • fixed-toolbar: add scrollbar-hide
  • emoji-picker-content: add emoji font
  • column-element: add w-full as default
  • New hook: use-is-touch-device
  • block-context-menu: disable on touch device
  • ai-toolbar-button: add onMouseDown
  • ai-menu-items: add undefined check
  • block-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 menu
  • block-selection: Add editor.getApi(BlockSelectionPlugin).blockSelection.focus() in onCloseAutoFocus.

November 6 #16.3

  • editor: add overflow-x-hidden to prevent horizontal scrolling
  • table-element: add overflow-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 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
    • 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 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 component for visual selection feedback
  • New plate-element component for rendering the plate element with BlockSelection
  • Updated paragraph-element and all block elements to use plate-element
  • draggable:
    • 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:
    • 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 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: