adds public methods to show / hide the toolbar

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

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

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
    */

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);