Svelte CodeMirror - Multiple Instances

Hello,

Recently started using CodeMirror on a single page Svelte based project (using this component version GitHub - touchifyapp/svelte-codemirror-editor: A svelte component to create a CodeMirror 6+ editor).

My first code editor instance worked absolutely fine, displays the data I expect it to and accepts inputs to update it live.

However, for some weird reason when I add my second code editor under a different tab to call other data (from stores), it always pulls the info from the first code editor no matter what I do.

If I maully refer the data in a p e.g.

<p class="text-xs p-2 bg-muted rounded break-words whitespace-pre-wrap">
{$recipePreview}
</p>

This one loads absolutely fine, so I know its not the data itself, but the fact CodeMirror for some reason its displaying the same instance twice and not respecting the two different ones I created.

My first one is:

<CodeMirror bind:value={$manifestPreview} lang={xml()} theme={$mode === 'dark' ? vscodeDark : vscodeLight} readonly lineWrapping/>

And this is my second:

<CodeMirror bind:value={$recipePreview} lang={xml()} theme={$mode === 'dark' ? vscodeDark : vscodeLight} readonly lineWrapping/>

The CodeMirror library keeps no observeable global state, so I am pretty certain the issue here would be in the Svelte wrapper you use.