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.

December 2024 #17

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

• 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,
  });
};

• export-toolbar-button: add exportToHtml

12月19日 #17.2

Plate 41

• 为元素和叶子组件新增 RSC 组件，文件名以 -static.tsx 结尾。这些组件现在与默认的客户端组件一起添加。
• editor: 在 editorVariants 中添加 select-text
• 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 配置中：

// plugins
require("tailwind-scrollbar-hide")
 
// theme.extend.screens
screens: {
  /**
   * Matches devices where the primary pointing device is capable of
   * hovering conveniently. Usage: main-hover:group-hover:bg-red-500 See:
   * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
   *
   * On iOS devices, buttons inside a .group element that contains
   * descendent elements with `group-hover:` CSS rules require two taps to
   * click. As a workaround, we disable these rules on devices that cannot
   * conveniently hover using `main-hover:`.
   */
  'main-hover': {
    raw: '(hover: hover)',
  },
},

• editor:
  • EditorContainer: 移除 ref，改用 useEditorContainerRef
  • 添加 caret-primary selection:bg-brand/25
  • 在 EditorContainer 中添加 id={editor.uid}，这样你就可以移除 scroll_container 或任何已定义的 id
• draggable:
  • 修复一个严重的移动端用户体验问题：由于组悬停样式，聚焦编辑器需要点击两次。通过 main-hover:group-hover:opacity-100 修复
  • 对于 xs 媒体查询，仅在选中时显示
• table-element: 修复宽度
• table-row-element, table-cell-element: 支持行选择
• 为 date-element, mention-element 添加 draggable 属性
• 为 link-toolbar-button, link-floating-toolbar, ai-menu 输入框添加 data-plate-focus 属性
• cursor-overlay:
  • 支持折叠选择
  • 移除 DragOverCursorPlugin, SelectionOverlayPlugin，改用 @udecode/plate-selection
• ghost-text: 在 xs 媒体查询下隐藏，添加 pointer-events-none
• floating-toolbar: 添加 overflow-x-auto scrollbar-hide 以允许水平滚动（移动端）
• fixed-toolbar: 添加 scrollbar-hide
• emoji-picker-content: 添加 emoji 字体
• column-element: 默认添加 w-full
• 新增钩子：use-is-touch-device
• block-context-menu: 在触摸设备上禁用
• ai-toolbar-button: 添加 onMouseDown
• ai-menu-items: 添加未定义检查
• block-selection-plugins: 添加

inject: {
  excludeBelowPlugins: ['tr'],
  excludePlugins: ['table', 'code_line', 'column_group', 'column'],
},

• 添加 floating-toolbar-plugin, fixed-toolbar-plugin
• 其他: hr-element, plate-element, transforms

11月7日 #16.4

• block-context-menu: 点击上下文菜单时防止取消选择
• block-selection: 在 onCloseAutoFocus 中添加 editor.getApi(BlockSelectionPlugin).blockSelection.focus()。

11月6日 #16.3

• editor: 添加 overflow-x-hidden 以防止水平滚动
• table-element: 添加 overflow-x-auto 以允许水平滚动

11月5日 #16.2

• 修复颜色选择器清除按钮的样式
• 使用 CSS 过渡替换 toggle-element 按钮

11月1日 #16.1

• editor: 样式 + <EditorContainer />

2024年10月 #15

10月31日 #15.6

• 添加 lib/transforms.ts。包含常用操作的实用转换。
• 移除 Icons 文件依赖。所有图标现在从 lucide-react 导入。
• 修复并修改了 emoji 和颜色选择器中的一些样式。
• 分组样式：
  • dropdown-menu
  • context-menu
  • inline-combobox
• 向 slash-input-element 添加组和项目
• 间距和尺寸更新：
  • 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

10月26日 #15.5

• 将 indent-todo-marker-component 重命名为 indent-todo-marker。

10月25日 #15.4

• slash-input-element：添加 AI 命令 & 添加 focusEditor 选项

10月24日 #15.3

• 添加 ai-menu、ai-menu-items、ai-toolbar-button、ai-chat-editor、block-context-menu、context-menu、ghost-text、toc-element
• command：添加 InputCommand
• toolbar 新样式
• editor demo 变体
• heading-element：移除 isFirstBlock 属性
• 其他：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

10月14日 #15.3

• 新的 CLI：shadcx。查看 CLI 和 components.json。

10月10日 #15.3

