From facf511621568d440678b6a6ec818369413fa0f2 Mon Sep 17 00:00:00 2001
From: Matt Pass <matt@mattpass.com>
Date: Fri, 22 Mar 2013 08:08:47 +0000
Subject: [PATCH] HTML hint added

Show HTML hint if that's our content type
---
 editor.php | 798 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 745 insertions(+), 53 deletions(-)

diff --git a/editor.php b/editor.php
index 466d4fa..8a2cfbd 100644
--- a/editor.php
+++ b/editor.php
@@ -7,80 +7,770 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="robots" content="noindex, nofollow">
 <link rel="stylesheet" href="<?php echo $ICEcoder["codeMirrorDir"]; ?>/lib/codemirror.css">
-<link rel="stylesheet" href="<?php echo $ICEcoder["codeMirrorDir"]; ?>/addon/hint/simple-hint.css">
+<link rel="stylesheet" href="<?php echo $ICEcoder["codeMirrorDir"]; ?>/addon/hint/show-hint.css">
 <!--
 codemirror-compressed.js
 incls:	codemirror
 modes:	clike, coffeescript, css, javascript, less, php, ruby & xml
-utils:	foldcode, searchcursor, match-highlighter, simple-hint, javascript-hint, closetag
+utils:	foldcode, xml-fold, brace-fold, show-hint, javascript-hint, html-hint, closetag, searchcursor, match-highlighter
 //-->
 <script src="<?php echo $ICEcoder["codeMirrorDir"]; ?>/lib/codemirror-compressed.js"></script>
 <script>
 // -- HOTFIX
