Ensure compatability between TimelinePlugin and RegionsPlugin (#3363)

* Remove pointer events from TimelinePlugin wrapper. Use canvases div as RegionsPlugin draggable target.

* Revert wrapper to private

* Revert addition of part attribute

---------

Co-authored-by: Alexander Diaz <[email protected]>

Author: alexgdiaz98

src/plugins/regions.ts

@@ -509,8 +509,8 @@ class RegionsPlugin extends BasePlugin<RegionsPluginEvents, RegionsPluginOptions
    * Returns a function to disable the drag selection.
    */
   public enableDragSelection(options: Omit<RegionParams, 'start' | 'end'>): () => void {
-    const wrapper = this.wavesurfer?.getWrapper()?.querySelector('div')
-    if (!wrapper) return () => undefined
+    const wrapper = this.wavesurfer?.getWrapper()?.querySelector('div.canvases')
+    if (!wrapper || !(wrapper instanceof HTMLElement)) return () => undefined
 
     const initialSize = 5
     let region: Region | null = null

src/plugins/timeline.ts

@@ -103,6 +103,7 @@ class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOpti
   private initTimelineWrapper(): HTMLElement {
     const div = document.createElement('div')
     div.setAttribute('part', 'timeline')
+    div.setAttribute('style', 'pointer-events: none;')
     return div
   }