尧图网页设计 
Plate 如何添加 Callout 高亮提示块并配置变体图标【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate在基于 Plate 的富文本编辑器中集成高亮提示块Callout时需要完成三件事把 Callout 插件装进编辑器、插入带variant属性的提示块、以及为提示块配置图标。本文基于 Callout 官方文档/(elements)/callout.mdx) 与platejs/callout包源码版本 53.0.0给出从安装到配置变体与图标的一条完整操作路径。前提你的项目已接入 Plateplatejs/callout的 peer 依赖要求platejs 53.0.0、react 18.0.0见 packages/callout/package.json。安装并注册插件文档给出两条注册路径按需选择其一。方式一使用CalloutKit最快CalloutKit包含预配置的CalloutPlugin和 Plate UI 组件CalloutElement。仓库中该 kit 的定义在 callout-kit.tsx内容即一行组合import { CalloutPlugin } from platejs/callout/react; import { CalloutElement } from /registry/ui/callout-node; export const CalloutKit [CalloutPlugin.withComponent(CalloutElement)];创建编辑器时把 kit 展开进pluginsimport { createPlateEditor } from platejs/react; import { CalloutKit } from /components/editor/plugins/callout-kit; const editor createPlateEditor({ plugins: [ // ...otherPlugins, ...CalloutKit, ], });方式二手动安装npm install platejs/callout然后把CalloutPlugin加入插件数组。文档同时提供了带自定义渲染组件的写法import { CalloutPlugin } from platejs/callout/react; import { createPlateEditor } from platejs/react; import { CalloutElement } from /components/ui/callout-node; const editor createPlateEditor({ plugins: [ // ...otherPlugins, CalloutPlugin.withComponent(CalloutElement), ], });withComponent的作用是指定渲染 callout 元素的具体组件不指定组件时插件只提供数据层能力提示块没有对应的可视化渲染。理解 variant 与 icon 两个属性Callout 元素的数据结构定义在文档的TCalloutElement类型中与 BaseCalloutPlugin.ts 配套使用interface TCalloutElement extends TElement { variant?: string; icon?: string; }两个要点variant是普通字符串插件本身没有限定固定的变体枚举。文档 Features 一节列出的 info, warning, error 只是示例变体具体某个 variant 呈现什么颜色与边框由你传给withComponent的组件样式决定。icon是要显示的图标或表情符号用于提示块左侧的图标位。用tf.insert.callout插入带 variant 的提示块CalloutPlugin通过BaseCalloutPlugin向编辑器扩展了插入命令BaseCalloutPlugin.ts 中的extendEditorTransforms注册了insert: { callout: bindFirst(insertCallout, editor) }。文档中该命令的选项为variant可选string要插入的提示块变体...InsertNodesOptions其余插入位置等选项。插入逻辑在 insertCallout.tseditor.tf.insertNodesTCalloutElement( { children: [{ text: }], icon: icon ?? localStorage.getItem(CALLOUT_STORAGE_KEY) ?? , type: editor.getType(KEYS.callout), variant, }, options as any );由此可以确认 icon 的取值优先级调用时显式传入的icon→ 上一次选择存进 localStorage键为plate-storage-callout的图标 → 默认。也就是说如果不做任何图标配置新插入的提示块会显示 。配置变体图标接入 Emoji 选择器为提示块换图标的能力由useCalloutEmojiPicker钩子提供仓库中的CalloutElement示例callout-node.tsx展示了接法const { emojiPickerState, isOpen, setIsOpen } useEmojiDropdownMenuState({ closeOnSelect: true, }); const { emojiToolbarDropdownProps, props: calloutProps } useCalloutEmojiPicker({ isOpen, setIsOpen });钩子内部useCalloutEmojiPicker.ts做了两件事emojiToolbarDropdownProps控制图标按钮上弹出层且setIsOpen在只读模式下会被拦截只读时无法打开选择器props.onSelectEmoji选中表情后执行editor.tf.setNodes({ icon }, { at: element })更新当前提示块的icon属性把该图标写入localStorage下次插入时作为默认值并关闭选择器。CalloutElement的最终结构是一个PlateElement容器内部左侧为图标按钮无图标时兜底显示props.element.icon || 右侧是提示块正文PlateElement className{cn(my-1 flex rounded-sm bg-muted p-4 pl-3, className)} {...props} div classNameflex w-full gap-2 rounded-md EmojiPopover {...emojiToolbarDropdownProps} control{Button.../Button} EmojiPicker {...emojiPickerState} {...calloutProps} / /EmojiPopover div classNamew-full{children}/div /div /PlateElement示例依赖platejs/emoji/reactuseEmojiDropdownMenuState、EmojiPicker如果你自己实现组件需要引入对应依赖并替换为自己的图标控件。结果验证文档页面顶部的callout-demo预览callout.mdx/(elements)/callout.mdx)就是按CalloutKit装配的可交互编辑器可对照以下现象验证接线是否正确通过编辑器命令或editor.tf.insert.callout({ variant: info })插入提示块后内容区出现一个带背景色的区块左侧为图标按钮、右侧为可编辑正文未指定图标时图标位显示 来自insertCallout的默认值与CalloutElement的兜底逻辑点击图标按钮打开表情选择器选中一个表情后图标立即变为所选表情、选择器自动关闭再插入一个新提示块其默认图标即为上次选择的表情localStorage 记忆。编辑行为与已知边界BaseCalloutPlugin在插件定义中固定了 callout 的编辑规则接入后无需额外配置也解释了编辑器中的默认行为见 BaseCalloutPlugin.ts在提示块内按 Enter 是块内换行lineBreak而不是跳出提示块空提示块按 Enter 会重置为普通文本reset空行行尾按 Enter 会删除空行并退出提示块deleteExit在提示块起始位置按 Backspace 会重置该块reset。需要注意的边界插件不内置任何 variant 到样式的映射variant的视觉效果完全取决于你的渲染组件如果你需要 default/info/warning/destructive/success 这类有限集合及对应配色可以在自己的组件里参照仓库内 callout-variants.ts 的做法自行实现该文件属于文档站自身的组件不是platejs/callout的导出内容。图标选择依赖浏览器 localStorage清缓存会退回默认 。【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Plate 如何添加 Callout 高亮提示块并配置变体图标？
Plate 如何添加 Callout 高亮提示块并配置变体图标【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate在基于 Plate 的富文本编辑器中集成高亮提示块Callout时需要完成三件事把 Callout 插件装进编辑器、插入带variant属性的提示块、以及为提示块配置图标。本文基于 Callout 官方文档/(elements)/callout.mdx) 与platejs/callout包源码版本 53.0.0给出从安装到配置变体与图标的一条完整操作路径。前提你的项目已接入 Plateplatejs/callout的 peer 依赖要求platejs 53.0.0、react 18.0.0见 packages/callout/package.json。安装并注册插件文档给出两条注册路径按需选择其一。方式一使用CalloutKit最快CalloutKit包含预配置的CalloutPlugin和 Plate UI 组件CalloutElement。仓库中该 kit 的定义在 callout-kit.tsx内容即一行组合import { CalloutPlugin } from platejs/callout/react; import { CalloutElement } from /registry/ui/callout-node; export const CalloutKit [CalloutPlugin.withComponent(CalloutElement)];创建编辑器时把 kit 展开进pluginsimport { createPlateEditor } from platejs/react; import { CalloutKit } from /components/editor/plugins/callout-kit; const editor createPlateEditor({ plugins: [ // ...otherPlugins, ...CalloutKit, ], });方式二手动安装npm install platejs/callout然后把CalloutPlugin加入插件数组。文档同时提供了带自定义渲染组件的写法import { CalloutPlugin } from platejs/callout/react; import { createPlateEditor } from platejs/react; import { CalloutElement } from /components/ui/callout-node; const editor createPlateEditor({ plugins: [ // ...otherPlugins, CalloutPlugin.withComponent(CalloutElement), ], });withComponent的作用是指定渲染 callout 元素的具体组件不指定组件时插件只提供数据层能力提示块没有对应的可视化渲染。理解 variant 与 icon 两个属性Callout 元素的数据结构定义在文档的TCalloutElement类型中与 BaseCalloutPlugin.ts 配套使用interface TCalloutElement extends TElement { variant?: string; icon?: string; }两个要点variant是普通字符串插件本身没有限定固定的变体枚举。文档 Features 一节列出的 info, warning, error 只是示例变体具体某个 variant 呈现什么颜色与边框由你传给withComponent的组件样式决定。icon是要显示的图标或表情符号用于提示块左侧的图标位。用tf.insert.callout插入带 variant 的提示块CalloutPlugin通过BaseCalloutPlugin向编辑器扩展了插入命令BaseCalloutPlugin.ts 中的extendEditorTransforms注册了insert: { callout: bindFirst(insertCallout, editor) }。文档中该命令的选项为variant可选string要插入的提示块变体...InsertNodesOptions其余插入位置等选项。插入逻辑在 insertCallout.tseditor.tf.insertNodesTCalloutElement( { children: [{ text: }], icon: icon ?? localStorage.getItem(CALLOUT_STORAGE_KEY) ?? , type: editor.getType(KEYS.callout), variant, }, options as any );由此可以确认 icon 的取值优先级调用时显式传入的icon→ 上一次选择存进 localStorage键为plate-storage-callout的图标 → 默认。也就是说如果不做任何图标配置新插入的提示块会显示 。配置变体图标接入 Emoji 选择器为提示块换图标的能力由useCalloutEmojiPicker钩子提供仓库中的CalloutElement示例callout-node.tsx展示了接法const { emojiPickerState, isOpen, setIsOpen } useEmojiDropdownMenuState({ closeOnSelect: true, }); const { emojiToolbarDropdownProps, props: calloutProps } useCalloutEmojiPicker({ isOpen, setIsOpen });钩子内部useCalloutEmojiPicker.ts做了两件事emojiToolbarDropdownProps控制图标按钮上弹出层且setIsOpen在只读模式下会被拦截只读时无法打开选择器props.onSelectEmoji选中表情后执行editor.tf.setNodes({ icon }, { at: element })更新当前提示块的icon属性把该图标写入localStorage下次插入时作为默认值并关闭选择器。CalloutElement的最终结构是一个PlateElement容器内部左侧为图标按钮无图标时兜底显示props.element.icon || 右侧是提示块正文PlateElement className{cn(my-1 flex rounded-sm bg-muted p-4 pl-3, className)} {...props} div classNameflex w-full gap-2 rounded-md EmojiPopover {...emojiToolbarDropdownProps} control{Button.../Button} EmojiPicker {...emojiPickerState} {...calloutProps} / /EmojiPopover div classNamew-full{children}/div /div /PlateElement示例依赖platejs/emoji/reactuseEmojiDropdownMenuState、EmojiPicker如果你自己实现组件需要引入对应依赖并替换为自己的图标控件。结果验证文档页面顶部的callout-demo预览callout.mdx/(elements)/callout.mdx)就是按CalloutKit装配的可交互编辑器可对照以下现象验证接线是否正确通过编辑器命令或editor.tf.insert.callout({ variant: info })插入提示块后内容区出现一个带背景色的区块左侧为图标按钮、右侧为可编辑正文未指定图标时图标位显示 来自insertCallout的默认值与CalloutElement的兜底逻辑点击图标按钮打开表情选择器选中一个表情后图标立即变为所选表情、选择器自动关闭再插入一个新提示块其默认图标即为上次选择的表情localStorage 记忆。编辑行为与已知边界BaseCalloutPlugin在插件定义中固定了 callout 的编辑规则接入后无需额外配置也解释了编辑器中的默认行为见 BaseCalloutPlugin.ts在提示块内按 Enter 是块内换行lineBreak而不是跳出提示块空提示块按 Enter 会重置为普通文本reset空行行尾按 Enter 会删除空行并退出提示块deleteExit在提示块起始位置按 Backspace 会重置该块reset。需要注意的边界插件不内置任何 variant 到样式的映射variant的视觉效果完全取决于你的渲染组件如果你需要 default/info/warning/destructive/success 这类有限集合及对应配色可以在自己的组件里参照仓库内 callout-variants.ts 的做法自行实现该文件属于文档站自身的组件不是platejs/callout的导出内容。图标选择依赖浏览器 localStorage清缓存会退回默认 。【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考