• dropdown-menu(DropdownMenuContent)：在 onCloseAutoFocus 上阻止默认行为
• floating-toolbar(FloatingToolbar)：移除 portal，点击外部隐藏，浮动链接打开时隐藏
• turn-into-dropdown-menu(TurnIntoDropdownMenu)：添加缩进列表项
• table-dropdown-menu(TableDropdownMenu)：在 insertTable 中选择

10月4日 #15.2

• 功能 emoji-picker：调整 UI emoji 选择器

10月1日 #15.1

• 新的 block-selection 组件用于视觉选择反馈
• 新的 plate-element 组件用于使用 BlockSelection 渲染 plate 元素
• 更新 paragraph-element 和所有块元素以使用 plate-element
• draggable：
  • 重构以使用新的钩子：useDraggableGutter 和 useDropLine
  • 移除 classNames 属性，改用单一的 className
  • 添加 DraggableProvider 包装器
  • 引入 Gutter 和 DropLine 作为独立组件
• with-draggables：
  • 更新以使用新的 className 格式用于可拖动属性
• 修复 mention-element：防止在 MacOS 上 IME 输入中断

以下组件使用 --highlight 颜色：

• comment-leaf
• highlight-leaf

以下组件使用 --brand 颜色：

• block-selection
• draggable

2024年9月 #14

9月29日 #14.3

• 修复 heading-element：如果标题是第一个块，则不应有顶部边距

9月13日 #14.2

• 修复 code-block-combobox：基于标签或值进行过滤

9月10日 #14.1

• 修复 floating-toolbar：在只读模式下显示工具栏

2024年8月 #13

8月27日 #13.3

• 迁移到 Plate 37

8月26日 #13.2

• 功能 emoji-picker：适配 shadcn 主题和样式

8月12日 #13.1

• 为准备 Excalidraw 改进，将 mermaid 添加到支持的语言列表中。

2024年7月 #12

7月14日 #12.2

• 修复 cursor：如果光标数据未定义，显示选择矩形/插入符号。

7月12日 #12.1

• fixed-toolbar：top-0

2024年6月 #11

6月23日 #11.3

• 重大变更：将支持的 prismjs 语言列表移至 code-block-combobox

6月13日 #11.2

• 修复 caption：当元素 caption 属性改变时更新 UI

6月6日 #11.1

• 用 inline-combobox 替换 combobox
• 移除 mention-combobox、emoji-combobox 和 slash-combobox
• 添加 emoji-input-element
• 更新 mention-input-element 和 slash-input-element 以使用新的 combobox
• 功能 draggable：添加 data-key 属性以便在拖放操作完成后添加选择
• 重大变更：通过使用 CaptionButton 或传递媒体元素的 ID 通过 captionActions.showCaptionId 打开标题
• 向 floating-toolbar 添加 portalElement 属性

2024年5月 #10

5月30日 #10.2

• 修复 draggable：添加 portal 以修复裁剪，button type 以停止表单提交
• 修复 editor：增加 x 内边距以改善拖动手柄可见性

5月24日 #10.1

• 修复 site-header：将 zIndex 更改为 60
• 修复 fixed-toolbar：将 zIndex 更改为 60

2024年4月 #9

4月30日 #9.3

• 修复 indent-todo-marker-component：点击复选框移除焦点

4月17日 #9.2

• 添加 column-element、column-group-element

4月6日 #9.1

• 修复 combobox：撤销操作导致编辑器崩溃

2024年2月 #8

2月6日 #8.2

• 修复 list-element：变体样式丢失

2月5日 #8.1

