Feat: [Regions] contenteditable content (#3453)

* feat: [regions] add contenteditable property to content

* fix: send update event after content has been edited

src/plugins/regions.ts

@@ -61,6 +61,8 @@ export type RegionParams = {
   maxLength?: number
   /** The index of the channel */
   channelIdx?: number
+  /** Allow/Disallow contenteditable property for content */
+  contentEditable?: boolean
 }
 
 class SingleRegion extends EventEmitter<RegionEvents> {
@@ -75,6 +77,7 @@ class SingleRegion extends EventEmitter<RegionEvents> {
   public minLength = 0
   public maxLength = Infinity
   public channelIdx: number
+  public contentEditable = false
 
   constructor(params: RegionParams, private totalDuration: number, private numberOfChannels = 0) {
     super()
@@ -88,6 +91,7 @@ class SingleRegion extends EventEmitter<RegionEvents> {
     this.minLength = params.minLength ?? this.minLength
     this.maxLength = params.maxLength ?? this.maxLength
     this.channelIdx = params.channelIdx ?? -1
+    this.contentEditable = params.contentEditable ?? this.contentEditable
     this.element = this.initElement()
     this.setContent(params.content)
     this.setPart()
@@ -240,6 +244,11 @@ class SingleRegion extends EventEmitter<RegionEvents> {
         this.drag && this.emit('update-end')
       },
     )
+
+    if (this.contentEditable && this.content) {
+      this.content.addEventListener('click', (e) => this.onContentClick(e))
+      this.content.addEventListener('blur', () => this.onContentBlur())
+    }
   }
 
   public _onUpdate(dx: number, side?: 'start' | 'end') {
@@ -280,6 +289,17 @@ class SingleRegion extends EventEmitter<RegionEvents> {
     this.emit('update-end')
   }
 
+  private onContentClick(event: MouseEvent) {
+    event.stopPropagation()
+    const contentContainer = event.target as HTMLDivElement
+    contentContainer.focus()
+    this.emit('click', event)
+  }
+
+  public onContentBlur() {
+    this.emit('update-end')
+  }
+
   public _setTotalDuration(totalDuration: number) {
     this.totalDuration = totalDuration
     this.renderPosition()
@@ -309,6 +329,9 @@ class SingleRegion extends EventEmitter<RegionEvents> {
     } else {
       this.content = content
     }
+    if (this.contentEditable) {
+      this.content.contentEditable = 'true'
+    }
     this.content.setAttribute('part', 'region-content')
     this.element.appendChild(this.content)
   }