test/prismeditor.html


<!doctype html5>
<html>
<head>
	<title>Prism Editor</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/themes/prism.min.css" />
	<style>
		pre {
			word-wrap: normal;
			height: 400px;
			width: 600px;
			border: 1px solid black;
			padding: 5px;
			overflow: auto;
			display: block;
		}
	</style>
</head>
<body>
	<pre contenteditable class=language-markup >&lt;!doctype html&gt;
	&lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;&lt;/title&gt;
		&lt;meta charset=&quot;utf-8&quot; /&gt;
		&lt;style&gt;
			/* inline styles work */
			body {
				font-size: 18px;
			}
		&lt;/style&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;script&gt;
			// inline script works
			alert('hello, world');
		&lt;/script&gt;
	&lt;/body&gt;
	&lt;/html&gt;</pre>
	<label><input type=checkbox id=autoindent checked /> Autoindent</label>
	<script src=https://cdn.jsdelivr.net/npm/prismjs data-manual></script>
	<script src="../../historystack/history.js"></script>
	<script src="../bililiteRange.js"></script>
	<script src="../bililiteRange.undo.js"></script>
	<script src="../bililiteRange.lines.js"></script>
	<script>
		const editor = document.querySelector('pre');
		const rng = bililiteRange(editor)
		Prism.highlightElement(editor);
		
		// add the undo's
		rng.initUndo().data.autoindent = true; // init
				
		rng.listen('input', evt => {
			rng.bounds('selection');
			Prism.highlightElement(editor);
			rng.select();
		});
	
		var ai = document.getElementById('autoindent');
		ai.addEventListener('change', function(){
			rng.data.autoindent = this.checked;
		});
		
	</script>
</body>
</html>