Tinacms: html WYSIWYG component - link modal position is displaced by scrolling text input

[aratner]

Description

When you have enough copy in the text input (of the html WYSIWYG component) to get a scrollbar, the link edit/add modal will position itself as far as you scroll within that text input (within the sidebar, outside the text input). It will even increase the height of the sidebar itself (if there is a lot text and you can scroll far). Originally thought the modal wasn't working, but then found it way at the bottom, past all the component inputs at the bottom of the newly created blank space.

Seems sort of similar to #735, but in the sidebar.

Steps to reproduce

1. Paste approximately 700+ characters of text (or enough to get a scroll) into the input of an html WYSIWYG component. Paste more if you want to see how far it will travel.

2. Scroll to the bottom within the text input

3. Add/edit a link to a word at the bottom.

Expected result

Link modal should not position further than height/width of html WYSIWYG.

Environment

Tinacms Package Versions

```├─┬ [email protected]
│ └─┬ [email protected]
│ ├── @tinacms/[email protected]
│ ├── @tinacms/[email protected]
│ ├─┬ @tinacms/[email protected]
│ ├─┬ @tinacms/[email protected]
│ ├─┬ @tinacms/[email protected]
│ ├── @tinacms/[email protected]
│ ├── @tinacms/[email protected]
│ ├── @tinacms/[email protected]
│ ├─┬ @tinacms/[email protected]
│ ├─┬ @tinacms/[email protected]
│ ├── @tinacms/[email protected]
│ ├── @tinacms/[email protected]
│ ├─┬ @tinacms/[email protected]
│ ├─┬ @tinacms/[email protected]
│ ├─┬ @tinacms/[email protected]
├─┬ [email protected]
│ ├─┬ @tinacms/[email protected]
│ └── @tinacms/[email protected]
├─┬ [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ ├─┬ [email protected]

```

Tools

| Tool | Version |
| ------- | ------- |
| browser | Chrome Version 83.0.4103.116 |
| os | macOS Sierra Version 10.12.6 |
| node | v13.14.0 |
| npm | 6.14.5 |
| Gatsby CLI | 2.12.52 |
| Gatsby | 2.23.3 |

[kendallstrautman]

@spbyrne some modal goodness 😊 although I'm not sure if this is @DirtyF & @jpuri territory since it seems specific to the WYSIWYM.

[DirtyF]

Most of the WYSIWYG editing experience has been designed with Inline editing in mind as it's a nicer experience to be able to edit a long portion of text on the page. @aratner Could you use inline WYSIWYG here instead?

[aratner]

@DirtyF ok good to know will give inline a try!

[daho-turner]

also an issue for me. :(
tried using the inline WYSIWYG editor but having a slew of other issues with that. I'm thinking because there my forms are nested in layers of components.

any chance there might be a quick (not too dirty) fix for the non-inline WYSIWYG component? A scrollTo perhaps?