xP: add formatting buttons

And fix autoscroll autoenabler, as well as toolbar padding.

Only add the basic toggles, which should be well supported.

xP/public/xP.css

@@ -69,12 +69,16 @@ body {
 .toolbar {
 	display: flex;
 	align-items: baseline;
-	column-gap: .3em;
+	margin-right: -.3em;
+}
+.indicator {
+	margin: 0 .3em;
 }
 button {
 	font: inherit;
 	background: transparent;
 	border: 1px solid transparent;
+	padding: 0 .3em;
 }
 button:focus {
 	border: 1px dashed #000;

xP/public/xP.js

@@ -631,7 +631,7 @@ let Buffer = {
 		return m('.buffer', {onscroll: event => {
 			const dom = event.target
 			bufferAutoscroll =
-				dom.scrollTop + dom.clientHeight + 0.5 >= dom.scrollHeight
+				dom.scrollTop + dom.clientHeight + 1 >= dom.scrollHeight
 		}}, lines)
 	},
 }
@@ -687,9 +687,35 @@ let BufferContainer = {
 }
 
 let Toolbar = {
+	insert: formatting => {
+		let textarea = document.getElementById('input')
+		if (textarea === null)
+			return
+
+		const [start, end] = [textarea.selectionStart, textarea.selectionEnd]
+		if (start === end) {
+			textarea.setRangeText(formatting)
+			textarea.setSelectionRange(
+				start + formatting.length, end + formatting.length)
+		} else {
+			textarea.setRangeText(
+				formatting + textarea.value.substr(start, end) + formatting)
+		}
+		textarea.focus()
+	},
+
 	view: vnode => {
+		let indicator = undefined
+		if (bufferLog === undefined && !bufferAutoscroll)
+			indicator = m('.indicator', {}, '⇩')
 		return m('.toolbar', {}, [
-			bufferLog === undefined && !bufferAutoscroll ? '⇩' : undefined,
+			indicator,
+			m('button', {onclick: event => Toolbar.insert('\u0002')},
+				m('b', {}, 'B')),
+			m('button', {onclick: event => Toolbar.insert('\u001D')},
+				m('i', {}, 'I')),
+			m('button', {onclick: event => Toolbar.insert('\u001F')},
+				m('u', {}, 'U')),
 			m('button', {onclick: event => bufferToggleLog()},
 				bufferLog === undefined ? 'Log' : 'Hide log'),
 		])