From 752594c69e6fffc5ea9e6b474a53ded772ebf56c Mon Sep 17 00:00:00 2001
From: Aaron Myatt <aaronmyatt@gmail.com>
Date: Sat, 17 Jan 2026 10:32:05 +0800
Subject: [PATCH] adds public methods to show / hide the toolbar

---
 src/overtype-webcomponent.js | 12 ++++++++++++
 src/overtype.js              | 24 ++++++++++++++++++++++++
 src/toolbar.js               | 21 +++++++++++++++++++++
 test/webcomponent.test.js    | 29 +++++++++++++++++++++++++++++
 4 files changed, 86 insertions(+)

diff --git a/src/overtype-webcomponent.js b/src/overtype-webcomponent.js
index f8eb107..f207a57 100644
--- a/src/overtype-webcomponent.js
+++ b/src/overtype-webcomponent.js
@@ -670,6 +670,18 @@ class OverTypeEditor extends HTMLElement {
   getEditor() {
     return this._editor;
   }
+
+  showToolbar() {
+    if (this._editor) {
+      this._editor.showToolbar();
+    }
+  }
+
+  hideToolbar() {
+    if (this._editor) {
+      this._editor.hideToolbar();
+    }
+  }
 }
 
 // Register the custom element
diff --git a/src/overtype.js b/src/overtype.js
index 4dd83fc..78742fd 100644
--- a/src/overtype.js
+++ b/src/overtype.js
@@ -1016,6 +1016,30 @@ class OverType {
       this.updatePreview();
     }
 
+    
+    /**
+     * reveal the toolbar if it is hidden
+     * create it if it does not exist
+     * @returns {void}
+     */
+    showToolbar(){
+      if (this.toolbar) {
+        this.toolbar.show();
+      } else {
+        this._createToolbar();
+      }
+    }
+
+    /**
+     * hide the toolbar if it exists
+     * @returns {void}
+     */
+    hideToolbar(){
+      if (this.toolbar) {
+        this.toolbar.hide();
+      }
+    }
+
     /**
      * Set theme for this instance
      * @param {string|Object} theme - Theme name or custom theme object
diff --git a/src/toolbar.js b/src/toolbar.js
index 76bae17..2c474a9 100644
--- a/src/toolbar.js
+++ b/src/toolbar.js
@@ -287,6 +287,27 @@ export class Toolbar {
     }
   }
 
+  /**
+   * Show the toolbar
+   */
+  show() {
+    if (this.container) {
+      this.container.classList.add('overtype-toolbar');
+      this.container.style.display = '';
+    }
+  }
+
+  /**
+   * Hide the toolbar, but do not destroy it
+   */
+  hide() {
+    if (this.container) {
+      this.container.style.display = 'none';
+      // .overtype-toolbar will override display:none, so we remove it
+      this.container.classList.remove('overtype-toolbar');
+    }
+  }
+
   /**
    * Destroy toolbar and cleanup
    */
diff --git a/test/webcomponent.test.js b/test/webcomponent.test.js
index 3783c9f..0a3fa97 100644
--- a/test/webcomponent.test.js
+++ b/test/webcomponent.test.js
@@ -467,5 +467,34 @@ setTimeout(() => {
       }
     }, 100);
   });
+
+
+  runTest('Show / hide toolbar programmatically via API', () => {
+    const container = dom.window.document.getElementById('test-container');
+    const editor = dom.window.document.createElement('overtype-editor');
+    container.appendChild(editor);
+
+    setTimeout(() => {
+
+      // Initially no toolbar
+      let instance = editor.getEditor();
+      if (instance.toolbar) throw new Error('Toolbar should not be present initially');
+
+      // Show toolbar
+      editor.showToolbar();
+      instance = editor.getEditor();
+      if (!instance.toolbar || !instance.toolbar.container.classList.contains('overtype-toolbar')) throw new Error('Toolbar should be present and visible after showToolbar()');
+
+      // Hide toolbar
+      editor.hideToolbar();
+      instance = editor.getEditor();
+      if (instance.toolbar.container.classList.contains('overtype-toolbar')) throw new Error('Toolbar should not be visible after hideToolbar()');
+
+      container.removeChild(editor);
+      console.log('  ✅ Toolbar show/hide API works correctly');
+
+    }, 100); // Allow initialization
+  });
+
   
 }, 200);
\ No newline at end of file