Function InspectorNode

packages/editor/src/ui/inspector/node.tsx:46–153

({ children }: InspectorNodeProps)

}

export function InspectorNode({ children }: InspectorNodeProps) {
  const { editor } = useCurrentEditor();
  const theming = useEmailTheming(editor);
  const { target } = useInspector();
  const documentColors = useDocumentColors(editor);

  const [localAttr, setLocalAttr] = React.useState<
    FocusedNode['nodeAttrs'] | null
  >(null);

  const focusedNode =
    typeof target === 'object' && target.nodeType !== 'body' ? target : null;

  React.useEffect(() => {
    if (focusedNode) {
      setLocalAttr(focusedNode.nodeAttrs);
    }
  }, [focusedNode]);

  if (!editor || !theming || !focusedNode) {
    return null;
  }

  const attrs = localAttr ?? focusedNode.nodeAttrs;
  const inlineStyles = inlineCssToJs(attrs.style || '');

  const css = stylesToCss(theming.styles, theming.theme);
  const themeDefaults = resolveThemeDefaults(
    focusedNode.nodeType,
    attrs as Record<string, unknown>,
    css,
  );

  const mergedStyles: Record<string, string | number | undefined> = {
    ...themeDefaults,
    ...inlineStyles,
  };

  const getStyle = (prop: KnownCssProperties) => {
    const value = mergedStyles[prop];
    // Strip the trailing CSS unit only for numeric properties so that
    // numeric inputs receive a parseable number. Non-numeric properties
    // (colors, gradients, etc.) are returned verbatim — stripping `%`/`px`
    // globally would corrupt values like `hsl(200, 50%, 40%)`.
    const isNumericProperty = Boolean(SUPPORTED_CSS_PROPERTIES[prop]?.unit);
    if (isNumericProperty && typeof value === 'string') {
      return value.replace(/(px|%)$/, '');
    }
    return value;
  };

  const setStyle = (prop: KnownCssProperties, value: string | number) => {
    customUpdateStyles(
      {
        editor,
        nodePos: focusedNode.nodePos,
        prop,
        newValue: value,