Skip to content

adds public methods to show / hide the toolbar#95

Open
aaronmyatt wants to merge 1 commit intopanphora:mainfrom
aaronmyatt:feature/toolbar-show-and-hide
Open

adds public methods to show / hide the toolbar#95
aaronmyatt wants to merge 1 commit intopanphora:mainfrom
aaronmyatt:feature/toolbar-show-and-hide

Conversation

@aaronmyatt
Copy link

@aaronmyatt aaronmyatt commented Jan 17, 2026

The changes in this PR enable users of Overtype to programatically toggle the toolbar on and off, preserving the in memory representation to save redundant work.

This has been a challenge I've worked around while building my tool: Waystation which uses Overtype as its editor.

You can explore my research and plan for this PR on Waystation itself! https://waystation.aaronmyatt.com/#!/?repo=panphora%2Fovertype

New public methods

Two new public methods are available on the editor instance to showToolbar or hideToolbar

src/overtype.js +1025

   1020:     /**
   1021:      * reveal the toolbar if it is hidden
   1022:      * create it if it does not exist
   1023:      * @returns {void}
   1024:      */
=> 1025:     showToolbar(){
   1026:       if (this.toolbar) {
   1027:         this.toolbar.show();
   1028:       } else {
   1029:         this._createToolbar();
   1030:       }

Toolbar controls itself

The editor public methods delegate to the toolbar. I'd like feedback on whether adding/removing .overtype-toolbar is the wisest approach, or we can add a dedicated .overtype-toolbar-hidden class with a higher priority display style.

src/toolbar.js +293

   288:   }
   289: 
   290:   /**
   291:    * Show the toolbar
   292:    */
=> 293:   show() {
   294:     if (this.container) {
   295:       this.container.classList.add('overtype-toolbar');
   296:       this.container.style.display = '';
   297:     }
   298:   }

The web component api has been extended similarly too

src/overtype-webcomponent.js +674

   669:    */
   670:   getEditor() {
   671:     return this._editor;
   672:   }
   673: 
=> 674:   showToolbar() {
   675:     if (this._editor) {
   676:       this._editor.showToolbar();
   677:     }
   678:   }
   679: 

Functionality is tested through the web component

test/webcomponent.test.js +472

   467:       }
   468:     }, 100);
   469:   });
   470: 
   471: 
=> 472:   runTest('Show / hide toolbar programmatically via API', () => {
   473:     const container = dom.window.document.getElementById('test-container');
   474:     const editor = dom.window.document.createElement('overtype-editor');
   475:     container.appendChild(editor);
   476: 
   477:     setTimeout(() => {

Summary by cubic

Adds public methods to show and hide the toolbar, enabling programmatic control without destroying the instance. This lets integrations toggle the UI while preserving state and avoiding redundant work.

  • New Features
    • OverType: showToolbar (creates if missing) and hideToolbar (hides if present).
    • Toolbar: show/hide toggle display and the .overtype-toolbar class to avoid CSS overrides.
    • Web component: showToolbar and hideToolbar delegate to the editor; tests cover visibility and state.

Written for commit 752594c. Summary will update on new commits.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant