Function HighlightedJson

app/src/components/nodeEntries/FormattedMessage.tsx:57–84

(props: { json: string; fnLabel?: string })

};

const HighlightedJson = (props: { json: string; fnLabel?: string }) => {
  let formattedJson = props.json;

  try {
    formattedJson = JSON.stringify(JSON.parse(props.json), null, 2);
  } catch (e) {}

  return (
    <VStack w="full" alignItems="flex-start" bgColor="gray.50" borderRadius={4}>
      <SyntaxHighlighter
        customStyle={{
          overflowX: "unset",
          width: "100%",
          flex: 1,
          backgroundColor: "transparent",
          fontSize: 14,
        }}
        language="javascript"
        lineProps={{
          style: { wordBreak: "break-all", whiteSpace: "pre-wrap" },
        }}
        wrapLines
      >
        {props.fnLabel ? `${props.fnLabel}(${formattedJson})` : formattedJson}
      </SyntaxHighlighter>
    </VStack>
  );
};

export default FormattedMessage;