feat: html component plugin

Author: pd4d10

packages/bytemd/src/Element.svelte

@@ -71,5 +71,5 @@
     </tbody>
   </table>
 {:else if node.type === 'html'}
-  <HtmlViewer value={node.value} />
+  <HtmlViewer value={node.value} {plugins} />
 {/if}

packages/bytemd/src/Elements.svelte

@@ -6,5 +6,5 @@
 </script>
 
 {#each nodes as node}
-  <Element {node} {plugins} plugin={plugins.find(p => p.shouldTransformElement(node))} />
+  <Element {node} {plugins} plugin={plugins.find(p => p.shouldTransformElement && p.shouldTransformElement(node))} />
 {/each}

packages/bytemd/src/HtmlElement.svelte

@@ -1,16 +1,17 @@
 <script>
   import HtmlElements from './HtmlElements.svelte'
   export let node
+  export let plugins
 </script>
 
 {#if node.type === 'text'}
   {node.value}
 {:else if node.type === 'element'}
   {#if node.tagName === 'p'}
-    <p align={node.properties.align}><HtmlElements nodes={node.children} /></p>
+    <p align={node.properties.align}><HtmlElements nodes={node.children} {plugins} /></p>
   {:else if node.tagName === 'img'}
     <img src={node.properties.src} alt={node.properties.alt} width={node.properties.width} height={node.properties.height} />
   {:else if node.tagName === 'a'}
-    <a href={node.properties.href}><HtmlElements nodes={node.children} /></a>
+    <a href={node.properties.href}><HtmlElements nodes={node.children} {plugins} /></a>
   {/if}
 {/if}

packages/bytemd/src/HtmlElements.svelte

@@ -1,8 +1,17 @@
 <script>
   import HtmlElement from './HtmlElement.svelte'
   export let nodes;
+  export let plugins;
+
+  $: findPlugin = (node) => {
+    return plugins.find(p => p.shouldTransformHtmlElement && p.shouldTransformHtmlElement(node))
+  }
 </script>
 
 {#each nodes as node}
-  <HtmlElement {node} />
+  {#if findPlugin(node)}
+    <svelte:component this={findPlugin(node).component} {...node}></svelte:component>
+  {:else}
+    <HtmlElement {node} {plugins} />
+  {/if}
 {/each}

packages/bytemd/src/HtmlViewer.svelte

@@ -4,9 +4,11 @@
   import HtmlElements from './HtmlElements.svelte';
 
   export let value;
+  export let plugins;
+
   const parser = unified().use(html, { fragment: true });
   $: ast = parser.parse(value);
   // $: console.log(ast);
 </script>
 
-<HtmlElements nodes={ast.children} />
+<HtmlElements nodes={ast.children} {plugins} />

packages/bytemd/src/index.d.ts

@@ -3,7 +3,8 @@ import { Node } from 'unist';
 import { SvelteComponent } from 'svelte';
 
 export interface Plugin {
-  shouldTransformElement(node: Node): boolean;
+  shouldTransformElement?(node: Node): boolean;
+  shouldTransformHtmlElement?(node: Node): boolean;
   component: typeof SvelteComponent;
 }