deploy: 606b7d0

Author: phoenixide

LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -33,6 +33,10 @@ function RemoteFunctions(config = {}) {
     // we need this so that we can remove click styling from the previous element when a new element is clicked
     let previouslyClickedElement = null;
 
+    // this is needed so that when user starts typing we can dismiss all the boxes and highlights
+    // now with this variable we check if its a first keystroke on an element or a subsequent keystroke
+    let _uiHiddenDuringTyping = false;
+
     var req, timeout;
     var animateHighlight = function (time) {
         if(req) {
@@ -1577,10 +1581,6 @@ function RemoteFunctions(config = {}) {
         create: function() {
             this.remove(); // remove existing box if already present
 
-            if(!config.isProUser) {
-                return;
-            }
-
             // this check because when there is no element visible to the user, we don't want to show the box
             // for ex: when user clicks on a 'x' button and the button is responsible to hide a panel
             // then clicking on that button shouldn't show the more options box
@@ -3822,6 +3822,9 @@ function RemoteFunctions(config = {}) {
      * @param {Element} element - The DOM element to select
      */
     function _selectElement(element) {
+        // user selected a new element, we need to reset this variable
+        _uiHiddenDuringTyping = false;
+
         dismissNodeMoreOptionsBox();
         dismissAIPromptBox();
         dismissNodeInfoBox();
@@ -3931,12 +3934,7 @@ function RemoteFunctions(config = {}) {
             event.stopPropagation();
             event.stopImmediatePropagation();
 
-            // when in click mode, only select dynamic elements (without data-brackets-id) directly
-            // as for static elements, the editor will handle selection via highlight message
-            if (!shouldShowHighlightOnHover() && !element.hasAttribute("data-brackets-id")) {
-                _selectElement(element);
-            }
-
+            _selectElement(element);
             activateHoverLock();
         }
     }
@@ -4021,7 +4019,10 @@ function RemoteFunctions(config = {}) {
         var foundValidElement = false;
         for (i = 0; i < nodes.length; i++) {
             if(isElementInspectable(nodes[i], true) && nodes[i].tagName !== "BR") {
-                _selectElement(nodes[i]);
+                // only call _selectElement if it's a different element to avoid unnecessary box recreation
+                if (previouslyClickedElement !== nodes[i]) {
+                    _selectElement(nodes[i]);
+                }
                 foundValidElement = true;
                 break;
             }
@@ -4431,8 +4432,14 @@ function RemoteFunctions(config = {}) {
 
         this.rememberedNodes = {};
 
-        // update highlight after applying diffs
-        redrawEverything();
+        // when user starts typing in the editor we hide all the boxes and highlights
+        // _uiHiddenDuringTyping variable keeps track if its a first keystroke or subsequent
+        // so that we don't end up calling dismiss/hide kinda functions multiple times
+        if (!_uiHiddenDuringTyping) {
+            dismissUIAndCleanupState();
+            hideHighlight();
+            _uiHiddenDuringTyping = true;
+        }
     };
 
     function applyDOMEdits(edits) {

LiveDevelopment/main.js

@@ -48,14 +48,14 @@ define(function main(require, exports, module) {
         EditorManager      = require("editor/EditorManager");
 
 
-    // this is responsible to make the advanced live preview features active or inactive
-    // @abose (make the first value true when its a paid user, everything rest is handled automatically)
-    let isProUser = window.KernalModeTrust ? true : false;
-    // when isFreeTrialUser is true isProUser should also be true
-    // when its false, isProUser can be true/false doesn't matter
-    let isFreeTrialUser = true;
+    const KernalModeTrust = window.KernalModeTrust;
+
+    // this will later be assigned its correct values once entitlementsManager loads
+    let isProUser = false;
+    let isFreeTrialUser = false;
 
     const EVENT_LIVE_HIGHLIGHT_PREF_CHANGED = "liveHighlightPrefChange";
+    const PREFERENCE_LIVE_PREVIEW_MODE = "livePreviewMode";
 
     // state manager key to track image gallery selected state, by default we keep this as selected
     // if this is true we show the image gallery when an image element is clicked
@@ -316,6 +316,69 @@ define(function main(require, exports, module) {
         return false;
     }
 
+    // default mode means on first load for pro user we have edit mode
+    // for free user we have highlight mode
+    function _getDefaultMode() {
+        return isProUser ? "edit" : "highlight";
+    }
+
+    // to set that mode in the preferences
+    function _initializeMode() {
+        if (isFreeTrialUser) {
+            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "edit");
+            return;
+        }
+
+        const savedMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
+
+        if (savedMode === "highlight" && isProUser) {
+            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "edit");
+        } else if (savedMode === "edit" && !isProUser) {
+            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "highlight");
+        }
+    }
+
+    // this is called everytime there is a change in entitlements
+    async function _updateProUserStatus() {
+        if (!KernalModeTrust) {
+            return;
+        }
+
+        try {
+            const entitlement = await KernalModeTrust.EntitlementsManager.getLiveEditEntitlement();
+
+            isProUser = entitlement.activated;
+            isFreeTrialUser = await KernalModeTrust.EntitlementsManager.isInProTrial();
+
+            config.isProUser = isProUser;
+            exports.isProUser = isProUser;
+            exports.isFreeTrialUser = isFreeTrialUser;
+
+            _initializeMode();
+
+            if (MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
+                MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
+                MultiBrowserLiveDev.registerHandlers();
+            }
+        } catch (error) {
+            console.error("Error updating pro user status:", error);
+            isProUser = false;
+            isFreeTrialUser = false;
+        }
+    }
+
+    function setMode(mode) {
+        if (mode === "edit" && !exports.isProUser) {
+            return false;
+        }
+        PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, mode);
+        return true;
+    }
+
+    function getCurrentMode() {
+        return PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
+    }
+
     /** Initialize LiveDevelopment */
     AppInit.appReady(function () {
         params.parse();
@@ -330,6 +393,15 @@ define(function main(require, exports, module) {
         _loadStyles();
         _updateHighlightCheckmark();
 
+        // init pro user status and listen for changes
+        if (KernalModeTrust) {
+            _updateProUserStatus();
+            KernalModeTrust.EntitlementsManager.on(
+                KernalModeTrust.EntitlementsManager.EVENT_ENTITLEMENTS_CHANGED,
+                _updateProUserStatus
+            );
+        }
+
         // update styles for UI status
         _status = [
             { tooltip: Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED, style: "warning" },
@@ -385,6 +457,11 @@ define(function main(require, exports, module) {
             }
         });
 
+    PreferencesManager.definePreference(PREFERENCE_LIVE_PREVIEW_MODE, "string", _getDefaultMode(), {
+        description: StringUtils.format(Strings.LIVE_PREVIEW_MODE_PREFERENCE, "'preview'", "'highlight'", "'edit'"),
+        values: ["preview", "highlight", "edit"]
+    });
+
     config.highlight = PreferencesManager.getViewState("livedevHighlight");
 
     function setLivePreviewEditFeaturesActive(enabled) {
@@ -441,4 +518,6 @@ define(function main(require, exports, module) {
     exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;
     exports.hideHighlight = MultiBrowserLiveDev.hideHighlight;
     exports.dismissLivePreviewBoxes = MultiBrowserLiveDev.dismissLivePreviewBoxes;
+    exports.setMode = setMode;
+    exports.getCurrentMode = getCurrentMode;
 });

appConfig.js

@@ -33,7 +33,7 @@ window.AppConfig = {
         "app_update_url": "https://updates.phcode.io/tauri/update-latest-experimental-build.json",
         "extensionTakedownURL": "https://updates.phcode.io/extension_takedown.json",
         "linting.enabled_by_default": true,
-        "build_timestamp": "2025-11-20T15:46:31.860Z",
+        "build_timestamp": "2025-11-22T06:21:43.682Z",
         "googleAnalyticsID": "G-P4HJFPDB76",
         "googleAnalyticsIDDesktop": "G-VE5BXWJ0HF",
         "mixPanelID": "49c4d164b592be2350fc7af06a259bf3",
@@ -45,7 +45,7 @@ window.AppConfig = {
         "bugsnagEnv": "development"
     },
     "name": "Phoenix Code",
-    "version": "4.1.2-21722",
+    "version": "4.1.2-21725",
     "apiVersion": "4.1.2",
     "homepage": "https://core.ai",
     "issues": {