prosekit / prosemirror-adapter

Universal adapter to create prosemirror nodeview from modern UI frameworks.
MIT License
105 stars 11 forks source link

pluginViewFactory is not a function in Vue JS 3 #97

Closed Koffer0-0 closed 1 month ago

Koffer0-0 commented 1 month ago

I’m encountering an issue when trying to add plugins like slash or tooltip integration in a Vue 3 project. I’m using the usePluginViewFactoryfrom the@prosemirror-adapter/vuepackage, but I’m getting the following error in the browser's dev tools console:

I tried to display pluginViewFactory in the console, but it’s showing as undefined. I’ve followed the setup steps from the documentation, but it seems that usePluginViewFactory is not working as expected. Below is the code snippet:

import { usePluginViewFactory } from '@prosemirror-adapter/vue';

const pluginViewFactory = usePluginViewFactory();

await useEditor((root) =>
    Editor.make()
      .config((ctx) => {
        ctx.set(rootCtx, root);
        ctx.set(defaultValueCtx, markdown);
        ctx.set(slash.key, {
          view: pluginViewFactory({
            component: Slash
          }),
        })
        ctx.set(tooltip.key, {
          view: pluginViewFactory({
            component: Tooltip
          }),
        })
       ...

Steps to Reproduce:

Set up Milkdown in a Vue 3 project. Try to import usePluginViewFactoryfrom @prosemirror-adapter/vue. Attempt to use pluginViewFactoryin a plugin like slash or tooltip. Observe the console where the error pluginViewFactory is not a function is shown.

Expected Behavior: The usePluginViewFactoryfunction should return a valid factory function, allowing me to use it for plugins such as slash and tooltip.

Actual Behavior: The function is undefined, leading to an error and preventing the integration of these plugins.

Environment:

Vue version: ^3.3.4 Milkdown/kit version: ^7.5.5 Browser: Brave1.71.114 Chromium: 130.0.6723.58

Koffer0-0 commented 1 month ago

Also i tried to comment this part

ctx.set(slash.key, {
          view: pluginViewFactory({
            component: Slash
          }),
        })
        ctx.set(tooltip.key, {
          view: pluginViewFactory({
            component: Tooltip
          }),
        })

and console diplayed me this warning message injection "Symbol([ProsemirrorAdapter]usePluginViewFactory)" not found.

Koffer0-0 commented 1 month ago

I tried to copy and paste code from Milkdown Slash Vue example but it gave the same error. @Saul-Mirone

Koffer0-0 commented 1 month ago

Bruh, the issue was that i didn't wrapped it to the ProsemirrorAdapterProvider

    <ProsemirrorAdapterProvider>
      <MilkdownEditor />
    </ProsemirrorAdapterProvider>