Support for Svelte

[Mrbeyond]

Request for svelte framework support out of box.

[jscasca]

Hey @Mrbeyond we are currently testing this experimental wrapper at https://github.com/tinymce/tinymce-svelte and we would love to read your feedback

[tylerkelly13]

thanks @jscasca !

[tylerkelly13]

I'll transfer this issue to the tinymce-svelte repo.

[EugeneGoroschenya]

Hi there,

I am not sure it’s worth to create issue but it seems lastVal = value; is neede in the branch below https://github.com/tinymce/tinymce-svelte/blob/f4755575de764e6c377602f65edfc2cdcf07bc06/src/main/component/Editor.svelte#L71-L74

like

 if (editorRef && lastVal !== value) { 
   editorRef.setContent(value); 
   text = editorRef.getContent({format: 'text'});
   lastVal = value;
 } 

so editor.content and text are updated to '' when value is chaged from 'some value' to ''

[jscasca]

@EugeneGoroschenyaExt the thing is that lastVal is just an auxiliary variable and not the actual value of the editor. In line 106 you'll see that it is actually set before it is used.

https://github.com/tinymce/tinymce-svelte/blob/f4755575de764e6c377602f65edfc2cdcf07bc06/src/main/component/Editor.svelte#L106-L110

So value doesn't need to change since it is the value set by the user before setting it into the editor

[EugeneGoroschenya]

@jscasca thank you for pointing it out, I may miss something but I mean the case when value as exported property is changed regardless of interraction with editor so the line 106 is not even executed.

The first time Svelet editor compoment instance receives 'some value' as value , it goes to editorRef.setContent(value) and it is displayed on UI becasue lastVal is empty and not equal to 'some value'. Don't touch editor directly, the lastVal is still '' but assume smth happend and value prop of Svelet editor compoment recived '', the value changed from 'some value' to '' but it is still 'some value' in editor on UI because editorRef.setContent(value) was not execute (lastVal === value === ''), basicaly mismatch between UI and state of Svelte Editor component.

I apologize but don't see this is solved by the line 106 or by other lines, as workaround I align the mismatch by using

  let mce;
  $: if (mce && value !== mce.getContent()) {
    mce.setContent(value);
  }
  const onInit = e => mce = e.detail.editor;

I hope this workaround works without unexpected side effects.

[jscasca]

Okay, I see your point. Yeah, that makes sense now. I'll try to get this done by the weekend. Thanks for bringing it up!

[exalate-issue-sync[bot]]

Ref: INT-3064