Speaker dropdown select -v2

[pietrop]

Is your Pull Request request related to another issue in this repository ?

Improving #208, #141 - #141 (comment)

alternative approach to #209, with no external dependencies introduced.

Describe what the PR does

when you click on a speaker label, it could also have an autocomplete dropbdown of the speakers that have already been used.

State whether the PR is ready for review or whether it needs extra work

Ready for review + one small draftJs bug #210 (comment)

Additional context

Initially considered to do an auto complete dropdown as suggested by @scentless-apprentice
and tried to use react-select in this PR #209 to help with that. But then decided to scrap it and use html select element directly, combining it with features from #208

Other considerations

• auto complete is neat, but perhaps out of scope for a version 1. Based on anecdotal evidence from user interview, it's unlikely the number of speakers per transcripts will exceed 5 at most for the majority of use case, with some edge cases where it could go up to 10 (we are talking about audio/video interview for factual/documentary production).
• There is also further complications in making content of WrapperBlock editable, I think we set the focus of cursor to be on the text of the editor only, and forgot how we did it, to be able to look into how to tweak that. However using select combined with prompt that is not necessary for a first version.

[pietrop]

Nearly there, just have to figure out one small 🐛

[pietrop]

Feature checklist

• Can change a speaker by creating a new speaker

• Can change all speakers (with a certain label) by creating a new speaker

• Can change a speaker by choosing from dropdown selection

• Can change all speakers (with a certain label) by choosing from dropdown selection

[pietrop]

1. ✅

All seems good, the features seem to be working as expected.

2. 🐛

However when using select inside the WrapperBlock get an error 🤷‍♂

Uncaught TypeError: Cannot read property 'nodeType' of null
    at editOnInput

I think this is a draftJs problem, see facebookarchive/draft-js#1085

3. 🚀

I've also updated draftJs to the latest version as the console kept complaining that current version of draft uses an older version of React.

[pietrop]

Raised issue facebookarchive/draft-js#2204

[emettely]

Sorry capturing GIFs don't work with licecap (probably to do with Firefox...) :( so having to use old school image capturing.

In a more narrow set up (960) the drop-down seems to disappear.

1 Click speaker

2 Drop down menu disappears

3 ... but not really

Random guess-clicking shows it's still there.

[emettely]

Would be nice to fix

Ordering of string "numbers" is 1, 100, 11, 2

Just capturing this: the ordering of numbers is not the greatest, but this is the nature of treating numbers as strings. As @pietrop said, if people are thinking to only have up to 5 speakers (also assuming that they have real names not numbers), it's not a problem.

Long speaker names overlap with button

[pietrop]

via @emettely possible fix to investigate

https://draftjs.org/docs/advanced-topics-block-components.html#recommendations-and-other-notes

If your custom block renderer requires mouse interaction, it is often wise to temporarily set your Editor to readOnly={true} during this interaction. In this way, the user does not trigger any selection changes within the editor while interacting with the custom block. This should not be a problem with respect to editor behavior, since interacting with your custom block component is most likely mutually exclusive from text changes within the editor.