mobile-keyboard.js (2.1 KB)

 1 let initialViewportHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
 2 
 3 // Mobile keyboard detection
 4 export function isMobileDevice() {
 5 	return window.matchMedia("(pointer: coarse), (pointer: none)").matches;
 6 }
 7 
 8 export function exitMobileKeyboardMode(editorView, updatePreviewCallback) {
 9 	const editorPane = document.querySelector('.editor-pane');
10 	if (!document.body.classList.contains('mobile-keyboard-open')) return;
11 
12 	editorPane.style.opacity = '0';
13 	document.body.classList.remove('mobile-keyboard-open');
14 
15 	requestAnimationFrame(() => requestAnimationFrame(() => {
16 		if (editorView) {
17 			const pos = editorView.state.selection.main.head;
18 			const lineBlock = editorView.lineBlockAt(pos);
19 			const targetScroll = lineBlock.top - (editorView.dom.clientHeight / 2);
20 			editorView.scrollDOM.scrollTop = Math.max(0, targetScroll);
21 		}
22 		editorPane.style.opacity = '';
23 		updatePreviewCallback();
24 	}));
25 }
26 
27 function updateViewportVariables() {
28 	const vv = window.visualViewport;
29 	if (vv) {
30 		document.documentElement.style.setProperty('--visual-viewport-height', `${vv.height}px`);
31 		document.documentElement.style.setProperty('--visual-viewport-offset-top', `${vv.offsetTop}px`);
32 	}
33 }
34 
35 function handleViewportChange(isEditorFocused, exitCallback) {
36 	if (!isMobileDevice()) return;
37 
38 	const currentHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
39 	const heightDifference = initialViewportHeight - currentHeight;
40 	const isKeyboardOpen = heightDifference > 150;
41 
42 	updateViewportVariables();
43 
44 	if (isKeyboardOpen && isEditorFocused) {
45 		document.body.classList.add('mobile-keyboard-open');
46 	} else if (!isKeyboardOpen) {
47 		exitCallback();
48 	}
49 }
50 
51 export function initializeMobileKeyboard(getIsEditorFocused, exitCallback) {
52 	const handleChange = () => handleViewportChange(getIsEditorFocused(), exitCallback);
53 
54 	if (window.visualViewport) {
55 		window.visualViewport.addEventListener('resize', handleChange);
56 		window.visualViewport.addEventListener('scroll', updateViewportVariables);
57 	} else {
58 		window.addEventListener('resize', handleChange);
59 	}
60 }