From f52e9ab8709b72a401cca00e1b9c3208ea9dbfd2 Mon Sep 17 00:00:00 2001
From: Vincent Emonet <vincent.emonet@gmail.com>
Date: Mon, 21 Oct 2024 17:05:25 +0200
Subject: [PATCH] feat: grouped the controlbar and Yasqe div elements in a div
 with class 'editorwrapper'. This would enable devs using Yasgui to easily add
 a div that goes alongside the controlbar and editor, while YASR still goes
 full width

---
 packages/yasgui/src/Tab.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/yasgui/src/Tab.ts b/packages/yasgui/src/Tab.ts
index ef0b08c..7f43445 100644
--- a/packages/yasgui/src/Tab.ts
+++ b/packages/yasgui/src/Tab.ts
@@ -82,22 +82,28 @@ export class Tab extends EventEmitter {
     this.rootEl.setAttribute("role", "tabpanel");
     this.rootEl.setAttribute("aria-labelledby", "tab-" + this.persistentJson.id);
 
-    const wrapper = document.createElement("div");
+    // We group controlbar and Yasqe, so that users can easily .appendChild() to the .editorwrapper div
+    // to add a div that goes alongside the controlbar and editor, while YASR still goes full width
+    // Useful for adding an infos div that goes alongside the editor without needing to rebuild the whole Yasgui class
+    const editorWrapper = document.createElement("div");
+    editorWrapper.className = "editorwrapper";
+    const controlbarAndYasqeDiv = document.createElement("div");
     //controlbar
     this.controlBarEl = document.createElement("div");
     this.controlBarEl.className = "controlbar";
-    wrapper.appendChild(this.controlBarEl);
+    controlbarAndYasqeDiv.appendChild(this.controlBarEl);
 
     //yasqe
     this.yasqeWrapperEl = document.createElement("div");
-    wrapper.appendChild(this.yasqeWrapperEl);
+    controlbarAndYasqeDiv.appendChild(this.yasqeWrapperEl);
+    editorWrapper.appendChild(controlbarAndYasqeDiv);
 
     //yasr
     this.yasrWrapperEl = document.createElement("div");
-    wrapper.appendChild(this.yasrWrapperEl);
 
     this.initTabSettingsMenu();
-    this.rootEl.appendChild(wrapper);
+    this.rootEl.appendChild(editorWrapper);
+    this.rootEl.appendChild(this.yasrWrapperEl);
     this.initControlbar();
     this.initYasqe();
     this.initYasr();