new file mode 100644
--- /dev/null
+++ b/script.js
@@ -0,0 +1,100 @@
+//    -  Mutation Events:
+//    -  https://developer.mozilla.org/en/XUL/Events#Mutation_DOM_events
+
+var gBreadCrumb = null;
+function updateBreadCrumb(node, action) {
+  if (!gBreadCrumb || !node || (node == document.body)) return;
+  var
+    body = document.body,
+    text = node.nodeName,
+    tmp  = node.parentNode;
+  while (tmp && tmp != body) {
+    text = tmp.nodeName + " > " + text;
+    tmp = tmp.parentNode;
+  }
+  text = action + ": " + text;
+  gBreadCrumb.innerHTML = text;
+  console.log(text);
+}
+
+// retrieve the startContainer of the current selection
+var gLastFocusNode = null;
+function getSelectionStart() {
+  var node = document.getSelection().anchorNode;
+  return (node.nodeName == "#text" ? node.parentNode : node);
+}
+function onCaretMove(event, action) {
+  var selection = document.getSelection();
+  var node = selection.isCollapsed ? selection.focusNode
+           : selection.getRangeAt(0).commonAncestorContainer;
+  if (node != gLastFocusNode) {
+    updateBreadCrumb(node, action);
+    gLastFocusNode = node;
+  }
+}
+
+window.addEventListener("DOMContentLoaded", function() {
+  gBreadCrumb = document.querySelector("#breadcrumb");
+
+  function onAttrModified(event) { updateBreadCrumb(event.target, "keypress"); }
+  function onNodeInserted(event) { updateBreadCrumb(event.target, "inserted"); }
+  function onNodeRemoved(event)  { updateBreadCrumb(event.target, "removed "); }
+
+  function onKeyUp(event) { onCaretMove(event, "keyup"); }
+  function onClick(event) { onCaretMove(event, "click"); }
+
+  // listening to mutation events on 'document' freezes Firefox :-/
+  var i, editors = document.querySelectorAll("*[contenteditable]");
+  for (i = 0; i < editors.length; i++) {
+    // mutation events -- do we really need them?
+    editors[i].addEventListener("DOMAttrModified", onAttrModified, false);
+    editors[i].addEventListener("DOMNodeInserted", onNodeInserted, false);
+    editors[i].addEventListener("DOMNodeRemoved",  onNodeRemoved,  false);
+    // caret movements
+    //editors[i].addEventListener("textinput", onKeyUp, false);
+    editors[i].addEventListener("keyup",   onKeyUp, false);
+    editors[i].addEventListener("mouseup", onClick, false);
+  }
+}, false);
+
+
+
+// editor
+
+var
+  gActiveEditor = null, // active editing host
+  gCommandDump  = null; // command dump field
+function ExecCommand(toolbarElement) {
+  var argVal, argStr,
+    type    = toolbarElement.getAttribute("type"),
+    command = toolbarElement.getAttribute("data-command");
+  switch (type) {    // get the execCommand argument according to the button type
+    case "button":   // toolbar button: no argument
+      argVal = argStr = false;
+      break;
+    case "checkbox": // styleWithCSS: boolean argument
+      argVal = argStr = "" + toolbarElement.checked + "";
+      break;
+    default:         // <select> menu: string argument
+      if (!toolbarElement.selectedIndex) return;
+      argVal = toolbarElement.value;
+      argStr = "'" + argVal.replace("<", "&lt;").replace(">", "&gt;") + "'";
+      toolbarElement.selectedIndex = 0; // reset drop-down list
+  }
+  document.execCommand(command, false, argVal); // send requested action
+  if (gActiveEditor) gActiveEditor.focus();     // re-focus the editable element
+  gCommandDump.innerHTML = "document.execCommand('" + command + "', false, '" + argStr + "');";
+}
+window.addEventListener("DOMContentLoaded", function() {
+  var i,
+    buttons = document.querySelectorAll("*[data-command]"),
+    editors = document.querySelectorAll("*[contenteditable]");
+  for (i = 0; i < buttons.length; i++) {
+    buttons[i].onclick  = function() { ExecCommand(this); };
+    buttons[i].onchange = function() { ExecCommand(this); };
+  }
+  for (i = 0; i < editors.length; i++)
+    editors[i].onfocus = function() { gActiveEditor = this; };
+  gCommandDump = document.querySelector("#execCommand");
+  ExecCommand(document.querySelector("#useCSS"));
+}, false);