Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensure VueNodeViewRenderer will use Editor's Global Vue Instance #2604

Merged
merged 1 commit into from May 13, 2022

Conversation

ralphschindler
Copy link
Contributor

Currently, if you attempt to register a component via Vue.component() with a different global instance of Vue (this can happen if you are building plugins for an existing application and the plugin and application exist in separate bundles) the component will not be found via the Vue imported into VueNodeViewRenderer.

In an ideal world, when attempting to Vue.extend() a component via the VueNodeViewRenderer.. (for example):

Node.create({
  addNodeView() {
    return VueNodeViewRenderer(uiForNodeComponent)
  }
})

then the provided uiForNodeComponent will be Vue.extend()ed by a Global Vue that has access to any previously registered (Vue.component(...)) components. The only way to ensure this in a situation where there might be multiple Global views (multiple bundles with Vue), is to use the one that is inside the actual editor's contentComponent.

There are probably a few more places where tiptap should favor the editor Vue, but this at least solves the problem of using the right Vue from within a Node creation, as per how the documentation describes building custom Vue backed components.

Without this particular fix, one would get the message below when attempting to use a Globally registered Vue component inside a Node's View.

vue.esm.js?4b29:628 [Vue warn]: Unknown custom element: <component-globally-registered> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

…obal vue instance when extending for components
@netlify
Copy link

netlify bot commented Mar 8, 2022

✔️ Deploy Preview for tiptap-embed ready!

🔨 Explore the source changes: 6778da3

🔍 Inspect the deploy log: https://app.netlify.com/sites/tiptap-embed/deploys/6227cad274a7ff0008bf27b6

😎 Browse the preview: https://deploy-preview-2604--tiptap-embed.netlify.app

Copy link
Contributor

@bdbch bdbch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me, thanks @ralphschindler!

@bdbch bdbch merged commit 5bc7708 into ueberdosis:main May 13, 2022
@bdbch
Copy link
Contributor

bdbch commented May 13, 2022

There are probably a few more places where tiptap should favor the editor Vue, but this at least solves the problem of using the right Vue from within a Node creation, as per how the documentation describes building custom Vue backed components.

You're right with this one. We'll probably need some time to invest into this usecase and make sure it works. Thanks for those notes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants