I haven't used Vue or the ProseMirror editor before so the following explanation might have some details wrong due to the assumptions I'm making.
When the editor changes to HTML mode a new "textarea" element is created and appended at the end of the editor. I checked how the editor behaves in Foundry by looking at the Journal. After comparing it to yours I noticed that your implementation has an additional div element (with the "editor-content" class) which holds the menu and the content. However, when the editor switches to HTML mode the textarea is being appended to the editor (so as a sibling of "editor-content") and this is causing it to to appear all the way at the bottom. If you are able to change that behavior so that it appends it inside of your "editor-content" then it should be fine. Alternatively you can switch [this line of code] to display: contents; and it should also work.
I haven't used Vue or the ProseMirror editor before so the following explanation might have some details wrong due to the assumptions I'm making.
When the editor changes to HTML mode a new "textarea" element is created and appended at the end of the editor. I checked how the editor behaves in Foundry by looking at the Journal. After comparing it to yours I noticed that your implementation has an additional div element (with the "editor-content" class) which holds the menu and the content. However, when the editor switches to HTML mode the textarea is being appended to the editor (so as a sibling of "editor-content") and this is causing it to to appear all the way at the bottom. If you are able to change that behavior so that it appends it inside of your "editor-content" then it should be fine. Alternatively you can switch [this line of code] to
display: contents;and it should also work.I hope that helps.