Hide Obsidian app header when the softkeyboard is open

Share & showcase
,
5

Oh, I took a look at the CSS again. That transition is nice! Here’s how to plug it into the JS I made.

This takes that CSS and then makes it so the part that hides runs when body gets a class called hide-view-header applied to it.

body.hide-view-header .workspace-leaf-content[data-type="markdown"] .view-header {
	border-bottom: 0;
	height: 0;
	overflow: hidden;
}

.workspace-leaf-content[data-type="markdown"] .view-header {
	transition: height 250ms;
}

The JavaScript changes:
document.body.style.setProperty('--headerview', 'none'); is replaced with document.body.classList.add('hide-view-header');
and
document.body.style.setProperty('--headerview', 'flex'); is replaced with document.body.classList.remove('hide-view-header');.

const capacitorapp = window.Capacitor?.Plugins?.App;
export async function invoke(app) {
	let keyboardopen = false;
	if (capacitorapp && capacitorapp.addListener) {
		window.Capacitor?.Plugins?.Keyboard?.addListener('keyboardWillShow', () => {
			keyboardopen = true;
			if (document.activeElement.className == 'view-header-title') {
				if (!document.activeElement.onblur) {
					document.activeElement.onblur = function() {
						if (keyboardopen) document.body.classList.add('hide-view-header');
					};
				}
				return;
			}
			document.body.classList.add('hide-view-header');
		});

		window.Capacitor?.Plugins?.Keyboard?.addListener('keyboardWillHide', () => {
			keyboardopen = false;
			document.body.classList.remove('hide-view-header');
		});
	}
}

So now this is the best of both worlds; detecting when the keyboard is open more natively without needing to check if the mobile-toolbar is visible plus a nice CSS transition.