string.</dd><br>
 <dt><code><b>h1</b> string</code>, <code><b>h2..h5</b></code></dt>
 <dd>Format a HTML header after the correspondig input field, auto-hide
     the input field.</dd><br>
 <dt><code><b>hr</b></code></dt>
 <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>
 <dt><code><b>puts</b></code></dt>
 <dd>Overriden, writing to <code>stdout</code>/<code>stderr</code>
     channels outputs after the corresponding input field.</dd><br>
 <dt><code><b>table</b> colinfo data</code></dt>
 <dd>Format a HTML table, <code>colinfo</code> gives the number of
     columns, if it's an integer; if negative, the first
     <code>-colinfo</code> items are used in the header row.
     If <code>colinfo</code> is a list, it specifies the column
     headers directly.</dd>
</dl>} 9 {h4 "Useful procs in the tsb namespace"} 10 {lsort [info proc tsb::*]} 11 {#HTML
<dl>
 <dt><code><b>tsb::canvas</b> ?-width w -height h?</code></dt>
 <dd>Creates a <code>canvas</code> emulation implementing enough
     methods for Plotchart, returns a widget command.</dd><br>
 <dt><code><b>tsb::canvascmd</b> cmd ...</code></dt>
 <dd>Implementation of the canvas widget command, supports
     <code>create</code>, <code>delete</code> and other methods plus
     method <code>svg</code> which renders the canvas as SVG after
     the corresponding input field.</dd><br>
 <dt><code><b>tsb::clear</b></code></dt>
 <dd>Clears the entire page.</dd><br>
 <dt><code><b>tsb::eval</b> id</code></dt>
 <dd>Re-evaluates field with number <code>id</code>.</dd><br>
 <dt><code><b>tsb::load</b> ?filename?</code></dt>
 <dd>Load page from given <code>filename</code>, if file name omitted,
     present file selection.</dd><br>
 <dt><code><b>tsb::print</b></code></dt>
 <dd>Opens the print dialog to print the page. Platform dependent,
     on Windows use <code>&lt;Control-p&gt;</code> from keyboard
     instead.</dd><br>
 <dt><code><b>tsb::save</b> ?filename?</code></dt>
 <dd>Save page to given <code>filename</code>, if file name omitted,
     present file selection.</dd><br>
 <dt><code><b>tsb::wrhtml</b> ?filename?</code></dt>
 <dd>Write page as HTML to given <code>filename</code>, if file name
     omitted, present file selection.</dd>
</dl>} 12 {h4 "Input Fields"} 13 {#HTML
<p>Input fields have a label of the form <code>in(&lt;number&gt;)</code>
where the number is the index in the history array. Arbitrary text can be
entered which however should be valid Tcl code, except the very first line
is <code>#HTML</code> or <code>#MARKDOWN</code>, in which case the
following lines should be valid HTML or Markdown text, respectively.
The input field is evaluated when <code>&lt;Shift-Return&gt;</code>
is pressed.</p>

<p>Depending on the command evaluation the input field is sometimes hidden.
A double click on the corresponding output field(s) makes the input field
visible and thus editable, again.</p>} 14 {h4 "Output Fields"} 15 {#HTML
<p>Each input field has two corresponding output fields which are
visible/non-empty depending on context. One output field receives
preformatted text, either the result or the error message of a
command evaluation. The other output field receives HTML, e.g.
for displaying an image or for the <code>#HTML</code> and
<code>#MARKDOWN</code> formats from the input field.</p>} 16 {tsb::save cheatsheet.tsb}

    [winfo exists .] && ([winfo children .] eq "")} {
    wm withdraw .
}

namespace eval ::tsb {
    variable inload 0
    variable ready 0
    variable dump ""
    variable file ""
}

# The history array of input fields.

array set H {1 ""}

# This is invoked from the JS window.external.invoke function.
# The first non-blank characters are assumed to be the integer id
# of the (input) field.

proc ::tsb::call_from_js {str} {
    variable dump
    if {[string first "<" $str] == 0} {
	set dump $str
	return
    }
    set n [string first " " $str]
    if {$n < 0} {
	return
    }
    set id [string trim [string range $str 0 $n]]
    incr n
    set str [string trim [string range $str $n end]]

    set ::tsb::file $name
    $::W title "$::tsb::title - [file tail $name]"
    return -code 4 ;# continue
}

