ComfyBox/src/lib/widgets/MarkdownWidget.svelte

<script lang="ts">
 import { type WidgetLayout } from "$lib/stores/layoutStates";
 import { get, type Writable, writable } from "svelte/store";
 import { Block } from "@gradio/atoms";
 import type { ComfyMarkdownNode } from "$lib/nodes/widgets";
 import SvelteMarkdown from "@dogagenc/svelte-markdown"
 import NullMarkdownRenderer from "./markdown/NullMarkdownRenderer.svelte"
 import { SvelteComponentDev } from "svelte/internal";

 export let widget: WidgetLayout | null = null;
 export let isMobile: boolean = false;

 let node: ComfyMarkdownNode | null = null;
 let nodeValue: Writable<string> = writable("");
 let attrsChanged: Writable<number> = writable(0);

 let renderers: Record<string, typeof SvelteComponentDev> = {
     "html": NullMarkdownRenderer
 }

 $: widget && setNodeValue(widget);

 function setNodeValue(widget: WidgetLayout) {
     if (widget) {
         node = widget.node as ComfyMarkdownNode
         nodeValue = node.value;
         attrsChanged = widget.attrsChanged;
     }
 };
</script>

<div class="wrapper prose">
    {#key $attrsChanged}
        {#if widget !== null && node !== null}
            <Block>
                <SvelteMarkdown source={$nodeValue} {renderers} />
            </Block>
        {/if}
    {/key}
</div>

<style lang="scss">
 .wrapper {
     padding: 2px;
     width: 100%;
     height: 100%;

     :global(> button) {
         height: 100%;
     }

     :global(> .block) {
         border-radius: 0 !important;
     }
 }

 .prose {
     font-weight: var(--prose-text-weight);
     font-size: var(--text-md);
 }

 .prose * {
     color: var(--body-text-color);
 }

 .prose p {
     margin-bottom: var(--spacing-sm);
     line-height: var(--line-lg);
 }

 /* headings
    –––––––––––––––––––––––––––––––––––––––––––––––––– */

 .prose h1,
 .prose h2,
 .prose h3,
 .prose h4,
 .prose h5 {
     margin: var(--spacing-xxl) 0 var(--spacing-lg);
     font-weight: var(--prose-header-text-weight);
     line-height: 1.3;
 }

 .prose > *:first-child {
     margin-top: 0;
 }

 .prose h1 {
     margin-top: 0;
     font-size: var(--text-xxl);
 }

 .prose h2 {
     font-size: var(--text-xl);
 }

 .prose h3 {
     font-size: var(--text-lg);
 }

 .prose h4 {
     font-size: 1.1em;
 }

 .prose h5 {
     font-size: 1.05em;
 }

 /* lists
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .prose ul {
     list-style: circle inside;
 }
 .prose ol {
     list-style: decimal inside;
 }

 .prose ul > p,
 .prose li > p {
     display: inline-block;
 }
 .prose ol,
 .prose ul {
     margin-top: 0;
     padding-left: 0;
 }
 .prose ul ul,
 .prose ul ol,
 .prose ol ol,
 .prose ol ul {
     margin: 0.5em 0 0.5em 3em;
     font-size: 90%;
 }
 .prose li {
     margin-bottom: 0.5em;
 }

 /* code
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .prose code {
     border: 1px solid var(--border-color-primary);
     border-radius: var(--radius-sm);
     background: var(--background-fill-secondary);
     padding: 1px 3px;
     font-size: 85%;
     white-space: nowrap;
 }
 .prose pre > code {
     display: block;
     padding: 0.5em 0.7em;
     /* font-size: 100%; */
     white-space: pre;
 }

 /* tables
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .prose th,
 .prose td {
     border-bottom: 1px solid #e1e1e1;
     padding: 12px 15px;
     text-align: left;
 }
 .prose th:first-child,
 .prose td:first-child {
     padding-left: 0;
 }
 .prose th:last-child,
 .prose td:last-child {
     padding-right: 0;
 }

 /* spacing
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .prose button,
 .prose .button {
     margin-bottom: var(--spacing-sm);
 }
 .prose input,
 .prose textarea,
 .prose select,
 .prose fieldset {
     margin-bottom: var(--spacing-sm);
 }
 .prose pre,
 .prose blockquote,
 .prose dl,
 .prose figure,
 .prose table,
 .prose p,
 .prose ul,
 .prose ol,
 .prose form {
     margin-bottom: var(--spacing-md);
 }

 /* links
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .prose a {
     color: var(--link-text-color);
     text-decoration: underline;
 }

 .prose a:visited {
     color: var(--link-text-color-visited);
 }

 .prose a:hover {
     color: var(--link-text-color-hover);
 }
 .prose a:active {
     color: var(--link-text-color-active);
 }

 /* misc
    –––––––––––––––––––––––––––––––––––––––––––––––––– */

 .prose hr {
     margin-top: 3em;
     margin-bottom: 3.5em;
     border-width: 0;
     border-top: 1px solid #e1e1e1;
 }

 .prose blockquote {
     margin: var(--size-6) 0 !important;
     border-left: 5px solid var(--border-color-primary);
     padding-left: var(--size-2);
 }

 .prose :last-child {
     margin-bottom: 0 !important;
 }
</style>