<dd>Format a horizontal ruler, auto-hide the input field.</dd><br>
 <dt><code><b>htmlraw</b> html ?hidden?</code></dt>
 <dd>Output raw HTML after the corresponding input field, if <code>hidden</code>
     is true, auto-hide the input field.</dd><br>
 <dt><code><b>img</b> ?filename import mime?</code></dt>
 <dd>Format a HTML IMG given <code>filename</code>, if file name omitted,
     present file selection. If <code>import</code> is true, the image is
     inlined. If the mime type of the image is unknown, it can be specified
     with the <code>mime</code> parameter. The corresponding input field
     is auto-hidden.</dd><br>
 <dt><code><b>img_from_binary</b> data mime ?hidden?</code></dt>
 <dd>Format a HTML IMG given the byte array <code>data</code> and mime
     type <code>mime</code>. If <code>hidden</code> is false, the corresponding
     input field is not auto-hidden.</dd><br>
 <dt><code><b>parray</b> arrayname ?pattern?</code></dt>
 <dd>Pretty print an array using <code><b>puts</b></code> and thus outputs
     after the corresponding input field.</dd><br>

    # This needs work.
    if {$mime ne ""} {
	set mime [::tsb::htmlquote $mime]
    } else {
	set mime image/[string tolower [file extension $name]]
    }
    if {![catch {open $name rb} f]} {
	set ret "<img style='margin: 1em;' src='data:$mime;base64,\n"
	append ret [binary encode base64 -maxlen 78 [read $f]]
	append ret "'>\n"
	close $f
	if {$selname || $import} {
	    set cmd [dict get [info frame -1] cmd]
	    if {$import} {
		set newcmd "#HTML\n$ret"
	    } else {
		set newcmd $cmd
		lappend newcmd $name
	    }
	    ::tsb::change_field $cmd $newcmd
	}
	htmlraw $ret 1
    }
    return
}

# Insert image from byte array.

proc img_from_binary {data mime {hidden 1}} {
    set mime [::tsb::htmlquote $mime]
    set ret "<img style='margin: 1em;' src='data:$mime;base64,\n"
    append ret [binary encode base64 -maxlen 78 $data]
    append ret "'>\n"
    htmlraw $ret $hidden
    return
}

# Load and save functions.

proc ::tsb::load {{name {}}} {

	var Wclear = function(id) {
	    if (!needsClear[id]) {
		return;
	    }
	    var output =
		document.getElementById('out' + id + '-pre').firstChild;
	    if (output.innerHTML.length > 0) {
		output.style.color = 'inherit';
		output.innerHTML = '';
	    }
	    output = document.getElementById('out' + id + '-raw');
	    if (output.innerHTML.length > 0) {
		output.innerHTML = '';
	    }
	};

	var Wresult = function(id, str) {
	    var output =
		document.getElementById('out' + id + '-pre').firstChild;
	    str = str.replace(/&/g, '&');
	    str = str.replace(/</g, '&lt;');

		output.innerHTML = str;
	    } else {
		output.innerHTML += str;
	    }
	    if (needsClear[id]) {
		output =
		    document.getElementById('out' + id + '-pre').firstChild;
		if (output.innerHTML.length > 0) {
		    output.style.color = 'inherit';
		    output.innerHTML = '';
		}
	    }
	    needsClear[id] = null;
	};

	var Inhide = function(id, hide) {
	    var input = document.getElementById('in' + id);
	    var output = document.getElementById('out' + id + '-raw');