Vue component plugin unmount error

[andrei4002]

Not sure if it's related to my previous issue, but there's a second problem happening when running my vue component as a plugin (I can only seem to reproduce it when the vue component plugin block is the first block, and in some conditions mentioned below)

I created a demo repo to illustrate the issue (use the vue-unmount-error branch) https://github.com/andrei4002/editorjs-test

The scenario is

1. create the editor
2. add some block data (example: DummyPlugin (must be first), text, text, DummyPlugin, DummyPlugin, text)
3. (optional) hit save to have the data back on reload
4. hit remove editor, the following error shows up:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nextSibling')
    at nextSibling (vue.js?v=cda635e8:9158:31)
    at removeFragment (vue.js?v=cda635e8:7675:14)
    at remove2 (vue.js?v=cda635e8:7646:9)
    at unmount (vue.js?v=cda635e8:7624:9)
    at unmountComponent (vue.js?v=cda635e8:7692:7)
    at unmount (vue.js?v=cda635e8:7593:7)
    at render2 (vue.js?v=cda635e8:7727:9)
    at Object.unmount (vue.js?v=cda635e8:5234:11)
    at VueComponentPlugin.destroy (createVueComponentPlugin.ts?t=1693215024860:17:21)
    at _F.destroy (@editorjs_editorjs.js?v=cda635e8:1774:128)

although this error comes up within vue i'm not sure entirely what part of the workflow causes it, if it's an editor issue or a vue issue, and why only when it's the first block (I'm only getting this vue error in the context of using the vue component in the editor)

a few other things i noticed:

• choosing to delete the block from the menu has the same error effect (when the component is on the first block)
• adding a DummyPlugin in an existing editor, putting it on the first position and removing it or removing the editor right after doesn't seem to trigger this issue. but initializing the editor with the existing content that has the DummyPlugin on the first position seems to always trigger it
• following up on the above observation, if i load an editor with existing data that's in the "bad state" (DummyPlugin first), adding a text above it and hitting remove editor still triggers the error.
• adding the text above, hitting save, doing a full reload the page (which reinits the editor and sets the data), then removing the editor won't trigger the error
• in this "bad state" with a DummyPlugin as first block, if i don't try catch the vue unmounting process when the editor gets destroyed, the first vue component will trigger that error, and if there's other vue components as blocks later in the editor, these blocks won't trigger destroy, and the vue apps will remain in memory, although the editor doesn't exist anymore
• if i try catch the unmounting process from vue, in a scenario with more than one DummyPlugin, the firstDummyPlugin gets the error, the rest do get unmounted without any errors

[bettysteger]

I had the same error, but fixed it by having 1 single element in the vue component.

Vue allows only a single element as a template root. If multiple root elements are specified, unintended behaviors occur as follows: For single-file component with a . vue extension, Vue throws a compile error.

See https://deepscan.io/docs/rules/vue-multiple-template-root

Change your DummyPluginComponent.vue template to:

<template>
  <div>
    <div>[dummy plugin]</div>
    <input type="text">
  </div>
</template>