chore(types): add tsdocs

packages/react/src/components/EdgeLabelRenderer/index.tsx

@@ -8,10 +8,9 @@ const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__e
 
 /**
  * Edges are SVG-based. If you want to render more complex labels you can use the
- *`<EdgeLabelRenderer />` component to access a div based renderer. This component
- *is a portal that renders the label in a `<div />` that is positioned on top of
- *the edges. You can see an example usage of the component in the [edge label renderer](/examples/edges/edge-label-renderer)
- *example.
+ * `<EdgeLabelRenderer />` component to access a div based renderer. This component
+ * is a portal that renders the label in a `<div />` that is positioned on top of
+ * the edges. You can see an example usage of the component in the [edge label renderer](/examples/edges/edge-label-renderer) example.
  * @public
  *
  * @example
@@ -43,9 +42,9 @@ const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__e
  *};
  *```
  *
- *@remarks The `<EdgeLabelRenderer />` has no pointer events by default. If you want to
- *add mouse interactions you need to set the style `pointerEvents: all` and add
- *the `nopan` class on the label or the element you want to interact with.
+ * @remarks The `<EdgeLabelRenderer />` has no pointer events by default. If you want to
+ * add mouse interactions you need to set the style `pointerEvents: all` and add
+ * the `nopan` class on the label or the element you want to interact with.
  */
 export function EdgeLabelRenderer({ children }: { children: ReactNode }) {
   const edgeLabelRenderer = useStore(selector);

packages/react/src/components/Edges/BaseEdge.tsx

@@ -6,8 +6,8 @@ import type { BaseEdgeProps } from '../../types';
 
 /**
  * The `<BaseEdge />` component gets used internally for all the edges. It can be
- *used inside a custom edge and handles the invisible helper edge and the edge label
- *for you.
+ * used inside a custom edge and handles the invisible helper edge and the edge label
+ * for you.
  *
  * @public
  * @example
@@ -27,9 +27,9 @@ import type { BaseEdgeProps } from '../../types';
  *```
  *
  * @remarks If you want to use an edge marker with the [`<BaseEdge />`](/api-reference/components/base-edge) component,
- *you can pass the `markerStart` or `markerEnd` props passed to your custom edge
- *through to the [`<BaseEdge />`](/api-reference/components/base-edge) component. You can see all the props
- *passed to a custom edge by looking at the [`EdgeProps`](/api-reference/types/edge-props) type.
+ * you can pass the `markerStart` or `markerEnd` props passed to your custom edge
+ * through to the [`<BaseEdge />`](/api-reference/components/base-edge) component.
+ * You can see all the props passed to a custom edge by looking at the [`EdgeProps`](/api-reference/types/edge-props) type.
  */
 export function BaseEdge({
   path,

packages/react/src/components/Edges/EdgeText.tsx

@@ -75,7 +75,7 @@ EdgeTextComponent.displayName = 'EdgeText';
 
 /**
  * You can use the `<EdgeText />` component as a helper component to display text
- *within your custom edges.
+ * within your custom edges.
  *
  *@public
  *

packages/react/src/components/Edges/SimpleBezierEdge.tsx

@@ -31,8 +31,8 @@ function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number]
 
 /**
  * The `getSimpleBezierPath` util returns everything you need to render a simple
- *bezier edge between two nodes.
- * @public 
+ * bezier edge between two nodes.
+ * @public
  */
 export function getSimpleBezierPath({
   sourceX,

packages/react/src/components/Handle/index.tsx

@@ -251,7 +251,7 @@ function HandleComponent(
 
 /**
  * The `<Handle />` component is used in your [custom nodes](/learn/customization/custom-nodes)
- *to define connection points.
+ * to define connection points.
  *
  *@public
  *

packages/react/src/components/Panel/index.tsx

@@ -6,9 +6,9 @@ import { useStore } from '../../hooks/useStore';
 import type { ReactFlowState } from '../../types';
 
 /**
- * The `<Panel />` component helps you position content above the viewport. It is
- *used internally by the [`<MiniMap />`](/api-reference/components/minimap) and [`<Controls />`](/api-reference/components/controls)
- *components.
+ * The `<Panel />` component helps you position content above the viewport.
+ * It is used internally by the [`<MiniMap />`](/api-reference/components/minimap)
+ * and [`<Controls />`](/api-reference/components/controls) components.
  *
  * @public
  *

packages/react/src/components/ReactFlowProvider/index.tsx

@@ -20,11 +20,10 @@ export type ReactFlowProviderProps = {
 };
 
 /**
- * The `<ReactFlowProvider />` component is a
- *[context provider](https://react.dev/learn/passing-data-deeply-with-context#) that
- *makes it possible to access a flow's internal state outside of the
- *[`<ReactFlow />`](/api-reference/react-flow) component. Many of the hooks we
- *provide rely on this component to work.
+ * The `<ReactFlowProvider />` component is a [context provider](https://react.dev/learn/passing-data-deeply-with-context#)
+ * that makes it possible to access a flow's internal state outside of the
+ * [`<ReactFlow />`](/api-reference/react-flow) component. Many of the hooks we
+ * provide rely on this component to work.
  * @public
  *
  * @example
@@ -50,9 +49,9 @@ export type ReactFlowProviderProps = {
  *```
  *
  * @remarks If you're using a router and want your flow's state to persist across routes,
- *it's vital that you place the `<ReactFlowProvider />` component _outside_ of
- *your router. If you have multiple flows on the same page you will need to use a separate
- *`<ReactFlowProvider />` for each flow.
+ * it's vital that you place the `<ReactFlowProvider />` component _outside_ of
+ * your router. If you have multiple flows on the same page you will need to use a separate
+ * `<ReactFlowProvider />` for each flow.
  */
 export function ReactFlowProvider({
   initialNodes: nodes,

packages/react/src/components/ViewportPortal/index.tsx

@@ -7,9 +7,10 @@ import type { ReactFlowState } from '../../types';
 const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__viewport-portal');
 
 /**
- * The `<ViewportPortal />` component can be used to add components to the same viewport of the flow where nodes and edges are rendered.
- *This is useful when you want to render your own components that are adhere to the same coordinate system as the nodes & edges and are also
- *affected by zooming and panning
+ * The `<ViewportPortal />` component can be used to add components to the same viewport
+ * of the flow where nodes and edges are rendered. This is useful when you want to render
+ * your own components that are adhere to the same coordinate system as the nodes & edges
+ * and are also affected by zooming and panning
  * @public
  * @example
  *