xP: convert links to link elements

xP/public/xP.css

@@ -86,19 +86,19 @@ body {
 	padding: .1rem .3rem;
 	white-space: pre-wrap;
 }
-.content span.b {
+.content .b {
 	font-weight: bold;
 }
-.content span.i {
+.content .i {
 	font-style: italic;
 }
-.content span.u {
+.content .u {
 	text-decoration: underline;
 }
-.content span.s {
+.content .s {
 	text-decoration: line-through;
 }
-.content span.m {
+.content .m {
 	font-family: monospace;
 }
 

xP/public/xP.js

@@ -115,6 +115,24 @@ let BufferList = {
 	},
 }
 
+function linkify(text, attrs, a) {
+	let re = new RegExp([
+		/https?:\/\//,
+		/([^\[\](){}<>"'\s]|\([^\[\](){}<>"'\s]*\))+/,
+		/[^\[\](){}<>"'\s,.:]/,
+	].map(r => r.source).join(''), 'g')
+
+	let end = 0, match
+	while ((match = re.exec(text)) !== null) {
+		if (end < match.index)
+			a.push(m('span', attrs, text.substring(end, match.index)))
+		a.push(m('a', {href: match[0], ...attrs}, match[0]))
+		end = re.lastIndex
+	}
+	if (end < text.length)
+		a.push(m('span', attrs, text.substring(end)))
+}
+
 let Content = {
 	view: vnode => {
 		let line = vnode.children[0]
@@ -139,11 +157,10 @@ let Content = {
 		line.items.forEach(item => {
 			switch (item.kind) {
 			case 'Text':
-				// TODO: Detect and transform links.
-				content.push(m('span', {
+				linkify(item.text, {
 					class: Array.from(classes.keys()).join(' '),
 					style: applyColor(fg, bg, inverse),
-				}, item.text))
+				}, content)
 				break
 			case 'Reset':
 				classes.clear()