Function Markdown

packages/shared/src/components/Markdown.tsx:60–200

({
  className,
  content,
  appendTooltipTo,
}: MarkdownProps)

}

export default function Markdown({
  className,
  content,
  appendTooltipTo,
}: 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');
    });
  });

  const onHoverHandler: MouseEventHandler<HTMLDivElement> = useCallback(
    (e) => {
      const element = e.target;

      if (!isMentionLink(element)) {
        if (userId) {
          clearUser();
        }
        return;
      }

      const { mentionId } = element.dataset;

      if (!mentionId) {
        return;
      }

      cancelUserClearing();
      setOffset(getTooltipOffset(element));
      setUserId(mentionId);