From 55d244b93a0fde2bd5a02d9f8f9c6a3ab3865888 Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 30 Apr 2026 08:23:24 +0530 Subject: [PATCH 1/4] feat(mdviewer): blockquote toggle and nest/unnest with Tab MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Quote toolbar button now lifts only the cursor's paragraph out of a blockquote (splitting it so neighboring quoted lines stay quoted), instead of unwrapping the whole blockquote. Tab/Shift+Tab inside a blockquote nest deeper / lift one level. Lists and tables are checked first so their existing Tab behavior is unchanged. Normalize blockquotes that contain loose text (no block wrapper) by wrapping their contents in

before manipulation, and handle the case where the cursor's anchorNode is the blockquote element itself (which happens right after execCommand wraps a paragraph) by resolving to the correct child via anchorOffset. Without this, the toggle stops working after an unquote → re-quote sequence. --- src-mdviewer/src/components/editor.js | 131 ++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) diff --git a/src-mdviewer/src/components/editor.js b/src-mdviewer/src/components/editor.js index 5492bd5ae4..19009c7230 100644 --- a/src-mdviewer/src/components/editor.js +++ b/src-mdviewer/src/components/editor.js @@ -403,6 +403,69 @@ export function executeFormat(contentEl, command, value) { document.execCommand(command, false, null); break; case "formatBlock": { + // Toggle blockquote: if cursor is inside a blockquote and user + // clicks the blockquote button, lift only the cursor's block out + // (splitting the blockquote so other lines stay quoted). + if (value === "

") { + const sel0 = window.getSelection(); + let n0 = sel0?.anchorNode; + if (n0?.nodeType === Node.TEXT_NODE) n0 = n0.parentElement; + const innerBq = n0?.closest("blockquote"); + if (innerBq && contentEl.contains(innerBq)) { + // Normalize: if blockquote has loose text/inline children + // (no block element wrapper), wrap them in a

so we have + // a stable cursorBlock to lift out. + if (!innerBq.querySelector("p, h1, h2, h3, h4, h5, h6, ul, ol, pre, blockquote, table, hr, div")) { + const wrap = document.createElement("p"); + while (innerBq.firstChild) wrap.appendChild(innerBq.firstChild); + innerBq.appendChild(wrap); + } + let cursorBlock = n0; + // If anchor is the blockquote itself (e.g. right after + // execCommand wraps), pick the child at anchor offset. + if (cursorBlock === innerBq) { + const offset = sel0.anchorOffset || 0; + cursorBlock = innerBq.childNodes[offset] + || innerBq.firstElementChild; + if (cursorBlock && cursorBlock.nodeType !== Node.ELEMENT_NODE) { + cursorBlock = innerBq.firstElementChild; + } + } else { + while (cursorBlock && cursorBlock.parentNode !== innerBq) { + cursorBlock = cursorBlock.parentNode; + } + } + if (cursorBlock) { + const parent = innerBq.parentNode; + const afterNodes = []; + let nx = cursorBlock.nextSibling; + while (nx) { + const next = nx.nextSibling; + afterNodes.push(nx); + nx = next; + } + parent.insertBefore(cursorBlock, innerBq.nextSibling); + if (afterNodes.length > 0) { + const newBq = document.createElement("blockquote"); + for (const an of afterNodes) newBq.appendChild(an); + parent.insertBefore(newBq, cursorBlock.nextSibling); + } + if (!innerBq.querySelector("*") && !innerBq.textContent.trim()) { + innerBq.remove(); + } + const sel1 = window.getSelection(); + if (sel1 && contentEl.contains(cursorBlock)) { + const r = document.createRange(); + r.selectNodeContents(cursorBlock); + r.collapse(false); + sel1.removeAllRanges(); + sel1.addRange(r); + } + contentEl.dispatchEvent(new Event("input", { bubbles: true })); + break; + } + } + } document.execCommand("formatBlock", false, value); // After formatBlock on an empty element, the browser may lose // cursor position. Find the new block and place cursor inside it. @@ -2071,6 +2134,74 @@ function enterEditMode(content) { return; } + // Blockquote nesting: Tab nests deeper, Shift+Tab lifts one level. + // Only triggers when cursor is in a blockquote AND not in a list/table + // (those were handled above and returned early). + { + const sel4 = window.getSelection(); + let cursorNode = sel4?.anchorNode; + if (cursorNode?.nodeType === Node.TEXT_NODE) cursorNode = cursorNode.parentElement; + const innerBq = cursorNode?.closest("blockquote"); + if (innerBq && content.contains(innerBq)) { + // Normalize: if blockquote has loose text children only, + // wrap them in a

