diff --git a/apps/www/content/docs/cn/api/core/plate-plugin.mdx b/apps/www/content/docs/cn/api/core/plate-plugin.mdx
index 9fdef92824..973a968a86 100644
--- a/apps/www/content/docs/cn/api/core/plate-plugin.mdx
+++ b/apps/www/content/docs/cn/api/core/plate-plugin.mdx
@@ -171,7 +171,7 @@ HTML React 序列化器配置。
在 `Editable` 组件上方但在 `Slate` 包装器内渲染组件。
-
+
创建一个函数,该函数为所有其他插件的 `node` React节点生成父节点。
@@ -183,7 +183,7 @@ HTML React 序列化器配置。
在 `Editable` 组件前渲染组件。
-
+
创建一个函数,该函数为所有其他插件的 `node` React节点和其`children`React节点之间生成一个React节点。
diff --git a/apps/www/content/docs/en/api/core/plate-plugin.mdx b/apps/www/content/docs/en/api/core/plate-plugin.mdx
index 836fe1003b..cc7c234c34 100644
--- a/apps/www/content/docs/en/api/core/plate-plugin.mdx
+++ b/apps/www/content/docs/en/api/core/plate-plugin.mdx
@@ -150,7 +150,7 @@ Defines how the plugin renders components.
Component rendered above the Editable component but inside the Slate wrapper.
-
+
Create a function that generates a parent React node for all other plugins' node components.
@@ -162,7 +162,7 @@ Renders a component after the Editable component.
Renders a component before the Editable component.
-
+
Create a function that generates a React node below all other plugins' node React node, but above their children.
diff --git a/apps/www/src/registry/default/plate-ui/draggable.tsx b/apps/www/src/registry/default/plate-ui/draggable.tsx
index 62148c3186..6093d19d3b 100644
--- a/apps/www/src/registry/default/plate-ui/draggable.tsx
+++ b/apps/www/src/registry/default/plate-ui/draggable.tsx
@@ -6,8 +6,8 @@ import React, { useMemo } from 'react';
import { cn, withRef } from '@udecode/cn';
import { isType } from '@udecode/plate';
import {
- type NodeWrapperFunctionCreator,
type PlateRenderElementProps,
+ type RenderNodeWrapper,
MemoizedChildren,
ParagraphPlugin,
useEditorPlugin,
@@ -46,7 +46,7 @@ const UNDRAGGABLE_KEYS = [
TableCellPlugin.key,
];
-export const DraggableAboveNodes: NodeWrapperFunctionCreator = (props) => {
+export const DraggableAboveNodes: RenderNodeWrapper = (props) => {
const { editor, element, path } = props;
const readOnly = useReadOnly();
diff --git a/packages/ai/src/react/copilot/renderCopilotBelowNodes.tsx b/packages/ai/src/react/copilot/renderCopilotBelowNodes.tsx
index d1303c38da..905769301c 100644
--- a/packages/ai/src/react/copilot/renderCopilotBelowNodes.tsx
+++ b/packages/ai/src/react/copilot/renderCopilotBelowNodes.tsx
@@ -3,7 +3,7 @@
import React from 'react';
import {
- type NodeWrapperFunctionCreatorProps,
+ type RenderNodeWrapperProps,
getEditorPlugin,
} from '@udecode/plate/react';
@@ -11,7 +11,7 @@ import type { CopilotPluginConfig } from './CopilotPlugin';
export const renderCopilotBelowNodes = ({
editor,
-}: NodeWrapperFunctionCreatorProps) => {
+}: RenderNodeWrapperProps) => {
const copilot = getEditorPlugin(editor, {
key: 'copilot',
});
diff --git a/packages/core/src/lib/plugin/SlatePlugin.ts b/packages/core/src/lib/plugin/SlatePlugin.ts
index ae88a85502..4bbb261d49 100644
--- a/packages/core/src/lib/plugin/SlatePlugin.ts
+++ b/packages/core/src/lib/plugin/SlatePlugin.ts
@@ -70,16 +70,15 @@ export type SlatePlugin =
};
render: Nullable<{
/**
- * When other plugins' `node` components are rendered, this creator
- * function can return an optional wrapper function that turns a
- * `node`'s props to a wrapper React node as its parent. Useful for
- * wrapping or decorating nodes with additional UI elements.
+ * When other plugins' `node` components are rendered, this function can
+ * return an optional wrapper function that turns a `node`'s props to a
+ * wrapper React node as its parent. Useful for wrapping or decorating
+ * nodes with additional UI elements.
*
- * NOTE: The creator function can run React hooks. NOTE: Do not run
- * React hooks in the wrapper function. It is not equivalent to a React
- * component.
+ * NOTE: The function can run React hooks. NOTE: Do not run React hooks
+ * in the wrapper function. It is not equivalent to a React component.
*/
- aboveNodes?: NodeStaticWrapperFunctionCreator>;
+ aboveNodes?: RenderStaticNodeWrapper>;
/**
* Renders a component after the `Editable` component. This is the last
@@ -91,17 +90,16 @@ export type SlatePlugin =
beforeEditable?: () => React.ReactElement | null;
/**
- * When other plugins' `node` components are rendered, this creator
- * function can return an optional wrapper function that turns a
- * `node`'s props to a wrapper React node. The wrapper node is the
- * `node`'s child and its original children's parent. Useful for
- * wrapping or decorating nodes with additional UI elements.
+ * When other plugins' `node` components are rendered, this function can
+ * return an optional wrapper function that turns a `node`'s props to a
+ * wrapper React node. The wrapper node is the `node`'s child and its
+ * original children's parent. Useful for wrapping or decorating nodes
+ * with additional UI elements.
*
- * NOTE: The creator function can run React hooks. NOTE: Do not run
- * React hooks in the wrapper function. It is not equivalent to a React
- * component.
+ * NOTE: The function can run React hooks. NOTE: Do not run React hooks
+ * in the wrapper function. It is not equivalent to a React component.
*/
- belowNodes?: NodeStaticWrapperFunctionCreator>;
+ belowNodes?: RenderStaticNodeWrapper>;
node?: React.FC;
}>;
@@ -526,17 +524,33 @@ export type NodeStaticProps =
) => AnyObject | undefined)
| AnyObject;
-export type NodeStaticWrapperFunctionCreator<
- C extends AnyPluginConfig = PluginConfig,
-> = (
- props: NodeStaticWrapperFunctionCreatorProps
-) => NodeStaticWrapperFunction;
+export type RenderStaticNodeWrapper =
+ (props: RenderStaticNodeWrapperProps) => RenderStaticNodeWrapperFunction;
-export type NodeStaticWrapperFunction =
+export type RenderStaticNodeWrapperFunction =
| ((hocProps: SlateRenderElementProps) => React.ReactNode)
| undefined;
-export interface NodeStaticWrapperFunctionCreatorProps<
+export interface RenderStaticNodeWrapperProps<
+ C extends AnyPluginConfig = PluginConfig,
+> extends SlateRenderElementProps {
+ key: string;
+}
+
+/** @deprecated Use {@link RenderStaticNodeWrapper} instead. */
+export type NodeStaticWrapperComponent<
+ C extends AnyPluginConfig = PluginConfig,
+> = (
+ props: NodeStaticWrapperComponentProps
+) => NodeStaticWrapperComponentReturnType;
+
+/** @deprecated Use {@link RenderStaticNodeWrapperFunction} instead. */
+export type NodeStaticWrapperComponentReturnType<
+ C extends AnyPluginConfig = PluginConfig,
+> = React.FC> | undefined;
+
+/** @deprecated Use {@link RenderStaticNodeWrapperProps} instead. */
+export interface NodeStaticWrapperComponentProps<
C extends AnyPluginConfig = PluginConfig,
> extends SlateRenderElementProps {
key: string;
diff --git a/packages/core/src/react/plugin/PlatePlugin.ts b/packages/core/src/react/plugin/PlatePlugin.ts
index 6941f5ca8e..eb230eb1fd 100644
--- a/packages/core/src/react/plugin/PlatePlugin.ts
+++ b/packages/core/src/react/plugin/PlatePlugin.ts
@@ -127,16 +127,15 @@ export type PlatePlugin =
render: Nullable<{
/**
- * When other plugins' `node` components are rendered, this creator
- * function can return an optional wrapper function that turns a
- * `node`'s props to a wrapper React node as its parent. Useful for
- * wrapping or decorating nodes with additional UI elements.
+ * When other plugins' `node` components are rendered, this function can
+ * return an optional wrapper function that turns a `node`'s props to a
+ * wrapper React node as its parent. Useful for wrapping or decorating
+ * nodes with additional UI elements.
*
- * NOTE: The creator function can run React hooks. NOTE: Do not run
- * React hooks in the wrapper function. It is not equivalent to a React
- * component.
+ * NOTE: The function can run React hooks. NOTE: Do not run React hooks
+ * in the wrapper function. It is not equivalent to a React component.
*/
- aboveNodes?: NodeWrapperFunctionCreator>;
+ aboveNodes?: RenderNodeWrapper>;
/**
* Renders a component after the `Editable` component. This is the last
@@ -148,17 +147,16 @@ export type PlatePlugin =
beforeEditable?: EditableSiblingComponent;
/**
- * When other plugins' `node` components are rendered, this creator
- * function can return an optional wrapper function that turns a
- * `node`'s props to a wrapper React node. The wrapper node is the
- * `node`'s child and its original children's parent. Useful for
- * wrapping or decorating nodes with additional UI elements.
+ * When other plugins' `node` components are rendered, this function can
+ * return an optional wrapper function that turns a `node`'s props to a
+ * wrapper React node. The wrapper node is the `node`'s child and its
+ * original children's parent. Useful for wrapping or decorating nodes
+ * with additional UI elements.
*
- * NOTE: The creator function can run React hooks. NOTE: Do not run
- * React hooks in the wrapper function. It is not equivalent to a React
- * component.
+ * NOTE: The function can run React hooks. NOTE: Do not run React hooks
+ * in the wrapper function. It is not equivalent to a React component.
*/
- belowNodes?: NodeWrapperFunctionCreator>;
+ belowNodes?: RenderNodeWrapper>;
/** @see {@link NodeComponent} */
node?: NodeComponent;
@@ -739,19 +737,36 @@ export type EditableSiblingComponent = (
editableProps: EditableProps
) => React.ReactElement | null;
-export interface NodeWrapperFunctionCreatorProps<
+export interface RenderNodeWrapperProps<
C extends AnyPluginConfig = PluginConfig,
> extends PlateRenderElementProps {
key: string;
}
-export type NodeWrapperFunction =
+export type RenderNodeWrapperFunction =
| ((elementProps: PlateRenderElementProps) => React.ReactNode)
| undefined;
-export type NodeWrapperFunctionCreator<
+export type RenderNodeWrapper = (
+ props: RenderNodeWrapperProps
+) => RenderNodeWrapperFunction;
+
+/** @deprecated Use {@link RenderNodeWrapperProps} instead. */
+export interface NodeWrapperComponentProps<
C extends AnyPluginConfig = PluginConfig,
-> = (props: NodeWrapperFunctionCreatorProps) => NodeWrapperFunction;
+> extends PlateRenderElementProps {
+ key: string;
+}
+
+/** @deprecated Use {@link RenderNodeWrapperFunction} instead. */
+export type NodeWrapperComponentReturnType<
+ C extends AnyPluginConfig = PluginConfig,
+> = React.FC> | undefined;
+
+/** @deprecated Use {@link RenderNodeWrapper} instead. */
+export type NodeWrapperComponent = (
+ props: NodeWrapperComponentProps
+) => NodeWrapperComponentReturnType;
/**
* Function called whenever a change occurs in the editor. Return `false` to
diff --git a/packages/indent-list/src/lib/renderIndentListBelowNodes.tsx b/packages/indent-list/src/lib/renderIndentListBelowNodes.tsx
index a6437b0117..c6ed53d202 100644
--- a/packages/indent-list/src/lib/renderIndentListBelowNodes.tsx
+++ b/packages/indent-list/src/lib/renderIndentListBelowNodes.tsx
@@ -1,9 +1,9 @@
import React from 'react';
import type {
- NodeStaticWrapperFunction,
- NodeStaticWrapperFunctionCreator,
- NodeStaticWrapperFunctionCreatorProps,
+ RenderStaticNodeWrapper,
+ RenderStaticNodeWrapperFunction,
+ RenderStaticNodeWrapperProps,
} from '@udecode/plate';
import { clsx } from 'clsx';
@@ -15,9 +15,9 @@ import {
} from '../lib';
import { ULIST_STYLE_TYPES } from '../lib/types';
-export const renderIndentListBelowNodes: NodeStaticWrapperFunctionCreator = (
- injectProps: NodeStaticWrapperFunctionCreatorProps
-): NodeStaticWrapperFunction => {
+export const renderIndentListBelowNodes: RenderStaticNodeWrapper = (
+ injectProps: RenderStaticNodeWrapperProps
+): RenderStaticNodeWrapperFunction => {
const { element } = injectProps;
const listStyleType = element[BaseIndentListPlugin.key] as string;
diff --git a/packages/toggle/src/react/renderToggleAboveNodes.tsx b/packages/toggle/src/react/renderToggleAboveNodes.tsx
index 454575e0e7..48e4cde35e 100644
--- a/packages/toggle/src/react/renderToggleAboveNodes.tsx
+++ b/packages/toggle/src/react/renderToggleAboveNodes.tsx
@@ -1,16 +1,15 @@
import React from 'react';
import type {
- NodeWrapperFunction,
- NodeWrapperFunctionCreator,
+ RenderNodeWrapper,
+ RenderNodeWrapperFunction,
} from '@udecode/plate/react';
import { useIsVisible } from './toggleIndexAtom';
-export const renderToggleAboveNodes: NodeWrapperFunctionCreator = () =>
- ToggleAboveNodes;
+export const renderToggleAboveNodes: RenderNodeWrapper = () => ToggleAboveNodes;
-const ToggleAboveNodes: NodeWrapperFunction = ({ children, element }) => {
+const ToggleAboveNodes: RenderNodeWrapperFunction = ({ children, element }) => {
const isVisible = useIsVisible(element.id as string);
if (isVisible) return children;