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;