From 4c4d9902a738e5878ad7ca7141ca8aebc6cae6ed Mon Sep 17 00:00:00 2001 From: Yifei Date: Sun, 26 Jan 2025 09:12:20 +0800 Subject: [PATCH 1/2] refactor: update types and docs of aboveNodes and belowNodes --- .changeset/thin-pears-judge.md | 8 ++++ .../content/docs/cn/api/core/plate-plugin.mdx | 8 ++-- .../content/docs/en/api/core/plate-plugin.mdx | 8 ++-- .../registry/default/plate-ui/draggable.tsx | 4 +- .../react/copilot/renderCopilotBelowNodes.tsx | 6 +-- packages/core/src/lib/plugin/SlatePlugin.ts | 40 ++++++++++++------- packages/core/src/react/plugin/PlatePlugin.ts | 38 ++++++++++++------ .../src/lib/renderIndentListBelowNodes.tsx | 14 +++---- .../src/react/renderToggleAboveNodes.tsx | 11 ++--- 9 files changed, 83 insertions(+), 54 deletions(-) create mode 100644 .changeset/thin-pears-judge.md diff --git a/.changeset/thin-pears-judge.md b/.changeset/thin-pears-judge.md new file mode 100644 index 0000000000..fb86f0f4bf --- /dev/null +++ b/.changeset/thin-pears-judge.md @@ -0,0 +1,8 @@ +--- +'@udecode/plate-indent-list': patch +'@udecode/plate-toggle': patch +'@udecode/plate-core': patch +'@udecode/plate-ai': patch +--- + +Update types and docs of `aboveNodes` and `belowNodes` 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 e74d751ea6..9fdef92824 100644 --- a/apps/www/content/docs/cn/api/core/plate-plugin.mdx +++ b/apps/www/content/docs/cn/api/core/plate-plugin.mdx @@ -171,8 +171,8 @@ HTML React 序列化器配置。 在 `Editable` 组件上方但在 `Slate` 包装器内渲染组件。 - -在所有其他插件的 `node` 组件上方渲染组件。 + +创建一个函数，该函数为所有其他插件的 `node` React节点生成父节点。 在 `Slate` 包装器上方渲染组件。 @@ -183,8 +183,8 @@ HTML React 序列化器配置。 在 `Editable` 组件前渲染组件。 - -在所有其他插件的 `node` 组件下方但在其 `children` 上方渲染组件。 + +创建一个函数，该函数为所有其他插件的 `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 ce63a2b15b..836fe1003b 100644 --- a/apps/www/content/docs/en/api/core/plate-plugin.mdx +++ b/apps/www/content/docs/en/api/core/plate-plugin.mdx @@ -150,8 +150,8 @@ Defines how the plugin renders components. Component rendered above the Editable component but inside the Slate wrapper. - -Component rendered above all other plugins' node components. + +Create a function that generates a parent React node for all other plugins' node components. Component rendered above the Slate wrapper. @@ -162,8 +162,8 @@ Renders a component after the Editable component. Renders a component before the Editable component. - -Renders a component below all other plugins' node components, but above their children. + +Create a function that generates a React node below all other plugins' node React node, but above their children. Renders the node component. diff --git a/apps/www/src/registry/default/plate-ui/draggable.tsx b/apps/www/src/registry/default/plate-ui/draggable.tsx index 4705971cca..62148c3186 100644 --- a/apps/www/src/registry/default/plate-ui/draggable.tsx +++ b/apps/www/src/registry/default/plate-ui/draggable.tsx @@ -6,7 +6,7 @@ import React, { useMemo } from 'react'; import { cn, withRef } from '@udecode/cn'; import { isType } from '@udecode/plate'; import { - type NodeWrapperComponent, + type NodeWrapperFunctionCreator, type PlateRenderElementProps, MemoizedChildren, ParagraphPlugin, @@ -46,7 +46,7 @@ const UNDRAGGABLE_KEYS = [ TableCellPlugin.key, ]; -export const DraggableAboveNodes: NodeWrapperComponent = (props) => { +export const DraggableAboveNodes: NodeWrapperFunctionCreator = (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 afd9db3fa3..d1303c38da 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 NodeWrapperComponentProps, + type NodeWrapperFunctionCreatorProps, getEditorPlugin, } from '@udecode/plate/react'; @@ -11,7 +11,7 @@ import type { CopilotPluginConfig } from './CopilotPlugin'; export const renderCopilotBelowNodes = ({ editor, -}: NodeWrapperComponentProps) => { +}: NodeWrapperFunctionCreatorProps) => { const copilot = getEditorPlugin(editor, { key: 'copilot', }); @@ -20,7 +20,7 @@ export const renderCopilotBelowNodes = ({ if (!GhostText) return; - return function Component({ children }: { children: React.ReactNode }) { + return ({ children }: { children: React.ReactNode }) => { return ( {children} diff --git a/packages/core/src/lib/plugin/SlatePlugin.ts b/packages/core/src/lib/plugin/SlatePlugin.ts index b4c42b8ff8..ae88a85502 100644 --- a/packages/core/src/lib/plugin/SlatePlugin.ts +++ b/packages/core/src/lib/plugin/SlatePlugin.ts @@ -70,10 +70,16 @@ export type SlatePlugin = }; render: Nullable<{ /** - * Renders a component above all other plugins' `node` components. - * Useful for wrapping or decorating nodes with additional UI elements. + * 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. + * + * 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. */ - aboveNodes?: NodeStaticWrapperComponent>; + aboveNodes?: NodeStaticWrapperFunctionCreator>; /** * Renders a component after the `Editable` component. This is the last @@ -85,11 +91,17 @@ export type SlatePlugin = beforeEditable?: () => React.ReactElement | null; /** - * Renders a component below all other plugins' `node` components, but - * above their `children`. This allows for injecting content or UI - * elements within nodes but before their child content. + * 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. + * + * 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. */ - belowNodes?: NodeStaticWrapperComponent>; + belowNodes?: NodeStaticWrapperFunctionCreator>; node?: React.FC; }>; @@ -514,17 +526,17 @@ export type NodeStaticProps = ) => AnyObject | undefined) | AnyObject; -export type NodeStaticWrapperComponent< +export type NodeStaticWrapperFunctionCreator< C extends AnyPluginConfig = PluginConfig, > = ( - props: NodeStaticWrapperComponentProps -) => NodeStaticWrapperComponentReturnType; + props: NodeStaticWrapperFunctionCreatorProps +) => NodeStaticWrapperFunction; -export type NodeStaticWrapperComponentReturnType< - C extends AnyPluginConfig = PluginConfig, -> = React.FC> | undefined; +export type NodeStaticWrapperFunction = + | ((hocProps: SlateRenderElementProps) => React.ReactNode) + | undefined; -export interface NodeStaticWrapperComponentProps< +export interface NodeStaticWrapperFunctionCreatorProps< 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 685192e6fb..6941f5ca8e 100644 --- a/packages/core/src/react/plugin/PlatePlugin.ts +++ b/packages/core/src/react/plugin/PlatePlugin.ts @@ -127,10 +127,16 @@ export type PlatePlugin = render: Nullable<{ /** - * Renders a component above all other plugins' `node` components. - * Useful for wrapping or decorating nodes with additional UI elements. + * 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. + * + * 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. */ - aboveNodes?: NodeWrapperComponent>; + aboveNodes?: NodeWrapperFunctionCreator>; /** * Renders a component after the `Editable` component. This is the last @@ -142,11 +148,17 @@ export type PlatePlugin = beforeEditable?: EditableSiblingComponent; /** - * Renders a component below all other plugins' `node` components, but - * above their `children`. This allows for injecting content or UI - * elements within nodes but before their child content. + * 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. + * + * 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. */ - belowNodes?: NodeWrapperComponent>; + belowNodes?: NodeWrapperFunctionCreator>; /** @see {@link NodeComponent} */ node?: NodeComponent; @@ -727,19 +739,19 @@ export type EditableSiblingComponent = ( editableProps: EditableProps ) => React.ReactElement | null; -export interface NodeWrapperComponentProps< +export interface NodeWrapperFunctionCreatorProps< C extends AnyPluginConfig = PluginConfig, > extends PlateRenderElementProps { key: string; } -export type NodeWrapperComponentReturnType = - | React.FC +export type NodeWrapperFunction = + | ((elementProps: PlateRenderElementProps) => React.ReactNode) | undefined; -export type NodeWrapperComponent = ( - props: NodeWrapperComponentProps -) => NodeWrapperComponentReturnType; +export type NodeWrapperFunctionCreator< + C extends AnyPluginConfig = PluginConfig, +> = (props: NodeWrapperFunctionCreatorProps) => NodeWrapperFunction; /** * 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 1ac429cf95..a6437b0117 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 { - NodeStaticWrapperComponent, - NodeStaticWrapperComponentProps, - NodeStaticWrapperComponentReturnType, + NodeStaticWrapperFunction, + NodeStaticWrapperFunctionCreator, + NodeStaticWrapperFunctionCreatorProps, } from '@udecode/plate'; import { clsx } from 'clsx'; @@ -15,9 +15,9 @@ import { } from '../lib'; import { ULIST_STYLE_TYPES } from '../lib/types'; -export const renderIndentListBelowNodes: NodeStaticWrapperComponent = ( - injectProps: NodeStaticWrapperComponentProps -): NodeStaticWrapperComponentReturnType => { +export const renderIndentListBelowNodes: NodeStaticWrapperFunctionCreator = ( + injectProps: NodeStaticWrapperFunctionCreatorProps +): NodeStaticWrapperFunction => { const { element } = injectProps; const listStyleType = element[BaseIndentListPlugin.key] as string; @@ -32,7 +32,7 @@ export const renderIndentListBelowNodes: NodeStaticWrapperComponent = ( position: 'relative', }; - return function Component({ children, ...props }) { + return ({ children, ...props }) => { const { editor } = props; const { listStyleTypes = {} } = editor.getOptions(BaseIndentListPlugin); diff --git a/packages/toggle/src/react/renderToggleAboveNodes.tsx b/packages/toggle/src/react/renderToggleAboveNodes.tsx index f107efabf0..454575e0e7 100644 --- a/packages/toggle/src/react/renderToggleAboveNodes.tsx +++ b/packages/toggle/src/react/renderToggleAboveNodes.tsx @@ -1,19 +1,16 @@ import React from 'react'; import type { - NodeWrapperComponent, - NodeWrapperComponentReturnType, + NodeWrapperFunction, + NodeWrapperFunctionCreator, } from '@udecode/plate/react'; import { useIsVisible } from './toggleIndexAtom'; -export const renderToggleAboveNodes: NodeWrapperComponent = () => +export const renderToggleAboveNodes: NodeWrapperFunctionCreator = () => ToggleAboveNodes; -const ToggleAboveNodes: NodeWrapperComponentReturnType = ({ - children, - element, -}) => { +const ToggleAboveNodes: NodeWrapperFunction = ({ children, element }) => { const isVisible = useIsVisible(element.id as string); if (isVisible) return children; From 2740b76557ee555905aa61ea73676cd2923bf741 Mon Sep 17 00:00:00 2001 From: Yifei Date: Mon, 27 Jan 2025 13:33:02 +0800 Subject: [PATCH 2/2] refactor: rename api --- .../content/docs/cn/api/core/plate-plugin.mdx | 4 +- .../content/docs/en/api/core/plate-plugin.mdx | 4 +- .../registry/default/plate-ui/draggable.tsx | 4 +- .../react/copilot/renderCopilotBelowNodes.tsx | 4 +- packages/core/src/lib/plugin/SlatePlugin.ts | 62 ++++++++++++------- packages/core/src/react/plugin/PlatePlugin.ts | 57 ++++++++++------- .../src/lib/renderIndentListBelowNodes.tsx | 12 ++-- .../src/react/renderToggleAboveNodes.tsx | 9 ++- 8 files changed, 92 insertions(+), 64 deletions(-) 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;