How to get editor instance from another component in Svelte?

[seanvelasco]

In React and Vue, milkdown has the ability to get the editor instance from a provider.

In Svelte, however, I'm not able to retrieve the editor instance since there is no useInstance equivalent in Svelte.

The problem is, the components are dynamically created like so:

const tooltipPluginView = pluginViewFactory({
    component: Tooltip
})

There is no way to pass the editor as a prop in the above case.

Using setContext and getContext also doesn't work because the Tooltip component doesn't register as a child of the Editor component.

Creating a store from a js/ts file and then using get() from the component does work, but the store is shared, because it's exported from a module. Therefore, I can't create multiple milkdown editors since they all share the same instance.

Is there a way to retrieve the Editor instance from another component? Like a useInstance for Svelte?

[Gumaan-Mahar]

In Svelte, you can achieve similar functionality to useInstance in React or Vue by using a combination of Svelte's getContext and setContext functions along with stores. While your components may not register as children of the Editor component, you can still use context to pass down the Editor instance.

Here's a basic example of how you might approach this:

1. Create a store to hold the Editor instance:

// editorStore.js
import { writable } from 'svelte/store';

export const editor = writable(null);

2. In your Editor component, set the Editor instance in the store:

// Editor.svelte
<script>
  import { onMount } from 'svelte';
  import { editor } from './editorStore';
  import { Editor } from 'milkdown';

  let editorInstance;

  onMount(() => {
    editor.set(editorInstance);
  });
</script>

<Editor bind:this={editorInstance} />

3. In your other components where you need access to the Editor instance, use getContext to retrieve it:

// Tooltip.svelte
<script>
  import { getContext } from 'svelte';
  import { editor } from './editorStore';

  const editorInstance = getContext('editor');
</script>

<!-- Use editorInstance as needed -->

With this setup, the Tooltip component can access the Editor instance via context. Each instance of the Editor component will have its own Editor instance stored in the store, so they won't interfere with each other. This allows you to create multiple milkdown editors, each with its own instance.

[seanvelasco]

thank you for the reply!

i initially tried this before, but using getContext in the the <Tooltip/> component returns undefined.

when i tried getAllContexts() in the <Tooltip/> component, other contexts created in the parent were not there - the only contexts present were view and prevState.

also, with this approach, since it's using a single store created in editorStore.js - if i create multiple editors - will they share the same context?

for now tho, my stopgap solution is extending the <Tooltip/> component class by adding the props before i pass the component as a parameter. however, this may not work in future version of Svelte. and also, there is no documentation on adding props this way.

[Gumaan-Mahar]

I think, getContext is undefined because the context established by writable from svelte/store isn't accessible across components by default.

Here's how you can fix it:

1. Create a new component called EditorProvider.svelte.
2. Inside EditorProvider.svelte:

<script>
  import { writable, derived } from 'svelte/store';
  import { Editor } from 'milkdown';

  export let editorInstance;
  const editor = writable(null);

  derived(editor, ($editor) => {
    editorInstance = $editor;
  });
</script>

<slot {editorInstance} />

3. In App.svelte:

HTML
<script>
  import EditorProvider from './EditorProvider.svelte';
  import Editor from './Editor.svelte';
  import Tooltip from './Tooltip.svelte';
</script>

<EditorProvider>
  <Editor />
  <Tooltip />
</EditorProvider>

This approach creates a context using writable and derived in EditorProvider.svelte. The slot with editorInstance prop makes the current editor instance available to its child components, including Tooltip.svelte.