由于 Plate UI 并非组件库,更新日志在此维护。
使用 CLI 安装最新版本的组件。
2025年6月 #23
6月9日 #23.1
Plate 49
合并文件,使用更一致的命名约定,并删除未使用的 export
语句。
组件:
- 由于基本节点现在有默认的 HTML 元素,你可以删除
withProps(..., { as: '...' })
插件组件。 - 为了提高解耦性,不再仅为了获取键而导入插件。从
@udecode/plate
导入KEYS
作为统一的键源。ParagraphPlugin.key
->KEYS.p
INDENT_LIST_KEYS.listStyleType
->KEYS.listType
ListStyleType.Decimal
->KEYS.ol
ListStyleType.Disc
->KEYS.ul
list
(经典) ->KEYS.listClassic
ol
(经典) ->KEYS.olClassic
ul
(经典) ->KEYS.ulClassic
li
(经典) ->KEYS.liClassic
action_item
(经典) ->KEYS.listTodoClassic
- 将所有
*-element
、*-leaf
文件重命名为*-node
(以及静态版本) - 删除
ai-anchor-element
,合并到ai-node
- 删除
ai-loading-bar
,合并到ai-menu
- 删除
ai-menu-items
,合并到ai-menu
- 将
align-dropdown-menu
重命名为align-toolbar-button
,AlignDropdownMenu
重命名为AlignToolbarButton
- 将
api-ai
重命名为ai-api
- 将
api-uploadthing
重命名为media-uploadthing-api
BlockSelection
:修复表格的块选择- 删除
code-block-combobox
,合并到code-block-node
- 删除
code-line-element
,合并到code-block-node
(以及静态版本) - 删除
code-syntax-leaf
,合并到code-block-node
(以及静态版本) - 将
color-toolbar-button
重命名为font-color-toolbar-button
,ColorDropdownMenu
重命名为FontColorToolbarButton
- 删除所有
color-*
文件,合并到font-color-toolbar-button
- 将
color-dropdown-menu
重命名为font-color-toolbar-button
- 将
- 删除
column-group-element
,合并到column-node
(以及静态版本) - 删除
comment-create-form
,合并到comment
- 将
draggable
重命名为block-draggable
,DraggableAboveNodes
重命名为BlockDraggable
- 将
emoji-input-element
重命名为emoji-node
- 删除所有
emoji-*
文件(除了emoji-input-node
),合并到emoji-toolbar-button
- 将
EmojiToolbarDropdown
重命名为EmojiPopover
,EmojiDropdownMenu
重命名为EmojiToolbarButton
EmojiPicker
的icons
属性现在是可选的,默认为emojiCategoryIcons
和emojiSearchIcons
- 将
- 将
image-preview
重命名为media-preview-dialog
,ImagePreview
重命名为MediaPreviewDialog
- 将
image-element
重命名为media-image-node
- 将
MediaFileElement
重命名为FileElement
(以及静态版本) - 将
MediaAudioElement
重命名为AudioElement
(以及静态版本) - 将
MediaVideoElement
重命名为VideoElement
(以及静态版本)
- 将
- 将
indent-list-toolbar-button
重命名为list-toolbar-button
- 将
BulletedIndentListToolbarButton
重命名为BulletedListToolbarButton
- 将
NumberedIndentListToolbarButton
重命名为NumberedListToolbarButton
- 将
- 将
indent-todo-marker
重命名为block-list
- 删除
indent-fire-marker
- 删除
indent-todo-toolbar-button
,合并到list-toolbar-button
- 将
IndentTodoToolbarButton
重命名为TodoListToolbarButton
- 删除
inline-equation-element
和equation-popover
,合并到equation-node
(以及静态版本) - 删除
inline-equation-toolbar-button
,合并到equation-toolbar-button
- 将
insert-dropdown-menu
重命名为insert-toolbar-button
,InsertDropdownMenu
重命名为InsertToolbarButton
- 将
line-height-dropdown-menu
重命名为line-height-toolbar-button
,LineHeightDropdownMenu
重命名为LineHeightToolbarButton
- 将
link-floating-toolbar
重命名为link-toolbar
- 删除
list-indent-toolbar-button
,合并到list-classic-toolbar-button
- 将
ListIndentToolbarButton
重命名为IndentToolbarButton
- 将
list-node
重命名为list-classic-node
- 将
media-popover
重命名为media-toolbar
,MediaPopover
重命名为MediaToolbar
- 将
mode-dropdown-menu
重命名为mode-toolbar-button
,ModeDropdownMenu
重命名为ModeToolbarButton
- 将
more-dropdown-menu
重命名为more-toolbar-button
,MoreDropdownMenu
重命名为MoreToolbarButton
- 删除
outdent-toolbar-button
,合并到indent-toolbar-button
table-icons
:将Border*
重命名为Border*Icon
- 将
slash-input-element
重命名为slash-input-node
- 将
SuggestionBelowNodes
重命名为SuggestionLineBreak
- 删除
table-cell-element
,合并到table-node
(以及静态版本) - 删除
table-row-element
,合并到table-node
(以及静态版本) - 将
table-dropdown-menu
重命名为table-toolbar-button
,TableDropdownMenu
重命名为TableToolbarButton
- 删除
todo-list-node
,合并到list-classic-node
- 将
turn-into-dropdown-menu
重命名为turn-into-toolbar-button
,TurnIntoDropdownMenu
重命名为TurnIntoToolbarButton
export-toolbar-button
,indent-list-plugins
:从listStyleTypes
中移除 fireuseCommentEditor
:使用usePlateEditor
替代useCreateEditor
- 删除
placeholder
,withPlaceholder
。迁移:使用block-placeholder-kit
,BlockPlaceholderPlugin
替代。 line-height-toolbar-button
:删除useLineHeightDropdownMenu
钩子。font-color-toolbar-button
:删除useColorInput
钩子。
插件:
-
将所有
*-plugin
、*-plugins
文件重命名为-kit
,将*Plugin
、*Plugins
重命名为*Kit
。插件套件是已配置插件的集合。- 将
editor-plugins
重命名为editor-kit
- 将
equation-plugins
重命名为math-kit
,equationPlugins
重命名为MathKit
- 将
indent-list-plugins
重命名为list-kit
,indentListPlugins
重命名为ListKit
- 在
block-list
中添加BlockList
组件,在list-kit
中使用 - 删除
use-create-editor
,使用usePlateEditor
替代
- 将
-
ai-kit
:添加show
快捷键。从ai-menu
中删除useHotkeys('mod+j')
-
comment-kit
:添加setDraft
转换,快捷键 -
basic-marks-kit
,basic-blocks-kit
:添加快捷键 -
transforms
,block-draggable
:删除STRUCTURE_TYPES
,这些现在从plugin.node.isContainer
推断。改用editor.meta.containerTypes
。 -
从
useSelectionFragmentProp
用法中删除structuralTypes
。
2025年5月 #22
5月26日 #22.7
list
(classic) ->KEYS.listClassic
ol
(classic) ->KEYS.olClassic
ul
(classic) ->KEYS.ulClassic
li
(classic) ->KEYS.liClassic
action_item
(classic) ->KEYS.listTodoClassic
- 将所有
*-element
、*-leaf
文件重命名为*-node
(以及静态版本) - 删除
ai-anchor-element
,合并到ai-node
- 删除
ai-loading-bar
,合并到ai-menu
- 删除
ai-menu-items
,合并到ai-menu
- 将
align-dropdown-menu
重命名为align-toolbar-button
,AlignDropdownMenu
重命名为AlignToolbarButton
- 将
api-ai
重命名为ai-api
- 将
api-uploadthing
重命名为media-uploadthing-api
BlockSelection
:修复表格的块选择- 删除
code-block-combobox
,合并到code-block-node
- 删除
code-line-element
,合并到code-block-node
(以及静态版本) - 删除
code-syntax-leaf
,合并到code-block-node
(以及静态版本) - 将
color-toolbar-button
重命名为font-color-toolbar-button
,ColorDropdownMenu
重命名为FontColorToolbarButton
- 删除所有
color-*
文件,合并到font-color-toolbar-button
- 将
color-dropdown-menu
重命名为font-color-toolbar-button
- 将
- 删除
column-group-element
,合并到column-node
(以及静态版本) - 删除
comment-create-form
,合并到comment
- 将
draggable
重命名为block-draggable
,DraggableAboveNodes
重命名为BlockDraggable
- 将
emoji-input-element
重命名为emoji-node
- 删除所有
emoji-*
文件(除了emoji-input-node
),合并到emoji-toolbar-button
- 将
EmojiToolbarDropdown
重命名为EmojiPopover
,EmojiDropdownMenu
重命名为EmojiToolbarButton
EmojiPicker
的icons
属性现在是可选的,默认为emojiCategoryIcons
和emojiSearchIcons
- 将
- 将
image-preview
重命名为media-preview-dialog
,ImagePreview
重命名为MediaPreviewDialog
- 将
image-element
重命名为media-image-node
- 将
MediaFileElement
重命名为FileElement
(以及静态版本) - 将
MediaAudioElement
重命名为AudioElement
(以及静态版本) - 将
MediaVideoElement
重命名为VideoElement
(以及静态版本)
- 将
- 将
indent-list-toolbar-button
重命名为list-toolbar-button
- 将
BulletedIndentListToolbarButton
重命名为BulletedListToolbarButton
- 将
NumberedIndentListToolbarButton
重命名为NumberedListToolbarButton
- 将
- 将
indent-todo-marker
重命名为block-list
- 删除
indent-fire-marker
- 删除
indent-todo-toolbar-button
,合并到list-toolbar-button
- 将
IndentTodoToolbarButton
重命名为TodoListToolbarButton
- 删除
inline-equation-element
和equation-popover
,合并到equation-node
(以及静态版本) - 删除
inline-equation-toolbar-button
,合并到equation-toolbar-button
- 将
insert-dropdown-menu
重命名为insert-toolbar-button
,InsertDropdownMenu
重命名为InsertToolbarButton
- 将
line-height-dropdown-menu
重命名为line-height-toolbar-button
,LineHeightDropdownMenu
重命名为LineHeightToolbarButton
- 将
link-floating-toolbar
重命名为link-toolbar
- 删除
list-indent-toolbar-button
,合并到list-classic-toolbar-button
- 将
ListIndentToolbarButton
重命名为IndentToolbarButton
- 将
list-node
重命名为list-classic-node
- 将
media-popover
重命名为media-toolbar
,MediaPopover
重命名为MediaToolbar
- 将
mode-dropdown-menu
重命名为mode-toolbar-button
,ModeDropdownMenu
重命名为ModeToolbarButton
- 将
more-dropdown-menu
重命名为more-toolbar-button
,MoreDropdownMenu
重命名为MoreToolbarButton
- 删除
outdent-toolbar-button
,合并到indent-toolbar-button
table-icons
:将Border*
重命名为Border*Icon
- 将
slash-input-element
重命名为slash-input-node
- 将
SuggestionBelowNodes
重命名为SuggestionLineBreak
- 删除
table-cell-element
,合并到table-node
(以及静态版本) - 删除
table-row-element
,合并到table-node
(以及静态版本) - 将
table-dropdown-menu
重命名为table-toolbar-button
,TableDropdownMenu
重命名为TableToolbarButton
- 删除
todo-list-node
,合并到list-classic-node
- 将
turn-into-dropdown-menu
重命名为turn-into-toolbar-button
,TurnIntoDropdownMenu
重命名为TurnIntoToolbarButton
export-toolbar-button
,indent-list-plugins
:从listStyleTypes
中移除 fireuseCommentEditor
:使用usePlateEditor
替代useCreateEditor
- 删除
placeholder
,withPlaceholder
。迁移:使用block-placeholder-kit
,BlockPlaceholderPlugin
替代。 line-height-toolbar-button
:删除useLineHeightDropdownMenu
钩子。font-color-toolbar-button
:删除useColorInput
钩子。
插件:
-
将所有
*-plugin
、*-plugins
文件重命名为-kit
,将*Plugin
、*Plugins
重命名为*Kit
。插件套件是已配置插件的集合。- 将
editor-plugins
重命名为editor-kit
- 将
equation-plugins
重命名为math-kit
,equationPlugins
重命名为MathKit
- 将
indent-list-plugins
重命名为list-kit
,indentListPlugins
重命名为ListKit
- 在
block-list
中添加BlockList
组件,在list-kit
中使用 - 删除
use-create-editor
,使用usePlateEditor
替代
- 将
-
ai-kit
:添加show
快捷键。从ai-menu
中删除useHotkeys('mod+j')
-
comment-kit
:添加setDraft
转换,快捷键 -
basic-marks-kit
,basic-blocks-kit
:添加快捷键 -
transforms
,block-draggable
:删除STRUCTURE_TYPES
,这些现在从plugin.node.isContainer
推断。改用editor.meta.containerTypes
。 -
从
useSelectionFragmentProp
用法中删除structuralTypes
。
2025年5月 #22
5月26日 #22.7
- 修复组合框关闭问题
inline-combobox
:修复组合框关闭时insertPoint
未更新的问题。
5月15日 #22.6
- 修复内联数学键盘行为和样式
equation-popover
:关闭弹出框时将焦点返回到编辑器。inline-equation-element
:选择时应高亮显示。
5月11-12日 #22.5
-
迁移到 shadcn v4:
- Plate 有一个分叉版本的 shadcn/ui 原语,可能会与您现有的组件冲突。我们的组件现在完全依赖于原始的 shadcn/ui 原语,使 Plate 更容易集成到您现有的 shadcn/ui 组件集中。
-
将所有
*-element
、*-leaf
文件重命名为*-node
(以及静态版本) -
删除
ai-anchor-element
,合并到ai-node
-
删除
ai-loading-bar
,合并到ai-menu
-
删除
ai-menu-items
,合并到ai-menu
-
将
align-dropdown-menu
重命名为align-toolbar-button
,AlignDropdownMenu
重命名为AlignToolbarButton
-
将
api-ai
重命名为ai-api
-
将
api-uploadthing
重命名为media-uploadthing-api
-
BlockSelection
:修复表格的块选择 -
删除
code-block-combobox
,合并到code-block-node
-
删除
code-line-element
,合并到code-block-node
(以及静态版本) -
删除
code-syntax-leaf
,合并到code-block-node
(以及静态版本) -
将
color-toolbar-button
重命名为font-color-toolbar-button
,ColorDropdownMenu
重命名为FontColorToolbarButton
-
删除所有
color-*
文件,合并到font-color-toolbar-button
- 将
color-dropdown-menu
重命名为font-color-toolbar-button
- 将
-
删除
column-group-element
,合并到column-node
(以及静态版本) -
删除
comment-create-form
,合并到comment
-
将
draggable
重命名为block-draggable
,DraggableAboveNodes
重命名为BlockDraggable
-
将
emoji-input-element
重命名为emoji-node
-
删除所有
emoji-*
文件(除了emoji-input-node
),合并到emoji-toolbar-button
- 将
EmojiToolbarDropdown
重命名为EmojiPopover
,EmojiDropdownMenu
重命名为EmojiToolbarButton
EmojiPicker
的icons
属性现在是可选的,默认为emojiCategoryIcons
和emojiSearchIcons
- 将
-
将
image-preview
重命名为media-preview-dialog
,ImagePreview
重命名为MediaPreviewDialog
-
将
image-element
重命名为media-image-node
- 将
MediaFileElement
重命名为FileElement
(以及静态版本) - 将
MediaAudioElement
重命名为AudioElement
(以及静态版本) - 将
MediaVideoElement
重命名为VideoElement
(以及静态版本)
- 将
-
将
indent-list-toolbar-button
重命名为list-toolbar-button
- 将
BulletedIndentListToolbarButton
重命名为BulletedListToolbarButton
- 将
NumberedIndentListToolbarButton
重命名为NumberedListToolbarButton
- 将
-
将
indent-todo-marker
重命名为block-list
-
删除
indent-fire-marker
-
删除
indent-todo-toolbar-button
,合并到list-toolbar-button
-
将
IndentTodoToolbarButton
重命名为TodoListToolbarButton
-
删除
inline-equation-element
和equation-popover
,合并到equation-node
(以及静态版本) -
删除
inline-equation-toolbar-button
,合并到equation-toolbar-button
-
将
insert-dropdown-menu
重命名为insert-toolbar-button
,InsertDropdownMenu
重命名为InsertToolbarButton
-
将
line-height-dropdown-menu
重命名为line-height-toolbar-button
,LineHeightDropdownMenu
重命名为LineHeightToolbarButton
-
将
link-floating-toolbar
重命名为link-toolbar
-
删除
list-indent-toolbar-button
,合并到list-classic-toolbar-button
-
将
ListIndentToolbarButton
重命名为IndentToolbarButton
-
将
list-node
重命名为list-classic-node
-
将
media-popover
重命名为media-toolbar
,MediaPopover
重命名为MediaToolbar
-
将
mode-dropdown-menu
重命名为mode-toolbar-button
,ModeDropdownMenu
重命名为ModeToolbarButton
-
将
more-dropdown-menu
重命名为more-toolbar-button
,MoreDropdownMenu
重命名为MoreToolbarButton
-
删除
outdent-toolbar-button
,合并到indent-toolbar-button
-
table-icons
:将Border*
重命名为Border*Icon
-
将
slash-input-element
重命名为slash-input-node
-
将
SuggestionBelowNodes
重命名为SuggestionLineBreak
-
删除
table-cell-element
,合并到table-node
(以及静态版本) -
删除
table-row-element
,合并到table-node
(以及静态版本) -
将
table-dropdown-menu
重命名为table-toolbar-button
,TableDropdownMenu
重命名为TableToolbarButton
-
删除
todo-list-node
,合并到list-classic-node
-
将
turn-into-dropdown-menu
重命名为turn-into-toolbar-button
,TurnIntoDropdownMenu
重命名为TurnIntoToolbarButton
-
export-toolbar-button
,indent-list-plugins
:从listStyleTypes
中移除 fire -
useCommentEditor
:使用usePlateEditor
替代useCreateEditor
-
删除
placeholder
,withPlaceholder
。迁移:使用block-placeholder-kit
,BlockPlaceholderPlugin
替代。 -
line-height-toolbar-button
:删除useLineHeightDropdownMenu
钩子。 -
font-color-toolbar-button
:删除useColorInput
钩子。 插件: -
将所有
*-plugin
、*-plugins
文件重命名为-kit
,将*Plugin
、*Plugins
重命名为*Kit
。插件套件是已配置插件的集合。- 将
editor-plugins
重命名为editor-kit
- 将
equation-plugins
重命名为math-kit
,equationPlugins
重命名为MathKit
- 将
indent-list-plugins
重命名为list-kit
,indentListPlugins
重命名为ListKit
- 在
block-list
中添加BlockList
组件,用于list-kit
- 删除
use-create-editor
,改用usePlateEditor
- 将
-
ai-kit
:添加show
快捷键。从ai-menu
中移除useHotkeys('mod+j')
-
comment-kit
:添加setDraft
转换和快捷键 -
basic-marks-kit
、basic-blocks-kit
:添加快捷键 -
transforms
、block-draggable
:移除STRUCTURE_TYPES
,现在从plugin.node.isContainer
推断。改用editor.meta.containerTypes
。 -
从
useSelectionFragmentProp
用法中移除structuralTypes
。
2025年5月 #22
5月26日 #22.7
- 修复 combobox 关闭问题
inline-combobox
:修复 combobox 关闭时insertPoint
未更新的问题。
5月15日 #22.6
- 修复内联数学键盘行为和样式
equation-popover
:关闭弹出框时将焦点返回到编辑器。inline-equation-element
:选中时应高亮显示。
5月11-12日 #22.5
- 模板迁移到 Plate 48
- 迁移到 shadcn v4:
- Plate 之前有一个分叉版本的 shadcn/ui 原语,可能会与你现有的组件冲突。我们的组件现在完全依赖原始的 shadcn/ui 原语,使 Plate 更容易集成到你现有的 shadcn/ui 组件集中。
- 所有组件更新到 Tailwind v4。
- 查看更新的安装指南。
- 迁移到 React 19。如果你使用 React 18,可能需要在一些地方使用
React.forwardRef
。 - 迁移到 shadcn CLI:
- 从
components.json
中移除registries
- 使用
npx shadcn
替代npx shadcx
- 从
- MCP 支持
- 从所有组件中移除
withRef
- 从
@/lib/utils
导入cn
而不是@udecode/cn
,以保持与 shadcn/ui 的一致性 - 从所有 element 和 leaf 组件中移除未使用的
className
、style
属性 draggable
:- 修复 Firefox 中的拖放功能
media-placeholder-element
:重构为使用use-upload-file
钩子而不是uploadthing
- 迁移:
npx shadcn@latest add https://platejs.org/r/api-uploadthing
- 迁移:
5月6日 #22.3
ai-chat-editor
:支持非标准 markdown 节点。slash-input-element
:添加 callout 支持。block-selection-plugins.tsx
:修复块选择不工作的问题。
5月4日 #22.2
ai/command
: 从ai
包分叉的 smoothStream 现在默认使用 30ms 延迟(仅代码块和表格使用 100ms 延迟)。
5月2日 #22.1
use-chat
: 添加_abortFakeStream
。ai-menu
: 修复菜单项显示不正确的问题。ai-loading-bar
: 将 esc 按键处理移至ai-menu
。ai/command
: 将分块延迟增加到 100ms(临时解决性能问题)。
2025年4月 #21
4月30日 #21.3
autoformat-plugin
: 允许以非1的数字开始新的缩进列表
4月29日 #21.2
ai-leaf
: 添加aiIndicatorVariants
以显示加载状态。cursor-overlay
: 当 AI 流式传输时隐藏。api/ai/command
: 修复分块问题。
添加 discussion-plugin
:
- 将
discussionPlugin
添加到editor-plugins
,从suggestionPlugin
中移除configure
- 重构
block-suggestion
,comment
以使用discussionPlugin
- 修复
comment-create-form
在不存在讨论时创建讨论 suggestion-leaf
中的样式更改- 修复
link-floating-toolbar
以支持内部链接,并在建议或评论激活时顶部放置
4月19日 #21.1
ai-anchor-element
: 添加ai-anchor-element
组件,在流式传输前插入,流式传输后移除,用于定位 ai-menuai-loading-bar
: 添加ai-loading-bar
组件,用于显示插入模式流式传输的加载进度ai-menu
: 迁移到最新的ai
包ai-menu-items
: 添加generateMarkdownSample
ai-plugins
: 移除提示中的单段落限制editor
: 引入PlateContainer
组件
4月2日 #21.1
export-toolbar-button
: 修复与html2canvas-pro
的 PDF 导出问题import-toolbar-button
: 修复有时无法选择文件的问题
2025年3月 #20
3月12日 #20.4
ai-toolbar-button
: 添加缺失的@platejs/ai
依赖。comment-toolbar-button
: 添加缺失的comments-plugin
registry 依赖。font-size-toolbar-button
: 添加缺失的popover
registry 依赖。tooltip
: 添加缺失的button
registry 依赖。
3月10日 #20.3
block-context-menu
: 防止在只读模式下打开上下文菜单
3月2日 #20.2
block-suggestion
: 修复样式suggestion-leaf-static
: 添加静态版本
3月1日 #20.1
Plate 46 - 新代码块
- 从 Prism.js 迁移到 lowlight 进行语法高亮
code-block-element-static
,code-block-element
,code-block-combobox
: 更新以使用 lowlight 类。默认为 github 主题。code-syntax-leaf-static
,code-syntax-leaf
: 更新以使用 lowlight token 类- 移除
prismjs
依赖及相关样式 - 使用
lowlight
插件选项代替prism
选项 code-block-combobox
: 添加Auto
语言选项,更改语言值以匹配 lowlight
autoformat-plugin
: 防止在代码块上自动格式化
import { all, createLowlight } from 'lowlight';
const lowlight = createLowlight(all);
CodeBlockPlugin.configure({
options: {
lowlight,
},
});
2月21日 #19.3
image-preview
: 防止在图像预览遮罩上显示块菜单media-popover
: 当图像预览打开时隐藏媒体弹出窗口
2月18日 #19.2
Plate 45 - 新评论和建议 UI
- 新增
block-discussion
作为主容器,用于plate-element
- 新增
comment
用于单个评论显示 - 新增
comment-create-form
带有最小 Plate 编辑器用于输入 - 移除旧组件:
comments-popover
comment-avatar
comment-reply-items
comment-value
comment-resolve-button
- 新增
block-suggestion
- 新增
suggestion-leaf
- 新增
suggestion-line-break
- 移除
plate-element
,从platejs/react
导入PlateElement
代替。在block-selection-plugins
中添加:
render: {
belowRootNodes: (props) => {
if (!props.className?.includes('slate-selectable')) return null;
return <BlockSelection />;
},
},
2月3日 #19.1
- React 19
- TailwindCSS 4
- Plate 45
- Jotai 2
- Zustand 6
comment-more-dropdown
: 移除useCommentEditButtonState
,useCommentDeleteButtonState
image-element
,media-embed-element
,media-video-element
,mode-dropdown-menu
- 使用
const width = useResizableValue('width')
- 使用
image-preview
: 移除useScaleInputState
,useImagePreviewState
floating-toolbar
:- 用
useEventEditorValue
替换useEventEditorSelectors
- 用
media-popover
:- 用
FloatingMediaStore.set
替换floatingMediaActions
, - 用
useFloatingMediaValue
替换useFloatingMediaSelectors
- 用
2025年1月 #18
1月23日 #18.8
table-element
: 修复样式,折叠时显示表格边框控件table-row-element
: 重构table-cell-element
: 选择背景品牌色
1月21日 #18.7
table-element
,table-row-element
: 支持行拖放和选择plate-element
: 添加blockSelectionClassName
属性editor
: 选择区域 z-50draggable
:- 用
editor.api.blockSelection.clear
替换editor.api.blockSelection.replaceSelectedIds
- 使用
TooltipButton
作为拖动手柄 - 在拖动手柄点击时选择块
- 在表格单元格中隐藏拖动手柄
- 用
column-element
,table-cell-element
: 添加isSelectionAreaVisible
检查block-selection
: 拖动时隐藏- 用
editor.api.blockSelection.set
替换editor.api.blockSelection.addSelectedRow
:ai-menu
equation-popover
align-dropdown-menu
: 弃用
1月18日 #18.6
inline-equation-element
和equation-popover
: 修复: 当选择内联公式时,弹出窗口不应打开,因为它会导致选择丢失。
1月17日 #18.5
emoji-picker-search-bar
: 添加autoFocus
1月16日 #18.4
import-toolbar-button
和export-toolbar-button
: 添加markdown
支持
1月14日 #18.3
fixed-toolbar-buttons
: 添加import-toolbar-button
indent-fire-marker.tsx
添加data-plate-prevent-deserialization
以防止反序列化火标记。将span
标签更改为li
。indent-todo-marker.tsx
将span
标签更改为li
。image-element-static.tsx
和hr-element-static.tsx
: 修复nodeProps
未传递给SlateElement
。ai-chat-editor
:
const aiEditor = usePlateEditor({ plugins });
useAIChatEditor(aiEditor, content);
1月12日 #18.2
ai-plugins
: 移除createAIEditor
,现在在ai-chat-editor
中创建ai-chat-editor
: 仅使用useAIChatEditor
(v42.1)ai-menu
: 避免冲突,移除aiEditorRef
command
: 添加focus-visible:outline-none
editor-static
: 更新aiChat
内边距transforms
: 修复insertBlock
被斜杠命令使用的问题: 如果新插入的块与命令类型相同,则应插入新块。block-selection-plugins
: 更新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' } })
);
},
},
}))
1月8日 #18.1
- v42 迁移
table-element
,table-element-static
- 将图标移至
table-icons
- 移除
colgroup
,列宽现在在table-cell-element
中设置
- 将图标移至
table-row-element
: 移除hideBorder
属性table-cell-element
,table-cell-element-static
:- 列悬停/调整大小状态现在使用 Tailwind 而非 JS
- 主要性能改进: 所有表格单元格在单个单元格更改时都会重新渲染。现已修复。
- React.memo
table-dropdown-menu
:- 动态表格插入
- 合并/拆分单元格
- 在前插入行/列
tooltip
: 添加TooltipButton
indent-list-toolbar-button
: 移除IndentListToolbarButton
,改用NumberedIndentListToolbarButton
和BulletedIndentListToolbarButton
。table-dropdown-menu
: 新的插入表格界面。column-group-element
: 修复ColumnFloatingToolbar
onColumnChange
2024年12月 #17
12月28日 #17.8
export-toolbar-button
: 添加katex
支持plate-element
: 移除relative
类名- 所有使用
PlateElement
的组件已移除冗余的relative
类名。
12月27日 #17.7
fixed-toolbar-buttons
: 添加font-size-toolbar-button
floating-toolbar
: 添加inline-equation-toolbar-button
turn-into-dropdown-menu
: 修复: 转换为其他块后,编辑器应重新获得焦点。insert-dropdown-menu
: 添加inline equation
和equation
并修复焦点问题slash-input-element
: 添加equation
和inline equation
12月23日 #17.5
table-element
: 修复选择- 之前:
isSelectingCell && '[&_*::selection]:bg-none'
- 之后:
isSelectingCell && '[&_*::selection]:!bg-transparent'
12月21日 #17.4
更新 tailwind.config.cjs
以在 HTML 导出中更好地支持字体:
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',
],
12月20日 #17.3
insertColumnGroup
,toggleColumnGroup
: 使用columns
选项代替layout
- 移除
with-draggables
。添加DraggableAboveNodes
到draggable
。添加到DndPlugin
配置:
DndPlugin.configure({ render: { aboveNodes: DraggableAboveNodes } }),
column-element
,image-element
,media-video-element
: 移除useDraggableState
。使用const { isDragging, previewRef, handleRef } = useDraggable
column-group-element
: 移除useColumnState
。改用:
const columnGroupElement = useElement<TColumnGroupElement>(ColumnPlugin.key);
const onColumnChange = (widths: string[]) => {
setColumns(editor, {
at: findNodePath(editor, columnGroupElement),
widths,
});
};
export-toolbar-button
: 添加exportToHtml
12月19日 #17.2
Plate 41
- 新的 RSC 组件用于元素和叶子组件,文件名以
-static.tsx
结尾。这些现在与默认的客户端组件一起添加。 editor
: 添加select-text
到editorVariants
date-element
: 只读时移除弹出窗口indent-todo-marker
: 使用SlateRenderElementProps
类型代替PlateRenderElementProps
hr-element
,media-audio-element
,media-embed-element
,mention-element
: 改进光标样式media-file-element
: 使用<a>
代替div
+onClick
- 所有元素和叶子组件:
className
属性现在放在内联属性之前。
12月16日 #17.1
-
column-element
:- 添加列的拖放支持
- 添加带工具提示的拖动手柄
- 修复列间距和内边距
-
column-group-element
:- 移除列之间的间隙
- 移除顶部边距
-
draggable
:- 移除
DraggableProvider
HOC - 移除
DropLine
子属性
- 移除
2024年11月 #16
11月26日 #16.9
https://github.com/udecode/plate/pull/3809/files
- 添加
select-editor
,tag-element
,label
,form
- 用
@udecode/cmdk
替换cmdk
依赖。这是cmdk
的可控版本。 command
: 添加变体editor
: 添加select
变体popover
: 添加animate
变体
https://github.com/udecode/plate/pull/3807/files
toc-element
: 移除<nav>
标签,改用<div>
修复 html2canvas 问题editor
: 移除role="button"
修复 html2canvas 问题
11月21日 #16.8
Shadcn 同步:
input
: 添加text-base md:text-sm
textarea
: 添加text-base md:text-sm
editor
(ai
,aiChat
变体): 添加text-base md:text-sm
11月14日 #16.7
toolbar
: 添加ToolbarSplitButton
,ToolbarSplitButtonPrimary
,ToolbarSplitButtonSecondary
media-toolbar-button
: 使用ToolbarSplitButton
11月13日 #16.6
resizable
: 只读时隐藏ResizeHandle
11月8日 #16.5
- 将此添加到您的 tailwind 配置:
// 插件
require("tailwind-scrollbar-hide")
// theme.extend.screens
screens: {
/**
* 匹配主指向设备可以方便悬停的设备。用法: main-hover:group-hover:bg-red-500 参见:
* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
*
* 在 iOS 设备上,包含 `group-hover:` CSS 规则的 .group 元素内的按钮需要点击两次才能
* 点击。作为解决方法,我们在无法方便悬停的设备上禁用这些规则,使用 `main-hover:`。
*/
'main-hover': {
raw: '(hover: hover)',
},
},
editor
:EditorContainer
: 移除ref
,改用useEditorContainerRef
- 添加
caret-primary selection:bg-brand/25
- 将 `id
On This Page
2025年6月 #236月9日 #23.12025年5月 #225月26日 #22.72025年5月 #225月26日 #22.75月15日 #22.65月11-12日 #22.52025年5月 #225月26日 #22.75月15日 #22.65月11-12日 #22.55月6日 #22.35月4日 #22.25月2日 #22.12025年4月 #214月30日 #21.34月29日 #21.24月19日 #21.14月2日 #21.12025年3月 #203月12日 #20.43月10日 #20.33月2日 #20.23月1日 #20.12月21日 #19.32月18日 #19.22月3日 #19.12025年1月 #181月23日 #18.81月21日 #18.71月18日 #18.61月17日 #18.51月16日 #18.41月14日 #18.31月12日 #18.21月8日 #18.12024年12月 #1712月28日 #17.812月27日 #17.712月23日 #17.512月21日 #17.412月20日 #17.312月19日 #17.212月16日 #17.12024年11月 #1611月26日 #16.911月21日 #16.811月14日 #16.711月13日 #16.611月8日 #16.5