Disclaimer: My usage of ReactJS is very limited so there are likely things a developer more experienced with it would point out.
Are there too many comments in the code?
It doesn't look like too many comments. Anything that helps readers (including your future self) is a good thing. It isn't like this "not funny" code that has excessive, non-constructive comments. It is believed that some object-oriented code can be self-documenting but it would still be necessary to explain what methods/functions do, as well as describe any parameters and return values.
It's pretty long: so would it be better split into more than one source file and if so how would that help and how/where should it be split?
My natural inclination is to suggest that the code be split so each class/interface is in a separate file. I see that a lot of the code is comprised of functions... some of those could possibly be put into one or more files for helper functions.
And/or any other review comment you think appropriate.
Most of the methods don't appear to be overly lengthy. I see MutableState:: replaceElement() looks like an outlier so that would be a candidate for being broken up into separate smaller methods. And reducer() is also a bit lengthy, though it may be challenging to break that up. I do see a lot of repeated lines in that function - e.g. calling getMutableState() to create a MutableState object and then ultimately returning the return value from calling getState() on that object.
This code makes good use of const for any variable that doesn't get re-assigned and let for variable that may be re-assigned, as well as object destructuring.
Correct me if I am wrong, but MutableState::setSelectionBoth() should be able to be simplified from:
setSelectionBoth(where: number): void { this.selection.start = where; this.selection.end = where;}
to:
setSelectionBoth(where: number): void { this.selection.end = this.selection.start = where;}There are some for loops, like the one in renderState() that could be simplified with a for...of loop instead -
e.g.
for (let wordIndex = 0; wordIndex < words.length; ++wordIndex) { const word = words[wordIndex];
This could be simplified to:
for (const word of words) {That way you don't have to increment wordIndex manually or use it to access word from words with the bracket syntax.