feat: implement Markdown component
parent
f1e73d40c7
commit
10fff0f3bb
@ -0,0 +1,63 @@
|
|||||||
|
import {
|
||||||
|
Component,
|
||||||
|
splitProps,
|
||||||
|
JSX,
|
||||||
|
createEffect,
|
||||||
|
createSignal,
|
||||||
|
} from "solid-js";
|
||||||
|
import { unified } from "unified";
|
||||||
|
import remarkParse from "remark-parse";
|
||||||
|
import remarkBreaks from "remark-breaks";
|
||||||
|
import remarkRehype from "remark-rehype";
|
||||||
|
import rehypeStringify from "rehype-stringify";
|
||||||
|
import remarkGfm from "remark-gfm";
|
||||||
|
import HelpIcon from "~icons/carbon/help";
|
||||||
|
|
||||||
|
const markdownHelpUrl =
|
||||||
|
"https://drdanielappel.de/tipps-tools/markdown-eine-einfach-zu-erlernende-auszeichnungssprache/#cmtoc_anchor_id_0";
|
||||||
|
|
||||||
|
export const MarkdownHelpLabel: Component = () => (
|
||||||
|
<a
|
||||||
|
class="link flex items-center text-xs gap-1"
|
||||||
|
rel="noopener"
|
||||||
|
target="_blank"
|
||||||
|
href={markdownHelpUrl}
|
||||||
|
>
|
||||||
|
Markdown
|
||||||
|
<HelpIcon />
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
|
||||||
|
const Markdown: Component<
|
||||||
|
{ value: string } & JSX.HTMLAttributes<HTMLDivElement>
|
||||||
|
> = (p) => {
|
||||||
|
const [props, rest] = splitProps(p, ["value", "class"]);
|
||||||
|
const [html, setHtml] = createSignal("");
|
||||||
|
|
||||||
|
createEffect(function () {
|
||||||
|
const markdown = props.value;
|
||||||
|
(async () => {
|
||||||
|
const result = await unified()
|
||||||
|
.use(remarkParse)
|
||||||
|
.use(remarkGfm)
|
||||||
|
.use(remarkBreaks)
|
||||||
|
.use(remarkRehype)
|
||||||
|
.use(rehypeStringify)
|
||||||
|
.process(markdown);
|
||||||
|
setHtml(String(result));
|
||||||
|
})();
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
class={
|
||||||
|
"text-base-content leading-snug break-all max-w-none prose whitespace-normal " +
|
||||||
|
(props.class || "")
|
||||||
|
}
|
||||||
|
innerHTML={html()}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Markdown;
|
Loading…
Reference in New Issue