• 修复 mention-element：点击提及 combobox 滚动条时移除提及输入 (#2919)

2024年1月 #7

1月31日 #7.5

• 添加 toggle-element
• 添加 toggle-toolbar-button

1月11日 #7.4

• 在 components.json 中添加对自定义 ui 目录的支持
• 添加对 plate-components.json 的支持，以避免与 shadcn 的 components.json 冲突

1月9日 #7.3

• toolbar
  • Toolbar：用 items-center 替换 items-stretch
  • 使用 toolbarButtonVariants 替代 toggleVariants
  • 修复 value 属性类型错误
  • 现在使用 withTooltip，所以用 aria-checked 替换 [data-state=on] 以避免冲突
• toggle：因未使用而移除
• tooltip：添加 withTooltip，被 ToolbarButton 使用

1月8日 #7.2

• table-element - TableProvider 现在必须在 TableElement 上方渲染

// Before
export const TableElement = withRef<typeof PlateElement>(
  ({ className, children, ...props }, ref) => {
    // ...
  }
);
 
// After
export const TableElement = withHOC(
  TableProvider,
  withRef<typeof PlateElement>(({ className, children, ...props }, ref) => {
    // ...
  })
);

January 2 #7.1

• dropdown-menu - 修复：在 DropdownMenuContent 中不排除 className

December 2023 #6

December 27 #6.3

• 从依赖中移除 clsx：class-variance-utility 已经将其导出为 cx

• 新依赖：@udecode/cn

• 移除 @/lib/utils.ts 并使用 @udecode/cn 代替。将所有从 @/lib/utils 导入的代码替换为 @udecode/cn

• 从 @udecode/cn 导入 withProps 而不是 @udecode/plate-common

  `

• 所有使用 forwardRef 的组件现在使用 withRef。withProps、withCn 和 withVariants 也被使用以减少样板代码。

• 将 withCn 添加到 ESLint settings.tailwindcss.callees 和 classAttributes 在 IDE 设置中

// 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'
);

12月25日 #6.2

• dialog
• Plate 28，包括一些优化：changes
  • combobox
  • insert-dropdown-menu
  • media-popover
  • mode-dropdown-menu
  • more-dropdown-menu
  • table-dropdown-menu
  • table-element
  • turn-into-dropdown-menu

12月10日 #6.1

• image-element：用 withHOC(ResizableProvide, ...) 包装组件
• media-embed-element：用 withHOC(ResizableProvide, ...) 包装组件

2023年11月 #5

11月28日 #5.1

• table-element
  • feat: 合并支持 (plate 26)
• table-cell-element
  • feat: 合并支持 (plate 26)
• comments-popover
  • comment-more-dropdown
    • fix: 编辑和删除评论
  • comment-value
    • fix: 移除 useCommentValue (plate 25 中已弃用)
• toolbar
  • fix: 按下状态

2023年9月 #4

9月18日 #4.4

• editor: 新组件 🎉 查看 Editor
• fixed-toolbar-buttons, floating-toolbar-buttons, mode-dropdown-menu:
  • plate 24: 将 usePlateReadOnly 重命名为 useEditorReadOnly
• code-block-element: code-block-element.css 中的更改

9月15日 #4.3

• table-element
  • 修复：在表中输入应保持浮动工具栏打开
• floating-toolbar:
  • 修复：导入
• comment-leaf, link-element
  • 功能：使用主要颜色
• 块选择：
  • 向 body 添加此类：'[&_.slate-selected]:!bg-primary/20 [&_.slate-selection-area]:border [&_.slate-selection-area]:border-primary [&_.slate-selection-area]:bg-primary/10'

9月12日 #4.2

• button：添加 whitespace-nowrap
• popover：打印时隐藏
• caption：打印时隐藏占位符
• highlight-leaf：高亮颜色现在基于主要颜色

9月2日 #4.1

• link-floating-toolbar
  • 修复：props 类型
• media-embed-element
  • 修复：使用 align 选项
• caption
  • 修复：style 属性

2023年8月 #3

8月19日 #3.4

• floating-toolbar - 更改：
  • 功能：支持 ref
  • 重构：使用 useFloatingToolbarState，控制 floatingOptions 默认值
  • 修复：添加 fallbackPlacements 以保持浮动在视口内
  • 破坏性更改：移除以下 props：portalElement、floatingOptions、ignoreReadOnly、hideToolbar
  • 功能：state prop
• link-floating-toolbar - 更改：
  • 重构：控制 floatingOptions 默认值
  • 修复：添加 fallbackPlacements 以保持浮动在视口内

8月9日 #3.3

• mention-element - 功能：支持粗体、斜体、下划线

8月3日 #3.2

• table-cell-element - 功能：支持表格单元格背景样式

8月2日 #3.1

• image-element：重构：使用 mediaResizeHandleVariants
• media-embed-element：重构：使用 mediaResizeHandleVariants
• resizable - 更改：
  • 重构
  • 功能：mediaResizeHandleVariants
• table-cell-element：
  • 修复：可调整大小
  • 修复：Firefox 中的表格选择

2023年7月 #2

7月27日 #2.2

• caption - 新组件
• image-element：
  • 重构：状态
  • 新注册依赖：caption、resizable
• media-embed-element 现在完全无头：
  • 新依赖：react-lite-youtube-embed、react-tweet 以减小包大小
  • 新注册依赖：caption、resizable
• media-popover - 修复：弹出框关闭
• resizable - 新组件
• table-element - 修复：弹出框关闭

7月17日 #2.1

• comments-popover - 修复：新评论时弹出框不打开
• comment-toolbar-button - 功能：当 myUserId 为 null 时隐藏
• excalidraw-element - 修复：拼写错误

发布 #1

Plate 无头组件现已可用：

• 手动安装
• 主题
• CLI