From 9662b5e28437d454e2dbd08e241201329b131a87 Mon Sep 17 00:00:00 2001 From: abose Date: Sat, 10 Jan 2026 18:43:22 +0530 Subject: [PATCH 1/3] chore: update newly added features doc --- .../en/Newly_added_features.md | 41 ++++++++++++++++++- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/src/assets/default-project/en/Newly_added_features.md b/src/assets/default-project/en/Newly_added_features.md index ab16132a3f..ee1b864409 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) + +

All New Tab Bar

+ +`Added in 2025` + +The tab bar now works together with the Working Set, giving you the best of both worlds for organizing open files. +Switch files faster and keep large projects under control. +![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 From c3b6c8d14ebac882c38fedca0cb13cc64e623fa8 Mon Sep 17 00:00:00 2001 From: abose Date: Sat, 10 Jan 2026 19:05:35 +0530 Subject: [PATCH 2/3] chore: update newly added features doc --- src/assets/default-project/en/Newly_added_features.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/assets/default-project/en/Newly_added_features.md b/src/assets/default-project/en/Newly_added_features.md index ee1b864409..6c29bb7427 100644 --- a/src/assets/default-project/en/Newly_added_features.md +++ b/src/assets/default-project/en/Newly_added_features.md @@ -18,12 +18,12 @@ make changes faster without breaking your flow. - Included with Phoenix Pro. ![Image](https://docs-images.phcode.dev/in-app/pro-layoutRulers.png) -

All New Tab Bar

+

Tab Bar

`Added in 2025` -The tab bar now works together with the Working Set, giving you the best of both worlds for organizing open files. -Switch files faster and keep large projects under control. +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

From 21c949faee9ae2c3411d5d94812a0bd7d2124f14 Mon Sep 17 00:00:00 2001 From: abose Date: Sat, 10 Jan 2026 19:30:45 +0530 Subject: [PATCH 3/3] chore: redictable switch between preview and edit mode with play button --- .../Phoenix-live-preview/main.js | 27 +++++-------------- 1 file changed, 6 insertions(+), 21 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js index 65b95842b3..f5a4066dc8 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"); } }