What would be a good FormMessage implementation strategy for Rich Texts?

[codesfromshad]

First of all, shadcn-ui is just amazing. However, I am a bit confuzzled as I am failing to come up with a good FormMessage implementation strategy. I am using react-hook-form and next-intl, as well as zod in my project. For example, in my validation.ts file I have this set-up:

// Check if the password contains the minimum special characters
if (!satisfiesSpecialCharCond) {
  ctx.addIssue({
    path: ["password"],
    message: t("special_char_condition", {
      minimumSpecialCharNumber 1
    }),
    code: "custom"
  });
}

t() is the function that gets passed in validation.ts and it takes the translation key (refer to this). However, message in ctx.addIssue can be string | undefined. Unfortunately, it cannot take string | React.ReactElement like <ErrorMessage /> component of react-hook-form. Any idea on how I can pass React.ReactElement so t.rich() can also work?

[codesfromshad]

I think I just poopified shadcn-ui with this:

const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField();
  const body = error && !children
    ? DOMPurify.sanitize(String(error?.message))
      .replace(/`([^`]+)`/g, "<kbd>$1</kbd>")
    : children;

  if (!body) {
    return null;
  }

  if (children) {
    return (
      <p
        ref={ref}
        id={formMessageId}
        className={cn(
          "text-[0.8rem] font-medium text-destructive",
          className
        )}
        {...props}
      >
        {children}
      </p>
    );
  }

  return (
    <p
      ref={ref}
      id={formMessageId}
      className={cn(
        "[&_kbd]:rounded [&_kbd]:border [&_kbd]:border-border [&_kbd]:bg-muted [&_kbd]:px-1",
        "text-[0.8rem] font-medium text-destructive",
        className
      )}
      {...props}
      dangerouslySetInnerHTML={{ __html: body as string | TrustedHTML }}
    />
  );
});
FormMessage.displayName = "FormMessage";

[codesfromshad]

@shadcn you might want to take a look. 🙏