feat: always active edit mode when phoenix opens/reloads

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -115,14 +115,14 @@ function RemoteFunctions(config = {}) {
 
     /**
      * This is a checker function for editable elements, it makes sure that the element satisfies all the required checks
-     * - When onlyHighlight is false → config.isLPEditFeaturesActive must be true
-     * - When onlyHighlight is true → config.isLPEditFeaturesActive can be true or false (doesn't matter)
+     * - When onlyHighlight is false → config.isProUser must be true
+     * - When onlyHighlight is true → config.isProUser can be true or false (doesn't matter)
      * @param {DOMElement} element
-     * @param {boolean} [onlyHighlight=false] - If true, bypasses the isLPEditFeaturesActive check
+     * @param {boolean} [onlyHighlight=false] - If true, bypasses the isProUser check
      * @returns {boolean} - True if the element is editable else false
      */
     function isElementEditable(element, onlyHighlight = false) {
-        if(!config.isLPEditFeaturesActive && !onlyHighlight) {
+        if(!config.isProUser && !onlyHighlight) {
             return false;
         }
 
@@ -1327,7 +1327,7 @@ function RemoteFunctions(config = {}) {
         create: function() {
             this.remove(); // remove existing box if already present
 
-            if(!config.isLPEditFeaturesActive) {
+            if(!config.isProUser) {
                 return;
             }
 
@@ -1502,7 +1502,7 @@ function RemoteFunctions(config = {}) {
 
             // get the ID and classes for that element, as we need to display it in the box
             const id = this.element.id;
-            const classes = this.element.className ? this.element.className.split(/\s+/).filter(Boolean) : [];
+            const classes = Array.from(this.element.classList || []);
 
             let content = ""; // this will hold the main content that will be displayed
             content += "<div class='tag-name'>" + this.element.tagName.toLowerCase() + "</div>"; // add element tag name
@@ -1574,7 +1574,7 @@ function RemoteFunctions(config = {}) {
         create: function() {
             this.remove(); // remove existing box if already present
 
-            if(!config.isLPEditFeaturesActive) {
+            if(!config.isProUser) {
                 return;
             }
 
@@ -2836,7 +2836,7 @@ function RemoteFunctions(config = {}) {
         var oldConfig = config;
         config = JSON.parse(newConfig);
 
-        if (config.highlight || (config.isLPEditFeaturesActive && shouldShowHighlightOnHover())) {
+        if (config.highlight || (config.isProUser && shouldShowHighlightOnHover())) {
             // Add hover event listeners if highlight is enabled OR editHighlights is set to hover
             window.document.removeEventListener("mouseover", onElementHover);
             window.document.removeEventListener("mouseout", onElementHoverOut);
@@ -2881,7 +2881,7 @@ function RemoteFunctions(config = {}) {
             }
 
             // Re-setup event listeners based on new mode to ensure proper behavior
-            if (config.highlight && config.isLPEditFeaturesActive) {
+            if (config.highlight && config.isProUser) {
                 window.document.removeEventListener("mouseover", onElementHover);
                 window.document.removeEventListener("mouseout", onElementHoverOut);
                 window.document.addEventListener("mouseover", onElementHover);
@@ -3092,7 +3092,7 @@ function RemoteFunctions(config = {}) {
         window.document.removeEventListener("dragleave", onDragLeave);
         window.document.removeEventListener("keydown", onKeyDown);
 
-        if (config.isLPEditFeaturesActive) {
+        if (config.isProUser) {
             // Initialize hover highlight with Chrome-like colors
             _hoverHighlight = new Highlight("#c8f9c5", true); // Green similar to Chrome's padding color
 

src/LiveDevelopment/main.js

@@ -48,7 +48,10 @@ define(function main(require, exports, module) {
 
     // 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 isLPEditFeaturesActive = window.KernalModeTrust ? false : false;
+    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 EVENT_LIVE_HIGHLIGHT_PREF_CHANGED = "liveHighlightPrefChange";
 
@@ -64,7 +67,7 @@ define(function main(require, exports, module) {
             paddingColor: {r: 147, g: 196, b: 125, a: 0.66},
             showInfo: true
         },
-        isLPEditFeaturesActive: isLPEditFeaturesActive,
+        isProUser: isProUser,
         elemHighlights: "hover", // default value, this will get updated when the extension loads
         // this strings are used in RemoteFunctions.js
         // we need to pass this through config as remoteFunctions runs in browser context and cannot
@@ -410,8 +413,8 @@ define(function main(require, exports, module) {
 
     function setLivePreviewEditFeaturesActive(enabled) {
         // TODO: @abose here add kernal mode trust check
-        isLPEditFeaturesActive = enabled;
-        config.isLPEditFeaturesActive = enabled;
+        isProUser = enabled;
+        config.isProUser = enabled;
         if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
             MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
             MultiBrowserLiveDev.registerHandlers();
@@ -437,7 +440,8 @@ define(function main(require, exports, module) {
 
     EventDispatcher.makeEventDispatcher(exports);
 
-    exports.isLPEditFeaturesActive = isLPEditFeaturesActive;
+    exports.isProUser = isProUser;
+    exports.isFreeTrialUser = isFreeTrialUser;
 
     // public events
     exports.EVENT_OPEN_PREVIEW_URL = MultiBrowserLiveDev.EVENT_OPEN_PREVIEW_URL;

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -94,7 +94,7 @@ define(function (require, exports, module) {
      * @returns {string} "highlight" if edit features inactive, "edit" if active
      */
     function _getDefaultMode() {
-        return LiveDevelopment.isLPEditFeaturesActive ? "edit" : "highlight";
+        return LiveDevelopment.isProUser ? "edit" : "highlight";
     }
 
     // define the live preview mode preference
@@ -256,8 +256,17 @@ define(function (require, exports, module) {
      * init live preview mode from saved preferences
      */
     function _initializeMode() {
+        // when user is on free trial we just push the edit mode to them every time they open/reload Phoenix
+        if(LiveDevelopment.isFreeTrialUser) {
+            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "edit");
+            _LPEditMode();
+            $previewBtn.removeClass('selected');
+            _updateModeButton("edit");
+            return;
+        }
+
         const savedMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
-        const isEditFeaturesActive = LiveDevelopment.isLPEditFeaturesActive;
+        const isEditFeaturesActive = LiveDevelopment.isProUser;
 
         // If user has edit mode saved but edit features are not active, default to highlight
         let effectiveMode = savedMode;
@@ -283,7 +292,7 @@ define(function (require, exports, module) {
     }
 
     function _showModeSelectionDropdown(event) {
-        const isEditFeaturesActive = LiveDevelopment.isLPEditFeaturesActive;
+        const isEditFeaturesActive = LiveDevelopment.isProUser;
         const items = [
             Strings.LIVE_PREVIEW_MODE_PREVIEW,
             Strings.LIVE_PREVIEW_MODE_HIGHLIGHT,
@@ -597,7 +606,7 @@ define(function (require, exports, module) {
     function _handlePreviewBtnClick() {
         if($previewBtn.hasClass('selected')) {
             $previewBtn.removeClass('selected');
-            const isEditFeaturesActive = LiveDevelopment.isLPEditFeaturesActive;
+            const isEditFeaturesActive = LiveDevelopment.isProUser;
             if(modeThatWasSelected) {
                 if(modeThatWasSelected === 'edit' && !isEditFeaturesActive) {
                     // we just set the preference as preference has change handlers that will update the config
@@ -1085,7 +1094,7 @@ define(function (require, exports, module) {
         PreferencesManager.on("change", PREFERENCE_LIVE_PREVIEW_MODE, function () {
             // Get the current preference value directly
             const newMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE);
-            const isEditFeaturesActive = LiveDevelopment.isLPEditFeaturesActive;
+            const isEditFeaturesActive = LiveDevelopment.isProUser;
 
             // If user tries to set edit mode but edit features are not active, default to highlight
             let effectiveMode = newMode;