@mui/internal-docs-infra/CodeControllerContext/CodeControllerContext.mjs

MUI Infra - internal documentation creation tools.

'use client';

import * as React from 'react';

/**
 * Context for controlling the code shown within the CodeHighlighter component.
 *
 * To benefit from server or build-time rendering, the initial code should not be provided
 * to the controller context. It's recommended to only set `code` after the first `setCode`
 * event fires.
 */

export const CodeControllerContext = /*#__PURE__*/React.createContext(undefined);

/**
 * Hook to access controlled code state and setters. This is useful for custom
 * components that need to interact with the controlled code state. Use useCode
 * instead when you need access to the code data along with control functions.
 * Use this hook when you need direct access to the setCode and setSelection functions
 * from the CodeControllerContext. It's worth noting that useCode and useDemo handle
 * controlling selection in typical cases.
 *
 * @returns An object containing:
 *   - code: The current code being controlled
 *   - selection: The current selection state
 *   - setCode: Function to update the controlled code
 *   - setSelection: Function to update the selection
 *   - components: Override components for the preview
 */
if (process.env.NODE_ENV !== "production") CodeControllerContext.displayName = "CodeControllerContext";
export function useControlledCode() {
  const context = React.useContext(CodeControllerContext);
  return {
    code: context?.code,
    selection: context?.selection,
    setCode: context?.setCode,
    setSelection: context?.setSelection,
    components: context?.components,
    sourceEnhancers: context?.sourceEnhancers,
    onActivate: context?.onActivate
  };
}