proc ::tsb::loadh {data} {
    variable inload
    if {$inload} {
	return
    }
    set inload 1
    unset -nocomplain ::H
    $::W call ClearFields
    foreach {key value} $data {
	if {[string is integer $key]} {
	    set h($key) $value
	}

	incr next
	set ::H($next) ""
	::tsb::call_from_js "$key $h($key)"
    }
    if {[info exists next]} {
	unset ::H($next)
    }
    after cancel ::tsb::reload0
    set inload 0
}

proc ::tsb::save {{name {}}} {
    variable inload
    if {$inload} {
	return

    # Nothing to see here ...
}

# Reload document related functions; used for initial load, too.

proc ::tsb::reload0 {} {
    variable ready
    variable inload
    if {$inload} {
	return
    }
    if {![info exists ::W]} {
	# Can happen during init of webview.
	return
    }
    set ready 1
    $::W call document.write $::tsb::D
    $::W call document.close
    set title $::tsb::title
    if {$::tsb::file ne ""} {
	append title " - [file tail $::tsb::file]"
    }
    $::W title $title
    ::tsb::loadh [array get ::H]
}

proc ::tsb::reload {args} {
    variable inload
    if {$inload} {
	return
    }
    after cancel ::tsb::reload0
    after idle ::tsb::reload0
    return -code 4 ;# continue
}

# Clear page.

proc ::tsb::clear {} {
    variable inload
    if {$inload} {

    tailcall $::W call Feval $id
}

# Print page; on Windows seems not to work, but pressing
# <Control-p> opens the printer dialog at least.

proc ::tsb::print {} {
    tailcall $::W call window.print
}

# Dump to HTML; the weird vwait/loop construct needs to be revised.

proc ::tsb::dump {} {
    variable dump
    set dump ""
    $::W call Dump
    set count 10
    while {$count > 0} {
	incr count -1
	$::W loop 0
	if {$dump ne ""} {
	    break
	}
	after 10 [set ::tsb::dump $::tsb::dump]
	vwait [namespace current]::dump
    }
    return $dump
}

# Write HTML to file.

proc ::tsb::wrhtml {{name {}}} {
    variable inload
    variable D_head
    variable D_style
    variable title
    variable file
    set selname 0
    if {$name eq ""} {
	set selname 1
	set name [$::W dialog open "Write HTML To File"]
    }
    if {$name eq ""} {
	return
    }
    set t $title
    if {$file ne ""} {
	append t " - [file tail $file]"
    }
    set t [htmlquote $t]
    set f [open $name w]
    puts $f $D_head
    puts $f "<title>$t</title>"
    puts $f $D_style
    puts $f "</head><body>\n"
    puts $f [::tsb::dump]
    puts $f "</body></html>"
    close $f
    if {$selname} {
	set cmd [dict get [info frame -1] cmd]
	set newcmd $cmd
	lappend newcmd $name
	::tsb::change_field $cmd $newcmd
    }
    return -code 4 ;# continue
}

# A minimal canvas emulation for plotchart. The svg method
# produces SVG into the current (output) field.
#
#  set C [::tsb::canvas ...]
#  $C create line 10 10 20 20 -fill black ...

	return -code error $msg
    }
    return $msg
}

namespace eval ::tsb {

    # CSS and JavaScript assembled from various pieces into a big string.

    variable D_head
    variable D_style
    variable D_script
    variable D

    # HEAD
    set D_head {<!DOCTYPE html><html lang="en"><head>}
    append D_head {<meta charset="utf-8">}


    # STYLE, CSS
    set D_style {
	<style>


	body {
	    font-family: sans-serif, Arial, Tahoma, Helvetica;


	    font-size: 90%;
	}
	textarea {
	    font-family: Consolas, monospace; font-size: 100%;
	}
	label {
	    font-family: Consolas, monospace;
	    margin: 1px;
	    padding: 1px;
	}
	pre {
	    /* overflow-x: auto; */
	    white-space: pre-wrap;
	    white-space: -moz-pre-wrap;
	    white-space: -pre-wrap;
	    white-space: -o-pre-wrap;
	    word-wrap: break-word;
	}
	pre, code {
	    font-family: Consolas, monospace; font-size: 100%;
	}
	.infield * {
	    vertical-align: middle;
	}
	.tin {
	    width: 85%;
	    resize: none;
	    overflow: auto;
	}
	.tin, .tin:disabled {

	    border: 1px solid #AAAAAA;
	    background: transparent;
	    color: inherit;
	    margin: 4px;
	    outline: none;
	    padding: 4px;
	}
	.tin:focus {
	    border: 3px solid rgba(81, 203, 238, 1);
	    margin: 2px;
	    padding: 4px;
	}
	</style>
    }



