Editor scrolls on its own while typing

VincentValensky commented 1 year ago

Describe the bug.

When editing particularly large and complex passages, the editor exhibits behavior where each letter typed would also cause the passage window to scroll a little bit on its own, creating an unpleasant and disorienting experience.

Steps to reproduce:

I have tested this with large "lorem ipsum" passages, but they don't have this problem. The problem seems to occur under the following conditions:

Passage must be very large (typically over 2 times visible length).
Passage must include code (I think more code makes this more likely, not sure)
Having raw HTML tags may make this more likely.

Please find below a passage that exhibits this behavior. To reproduce, simply paste the entire thing in a new passage, scroll somewhere to the middle of it, and start typing. The passage will scroll on its own while you type.

<div id="title">$T[-Items and Posessions-]</div>

<div class="even_grid centered" style="--cols:3; text-align: left;"><div class="inv3">
**Neck:**
[(if: $speedAmulet is 1)[(display:"spider amulet wearing")] ]<neck| [(if: $necklace is 2 or 6 or $necklaceON is 1)[(display:"rux amulet wearing")] ]<neck|

**Wrists:**
(if: $bracelet is 1)[(link-repeat:'(display:"info.bracelet")')[(replace:?info1)[(display: "bracelet.recap")] ] ]

**Keychain:** 

