waveterm/frontend/app/element/markdown.tsx
Evan Simkowitz 2e91ee843c
Switch from Less to Scss (#1335)
Less hasn't received an update in over a year and the parser is missing
some modern syntax like relative colors so this switches us to scss
2024-11-21 16:05:04 -08:00

368 lines
13 KiB
TypeScript

// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import { CopyButton } from "@/app/element/copybutton";
import { createContentBlockPlugin } from "@/app/element/markdown-contentblock-plugin";
import { MarkdownContentBlockType, transformBlocks } from "@/app/element/markdown-util";
import { RpcApi } from "@/app/store/wshclientapi";
import { TabRpcClient } from "@/app/store/wshrpcutil";
import { getWebServerEndpoint } from "@/util/endpoints";
import { isBlank, makeConnRoute, useAtomValueSafe } from "@/util/util";
import { clsx } from "clsx";
import { Atom } from "jotai";
import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
import { useEffect, useMemo, useRef, useState } from "react";
import ReactMarkdown, { Components } from "react-markdown";
import rehypeHighlight from "rehype-highlight";
import rehypeRaw from "rehype-raw";
import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
import rehypeSlug from "rehype-slug";
import RemarkFlexibleToc, { TocItem } from "remark-flexible-toc";
import remarkGfm from "remark-gfm";
import { openLink } from "../store/global";
import { IconButton } from "./iconbutton";
import "./markdown.scss";
const Link = ({
setFocusedHeading,
props,
}: {
props: React.AnchorHTMLAttributes<HTMLAnchorElement>;
setFocusedHeading: (href: string) => void;
}) => {
const onClick = (e: React.MouseEvent) => {
e.preventDefault();
if (props.href.startsWith("#")) {
setFocusedHeading(props.href);
} else {
openLink(props.href);
}
};
return (
<a href={props.href} onClick={onClick}>
{props.children}
</a>
);
};
const Heading = ({ props, hnum }: { props: React.HTMLAttributes<HTMLHeadingElement>; hnum: number }) => {
return (
<div id={props.id} className={clsx("heading", `is-${hnum}`)}>
{props.children}
</div>
);
};
const Code = ({ className, children }: { className: string; children: React.ReactNode }) => {
return <code className={className}>{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;
}
};
return (
<pre className="codeblock">
{children}
<div className="codeblock-actions">
<CopyButton onClick={handleCopy} title="Copy" />
{onClickExecute && (
<IconButton
decl={{
elemtype: "iconbutton",
icon: "regular@square-terminal",
click: handleExecute,
}}
/>
)}
</div>
</pre>
);
};
const MarkdownSource = (props: React.HTMLAttributes<HTMLSourceElement>) => {
return null;
};
interface WaveBlockProps {
blockkey: string;
blockmap: Map<string, MarkdownContentBlockType>;
}
const WaveBlock: React.FC<WaveBlockProps> = (props) => {
const { blockkey, blockmap } = props;
const block = blockmap.get(blockkey);
if (block == null) {
return null;
}
const sizeInKB = Math.round((block.content.length / 1024) * 10) / 10;
const displayName = block.id.replace(/^"|"$/g, "");
return (
<div className="waveblock">
<div className="wave-block-content">
<div className="wave-block-icon">
<i className="fas fa-file-code"></i>
</div>
<div className="wave-block-info">
<span className="wave-block-filename">{displayName}</span>
<span className="wave-block-size">{sizeInKB} KB</span>
</div>
</div>
</div>
);
};
const MarkdownImg = ({
props,
resolveOpts,
}: {
props: React.ImgHTMLAttributes<HTMLImageElement>;
resolveOpts: MarkdownResolveOpts;
}) => {
const [resolvedSrc, setResolvedSrc] = useState<string>(props.src);
const [resolvedStr, setResolvedStr] = useState<string>(null);
const [resolving, setResolving] = useState<boolean>(true);
useEffect(() => {
if (props.src.startsWith("http://") || props.src.startsWith("https://")) {
setResolving(false);
setResolvedSrc(props.src);
setResolvedStr(null);
return;
}
if (props.src.startsWith("data:image/")) {
setResolving(false);
setResolvedSrc(props.src);
setResolvedStr(null);
return;
}
if (resolveOpts == null) {
setResolving(false);
setResolvedSrc(null);
setResolvedStr(`[img:${props.src}]`);
return;
}
const resolveFn = async () => {
const route = makeConnRoute(resolveOpts.connName);
const fileInfo = await RpcApi.RemoteFileJoinCommand(TabRpcClient, [resolveOpts.baseDir, props.src], {
route: route,
});
const usp = new URLSearchParams();
usp.set("path", fileInfo.path);
if (!isBlank(resolveOpts.connName)) {
usp.set("connection", resolveOpts.connName);
}
const streamingUrl = getWebServerEndpoint() + "/wave/stream-file?" + usp.toString();
setResolvedSrc(streamingUrl);
setResolvedStr(null);
setResolving(false);
};
resolveFn();
}, [props.src]);
if (resolving) {
return null;
}
if (resolvedStr != null) {
return <span>{resolvedStr}</span>;
}
if (resolvedSrc != null) {
return <img {...props} src={resolvedSrc} />;
}
return <span>[img]</span>;
};
type MarkdownProps = {
text?: string;
textAtom?: Atom<string> | Atom<Promise<string>>;
showTocAtom?: Atom<boolean>;
style?: React.CSSProperties;
className?: string;
onClickExecute?: (cmd: string) => void;
resolveOpts?: MarkdownResolveOpts;
scrollable?: boolean;
rehype?: boolean;
};
const Markdown = ({
text,
textAtom,
showTocAtom,
style,
className,
resolveOpts,
scrollable = true,
rehype = true,
onClickExecute,
}: MarkdownProps) => {
const textAtomValue = useAtomValueSafe<string>(textAtom);
const tocRef = useRef<TocItem[]>([]);
const showToc = useAtomValueSafe(showTocAtom) ?? false;
const contentsOsRef = useRef<OverlayScrollbarsComponentRef>(null);
const [focusedHeading, setFocusedHeading] = useState<string>(null);
// Ensure uniqueness of ids between MD preview instances.
const [idPrefix] = useState<string>(crypto.randomUUID());
text = textAtomValue ?? text;
const transformedOutput = transformBlocks(text);
const transformedText = transformedOutput.content;
const contentBlocksMap = transformedOutput.blocks;
useEffect(() => {
if (focusedHeading && contentsOsRef.current && contentsOsRef.current.osInstance()) {
const { viewport } = contentsOsRef.current.osInstance().elements();
const heading = document.getElementById(idPrefix + focusedHeading.slice(1));
if (heading) {
const headingBoundingRect = heading.getBoundingClientRect();
const viewportBoundingRect = viewport.getBoundingClientRect();
const headingTop = headingBoundingRect.top - viewportBoundingRect.top;
viewport.scrollBy({ top: headingTop });
}
}
}, [focusedHeading]);
const markdownComponents: Partial<Components> = {
a: (props: React.HTMLAttributes<HTMLAnchorElement>) => (
<Link props={props} setFocusedHeading={setFocusedHeading} />
),
p: (props: React.HTMLAttributes<HTMLParagraphElement>) => <div className="paragraph" {...props} />,
h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => <Heading props={props} hnum={1} />,
h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => <Heading props={props} hnum={2} />,
h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => <Heading props={props} hnum={3} />,
h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => <Heading props={props} hnum={4} />,
h5: (props: React.HTMLAttributes<HTMLHeadingElement>) => <Heading props={props} hnum={5} />,
h6: (props: React.HTMLAttributes<HTMLHeadingElement>) => <Heading props={props} hnum={6} />,
img: (props: React.HTMLAttributes<HTMLImageElement>) => <MarkdownImg props={props} resolveOpts={resolveOpts} />,
source: (props: React.HTMLAttributes<HTMLSourceElement>) => <MarkdownSource {...props} />,
code: Code,
pre: (props: React.HTMLAttributes<HTMLPreElement>) => (
<CodeBlock children={props.children} onClickExecute={onClickExecute} />
),
};
markdownComponents["waveblock"] = (props: any) => <WaveBlock {...props} blockmap={contentBlocksMap} />;
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 React.CSSProperties}
onClick={() => setFocusedHeading(item.href)}
>
{item.value}
</a>
);
});
}
}, [showToc, tocRef]);
let rehypePlugins = null;
if (rehype) {
rehypePlugins = [
rehypeRaw,
rehypeHighlight,
() =>
rehypeSanitize({
...defaultSchema,
attributes: {
...defaultSchema.attributes,
span: [
...(defaultSchema.attributes?.span || []),
// Allow all class names starting with `hljs-`.
["className", /^hljs-./],
// Alternatively, to allow only certain class names:
// ['className', 'hljs-number', 'hljs-title', 'hljs-variable']
],
waveblock: [["blockkey"]],
},
tagNames: [...(defaultSchema.tagNames || []), "span", "waveblock"],
}),
() => rehypeSlug({ prefix: idPrefix }),
];
}
const remarkPlugins: any = [
remarkGfm,
[RemarkFlexibleToc, { tocRef: tocRef.current }],
[createContentBlockPlugin, { blocks: contentBlocksMap }],
];
const ScrollableMarkdown = () => {
return (
<OverlayScrollbarsComponent
ref={contentsOsRef}
className="content"
options={{ scrollbars: { autoHide: "leave" } }}
>
<ReactMarkdown
remarkPlugins={remarkPlugins}
rehypePlugins={rehypePlugins}
components={markdownComponents}
>
{transformedText}
</ReactMarkdown>
</OverlayScrollbarsComponent>
);
};
const NonScrollableMarkdown = () => {
return (
<div className="content non-scrollable">
<ReactMarkdown
remarkPlugins={remarkPlugins}
rehypePlugins={rehypePlugins}
components={markdownComponents}
>
{transformedText}
</ReactMarkdown>
</div>
);
};
return (
<div className={clsx("markdown", className)} style={style}>
{scrollable ? <ScrollableMarkdown /> : <NonScrollableMarkdown />}
{toc && (
<OverlayScrollbarsComponent className="toc" options={{ scrollbars: { autoHide: "leave" } }}>
<div className="toc-inner">
<h4>Table of Contents</h4>
{toc}
</div>
</OverlayScrollbarsComponent>
)}
</div>
);
};
export { Markdown };