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-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) { 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/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 diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 86ae96e612..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", @@ -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?", @@ -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)",