Changelog

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 21 #26.9

• suggestion-kit: Remove BlockSuggestionuse SuggestionLineBreak instead to fixes styles.

October 17 #26.8

• Static Components: Updated all static component imports to use new platejs/static path
  • *-node-static components: Updated imports from @platejs/core/react to platejs/static
  • editor-static: Updated PlateStatic import path
  • export-toolbar-button: Updated static utilities import path
  • import-toolbar-button: Updated static utilities import path
  • slate-to-html/page: Updated static rendering imports
  • comment-kit, suggestion-kit: Updated static types imports

October 6 #26.7

• api/ai/command/route.ts: Fix poor AI generation quality when blockSelecting.

October 5 #26.6

• ai-kit: Removed unused api parameter from useHooks destructuring
• block-selection-kit: Added keyboard shortcut handler to open AI menu with mod+j when blocks are selected

October 4 #26.5

• api/ai/command/route.ts: fix #4669

September 2025 #26

September 28 #26.5

• transforms: Fixed slash command duplicate block insertion - prevents creating duplicate blocks when selecting the same block type in empty blocks

September 20 #26.4

• AI Suggestions: Major improvements to AI suggestion system with better content handling and UI enhancements
  • ai-menu:
    • Added new AILoadingBar component with animated spinner and stop functionality
    • Enhanced comment acceptance UI with Accept/Reject buttons
    • Improved context-aware menu states based on selection and operation mode
    • Better keyboard navigation with ESC to stop operations
  • ai-toolbar-button: Streamlined implementation
  • api/ai/command/route.ts:
    • Added multi-tool support (generate, edit, comment) with automatic intent classification
    • Switched to Google Gemini model (gemini-2.5-flash)
    • Enhanced prompt templates with placeholder support
    • Added MDX tag preservation
  • markdown-joiner-transform: Added smart buffering for smoother streaming of markdown content
  • use-chat: Simplified implementation with better error handling
  • ai-kit: Added markdown plugin to AI configuration
  • markdown-kit: Added AI plugin integration
  • link-node: Added AI-specific click handler functionality
  • block-context-menu: Removed redundant AI options (now handled by ai-menu)
  • block-discussion: Minor styling improvements
  • fixed-toolbar-buttons: Simplified AI button implementation

September 7 #26.3

• block-context-menu: Fixed menu position sticking when triggered multiple times in different locations

September 5 #26.2

• block-draggable: Fixed block selection to work with right-click events

September 4 #26.1

• AI Comments: Added AI-powered comment functionality for document review and feedback
  • use-chat: Enhanced chat hook with AI comment support and improved streaming capabilities
  • ai-menu: Updated AI menu with comment generation options and improved UI
  • ai-toolbar-button: Added support for AI comment actions
  • block-context-menu: Integrated AI comment options into block context menu
  • fixed-toolbar-buttons: Added AI comment button to toolbar
  • ai-kit: remove all prompt templates, use directly in api/ai/command/route.ts.
  • api/ai/command/route.ts: Added comment functionality.

August 2025 #25

August 17 #25.2

• block-discussion: Removed useFocusedLast check for showing discussion popover.

August 1 #25.1

• Floating toolbar improvements: Multiple components now use the new useFocusedLast hook to only show their floating toolbars when their editor is the last focused editor, preventing toolbar conflicts in multi-editor scenarios:
  • ai-menu
  • block-discussion
  • column-node
  • media-toolbar
  • table-node
• block-draggable:
  • Select list children on handle click
  • Focus selected blocks on handle click

July 2025 #24

July 29 #24.11

• block-draggable: Fixed table drag and drop preview display with horizontal scroll compensation. Drag preview elements now correctly display content even when the original element has horizontal scroll
• block-draggable: Added isAboutToDrag state to improve preview handling - tracks when drag is about to start (mousedown but not yet dragging) for better preview cleanup

July 27 #24.10

• ai-kit: support custom node type
• indent-kit: add KEYS.img to IndentPlugin
• list-kit: add KEYS.img to ListPlugin
• markdown-joiner-transform.ts: add markdownJoinerTransform to transform chunks like [,bold,] to [bold] make the md deserializer happy.
• api/ai/command/route.ts: use markdownJoinerTransform to transform chunks.

