45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import xml from "react-syntax-highlighter/dist/esm/languages/hljs/xml";
|
|
import { dracula } from "react-syntax-highlighter/dist/esm/styles/hljs";
|
|
import xmlFormat from "xml-formatter";
|
|
|
|
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
|
|
import { AsyncWidget } from "./AsyncWidget";
|
|
import React from "react";
|
|
|
|
SyntaxHighlighter.registerLanguage("xml", xml);
|
|
|
|
export function XMLWidget(p: { src: string }): React.ReactElement {
|
|
const xml = xmlFormat(p.src);
|
|
|
|
return (
|
|
<SyntaxHighlighter
|
|
language="xml"
|
|
style={dracula}
|
|
customStyle={{ fontSize: "120%" }}
|
|
>
|
|
{xml}
|
|
</SyntaxHighlighter>
|
|
);
|
|
}
|
|
|
|
export function XMLAsyncWidget(p: {
|
|
identifier: string;
|
|
load: () => Promise<string>;
|
|
errMsg: string;
|
|
}): React.ReactElement {
|
|
const [src, setSrc] = React.useState<string | undefined>();
|
|
|
|
const load = async () => {
|
|
setSrc(await p.load());
|
|
};
|
|
|
|
return (
|
|
<AsyncWidget
|
|
errMsg={p.errMsg}
|
|
load={load}
|
|
loadKey={p.identifier}
|
|
build={() => <XMLWidget src={src!} />}
|
|
/>
|
|
);
|
|
}
|