joplin/ElectronClient/app/gui/note-viewer/index.html

<style>
body {
	overflow: hidden;
}

#content {
	overflow-y: auto;
	height: 100%;
	padding-left: 10px;
	padding-right: 10px;
}
</style>

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

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


// ----------------------------------------------------------------------
// Handle dynamically loading HLJS when a code element is present
// ----------------------------------------------------------------------

let hljsScriptAdded = false;
let hljsLoaded = false;

function loadHljs(callback) {
	hljsScriptAdded = true;

	const script = document.createElement('script');
	script.onload = function () {
		hljsLoaded = true;
    	applyHljs();
	};
	script.src = 'highlight/highlight.pack.js';
	document.getElementById('hlScriptContainer').appendChild(script);

	const link = document.createElement('link');
	link.rel = 'stylesheet';
	// https://ace.c9.io/build/kitchen-sink.html
	// https://highlightjs.org/static/demo/
	link.href = 'highlight/styles/atom-one-light.css';
	document.getElementById('hlScriptContainer').appendChild(link);
}

function loadAndApplyHljs() {
	var codeElements = document.getElementsByClassName('code');
	if (!codeElements.length) return;

	if (!hljsScriptAdded) {
		this.loadHljs();
		return;
	}

	// If HLJS is not loaded yet, no need to do anything. When it loads
	// it will automatically apply the style to all the code elements.
	if (hljsLoaded) applyHljs(codeElements);
}

function applyHljs(codeElements) {
	if (typeof codeElements === 'undefined') codeElements = document.getElementsByClassName('code');

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

// ----------------------------------------------------------------------
// / Handle dynamically loading HLJS when a code element is present
// ----------------------------------------------------------------------



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

	loadAndApplyHljs();

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

// Disable drag and drop otherwise it's possible to drop a URL
// on it and it will open in the view as a website.
document.addEventListener('drop', function(e) {
	e.preventDefault();
	e.stopPropagation();
});
document.addEventListener('dragover', function(e) {
	e.preventDefault();
	e.stopPropagation();
});
webview.addEventListener('dragover', function(e) {
	e.preventDefault();
});
</script>