Work on webbox

LanguageMaster.xml

@@ -2181,7 +2181,6 @@ can edit in same subtitle file (collaboration)</Information>
     <AlignmentN7>Alignment top left - {\an7}</AlignmentN7>
     <AlignmentN8>Alignment top center - {\an8}</AlignmentN8>
     <AlignmentN9>Alignment top right - {\an9}</AlignmentN9>
-    <ColorX>Color {0} ({1})</ColorX>
     <CopyTextOnly>Copy text only to clipboard (selected lines)</CopyTextOnly>
     <CopyTextOnlyFromOriginalToCurrent>Copy text from original to current</CopyTextOnlyFromOriginalToCurrent>
     <AutoDurationSelectedLines>Auto-duration (selected lines)</AutoDurationSelectedLines>

src/libse/LanguageDeserializer.cs

@@ -5965,9 +5965,6 @@ namespace Nikse.SubtitleEdit.Core
                 case "Settings/AlignmentN9":
                     language.Settings.AlignmentN9 = reader.Value;
                     break;
-                case "Settings/ColorX":
-                    language.Settings.ColorX = reader.Value;
-                    break;
                 case "Settings/CopyTextOnly":
                     language.Settings.CopyTextOnly = reader.Value;
                     break;

src/ui/Controls/SETextBox.cs

@@ -32,7 +32,7 @@ namespace Nikse.SubtitleEdit.Controls
         private TextBox _textBox;
         private int _mouseMoveSelectionLength;
         private WebBrowserEditBox _htmlBox;
-        private bool _useWebBrowser = false;
+        private bool _useWebBrowser = true;
 
         public SETextBox()
         {

src/ui/Controls/WebBrowser/WebBrowserEditBox.cs

@@ -1,6 +1,7 @@
 using Nikse.SubtitleEdit.Core.Common;
 using System;
 using System.Drawing;
+using System.Globalization;
 using System.IO;
 using System.Net;
 using System.Reflection;
@@ -16,7 +17,7 @@ namespace Nikse.SubtitleEdit.Controls.WebBrowser
         private bool _rightToLeft;
         private bool _center;
         private long _lastKeyOrClick = -1;
-        private bool _lastKeyOrClickActivity;
+        private string _lastHtml;
         private readonly System.Windows.Forms.Timer _timerSyntaxColor;
 
         public new event EventHandler TextChanged;
@@ -39,7 +40,7 @@ namespace Nikse.SubtitleEdit.Controls.WebBrowser
                 Document?.InvokeScript("initEvents");
             };
             _timerSyntaxColor = new System.Windows.Forms.Timer { Interval = 100 };
-            _timerSyntaxColor.Tick += (sender, args) => { UpdateSyntaxColorFromJs(); };
+            _timerSyntaxColor.Tick += (sender, args) => { UpdateSyntaxColor(Text); };
             _timerSyntaxColor.Start();
         }
 
@@ -178,7 +179,16 @@ namespace Nikse.SubtitleEdit.Controls.WebBrowser
             }
             set
             {
-                //TODO:
+                if (Document == null)
+                {
+                    return;
+                }
+
+                var position = (Document.InvokeScript("getCursorPosition") ?? "0").ToString();
+                if (position != value.ToString(CultureInfo.InvariantCulture))
+                {
+                    Document.InvokeScript("setCursorPosition", new object[] { value });
+                }
             }
         }
 
@@ -281,7 +291,6 @@ namespace Nikse.SubtitleEdit.Controls.WebBrowser
             KeyUp?.Invoke(this, new KeyEventArgs(keyData));
             TextChanged?.Invoke(this, new KeyEventArgs(0));
             _lastKeyOrClick = DateTime.UtcNow.Ticks;
-            _lastKeyOrClickActivity = true;
         }
 
         public void ClientClick()
@@ -290,7 +299,6 @@ namespace Nikse.SubtitleEdit.Controls.WebBrowser
             MouseClick?.Invoke(this, new MouseEventArgs(MouseButtons.Left, 1, mp.X, mp.Y, 1));
             TextChanged?.Invoke(this, new KeyEventArgs(0));
             _lastKeyOrClick = DateTime.UtcNow.Ticks;
-            _lastKeyOrClickActivity = true;
         }
 
         public void ClientMouseMove()
