fix(editor): enhance editor readiness and connection handling

[enjeck]

📝 Summary

In Tables, I was seeing the following errors in the browser console. For large tables with many rich text cells, there are thousands of these logs. This gets rid of them:

editor.js:77 [Vue warn]: It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example.

found in

---> <NcPopover>
       <NcActions>
         <ActionList> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Menu/ActionList.vue
           <MenuBar> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Menu/MenuBar.vue
             <MainContainer> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/MainContainer.vue
               <Wrapper> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/Wrapper.vue
                 <MarkdownContentEditor> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/MarkdownContentEditor.vue
                   <Root>
render @ editor.js:77
window.OCA.Text.createEditor @ editor.js:282Understand this error
useConnection.ts:77 [Vue warn]: injection "Symbol(text:opendata)" not found.

found in

---> <ActionAttachmentUpload> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Menu/ActionAttachmentUpload.vue
       <MenuBar> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Menu/MenuBar.vue
         <MainContainer> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/MainContainer.vue
           <Wrapper> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/Wrapper.vue
             <MarkdownContentEditor> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/MarkdownContentEditor.vue
               <Root>

render @ editor.js:77
window.OCA.Text.createEditor @ editor.js:282Understand this error
useEditorWidth.ts:87 [Vue warn]: injection "Symbol(text:editor:width)" not found.

found in

---> <ContentContainer> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/ContentContainer.vue
       <MainContainer> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/MainContainer.vue
         <Wrapper> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/Wrapper.vue
           <MarkdownContentEditor> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/MarkdownContentEditor.vue
             <Root>
render @ editor.js:77
window.OCA.Text.createEditor @ editor.js:282Understand this error
editor.js:77 [Vue warn]: "class" is a reserved attribute and cannot be used as component prop.

found in

---> <DragHandleVue>
       <FloatingButtons> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/FloatingButtons.vue
         <ContentContainer> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/ContentContainer.vue
           <MainContainer> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/MainContainer.vue
             <Wrapper> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/Wrapper.vue
               <MarkdownContentEditor> at /Users/cleopatra/Desktop/nc/nextcloud-docker-dev/workspace/server/apps-extra/text/src/components/Editor/MarkdownContentEditor.vue
                 <Root>

editor.js:82 Error: [tiptap error]: The editor view is not available. Cannot access view['dom']. The editor may not be mounted yet.
    at Object.get (index.js:4696:17)
    at VueComponent.beforeDestroy (index.js:56:29)
    at invokeWithErrorHandling (vue.runtime.esm.js:3033:61)
    at callHook$1 (vue.runtime.esm.js:4048:13)
    at Vue2.$destroy (vue.runtime.esm.js:3818:9)
    at destroy (vue.runtime.esm.js:4463:35)
    at invokeDestroyHook (vue.runtime.esm.js:6724:17)
    at invokeDestroyHook (vue.runtime.esm.js:6730:17)
    at VueComponent.patch2 [as __patch__] 

🚧 TODO

• ...

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits
• Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
• Documentation (README or documentation) has been updated or is not required

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[max-nextcloud]

Let's go through the errors one by one...

It looks like you are using a custom button as a or other popover #trigger.

This is caused in nextcloud-vue 8 when mounting a hidden button with a popover. We mount the menu bar hidden and show it when the editor is ready.

nextcloud-libraries/nextcloud-vue#7975 will fix this once it has been released and the release is used.

I don't remember the original intention behind rendering the menu bar hidden and then showing it rather than only rendering it when the editor is ready. I suspect an attempt at preventing layout changes or improving load performance as the emoji picker in the menu bar takes a long time to load.

Unless there are other benefits from rendering the menu bar late I'd prefer to wait for the nextcloud-vue fix.

[max-nextcloud]

injection "Symbol(text:opendata)" not found.

This is in ActionAttachmentUpload as can be seen in the trace. Do you allow uploading attachments to texts in tables?

Otherwise the upload menu items should not be rendered I think. This error also was shown within the createTable api call. Fix for that is here: 931d82c
I think a similar fix could work here unless you actually want to have a collaborative editing session with attachment uploads.

[max-nextcloud]

injection "Symbol(text:editor:width)" not found.

Also happened in the createTable api. Is also fixed for createTable by 931d82c (the EditorWidthKey part). I think a similar fix would be good here.

[max-nextcloud]

"class" is a reserved attribute and cannot be used as component prop.

This is caused by an invalid use of the class attribute in tiptap. https://github.com/ueberdosis/tiptap/blob/develop/packages/extension-drag-handle-vue-2/src/DragHandle.ts#L53-L56

    class: {
      type: String as PropType<DragHandleProps['class']>,
      default: 'drag-handle',
    },

class is not allowed as a prop name in vue2. I think this will be fixed by migrating to vue3 or by forking that tiptap repo to change it. It cannot be fixed in tiptap upstream right now because the class attribute is part of the API and people may be relying on it.

[mejo-]

@enjeck @max-nextcloud is this PR still a thing or shall we close it?