so we have a stable block to nest. + if (!innerBq.querySelector("p, h1, h2, h3, h4, h5, h6, ul, ol, pre, blockquote, table, hr, div")) { + const wrap = document.createElement("p"); + while (innerBq.firstChild) wrap.appendChild(innerBq.firstChild); + innerBq.appendChild(wrap); + } + // Find the direct child of innerBq that contains the cursor + let cursorBlock = cursorNode; + if (cursorBlock === innerBq) { + const offset = sel4.anchorOffset || 0; + cursorBlock = innerBq.childNodes[offset] + || innerBq.firstElementChild; + if (cursorBlock && cursorBlock.nodeType !== Node.ELEMENT_NODE) { + cursorBlock = innerBq.firstElementChild; + } + } else { + while (cursorBlock && cursorBlock.parentNode !== innerBq) { + cursorBlock = cursorBlock.parentNode; + } + } + if (cursorBlock) { + e.preventDefault(); + flushSnapshot(content); + const savedOffset = getCursorOffset(cursorBlock); + if (e.shiftKey) { + // Lift: split innerBq around cursorBlock and move it out + const parent = innerBq.parentNode; + const afterNodes = []; + let n = cursorBlock.nextSibling; + while (n) { + const next = n.nextSibling; + afterNodes.push(n); + n = next; + } + parent.insertBefore(cursorBlock, innerBq.nextSibling); + if (afterNodes.length > 0) { + const newBq = document.createElement("blockquote"); + for (const an of afterNodes) newBq.appendChild(an); + parent.insertBefore(newBq, cursorBlock.nextSibling); + } + // Remove innerBq if it has no element children left + // (only stray whitespace text nodes from formatting). + if (!innerBq.querySelector("*") && !innerBq.textContent.trim()) { + innerBq.remove(); + } + } else { + // Nest deeper: wrap cursorBlock in a new blockquote + const newBq = document.createElement("blockquote"); + innerBq.insertBefore(newBq, cursorBlock); + newBq.appendChild(cursorBlock); + } + restoreCursor(cursorBlock, savedOffset); + content.dispatchEvent(new Event("input", { bubbles: true })); + return; + } + } + } + // Regular text: insert 4 spaces e.preventDefault(); if (!e.shiftKey) { From 48a2c4b615d423978891be18c7a7568c1f50aa1a Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 30 Apr 2026 09:24:39 +0530 Subject: [PATCH 2/4] chore: update strings --- src/nls/root/strings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 86ae96e612..976233db11 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -2166,7 +2166,7 @@ define({ "AI_CHAT_CLI_INSTALLING_MSG": "Installing Claude Code, please wait. This may take a while...", "AI_CHAT_CLI_RESTART_NOTE": "Restart {APP_NAME} after installation completes.", "AI_CHAT_CLAUDE_LOGIN_TITLE": "Setup Claude Code", - "AI_CHAT_CLAUDE_LOGIN_MSG": "Claude Code is installed but it needs configuration.", + "AI_CHAT_CLAUDE_LOGIN_MSG": "Claude Code is installed but needs to be configured.", "AI_CHAT_CLAUDE_LOGIN_BTN": "Setup Claude Code", "AI_CHAT_ADD_PROVIDER_BTN": "Add Custom Provider", "AI_CHAT_SETUP_NEED_HELP": "Need Help?", From dccc0493fe32c8b7db4b483606b05f272fa7aff8 Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 30 Apr 2026 11:58:35 +0530 Subject: [PATCH 3/4] =?UTF-8?q?fix(live-preview):=20suppress=20md=20viewer?= =?UTF-8?q?=20=E2=86=94=20CM=20scroll=20feedback=20loops?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Selecting/clicking/editing in the md viewer caused the iframe to scroll itself to a stale line, and undo/redo plus backspace caused visible scroll jumps. Root cause was missing suppression on both sides of the sync bridge: - The iframe side: viewer-initiated events that can cause CM to scroll (selection sync, cursor-line sync, click-to-focus) didn't mark the iframe as the scroll origin, so CM's resulting scroll-handler echo came back through MDVIEWR_SCROLL_TO_LINE and re-scrolled the iframe. Centralize the flag in sendToParent for all such events, and drop the editMode-only requirement from the guard so design mode is covered too. - The CM side: cm.replaceRange (in _applyDiffToEditor), cm.scrollTo (in _scrollCMToLine), and cm.undo()/cm.redo() can each trigger an async CM scroll that echoes back to the iframe. Wrap each in _scrollSyncFromIframe = true with a 200ms clear so CM's scroll handler ignores them. --- src-mdviewer/src/bridge.js | 27 ++++++++++++++++--- .../Phoenix-live-preview/MarkdownSync.js | 17 ++++++++++++ 2 files changed, 41 insertions(+), 3 deletions(-) diff --git a/src-mdviewer/src/bridge.js b/src-mdviewer/src/bridge.js index f1c80d56ee..3f87a0581f 100644 --- a/src-mdviewer/src/bridge.js +++ b/src-mdviewer/src/bridge.js @@ -15,6 +15,7 @@ let _lastReceivedSyncId = -1; let _suppressContentChange = false; let _scrollFromCM = false; let _scrollFromViewer = false; +let _scrollFromViewerTimer = null; let _suppressScrollToLine = false; let _baseURL = ""; let _cursorPosBeforeEdit = null; // cursor position before current edit batch @@ -513,6 +514,11 @@ export function initBridge() { } if (bestEl) { const sourceLine = parseInt(bestEl.getAttribute("data-source-line"), 10); + // Mark the viewer as the scroll origin so CM's echo back + // through handleScrollToLine is suppressed. + _scrollFromViewer = true; + if (_scrollFromViewerTimer) clearTimeout(_scrollFromViewerTimer); + _scrollFromViewerTimer = setTimeout(() => { _scrollFromViewer = false; }, 400); sendToParent("mdviewrScrollSync", { sourceLine, fromScroll: true }); } }); @@ -1057,9 +1063,9 @@ function handleScrollToLine(data) { // Suppress during file switch — doc cache restores the correct scroll if (_suppressScrollToLine) return; - // In edit mode, ignore scroll-based sync that originated from the viewer - // itself (feedback loop: viewer click → CM scroll → scroll sync back). - if (fromScroll && getState().editMode && _scrollFromViewer) return; + // Ignore scroll-based sync that originated from the viewer itself + // (feedback loop: viewer scroll/click → CM scroll → scroll sync back). + if (fromScroll && _scrollFromViewer) return; const viewer = document.getElementById("viewer-content"); if (!viewer) return; @@ -1401,8 +1407,23 @@ function _sendSelectionToParent() { }, 200); } +// Events the iframe initiates that can cause CM to scroll. We mark the iframe +// as the scroll origin so CM's resulting scroll-handler echo (forwarded back as +// MDVIEWR_SCROLL_TO_LINE) gets suppressed by the guard in handleScrollToLine. +const _viewerInitiatedScrollEvents = new Set([ + "mdviewrScrollSync", + "mdviewrCursorLine", + "mdviewrSelectionSync", + "embeddedIframeFocusEditor" +]); + function sendToParent(eventName, payload) { if (!window.parent || window.parent === window) return; + if (_viewerInitiatedScrollEvents.has(eventName)) { + _scrollFromViewer = true; + if (_scrollFromViewerTimer) clearTimeout(_scrollFromViewerTimer); + _scrollFromViewerTimer = setTimeout(() => { _scrollFromViewer = false; }, 400); + } window.parent.postMessage({ type: "MDVIEWR_EVENT", eventName, diff --git a/src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js b/src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js index e899bc281d..34c930b5f2 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js +++ b/src/extensionsIntegrated/Phoenix-live-preview/MarkdownSync.js @@ -578,8 +578,14 @@ define(function (require, exports, module) { const replacement = newText.substring(prefixLen, newSuffix); _syncingFromIframe = true; + // Suppress CM's scroll-handler echo for a brief window: replaceRange + // can trigger an asynchronous CM scroll (e.g. when content shrinks or + // cursor is auto-scrolled into view) which would otherwise feed back to + // the iframe and snap it to a stale "first visible line". + _scrollSyncFromIframe = true; cm.replaceRange(replacement, fromPos, toPos, "+mdviewr"); _syncingFromIframe = false; + setTimeout(function () { _scrollSyncFromIframe = false; }, 200); } function _onIframeContentChanged(data) { @@ -648,7 +654,12 @@ define(function (require, exports, module) { _cursorRedoStack.push(pos); _pendingCursorPos = pos; } + // cm.undo() can move the cursor and scroll it into view, which + // triggers CM's scroll handler and echoes back to the iframe as + // a fromScroll sync — causing visible scroll jumps. Suppress. + _scrollSyncFromIframe = true; cm.undo(); + setTimeout(function () { _scrollSyncFromIframe = false; }, 200); } } @@ -663,7 +674,9 @@ define(function (require, exports, module) { _cursorUndoStack.push(pos); _pendingCursorPos = pos; } + _scrollSyncFromIframe = true; cm.redo(); + setTimeout(function () { _scrollSyncFromIframe = false; }, 200); } } @@ -862,7 +875,11 @@ define(function (require, exports, module) { if (lineTop < viewTop || lineBottom > viewBottom) { const targetScrollTop = lineTop - (scrollInfo.clientHeight / 2); + // Suppress CM's scroll-handler echo while we scroll programmatically + // — otherwise the echo loops back to the iframe and re-scrolls it. + _scrollSyncFromIframe = true; cm.scrollTo(null, targetScrollTop); + setTimeout(function () { _scrollSyncFromIframe = false; }, 200); } // Brief flash on the CM line to show cursor sync feedback From 0ea434e96f48013e009f2a7f2e12e76419eb224f Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 30 Apr 2026 14:43:45 +0530 Subject: [PATCH 4/4] chore: update newly added features doc --- .../en/Newly_added_features.md | 258 +++++++----------- src/nls/root/strings.js | 6 +- 2 files changed, 109 insertions(+), 155 deletions(-) diff --git a/src/assets/default-project/en/Newly_added_features.md b/src/assets/default-project/en/Newly_added_features.md index 028b15228a..1f13413916 100644 --- a/src/assets/default-project/en/Newly_added_features.md +++ b/src/assets/default-project/en/Newly_added_features.md @@ -1,63 +1,61 @@ -[comment]: <> (DO NOT EDIT THIS FILE! This is a Phoenix system generated file and will be modified by Phoenix as new updates come in.) - # Newly Added Features -We are continuously adding features every week to improve the life of web developers. -Check out our release page to see the full list of changes! +We are continuously adding features every week. [Check out our release page to see the full list of changes!](https://github.com/phcode-dev/phoenix/releases) + +Here's a list of top features recently added to Phoenix Code: -Here's a list of top features recently added to Phoenix: +## [Try ideas, build pages, and fix issues with AI](https://docs.phcode.dev/app-links/ai-chat) -## [AI Chat — Built-in Coding Assistant](https://docs.phcode.dev/app-links/ai-chat) +`Added in April 2026` -`Added in 2026` +Phoenix Code now includes an AI assistant powered by Claude Code - one that sees what you see, not just your code. Try ideas, make changes, and refine your work just by chatting. -Phoenix Code now ships with a built-in AI assistant powered by Claude Code. Chat about your code, edit files, run terminal commands, and restore to any point with a single click. -You can also attach files or take a screenshot to show the AI exactly what you mean. +Attach files or capture a screenshot to show the AI exactly what you mean. It stays out of your way until you need it, so you can stay focused on the creative work. > This feature is available only in desktop apps. -![Image](https://docs-images.phcode.dev/in-app/pro-aiChat.png) +![](https://docs-images.phcode.dev/in-app/pro-aiChat.png) -