@@ -323,27 +331,8 @@ namespace Nikse.SubtitleEdit.Controls.WebBrowser
         {
         }
 
-        private string _lastHtml;
-
         public void UpdateSyntaxColor(string text)
         {
-            _lastKeyOrClick = DateTime.UtcNow.Ticks;
-            _lastKeyOrClickActivity = false;
-            var html = HighLightHtml(text);
-            if (html != _lastHtml && Document != null)
-            {
-                Document.InvokeScript("setHtml", new object[] { html });
-                _lastHtml = html;
-            }
-        }
-
-        public void UpdateSyntaxColorFromJs()
-        {
-            if (!_lastKeyOrClickActivity)
-            {
-                return; // exit if not key or click activity
-            }
-
             var diff = DateTime.UtcNow.Ticks - _lastKeyOrClick;
             if (diff < 10_000 * 750)
             {
@@ -351,12 +340,9 @@ namespace Nikse.SubtitleEdit.Controls.WebBrowser
             }
 
             _lastKeyOrClick = DateTime.UtcNow.Ticks;
-
-            var text = Text;
             var html = HighLightHtml(text);
-            if (html != _lastHtml && Document != null)
+            if (Document != null && (_lastHtml == null || html.Trim() != _lastHtml.Trim()))
             {
-                //var oldHtml = (Document.InvokeScript("getHtml") ?? "0").ToString();
                 Document.InvokeScript("setHtml", new object[] { html });
                 _lastHtml = html;
             }
@@ -458,6 +444,5 @@ namespace Nikse.SubtitleEdit.Controls.WebBrowser
 
             return sb.ToString();
         }
-
     }
 }

src/ui/Controls/WebBrowser/WebBrowserEditBox.html

@@ -68,12 +68,6 @@
             return document.getElementById(id);
         }
 