-// to CodeMirrors tagRangeFinder
-// -- Can delete this when CodeMirror 3.2 is released
-CodeMirror.tagRangeFinder = (function() {
-  var nameStartChar = "A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
-  var nameChar = nameStartChar + "\-\:\.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
-  var xmlTagStart = new RegExp("<(/?)([" + nameStartChar + "][" + nameChar + "]*)", "g");
+// show-hint.js not in compression helper, so added here
+CodeMirror.showHint = function(cm, getHints, options) {
+  if (!options) options = {};
+  var startCh = cm.getCursor().ch, continued = false;
+  var closeOn = options.closeCharacters || /[\s()\[\]{};:]/;
 
-  return function(cm, start) {
-    var line = start.line, ch = start.ch, lineText = cm.getLine(line);
+  function startHinting() {
+    // We want a single cursor position.
+    if (cm.somethingSelected()) return;
 
-    function nextLine() {
-      if (line >= cm.lastLine()) return;
-      ch = 0;
-      lineText = cm.getLine(++line);
+    if (options.async)
+      getHints(cm, showHints, options);
+    else
+      return showHints(getHints(cm, options));
+  }
+
+  function getText(completion) {
+    if (typeof completion == "string") return completion;
+    else return completion.text;
+  }
+
+  function pickCompletion(cm, data, completion) {
+    if (completion.hint) completion.hint(cm, data, completion);
+    else cm.replaceRange(getText(completion), data.from, data.to);
+  }
+
+  function showHints(data) {
+    if (!data || !data.list.length) return;
+    var completions = data.list;
+    // When there is only one completion, use it directly.
+    if (!continued && options.completeSingle !== false && completions.length == 1) {
+      pickCompletion(cm, data, completions[0]);
       return true;
     }
-    function toTagEnd() {
-      for (;;) {
-        var gt = lineText.indexOf(">", ch);
-        if (gt == -1) { if (nextLine()) continue; else return; }
-        var lastSlash = lineText.lastIndexOf("/", gt);
-        var selfClose = lastSlash > -1 && /^\s*$/.test(lineText.slice(lastSlash + 1, gt));
-        ch = gt + 1;
-        return selfClose ? "selfClose" : "regular";
-      }
+
+    // Build the select widget
+    var hints = document.createElement("ul"), selectedHint = 0;
+    hints.className = "CodeMirror-hints";
+    for (var i = 0; i < completions.length; ++i) {
+      var elt = hints.appendChild(document.createElement("li")), completion = completions[i];
+      var className = "CodeMirror-hint" + (i ? "" : " CodeMirror-hint-active");
+      if (completion.className != null) className = completion.className + " " + className;
+      elt.className = className;
+      if (completion.render) completion.render(elt, data, completion);
+      else elt.appendChild(document.createTextNode(getText(completion)));
+      elt.hintId = i;
     }
-    function toNextTag() {
-      for (;;) {
-        xmlTagStart.lastIndex = ch;
-        var found = xmlTagStart.exec(lineText);
-        if (!found) { if (nextLine()) continue; else return; }
-        ch = found.index + found[0].length;
-        return found;
+    var pos = cm.cursorCoords(options.alignWithWord !== false ? data.from : null);
+    var left = pos.left, top = pos.bottom, below = true;
+    hints.style.left = left + "px";
+    hints.style.top = top + "px";
+    document.body.appendChild(hints);
+
+    // If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
+    var winW = window.innerWidth || Math.max(document.body.offsetWidth, document.documentElement.offsetWidth);
+    var winH = window.innerHeight || Math.max(document.body.offsetHeight, document.documentElement.offsetHeight);
+    var box = hints.getBoundingClientRect();
+    var overlapX = box.right - winW, overlapY = box.bottom - winH;
+    if (overlapX > 0) {
+      if (box.right - box.left > winW) {
+        hints.style.width = (winW - 5) + "px";
+        overlapX -= (box.right - box.left) - winW;
       }
+      hints.style.left = (left = pos.left - overlapX) + "px";
+    }
+    if (overlapY > 0) {
+      var height = box.bottom - box.top;
+      if (box.top - (pos.bottom - pos.top) - height > 0) {
+        overlapY = height + (pos.bottom - pos.top);
+        below = false;
+      } else if (height > winH) {
+        hints.style.height = (winH - 5) + "px";
+        overlapY -= height - winH;
+      }
+      hints.style.top = (top = pos.bottom - overlapY) + "px";
     }
 
-    var stack = [], startCh;
-    for (;;) {
-      var openTag = toNextTag(), end;
-      if (!openTag || line != start.line || !(end = toTagEnd())) return;
-      if (!openTag[1] && end != "selfClose") {
-        stack.push(openTag[2]);
-        startCh = ch;
-        break;
-      }
+    function changeActive(i) {
+      i = Math.max(0, Math.min(i, completions.length - 1));
+      if (selectedHint == i) return;
+      var node = hints.childNodes[selectedHint];
+      node.className = node.className.replace(" CodeMirror-hint-active", "");
+      node = hints.childNodes[selectedHint = i];
+      node.className += " CodeMirror-hint-active";
+      if (node.offsetTop < hints.scrollTop)
+        hints.scrollTop = node.offsetTop - 3;
+      else if (node.offsetTop + node.offsetHeight > hints.scrollTop + hints.clientHeight)
+        hints.scrollTop = node.offsetTop + node.offsetHeight - hints.clientHeight + 3;
     }
 
-    for (;;) {
-      var next = toNextTag(), end, tagLine = line, tagCh = ch - (next ? next[0].length : 0);
-      if (!next || !(end = toTagEnd())) return;
-      if (end == "selfClose") continue;
-      if (next[1]) { // closing tag
-        for (var i = stack.length - 1; i >= 0; --i) if (stack[i] == next[2]) {
-          stack.length = i;
-          break;
+    function screenAmount() {
+      return Math.floor(hints.clientHeight / hints.firstChild.offsetHeight) || 1;
+    }
+
+    var ourMap = {
+      Up: function() {changeActive(selectedHint - 1);},
+      Down: function() {changeActive(selectedHint + 1);},
+      PageUp: function() {changeActive(selectedHint - screenAmount());},
+      PageDown: function() {changeActive(selectedHint + screenAmount());},
+      Home: function() {changeActive(0);},
+      End: function() {changeActive(completions.length - 1);},
+      Enter: pick,
+      Tab: pick,
+      Esc: close
+    };
+    if (options.customKeys) for (var key in options.customKeys) if (options.customKeys.hasOwnProperty(key)) {
+      var val = options.customKeys[key];
+      if (/^(Up|Down|Enter|Esc)$/.test(key)) val = ourMap[val];
+      ourMap[key] = val;
+    }
+
+    cm.addKeyMap(ourMap);
+    cm.on("cursorActivity", cursorActivity);
+    var closingOnBlur;
+    function onBlur(){ closingOnBlur = setTimeout(close, 100); };
+    function onFocus(){ clearTimeout(closingOnBlur); };
+    cm.on("blur", onBlur);
+    cm.on("focus", onFocus);
+    var startScroll = cm.getScrollInfo();
+    function onScroll() {
+      var curScroll = cm.getScrollInfo(), editor = cm.getWrapperElement().getBoundingClientRect();
+      var newTop = top + startScroll.top - curScroll.top, point = newTop;
+      if (!below) point += hints.offsetHeight;
+      if (point <= editor.top || point >= editor.bottom) return close();
+      hints.style.top = newTop + "px";
+      hints.style.left = (left + startScroll.left - curScroll.left) + "px";
+    }
+    cm.on("scroll", onScroll);
+    CodeMirror.on(hints, "dblclick", function(e) {
+      var t = e.target || e.srcElement;
+      if (t.hintId != null) {selectedHint = t.hintId; pick();}
+    });
+    CodeMirror.on(hints, "click", function(e) {
+      var t = e.target || e.srcElement;
+      if (t.hintId != null) changeActive(t.hintId);
+    });
+    CodeMirror.on(hints, "mousedown", function() {
+      setTimeout(function(){cm.focus();}, 20);
+    });
+
+    var done = false, once;
+    function close() {
+      if (done) return;
+      done = true;
+      clearTimeout(once);
+      hints.parentNode.removeChild(hints);
+      cm.removeKeyMap(ourMap);
+      cm.off("cursorActivity", cursorActivity);
+      cm.off("blur", onBlur);
+      cm.off("focus", onFocus);
+      cm.off("scroll", onScroll);
+    }
+    function pick() {
+      pickCompletion(cm, data, completions[selectedHint]);
+      close();
+    }
+    var once, lastPos = cm.getCursor(), lastLen = cm.getLine(lastPos.line).length;
+    function cursorActivity() {
+      clearTimeout(once);
+
+      var pos = cm.getCursor(), line = cm.getLine(pos.line);
+      if (pos.line != lastPos.line || line.length - pos.ch != lastLen - lastPos.ch ||
+          pos.ch < startCh || cm.somethingSelected() ||
+          (pos.ch && closeOn.test(line.charAt(pos.ch - 1))))
+        close();
+      else
+        once = setTimeout(function(){close(); continued = true; startHinting();}, 70);
+    }
+    return true;
+  }
+
+  return startHinting();
+};
+// Also temporarily added html-hint.js
+(function () {
+  function htmlHint(editor, htmlStructure, getToken) {
+    var cur = editor.getCursor();
+    var token = getToken(editor, cur);
+    var keywords = [];
+    var i = 0;
+    var j = 0;
+    var k = 0;
+    var from = {line: cur.line, ch: cur.ch};
+    var to = {line: cur.line, ch: cur.ch};
+    var flagClean = true;
+
+    var text = editor.getRange({line: 0, ch: 0}, cur);
+
+    var open = text.lastIndexOf('<');
+    var close = text.lastIndexOf('>');
+    var tokenString = token.string.replace("<","");
+
+    if(open > close) {
+      var last = editor.getRange({line: cur.line, ch: cur.ch - 1}, cur);
+      if(last == "<") {
+        for(i = 0; i < htmlStructure.length; i++) {
+          keywords.push(htmlStructure[i].tag);
         }
-        if (!stack.length) return {
-          from: CodeMirror.Pos(start.line, startCh),
-          to: CodeMirror.Pos(tagLine, tagCh)
+        from.ch = token.start + 1;
+      } else {
+        var counter = 0;
+        var found = function(token, type, position) {
+          counter++;
+          if(counter > 50) return;
+          if(token.type == type) {
+            return token;
+          } else {
+            position.ch = token.start;
+            var newToken = editor.getTokenAt(position);
+            return found(newToken, type, position);
+          }
         };
-      } else { // opening tag
-        stack.push(next[2]);
+
+        var nodeToken = found(token, "tag", {line: cur.line, ch: cur.ch});
+        var node = nodeToken.string.substring(1);
+
+        if(token.type === null && token.string.trim() === "") {
+          for(i = 0; i < htmlStructure.length; i++) {
+            if(htmlStructure[i].tag == node) {
+              for(j = 0; j < htmlStructure[i].attr.length; j++) {
+                keywords.push(htmlStructure[i].attr[j].key + "=\"\" ");
+              }
+
+              for(k = 0; k < globalAttributes.length; k++) {
+                keywords.push(globalAttributes[k].key + "=\"\" ");
+              }
+            }
+          }
+        } else if(token.type == "string") {
+          tokenString = tokenString.substring(1, tokenString.length - 1);
+          var attributeToken = found(token, "attribute", {line: cur.line, ch: cur.ch});
+          var attribute = attributeToken.string;
+
+          for(i = 0; i < htmlStructure.length; i++) {
+            if(htmlStructure[i].tag == node) {
+              for(j = 0; j < htmlStructure[i].attr.length; j++) {
+                if(htmlStructure[i].attr[j].key == attribute) {
+                  for(k = 0; k < htmlStructure[i].attr[j].values.length; k++) {
+                    keywords.push(htmlStructure[i].attr[j].values[k]);
+                  }
+                }
+              }
+
+              for(j = 0; j < globalAttributes.length; j++) {
+                if(globalAttributes[j].key == attribute) {
+                  for(k = 0; k < globalAttributes[j].values.length; k++) {
+                    keywords.push(globalAttributes[j].values[k]);
+                  }
+                }
+              }
+            }
+          }
+          from.ch = token.start + 1;
+        } else if(token.type == "attribute") {
+          for(i = 0; i < htmlStructure.length; i++) {
+            if(htmlStructure[i].tag == node) {
+              for(j = 0; j < htmlStructure[i].attr.length; j++) {
+                keywords.push(htmlStructure[i].attr[j].key + "=\"\" ");
+              }
+
+              for(k = 0; k < globalAttributes.length; k++) {
+                keywords.push(globalAttributes[k].key + "=\"\" ");
+              }
+            }
+          }
+          from.ch = token.start;
+        } else if(token.type == "tag") {
+          for(i = 0; i < htmlStructure.length; i++) {
+            keywords.push(htmlStructure[i].tag);
+          }
+
+          from.ch = token.start + 1;
+        }
+      }
+    } else {
+      for(i = 0; i < htmlStructure.length; i++) {
+        keywords.push("<" + htmlStructure[i].tag);
+      }
+
+      tokenString = ("<" + tokenString).trim();
+      from.ch = token.start;
+    }
+
+    if(flagClean === true && tokenString.trim() === "") {
+      flagClean = false;
+    }
+
+    if(flagClean) {
+      keywords = cleanResults(tokenString, keywords);
+    }
+
+    return {list: keywords, from: from, to: to};
+  }
+
+
+  var cleanResults = function(text, keywords) {
+    var results = [];
+    var i = 0;
+
+    for(i = 0; i < keywords.length; i++) {
+      if(keywords[i].substring(0, text.length) == text) {
+        results.push(keywords[i]);
       }
     }
+
+    return results;
+  };
+
+  var htmlStructure = [
+    {tag: '!DOCTYPE', attr: []},
+    {tag: 'a', attr: [
+      {key: 'href', values: ["#"]},
+      {key: 'target', values: ["_blank","_self","_top","_parent"]},
+      {key: 'ping', values: [""]},
+      {key: 'media', values: ["#"]},
+      {key: 'hreflang', values: ["en","es"]},
+      {key: 'type', values: []}
+    ]},
+    {tag: 'abbr', attr: []},
+    {tag: 'acronym', attr: []},
+    {tag: 'address', attr: []},
+    {tag: 'applet', attr: []},
+    {tag: 'area', attr: [
+      {key: 'alt', values: [""]},
+      {key: 'coords', values: ["rect: left, top, right, bottom","circle: center-x, center-y, radius","poly: x1, y1, x2, y2, ..."]},
+      {key: 'shape', values: ["default","rect","circle","poly"]},
+      {key: 'href', values: ["#"]},
+      {key: 'target', values: ["#"]},
+      {key: 'ping', values: []},
+      {key: 'media', values: []},
+      {key: 'hreflang', values: []},
+      {key: 'type', values: []}
+
+    ]},
+    {tag: 'article', attr: []},
+    {tag: 'aside', attr: []},
+    {tag: 'audio', attr: [
+      {key: 'src', values: []},
+      {key: 'crossorigin', values: ["anonymous","use-credentials"]},
+      {key: 'preload', values: ["none","metadata","auto"]},
+      {key: 'autoplay', values: ["","autoplay"]},
+      {key: 'mediagroup', values: []},
+      {key: 'loop', values: ["","loop"]},
+      {key: 'controls', values: ["","controls"]}
+    ]},
+    {tag: 'b', attr: []},
+    {tag: 'base', attr: [
+      {key: 'href', values: ["#"]},
+      {key: 'target', values: ["_blank","_self","_top","_parent"]}
+    ]},
+    {tag: 'basefont', attr: []},
+    {tag: 'bdi', attr: []},
+    {tag: 'bdo', attr: []},
+    {tag: 'big', attr: []},
+    {tag: 'blockquote', attr: [
+      {key: 'cite', values: ["http://"]}
+    ]},
+    {tag: 'body', attr: []},
+    {tag: 'br', attr: []},
+    {tag: 'button', attr: [
+      {key: 'autofocus', values: ["","autofocus"]},
+      {key: 'disabled', values: ["","disabled"]},
+      {key: 'form', values: []},
+      {key: 'formaction', values: []},
+      {key: 'formenctype', values: ["application/x-www-form-urlencoded","multipart/form-data","text/plain"]},
+      {key: 'formmethod', values: ["get","post","put","delete"]},
+      {key: 'formnovalidate', values: ["","novalidate"]},
+      {key: 'formtarget', values: ["_blank","_self","_top","_parent"]},
+      {key: 'name', values: []},
+      {key: 'type', values: ["submit","reset","button"]},
+      {key: 'value', values: []}
+    ]},
+    {tag: 'canvas', attr: [
+      {key: 'width', values: []},
+      {key: 'height', values: []}
+    ]},
+    {tag: 'caption', attr: []},
+    {tag: 'center', attr: []},
+    {tag: 'cite', attr: []},
+    {tag: 'code', attr: []},
+    {tag: 'col', attr: [
+      {key: 'span', values: []}
+    ]},
+    {tag: 'colgroup', attr: [
+      {key: 'span', values: []}
+    ]},
+    {tag: 'command', attr: [
+      {key: 'type', values: ["command","checkbox","radio"]},
+      {key: 'label', values: []},
+      {key: 'icon', values: []},
+      {key: 'disabled', values: ["","disabled"]},
+      {key: 'checked', values: ["","checked"]},
+      {key: 'radiogroup', values: []},
+      {key: 'command', values: []},
+      {key: 'title', values: []}
+    ]},
+    {tag: 'data', attr: [
+      {key: 'value', values: []}
+    ]},
+    {tag: 'datagrid', attr: [
+      {key: 'disabled', values: ["","disabled"]},
+      {key: 'multiple', values: ["","multiple"]}
+    ]},
+    {tag: 'datalist', attr: [
+      {key: 'data', values: []}
+    ]},
+    {tag: 'dd', attr: []},
+    {tag: 'del', attr: [
+      {key: 'cite', values: []},
+      {key: 'datetime', values: []}
+    ]},
+    {tag: 'details', attr: [
+      {key: 'open', values: ["","open"]}
+    ]},
+    {tag: 'dfn', attr: []},
+    {tag: 'dir', attr: []},
+    {tag: 'div', attr: [
+      {key: 'id', values: []},
+      {key: 'class', values: []},
+      {key: 'style', values: []}
+    ]},
+    {tag: 'dl', attr: []},
+    {tag: 'dt', attr: []},
+    {tag: 'em', attr: []},
+    {tag: 'embed', attr: [
+      {key: 'src', values: []},
+      {key: 'type', values: []},
+      {key: 'width', values: []},
+      {key: 'height', values: []}
+    ]},
+    {tag: 'eventsource', attr: [
+      {key: 'src', values: []}
+    ]},
+    {tag: 'fieldset', attr: [
+      {key: 'disabled', values: ["","disabled"]},
+      {key: 'form', values: []},
+      {key: 'name', values: []}
+    ]},
+    {tag: 'figcaption', attr: []},
+    {tag: 'figure', attr: []},
+    {tag: 'font', attr: []},
+    {tag: 'footer', attr: []},
+    {tag: 'form', attr: [
+      {key: 'accept-charset', values: ["UNKNOWN","utf-8"]},
+      {key: 'action', values: []},
+      {key: 'autocomplete', values: ["on","off"]},
+      {key: 'enctype', values: ["application/x-www-form-urlencoded","multipart/form-data","text/plain"]},
+      {key: 'method', values: ["get","post","put","delete","dialog"]},
+      {key: 'name', values: []},
+      {key: 'novalidate', values: ["","novalidate"]},
+      {key: 'target', values: ["_blank","_self","_top","_parent"]}
+    ]},
+    {tag: 'frame', attr: []},
+    {tag: 'frameset', attr: []},
+    {tag: 'h1', attr: []},
+    {tag: 'h2', attr: []},
+    {tag: 'h3', attr: []},
+    {tag: 'h4', attr: []},
+    {tag: 'h5', attr: []},
+    {tag: 'h6', attr: []},
+    {tag: 'head', attr: []},
+    {tag: 'header', attr: []},
+    {tag: 'hgroup', attr: []},
+    {tag: 'hr', attr: []},
+    {tag: 'html', attr: [
+      {key: 'manifest', values: []}
+    ]},
+    {tag: 'i', attr: []},
+    {tag: 'iframe', attr: [
+      {key: 'src', values: []},
+      {key: 'srcdoc', values: []},
+      {key: 'name', values: []},
+      {key: 'sandbox', values: ["allow-top-navigation","allow-same-origin","allow-forms","allow-scripts"]},
+      {key: 'seamless', values: ["","seamless"]},
+      {key: 'width', values: []},
+      {key: 'height', values: []}
+    ]},
+    {tag: 'img', attr: [
+      {key: 'alt', values: []},
+      {key: 'src', values: []},
+      {key: 'crossorigin', values: ["anonymous","use-credentials"]},
+      {key: 'ismap', values: []},
+      {key: 'usemap', values: []},
+      {key: 'width', values: []},
+      {key: 'height', values: []}
+    ]},
+    {tag: 'input', attr: [
+      {key: 'accept', values: ["audio/*","video/*","image/*"]},
+      {key: 'alt', values: []},
+      {key: 'autocomplete', values: ["on","off"]},
+      {key: 'autofocus', values: ["","autofocus"]},
+      {key: 'checked', values: ["","checked"]},
+      {key: 'disabled', values: ["","disabled"]},
+      {key: 'dirname', values: []},
+      {key: 'form', values: []},
+      {key: 'formaction', values: []},
+      {key: 'formenctype', values: ["application/x-www-form-urlencoded","multipart/form-data","text/plain"]},
+      {key: 'formmethod', values: ["get","post","put","delete"]},
+      {key: 'formnovalidate', values: ["","novalidate"]},
+      {key: 'formtarget', values: ["_blank","_self","_top","_parent"]},
+      {key: 'height', values: []},
+      {key: 'list', values: []},
+      {key: 'max', values: []},
+      {key: 'maxlength', values: []},
+      {key: 'min', values: []},
+      {key: 'multiple', values: ["","multiple"]},
+      {key: 'name', values: []},
+      {key: 'pattern', values: []},
+      {key: 'placeholder', values: []},
+      {key: 'readonly', values: ["","readonly"]},
+      {key: 'required', values: ["","required"]},
+      {key: 'size', values: []},
+      {key: 'src', values: []},
+      {key: 'step', values: []},
+      {key: 'type', values: [
+        "hidden","text","search","tel","url","email","password","datetime","date","month","week","time","datetime-local",
+        "number","range","color","checkbox","radio","file","submit","image","reset","button"
+      ]},
+      {key: 'value', values: []},
+      {key: 'width', values: []}
+    ]},
+    {tag: 'ins', attr: [
+      {key: 'cite', values: []},
+      {key: 'datetime', values: []}
+    ]},
+    {tag: 'kbd', attr: []},
+    {tag: 'keygen', attr: [
+      {key: 'autofocus', values: ["","autofocus"]},
+      {key: 'challenge', values: []},
+      {key: 'disabled', values: ["","disabled"]},
+      {key: 'form', values: []},
+      {key: 'keytype', values: ["RSA"]},
+      {key: 'name', values: []}
+    ]},
+    {tag: 'label', attr: [
+      {key: 'for', values: []},
+      {key: 'form', values: []}
+    ]},
+    {tag: 'legend', attr: []},
+    {tag: 'li', attr: [
+      {key: 'value', values: []}
+    ]},
+    {tag: 'link', attr: [
+      {key: 'href', values: []},
+      {key: 'hreflang', values: ["en","es"]},
+      {key: 'media', values: [
+        "all","screen","print","embossed","braille","handheld","print","projection","screen","tty","tv","speech","3d-glasses",
+        "resolution [>][<][=] [X]dpi","resolution [>][<][=] [X]dpcm","device-aspect-ratio: 16/9","device-aspect-ratio: 4/3",
+        "device-aspect-ratio: 32/18","device-aspect-ratio: 1280/720","device-aspect-ratio: 2560/1440","orientation:portrait",
+        "orientation:landscape","device-height: [X]px","device-width: [X]px","-webkit-min-device-pixel-ratio: 2"
+      ]},
+      {key: 'type', values: []},
+      {key: 'sizes', values: ["all","16x16","16x16 32x32","16x16 32x32 64x64"]}
+    ]},
+    {tag: 'map', attr: [
+      {key: 'name', values: []}
+    ]},
+    {tag: 'mark', attr: []},
+    {tag: 'menu', attr: [
+      {key: 'type', values: ["list","context","toolbar"]},
+      {key: 'label', values: []}
+    ]},
+    {tag: 'meta', attr: [
+      {key: 'charset', attr: ["utf-8"]},
+      {key: 'name', attr: ["viewport","application-name","author","description","generator","keywords"]},
+      {key: 'content', attr: ["","width=device-width","initial-scale=1, maximum-scale=1, minimun-scale=1, user-scale=no"]},
+      {key: 'http-equiv', attr: ["content-language","content-type","default-style","refresh"]}
+    ]},
+    {tag: 'meter', attr: [
+      {key: 'value', values: []},
+      {key: 'min', values: []},
+      {key: 'low', values: []},
+      {key: 'high', values: []},
+      {key: 'max', values: []},
+      {key: 'optimum', values: []}
+    ]},
+    {tag: 'nav', attr: []},
+    {tag: 'noframes', attr: []},
+    {tag: 'noscript', attr: []},
+    {tag: 'object', attr: [
+      {key: 'data', values: []},
+      {key: 'type', values: []},
+      {key: 'typemustmatch', values: ["","typemustmatch"]},
+      {key: 'name', values: []},
+      {key: 'usemap', values: []},
+      {key: 'form', values: []},
+      {key: 'width', values: []},
+      {key: 'height', values: []}
+    ]},
+    {tag: 'ol', attr: [
+      {key: 'reversed', values: ["", "reversed"]},
+      {key: 'start', values: []},
+      {key: 'type', values: ["1","a","A","i","I"]}
+    ]},
+    {tag: 'optgroup', attr: [
+      {key: 'disabled', values: ["","disabled"]},
+      {key: 'label', values: []}
+    ]},
+    {tag: 'option', attr: [
+      {key: 'disabled', values: ["", "disabled"]},
+      {key: 'label', values: []},
+      {key: 'selected', values: ["", "selected"]},
+      {key: 'value', values: []}
+    ]},
+    {tag: 'output', attr: [
+      {key: 'for', values: []},
+      {key: 'form', values: []},
+      {key: 'name', values: []}
+    ]},
+    {tag: 'p', attr: []},
+    {tag: 'param', attr: [
+      {key: 'name', values: []},
+      {key: 'value', values: []}
+    ]},
+    {tag: 'pre', attr: []},
+    {tag: 'progress', attr: [
+      {key: 'value', values: []},
+      {key: 'max', values: []}
+    ]},
+    {tag: 'q', attr: [
+      {key: 'cite', values: []}
+    ]},
+    {tag: 'rp', attr: []},
+    {tag: 'rt', attr: []},
+    {tag: 'ruby', attr: []},
+    {tag: 's', attr: []},
+    {tag: 'samp', attr: []},
+    {tag: 'script', attr: [
+      {key: 'type', values: ["text/javascript"]},
+      {key: 'src', values: []},
+      {key: 'async', values: ["","async"]},
+      {key: 'defer', values: ["","defer"]},
+      {key: 'charset', values: ["utf-8"]}
+    ]},
+    {tag: 'section', attr: []},
+    {tag: 'select', attr: [
+      {key: 'autofocus', values: ["", "autofocus"]},
+      {key: 'disabled', values: ["", "disabled"]},
+      {key: 'form', values: []},
+      {key: 'multiple', values: ["", "multiple"]},
+      {key: 'name', values: []},
+      {key: 'size', values: []}
+    ]},
+    {tag: 'small', attr: []},
+    {tag: 'source', attr: [
+      {key: 'src', values: []},
+      {key: 'type', values: []},
+      {key: 'media', values: []}
+    ]},
+    {tag: 'span', attr: []},
+    {tag: 'strike', attr: []},
+    {tag: 'strong', attr: []},
+    {tag: 'style', attr: [
+      {key: 'type', values: ["text/css"]},
+      {key: 'media', values: ["all","braille","print","projection","screen","speech"]},
+      {key: 'scoped', values: []}
+    ]},
+    {tag: 'sub', attr: []},
+    {tag: 'summary', attr: []},
+    {tag: 'sup', attr: []},
+    {tag: 'table', attr: [
+      {key: 'border', values: []}
+    ]},
+    {tag: 'tbody', attr: []},
+    {tag: 'td', attr: [
+      {key: 'colspan', values: []},
+      {key: 'rowspan', values: []},
+      {key: 'headers', values: []}
+    ]},
+    {tag: 'textarea', attr: [
+      {key: 'autofocus', values: ["","autofocus"]},
+      {key: 'disabled', values: ["","disabled"]},
+      {key: 'dirname', values: []},
+      {key: 'form', values: []},
+      {key: 'maxlength', values: []},
+      {key: 'name', values: []},
+      {key: 'placeholder', values: []},
+      {key: 'readonly', values: ["","readonly"]},
+      {key: 'required', values: ["","required"]},
+      {key: 'rows', values: []},
+      {key: 'cols', values: []},
+      {key: 'wrap', values: ["soft","hard"]}
+    ]},
+    {tag: 'tfoot', attr: []},
+    {tag: 'th', attr: [
+      {key: 'colspan', values: []},
+      {key: 'rowspan', values: []},
+      {key: 'headers', values: []},
+      {key: 'scope', values: ["row","col","rowgroup","colgroup"]}
+    ]},
+    {tag: 'thead', attr: []},
+    {tag: 'time', attr: [
+      {key: 'datetime', values: []}
+    ]},
+    {tag: 'title', attr: []},
+    {tag: 'tr', attr: []},
+    {tag: 'track', attr: [
+      {key: 'kind', values: ["subtitles","captions","descriptions","chapters","metadata"]},
+      {key: 'src', values: []},
+      {key: 'srclang', values: ["en","es"]},
+      {key: 'label', values: []},
+      {key: 'default', values: []}
+    ]},
+    {tag: 'tt', attr: []},
+    {tag: 'u', attr: []},
+    {tag: 'ul', attr: []},
+    {tag: 'var', attr: []},
+    {tag: 'video', attr: [
+      {key: "src", values: []},
+      {key: "crossorigin", values: ["anonymous","use-credentials"]},
+      {key: "poster", values: []},
+      {key: "preload", values: ["auto","metadata","none"]},
+      {key: "autoplay", values: ["","autoplay"]},
+      {key: "mediagroup", values: ["movie"]},
+      {key: "loop", values: ["","loop"]},
+      {key: "muted", values: ["","muted"]},
+      {key: "controls", values: ["","controls"]},
+      {key: "width", values: []},
+      {key: "height", values: []}
+    ]},
+    {tag: 'wbr', attr: []}
+  ];
+
+  var globalAttributes = [
+    {key: "accesskey", values: ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","0","1","2","3","4","5","6","7","8","9"]},
+    {key: "class", values: []},
+    {key: "contenteditable", values: ["true", "false"]},
+    {key: "contextmenu", values: []},
+    {key: "dir", values: ["ltr","rtl","auto"]},
+    {key: "draggable", values: ["true","false","auto"]},
+    {key: "dropzone", values: ["copy","move","link","string:","file:"]},
+    {key: "hidden", values: ["hidden"]},
+    {key: "id", values: []},
+    {key: "inert", values: ["inert"]},
+    {key: "itemid", values: []},
+    {key: "itemprop", values: []},
+    {key: "itemref", values: []},
+    {key: "itemscope", values: ["itemscope"]},
+    {key: "itemtype", values: []},
+    {key: "lang", values: ["en","es"]},
+    {key: "spellcheck", values: ["true","false"]},
+    {key: "style", values: []},
+    {key: "tabindex", values: ["1","2","3","4","5","6","7","8","9"]},
+    {key: "title", values: []},
+    {key: "translate", values: ["yes","no"]},
+    {key: "onclick", values: []},
+    {key: 'rel', values: ["stylesheet","alternate","author","bookmark","help","license","next","nofollow","noreferrer","prefetch","prev","search","tag"]}
+  ];
+
+  CodeMirror.htmlHint = function(editor) {
+    if(String.prototype.trim == undefined) {
+      String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};
+    }
+    return htmlHint(editor, htmlStructure, function (e, cur) { return e.getTokenAt(cur); });
   };
 })();
 </script>
@@ -186,7 +876,9 @@ CodeMirror.keyMap.ICEcoder = {
 };
 CodeMirror.commands.autocomplete = function(cm) {
 	if (top.ICEcoder.caretLocType=="JavaScript") {
-		CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);
+		CodeMirror.showHint(cm, CodeMirror.javascriptHint);
+	} else {
+		CodeMirror.showHint(cm, CodeMirror.htmlHint);
 	}
 }