    # SCRIPT
    set D_script {
	<script type="text/javascript">

	var msLike = /MSIE|Trident|Edge/i.test(navigator.userAgent);

	if (!msLike && !window.external) {
	    /* See also webview.h */
	    window.external = {
		invoke: function(str) {
		    window.webkit.messageHandlers.external.postMessage(str);
		}
	    };
	}

	var needsClear = new Array();

	var RunTcl = function(str) {
	    window.external.invoke(str);
	};

	/* The 2nd sin: this drives the Tcl event loop. */
	var Gtimer = window.setInterval(function() {
	    window.external.invoke("0 ::tsb::ping");
	}, 20);

	var Wclear = function(id) {
	    if (!needsClear[id]) {
		return;
	    }
	    var output =

	    var input = document.getElementById('code' + id);
	    needsClear[id] = true;
	    RunTcl("" + id + " " + input.value);
	};

	var Field = function(id) {
	    var div = document.createElement('div');
	    div.className = 'field';
	    var html = '\n <div class="infield" id="in' + id + '">';
	    html += '\n  <label for="code' + id + '">in(' + id + ')</label>';






	    html += '\n  <textarea class="tin" id="code' + id + '" rows="1"';








	    html += '></textarea>\n </div>\n <div';
	    html += ' id="out' + id + '-pre">';





	    html += '<pre></pre></div>';
	    html += '\n <div id="out' + id + '-raw"></div>\n';
	    div.innerHTML = html;
	    document.body.appendChild(div);
	    /* For better readability only. */
	    document.body.appendChild(document.createTextNode('\n'));
	    needsClear[id] = null;
	    var input = document.getElementById('code' + id);
	    input.addEventListener('keydown', function(event) {
		var code;
		var shift = false;
		if (window.event) {
		    code = window.event.keyCode;

		if (fields.length > 0) {
		    fields[0].parentNode.removeChild(fields[0]);
		    continue;
		}
		break;
	    }
	};

	var Dump = function() {
	    var i;
	    var values = new Array();
	    var fields = document.getElementsByClassName('tin');
	    for (i = 0; i < fields.length; i++) {
		values[i] = fields[i].value;
		fields[i].innerHTML = values[i];
		fields[i].disabled = true;
	    }
	    window.external.invoke(document.body.innerHTML);
	    fields = document.getElementsByClassName('tin');
	    for (i = 0; i < fields.length; i++) {
		fields[i].disabled = false;
		fields[i].innerHTML = "";
		fields[i].value = values[i];
	    }
	};

	/* Is this really needed? */
	window.addEventListener('unload', function(event) {
	    window.clearInterval(Gtimer);
	    Gtimer = null;
	});

	</script>
    }

    # Assemble pieces with empty BODY.
    set D $D_head
    append D $D_style $D_script {</head><body></body></html>}

    # The URL to be displayed.
    # Windows:   data:text/html,<html><head><script>window.external.invoke("0 ::tsb::reload");</script></head></html>
    # MacOS:     data:text/html,<html><head><script>window.external.invoke("0 ::tsb::reload");</script></head></html>
    # WebkitGtk: data:text/html,<html><head><script>window.webkit.messageHandlers.extern.postMessage("0 ::tsb::reload");</script></head></html>

    variable U

set W [::twv::new -width 800 -height 600 -title $::tsb::title \
	   -url $::tsb::U -resizable 1 -debug 0 \
	   -callback ::tsb::call_from_js]

# On Windows this seems the way to load, maybe timing?

if {($tcl_platform(platform) eq "windows") && !$::tsb::ready} {
    after cancel ::tsb::reload0
    ::tsb::reload0
}

# Enter the webview event loop.

$W run

# Done.

exit 0