chore: add render ordering to live preview widgets

Author: abose

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -115,6 +115,7 @@ function RemoteFunctions(config = {}) {
                 handlerName}' missing required function: 'dismiss'`);
             return;
         }
+        handler.handlerName = handlerName;
         _moreOptionsHandlers.set(handlerName, handler);
     }
     function getNodeMoreOptionsHandler(handlerName) {
@@ -2238,11 +2239,33 @@ function RemoteFunctions(config = {}) {
                 </span>`;
             }
 
-            LivePreviewView.getAllNodeMoreOptionsHandlers().forEach(handler => {
-                const optionalContent = handler.renderMoreOptions(this.element);
-                if(optionalContent) {
-                    content += optionalContent;
-                }
+            // Render handler options with ordering support
+            const handlerOptions = Array.from(LivePreviewView.getAllNodeMoreOptionsHandlers())
+                .map((handler, index) => {
+                    if (!handler.renderMoreOptions) {
+                        return null;
+                    }
+                    const result = handler.renderMoreOptions(this.element);
+                    if (!result) {
+                        return null;
+                    }
+                    return {
+                        listOrder: result.listOrder !== undefined ? result.listOrder : Number.MAX_SAFE_INTEGER,
+                        htmlContent: result.htmlContent || '',
+                        handlerName: handler.name || `handler_${index}`
+                    };
+                })
+                .filter(item => item && item.htmlContent)
+                .sort((a, b) => {
+                    if (a.listOrder !== b.listOrder) {
+                        return a.listOrder - b.listOrder;
+                    }
+                    // Same order - sort alphabetically by handler name
+                    return a.handlerName.localeCompare(b.handlerName);
+                });
+
+            handlerOptions.forEach(item => {
+                content += item.htmlContent;
             });
 
             const selectedClass = imageGallerySelected ? 'class="selected"' : "";
@@ -2425,9 +2448,31 @@ function RemoteFunctions(config = {}) {
 
             const shadow = this.body.attachShadow({ mode: "open" });
 
-            // Render handler dropdown items
+            // Render handler dropdown items with ordering support
             const handlerItems = Array.from(getAllNodeMoreOptionsHandlers())
-                .map(handler => handler.renderDropdownItems ? handler.renderDropdownItems() : '')
+                .map((handler, index) => {
+                    if (!handler.renderDropdownItems) {
+                        return null;
+                    }
+                    const result = handler.renderDropdownItems();
+                    if (!result) {
+                        return null;
+                    }
+                    return {
+                        listOrder: result.listOrder !== undefined ? result.listOrder : Number.MAX_SAFE_INTEGER,
+                        htmlContent: result.htmlContent || '',
+                        handlerName: handler.name || `handler_${index}`
+                    };
+                })
+                .filter(item => item && item.htmlContent)
+                .sort((a, b) => {
+                    if (a.listOrder !== b.listOrder) {
+                        return a.listOrder - b.listOrder;
+                    }
+                    // Same order - sort alphabetically by handler name
+                    return a.handlerName.localeCompare(b.handlerName);
+                })
+                .map(item => item.htmlContent)
                 .join('');
 
             let content = `

src/extensionsIntegrated/phoenix-pro/browser-context/hyperlink-editor.js

@@ -143,9 +143,12 @@ function _handleEditHyperlinkOptionClick(event, element) {
 
 function renderHyperlinkOptions(element, shadow) {
     if (element && element.tagName.toLowerCase() === 'a') {
-        return `<span data-action="HyperlinkEditor" title="${strings.editHyperlink}">
-                    ${icons.link}
-                </span>`;
+        return {
+            listOrder: 50,
+            htmlContent: `<span data-action="HyperlinkEditor" title="${strings.editHyperlink}">
+                        ${icons.link}
+                    </span>`
+        };
     }
     return '';
 }

src/extensionsIntegrated/phoenix-pro/browser-context/ruler-lines.js

@@ -251,11 +251,14 @@ function handleRulerLinesConfigChange(oldConfig, newConfig) {
 
 // Dropdown handler: render ruler lines dropdown item
 function renderRulerLinesDropdownItems() {
-    return `<div class="dropdown-item" data-action="toggle-ruler-lines">
-        <span class="item-icon">${icons.ruler}</span>
-        <span class="item-label show-ruler-label">${strings.showRulerLines}</span>
-        <span class="item-checkmark" style="visibility: ${_rulerLinesConfig.enabled ? 'visible' : 'hidden'}">${icons.check}</span>
-    </div>`;
+    return {
+        listOrder: 100,
+        htmlContent: `<div class="dropdown-item" data-action="toggle-ruler-lines">
+            <span class="item-icon">${icons.ruler}</span>
+            <span class="item-label show-ruler-label">${strings.showRulerLines}</span>
+            <span class="item-checkmark" style="visibility: ${_rulerLinesConfig.enabled ? 'visible' : 'hidden'}">${icons.check}</span>
+        </div>`
+    };
 }
 
 // Dropdown handler: handle clicks on ruler lines dropdown item