July 26 #24.9

• list-classic-kit: Added ListPlugin to restore List functionalities (indent with Tab / Shift+Tab, new item when pressing enter, ...).

July 25 #24.8

• block-draggable: Added support for automatically selecting list item children when dragging. When dragging a list item, all nested items with bigger indent are now included in the drag operation

July 23 #24.7

• block-draggable: Updated to use new addOnContextMenu API from BlockSelectionPlugin for cleaner context menu handling

July 18 #24.6

• block-context-menu: Fixed context menu not opening when right-clicking on block margin areas
• block-draggable: Added wrapper div with context menu handler to ensure block selection on margin clicks

July 14 #24.5

• block-draggable: Added support for dragging multiple blocks using editor's native selection (previously only block-selection was supported)

July 3 #24.4

• slate-to-html: Added EditorViewDemo component for static editor rendering using createStaticEditor

July 4 #24.3

• list-classic-node: Fix styling that affects TaskListElement by force overriding list-style-type (set to none).

July 3 #24.2

• Task list support in list-classic: Added task list functionality with checkboxes to the list-classic plugin
  • list-classic-kit: Added TaskListPlugin with TaskListElement component
  • list-classic-node: Added TaskListElement and TaskListItemElement components with checkbox support
  • transforms-classic: New file for classic list transforms
  • insert-toolbar-classic-button: New component for inserting classic list types (bulleted, numbered, task)
  • turn-into-toolbar-classic-button: New component for converting blocks to classic list types
  • floating-toolbar-classic-buttons: New component for floating toolbar with classic list support
  • floating-toolbar-classic-kit: New kit that includes classic list toolbar buttons

July 2 #24.1

• editor: Added EditorView component using the new PlateView from @platejs/core/react for static editor rendering with copy functionality

June 2025 #23

June 29 #23.9

• link-node: Remove useLink
• link-node-static: missing getLinkAttributes
• media-image-node: attributes.alt type casting

June 26 #23.7

• inline-combobox: Fixed combobox not closing when clicking outside the editor

June 24 #23.6

• transform.ts: add toggleCodeBlock to setBlockMap. Fix the structural error of the code_block created by turn-into-toolbar-button.tsx.

June 20 #23.5

• Drag and drop improvements
• block-draggable: Fixed drag and drop functionality with multiple selected blocks and resolved drop positioning issues on margins.
• block-selection-kit: It is now possible to select the entire table (table), but the rows (tr) will only be selected if your selection box is within the table.
• table-node: Add block selection styles to the table.

June 18 #23.4

• table-node: Fix bug affecting cursor position and improve performance

June 16 #23.3

• block-draggable: use getPluginByType instead of getContainerTypes

June 13 #23.2

• editor: Fix placeholder positioning **:data-slate-placeholder:!top-1/2 **:data-slate-placeholder:-translate-y-1/2.
• block-placeholder-kit: Change placeholder color to text-muted-foreground/80 to match editor one.

June 9 #23.1

Plate 49

Merging files, using a more consistent naming convention, and removing unused export statements.

Components:

• Now that basic nodes have a default HTML element, you can remove withProps(..., { as: '...' }) plugin components.
• To improve decoupling, plugins are not imported anymore only for their keys. Import KEYS from @udecode/plate instead, as a unified source of keys.
  • ParagraphPlugin.key -> KEYS.p
  • INDENT_LIST_KEYS.listStyleType -> KEYS.listType
  • ListStyleType.Decimal -> KEYS.ol
  • ListStyleType.Disc -> KEYS.ul
  • list (classic) -> KEYS.listClassic
  • ol (classic) -> KEYS.olClassic
  • ul (classic) -> KEYS.ulClassic
  • li (classic) -> KEYS.liClassic
  • action_item (classic) -> KEYS.listTodoClassic
