waveterm/frontend/app/element/markdown.tsx

168 lines
5.9 KiB
TypeScript
Raw Normal View History

2024-05-14 18:37:41 +02:00
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
2024-07-03 23:32:55 +02:00
import { CopyButton } from "@/app/element/copybutton";
2024-05-28 21:12:28 +02:00
import { clsx } from "clsx";
import React, { CSSProperties, useCallback, useMemo, useRef } from "react";
2024-05-14 18:37:41 +02:00
import ReactMarkdown from "react-markdown";
2024-07-03 23:32:55 +02:00
import rehypeRaw from "rehype-raw";
2024-05-14 18:37:41 +02:00
import remarkGfm from "remark-gfm";
import { useAtomValueSafe } from "@/util/util";
import { Atom } from "jotai";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
import RemarkFlexibleToc, { TocItem } from "remark-flexible-toc";
import { useHeight } from "../hook/useHeight";
2024-05-14 18:37:41 +02:00
import "./markdown.less";
2024-07-03 23:32:55 +02:00
const Link = ({ href, children }: { href: string; children: React.ReactNode }) => {
const newUrl = "https://extern?" + encodeURIComponent(href);
2024-05-14 18:37:41 +02:00
return (
2024-07-03 23:32:55 +02:00
<a href={newUrl} target="_blank" rel="noopener">
{children}
2024-05-14 18:37:41 +02:00
</a>
);
2024-07-03 23:32:55 +02:00
};
const Heading = ({ children, hnum }: { children: React.ReactNode; hnum: number }) => {
return <div className={clsx("heading", `is-${hnum}`)}>{children}</div>;
2024-07-03 23:32:55 +02:00
};
const Code = ({ children }: { children: React.ReactNode }) => {
return <code>{children}</code>;
};
type CodeBlockProps = {
children: React.ReactNode;
onClickExecute?: (cmd: string) => void;
};
const CodeBlock = ({ children, onClickExecute }: CodeBlockProps) => {
const getTextContent = (children: any): string => {
if (typeof children === "string") {
return children;
} else if (Array.isArray(children)) {
return children.map(getTextContent).join("");
} else if (children.props && children.props.children) {
return getTextContent(children.props.children);
}
return "";
};
const handleCopy = async (e: React.MouseEvent) => {
let textToCopy = getTextContent(children);
textToCopy = textToCopy.replace(/\n$/, ""); // remove trailing newline
await navigator.clipboard.writeText(textToCopy);
};
const handleExecute = (e: React.MouseEvent) => {
let textToCopy = getTextContent(children);
textToCopy = textToCopy.replace(/\n$/, ""); // remove trailing newline
if (onClickExecute) {
onClickExecute(textToCopy);
return;
}
2024-05-14 18:37:41 +02:00
};
2024-07-03 23:32:55 +02:00
return (
<pre className="codeblock">
{children}
<div className="codeblock-actions">
<CopyButton className="copy-button" onClick={handleCopy} title="Copy" />
{onClickExecute && <i className="fa-regular fa-square-terminal" onClick={handleExecute}></i>}
</div>
</pre>
);
};
type MarkdownProps = {
text?: string;
textAtom?: Atom<string> | Atom<Promise<string>>;
showTocAtom?: Atom<boolean>;
2024-07-03 23:32:55 +02:00
style?: React.CSSProperties;
className?: string;
onClickExecute?: (cmd: string) => void;
};
const Markdown = ({ text, textAtom, showTocAtom, style, className, onClickExecute }: MarkdownProps) => {
const textAtomValue = useAtomValueSafe(textAtom);
const tocRef = useRef<TocItem[]>([]);
const showToc = useAtomValueSafe(showTocAtom) ?? false;
const contentsRef = useRef<HTMLDivElement>(null);
const contentsHeight = useHeight(contentsRef, 200);
const halfContentsHeight = useMemo(() => {
return `${contentsHeight / 2}px`;
}, [contentsHeight]);
const onTocClick = useCallback((data: string) => {
if (contentsRef.current) {
const headings = contentsRef.current.getElementsByClassName("heading");
for (const heading of headings) {
if (heading.textContent === data) {
heading.scrollIntoView({ inline: "nearest", block: "end" });
}
}
}
}, []);
2024-07-03 23:32:55 +02:00
const markdownComponents = {
a: Link,
h1: (props: any) => <Heading {...props} hnum={1} />,
h2: (props: any) => <Heading {...props} hnum={2} />,
h3: (props: any) => <Heading {...props} hnum={3} />,
h4: (props: any) => <Heading {...props} hnum={4} />,
h5: (props: any) => <Heading {...props} hnum={5} />,
h6: (props: any) => <Heading {...props} hnum={6} />,
2024-07-03 23:32:55 +02:00
code: Code,
pre: (props: any) => <CodeBlock {...props} onClickExecute={onClickExecute} />,
};
const toc = useMemo(() => {
if (showToc && tocRef.current.length > 0) {
return tocRef.current.map((item) => {
return (
<a
key={item.href}
className="toc-item"
style={{ "--indent-factor": item.depth } as CSSProperties}
onClick={() => onTocClick(item.value)}
>
{item.value}
</a>
);
});
}
}, [showToc, tocRef]);
text = textAtomValue ?? text;
2024-05-14 18:37:41 +02:00
return (
<div className={clsx("markdown", className)} style={style} ref={contentsRef}>
<OverlayScrollbarsComponent
className="content"
style={{ "--half-contents-height": halfContentsHeight } as CSSProperties}
options={{ scrollbars: { autoHide: "leave" } }}
>
<ReactMarkdown
remarkPlugins={[remarkGfm, [RemarkFlexibleToc, { tocRef: tocRef.current }]]}
rehypePlugins={[rehypeRaw]}
components={markdownComponents}
>
{text}
</ReactMarkdown>
</OverlayScrollbarsComponent>
{showToc && (
<OverlayScrollbarsComponent className="toc" options={{ scrollbars: { autoHide: "leave" } }}>
<div className="toc-inner">
<h4>Table of Contents</h4>
{toc}
</div>
</OverlayScrollbarsComponent>
)}
2024-05-14 18:37:41 +02:00
</div>
);
2024-07-03 23:32:55 +02:00
};
2024-05-14 18:37:41 +02:00
export { Markdown };