import{s as es,e as l,a as i,H as d,c as u,l as r,g as k,b as g,m as w,f as a,p as m,i as e,n as Z}from"./scheduler.DKiYiPX0.js";import{S as ps,i as os,c as B,a as V,m as Y,t as G,b as J,d as Q}from"./index.z4bt_ZBS.js";import{C as X}from"./Code.tlNrnEug.js";function cs(h){let t,o,f=`

npm i unist-util-visit
# Types
npm i -D unified hast

import type { Plugin as UnifiedPlugin } from 'unified'
import { SKIP, visit } from 'unist-util-visit'

const unifiedPlugin: UnifiedPlugin<[], hast.Root> = () => {
	return function (tree) {
    // Visit every node in the syntax tree
    visit(tree, (node, index, parent) => {
      // Do something with the node
    }
  }
}

const unifiedPlugin: UnifiedPlugin<[], hast.Root> = () => {
	return function (tree) {
		visit(tree, (node, index, parent) => {
			// Skip code blocks and their children
			if (node.type === 'element' && node.tagName === 'pre') return [SKIP];
			// Skip non-text nodes
			if (node.type !== 'text') return;
			const text = node as hast.Text;

			// Parse the text node and replace hashtags with spans
			const regex = /#(w+)/g;
			const children: (hast.Element | hast.Text)[] = [];
			let lastIndex = 0;
			let match;
			while ((match = regex.exec(text.value))) {
				const before = text.value.slice(lastIndex, match.index);
				if (before) {
					children.push({ type: 'text', value: before });
				}
				children.push({
					type: 'element',
					tagName: 'span',
					properties: { type: 'hashtag', value: match[1] },
					children: [{ type: 'text', value: match[0] }]
				});
				lastIndex = regex.lastIndex;
			}
			if (lastIndex < text.value.length) {
				children.push({ type: 'text', value: text.value.slice(lastIndex) });
			}

			// Replace the text node with all the children
			parent!.children.splice(index!, 1, ...children);

			// Skip the children
			return [SKIP, index! + children.length];
		});
	};
};

import type { UnifiedTransformer } from 'carta-md';

const hashtagTransformer: UnifiedTransformer<'sync'> = {
	execution: 'sync', // Sync, since the plugin is synchronous
	type: 'rehype', // Rehype, since it operates on HTML
	transform({ processor }) {
		processor.use(unifiedPlugin);
	}
};

<!-- Hashtag.svelte -->
<script>
	export let value;
</script>

<button
	on:click={() => {
		console.log('Hashtag clicked!');
	}}
>
	#{value}
</button>

import type { Listener } from 'carta-md';
import Hashtag from './Hashtag.svelte';

const convertHashtags: Listener<'carta-render'> = [
	'carta-render',
	function onRender({ detail: { carta } }) {
		const rendererContainer = carta.renderer?.container;
		if (!rendererContainer) return;

		// Find all hashtag spans and replace them with Svelte components
		const hashtagSpans = rendererContainer.querySelectorAll('span[type="hashtag"]');
		for (const span of hashtagSpans) {
			const hashtag = span.getAttribute('value') ?? '';

			new Hashtag({
				target: span.parentElement!,
				anchor: span,
				props: { value: hashtag }
			});

			span.remove();
		}
	}
];

import type { Plugin } from 'carta-md';

export const hashtag = (): Plugin => ({
	transformers: [hashtagTransformer],
	listeners: [convertHashtags]
});

`;return{c(){t=l("pre"),o=new d(!1),this.h()},l(p){t=u(p,"PRE",{class:!0});var c=g(t);o=w(c,!1),c.forEach(a),this.h()},h(){o.a=null,m(t,"class","language-ts")},m(p,c){e(p,t,c),o.m(f,t)},p:Z,d(p){p&&a(t)}}}function hs(h){let t,o="Svelte components can be embedded into the rendered HTML to make certain elements interactive. However, they require a bit more work, as Remark is configured to only render static HTML. To get around this, the idea is to do the following:",f,p,c="

Create a Unified plugin to isolate the targeted element;

Replace all the elements with the component, after every render.

",sn,v,Rn='Example',an,E,Sn="Let’s say we want to replace all hashtags, such as #something, with a custom component. Here is as example of how that could be achieved.",tn,$,Un='Parsing the hashtags',en,R,In="First things first: we need to tell the parser that we want to parse hashtags as custom elements. To do this, it’s useful to first install the following packages:",pn,_,on,S,zn="Let’s create a Unified plugin. The basic structure of a plugin is the following:",cn,x,ln,U,jn="We now want to parse text nodes, so that words such as #pizza and #123 are separated from the rest. This is a possible implementation:",un,y,kn,I,qn='If you want a more in-depth guide on writing Unified plugins, you can check out the official documentation.',rn,z,Fn="Notice that hashtags are now replaced with the following:",fn,j,hn,as='<span type="hashtag" value="pizza"> #pizza </span>',mn,C,Kn='Configuring the transformer',dn,q,Nn="Unified plugins need to be wrapped inside a UnifiedTransformer type, to be able to be used in Carta.",gn,H,wn,T,On='Mounting the components',vn,F,Wn="We now want to replace the generated hashtag placeholders with the following element:",$n,P,_n,K,An="To do that, we create a listener that:",xn,N,Dn="

Finds all the previous placeholders;

Mounts the component next to them;

Removes the placeholders.

",yn,L,Cn,b,Bn='Using the plugin',Hn,O,Vn="Let’s now create a Plugin with the transformer and the listener:",Tn,M,Pn,W,Yn="We can now use the plugin with the following:",Ln,A,bn,ts=`

import { Carta } from 'carta-md';

const carta = new Carta({
	// ...
	extensions: [hashtag()]
});

`,Mn,D,Gn='You can find the example source code here.',En;return _=new X({props:{$$slots:{default:[cs]},$$scope:{ctx:h}}}),x=new X({props:{$$slots:{default:[ls]},$$scope:{ctx:h}}}),y=new X({props:{$$slots:{default:[us]},$$scope:{ctx:h}}}),H=new X({props:{$$slots:{default:[is]},$$scope:{ctx:h}}}),P=new X({props:{$$slots:{default:[ks]},$$scope:{ctx:h}}}),L=new X({props:{$$slots:{default:[rs]},$$scope:{ctx:h}}}),M=new X({props:{$$slots:{default:[fs]},$$scope:{ctx:h}}}),{c(){t=l("p"),t.textContent=o,f=i(),p=l("ol"),p.innerHTML=c,sn=i(),v=l("h2"),v.innerHTML=Rn,an=i(),E=l("p"),E.innerHTML=Sn,tn=i(),$=l("h3"),$.innerHTML=Un,en=i(),R=l("p"),R.textContent=In,pn=i(),B(_.$$.fragment),on=i(),S=l("p"),S.textContent=zn,cn=i(),B(x.$$.fragment),ln=i(),U=l("p"),U.innerHTML=jn,un=i(),B(y.$$.fragment),kn=i(),I=l("p"),I.innerHTML=qn,rn=i(),z=l("p"),z.textContent=Fn,fn=i(),j=l("pre"),hn=new d(!1),mn=i(),C=l("h3"),C.innerHTML=Kn,dn=i(),q=l("p"),q.innerHTML=Nn,gn=i(),B(H.$$.fragment),wn=i(),T=l("h3"),T.innerHTML=On,vn=i(),F=l("p"),F.textContent=Wn,$n=i(),B(P.$$.fragment),_n=i(),K=l("p"),K.textContent=An,xn=i(),N=l("ol"),N.innerHTML=Dn,yn=i(),B(L.$$.fragment),Cn=i(),b=l("h3"),b.innerHTML=Bn,Hn=i(),O=l("p"),O.textContent=Vn,Tn=i(),B(M.$$.fragment),Pn=i(),W=l("p"),W.textContent=Yn,Ln=i(),A=l("pre"),bn=new d(!1),Mn=i(),D=l("p"),D.innerHTML=Gn,this.h()},l(n){t=u(n,"P",{"data-svelte-h":!0}),r(t)!=="svelte-1ur5rpk"&&(t.textContent=o),f=k(n),p=u(n,"OL",{"data-svelte-h":!0}),r(p)!=="svelte-101k9os"&&(p.innerHTML=c),sn=k(n),v=u(n,"H2",{id:!0,"data-svelte-h":!0}),r(v)!=="svelte-r4uhiu"&&(v.innerHTML=Rn),an=k(n),E=u(n,"P",{"data-svelte-h":!0}),r(E)!=="svelte-r8in7e"&&(E.innerHTML=Sn),tn=k(n),$=u(n,"H3",{id:!0,"data-svelte-h":!0}),r($)!=="svelte-15fs2m6"&&($.innerHTML=Un),en=k(n),R=u(n,"P",{"data-svelte-h":!0}),r(R)!=="svelte-1r7bbxd"&&(R.textContent=In),pn=k(n),V(_.$$.fragment,n),on=k(n),S=u(n,"P",{"data-svelte-h":!0}),r(S)!=="svelte-yy3zc6"&&(S.textContent=zn),cn=k(n),V(x.$$.fragment,n),ln=k(n),U=u(n,"P",{"data-svelte-h":!0}),r(U)!=="svelte-1akzv4g"&&(U.innerHTML=jn),un=k(n),V(y.$$.fragment,n),kn=k(n),I=u(n,"P",{"data-svelte-h":!0}),r(I)!=="svelte-tc8iwr"&&(I.innerHTML=qn),rn=k(n),z=u(n,"P",{"data-svelte-h":!0}),r(z)!=="svelte-1a8clay"&&(z.textContent=Fn),fn=k(n),j=u(n,"PRE",{class:!0});var s=g(j);hn=w(s,!1),s.forEach(a),mn=k(n),C=u(n,"H3",{id:!0,"data-svelte-h":!0}),r(C)!=="svelte-fedxl7"&&(C.innerHTML=Kn),dn=k(n),q=u(n,"P",{"data-svelte-h":!0}),r(q)!=="svelte-6g4x7v"&&(q.innerHTML=Nn),gn=k(n),V(H.$$.fragment,n),wn=k(n),T=u(n,"H3",{id:!0,"data-svelte-h":!0}),r(T)!=="svelte-1xm0rp4"&&(T.innerHTML=On),vn=k(n),F=u(n,"P",{"data-svelte-h":!0}),r(F)!=="svelte-1btti53"&&(F.textContent=Wn),$n=k(n),V(P.$$.fragment,n),_n=k(n),K=u(n,"P",{"data-svelte-h":!0}),r(K)!=="svelte-1ab5sxp"&&(K.textContent=An),xn=k(n),N=u(n,"OL",{"data-svelte-h":!0}),r(N)!=="svelte-1ks6dt4"&&(N.innerHTML=Dn),yn=k(n),V(L.$$.fragment,n),Cn=k(n),b=u(n,"H3",{id:!0,"data-svelte-h":!0}),r(b)!=="svelte-bnlm90"&&(b.innerHTML=Bn),Hn=k(n),O=u(n,"P",{"data-svelte-h":!0}),r(O)!=="svelte-sji02v"&&(O.textContent=Vn),Tn=k(n),V(M.$$.fragment,n),Pn=k(n),W=u(n,"P",{"data-svelte-h":!0}),r(W)!=="svelte-9krp4j"&&(W.textContent=Yn),Ln=k(n),A=u(n,"PRE",{class:!0});var nn=g(A);bn=w(nn,!1),nn.forEach(a),Mn=k(n),D=u(n,"P",{"data-svelte-h":!0}),r(D)!=="svelte-1fa80qn"&&(D.innerHTML=Gn),this.h()},h(){m(v,"id","example"),m($,"id","parsing-the-hashtags"),hn.a=null,m(j,"class","language-html"),m(C,"id","configuring-the-transformer"),m(T,"id","mounting-the-components"),m(b,"id","using-the-plugin"),bn.a=null,m(A,"class","language-ts")},m(n,s){e(n,t,s),e(n,f,s),e(n,p,s),e(n,sn,s),e(n,v,s),e(n,an,s),e(n,E,s),e(n,tn,s),e(n,$,s),e(n,en,s),e(n,R,s),e(n,pn,s),Y(_,n,s),e(n,on,s),e(n,S,s),e(n,cn,s),Y(x,n,s),e(n,ln,s),e(n,U,s),e(n,un,s),Y(y,n,s),e(n,kn,s),e(n,I,s),e(n,rn,s),e(n,z,s),e(n,fn,s),e(n,j,s),hn.m(as,j),e(n,mn,s),e(n,C,s),e(n,dn,s),e(n,q,s),e(n,gn,s),Y(H,n,s),e(n,wn,s),e(n,T,s),e(n,vn,s),e(n,F,s),e(n,$n,s),Y(P,n,s),e(n,_n,s),e(n,K,s),e(n,xn,s),e(n,N,s),e(n,yn,s),Y(L,n,s),e(n,Cn,s),e(n,b,s),e(n,Hn,s),e(n,O,s),e(n,Tn,s),Y(M,n,s),e(n,Pn,s),e(n,W,s),e(n,Ln,s),e(n,A,s),bn.m(ts,A),e(n,Mn,s),e(n,D,s),En=!0},p(n,[s]){const nn={};s&1&&(nn.$$scope={dirty:s,ctx:n}),_.$set(nn);const Jn={};s&1&&(Jn.$$scope={dirty:s,ctx:n}),x.$set(Jn);const Qn={};s&1&&(Qn.$$scope={dirty:s,ctx:n}),y.$set(Qn);const Xn={};s&1&&(Xn.$$scope={dirty:s,ctx:n}),H.$set(Xn);const Zn={};s&1&&(Zn.$$scope={dirty:s,ctx:n}),P.$set(Zn);const ns={};s&1&&(ns.$$scope={dirty:s,ctx:n}),L.$set(ns);const ss={};s&1&&(ss.$$scope={dirty:s,ctx:n}),M.$set(ss)},i(n){En||(G(_.$$.fragment,n),G(x.$$.fragment,n),G(y.$$.fragment,n),G(H.$$.fragment,n),G(P.$$.fragment,n),G(L.$$.fragment,n),G(M.$$.fragment,n),En=!0)},o(n){J(_.$$.fragment,n),J(x.$$.fragment,n),J(y.$$.fragment,n),J(H.$$.fragment,n),J(P.$$.fragment,n),J(L.$$.fragment,n),J(M.$$.fragment,n),En=!1},d(n){n&&(a(t),a(f),a(p),a(sn),a(v),a(an),a(E),a(tn),a($),a(en),a(R),a(pn),a(on),a(S),a(cn),a(ln),a(U),a(un),a(kn),a(I),a(rn),a(z),a(fn),a(j),a(mn),a(C),a(dn),a(q),a(gn),a(wn),a(T),a(vn),a(F),a($n),a(_n),a(K),a(xn),a(N),a(yn),a(Cn),a(b),a(Hn),a(O),a(Tn),a(Pn),a(W),a(Ln),a(A),a(Mn),a(D)),Q(_,n),Q(x,n),Q(y,n),Q(H,n),Q(P,n),Q(L,n),Q(M,n)}}}const ws={title:"Using Svelte Components",section:"Overview"};class vs extends ps{constructor(t){super(),os(this,t,null,hs,es,{})}}export{vs as default,ws as metadata};