Fix RTA's CreateLink in Firefox & IE11 (#11979)

In Firefox and IE11, the 'Create Link' button of the RichTextArea (RTA) only works by turning some highlighted text into a link (by adding the inserted URI as the href property of the text). In that, the RTA in these two browsers behave similarly to the way it does in Chrome and Edge. However, in Firefox and IE11, clicking the 'Create Link' button has no effect if no text is pre-selected by the user. This is different from the button's behavior in Chrome and Edge where the user's provided URI is inserted, both, as the displayed text and its href property if no text is highlighted.

This fix enables the RTA's 'Create Link' button to work consistently across the supported browsers. Specifically, (and in addition to enabling adding the href property of a highlighted text), this fix enables Firefox and IE11 to also insert a new Uri as a text and its href property if no text is already highlighted.

fixes #11888

1 files changed, 25 insertions, 1 deletions

diff --git a/client/src/main/java/com/vaadin/client/ui/richtextarea/VRichTextToolbar.java b/client/src/main/java/com/vaadin/client/ui/richtextarea/VRichTextToolbar.java
index d0fc5a2396..6da1e71b03 100644
--- a/client/src/main/java/com/vaadin/client/ui/richtextarea/VRichTextToolbar.java
+++ b/client/src/main/java/com/vaadin/client/ui/richtextarea/VRichTextToolbar.java
@@ -242,7 +242,7 @@ public class VRichTextToolbar extends Composite {
                 final String url = Window.prompt("Enter a link URL:",
                         "http://");
                 if (url != null) {
-                    extended.createLink(url);
+                    createLinkViaJSNI(extended, url);
                 }
             } else if (sender == removeLink) {
                 extended.removeLink();
@@ -273,6 +273,30 @@ public class VRichTextToolbar extends Composite {
                 updateStatus();
             }
         }
+
+        private native void createLinkViaJSNI(
+                RichTextArea.ExtendedFormatter formatter, String url)
+        /*-{
+            var elem = formatter.@com.google.gwt.user.client.ui.impl.RichTextAreaImpl::elem;
+            var wnd = elem.contentWindow;
+            var selectedText = "";
+            if (wnd.getSelection) {
+                selectedText = wnd.getSelection().toString();
+            }
+        
+            wnd.focus();
+            if (selectedText) {
+                // Add url as the href property of the highlighted text
+                wnd.document.execCommand("createLink", false, url);
+            } else {
+                // Insert url both as a new text and its href-property value
+                var range = wnd.document.getSelection().getRangeAt(0)
+                var node = wnd.document.createElement("a");
+                node.innerHTML = url;
+                node.setAttribute("href", url);
+                range.insertNode(node);
+            }
+          }-*/;
     }
 
     private static final RichTextArea.FontSize[] FONT_SIZES_CONSTANTS = {