-        //function syntaxColorIfNotActive() {
-        //    setTimeout(function () {
-        //        window.external.UpdateSyntaxColorFromJs(getText(), document.getElementById("myContent").innerHTML);
-        //    }, 1);
-        //}
-
         function initEvents() {
             getById("myContent").addEventListener("focus", function (e) {
                 window.external.ClientFocus();
@@ -89,12 +83,10 @@
 
             getById("myContent").addEventListener("keyup", function (e) {
                 window.external.ClientKeyUp(e.keyCode, e.ctrlKey, e.shiftKey, e.altKey);
-//                syntaxColorIfNotActive();
             });
 
             getById("myContent").addEventListener("click", function (e) {
                 window.external.ClientClick();
-//                syntaxColorIfNotActive();
             });
 
             getById("myContent").addEventListener("mousemove", function (e) {
@@ -102,71 +94,58 @@
             });
         }
 
-        function getLengthFromChildren(node, txtObj, top) {
+        function nextNode(node) {
-            while (node != null) {
+            if (node.hasChildNodes()) {
-                if (node.firstChild) {
+                return node.firstChild;
-                    if (node.nodeName === "P" || node.nodeName === "DIV") {
-                        txtObj.l += 2;
-                    }
-                    getLengthFromChildren(node.firstChild, txtObj, false);
             } else {
-                    if (node.nodeType === 3) {
+                while (node && !node.nextSibling) {
-                        txtObj.l += node.nodeValue.length;
+                    node = node.parentNode;
-                    } else if (node.nodeName === "P" || node.nodeName === "DIV") {
+                    if (node.id === "myContent") {
-                        txtObj.l += 2;
+                        return null;
-                    } else if (node.nodeName === "BR" && node.parentNode.nodeName !== "P" && node.parentNode.nodeName !== "DIV") {
-                        txtObj.l += 2;
-                    } else if (node.innerHTML === "<br>" && node.nodeName !== "P" && node.nodeName !== "DIV") {
-                        txtObj.l += 2;
                     }
                 }
-                if (top) {
-                    return;
-                }
-                node = node.nextSibling;
-            }
-            return;
-        }
-
-        function getNodePosition(node, txtObj) {
                 if (!node) {
-                return txtObj.l;
+                    return null;
-            }
-
-            while (true) {
-                if (node.previousSibling) {
-                    node = node.previousSibling;
-                } else {
-                    var p = node.parentNode;
-                    if (p.id === "myContent") {
-                        return txtObj.l;
-                    }
-
-                    if (p.previousSibling) {
-                        node = p.previousSibling;
-                    } else {
-                        p = node.parentNode.parentNode;
-                        if (p && p.id === "myContent" || (p && p.nodeName === "P" && p.parentNode && p.parentNode.id === "myContent")) {
-                            return txtObj.l;
-                        }
-
-                        if (p && p.parentNode && p.parentNode.previousSibling) {
-                            node = p.parentNode.previousSibling;
-                        } else {
-                            return txtObj.l;
                 }
+                return node.nextSibling;
             }
         }
 
-                getLengthFromChildren(node, txtObj, true);
+        function getCursorPosInner(findNode, findOffset) {
+            if (!findNode) {
+                return 0;
             }
+
+            var node = getById("myContent").firstChild;
+            var l = findOffset;
+            var first = true;
+            while (node) {
+                if (!first && node.nodeName === "P" ||
+                    node.innerHTML === "<br>" && node.nodeName !== "P" && node.parentNode.nodeName !== "P") {
+                    l += 2;
+                }
+
+                if (findNode.isEqualNode(node)) {
+                    return l;
+                }
+
+                if (node.length) {
+                    l += node.length;
+                }
+
+                node = nextNode(node);
+                first = false;
+            }
+            return l;
         }
 
         function getCursorPosition() {
             var x = window.getSelection();
-            return getNodePosition(x.focusNode, { l: x.focusOffset });
+            if (!x || !x.focusNode) {
+                return 0;
+            }
+            return getCursorPosInner(x.focusNode, x.focusOffset);
         }
-
 
         function getSelectionText() {
             return window.getSelection().toString();
@@ -174,7 +153,10 @@
 
         function getSelectionStart() {
             var x = window.getSelection();
-            return getNodePosition(x.anchorNode, x.anchorOffset);
+            if (!x || !x.anchorNode) {
+                return 0;
+            }
+            return getCursorPosInner(x.anchorNode, x.anchorOffset);
         }
 
         function getNextNode(node) {
@@ -213,6 +195,7 @@
             var firstNode = true;
             var i = 0;
             var idx = 0;
+            var lastNode = null;
             while (node && i < 100) {
                 i++;
                 if (node.nodeName === "BR") {
@@ -223,24 +206,64 @@
                     pos--;
                 } else if (node.nodeType === Node.TEXT_NODE && node.nodeValue) {
                     if (node.nodeValue && idx + extra + node.nodeValue.length >= pos) {
-                        var range = document.createRange();
-                        var sel = window.getSelection();
                         var newIdx = pos - idx - extra;
                         if (newIdx < 0) {
                             newIdx = 0;
                         }
-                        range.setStart(node, newIdx);
+                        focusNode(node, newIdx);
-                        range.collapse(true);
-                        sel.removeAllRanges();
-                        sel.addRange(range);
                         return;
                     }
 
                     idx += node.nodeValue.length;
                 }
+
+                if (idx + extra >= pos) {
+                    if (node.hasChildNodes()) {
+                        focusNode(node.lastChild, 0);
+                    } else {
+                        focusNode(node, 0);
+                    }
+                    return;
+                }
+
+                lastNode = node;
                 node = getNextNode(node);
                 firstNode = false;
             }
+
+            if (lastNode && pos >= getText().length) {
+                if (lastNode.hasChildNodes()) {
+                    focusNode(lastNode.lastChild, 0);
+                } else {
+                    focusNode(lastNode, 0);
+                }
+
+                return;
+            }
+        }
+
+        function focusNode(node, offset) {
+            var r = document.createRange();
+            var s = window.getSelection();
+            r.setStart(node, offset);
+            r.collapse(true);
+            s.removeAllRanges();
+            s.addRange(r);
+        }
+
+        function setCaretToEnd() {
+            var target = document.getElementById("myContent");
+            var range = document.createRange();
+            var sel = window.getSelection();
+            range.selectNodeContents(target);
+            range.collapse(false);
+            sel.removeAllRanges();
+            sel.addRange(range);
+            target.focus();
+            range.detach();
+
+            // scroll to end
+            target.scrollTop = target.scrollHeight;
         }
 
         function setTextDirection(align, dir) {