• Rename all *-element, *-leaf files to *-node (and static versions)
• Removed ai-anchor-element, merged into ai-node
• Removed ai-loading-bar, merged into ai-menu
• Removed ai-menu-items, merged into ai-menu
• Renamed align-dropdown-menu to align-toolbar-button, AlignDropdownMenu to AlignToolbarButton
• Renamed api-ai to ai-api
• Renamed api-uploadthing to media-uploadthing-api
• BlockSelection: fix block selection for tables
• Removed code-block-combobox, merged into code-block-node
• Removed code-line-element, merged into code-block-node (and static version)
• Removed code-syntax-leaf, merged into code-block-node (and static version)
• Rename color-toolbar-button to font-color-toolbar-button, ColorDropdownMenu to FontColorToolbarButton
• Removed all color-* files, merged into font-color-toolbar-button
  • Rename color-dropdown-menu to font-color-toolbar-button
• Removed column-group-element, merged into column-node (and static version)
• Removed comment-create-form, merged into comment
• Renamed draggable to block-draggable, DraggableAboveNodes to BlockDraggable
• Renamed emoji-input-element to emoji-node
• Removed all emoji-* files (except emoji-input-node), merged into emoji-toolbar-button
  • Rename EmojiToolbarDropdown to EmojiPopover, EmojiDropdownMenu to EmojiToolbarButton
  • EmojiPicker icons prop is now optional and defaulted to emojiCategoryIcons and emojiSearchIcons
• Renamed image-preview to media-preview-dialog, ImagePreview to MediaPreviewDialog
• Renamed image-element to media-image-node
  • Renamed MediaFileElement to FileElement (and static version)
  • Renamed MediaAudioElement to AudioElement (and static version)
  • Renamed MediaVideoElement to VideoElement (and static version)
• Renamed indent-list-toolbar-button to list-toolbar-button
  • Renamed BulletedIndentListToolbarButton to BulletedListToolbarButton
  • Renamed NumberedIndentListToolbarButton to NumberedListToolbarButton
• Renamed indent-todo-marker to block-list
• Removed indent-fire-marker
• Removed indent-todo-toolbar-button, merged into list-toolbar-button
• Renamed IndentTodoToolbarButton into TodoListToolbarButton
• Removed inline-equation-element and equation-popover, merged into equation-node (and static version)
• Removed inline-equation-toolbar-button, merged into equation-toolbar-button
• Renamed insert-dropdown-menu to insert-toolbar-button, InsertDropdownMenu to InsertToolbarButton
• Renamed line-height-dropdown-menu to line-height-toolbar-button, LineHeightDropdownMenu to LineHeightToolbarButton
• Rename link-floating-toolbar to link-toolbar
• Removed list-indent-toolbar-button, merged into list-classic-toolbar-button
• Renamed ListIndentToolbarButton to IndentToolbarButton
• Renamed list-node to list-classic-node
• Renamed media-popover to media-toolbar, MediaPopover to MediaToolbar
• Renamed mode-dropdown-menu to mode-toolbar-button, ModeDropdownMenu to ModeToolbarButton
• Renamed more-dropdown-menu to more-toolbar-button, MoreDropdownMenu to MoreToolbarButton
• Removed outdent-toolbar-button, merged into indent-toolbar-button
• table-icons: rename Border* to Border*Icon
• Renamed slash-input-element to slash-input-node
• Renamed SuggestionBelowNodes to SuggestionLineBreak
• Removed table-cell-element, merged into table-node (and static version)
• Removed table-row-element, merged into table-node (and static version)
• Renamed table-dropdown-menu to table-toolbar-button, TableDropdownMenu to TableToolbarButton
• Removed todo-list-node, merged into list-classic-node
• Renamed turn-into-dropdown-menu to turn-into-toolbar-button, TurnIntoDropdownMenu to TurnIntoToolbarButton
• export-toolbar-button, indent-list-plugins: remove fire from listStyleTypes
• useCommentEditor: usePlateEditor instead of useCreateEditor
• Removed placeholder, withPlaceholder. Migration: use block-placeholder-kit, BlockPlaceholderPlugin instead.
• line-height-toolbar-button: remove useLineHeightDropdownMenu hook.
• font-color-toolbar-button: remove useColorInput hook.

Plugins:

• Renamed all *-plugin, *-plugins files to -kit, and *Plugin, *Plugins to *Kit. A plugin kit is a collection of configured plugins.

  • Renamed editor-plugins to editor-kit
  • Renamed equation-plugins to math-kit, equationPlugins to MathKit
  • Renamed indent-list-plugins to list-kit, indentListPlugins to ListKit
  • Added BlockList component to block-list, used in list-kit
  • Removed use-create-editor, use usePlateEditor instead

