Moving cursor no longer puts focus on timestamp and speaker labels

[murezzda]

Is your Pull Request request related to another issue in this repository ?
This PR addresses #98.

Describe what the PR does
Added contentEditable={ false } to speaker and timecode elements. This prevents the cursor from entering the timecode element. The cursor still selects speaker element when moving cursor out of the last character of a block, but not when switching between blocks directly.

State whether the PR is ready for review or whether it needs extra work
Cursor still selects speaker element when moving cursor out of the last character of a block. This needs to be fixed before review.

[pietrop]

That's great thanks @murezzda

Cursor colour

I found it difficult to follow where the cursor is when scrolling down the text, so thought might be a good idea to give it a different colour, eg red or blue?

eg

[contenteditable] {
  caret-color: red;
}

But perhaps scoped only to the Timed Text Editor (otherwise it will effect every other conte editable on the page on the parent application)

In the body of the text it works fine 🎉

Issue when reaching top of page

There seems to be an edge case when reaching the top of the page and wanting to navigate back down.

When reached top of page if click arrow up cursor moves to the sidebar scroll rather then the cursor.
if that makes sense? see gif below.

To reproduce

• Click in the timed text editor
• Arrow up ↑ all the way to the end of the timed text editor
• Arrow down ↓
• You should notice that the cursor is disappeared and the arrow now controls the "sidebar" for the timed text editor.

As a side note, this does not seem to happen in the current master (try in demo - load demo)

[pietrop]

In WrapperBlock.js ( line 104 )it seems like a fix might be to add the contentEditable={ false } to the div that contains both the speakerElement and the timecodeElement only and with that change it seems to work fine 🎉

<div className={ style.WrapperBlock }>
        <div className={ style.markers }
+      contentEditable={ false }
-   
    >
          {this.props.blockProps.showSpeakers ? speakerElement : ''}
          {this.props.blockProps.showTimecodes ? timecodeElement : ''}
        </div>
        <div className={ style.text }>
          <EditorBlock { ...this.props } />
        </div>
      </div>

[murezzda]

Hi @pietrop, this does solve this problem indeed. Thanks a lot, I've pushed an updated version already.

[pietrop]

Awesome thanks @murezzda !

[murezzda]

Hi @pietrop

I've just wanted to follow up on your comment about the cursor color. I think a more prominent cursor would be a great idea.