refactor: framework for optional lp edit handlers and refactor HyperlinkEditor

Author: abose

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -68,7 +68,6 @@ function RemoteFunctions(config = {}) {
     let _moreOptionsDropdown;
     let _aiPromptBox;
     let _imageRibbonGallery;
-    let _hyperlinkEditor;
     let _currentRulerLines;
     let _hotCorner;
     let _setup = false;
@@ -106,16 +105,24 @@ function RemoteFunctions(config = {}) {
         }, time * 1000);
     }
 
-    const _moreOptionsHandlers = {};
+    const _moreOptionsHandlers = new Map();
     function registerNodeMoreOptionsHandler(handlerName, handler) {
         if(_moreOptionsHandlers[handlerName]) {
             console.error(`lp: More options handler '${handlerName}' already registered. Ignoring new registration`);
             return;
         }
-        _moreOptionsHandlers[handlerName] = handler;
+        if(!handler || !handler.dismiss || !handler.renderMoreOptions){
+            console.error(`lp: More options handler  Ignoring registration: '${
+                handlerName}' missing one of required function : 'dismiss', 'renderMoreOptions'`);
+            return;
+        }
+        _moreOptionsHandlers.set(handlerName, handler);
     }
     function getNodeMoreOptionsHandler(handlerName) {
-        return _moreOptionsHandlers[handlerName];
+        return _moreOptionsHandlers.get(handlerName);
+    }
+    function getAllNodeMoreOptionsHandlers() {
+        return _moreOptionsHandlers.values();
     }
 
     /**
@@ -151,11 +158,36 @@ function RemoteFunctions(config = {}) {
         return isElementInspectable(element, onlyHighlight) && element.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
     }
 
+    /**
+     * this function calc the screen offset of an element
+     *
+     * @param {DOMElement} element
+     * @returns {{left: number, top: number}}
+     */
+    function screenOffset(element) {
+        const elemBounds = element.getBoundingClientRect();
+        const body = window.document.body;
+        let offsetTop;
+        let offsetLeft;
+
+        if (window.getComputedStyle(body).position === "static") {
+            offsetLeft = elemBounds.left + window.pageXOffset;
+            offsetTop = elemBounds.top + window.pageYOffset;
+        } else {
+            const bodyBounds = body.getBoundingClientRect();
+            offsetLeft = elemBounds.left - bodyBounds.left;
+            offsetTop = elemBounds.top - bodyBounds.top;
+        }
+        return { left: offsetLeft, top: offsetTop };
+    }
+
     const LivePreviewView = {
         registerNodeMoreOptionsHandler: registerNodeMoreOptionsHandler,
         getNodeMoreOptionsHandler: getNodeMoreOptionsHandler,
+        getAllNodeMoreOptionsHandlers: getAllNodeMoreOptionsHandlers,
         isElementEditable: isElementEditable,
-        isElementInspectable: isElementInspectable
+        isElementInspectable: isElementInspectable,
+        screenOffset: screenOffset
     };
 
     /**
@@ -369,16 +401,6 @@ function RemoteFunctions(config = {}) {
         });
     }
 
-    /**
-     * This function gets called when the edit hyperlink button is clicked
-     * @param {Event} event
-     * @param {DOMElement} element - the HTML link element
-     */
-    function _handleEditHyperlinkOptionClick(event, element) {
-        dismissHyperlinkEditor();
-        _hyperlinkEditor = new HyperlinkEditor(element);
-    }
-
     /**
      * This function gets called when the delete button is clicked
      * it sends a message to the editor using postMessage to delete the element from the source code
@@ -524,8 +546,6 @@ function RemoteFunctions(config = {}) {
             _handleSelectParentOptionClick(e, element);
         } else if (action === "edit-text") {
             startEditing(element);
-        } else if (action === "edit-hyperlink") {
-            _handleEditHyperlinkOptionClick(e, element);
         } else if (action === "duplicate") {
             _handleDuplicateOptionClick(e, element);
         } else if (action === "delete") {
@@ -540,6 +560,9 @@ function RemoteFunctions(config = {}) {
             _handleAIOptionClick(e, element);
         } else if (action === "image-gallery") {
             _handleImageGalleryOptionClick(e, element);
+        } else if(LivePreviewView.getNodeMoreOptionsHandler(action)) {
+            const handler = LivePreviewView.getNodeMoreOptionsHandler(action);
+            handler.handleClick(e, element);
         }
     }
 
@@ -1851,30 +1874,6 @@ function RemoteFunctions(config = {}) {
         return true;
     }
 
-
-    /**
-     * this function calc the screen offset of an element
-     *
-     * @param {DOMElement} element
-     * @returns {{left: number, top: number}}
-     */
-    function _screenOffset(element) {
-        const elemBounds = element.getBoundingClientRect();
-        const body = window.document.body;
-        let offsetTop;
-        let offsetLeft;
-
-        if (window.getComputedStyle(body).position === "static") {
-            offsetLeft = elemBounds.left + window.pageXOffset;
-            offsetTop = elemBounds.top + window.pageYOffset;
-        } else {
-            const bodyBounds = body.getBoundingClientRect();
-            offsetLeft = elemBounds.left - bodyBounds.left;
-            offsetTop = elemBounds.top - bodyBounds.top;
-        }
-        return { left: offsetLeft, top: offsetTop };
-    }
-
     /**
      * Check if two rectangles overlap
      * @param {Object} rect1 - First rectangle {left, top, right, bottom}
@@ -1931,7 +1930,7 @@ function RemoteFunctions(config = {}) {
      * @returns {Object} - {leftPos, topPos}
      */
     function _getCoordinatesForPosition(position, element, boxDimensions, verticalOffset, horizontalOffset) {
-        const offsetBounds = _screenOffset(element);
+        const offsetBounds = LivePreviewView.screenOffset(element);
         const elemBounds = element.getBoundingClientRect();
 
         let leftPos, topPos;
@@ -2228,24 +2227,24 @@ function RemoteFunctions(config = {}) {
 
             // Only include select parent option if element supports it
             if (showSelectParentOption) {
-                content += `<span data-action="select-parent" title="${strings.selectParent}">
+                content += `<span data-action="select-parent" class="lp-opt-select-parent" title="${strings.selectParent}">
                     ${icons.arrowUp}
                 </span>`;
             }
 
             // Only include edit text option if element supports it
             if (showEditTextOption) {
-                content += `<span data-action="edit-text" title="${strings.editText}">
+                content += `<span data-action="edit-text" class="lp-opt-edit-text" title="${strings.editText}">
                     ${icons.edit}
                 </span>`;
             }
 
-            // if its a link element, we show the edit hyperlink icon
-            if (this.element && this.element.tagName.toLowerCase() === 'a') {
-                content += `<span data-action="edit-hyperlink" title="${strings.editHyperlink}">
-                    ${icons.link}
-                </span>`;
-            }
+            LivePreviewView.getAllNodeMoreOptionsHandlers().forEach(handler => {
+                const optionalContent = handler.renderMoreOptions(this.element);
+                if(optionalContent) {
+                    content += optionalContent;
+                }
+            });
 
             const selectedClass = imageGallerySelected ? 'class="selected"' : "";
 
@@ -2335,123 +2334,6 @@ function RemoteFunctions(config = {}) {
         }
     };
 
-    /**
-     * This shows a floating input box above the element which allows you to edit the link of the 'a' tag
-     */
-    function HyperlinkEditor(element) {
-        this.element = element;
-        this.remove = this.remove.bind(this);
-        this.create();
-    }
-
-    HyperlinkEditor.prototype = {
-        create: function() {
-            const currentHref = this.element.getAttribute('href') || '';
-
-            // Create shadow DOM container
-            this.body = document.createElement('div');
-            this.body.setAttribute(GLOBALS.PHCODE_INTERNAL_ATTR, "true");
-            document.body.appendChild(this.body);
-
-            const shadow = this.body.attachShadow({ mode: 'open' });
-
-            // Create input HTML + styles
-            const html = `
-                <style>
-                    ${cssStyles.hyperlinkEditor}
-                </style>
-                <div class="hyperlink-input-box">
-                    <div class="link-icon" title="${currentHref.trim() || strings.hyperlinkNoHref}">
-                        ${icons.link}
-                    </div>
-                    <input type="text" value="${currentHref.trim()}" placeholder="https://example.com" spellcheck="false" />
-                </div>
-            `;
-
-            shadow.innerHTML = html;
-            this._shadow = shadow;
-
-            this._positionInput();
-
-            // setup the event listeners
-            const input = shadow.querySelector('input');
-            input.focus();
-            input.select();
-
-            input.addEventListener('keydown', (e) => this._handleKeydown(e));
-            input.addEventListener('blur', () => this._handleBlur());
-        },
-
-        _positionInput: function() {
-            const inputBoxElement = this._shadow.querySelector('.hyperlink-input-box');
-            if (!inputBoxElement) {
-                return;
-            }
-
-            const boxRect = inputBoxElement.getBoundingClientRect();
-            const elemBounds = this.element.getBoundingClientRect();
-            const offset = _screenOffset(this.element);
-
-            let topPos = offset.top - boxRect.height - 6;
-            let leftPos = offset.left + elemBounds.width - boxRect.width;
-
-            // If would go off top, position below
-            if (elemBounds.top - boxRect.height < 6) {
-                topPos = offset.top + elemBounds.height + 6;
-            }
-
-            // If would go off left, align left
-            if (leftPos < 0) {
-                leftPos = offset.left;
-            }
-
-            inputBoxElement.style.left = leftPos + 'px';
-            inputBoxElement.style.top = topPos + 'px';
-        },
-
-        _handleKeydown: function(event) {
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                this._save();
-            } else if (event.key === 'Escape') {
-                event.preventDefault();
-                dismissHyperlinkEditor();
-            }
-        },
-
-        _handleBlur: function() {
-            setTimeout(() => this._save(), 100);
-        },
-
-        _save: function() {
-            const input = this._shadow.querySelector('input');
-            const newHref = input.value.trim();
-            const oldHref = this.element.getAttribute('href') || '';
-
-            if (newHref !== oldHref) {
-                this.element.setAttribute('href', newHref);
-
-                const tagId = this.element.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
-                window._Brackets_MessageBroker.send({
-                    livePreviewEditEnabled: true,
-                    livePreviewHyperlinkEdit: true,
-                    element: this.element,
-                    tagId: Number(tagId),
-                    newHref: newHref
-                });
-            }
-
-            this.remove();
-        },
-
-        remove: function() {
-            if (this.body && this.body.parentNode) {
-                this.body.parentNode.removeChild(this.body);
-                this.body = null;
-            }
-        }
-    };
-
     /**
      * this is called when user clicks on the Show Ruler lines option in the more options dropdown
      * @param {Event} event - click event
@@ -2784,7 +2666,7 @@ function RemoteFunctions(config = {}) {
     AIPromptBox.prototype = {
         _getBoxPosition: function(boxWidth, boxHeight) {
             const elemBounds = this.element.getBoundingClientRect();
-            const offset = _screenOffset(this.element);
+            const offset = LivePreviewView.screenOffset(this.element);
 
             let topPos = offset.top - boxHeight - 6; // 6 for just some little space to breathe
             let leftPos = offset.left + elemBounds.width - boxWidth;
@@ -4240,7 +4122,7 @@ function RemoteFunctions(config = {}) {
 
             highlight.className = GLOBALS.HIGHLIGHT_CLASSNAME;
 
-            var offset = _screenOffset(element);
+            var offset = LivePreviewView.screenOffset(element);
 
             // some code to find element left/top was removed here. This seems to be relevant to box model
             // live highlights. firether reading: https://github.com/adobe/brackets/pull/13357/files
@@ -5616,13 +5498,6 @@ function RemoteFunctions(config = {}) {
         }
     }
 
-    function dismissHyperlinkEditor() {
-        if (_hyperlinkEditor) {
-            _hyperlinkEditor.remove();
-            _hyperlinkEditor = null;
-        }
-    }
-
     /**
      * Helper function to dismiss all UI boxes at once
      */
@@ -5632,8 +5507,8 @@ function RemoteFunctions(config = {}) {
         dismissAIPromptBox();
         dismissNodeInfoBox();
         dismissImageRibbonGallery();
-        dismissHyperlinkEditor();
         dismissToastMessage();
+        getAllNodeMoreOptionsHandlers().forEach(handler => handler.dismiss());
     }
 
     let _toastTimeout = null;

src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js

@@ -360,13 +360,41 @@ define(function (require, exports, module) {
             .replace("// DONT_STRIP_MINIFY:REPLACE_WITH_ADDED_REMOTE_SCRIPTS", remoteScriptText);
     }
 
-    function addRemoteFunctionScript(scriptName, scriptText) {
-        if(remoteFunctionsConstantsScripts.has(scriptName) || remoteFunctionsScripts.has(scriptName)){
-            console.error(`Remote function script ${scriptName} already exists. Script wont be added.`);
+    const JS_RESERVED_WORDS = new Set([
+        "break","case","catch","class","const","continue","debugger","default",
+        "delete","do","else","export","extends","finally","for","function",
+        "if","import","in","instanceof","new","return","super","switch",
+        "this","throw","try","typeof","var","void","while","with","yield",
+        "enum","await","implements","interface","let","package","private",
+        "protected","public","static"
+    ]);
+
+    function isValidFunctionName(name) {
+        if (typeof name !== "string" || !name.length) {
+            return false;
+        }
+
+        // JS identifier syntax
+        if (!/^[$A-Z_][0-9A-Z_$]*$/i.test(name)) {
+            return false;
+        }
+
+        // Reserved words
+        return !JS_RESERVED_WORDS.has(name);
+    }
+
+
+    function addRemoteFunctionScript(scriptFunctionName, scriptText) {
+        if(remoteFunctionsConstantsScripts.has(scriptFunctionName) || remoteFunctionsScripts.has(scriptFunctionName)){
+            console.error(`Remote function script ${scriptFunctionName} already exists. Script wont be added.`);
+            return false;
+        }
+        if(scriptFunctionName.length > 100 || !isValidFunctionName(scriptFunctionName)){
+            console.error(`Script name ${scriptFunctionName} should be a valid function name.`);
             return false;
         }
-        scriptText = `(()=>{${scriptText}})();`;
-        remoteFunctionsScripts.set(scriptName, scriptText);
+        scriptText = `(function ${scriptFunctionName}(){${scriptText}})();`;
+        remoteFunctionsScripts.set(scriptFunctionName, scriptText);
         if(!RemoteFunctions.includes("// DONT_STRIP_MINIFY:REPLACE_WITH_ADDED_REMOTE_SCRIPTS")){
             throw new Error("RemoteFunctions script is missing the placeholder // REPLACE_WITH_ADDED_REMOTE_SCRIPTS");
         }