• ai-kit: add show shortcut. Remove useHotkeys('mod+j') from ai-menu

• comment-kit: add setDraft transform, shortcut

• basic-marks-kit, basic-blocks-kit: add shortcuts

• transforms, block-draggable: remove STRUCTURE_TYPES, those are now inferred from plugin.node.isContainer. Use instead editor.meta.containerTypes.

• Remove structuralTypes from useSelectionFragmentProp usages.

May 2025 #22

May 26 #22.7

• Fix combobox closing issue
• inline-combobox: fix insertPoint not being updated when the combobox is closed.

May 15 #22.6

• Fix inline math keyboard behavior and style
• equation-popover: Focus back to the editor when the popover is closed.
• inline-equation-element: When selecting it should be highlighted.

May 11-12 #22.5

• Templates migration to Plate 48
• Migration to shadcn v4:
  • Plate had a forked version of shadcn/ui primitives that could conflict with your existing components. Our components now fully depend on the original shadcn/ui primitives, easing the integration of Plate into your existing shadcn/ui set of components.
  • All components updated to Tailwind v4.
  • See the updated installation guide.
• Migration to React 19. If you're using React 18, you may need to use React.forwardRef in a few places.
• Migration to shadcn CLI:
  • Remove registries from components.json
  • Use npx shadcn instead of npx shadcx
• MCP support
• Remove withRef from all components
• Import cn from @/lib/utils instead of @udecode/cn to stay consistent with shadcn/ui
• Remove unused className, style props from all element and leaf components
• draggable:
  • Fix dnd in Firefox
• media-placeholder-element: refactor to use use-upload-file hook instead of uploadthing
  • Migration: npx shadcn@latest add https://platejs.org/r/api-uploadthing

May 6 #22.3

• ai-chat-editor: support none-standard markdown nodes.
• slash-input-element: add callout support.
• block-selection-plugins.tsx: fix block selection not working.

May 4 #22.2

• ai/command: forked smoothStream from ai package now uses 30ms delay by default (only code blocks and tables use 100ms delay).

v48 migration:

• PlateElement, PlateLeaf and PlateText HTML attributes are moved from top-level props to attributes prop.
• Remove nodeProps prop from PlateElement, PlateLeaf, PlateText. Use attributes prop instead.
• Migrated components:
  • block-discussion
  • comment-leaf
  • date-element
  • draggable
  • excalidraw-element
  • hr-element + -static
  • image-element + -static
  • link-element
  • media-audio-element
  • media-file-element
  • media-placeholder-element
  • media-video-element
  • mention-element
  • placeholder
  • suggestion-leaf
  • table-cell-element + -static
  • table-element
  • tag-element

May 2 #22.1

• use-chat: add _abortFakeStream.
• ai-menu: Fix menu items are displayed incorrectly.
• ai-loading-bar: Move esc keydown handler to ai-menu.
• ai/command: add chunking delay to 100ms (Temporary workaround with performance issue).

April 2025 #21

April 30 #21.3

• autoformat-plugin: allow starting a new indent list with numbers other than 1

April 29 #21.2

• ai-leaf: add aiIndicatorVariants to display loading state.
• cursor-overlay: hide when ai is streaming.
• api/ai/command: fix chunking issue.

Add discussion-plugin:

• add discussionPlugin to editor-plugins, remove configure from suggestionPlugin
• refactor block-suggestion, comment to use discussionPlugin
• fix comment-create-form to create discussion when none exists
• style changes in suggestion-leaf
• fix link-floating-toolbar to support internal links, and placement top when suggestion or comment is active

April 19 #21.1

• ai-anchor-element: add ai-anchor-element component that is inserted before streaming, removed after streaming, and used for positioning the ai-menu
• ai-loading-bar: add ai-loading-bar component that is used to display the loading progress of the insert mode streaming
• ai-menu: migrate to latest ai package
• ai-menu-items: add generateMarkdownSample
• ai-plugins: Remove the single-paragraph limit from prompts
• editor: introduce PlateContainer component

April 2 #21.1

• export-toolbar-button: fix pdf export issue with html2canvas-pro
• import-toolbar-button: fix sometimes unable to select the file

