improve Ox.highlightHTML and annotations CSS

source/Ox.UI/css/Ox.UI.css

@@ -604,6 +604,9 @@ OxArrayEditable
 --------------------------------------------------------------------------------
 */
 
+.OxArrayEditable {
+    line-height: 14px;
+}
 .OxArrayEditable.OxArrayEditableInput {
     padding: 4px;
 }

source/Ox.UI/themes/classic/css/classic.css

@@ -765,11 +765,14 @@ Video
 .OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxSeparator {
     color: rgb(96, 96, 96);
 }
+.OxThemeClassic .OxAnnotationFolder .OxEditableElement .OxHighlight {
+    border-radius: 2px;
+}
 .OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxPlaceholder .OxValue {
     color: rgb(160, 160, 160);
 }
 .OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxWarning .OxValue {
-    color: rgb(192, 64, 64);
+    border-bottom: 2px dotted rgb(255, 64, 64);
 }
 .OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected {
     background: rgb(192, 192, 255);

source/Ox.UI/themes/modern/css/modern.css

@@ -789,7 +789,7 @@ Video
     color: rgb(96, 96, 96);
 }
 .OxThemeModern .OxAnnotationFolder .OxEditableElement.OxWarning .OxValue {
-    color: rgb(255, 64, 64);
+    border-bottom: 2px dotted rgb(192, 0, 0);
 }
 .OxThemeModern .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected {
     background: rgb(64, 64, 192);

source/Ox/js/String.js

@@ -54,7 +54,7 @@ Ox.highlight <f> Highlight matches in a string
     > Ox.highlight('foobar', 'foo', 'match')
     '<span class="match">foo</span>bar'
 @*/
-// fixme: with regexp, special chars would have to be escaped
+// fixme: with regexp, special chars have to be escaped
 Ox.highlight = function(txt, str, classname) {
     return str && str.length ? txt.replace(
         new RegExp('(' + str + ')', 'ig'),
@@ -63,30 +63,70 @@ Ox.highlight = function(txt, str, classname) {
 };
 
 /*@
-Ox.highlightHTML <f> Highlight matches in a html string
-    > Ox.highlight('<a href="foobar">foobar</a>', 'foo', 'match')
-    '<a href="foobar"><span class="match">foo</span>bar</a>'
+Ox.highlightHTML <f> Highlight matches in an HTML string
+    > Ox.highlightHTML('<b>foo</b>bar', 'foobar', 'h')
+    '<b><span class="match">foo</span></b><span class="h">bar</span>'
+    > Ox.highlightHTML('<a href="/foo">foo</a>bar', 'foobar', 'h')
+    '<a href="/foo"><span class="h">foo</span></a><span class="h">bar</span>'
+    > Ox.highlightHTML('foo<br>bar', 'foobar', 'h')
+    'foo<br>bar'
+    > Ox.highlightHTML('AT&amp;T', 'AT&T', 'h')
+    '<span class="h">AT&amp;T</span>'
+    > Ox.highlightHTML('AT&amp;T', 'amp', 'h')
+    'AT&amp;T'
 @*/
-Ox.highlightHTML = function(txt, str, classname) {
-    var i = -1,
-        result = '',
-        value = txt.toLowerCase();
-    str = str.toLowerCase();
-    while (txt.length) {
-        if ((i = value.indexOf(str, i + 1)) < 0) {
-            result += txt;
-            txt = '';
-        } else if (value.lastIndexOf('>', i) >= value.lastIndexOf('<', i)) {
-            result += txt.substring(0, i)
-                   + '<span class="' + classname + '">'
-                   + txt.substr(i, str.length) + '</span>';
-            txt = txt.substr(i + str.length);
-            value = txt.toLowerCase();
-            i = -1;
+Ox.highlightHTML = function(html, str, classname) {
+    var count = 0,
+        isEntity = false,
+        isTag = false,
+        position,
+        positions = [],
+        tags = ['a', 'b', 'code', 'i', 's', 'sub', 'sup', 'u'];
+    str = Ox.encodeHTML(str).toLowerCase();
+    Ox.forEach(html.toLowerCase(), function(chr, i) {
+        // check for entity or tag start
+        if (!isEntity && chr == '&') {
+            isEntity = true;
+        } else if (!isTag && chr == '<') {
+            Ox.forEach(tags, function(tag) {
+                if (html.substr(i + 1).match(new RegExp('^/?' + tag + '\\W'))) {
+                    isTag = true;
+                    return false;
+                }
+            });
+        }
+        // if outside entity or tag
+        if (!isEntity && !isTag) {
+            // if character matches
+            if (chr == str[count]) {
+                if (count == 0) {
+                    position = i;
+                }
+                count++;
+                if (count == str.length) {
+                    // make sure matches are last to first
+                    positions.unshift([position, i + 1]);
+                }
+            } else {
+                count = 0;
             }
         }
-    return result;
-};
+        // check for entity or tag end
+        if (isEntity && chr == ';') {
+            isEntity = false;
+        } else if (isTag && chr == '>') {
+            isTag = false;
+        }
+    });
+    positions.forEach(function(position) {
+        var match = '<span class="' + classname + '">'
+            + html.substr(position[0], position[1] - position[0])
+                .replace(/(<.*?>)/g, '</span>$1<span class="' + classname + '">')
+            + '</span>';
+        html = html.substr(0, position[0]) + match + html.substr(position[1]);
+    });
+    return html;
+}
 
 /*@
 Ox.isValidEmail <f> Tests if a string is a valid e-mail address