feat: show a link icon in the hyperlink editor

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -1809,9 +1809,26 @@ function RemoteFunctions(config = {}) {
                         max-width: 400px;
                         box-sizing: border-box;
                         padding: 7px 14px !important;
+                        display: flex !important;
+                        align-items: center !important;
+                        gap: 8px !important;
+                    }
+                    .link-icon {
+                        display: flex !important;
+                        align-items: center !important;
+                        justify-content: center !important;
+                        flex-shrink: 0 !important;
+                        width: 16px !important;
+                        height: 16px !important;
+                        color: #cdcdcd !important;
+                    }
+                    .link-icon svg {
+                        width: 16px !important;
+                        height: 16px !important;
+                        display: block !important;
                     }
                     input {
-                        width: 100%;
+                        flex: 1 !important;
                         border: none;
                         outline: none;
                         font-size: 14px !important;
@@ -1824,7 +1841,10 @@ function RemoteFunctions(config = {}) {
                     }
                 </style>
                 <div class="hyperlink-input-box">
-                    <input type="text" value="${currentHref}" placeholder="https://example.com" spellcheck="false" />
+                    <div class="link-icon" title="${currentHref.trim() || config.strings.hyperlinkNoHref}">
+                        ${ICONS.link}
+                    </div>
+                    <input type="text" value="${currentHref.trim()}" placeholder="https://example.com" spellcheck="false" />
                 </div>
             `;
 

src/LiveDevelopment/main.js

@@ -107,6 +107,7 @@ define(function main(require, exports, module) {
             selectParent: Strings.LIVE_DEV_MORE_OPTIONS_SELECT_PARENT,
             editText: Strings.LIVE_DEV_MORE_OPTIONS_EDIT_TEXT,
             editHyperlink: Strings.LIVE_DEV_MORE_OPTIONS_EDIT_HYPERLINK,
+            hyperlinkNoHref: Strings.LIVE_DEV_HYPERLINK_NO_HREF,
             duplicate: Strings.LIVE_DEV_MORE_OPTIONS_DUPLICATE,
             delete: Strings.LIVE_DEV_MORE_OPTIONS_DELETE,
             ai: Strings.LIVE_DEV_MORE_OPTIONS_AI,

src/nls/root/strings.js

@@ -188,6 +188,7 @@ define({
     "LIVE_DEV_MORE_OPTIONS_SELECT_PARENT": "Select Parent",
     "LIVE_DEV_MORE_OPTIONS_EDIT_TEXT": "Edit Text",
     "LIVE_DEV_MORE_OPTIONS_EDIT_HYPERLINK": "Edit Hyperlink",
+    "LIVE_DEV_HYPERLINK_NO_HREF": "No href set",
     "LIVE_DEV_MORE_OPTIONS_DUPLICATE": "Duplicate",
     "LIVE_DEV_MORE_OPTIONS_DELETE": "Delete",
     "LIVE_DEV_MORE_OPTIONS_AI": "Edit with AI",