From 5320a23f300fa2b96f670b5a44f2250ab3831eec Mon Sep 17 00:00:00 2001
From: Joseph Waweru <josephwawerug@gmail.com>
Date: Wed, 27 Dec 2023 15:59:54 +0300
Subject: [PATCH 1/2] feat: [regions] add contenteditable property to content

---
 src/plugins/regions.ts | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/plugins/regions.ts b/src/plugins/regions.ts
index b87870281..9f12945a9 100644
--- a/src/plugins/regions.ts
+++ b/src/plugins/regions.ts
@@ -1,3 +1,4 @@
+0
 /**
  * Regions are visual overlays on the waveform that can be used to mark segments of audio.
  * Regions can be clicked on, dragged and resized.
@@ -59,6 +60,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> {
@@ -73,6 +76,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()
@@ -86,6 +90,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()
@@ -223,6 +228,13 @@ class SingleRegion extends EventEmitter<RegionEvents> {
       () => this.onStartMoving(),
       () => this.onEndMoving(),
     )
+
+    if (this.contentEditable && this.content) {
+      this.content.addEventListener('click', (e) => this.onContentClick(e))
+    }
+    if (this.contentEditable && this.content) {
+      this.content.addEventListener('blur', (e) => this.onContentBlur(e))
+    }
   }
 
   private onStartMoving() {
@@ -273,6 +285,16 @@ class SingleRegion extends EventEmitter<RegionEvents> {
     this.emit('update-end')
   }
 
+  private onContentClick(event: MouseEvent) {
+    event.stopPropagation()
+    const contentContainer = event.target as HTMLDivElement
+    contentContainer.focus()
+  }
+
+  public onContentBlur(event: FocusEvent) {
+    this.emit('update')
+  }
+
   public _setTotalDuration(totalDuration: number) {
     this.totalDuration = totalDuration
     this.renderPosition()
@@ -296,6 +318,9 @@ class SingleRegion extends EventEmitter<RegionEvents> {
       this.content.style.padding = `0.2em ${isMarker ? 0.2 : 0.4}em`
       this.content.style.display = 'inline-block'
       this.content.textContent = content
+      if (this.contentEditable) {
+        this.content.contentEditable = 'true'
+      }
     } else {
       this.content = content
     }

From fa51ae2dbb893af303cb22f669f2bf95bd852368 Mon Sep 17 00:00:00 2001
From: Joseph Waweru <josephwawerug@gmail.com>
Date: Fri, 29 Dec 2023 07:23:43 +0300
Subject: [PATCH 2/2] fix: send update event after content has been edited

---
 src/plugins/regions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/regions.ts b/src/plugins/regions.ts
index 9f12945a9..2ab3e77d5 100644
--- a/src/plugins/regions.ts
+++ b/src/plugins/regions.ts
@@ -292,7 +292,7 @@ class SingleRegion extends EventEmitter<RegionEvents> {
   }
 
   public onContentBlur(event: FocusEvent) {
-    this.emit('update')
+    this.emit('update-end')
   }
 
   public _setTotalDuration(totalDuration: number) {