Speakername is editable even when edit function is disabled

[murezzda]

Describe the bug
Setting isEditable to false does not prevent editing of speaker names.

To Reproduce
Steps to reproduce the behavior:

1. Set isEditable in the TranscriptEditor component to false.
2. Click on speaker label to edit the speaker.

Expected behavior
Speakers are also disabled from edits if isEditable is false

Additional context
If this change is implemented, maybe remove the edit-icon from the speaker.

[pietrop]

Good catch, as you might remember from PR #103 in

Leaving some notes on possible things to look at to address this. it might be a matter of

• Passing the param isEditable from TimedTextEditor to WrapperBlock.
• adding a if in TimedTextEditor/WrapperBlock.js in the handleOnClickEdit function to check for he isEditable param.

and to remove the icon if not editable (good call)

• In WrapperBlock speakerElement would need the isEditable param so that in the SpeakerLabel component it could know when to hide the speaker icon.

[pietrop]

Hi @RizwanSyed357
Thanks for reaching out and welcome to the project!

The text is editable checkbox, is where you can toggle the isEditable attribute for TranscriptEditor in the demo app - (click load demo first)

this prop is being passed to TimedTextEditor in TranscriptEditor - and then in TimedTextEditor state

At the moment to isEditable attribute is implemented at line #L104 of TimedTextEditor under the DraftJS onChange event listener

if it's set to true then changes are saved if false then doesn't update state, making component read only.

---

This is how it is currently implemented, there might be room for a refactor using draftJs readOnly prop.

---

re more specifically with this issue of not allowing to edit speakers when isEditable is set to false for TranscriptEditor these are some of the steps from the previous comment worth exploring

let me know if you have any further questions or any of this is not clear, happy to help.

[pietrop]

Hi @RizwanSyed357,

I tried readOnly that didn't seem to work, unless I am missing something from the draftJs docs.

But yes, feel free to raise a PR happy to have a look, and see if we can figure this out, I suspect there's something to do with propagating changes from TimedTextEditor to WrapperBlock
and the communication between those two components.

There's another PR where we have tried to address some of the inter component communication to reduce unnecessary re-renders #160 which is still pending review, but might help.