Improved handling of HTML links

And updates to tests and comments

js/WikiStore.js

@@ -170,7 +170,7 @@ WikiStore.prototype.getFormattedTiddlerField = function(title,field,format,templ
 				return utils.htmlEncode(tiddler.fields[field]);
 			case "link":
 				// xxx: Attribute encoding is wrong
-				return "<a href='" + utils.htmlEncode(tiddler.fields[field]) + "'>" + utils.htmlEncode(tiddler.fields[field]) + "</a>";
+				return "<a href='" + utils.htmlEncode(tiddler.fields[field]) + "' " + this.classesForLink(tiddler.fields[field]) + ">" + utils.htmlEncode(tiddler.fields[field]) + "</a>";
 			case "wikified":
 				return this.renderTiddler("text/html",tiddler.fields.title);
 			case "date":
@@ -182,7 +182,16 @@ WikiStore.prototype.getFormattedTiddlerField = function(title,field,format,templ
 };
 
 WikiStore.prototype.classesForLink = function(target) {
-	return this.tiddlerExists(target) ? "class=\"linkResolves\"" : "";
+	var className = "",
+		externalRegExp = /(?:file|http|https|mailto|ftp|irc|news|data):[^\s'"]+(?:\/|\b)/i;
+	if(externalRegExp.test(target)) {
+		className = "linkExternal";
+	} else if (this.tiddlerExists(target)) {
+		className = "linkInternalResolves";
+	} else {
+		className = "linkInternalMissing";
+	}
+	return className !== "" ? "class=\"" + className + "\"" : "";
 };
 
 WikiStore.prototype.listTiddlers = function(type,template,emptyMessage) {

js/WikiTextParseTree.js

@@ -1,8 +1,7 @@
 /*\
 title: js/WikiTextParseTree.js
 
-Compile a wikitext parse tree into a JavaScript function that renders the required
-representation of the tree.
+A container for the parse tree generated by parsing wikitext
 
 \*/
 (function(){

test/wikitests/FirstTiddler.html

@@ -1 +1 @@
-This is the <strong>text</strong> of the first tiddler, with a <span style="font-size:8em;color:red;">link</span> to the <a href="SecondTiddler" class="linkResolves">SecondTiddler</a>, too.
+This is the <strong>text</strong> of the first tiddler, with a <span style="font-size:8em;color:red;">link</span> to the <a href="SecondTiddler" class="linkInternalResolves">SecondTiddler</a>, too. And a link to <a href="http://tiddlywiki.com/" class="linkExternal">http://tiddlywiki.com/</a>.<br />

test/wikitests/FirstTiddler.tid

@@ -1,3 +1,3 @@
 title: FirstTiddler
 
-This is the ''text'' of the first tiddler, with a @@font-size:8em;color:red;link@@ to the SecondTiddler, too.
+This is the ''text'' of the first tiddler, with a @@font-size:8em;color:red;link@@ to the SecondTiddler, too. And a link to http://tiddlywiki.com/.

test/wikitests/FirstTiddler.txt

@@ -1 +1 @@
-This is the text of the first tiddler, with a link to the SecondTiddler, too.
+This is the text of the first tiddler, with a link to the SecondTiddler, too. And a link to http://tiddlywiki.com/.

tiddlywiki5/styles.css

@@ -5,8 +5,39 @@ body {
 /* Following styles created with http://www.gridlover.net/; */
 
 body {
-    font-size: 18px;
-    line-height: 27px;
+    font-size: 15px;
+    line-height: 22px;
+}
+code, pre {
+    font-size: 13px;
+    line-height: 18px;
+    padding: 0 3px 2px;
+    font-family: Monaco, Andale Mono, Courier New, monospace;
+    font-size: 12px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+}
+code {
+	background-color: #fee9cc;
+	color: rgba(0, 0, 0, 0.75);
+	padding: 1px 3px;
+}
+pre {
+	background-color: #f5f5f5;
+	display: block;
+	padding: 8.5px;
+	margin: 0 0 18px;
+	line-height: 18px;
+	font-size: 12px;
+	border: 1px solid #ccc;
+	border: 1px solid rgba(0, 0, 0, 0.15);
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	white-space: pre;
+	white-space: pre-wrap;
+	word-wrap: break-word;
 }
 article {
     max-width: 644px;
@@ -38,16 +69,28 @@ p, ul {
 }
 
 a {
-    font-style: italic;
     text-decoration: none;
 }
 
+a.linkExternal::before {
+    content: "\27a0";
+}
+
 a:hover {
     background-color: #00e;
     color: #fff;
 }
 
-a.linkResolves {
+a.linkExternal {
+    font-style: normal;
+    font-weight: normal;
+}
+
+a.linkInternalResolves {
     font-style: normal;
     font-weight: bold;
 }
+
+a.linkInternalMissing {
+    font-style: italic;
+}