Configuration property is not reactive

[Chreekar]

It seems that the conf property is not reactive, so when I pass another object to it the editor does not update.

This is the code I have:

<script lang="ts">
  import { locale } from "svelte-i18n";
  import Editor from "@tinymce/tinymce-svelte";

  export let editorValue: string;

  $: editorConf = getEditorConf($locale);

  function getEditorConf(langCode: string) {
    const result = {
        menubar: false
    };
    if (langCode !== "en-US") {
      result.language = langCode.replace("-", "_");
    }
    return result;
  }
</script>
<Editor scriptSrc="build/tinymce/tinymce.min.js" inline={true} conf={editorConf} bind:value={editorValue} />

When $locale is updated, I can see that getEditorConf is called and sets the variable editorConf to a new value. However, the editor is not updated and hence it still uses the previous language.

[tomichGIT]

i have the same issue changing the Skin, i tried using 2 Editors but having 2 editor it mixes the skins. Please make changing "conf" to be reactive, thanks!!!

<script>
const conf = {
        "height": 600,
        menubar: '',
        toolbar_mode: 'floating',
        "plugins": [...],
        "toolbar": "...",
        // "skin":"oxide",
        // "content_css":"default"
    }
   // dark theme:
    const darkConf =  {...conf, skin:"oxide-dark", content_css:"dark"};
    </script>
    <!-- expected code -->
     <Editor
            conf={$themeMode=="dark"?darkConf:conf}
            bind:value={value}
            scriptSrc='/assets/js/tinymce.min.js'
        />

example 1 with double editor gives error on first load:

{#if $themeMode=="dark"}
        <Editor
            conf={darkConf}
            bind:value={value}
            scriptSrc='/assets/js/vendors/plugins/tinymce/tinymce-6.6.2/tinymce.min.js'
        />
    {:else}
        <Editor
            conf={conf}
            bind:value={value}
            scriptSrc='/assets/js/vendors/plugins/tinymce/tinymce-6.6.2/tinymce.min.js'
        />
    {/if}

example 2 with double editor mixes the Styles:

<div class={$themeMode=="dark"?"d-none":""}>
            <Editor
                conf={conf}
                bind:value={value}
                scriptSrc='/assets/js/vendors/plugins/tinymce/tinymce-6.6.2/tinymce.min.js'
            />
        </div>
        <div class={$themeMode=="dark"?"":"d-none"}>
            <Editor
                conf={darkConf}
                bind:value={value}
                scriptSrc='/assets/js/vendors/plugins/tinymce/tinymce-6.6.2/tinymce.min.js'
            />
        </div> 

[tiny-stale-bot]

This issue is stale because it has been open 30 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 7 days.

[tiny-stale-bot]

This issue was closed because it has been stalled for 7 days with no activity.