diff --git a/src/assets/default-project/en/Newly_added_features.md b/src/assets/default-project/en/Newly_added_features.md index ab16132a3..6c29bb742 100644 --- a/src/assets/default-project/en/Newly_added_features.md +++ b/src/assets/default-project/en/Newly_added_features.md @@ -7,13 +7,50 @@ We are continuously adding features every week to improve the life of web develo Here's a list of top features recently added to Phoenix: +

Live Preview Edit

+ +`Added in 2025` + +Introducing the all-new Live Preview Edit - powerful, reliable editing directly inside your page preview. + +Edit content on the page, drag and rearrange elements visually, and inspect layouts with rulers. Try new layouts and +make changes faster without breaking your flow. - Included with Phoenix Pro. + +![Image](https://docs-images.phcode.dev/in-app/pro-layoutRulers.png) + +

Tab Bar

+ +`Added in 2025` + +Tabs let you navigate between open files and easily reorder them with drag and drop. + +![Image](https://docs-images.phcode.dev/in-app/tab-bar.png) + +

Emmet

+ +`Added in 2025` + +Phoenix Code now includes built-in Emmet support for HTML and CSS workflows. Expand abbreviations instantly from code +hints. + +![Image](https://docs-images.phcode.dev/in-app/emmet.jpg) + +

Custom Snippets Panel

+ +`Added in 2025` + +Create, edit, search, and manage your own snippets using the Snippets panel. Snippets help you insert frequently +used code fragments directly from code hints in the editor. + +![Image](https://docs-images.phcode.dev/in-app/snippets.png) +

Git for Desktop

`Added on January, 2025` Git is finally here. Integrated Git source control with a clean, intuitive interface. Stage changes, commit, and sync with a single click while keeping your focus on the code. -Now available in the Windows, Mac and Linux desktop apps of Phoenix code. +Now available in the Windows, Mac, and Linux desktop apps of Phoenix code. ![Image](https://github.com/user-attachments/assets/aeacc7c0-3ee3-4a80-9b05-f2b48140bcdd) @@ -241,7 +278,7 @@ Creating extensions and themes is now easier than ever with a single click in Gi ## Beautify code `Added on August,2022` -Beautify HTML, CSS, JS, Json, Markdown, Typescript and other language code with `Ctrl-B` (`Cmd-B` in mac.). +Beautify HTML, CSS, JS, Json, Markdown, Typescript, and other language code with `Ctrl-B` (`Cmd-B` in mac.). #### Watch the video on YouTube diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js index 65b95842b..f5a4066dc 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/main.js +++ b/src/extensionsIntegrated/Phoenix-live-preview/main.js @@ -150,11 +150,6 @@ define(function (require, exports, module) { let customLivePreviewBannerShown = false; - // so this variable stores the mode that was previously selected - // this is needed when the preview mode (play button icon) is clicked, we store the current mode - // so that when user unclicks the button we can revert back to the mode that was originally selected - let modeThatWasSelected = null; - // live Preview overlay variables (overlays are shown when live preview is connecting or there's a syntax error) let $statusOverlay = null; // reference to the static overlay element let $statusOverlayMessage = null; // reference to the message span @@ -667,28 +662,18 @@ define(function (require, exports, module) { } /** - * This function is called when user clicks the preview mode button (play button icon) - * when this button is clicked we switch the mode button dropdown to preview mode + * Handle preview button click - toggles between preview mode and the user's default mode. + * PRO users toggle between preview and edit mode. + * community users toggle between preview and highlight mode. */ function _handlePreviewBtnClick() { if($previewBtn.hasClass('selected')) { $previewBtn.removeClass('selected'); - const isEditFeaturesActive = isProEditUser; - if(modeThatWasSelected) { - // If the last selected mode was preview itself, default to the best mode for user's entitlement - if(modeThatWasSelected === 'preview') { - const defaultMode = isEditFeaturesActive ? 'edit' : 'highlight'; - PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, defaultMode); - } else if(modeThatWasSelected === 'edit' && !isEditFeaturesActive) { - // Non-pro users can't be in edit mode - switch to highlight - PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "highlight"); - } else { - PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, modeThatWasSelected); - } - } + const defaultMode = isProEditUser ? 'edit' : 'highlight'; + PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, defaultMode); } else { + // Currently NOT in preview mode - switch to preview $previewBtn.addClass('selected'); - modeThatWasSelected = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE); PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "preview"); } }