binding editor HTML

[ak5]

First off, thanks for this! Super useful!

I am using svelte also and found myself wanting do something like <Editor bind:html height={"200"} />, but had to do this:

<script>
  import Editor from "cl-editor/src/Editor.svelte"

  let html = '<h3>hello</h3>'
  let editor

  $: editor && editor.$on('change', () => html = editor.getHtml())
</script>

{@html html}
<Editor bind:this={editor} {html} height={"200"} />

I'm probably missing something, but the simpler, more idiomatic version with bind:html did not work for me.

Even then, the $on('change') doesn't seem to fire when editing raw html

Am I doing it wrong? very likely xD

[dagalti]

Try this. its working for me.

<Editor {html} on:change={(e)=>html = e.detail} height={"200px"} />

[acoyfellow]

This still seems to be an issue for me.. neither of the above techniques trigger a change when editing HTML:

https://svelte.dev/repl/209dd0724c1d440bb5d9950985627f8a?version=3.55.1

[acoyfellow]

It seems that we're missing an on:input event on the <textarea/> element within Editor.svelte.

Modifying this line to:

<textarea
  bind:this={$references.raw}
  on:input={(event) => _onChange(event.target.value)}
  class="cl-textarea"
  style="max-height: {height}; min-height: {height}"
/>

And it behaves as I'd expect.

[djplaner]

Thank you @acoyfellow your solution worked for my problem.