react-transcript-editor
react-transcript-editor copied to clipboard
Bug: unexpected scroll behavior after edit on long transcript
Describe the bug While editing a long transcript, the transcript will automatically scroll to the bottom of the current block after autosaving.
To Reproduce Steps to reproduce the behavior:
- Begin editing a long transcript (see gif below)
- Stop editing, wait for autosave
- After autosave completes, the transcript will jump to the end of the edited block
Expected behavior The transcript should not scroll unexpectedly.
Screenshots
Desktop
- OS: macOS
- Browser: (all) chrome, safari, firefox
- Version: latest
This happens on Windows machines as well, latest version.
Hey @shea12 & @mcwhitaker!
Sorry we didn’t see that issue - it's been a long while since we've touched RTE and have been on other projects (but we’re really trying to carve some time out in the future for it).
@mcwhitaker mentioned you were keen to explore a fix yourself in the meantime - more than welcome to!
The code is very messy and hacky for sure so I imagine it'd be a real struggle haha. Lots of React things have moved on since we prototyped this (we are a Lab after all!)
We're aware of a few bugs to do with focus / cursor position and they are definitely the most jarring and experience-impeding parts to editing a transcript. This is handled in Draft.js by the SelectionState
(Draft docs link). If you've not dealt with Draft.js before, I gave a quick overview in a talk a while back that may or may not be helpful!
Once you start typing in the editor, all things come through this entry point here in the TimedTextEditor
component.
Most of these bugs tend to happen once we autosave and attempt to re-align timecodes we have (in lines 96-97). It kicks off quite a few bulky operations but that's where to start I think.
We were thinking of reducing / turning off the autosave at some point as it does tend to cause problems.
Hope that helps if you were keen to dig into it but no worries as it is a headache!
On a sidenote though - would be great to know more about your transcription use case - and might be useful if we ever get round to a V2!
Thanks, @jamesdools, for the pointers! We will try to resolve this issue and submit a PR if we succeed.
@jamesdools - As for our use case, we are using your transcript editor in the context of the Audiovisual Metadata Platform (AMP) project. We are piloting the idea of using AI tools for metadata generation for large collections of A/V materials. Machine-learning and AI tools are added to a workflow, the output of one potentially used as the input of the next tool in the flow. One of the categories of AI tools we are using is STT and the BBC Transcript Editor is used to correct the machine-generated transcripts. Corrected transcripts yield better results than uncorrected ones, for instance, when used as input to NLP tools.