contentEditable as a prop for Region

[kakashy]

Hey there,
Awesome package! I was wondering if I can reinstate contentEditable as an optional property for the Regions plugin.
So, the plan is to add if (this.contentEditable) {this.content.contentEditable = 'true';} inside this method:

wavesurfer.js/src/plugins/regions.ts

Line 287 in 04efb91

public setContent(content: RegionParams['content']) {

and also commit the changes made:

private initMouseEvents() {
    const { element } = this;
    if (!element) return;
    // ....
    if (this.contentEditable && this.content) {
      this.content.addEventListener('blur', () => this.onContentBlur());
    }
  }

onContentBlur(event) {
  const oldText = this.content ? this.content.innerText : '';
  const newText = event.target.innerText;

  this.setOptions({ content: newText });

  const eventParams = { action: 'contentEdited', oldText, newText };
  this.emit('content-edited', eventParams);
}

My hunch is that the text container might not receive pointer events - even so, do you forsee any challenges that I might encounter in going this route? I'll appreciate any help I can get.

[katspaugh]

Sure, go ahead. I can’t say from the top of my head if the content element is clickable. I think it should have no reason not to be.

[kakashy]

Hey there,
I found an easy way to do this and I'll send a PR soon. I was wondering how I can invoke region-updated event. My implementation is https://github.com/kakashy/wavesurfer.js/blame/7168d4229c468ee766e98bbb326ef7f74c6c79bc/src/plugins/regions.ts#L296 but it doesn't seem to work.

[katspaugh]

It should be update-end.

[kakashy]

Thanks for the help. Please consider #3453