Out of Scope Error when copying emoji plugin

[pburrows]

I've copied the emoji-menu plugin implementation from the Playground example here:
https://github.com/Milkdown/website/tree/main/src/components/emoji-menu

And I am getting an error "Out of Scope" thrown by pluginViewContext.ts

The offending code is

view: pluginViewFactory({
    component: EmojiMenu,
}),

which is line 22 of this file

In the debugger in the console, the code of pluginViewContext.ts is this:

export const pluginViewContext = createContext<PluginViewContext>({
  view: null as never,
})

export const usePluginViewContext = () => useContext(pluginViewContext)

export const createPluginViewContext = createContext<(options: ReactPluginViewUserOptions) => PluginViewSpec>(
  (_options) => {
    throw new Error('out of scope')
  },
)

export const usePluginViewFactory = () => useContext(createPluginViewContext)

which, obviously, throw the "out of scope" error.

The question, is why? The playground example seems to work. But copying the emoji-menu plugin folder seems to not be enough.

So, is there another step needed beyond copying that emoji-menu folder and initializing it with useEmojiMenu() and setting emojiMenu.config(ctx)?

The plugin is obviously being called and initialized. It is just failing with that "out of scope" error.

[C-FWES]

You need to wrap your <MilkdownEditor> component in <ProsemirrorAdapterProvider> tags like so:

<MilkdownProvider>
    <ProsemirrorAdapterProvider>
        <MilkdownEditor/>
    </ProsemirrorAdapterProvider>
</MilkdownProvider>

[pburrows]

Wow, this should really be documented somewhere. I wouldn't have guessed that in a million years. Unless I missed it somewhere.

[roymckenzie]

@pburrows this saved me, too. Thanks for asking!