joplin/ElectronClient/app/note-content.html

<style>
body {
	overflow: hidden;
}

#content {
	overflow-y: scroll;
	height: 100%;
}
</style>

<link rel="stylesheet" href="highlight/styles/atom-one-light.css">
<script src="highlight/highlight.pack.js"></script>

<div id="content"></div>

<script>
const { ipcRenderer } = require('electron');
const contentElement = document.getElementById('content');

ipcRenderer.on('setHtml', (event, html) => {
	contentElement.innerHTML = html;

	var codeElements = document.getElementsByClassName('code');
	for (var i = 0; i < codeElements.length; i++) {
		hljs.highlightBlock(codeElements[i]);
	}

	// A checkbox list is rendered like this by markdown-it:
	// <ul>
	//    <li>
	//       <p>
	//          [x] some item
	//       </p>
	//    </li>
	// ...
	// </ul>
	// And we need to remove the padding from "p" and the bullet from "ul"
	const checkboxes = document.getElementsByClassName('checkbox');
	for (let i = 0; i < checkboxes.length; i++) {
		const cb = checkboxes[i];
		cb.parentElement.style.marginBottom = 0;
		const ul = cb.parentElement.parentElement.parentElement;
		if (!ul) {
			console.warn('Unexpected layout for checkbox');
			continue;
		}
		ul.style.listStyleType = 'none';
	}
});

let ignoreNextScroll = false;
ipcRenderer.on('setPercentScroll', (event, percent) => {
	ignoreNextScroll = true;
	contentElement.scrollTop = percent * maxScrollTop();
});

// function elementMapCoordinates(element) {
// 	while (true) {
// 		if (!element) break;

// 		const m = element.getAttribute('data-map');
// 		if (m) return m.split(':');
// 		element = element.parentElement;
// 	}

// 	return null;
// }

function maxScrollTop() {
	return Math.max(0, contentElement.scrollHeight - contentElement.clientHeight);
}

contentElement.addEventListener('scroll', function(e) {
	if (ignoreNextScroll) {
		ignoreNextScroll = false;
		return;
	}
	const m = maxScrollTop();
	ipcRenderer.sendToHost('percentScroll', m ? contentElement.scrollTop / m : 0);
});
</script>