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.

March 2026 #29

March 16 #29.3

• table-node: Hide browser text-selection fragments during multi-cell table selection by aligning the table selection data attribute with the selection-suppression CSS hook.

March 15 #29.2

• table-node: Reduce large-table selection latency by syncing selected-cell highlights from the table root, caching repeated selection queries, indexing table cell DOM elements by id, reusing table grid lookups during selection range expansion, keeping the selection simulator on lightweight selected-cell ids, and deferring expanded selection toolbar mount until the selection settles.

March 11 #29.1

• table-node: Improved large-table editing performance by applying column widths at the table level, row heights at the row level, and keeping editable resize handles aligned with the table control column.

January 2026 #28

January 20 #28.3

• AIChat: Fixed assistant input width not expanding when panel is expanded

January 19 #28.2

• inline-combobox: Added keyboard navigation cycling at list boundaries
  • ArrowUp at first item cycles to last item
  • ArrowDown at last item cycles to first item
  • Prevents null activeId using capture-phase event handling

January 17 #28.1

• DOCX Import/Export: New @platejs/docx-io package for Word document handling
  • import-toolbar-button: Import DOCX files with importDocx
  • export-toolbar-button: Export to DOCX with exportToDocx
  • docx-export-kit: DOCX-optimized components using DocxExportPlugin.configure({ override: { components } })
• DOCX Static Components: Added to existing static files with *Docx naming pattern:
  • callout-node-static: CalloutElementDocx
  • code-block-node-static: CodeBlockElementDocx, CodeLineElementDocx, CodeSyntaxLeafDocx
  • column-node-static: ColumnElementDocx, ColumnGroupElementDocx
  • equation-node-static: EquationElementDocx, InlineEquationElementDocx
  • toc-node-static: TocElementDocx

December 2025 #27

December 23 #27.3

• code-drawing-node: Added new code drawing component with inline editing support
  • Support for multiple diagram types: PlantUML, Graphviz, Flowchart, and Mermaid
  • Inline code editing with real-time preview (no popup dialog)
  • Multiple view modes: Both (code + preview), Code only, Image only
  • Responsive layout: horizontal on desktop, vertical on mobile
  • Floating toolbar with language selector, view mode selector, and download button
  • Debounced rendering (500ms) for optimal performance

December 23 #27.2

• AI Prompt System Refactoring: Complete restructuring of AI command prompts for better maintainability
  • Split monolithic prompts.ts into focused modules: getEditPrompt, getGeneratePrompt, getCommentPrompt, getEditTablePrompt, getChooseToolPrompt
  • Added new common.ts for shared prompt utilities
  • Enhanced table cell editing capabilities with specialized prompts
• AI Table Cell Handling: Improved support for editing single-cell tables
  • use-chat: Enhanced with parser options for better AI content processing
  • cursor-overlay: Fixed overlay positioning and behavior
  • Added tests for complex table markdown generation
• API Routes: Updated AI command and copilot routes with improved prompt selection logic

December 16 #27.1

• table-node: Fixed table row drag and drop - rows could be dragged but not dropped, and dropline wasn't showing. Added missing nodeRef to element ref composition.

November 30 #26.10

• inline-combobox: Added Yjs collaboration support - combobox popover now only shows for the user who triggered it, preventing the popover from opening for all users in collaborative editing

October 21 #26.9

• suggestion-kit: Remove BlockSuggestionuse SuggestionLineBreak instead to fixes styles.
• use-chat: Fix AI comment hiding when finished.

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 @plate/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