Live Preview Edit Mode 2.0

+## [Design Mode](https://docs.phcode.dev/app-links/design-mode) -`Added in 2026` +`Added in April 2026` -The Live Preview Edit experience just got a massive upgrade. -Now, along with editing text content, you can also apply different formats like Bold, Italic, Underline, and many more. -You can also insert new elements right in the Live Preview and change an existing element's tag name, class, ID, and attributes! +Focus fully on your content while your code stays out of the way. Work side by side with AI and Live Preview. Edit content visually - whether you’re building web pages or Markdown documents. + +![Image](https://docs-images.phcode.dev/in-app/pro-designMode.png) -![Image](https://docs-images.phcode.dev/in-app/pro-controlBox.png) -

Rich Markdown Editor

-`Added in 2026` +## [Rich Markdown Editor](https://docs.phcode.dev/app-links/markdown-editor) -Edit Markdown files visually right inside the Live Preview. -Format with toolbar buttons, build tables, drop in images from your device, and add Mermaid diagrams. Every change syncs to your source in real time. +`Added in April 2026` + +Edit Markdown like a document in Live Preview. Now it’s easy to add images - just paste or pick one from your device, like in Google Docs or Word. + +Format text, edit tables, and add diagrams with real-time sync between code and live preview. An easier way to create Markdown files that you can share anywhere. ![Image](https://docs-images.phcode.dev/in-app/pro-markdownEditor.png) -

Design Mode

+## [Live Preview Edit Upgrades](https://docs.phcode.dev/app-links/live-preview-edit) -`Added in 2026` +`Added in April 2026` -Design Mode hides the code editor so the AI chat and Live Preview can sit side by side, taking over the whole window. -Prompt the AI on one side, watch your page change on the other, and tweak anything visually with the Edit Mode tools. +Format text with bold, italic, and more. Add elements and update tags, classes, and attributes - all directly in Live Preview. -![Image](https://docs-images.phcode.dev/in-app/pro-designMode.png) +![Image](https://docs-images.phcode.dev/in-app/pro-controlBox.png) -

Resize Ruler

+## [View your page at any device size](https://docs.phcode.dev/app-links/resize-ruler) -`Added in 2026` +`Added in April 2026` Switch between popular phones, tablets, and desktops with a single click to see how your page looks at that size. Phoenix Code also picks up your CSS `@media` breakpoints so you can jump straight to where your layout switches. ![Image](https://docs-images.phcode.dev/in-app/pro-resizeRuler.png) -

Built-in Terminal

+## [Built-in Terminal](https://docs.phcode.dev/app-links/terminal) -`Added in 2026` +`Added in April 2026` Run commands right next to your code in the new built-in terminal. Phoenix Code allows you to open multiple terminal tabs with your preferred shell. @@ -66,25 +64,17 @@ Phoenix Code allows you to open multiple terminal tabs with your preferred shell ![Image](https://docs-images.phcode.dev/in-app/terminal.png) -## Polish & Layout - -`Added in 2026` - -You'll notice small refinements everywhere: better colors, cleaner buttons, smoother styling, and an overall more polished feel. -The bottom panel has also been rebuilt with a new tabbed architecture, so you can keep Problems, Search, Git, Terminal, and more open at the same time. - -

Live Preview Edit

+## [Live Preview Edit](https://docs.phcode.dev/app-links/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. +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

+## [Tab Bar](https://docs.phcode.dev/app-links/tab-bar) `Added in 2025` @@ -92,44 +82,37 @@ Tabs let you navigate between open files and easily reorder them with drag and d ![Image](https://docs-images.phcode.dev/in-app/tab-bar.png) -

Emmet

+## [Emmet](https://docs.phcode.dev/app-links/emmet) `Added in 2025` -Phoenix Code now includes built-in Emmet support for HTML and CSS workflows. Expand abbreviations instantly from code -hints. +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

+## [Custom Snippets Panel](https://docs.phcode.dev/app-links/custom-snippets) `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. +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

+## [Git for Desktop](https://docs.phcode.dev/app-links/git) `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. - +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. ![Image](https://github.com/user-attachments/assets/aeacc7c0-3ee3-4a80-9b05-f2b48140bcdd) ![Image](https://github.com/user-attachments/assets/6e7b9faf-d57b-448b-a5bb-a111c67489b5) - -

Color Previews

+## [Color Previews](https://docs.phcode.dev/app-links/color-preview) `Added on December, 2024` -Preview the color(s) used in the file in the gutter area. Hovering over a color box highlights the corresponding color -text in the editor to quickly jump to editing that color. +Preview the color(s) used in the file in the gutter area. Hovering over a color box highlights the corresponding color text in the editor to quickly jump to editing that color. ![image](https://github.com/user-attachments/assets/bedecc32-761b-448e-aced-61828ad3fec6) @@ -137,32 +120,29 @@ text in the editor to quickly jump to editing that color. `Added on December, 2024` -New "Open In" feature lets you instantly open directories and files in the system Terminal or File Explorer across -Windows, macOS, and Linux desktop apps! +New "Open In" feature lets you instantly open directories and files in the system Terminal or File Explorer across Windows, macOS, and Linux desktop apps! ![Image](https://github.com/user-attachments/assets/710330ae-8b34-4a51-a1f9-4c02736ed9bd) -

Customizable Editor Line Height

+## [Customizable Editor Line Height](https://docs.phcode.dev/app-links/extn-line-height) `Added on November, 2024` -Theme Settings (`View > Themes...`) now has a new `Line Height` slider. Adjust the editor line height between 1x and 3x to find your -perfect balance of readability and screen real estate. +Theme Settings (`View > Themes...`) now has a new `Line Height` slider. Adjust the editor line height between 1x and 3x to find your perfect balance of readability and screen real estate. Also added a `Get More...` button to the Themes dialog, linking directly to the themes section in Extension Manager. ![image](https://github.com/user-attachments/assets/97a46d9a-e971-401d-8a77-015afa6d5972) -

Indent Guide Lines

+## [Indent Guide Lines](https://docs.phcode.dev/app-links/indent-guide-lines) `Added on October, 2024` -Phoenix Code now supports indent guidelines to help you better visualize code structure. This feature can -be toggled via `View > Indent Guide Lines`. +Phoenix Code now supports indent guidelines to help you better visualize code structure. This feature can be toggled via `View > Indent Guide Lines`. ![image](https://github.com/user-attachments/assets/3d9d0c55-3c9e-4ab3-bbc0-53b563d19e39) -

Auto Tab and Spacing Detection

+## [Auto Tab and Spacing Detection](https://docs.phcode.dev/app-links/auto-space-detection) `Added on August, 2024` @@ -170,7 +150,7 @@ Phoenix Code can now automatically detect and apply the indentation style (tabs ![image](https://github.com/user-attachments/assets/0adc47c5-a561-4002-bffb-d7bcde999b9d) -

Auto rename start and end of HTML/XML/SVG tags

+## [Auto rename start and end of HTML/XML/SVG tags](https://docs.phcode.dev/app-links/auto-rename-tag) `Added on July, 2024` @@ -178,71 +158,58 @@ Automatically rename paired HTML/XML/SVG tags as you type at the start or end of ![tag sync](https://github.com/user-attachments/assets/ad82db8c-df1c-4c83-a5db-145caab539ec) -

Now Available on ChromeOS

+## [Now Available on ChromeOS](https://play.google.com/store/apps/details?id=prod.phcode.twa) `Added on July, 2024` -All new native ChromeOS app is now available on the Google Play Store. -The ChromeOS app is a highly requested feature and is specially made for education and student use. +All new native ChromeOS app is now available on the Google Play Store. The ChromeOS app is a highly requested feature and is specially made for education and student use. - -Get phcode.io on google play - +[![Get phcode.io on google play](https://github.com/user-attachments/assets/0a7f20ce-653c-43a8-ac3e-3875ea74df5b)](https://play.google.com/store/apps/details?id=prod.phcode.twa) ## Drag and Drop Files and Folders in Desktop Apps - Experimental `Added on June, 2024` -Drag files from Explorer (Windows) or Finder (Mac) and drop them into Phoenix -Code to open individual files. Drop a folder to open it as a project. +Drag files from Explorer (Windows) or Finder (Mac) and drop them into Phoenix Code to open individual files. Drop a folder to open it as a project. -> Note: This feature is currently disabled on Linux due to UI issues in some -> Linux distributions. To enable it, select menu -> `Debug -> Experimental Features -> Drag And Drop Files.` +> Note: This feature is currently disabled on Linux due to UI issues in some Linux distributions. To enable it, select menu `Debug -> Experimental Features -> Drag And Drop Files.` -> This feature is not available in the browser version @ phcode.dev +> This feature is not available in the browser version @ phcode.dev ![drag and drop](https://github.com/phcode-dev/phoenix/assets/5336369/ddd96ff7-bc99-46a6-a62d-6f6f5b78438b) -

HTML Validation

+## [HTML Validation](https://docs.phcode.dev/app-links/html-lint) `Added on June, 2024` -We have added HTML Validator to help you find errors like duplicate IDs, -unrecognized tags, and more. +We have added HTML Validator to help you find errors like duplicate IDs, unrecognized tags, and more. ![HTML validate](https://github.com/phcode-dev/phoenix/assets/5336369/5bc4a1cc-2429-477c-83ca-91f19dcc0b0f) -

ESLint Support

+## [ESLint Support](https://docs.phcode.dev/app-links/ESLint) `Added on June, 2024` -All new and simplified ESLint experience that displays all ESLint errors in a -file. Fix one or all errors with a single click. To enable, open a project that -uses ESLint in Phoenix Code. +All new and simplified ESLint experience that displays all ESLint errors in a file. Fix one or all errors with a single click. To enable, open a project that uses ESLint in Phoenix Code. ![image](https://github.com/phcode-dev/phoenix/assets/5336369/eb00691a-a0b4-4c1a-9209-d78fc7db764d) - ## Live CSS class and Style Code Hints `Added on May, 2024` -Interactively edit CSS styles and classes using the up/down arrow keys in code hints. This is available in -CSS files and inline CSS styles/class names in HTML files. This provides an instant boost to your HTML and CSS workflows. +Interactively edit CSS styles and classes using the up/down arrow keys in code hints. This is available in CSS files and inline CSS styles/class names in HTML files. This provides an instant boost to your HTML and CSS workflows. ![classLiveHints](https://github.com/phcode-dev/phoenix/assets/5336369/502c8751-5269-4c34-9178-5ad08f8ad837) -

Custom Live Preview Servers

+## [Custom Live Preview Servers](https://docs.phcode.dev/app-links/live-preview-settings) `Added on April, 2024` -Preview PHP, React, and other dynamically rendered files with the -new server settings dialog. +Preview PHP, React, and other dynamically rendered files with the new server settings dialog. ![Screenshot from 2024-04-12 13-08-34](https://github.com/phcode-dev/phoenix/assets/5336369/69fa0ee4-7262-42af-97d2-26154ec4a3b9) - ## Advanced HTML/CSS/LESS/SCSS Code Intelligence `Added on April, 2024` @@ -251,107 +218,96 @@ CSS class hints are now shown within the HTML file's class attribute. ![image](https://github.com/phcode-dev/phoenix/assets/5336369/112ad909-8fd0-4fc4-8042-041ecade9481) -Support for the latest CSS/LESS/SCSS syntax. Code intelligence and error -detection for CSS, SCSS, and LESS files. +Support for the latest CSS/LESS/SCSS syntax. Code intelligence and error detection for CSS, SCSS, and LESS files. ![image](https://github.com/phcode-dev/phoenix/assets/5336369/9c083bd3-9e34-418d-a1c8-c152393c37b2) - -

Editor Rulers

+## [Editor Rulers](https://docs.phcode.dev/app-links/editor-rulers) `Added on April, 2024` -Add multiple, color-customizable rulers in the editor to better visualize line -lengths. +Add multiple, color-customizable rulers in the editor to better visualize line lengths. ![image](https://github.com/phcode-dev/phoenix/assets/5336369/71b8b04c-d2ca-47b8-84bb-53cd0fb4593c) -

Search Filters - Advanced find in files

+## [Search Filters - Advanced find in files](https://docs.phcode.dev/app-links/find-in-files) `Added on March, 2024` -All new search filters to find exactly what you want. -`Search in files` or `Exclude files` matching the given pattern instantly. +All new search filters to find exactly what you want. `Search in files` or `Exclude files` matching the given pattern instantly. ![new find in files](https://github.com/phcode-dev/phoenix/assets/5336369/9a46a6a8-01a2-45db-aebc-9b280977bdc1) ## Native Desktop Apps - Windows, Linux, and Mac (Intel/M1) + `Added on Feb,2024` -Brand new Native Desktop Apps for Mac (M1 and Intel), Linux, and -Windows, a milestone release that addresses one of our most requested features. -Built from the ground up with the latest Tauri/Rust technology, this update -modernizes the core platform with enhanced performance, security, and a -seamless cross-platform experience. +Brand new Native Desktop Apps for Mac (M1 and Intel), Linux, and Windows, a milestone release that addresses one of our most requested features. Built from the ground up with the latest Tauri/Rust technology, this update modernizes the core platform with enhanced performance, security, and a seamless cross-platform experience. -Download your copy from phcode.io +Download your copy from [phcode.io](https://phcode.io) ![Desktop apps](https://github.com/phcode-dev/phoenix/assets/5336369/9ea4f9cc-5ebd-4d67-bf36-0a6ae7611767) ## Make It Yours: Custom Keyboard Shortcuts + `Added on Feb,2024` -Now you can make your own shortcuts for any menu, so you don't have to memorize a bunch of -different ones for every app. Simply hover over a menu item and click the keyboard icon to -set your preferred shortcuts. +Now you can make your own shortcuts for any menu, so you don't have to memorize a bunch of different ones for every app. Simply hover over a menu item and click the keyboard icon to set your preferred shortcuts. It's like customizing your game controls to play your way! - -![Screenshot from 2024-02-08 11-04-46](https://github.com/phcode-dev/phoenix/assets/5336369/2562d248-2fd5-4a92-97a8-cdd708c78c7f) -![image](https://github.com/phcode-dev/phoenix/assets/5336369/2028e67f-bdc9-41f2-877c-bef08f8e7743) +![Screenshot from 2024-02-08 11-04-46](https://github.com/phcode-dev/phoenix/assets/5336369/2562d248-2fd5-4a92-97a8-cdd708c78c7f) ![image](https://github.com/phcode-dev/phoenix/assets/5336369/2028e67f-bdc9-41f2-877c-bef08f8e7743) ## Zoom in and out + `Added on Nov,2023` -Adjust the UI and font size to your liking with UI and font zoom controls. -![image](https://github.com/phcode-dev/phoenix/assets/5336369/b920e4ce-fc7e-4812-a99b-69b33625560c) +Adjust the UI and font size to your liking with UI and font zoom controls. ![image](https://github.com/phcode-dev/phoenix/assets/5336369/b920e4ce-fc7e-4812-a99b-69b33625560c) ## Restore Unsaved Files and Crash Recovery + `Added on May,2023` -We're added enhanced auto-recovery features in phcode. -This functionality ensures your work is safe even in the event of a crash or if the application is -closed without saving edited files. +We're added enhanced auto-recovery features in phcode. This functionality ensures your work is safe even in the event of a crash or if the application is closed without saving edited files. ![image](https://github.com/phcode-dev/phoenix/assets/5336369/9cfd5720-947b-4f88-8dfa-cda940d912c6) ## Create and Publish Extensions + `Added on March,2023` Creating extensions and themes is now easier than ever with a single click in GitHub. We have added workflows to: -* Create a Theme or Extension with a single click. -* Load/unload development extensions with new `Debug> Reload With Extensions` menu. ![image](https://user-images.githubusercontent.com/5336369/224746152-0416a862-891a-4fe1-b9dd-09add25a6cc0.png) -* [Publish an extension](https://github.com/phcode-dev/phoenix/wiki/How-To-Write-Extensions-And-Themes#publishing-to-the-extensiontheme-store) - directly from your GitHub repo by creating a GitHub release! -## Extensions and Themes Store -`Added on January,2023` +- Create a [Theme](https://github.com/phcode-dev/theme-template) or [Extension](https://github.com/phcode-dev/extension-template) with a single click. +- Load/unload development extensions with new `Debug> Reload With Extensions` menu. ![image](https://user-images.githubusercontent.com/5336369/224746152-0416a862-891a-4fe1-b9dd-09add25a6cc0.png) +- [Publish an extension](https://github.com/phcode-dev/phoenix/wiki/How-To-Write-Extensions-And-Themes#publishing-to-the-extensiontheme-store) directly from your GitHub repo by creating a GitHub release! -* Browse and install extensions and themes from the store. Click on the `extensions icon` or select `File > Extension Manager` from menu item to view store. -* To apply themes after installing, click on menu `View > Themes` and select Theme to apply. -* Most extensions from [Brackets](https://brackets.io) is available in Phoenix Web except few that requires native privileges. - ![extensions](https://github.com/phcode-dev/phoenix/assets/5336369/a6e7b1bf-4020-489c-8234-e5c270ebe56c) +## Extensions and Themes Store +`Added on January,2023` +- Browse and install extensions and themes from the store. Click on the `extensions icon` or select `File > Extension Manager` from menu item to view store. +- To apply themes after installing, click on menu `View > Themes` and select Theme to apply. +- Most extensions from [Brackets](https://brackets.io) is available in Phoenix Web except few that requires native privileges. ![extensions](https://github.com/phcode-dev/phoenix/assets/5336369/a6e7b1bf-4020-489c-8234-e5c270ebe56c) ## Number Widget for Live Preview + `Added on December,2022` -* Hover over any number value in css to get the all new number widget for fine-tuning numeric values in live preview. - ![number preview](https://user-images.githubusercontent.com/5336369/208715497-781e8dfc-1939-4dac-82e8-c7e517be4d9c.gif) +- Hover over any number value in css to get the all new number widget for fine-tuning numeric values in live preview. ![number preview](https://user-images.githubusercontent.com/5336369/208715497-781e8dfc-1939-4dac-82e8-c7e517be4d9c.gif) ## Beautify code + `Added on August,2022` Beautify HTML, CSS, JS, Json, Markdown, Typescript, and other language code with `Ctrl-B` (`Cmd-B` in mac.). #### Watch the video on YouTube - - Watch the video - + +[![Watch the video](http://img.youtube.com/vi/DMMPfIuUGGs/mqdefault.jpg)](http://www.youtube.com/watch?feature=player_embedded&v=DMMPfIuUGGs) ## Javascript Lint with JSHint + `Added on August,2022` Detect errors and potential problems in your JavaScript code while editing your code in Phoenix. @@ -359,54 +315,52 @@ Detect errors and potential problems in your JavaScript code while editing your ![jshint](https://user-images.githubusercontent.com/5336369/190146369-db510c3d-2a72-4f00-918b-4889b23e20ab.gif) ## Javascript Code Intelligence + `Added on July-August,2022` -* Javascript code hints, auto complete. -* Javascript variable refactoring(press `f2` to rename variable). -* Highlight Variable references under cursor. -* `Ctrl+Click`(Windows/Linux) or `Cmd+Click`(Mac) to jump to variable/function definition. +- Javascript code hints, auto complete. +- Javascript variable refactoring(press `f2` to rename variable). +- Highlight Variable references under cursor. +- `Ctrl+Click`(Windows/Linux) or `Cmd+Click`(Mac) to jump to variable/function definition. ![refactor](https://user-images.githubusercontent.com/5336369/190147482-691e2fd2-84d4-4d27-b37b-cfbae3c335a6.gif) ## Instant Search and Large Projects Support in browsers + `Added on June,2022` -Open large projects right from your browser. -Instant search across all files in your project (Click on the search icon at top left). +Open large projects right from your browser. Instant search across all files in your project (Click on the search icon at top left). #### Watch the video on YouTube - - Watch the video - + +[![Watch the video](http://img.youtube.com/vi/pw7vJ_l5A44/mqdefault.jpg)](http://www.youtube.com/watch?feature=player_embedded&v=pw7vJ_l5A44) ## New Project Welcome Screen + `Added on May,2022` -Open local folders and projects from GitHub; Quick start templates with HTML, blog, and bootstrap projects. -More templates coming soon. +Open local folders and projects from GitHub; Quick start templates with HTML, blog, and bootstrap projects. More templates coming soon. #### Watch the video on YouTube - - Watch the video - + +[![Watch the video](http://img.youtube.com/vi/Nqukd9oU060/mqdefault.jpg)](http://www.youtube.com/watch?feature=player_embedded&v=Nqukd9oU060) ## Share and Publish your Website + `Added on Apr,2022` Quickly preview changes and share your website with others on the web with a single click. #### Watch the video on YouTube - - Watch the video - + +[![Watch the video](http://img.youtube.com/vi/dJTZ2iduagg/mqdefault.jpg)](http://www.youtube.com/watch?feature=player_embedded&v=dJTZ2iduagg) ## Live Markdown Preview + `Added on Apr,2022` Live preview but for markdown files! #### Watch the video on YouTube - - Watch the video - +[![Watch the video](http://img.youtube.com/vi/buDeBgf-B60/mqdefault.jpg)](http://www.youtube.com/watch?feature=player_embedded&v=buDeBgf-B60) diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 976233db11..ac3ec69467 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -2084,8 +2084,8 @@ define({ "PROMO_UPGRADE_MESSAGE": "Enjoy free access to these premium features for the next {0} days:", "PROMO_CARD_1": "Edit In Live Preview", "PROMO_CARD_1_MESSAGE": "Edit text, update images, change links, drag elements, and more. Your code updates as you go.", - "PROMO_CARD_2": "AI that sees what you see", - "PROMO_CARD_2_MESSAGE": "Explore UI ideas, build apps, and fix issues with AI — it sees your page the same way you do, not just code.", + "PROMO_CARD_2": "Try ideas, build pages, and fix issues with AI", + "PROMO_CARD_2_MESSAGE": "AI that sees what you see — not just code. It helps create layouts, fix tricky UI issues, and stays out of your way so you can focus on the creative work.", "PROMO_CARD_3": "See your page on any device", "PROMO_CARD_3_MESSAGE": "Switch instantly between phone, tablet, and desktop views to catch responsive issues early.", "PROMO_CARD_4": "Your Markdown, as a real document", @@ -2282,7 +2282,7 @@ define({ "AI_CHAT_PLAN_FEEDBACK_PLACEHOLDER": "What would you like changed?", "AI_CHAT_PLAN_REVISE_DEFAULT": "Please revise the plan.", "AI_CHAT_MODE_PLAN": "Plan Mode", - "AI_CHAT_MODE_EDIT": "Edit Mode", + "AI_CHAT_MODE_EDIT": "AI Edit Mode", "AI_CHAT_MODE_FULL_AUTO": "Full Auto", "AI_CHAT_MODE_INFO_PLAN": "AI will propose a plan before making changes (Click to switch)", "AI_CHAT_MODE_INFO_EDIT": "AI can edit files. Shell commands need approval (Click to switch)",