github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/pages/repositories/repository/fileRenderers/useMarkdownProcessor.tsx (about)

     1  import {Fragment, createElement, useEffect, useState} from 'react'
     2  import * as prod from 'react/jsx-runtime'
     3  import remarkParse from 'remark-parse'
     4  import remarkRehype from 'remark-rehype'
     5  import remarkGfm from "remark-gfm";
     6  import remarkHtml from "remark-html";
     7  import rehypeRaw from "rehype-raw";
     8  import rehypeReact from 'rehype-react';
     9  import rehypeWrap from "rehype-wrap";
    10  import {unified} from "unified";
    11  import imageUriReplacer from "../../../../lib/remark-plugins/imageUriReplacer";
    12  import {CustomMarkdownCodeComponent} from "./CustomMarkdownRenderer";
    13  
    14  // @ts-expect-error: the react types are missing.
    15  const options: Options = {Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs, passNode: true};
    16  options.components = {
    17      code: CustomMarkdownCodeComponent,
    18  };
    19  
    20  /**
    21   * @param {string} text
    22   * @returns {JSX.Element}
    23   */
    24  export function useMarkdownProcessor(text: string, repoId: string, refId: string, path: string, presign: boolean): JSX.Element {
    25      const [content, setContent] = useState(createElement(Fragment));
    26  
    27      useEffect(() => {
    28          (async () => {
    29              const file = await unified()
    30                  .use(remarkParse)
    31                  .use(imageUriReplacer, {
    32                      repo: repoId,
    33                      ref: refId,
    34                      path,
    35                      presign,
    36                    })
    37                  .use(remarkGfm)
    38                  .use(remarkHtml)
    39                  .use(remarkRehype, { allowDangerousHtml: true })
    40                  .use(rehypeRaw)
    41                  .use(rehypeReact, options)
    42                  .use(rehypeWrap, {wrapper: "div.object-viewer-markdown"})
    43                  .process(text);
    44  
    45              setContent(file.result);
    46          })();
    47      }, [text]);
    48  
    49      return content;
    50  }