Add HTML data option [enhancement]

[sanderjson]

I would love to be able to render my own HTML within custom nodes.

data: {
		label: "<p>my cool HTML string</p>"
                label_type: "HTML"
	}

[antl3x]

@sanderjson I think would be better to support Custom Svelte Components no?

We can render with <svelte:component this={customComponent} ... />

[sanderjson]

Yes, this is great. Breaking change for 4.0?

[rchrdnsh]

Both html and svelte elements/components would make this infinitely more useful and awesome. I second this idea :-)

[ronvoluted]

If you're happy to use a hack until maintainers add it, you can modify node_modules to get this working. Add the following two lines at /node_modules/svelvet/Containers/GraphView/index.svelte#L75:

      {#if node.image && !node.data.label}
        <ImageNode {node} {key} />
+     {:else if node.data.html}
+       <Node {node} {key}>{@html node.data.html}</Node>
      {:else}
        <Node {node} {key}>{node.data.label}</Node>

Then use a html property instead of the usual label:

const nodes = [
  {
    id: 1,
    width: 100,
    height: 100,
    position: { x: 0, y: 250 },
    data: { html: `<p>This is <a href="https://html.com">HTML</a></p>` },
  },
];

Go wild!:

[sanderjson]

This is great! I was previously using this code below. Great addition thank you 😀🎉

  <div class={`Node Node-${key}`}>
    {#each $nodesStore as node}
      {#if node.image && !node.data.label}
        <ImageNode {node} {key} />
      {:else}
      <Node {node} {key}>
        {#if node.data.label_type == 'HTML'}
          {@html node.data.label}
        {:else}
          {node.data.label}
        {/if}
        </Node>
      {/if}
    {/each}
  </div>