markdown.tsx 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import ReactMarkdown from "react-markdown";
  2. import "katex/dist/katex.min.css";
  3. import RemarkMath from "remark-math";
  4. import RemarkBreaks from "remark-breaks";
  5. import RehypeKatex from "rehype-katex";
  6. import RemarkGfm from "remark-gfm";
  7. import RehypeHighlight from "rehype-highlight";
  8. import { useRef, useState, RefObject, useEffect } from "react";
  9. import { copyToClipboard } from "../utils";
  10. import LoadingIcon from "../icons/three-dots.svg";
  11. import React from "react";
  12. export function PreCode(props: { children: any }) {
  13. const ref = useRef<HTMLPreElement>(null);
  14. return (
  15. <pre ref={ref}>
  16. <span
  17. className="copy-code-button"
  18. onClick={() => {
  19. if (ref.current) {
  20. const code = ref.current.innerText;
  21. copyToClipboard(code);
  22. }
  23. }}
  24. ></span>
  25. {props.children}
  26. </pre>
  27. );
  28. }
  29. function _MarkDownContent(props: { content: string }) {
  30. return (
  31. <ReactMarkdown
  32. remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
  33. rehypePlugins={[
  34. RehypeKatex,
  35. [
  36. RehypeHighlight,
  37. {
  38. detect: false,
  39. ignoreMissing: true,
  40. },
  41. ],
  42. ]}
  43. components={{
  44. pre: PreCode,
  45. }}
  46. linkTarget={"_blank"}
  47. >
  48. {props.content}
  49. </ReactMarkdown>
  50. );
  51. }
  52. export const MarkdownContent = React.memo(_MarkDownContent);
  53. export function Markdown(
  54. props: {
  55. content: string;
  56. loading?: boolean;
  57. fontSize?: number;
  58. parentRef: RefObject<HTMLDivElement>;
  59. } & React.DOMAttributes<HTMLDivElement>,
  60. ) {
  61. const mdRef = useRef<HTMLDivElement>(null);
  62. const renderedHeight = useRef(0);
  63. const inView = useRef(false);
  64. const parent = props.parentRef.current;
  65. const md = mdRef.current;
  66. const checkInView = () => {
  67. if (parent && md) {
  68. const parentBounds = parent.getBoundingClientRect();
  69. const twoScreenHeight = Math.max(500, parentBounds.height * 2);
  70. const mdBounds = md.getBoundingClientRect();
  71. const isInRange = (x: number) =>
  72. x <= parentBounds.bottom + twoScreenHeight &&
  73. x >= parentBounds.top - twoScreenHeight;
  74. inView.current = isInRange(mdBounds.top) || isInRange(mdBounds.bottom);
  75. }
  76. if (inView.current && md) {
  77. renderedHeight.current = Math.max(
  78. renderedHeight.current,
  79. md.getBoundingClientRect().height,
  80. );
  81. }
  82. };
  83. checkInView();
  84. return (
  85. <div
  86. className="markdown-body"
  87. style={{
  88. fontSize: `${props.fontSize ?? 14}px`,
  89. height:
  90. !inView.current && renderedHeight.current > 0
  91. ? renderedHeight.current
  92. : "auto",
  93. }}
  94. ref={mdRef}
  95. onContextMenu={props.onContextMenu}
  96. onDoubleClickCapture={props.onDoubleClickCapture}
  97. >
  98. {inView.current &&
  99. (props.loading ? (
  100. <LoadingIcon />
  101. ) : (
  102. <MarkdownContent content={props.content} />
  103. ))}
  104. </div>
  105. );
  106. }