$pers_keys[(link-repeat:'(display:"key")')[(replace:?info1)[<img src="https://xfiction.org/images/tr/interface/key1.png" height="150px" style="margin-bottom: -50px;">Set of keys that unlock the front gate, the front door, your room and the library.]]$I[Personal keys]

]$basement_keys[(link-repeat:'(display:"key")')[(replace:?info1)[<img src="https://xfiction.org/images/tr/interface/key1.png" height="150px" style="margin-bottom: -50px;">Unlocks The Crooked Elm's basement.]]$I[Basement key] 

]$ionut_keys[(link-repeat:'(display:"key")')[(replace:?info1)[<img src="https://xfiction.org/images/tr/interface/key1.png" height="150px" style="margin-bottom: -50px;">Set of keys you have stolen from the servant.]]$Io[Ionut's keys] 

](if: $elder_key is 1)[(link-repeat:'(display:"key2")')[(replace:?info1)[<img src="https://xfiction.org/images/tr/interface/key2.png" height="150px" style="margin-bottom: -50px;">A strange key with a skull that the Elder gave you.]]$R[Elder's key] 

](if: $cabin is 1)[(link-repeat:'(display:"key")')[(replace:?info1)[<img src="https://xfiction.org/images/tr/interface/key1.png" height="150px" style="margin-bottom: -50px;">You know that the cabin's key is hanging on a nail next to the window.]]$I[The Cabin's key]]
</div><div class="inv3">
**Pocket** 
[
(if: $speedAmulet is 0 and $elise_present is 3)[(display:"spider amulet pocket")  ](if: $necklace is 1 or $necklace>8 and $necklaceON is 0)[(display:"rux amulet pocket")  ]  

(if: $elise_present is 1)[(link-repeat:'<img src="https://xfiction.org/images/tr/interface/items/potion.png" height="75px" >')[(replace:?info1)[<img src="https://xfiction.org/images/tr/interface/potion.png" height="150px" style="margin-bottom: -50px;"> &nbsp&nbsp&nbsp&nbsp $I[A small green bottle:] it was given to you by Elise.]] ](if: $pheromones>0)[(link-repeat:'<img src="https://xfiction.org/images/tr/interface/items/phero.png" height="75px">')[(replace:?info1)[(replace: ?info1)[<img src="https://xfiction.org/images/tr/interface/phero.png" height="150px" style="margin-bottom: -50px;"> &nbsp&nbsp&nbsp&nbsp(if: $flaskful>0)[The perfume flask is $flaskful% full.
 &nbsp&nbsp&nbsp&nbsp (display:"puff1")&nbsp&nbsp&nbsp&nbsp(display:"puff3")&nbsp&nbsp&nbsp&nbsp(display:"puffmax")](else:)[The flask is empty.]]]
 ] ]
]<amulets|</div><div class="inv3">
**Other**

(if: $flowers is 1)[(link-repeat:'<img src="https://xfiction.org/images/tr/interface/thistles.png" height="75px">')[(replace:?info1)[<div class="inspect"><div class="insItem"><img src="https://xfiction.org/images/tr/interface/thistles.png"  style="max-width:60%; margin-bottom: -50px;"> </div><div class="insDesc">$I[A handful of thistles:] thorny but pretty, these could make a lovely bouquet for the right lady. </div></div>]] ](if: $wormBottle is 2)[(link-repeat:'<img src="https://xfiction.org/images/tr/interface/items/jar_worms.png" height="75px">')[(replace:?info1)[<img src="https://xfiction.org/images/tr/interface/items/jar_worms.png" height="150px" style="margin-bottom: -50px;"> $I[Wriggling jar:] it's full of all the worms you caught.]] ](if: $dispel is 1)[(link-repeat:'<img src="https://xfiction.org/images/tr/interface/items/dispel.png" height="75px">')[(replace:?info1)[<img src="https://xfiction.org/images/tr/interface/items/dispel.png" height="150px" style="margin-bottom: -50px;"> $I[Strange potion:] Felicia gave it to you to chase away the worms in the crypt.]] 

](if: $diary_found is 1)[(link-repeat:'<img src="https://xfiction.org/images/tr/interface/diary.png" height="75px">')[(replace:?info1)[<img src="https://xfiction.org/images/tr/interface/diary.png" height="150px" style="margin-bottom: -50px;"> $I[A diary:] just a blank book.]] 

](display:"yaga coin")
</div></div><div id="center"><img src="https://xfiction.org/images/tr/interface/eye.jpg" height="75px" >
[ $I[Click an item to examine it]  ]<info1| </div>

Expected behavior:

Scroll position should not be affected by typing.

Additional context on this problem.

I have had this problem in other similarly long passages too and can supply them if needed.

Twine version number

2.6.1

Does this problem occur with the web version of Twine or the desktop app?

Desktop app

What operating system does this problem occur on?

Windows

If this problem is occurring with the web version of Twine, what browser does it occur on?

Chrome/Chromium

Presubmission checklist

[ ] I am interested in working on code that would fix this bug. (This is not required to submit a bug report.)
[X] I have done a search and believe that an issue does not already exist for this bug in the GitHub repository.
[X] I have read and agree to abide by this project's Code of Conduct.

VincentValensky commented 1 year ago

May or may not be the same thing #1338 is describing

hituro commented 1 year ago

I think there is a range of bugs that are all related to the same starting point — editing a long passage with code in it.

Sometimes it manifests as the editor scrolling one line with each character typed, sometimes with the insertion point jumping to a new location, sometimes with the insertion point alternating between the correct position and the end of the passage text.

My suspicion is that all of these are just variants of the same underlying bug, which must be due to the editor, or the code highlighter, being confused as to the correct cursor position, or the matching scroll offset. Since it now seems clear that this happens in every StoryFormat, it must be something underlying to the editor itself.

hituro commented 1 year ago

Some additional notes, after a lot of testing today.

I could not reproduce this behaviour in SugarCube, Snowman, or Chapbook stories, but could reproduce it 100% in Harlowe. In a Harlowe story it was not necessary to have code, html, or syntax highlighting. The only requirements are:

The passage text must be longer than the editor
You must have scrolled down from the default position

After that, typing anywhere will cause the passage to scroll with each keypress for some number of keypresses. Once the scroll behaviour has stopped, further typing does not cause more scroll until you manually scroll the passage by any amount, at which point the behaviour repeats. This is not true if the scrolling causes new line to move to the bottom of the window, in which case it will continue to jerk up and down by one line for each character typed.

Here is a video capturing this incremental scroll.

https://user-images.githubusercontent.com/4206142/217520005-1237fee3-6c2a-40f5-bd9b-61465b96d0d4.mov

It also seems to be the case that the longer the passage, the more the scroll happens.

klembot commented 1 year ago

@hituro if this is limited to Harlowe only, I'm inclined to close this and ask that you follow up with that project repo. Does that sound OK to you?

hituro commented 1 year ago

@hituro if this is limited to Harlowe only, I'm inclined to close this and ask that you follow up with that project repo. Does that sound OK to you?

It has already been here, closed, opened there, closed, re-opened here ...

I couldn't reproduce on anything but Harlowe, but on the Harlowe issue, people (me?) said they could: https://foss.heptapod.net/games/harlowe/-/issues/295

I have no objection to it being on the right issues list, but having it ping-pong between each isn't superb. In any case, it's not my issue, so I will leave that to @VincentValensky :)

klembot commented 8 months ago

It sounds like this is related to Harlowe's editor extensions. I'll close for now, but if there's something about how Twine is using CodeMirror that is causing this, let's re-open with more info.

klembot / twinejs