dev console of main flooded with errors $attrs is readonly

[max-nextcloud]

Describe the bug

Current text main branch produces tons of errors in the console.

To Reproduce
Steps to reproduce the behavior:

1. Open current markdown file with text main branch currently.

Expected behavior
No errors in the console.

Screenshots

If applicable, add screenshots to help explain your problem.

[max-nextcloud]

nextcloud-libraries/nextcloud-vue#3281 might fix it.

[max-nextcloud]

nextcloud-libraries/nextcloud-vue#3281 might fix it.

As far as i can tell we are already using that fix.

[juliushaertl]

@max-nextcloud Maybe it is actually the viewer that needs the bump? We still use the parent Vue instance from that one iirc.

[max-nextcloud]

finally managed to bisect this:
Simplified output of git bisect log:

git bisect start
git bisect bad e5307b0
git bisect good f5556e6
git bisect good ad26e8b
git bisect good b991d98
git bisect bad a9f35b8
git bisect bad eb02f5d
git bisect bad aa673ab
git bisect bad 648cf20
git bisect bad da24829
git bisect bad d14558b
git bisect bad f750a82

first bad commit: [f750a82] feat(editor): Add link view bubble to preview, edit and open links

[max-nextcloud]

I was able to narrow this down to the LinkBubbleView. If i replace it with a Vue component with a simple static template the errors are gone.

[max-nextcloud]

Looks like VueRenderer will create a new vue instance by default. In contrast VueNodeViewRenderer has a fix to ensure the same vue instance is used

[max-nextcloud]

I tried to use the same approach with no success:

diff --git a/src/extensions/LinkBubblePluginView.js b/src/extensions/LinkBubblePluginView.js
index bddb60f8b..08c8b7145 100644
--- a/src/extensions/LinkBubblePluginView.js
+++ b/src/extensions/LinkBubblePluginView.js
@@ -1,4 +1,5 @@
 import { VueRenderer } from '@tiptap/vue-2'
+import Vue from 'vue'
 import tippy from 'tippy.js'
 import { domHref } from '../helpers/links.js'
 import LinkBubbleView from '../components/Link/LinkBubbleView.vue'
@@ -13,8 +14,10 @@ class LinkBubblePluginView {
        constructor({ editor, view }) {
                this.editor = editor
                this.view = view
+               const vue = this.editor.contentComponent?.$options._base ?? Vue
+               const constructor = vue.extend(LinkBubbleView)
 
-               this.component = new VueRenderer(LinkBubbleView, {
+               this.component = new VueRenderer(constructor, {
                        parent: this.editor.contentComponent,
                        propsData: {
                                editor: this.editor,

this.editor.contentComponent is undefined.

[max-nextcloud]

Turns out NcButton is the only vue element that causes problems here.