`<region contentEditable="true">` in Regions plugin

[ApayRus]

Hi. Is there a way to use contentEditable="true" for <region> in Regions plugin? This feature will make Wavesurfer instantly the best subtitles editor. I tried it in browser now, and excited about it. Tomorrow I will try to realize it in my app. Please share your thoughts.

[thijstriemstra]

@ApayRus sounds like a great enhancement, pull requests are welcome!

[ApayRus]

@thijstriemstra I am using youtube as a backend :) with ytdl-core (node.js youtube-dl alternative) and I faced a couple of problems:

1. Cors (xhr options didn't help me, and as I know I should move peaks reading to server),
2. 1-hour length video (150 mb) kills my browser tab. But 50 mb audio from the same video works fine (renders waveform in 1-2 seconds, which surprised me).

Now I am reading issues related to server side peaks generations :)

Then I will try to make Pull Request.

[vitalii-bulyzhyn]

Is there any updates on this issue?

[ApayRus]

@vitalii-bulyzhyn

Is there any updates on this issue?

Yesterday I started to work on it :)

My idea is to add new param on initializing region plugin: contentEditable: true. It will add editable div inside each region (with text of phrases - {start, end, text}).

<region start end>
  <div contentEditable="true">text</div>
  <handleLeft />
  <handleRitght />
</region>

After text editing, event 'region-changed' will be fired with new region (new text inside).

[ApayRus]

@vitalii-bulyzhyn I opened PR with these features (editableContent + removeButton) :smile_cat: