Could you remove the klass?

[carlosmpv]

I am trying your WYSIWYG binding a textarea to the editor

<script>
	import Tailwindcss from './Tailwindcss.svelte';
	import Editor from 'tailwind-editor';
	
	let in_html = "";
	let out_html = ""

	$: arr_html = [
        {html: in_html, klass: ''}
	]
	
	// $: console.log(out_html)
</script>

<Tailwindcss />


<main class="p-4">
	<div class="flex">
		<div class="flex-1">
			<Editor bind:html={out_html} {arr_html}/>
		</div>
		<textarea class="flex-1" 
			value={out_html}
			on:change={e => {
				in_html = e.target.value;
			}}></textarea>
	</div>
</main>

My only issue with this aproach is that the klass is wrapping the textarea code in a div so for every change i make, the source is wrapped in another div.

If you could bring me a new aproach or make the use of klass optional i would be pleased

[haynajjar]

The editor needs a specific structure to work, that's why we are having arr_html as an input and not a string, what you need is to get the elements inside the array for the input. Something like the following:

<script>
	import Tailwindcss from './Tailwindcss.svelte';
	import Editor from 'tailwind-editor';
	
	let in_html = "";
	let out_html = ""

	$: arr_html = [
        {html: in_html, klass: ''}
	]
        
       function extractSections(html){
          // code to extract first level elements (divs) and their classes, sth like this
          const doc = new DOMParser().parseFromString(html, 'text/html');
          return [...doc.body.children].map(node => ({html: node.innerHTML, klass: node.getAttribute("class")}))
       }

	
	// $: console.log(out_html)
</script>

<Tailwindcss />


<main class="p-4">
	<div class="flex">
		<div class="flex-1">
			<Editor bind:html={out_html} {arr_html}/>
		</div>
		<textarea class="flex-1" 
			value={out_html}
			on:change={e => {
				arr_html = extractSections(e.target.value);
			}}></textarea>
	</div>
</main>

Note: this will ignore all the text nodes on the parent tree of elements (you need to wrap everything inside divs). Also, you may run into some issues with child elements.