feat: remove live preview editor preview sync setting

devvaannsh · abose · commit 4f913e128818 · 2026-04-16T13:41:39.000Z
diff --git a/src/LiveDevelopment/LivePreviewConstants.js b/src/LiveDevelopment/LivePreviewConstants.js
@@ -41,6 +41,4 @@ define(function main(require, exports, module) {
     exports.HIGHLIGHT_CLICK = "click";
 
     exports.PREFERENCE_SHOW_RULER_LINES = "livePreviewShowMeasurements";
-
-    exports.PREFERENCE_LIVE_PREVIEW_SYNC = "livePreviewSyncSourceAndPreview";
 });
diff --git a/src/LiveDevelopment/MultiBrowserImpl/documents/LiveDocument.js b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveDocument.js
@@ -192,8 +192,7 @@ define(function (require, exports, module) {
         if (!this.editor) {
             return;
         }
-        if(!_disableHighlightOnCursor &&
-            PreferencesManager.get(CONSTANTS.PREFERENCE_LIVE_PREVIEW_SYNC) !== false){
+        if(!_disableHighlightOnCursor){
             this.updateHighlight();
         }
     };
diff --git a/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js b/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
@@ -240,9 +240,6 @@ define(function (require, exports, module) {
             // hilights are enabled only in edit and highlight mode
             return;
         }
-        if(PreferencesManager.get(CONSTANTS.PREFERENCE_LIVE_PREVIEW_SYNC) === false){
-            return;
-        }
         const liveDoc = LiveDevMultiBrowser.getCurrentLiveDoc(),
             activeEditor = EditorManager.getActiveEditor(), // this can be an inline editor
             activeFullEditor = EditorManager.getCurrentFullEditor();
diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js
@@ -325,13 +325,6 @@ define(function main(require, exports, module) {
         MultiBrowserLiveDev.updateConfig(config);
     }
 
-    function updateSyncConfig() {
-        const prefValue = PreferencesManager.get(CONSTANTS.PREFERENCE_LIVE_PREVIEW_SYNC);
-        const config = MultiBrowserLiveDev.getConfig();
-        config.syncSourceAndPreview = prefValue !== false;
-        MultiBrowserLiveDev.updateConfig(config);
-    }
-
     EventDispatcher.makeEventDispatcher(exports);
 
     // private api
@@ -355,7 +348,6 @@ define(function main(require, exports, module) {
     exports.setLivePreviewTransportBridge = setLivePreviewTransportBridge;
     exports.updateElementHighlightConfig = updateElementHighlightConfig;
     exports.updateRulerLinesConfig = updateRulerLinesConfig;
-    exports.updateSyncConfig = updateSyncConfig;
     exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds;
     exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;
     exports.hideHighlight = MultiBrowserLiveDev.hideHighlight;
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/LivePreviewSettings.js b/src/extensionsIntegrated/Phoenix-live-preview/LivePreviewSettings.js
@@ -62,8 +62,7 @@ define(function (require, exports, module) {
     const SUPPORTED_FRAMEWORKS = {};
     SUPPORTED_FRAMEWORKS[FRAMEWORK_DOCUSAURUS] = {configFile: "docusaurus.config.js", hotReloadSupported: true};
 
-    const PREFERENCE_LINK_EDITOR_AND_PREVIEW = "livePreviewSyncSourceAndPreview",
-        PREFERENCE_SHOW_LIVE_PREVIEW_PANEL = "livePreviewShowAtStartup",
+    const PREFERENCE_SHOW_LIVE_PREVIEW_PANEL = "livePreviewShowAtStartup",
         PREFERENCE_PROJECT_SERVER_ENABLED = "livePreviewUseDevServer",
         PREFERENCE_PROJECT_SERVER_URL = "livePreviewServerURL",
         PREFERENCE_PROJECT_SERVER_PATH = "livePreviewServerProjectPath",
@@ -123,9 +122,7 @@ define(function (require, exports, module) {
                 {"settings": currentSettings, "Strings": Strings}));
 
             // Select the correct theme.
-            const $linkEditorAndPreviewChk = $template.find("#linkEditorAndPreviewChk"),
-                $linkEditorAndPreviewInfo = $template.find("#linkEditorAndPreviewInfo"),
-                $livePreviewServerURL = $template.find("#livePreviewServerURL"),
+            const $livePreviewServerURL = $template.find("#livePreviewServerURL"),
                 $enableCustomServerChk = $template.find("#enableCustomServerChk"),
                 $showLivePreviewAtStartup = $template.find("#showLivePreviewAtStartupChk"),
                 $serveRoot = $template.find("#serveRoot"),
@@ -136,13 +133,6 @@ define(function (require, exports, module) {
                 $frameworkSelect = $template.find("#frameworkSelect");
 
             // Initialize form values from preferences
-            $linkEditorAndPreviewChk.prop(
-                'checked', PreferencesManager.get(PREFERENCE_LINK_EDITOR_AND_PREVIEW) !== false
-            );
-            $linkEditorAndPreviewInfo.on("click", function(e) {
-                e.preventDefault();
-                Phoenix.app.openURLInDefaultBrowser("https://docs.phcode.dev");
-            });
             $enableCustomServerChk.prop('checked', PreferencesManager.get(PREFERENCE_PROJECT_SERVER_ENABLED));
             $showLivePreviewAtStartup.prop('checked', PreferencesManager.get(PREFERENCE_SHOW_LIVE_PREVIEW_PANEL));
             $hotReloadChk.prop('checked', !!PreferencesManager.get(PREFERENCE_PROJECT_SERVER_HOT_RELOAD_SUPPORTED));
@@ -184,7 +174,6 @@ define(function (require, exports, module) {
             Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "settings", "dialog");
             Dialogs.showModalDialogUsingTemplate($template).done(function (id) {
                 if (id === Dialogs.DIALOG_BTN_OK) {
-                    PreferencesManager.set(PREFERENCE_LINK_EDITOR_AND_PREVIEW, $linkEditorAndPreviewChk.is(":checked"));
                     PreferencesManager.set(PREFERENCE_SHOW_LIVE_PREVIEW_PANEL, $showLivePreviewAtStartup.is(":checked"));
                     _saveProjectPreferences($enableCustomServerChk.is(":checked"), $livePreviewServerURL.val(),
                         $serveRoot.val(), $hotReloadChk.is(":checked"), $frameworkSelect.val());
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/livePreviewSettings.html b/src/extensionsIntegrated/Phoenix-live-preview/livePreviewSettings.html
@@ -8,11 +8,6 @@ <h1 class="dialog-title">{{Strings.LIVE_DEV_SETTINGS_TITLE}}</h1>
                 <input type="checkbox" class="form-check-input" id="showLivePreviewAtStartupChk" style="margin-top: -2px;">
                 <label class="form-check-label" for="showLivePreviewAtStartupChk" style="display: inline">{{Strings.LIVE_DEV_SETTINGS_STARTUP}}</label>
             </div>
-            <div class="form-group form-check" style="margin-top: 9px;">
-                <input type="checkbox" class="form-check-input" id="linkEditorAndPreviewChk" style="margin-top: -2px;">
-                <label class="form-check-label" for="linkEditorAndPreviewChk" style="display: inline">{{Strings.LIVE_PREVIEW_LINK_EDITOR_AND_PREVIEW}}</label>
-                <a href="#" id="linkEditorAndPreviewInfo" title="{{Strings.LIVE_DEV_SETTINGS_LINK_EDITOR_AND_PREVIEW_PREFERENCE}}" style="margin-left: 4px; color: var(--content-color-weaker); text-decoration: none;"><i class="fa-solid fa-info-circle"></i></a>
-            </div>
             <div class="form-group" style="margin-top: 9px;">
                 <input id="enableCustomServerChk" type="checkbox" class="form-check-input" style="margin-top: -1px;">
                 <label id="enableCustomServerLabel" class="form-check-label" for="enableCustomServerChk" style="display: inline">{{Strings.LIVE_DEV_SETTINGS_USE_SERVER}}</label>
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js
@@ -115,12 +115,6 @@ define(function (require, exports, module) {
         description: Strings.LIVE_DEV_SETTINGS_SHOW_RULER_LINES_PREFERENCE
     });
 
-    // live preview link editor and preview preference
-    const PREFERENCE_LIVE_PREVIEW_SYNC = CONSTANTS.PREFERENCE_LIVE_PREVIEW_SYNC;
-    PreferencesManager.definePreference(PREFERENCE_LIVE_PREVIEW_SYNC, "boolean", true, {
-        description: Strings.LIVE_DEV_SETTINGS_LINK_EDITOR_AND_PREVIEW_PREFERENCE
-    });
-
     const LIVE_PREVIEW_PANEL_ID = "live-preview-panel";
     const LIVE_PREVIEW_IFRAME_ID = "panel-live-preview-frame";
     const MDVIEWR_IFRAME_ID = "panel-md-preview-frame";
@@ -1474,14 +1468,9 @@ define(function (require, exports, module) {
         PreferencesManager.on("change", PREFERENCE_SHOW_RULER_LINES, function() {
             LiveDevelopment.updateRulerLinesConfig();
         });
-        PreferencesManager.on("change", PREFERENCE_LIVE_PREVIEW_SYNC, function() {
-            LiveDevelopment.updateSyncConfig();
-        });
-
-        // Initialize element highlight, ruler lines, and sync config on startup
+        // Initialize element highlight and ruler lines config on startup
         LiveDevelopment.updateElementHighlightConfig();
         LiveDevelopment.updateRulerLinesConfig();
-        LiveDevelopment.updateSyncConfig();
 
         LiveDevelopment.openLivePreview();
         LiveDevelopment.on(LiveDevelopment.EVENT_OPEN_PREVIEW_URL, _openLivePreviewURL);
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
@@ -549,8 +549,6 @@ define({
     "LIVE_PREVIEW_MODE_EDIT": "Edit Mode",
     "LIVE_PREVIEW_EDIT_HIGHLIGHT_ON": "Inspect Element on Hover",
     "LIVE_PREVIEW_SHOW_RULER_LINES": "Show Measurements",
-    "LIVE_PREVIEW_LINK_EDITOR_AND_PREVIEW": "Link Editor and Preview",
-    "LIVE_DEV_SETTINGS_LINK_EDITOR_AND_PREVIEW_PREFERENCE": "Link editor cursor with live preview element highlighting. When enabled, moving the cursor in the editor highlights the corresponding element in the live preview, and clicking an element in the live preview jumps the cursor to its source code. Defaults to 'true'",
     "LIVE_PREVIEW_MODE_PREFERENCE": "'{0}' shows only the webpage, '{1}' connects the webpage to your code - click on elements to jump to their code and vice versa, '{2}' provides highlighting along with advanced element manipulation",
     "LIVE_PREVIEW_CONFIGURE_MODES": "Configure Live Preview Modes",
 

Original file line number	Diff line number	Diff line change
`@@ -192,8 +192,7 @@ define(function (require, exports, module) {`
`192`	`192`	`if (!this.editor) {`
`193`	`193`	`return;`
`194`	`194`	`}`
`195`		`- if(!_disableHighlightOnCursor &&`
`196`		`- PreferencesManager.get(CONSTANTS.PREFERENCE_LIVE_PREVIEW_SYNC) !== false){`
	`195`	`+ if(!_disableHighlightOnCursor){`
`197`	`196`	`this.updateHighlight();`
`198`	`197`	`}`
`199`	`198`	`};`