March 2025 #20

March 12 2025 #20.4

• ai-toolbar-button: add missing @udecode/plate-ai dependency.
• comment-toolbar-button: add missing comments-plugin registry dependency.
• font-size-toolbar-button: add missing popover registry dependency.
• tooltip: add missing button registry dependency.

March 10 #20.3

• block-context-menu: Prevent opening context menu in read-only mode

March 2 #20.2

• block-suggestion: fix styles
• suggestion-leaf-static: add static versions

March 1 #20.1

Plate 46 - new code block

• Migrated from Prism.js to lowlight for syntax highlighting
  • code-block-element-static, code-block-element, code-block-combobox: Updated to use lowlight classes. Default to github theme.
  • code-syntax-leaf-static, code-syntax-leaf: Updated to use lowlight token classes
  • Removed prismjs dependency and related styles
  • Use lowlight plugin option instead of prism option
  • code-block-combobox: add Auto language option, change language values to match lowlight
• autoformat-plugin: prevent autoformat on code blocks

import { all, createLowlight } from 'lowlight';
 
const lowlight = createLowlight(all);
 
CodeBlockPlugin.configure({
  options: {
    lowlight,
  },
});Copy

Feburary 21 #19.3

• image-preview: prevent block menu on image preivew mask
• media-popover: hide media popover when image preivew is open

February 18 #19.2

Plate 45 - new comments & suggestions UI

• NEW block-discussion as the main container, used in plate-element
• NEW comment for individual comment display
• NEW comment-create-form with minimal Plate editor for input
• Removed legacy components:
  • comments-popover
  • comment-avatar
  • comment-reply-items
  • comment-value
  • comment-resolve-button
• NEW block-suggestion
• NEW suggestion-leaf
• NEW suggestion-line-break
• Remove plate-element, import PlateElement from @udecode/plate/react instead. Add in block-selection-plugins:

render: {
  belowRootNodes: (props) => {
    if (!props.className?.includes('slate-selectable')) return null;
 
    return <BlockSelection />;
  },
},Copy

February 3 #19.1

• React 19
• TailwindCSS 4
• Plate 45
• Jotai 2
• Zustand 6
• comment-more-dropdown: remove useCommentEditButtonState, useCommentDeleteButtonState
• image-element, media-embed-element, media-video-element, mode-dropdown-menu
  • use const width = useResizableValue('width')
• image-preview: remove useScaleInputState, useImagePreviewState
• floating-toolbar:
  • replace useEventEditorSelectors with useEventEditorValue
• media-popover:
  • replace floatingMediaActions with FloatingMediaStore.set,
  • replace useFloatingMediaSelectors with useFloatingMediaValue

January 2025 #18

January 23 #18.8

• table-element: fix styles, show table border controls when collapsed
• table-row-element: refactor
• table-cell-element: selection bg-brand

January 21 #18.7

• table-element, table-row-element: support row dnd and selection
• plate-element: add blockSelectionClassName prop
• editor: z-50 for selection area
• draggable:
  • Replace editor.api.blockSelection.replaceSelectedIds with editor.api.blockSelection.clear
  • Use TooltipButton for drag handle
  • Block select on drag handle click
  • Hide drag handle in table cells
• column-element, table-cell-element: add isSelectionAreaVisible check
• block-selection: hide if dragging
• Replace editor.api.blockSelection.addSelectedRow with editor.api.blockSelection.set:
  • ai-menu
  • equation-popover
• align-dropdown-menu: deprecate

January 18 #18.6

• inline-equation-element and equation-popover: Fix: When selecting an inline equation, the popover should not open, as it causes the selection to be lost.

January 17 #18.5

• emoji-picker-search-bar: add autoFocus

January 16 #18.4

• import-toolbar-button and export-toolbar-button: add markdown support

January 14 #18.3

• fixed-toolbar-buttons: add import-toolbar-button
• indent-fire-marker.tsx Add data-plate-prevent-deserialization to prevent deserialization of the fire marker. Change the span tag to li.
• indent-todo-marker.tsx change the span tag to li.
• image-element-static.tsx and hr-element-static.tsx: Fix nodeProps not being passed to SlateElement.
• ai-chat-editor:

const aiEditor = usePlateEditor({ plugins });
useAIChatEditor(aiEditor, content);Copy

January 12 #18.2

• ai-plugins: remove createAIEditor, it's now created in ai-chat-editor
• ai-chat-editor: just use useAIChatEditor (v42.1)
• ai-menu: avoid collisions, remove aiEditorRef
• command: add focus-visible:outline-none
• editor-static: update aiChat padding
• transforms: fix insertBlock used by slash commands: it should insert a new block if the newly inserted block is of the same type as the command.
• block-selection-plugins: update BlockSelectionPlugin

BlockSelectionPlugin.configure(({ editor }) => ({
  options: {
    enableContextMenu: true,
    isSelectable: (element, path) => {
      return (
        !['code_line', 'column', 'td'].includes(element.type) &&
        !editor.api.block({ above: true, at: path, match: { type: 'tr' } })
      );
    },
  },
}))Copy

January 8 #18.1

• v42 migration
• table-element, table-element-static
  • Move icons to table-icons
  • Remove colgroup, col width is now set in table-cell-element
• table-row-element: remove hideBorder prop
• table-cell-element, table-cell-element-static:
  • column hover/resizing state is now using Tailwind instead of JS
  • Major performance improvement: all table cells were re-rendering on a single cell change. This is now fixed.
  • React.memo
• table-dropdown-menu:
  • dynamic table insert
  • merge/split cells
  • insert row/col before
• tooltip: add TooltipButton
• indent-list-toolbar-button: Remove IndentListToolbarButton use NumberedIndentListToolbarButton and BulletedIndentListToolbarButton instead.
• table-dropdown-menu: new insert table interface.
• column-group-element: fix ColumnFloatingToolbar onColumnChange

December 2024 #17

December 28 #17.8

• export-toolbar-button: add katex support
• plate-element: remove relative className
• All components using the PlateElement have had redundant relative class names removed.

December 27 #17.7

• fixed-toolbar-buttons: add font-size-toolbar-button
• floating-toolbar: add inline-equation-toolbar-button
• turn-into-dropdown-menu: Fix: after turn into other block, the editor should regain focus.
• insert-dropdown-menu: add inline equation and equation & fix the focus issue
• slash-input-element: add equation and inline equation

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',
  ],Copy

December 20 #17.3

• insertColumnGroup, toggleColumnGroup: use columns option instead of layout
• Remove with-draggables. Add DraggableAboveNodes to draggable. Add to DndPlugin config:

DndPlugin.configure({ render: { aboveNodes: DraggableAboveNodes } }),Copy

• column-element, image-element, media-video-element: Remove useDraggableState. Use const { isDragging, previewRef, handleRef } = useDraggable
• column-group-element: Remove useColumnState. Use instead:

const columnGroupElement = useElement<TColumnGroupElement>(ColumnPlugin.key);
 
const onColumnChange = (widths: string[]) => {
  setColumns(editor, {
    at: findNodePath(editor, columnGroupElement),
    widths,
  });
};Copy

• export-toolbar-button: add exportToHtml

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: add select-text to editorVariants
• date-element: remove popover when read-only
• indent-todo-marker: use SlateRenderElementProps type instead of PlateRenderElementProps
• hr-element, media-audio-element, media-embed-element, mention-element: improve cursor styling
• media-file-element: use <a> instead of div + 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

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 of cmdk.
• command: add variants
• editor: add select variant
• popover: add animate variant

https://github.com/udecode/plate/pull/3807/files

• toc-element: remove <nav> tag using <div> instead to fix html2canvas issue
• editor: remove role="button" to fix html2canvas issue

November 21 #16.8

Shadcn sync:

• input: add text-base md:text-sm
• textarea: add text-base md:text-sm
• editor(ai, aiChat variants): add text-base md:text-sm

November 14 #16.7

• toolbar: Add ToolbarSplitButton, ToolbarSplitButtonPrimary, ToolbarSplitButtonSecondary
• media-toolbar-button: use ToolbarSplitButton

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)',
  },
},Copy

• 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'],
},Copy

• 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

• New cli: shadcx. See CLI and components.json.

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) => {
    // ...
  })
);Copy

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

  `

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

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:

• Manual Installation
• Theming
• CLI