Function Markdown

packages/shared/src/components/Markdown.tsx:61–219

({
  className,
  content,
  appendTooltipTo,
  openLinksInNewTab = false,
}: MarkdownProps)

}

export default function Markdown({
  className,
  content,
  appendTooltipTo,
  openLinksInNewTab = false,
}: MarkdownProps): ReactElement {
  const purify = useDomPurify();
  const { openModal } = useLazyModal();
  const { isCompanion } = useRequestProtocol();
  const containerRef = useRef<HTMLDivElement>(null);
  const [userId, setUserId] = useState('');
  const [offset, setOffset] = useState<CaretOffset>([0, 0]);
  const [clearUser, cancelUserClearing] = useDebounceFn(
    () => setUserId(''),
    200,
  );
  const { data } = useQuery({
    queryKey: generateQueryKey(RequestKey.UserShortById, { id: userId }),
    queryFn: () => {
      return getUserShortInfo(userId);
    },
    enabled: !!userId,
  });

  // Add accessibility attributes to images after render
  useEffect(() => {
    const container = containerRef.current;
    if (!container) {
      return;
    }

    const images = container.querySelectorAll('img[src]');
    images.forEach((img) => {
      img.setAttribute('tabindex', '0');
      img.setAttribute('role', 'button');
      img.setAttribute('aria-label', 'Open image');
    });
  });

  useEffect(() => {
    if (!openLinksInNewTab) {
      return;
    }

    const container = containerRef.current;
    if (!container) {
      return;
    }

    const links = container.querySelectorAll('a[href]');
    links.forEach((link) => {
      link.setAttribute('target', '_blank');
      link.setAttribute('rel', 'noopener noreferrer');
    });
  });

  const onHoverHandler: MouseEventHandler<HTMLDivElement> = useCallback(
    (e) => {