From 2dd2753aa339368b6950aa78438e418ff3aec44a Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 18 Apr 2026 12:57:28 +0530 Subject: [PATCH 1/8] feat: live preview resize ruler docs --- docs/07-Pro Features/04-resize-ruler.md | 42 +++++++++++++++++++ .../06-Live Preview/01-live-preview.md | 7 ++++ 2 files changed, 49 insertions(+) create mode 100644 docs/07-Pro Features/04-resize-ruler.md diff --git a/docs/07-Pro Features/04-resize-ruler.md b/docs/07-Pro Features/04-resize-ruler.md new file mode 100644 index 00000000..4b70cb77 --- /dev/null +++ b/docs/07-Pro Features/04-resize-ruler.md @@ -0,0 +1,42 @@ +--- +title: Resize Ruler +--- + +:::info Pro Feature +[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature. +::: + +The **Resize Ruler** is a ruler that appears on the Live Preview toolbar when you resize the Live Preview panel. It helps you see exactly how wide your preview is and where your page's CSS breakpoints fall. + + + +--- + +## How It Works + +Drag the edge of the Live Preview panel to resize it. A ruler appears on the toolbar showing: + +- **Tick marks** with pixel numbers every 100px +- **Colored segments** that show the CSS breakpoint ranges from your page's stylesheets (see [CSS Breakpoint Detection](#css-breakpoint-detection)) +- **A blue line** at the right edge marking the current width +- **Width and device info** in the top-right corner, showing the width in pixels along with the closest matching device name (for example, "iPad Mini - 768px") + +The ruler disappears on its own once you stop resizing. + +> The Resize Ruler also appears briefly when you select a device from the Device Size Presets dropdown in the [Live Preview Toolbar](../Features/Live%20Preview/live-preview#live-preview-toolbar). + +--- + +## CSS Breakpoint Detection + +Phoenix Code reads your page's stylesheets and picks up any CSS media query breakpoints (like `min-width` and `max-width` rules). These breakpoints show up in two places: + +- **On the Resize Ruler**: as colored segments between breakpoints, each labeled with its pixel value. +- **In the Device Size dropdown**: as extra entries at the bottom of the list, shown as `@media Xpx`. Clicking one resizes the Live Preview panel to that width. + +> Breakpoints update automatically as you edit your CSS. + + + +> CSS breakpoint detection and the breakpoint entries in the Device Size dropdown are available only for Pro users. Free users can still use the predefined device presets. + diff --git a/docs/08-Features/06-Live Preview/01-live-preview.md b/docs/08-Features/06-Live Preview/01-live-preview.md index 51498da0..d0ce3020 100644 --- a/docs/08-Features/06-Live Preview/01-live-preview.md +++ b/docs/08-Features/06-Live Preview/01-live-preview.md @@ -135,6 +135,13 @@ Phoenix Code provides various options in the Live Preview toolbar. --- + + +* **Device Size Presets** — A device icon button at the right side of the toolbar. Click it to see a list of common device widths (phones, tablets, and desktops). Pick a device to resize the Live Preview panel to that width. The button icon changes to match the current width category. + On **Phoenix Pro Edition**, the dropdown also shows CSS breakpoints picked up from your page's stylesheets. See [Resize Ruler](../../Pro%20Features/resize-ruler) for details. + +--- + ## Using Live Preview with HTML Files 1. Open the HTML file you want to preview. From d2adbe2eee567aea8990ebec7b10021bc9a43385 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 18 Apr 2026 13:46:11 +0530 Subject: [PATCH 2/8] feat: markdown editor initial docs --- docs/07-Pro Features/05-markdown-editor.md | 175 ++++++++++++++++++ .../04-markdown-live-preview.md | 60 ++++++ 2 files changed, 235 insertions(+) create mode 100644 docs/07-Pro Features/05-markdown-editor.md create mode 100644 docs/08-Features/06-Live Preview/04-markdown-live-preview.md diff --git a/docs/07-Pro Features/05-markdown-editor.md b/docs/07-Pro Features/05-markdown-editor.md new file mode 100644 index 00000000..a6b2af8b --- /dev/null +++ b/docs/07-Pro Features/05-markdown-editor.md @@ -0,0 +1,175 @@ +--- +title: Markdown Editor +--- + +:::info Pro Feature +[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature. +::: + +The **Markdown Editor** lets you edit Markdown files directly in the Live Preview using a rich text editor. You can format text, add images, create tables, insert links, and more -- all without writing Markdown syntax by hand. Your changes are automatically synced back to the source code. + + + +--- + +## Enabling Edit Mode + +To start editing, click the **Edit** button in the preview toolbar. The toolbar expands to show formatting options, and you can start making changes right away. + +To go back to the read-only view, click **Reader** (or **Done**) in the toolbar. + + + +> Pro users start in Edit Mode by default when opening Markdown files. + +--- + +## Toolbar + +The toolbar appears at the top of the preview when you enter Edit Mode. It gives you quick access to all the formatting and editing tools described below. + +On smaller screens, some toolbar buttons collapse into dropdown menus to save space. + + + +--- + +## Text Formatting + +Select the text you want to format and click a formatting button, or use the keyboard shortcut. If no text is selected, the formatting applies to the word at your cursor. + +- **Bold** (`Ctrl/Cmd + B`) +- **Italic** (`Ctrl/Cmd + I`) +- **Underline** (`Ctrl/Cmd + U`) +- **Strikethrough** (`Ctrl/Cmd + Shift + X`) +- **Inline Code** (`Ctrl/Cmd + E`) + +You can also select text and use the **floating format bar** that appears near your selection. + + + +--- + +## Block Types + +Use the **block type dropdown** in the toolbar to change the type of the current block. Options include: + +- Paragraph +- Heading 1 through Heading 5 + + + +--- + +## Lists + +The toolbar has buttons for three types of lists: + +- **Bullet list** -- unordered list +- **Numbered list** -- ordered list +- **Task list** -- checklist with checkboxes + +Click a list button to turn the current line into a list item, or to convert an existing list to a different type. + +--- + +## Block Elements + +You can insert these block-level elements from the toolbar: + +- **Blockquote** -- a quoted block of text +- **Divider** -- a horizontal line +- **Code block** -- a fenced code block with an optional language picker +- **Table** -- inserts a new table (see [Table Editing](#table-editing)) + +--- + +## Slash Menu + +Type `/` at the start of an empty line to open the **Slash Menu**. This gives you a quick way to insert any block type without reaching for the toolbar. + + + +The menu shows all available block types: paragraphs, headings, lists, blockquotes, code blocks, tables, dividers, mermaid diagrams, and images. Start typing to filter the list. Use the arrow keys to navigate and press `Enter` to insert. + +> The Slash Menu learns from your usage and shows your most-used items first. + +### Markdown Shortcuts + +You can also use standard Markdown shortcuts as you type: + +- `# ` through `##### ` for headings +- `- ` or `* ` for bullet lists +- `1. ` for numbered lists +- `- [ ] ` for task lists +- `> ` for blockquotes +- ` ``` ` for code blocks +- `---` for dividers + +--- + +## Table Editing + +When you insert a table, you can edit it directly in the preview. Click any cell to start typing in it. Use `Tab` to move to the next cell. + +Right-click a cell to open a context menu with options to: + +- Insert or delete rows +- Insert or delete columns +- Copy, cut, and paste rows or columns +- Delete the entire table + +You can also click the **+ New row** button below the table to add a row. + + + +--- + +## Images + +You can add images in two ways: + +- **From a URL**: Enter the image URL and alt text in a dialog +- **Upload from your computer**: Pick an image file from your device + +Both options are available from the **Image** button in the toolbar or through the [Slash Menu](#slash-menu). + +Click an image in the editor to see a popover with **Edit** and **Delete** buttons. + + + +--- + +## Links + +To add a link, select some text and click the **Link** button in the toolbar (or press `Ctrl/Cmd + K`). Enter the URL in the floating input that appears and press `Enter`. + +Click an existing link to see a popover showing the URL, with options to **Edit** or **Remove** the link. + + + +--- + +## Mermaid Diagrams + +You can insert Mermaid diagram blocks through the toolbar or the [Slash Menu](#slash-menu). In Edit Mode, Mermaid blocks show a syntax editor where you write the diagram code, with a live preview of the rendered diagram. Click **Edit** or **Done** to toggle between the code and the preview. + + + +--- + +## Keyboard Shortcuts + +| Action | Shortcut | +|--------|----------| +| Bold | `Ctrl/Cmd + B` | +| Italic | `Ctrl/Cmd + I` | +| Underline | `Ctrl/Cmd + U` | +| Strikethrough | `Ctrl/Cmd + Shift + X` | +| Inline Code | `Ctrl/Cmd + E` | +| Link | `Ctrl/Cmd + K` | +| Undo | `Ctrl/Cmd + Z` | +| Redo | `Ctrl/Cmd + Y` or `Ctrl/Cmd + Shift + Z` | +| Search | `Ctrl/Cmd + F` | +| Select All | `Ctrl/Cmd + A` | + diff --git a/docs/08-Features/06-Live Preview/04-markdown-live-preview.md b/docs/08-Features/06-Live Preview/04-markdown-live-preview.md new file mode 100644 index 00000000..be0b13b2 --- /dev/null +++ b/docs/08-Features/06-Live Preview/04-markdown-live-preview.md @@ -0,0 +1,60 @@ +--- +title: Markdown Live Preview +--- + +When you open a Markdown file (`.md`), **Live Preview** shows a nicely formatted version of your document. As you type in the editor, the preview updates in real-time so you can see exactly how your Markdown will look. + + + +--- + +## Scroll and Cursor Sync + +The editor and preview stay in sync as you work. When you scroll or move your cursor in the editor, the preview follows along to show the same section. This also works the other way around -- clicking a section in the preview scrolls the editor to the matching line. + +You can turn sync on or off using the **cursor sync toggle** *(link icon)* in the preview toolbar. + + + +--- + +## Search + +Press `Ctrl/Cmd + F` to open a search bar in the preview. Type your search term and use the arrow buttons to jump between matches. The preview highlights all matching text and shows a count of results. + +Press `Esc` or click the close button to close the search bar. + +--- + +## Theme Toggle + +Click the **theme toggle** button *(sun/moon icon)* in the preview toolbar to switch between light and dark themes. Your choice is remembered across sessions. + + + +--- + +## Code Blocks + +Fenced code blocks are displayed with syntax highlighting. A **Copy** button appears on each code block so you can quickly copy the code. + +--- + +## Mermaid Diagrams + +Mermaid diagram blocks (` ```mermaid `) are rendered as visual diagrams in the preview. + +--- + +## Print + +Click the **Print** button in the preview toolbar to print your rendered Markdown document. + +> Print is not available on macOS desktop apps. + +--- + +## Editing Markdown + +On **Phoenix Pro Edition**, you can edit your Markdown directly in the Live Preview using a rich text editor. See [Markdown Editor](../../Pro%20Features/markdown-editor) for details. + From b2cffd9ea17e7b463eeff4e4218feedea22cb7be Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 18 Apr 2026 13:54:58 +0530 Subject: [PATCH 3/8] feat: better and concise live preview markdown viewer docs --- docs/07-Pro Features/05-markdown-editor.md | 45 ++++-------------- .../04-markdown-live-preview.md | 47 +++---------------- 2 files changed, 16 insertions(+), 76 deletions(-) diff --git a/docs/07-Pro Features/05-markdown-editor.md b/docs/07-Pro Features/05-markdown-editor.md index a6b2af8b..e77b2a49 100644 --- a/docs/07-Pro Features/05-markdown-editor.md +++ b/docs/07-Pro Features/05-markdown-editor.md @@ -6,12 +6,10 @@ title: Markdown Editor [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature. ::: -The **Markdown Editor** lets you edit Markdown files directly in the Live Preview using a rich text editor. You can format text, add images, create tables, insert links, and more -- all without writing Markdown syntax by hand. Your changes are automatically synced back to the source code. +The **Markdown Editor** lets you edit Markdown files directly in the Live Preview using a rich text editor. You can format text, add images, create tables, insert links, and more, all without writing Markdown syntax by hand. Your changes are automatically synced back to the source code. ---- - ## Enabling Edit Mode To start editing, click the **Edit** button in the preview toolbar. The toolbar expands to show formatting options, and you can start making changes right away. @@ -22,8 +20,6 @@ To go back to the read-only view, click **Reader** (or **Done**) in the toolbar. > Pro users start in Edit Mode by default when opening Markdown files. ---- - ## Toolbar The toolbar appears at the top of the preview when you enter Edit Mode. It gives you quick access to all the formatting and editing tools described below. @@ -32,8 +28,6 @@ On smaller screens, some toolbar buttons collapse into dropdown menus to save sp ---- - ## Text Formatting Select the text you want to format and click a formatting button, or use the keyboard shortcut. If no text is selected, the formatting applies to the word at your cursor. @@ -48,8 +42,6 @@ You can also select text and use the **floating format bar** that appears near y ---- - ## Block Types Use the **block type dropdown** in the toolbar to change the type of the current block. Options include: @@ -59,30 +51,24 @@ Use the **block type dropdown** in the toolbar to change the type of the current ---- - ## Lists The toolbar has buttons for three types of lists: -- **Bullet list** -- unordered list -- **Numbered list** -- ordered list -- **Task list** -- checklist with checkboxes +- **Bullet list** - unordered list +- **Numbered list** - ordered list +- **Task list** - checklist with checkboxes Click a list button to turn the current line into a list item, or to convert an existing list to a different type. ---- - ## Block Elements You can insert these block-level elements from the toolbar: -- **Blockquote** -- a quoted block of text -- **Divider** -- a horizontal line -- **Code block** -- a fenced code block with an optional language picker -- **Table** -- inserts a new table (see [Table Editing](#table-editing)) - ---- +- **Blockquote** - a quoted block of text +- **Divider** - a horizontal line +- **Code block** - a fenced code block with an optional language picker +- **Table** - inserts a new table (see [Table Editing](#table-editing)) ## Slash Menu @@ -106,8 +92,6 @@ You can also use standard Markdown shortcuts as you type: - ` ``` ` for code blocks - `---` for dividers ---- - ## Table Editing When you insert a table, you can edit it directly in the preview. Click any cell to start typing in it. Use `Tab` to move to the next cell. @@ -123,14 +107,12 @@ You can also click the **+ New row** button below the table to add a row. ---- - ## Images You can add images in two ways: -- **From a URL**: Enter the image URL and alt text in a dialog -- **Upload from your computer**: Pick an image file from your device +- **From a URL** - enter the image URL and alt text in a dialog +- **Upload from your computer** - pick an image file from your device Both options are available from the **Image** button in the toolbar or through the [Slash Menu](#slash-menu). @@ -138,8 +120,6 @@ Click an image in the editor to see a popover with **Edit** and **Delete** butto ---- - ## Links To add a link, select some text and click the **Link** button in the toolbar (or press `Ctrl/Cmd + K`). Enter the URL in the floating input that appears and press `Enter`. @@ -148,16 +128,12 @@ Click an existing link to see a popover showing the URL, with options to **Edit* ---- - ## Mermaid Diagrams You can insert Mermaid diagram blocks through the toolbar or the [Slash Menu](#slash-menu). In Edit Mode, Mermaid blocks show a syntax editor where you write the diagram code, with a live preview of the rendered diagram. Click **Edit** or **Done** to toggle between the code and the preview. ---- - ## Keyboard Shortcuts | Action | Shortcut | @@ -172,4 +148,3 @@ You can insert Mermaid diagram blocks through the toolbar or the [Slash Menu](#s | Redo | `Ctrl/Cmd + Y` or `Ctrl/Cmd + Shift + Z` | | Search | `Ctrl/Cmd + F` | | Select All | `Ctrl/Cmd + A` | - diff --git a/docs/08-Features/06-Live Preview/04-markdown-live-preview.md b/docs/08-Features/06-Live Preview/04-markdown-live-preview.md index be0b13b2..445441a3 100644 --- a/docs/08-Features/06-Live Preview/04-markdown-live-preview.md +++ b/docs/08-Features/06-Live Preview/04-markdown-live-preview.md @@ -2,59 +2,24 @@ title: Markdown Live Preview --- -When you open a Markdown file (`.md`), **Live Preview** shows a nicely formatted version of your document. As you type in the editor, the preview updates in real-time so you can see exactly how your Markdown will look. +When you open a Markdown file (`.md`), **Live Preview** shows a nicely formatted version of your document with syntax-highlighted code blocks, rendered Mermaid diagrams, and more. As you type in the editor, the preview updates in real-time. ---- - ## Scroll and Cursor Sync -The editor and preview stay in sync as you work. When you scroll or move your cursor in the editor, the preview follows along to show the same section. This also works the other way around -- clicking a section in the preview scrolls the editor to the matching line. +The editor and preview stay in sync as you work. When you scroll or move your cursor in the editor, the preview follows along to show the same section. Clicking a section in the preview scrolls the editor to the matching line too. You can turn sync on or off using the **cursor sync toggle** *(link icon)* in the preview toolbar. ---- - -## Search - -Press `Ctrl/Cmd + F` to open a search bar in the preview. Type your search term and use the arrow buttons to jump between matches. The preview highlights all matching text and shows a count of results. - -Press `Esc` or click the close button to close the search bar. - ---- - -## Theme Toggle - -Click the **theme toggle** button *(sun/moon icon)* in the preview toolbar to switch between light and dark themes. Your choice is remembered across sessions. - - - ---- - -## Code Blocks - -Fenced code blocks are displayed with syntax highlighting. A **Copy** button appears on each code block so you can quickly copy the code. - ---- - -## Mermaid Diagrams - -Mermaid diagram blocks (` ```mermaid `) are rendered as visual diagrams in the preview. - ---- - -## Print - -Click the **Print** button in the preview toolbar to print your rendered Markdown document. +The preview toolbar also has a **theme toggle** *(sun/moon icon)* to switch between light and dark themes, a **search** bar (`Ctrl/Cmd + F`), and a **print** button. > Print is not available on macOS desktop apps. ---- - -## Editing Markdown +## Markdown Editor (Pro) -On **Phoenix Pro Edition**, you can edit your Markdown directly in the Live Preview using a rich text editor. See [Markdown Editor](../../Pro%20Features/markdown-editor) for details. +With **Phoenix Pro**, you can go beyond just viewing. Edit your Markdown directly in the Live Preview with a full rich text editor - format text, build tables, drag in images, add links, use slash commands to insert blocks, and much more. All your changes sync back to the source code automatically. +[Learn more about the Markdown Editor](../../Pro%20Features/markdown-editor) From d9e5ba37c6f59e2d3be0d07d7be502486c1ee6a3 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 18 Apr 2026 14:27:22 +0530 Subject: [PATCH 4/8] feat: markdown editor docs complete --- docs/07-Pro Features/05-markdown-editor.md | 48 ++++------------------ 1 file changed, 9 insertions(+), 39 deletions(-) diff --git a/docs/07-Pro Features/05-markdown-editor.md b/docs/07-Pro Features/05-markdown-editor.md index e77b2a49..0c9ab9a0 100644 --- a/docs/07-Pro Features/05-markdown-editor.md +++ b/docs/07-Pro Features/05-markdown-editor.md @@ -6,7 +6,7 @@ title: Markdown Editor [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature. ::: -The **Markdown Editor** lets you edit Markdown files directly in the Live Preview using a rich text editor. You can format text, add images, create tables, insert links, and more, all without writing Markdown syntax by hand. Your changes are automatically synced back to the source code. +The **Markdown Editor** brings a full rich text editing experience to Markdown files, right inside the Live Preview. Format text, build tables, drop in images, add links, use slash commands - and watch every change sync back to your source code instantly. @@ -20,14 +20,6 @@ To go back to the read-only view, click **Reader** (or **Done**) in the toolbar. > Pro users start in Edit Mode by default when opening Markdown files. -## Toolbar - -The toolbar appears at the top of the preview when you enter Edit Mode. It gives you quick access to all the formatting and editing tools described below. - -On smaller screens, some toolbar buttons collapse into dropdown menus to save space. - - - ## Text Formatting Select the text you want to format and click a formatting button, or use the keyboard shortcut. If no text is selected, the formatting applies to the word at your cursor. @@ -42,41 +34,25 @@ You can also select text and use the **floating format bar** that appears near y -## Block Types +## Blocks and Lists -Use the **block type dropdown** in the toolbar to change the type of the current block. Options include: +The toolbar lets you change the current block type using a **block type dropdown** (Paragraph, Heading 1 through Heading 5) and insert different types of content: -- Paragraph -- Heading 1 through Heading 5 +- **Bullet list**, **Numbered list**, **Task list** (checklist with checkboxes) +- **Blockquote**, **Divider** (horizontal line) +- **Code block** with an optional language picker +- **Table** (see [Table Editing](#table-editing)) +- **Mermaid diagram** with a syntax editor and live rendered preview -## Lists - -The toolbar has buttons for three types of lists: - -- **Bullet list** - unordered list -- **Numbered list** - ordered list -- **Task list** - checklist with checkboxes - -Click a list button to turn the current line into a list item, or to convert an existing list to a different type. - -## Block Elements - -You can insert these block-level elements from the toolbar: - -- **Blockquote** - a quoted block of text -- **Divider** - a horizontal line -- **Code block** - a fenced code block with an optional language picker -- **Table** - inserts a new table (see [Table Editing](#table-editing)) - ## Slash Menu Type `/` at the start of an empty line to open the **Slash Menu**. This gives you a quick way to insert any block type without reaching for the toolbar. -The menu shows all available block types: paragraphs, headings, lists, blockquotes, code blocks, tables, dividers, mermaid diagrams, and images. Start typing to filter the list. Use the arrow keys to navigate and press `Enter` to insert. +Start typing to filter the list. Use the arrow keys to navigate and press `Enter` to insert. > The Slash Menu learns from your usage and shows your most-used items first. @@ -128,12 +104,6 @@ Click an existing link to see a popover showing the URL, with options to **Edit* -## Mermaid Diagrams - -You can insert Mermaid diagram blocks through the toolbar or the [Slash Menu](#slash-menu). In Edit Mode, Mermaid blocks show a syntax editor where you write the diagram code, with a live preview of the rendered diagram. Click **Edit** or **Done** to toggle between the code and the preview. - - - ## Keyboard Shortcuts | Action | Shortcut | From cc6288bbdafb03fa55adbd2c72ed1c310cd4812a Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 18 Apr 2026 15:50:10 +0530 Subject: [PATCH 5/8] feat: add docs for terminal --- docs/08-Features/09-terminal.md | 55 +++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 docs/08-Features/09-terminal.md diff --git a/docs/08-Features/09-terminal.md b/docs/08-Features/09-terminal.md new file mode 100644 index 00000000..6f1df200 --- /dev/null +++ b/docs/08-Features/09-terminal.md @@ -0,0 +1,55 @@ +--- +title: Terminal +--- + +Phoenix Code has a built-in terminal so you can run commands without leaving the editor. + +> The terminal is available only in desktop apps. + + + +## Opening the Terminal + +There are a few ways to open the terminal: + +- Click the **Tools** button *(grid icon)* in the bottom-right toolbar and select **Terminal** +- Go to **View > Terminal** from the menu bar +- Press `F4` + +## Tabs + +You can have multiple terminals open at the same time, each in its own tab. The tab sidebar shows the running process name for each terminal. + +To create a new tab, click the **+** button at the bottom of the tab sidebar. + +To close a tab, hover over it and click the **X** button. If a process is still running, Phoenix Code asks for confirmation before closing. + + + +## Shell Selection + +Click the **dropdown button** *(chevron icon)* next to the new tab button to pick a different shell. The available options depend on your operating system: + +- **macOS**: zsh, bash, fish +- **Linux**: bash, zsh, fish +- **Windows**: PowerShell, Command Prompt, Git Bash, WSL + +Selecting a shell sets it as the default and opens a new terminal with it right away. + +> Only shells that are installed on your system are shown. + +## Right-Click Menu + +Right-click inside the terminal to access: + +- **Copy** - copy selected text +- **Paste** - paste from clipboard +- **Clear Terminal** - clear the terminal output + +## Keyboard Shortcuts + +| Action | Shortcut | +|--------|----------| +| Toggle terminal | `F4` | +| Switch focus between editor and terminal | `Shift + Escape` | +| Clear terminal buffer | `Ctrl/Cmd + K` | From 17f6404d76eecf292032a337368389ddad6e5127 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 18 Apr 2026 16:04:53 +0530 Subject: [PATCH 6/8] feat: update API docs as per the tabbed bottom panel architecture --- api/08-How-To/Panels.md | 72 ++++++++++++++++++++++++----------------- 1 file changed, 42 insertions(+), 30 deletions(-) diff --git a/api/08-How-To/Panels.md b/api/08-How-To/Panels.md index 3c0468fc..552a1cca 100644 --- a/api/08-How-To/Panels.md +++ b/api/08-How-To/Panels.md @@ -9,7 +9,7 @@ In Phoenix Code, Panels are of two types :- `Plugin Panel` and `Bottom Panel`. ![Plugin Panel Example](./images/plugin-panel-example.png) -**Bottom Panel** appears on the bottom of the screen. For Example :- *Problems* feature uses the `Bottom Panel`. +**Bottom Panel** appears on the bottom of the screen as a tab. Multiple bottom panels share a tabbed interface where each panel gets its own tab with an icon and title. For Example :- *Git*, *Terminal*, *Problems* panel and many more use the `Bottom Panel`. ![Bottom Panel Example](./images/bottom-panel-example.png) @@ -150,7 +150,7 @@ You can control the visibility and state of your plugin panel: ## Creating a Bottom Panel Bottom panels are created similarly to plugin panels but use different methods: -> For `Bottom Panels` creating a toolbar icon is not required. +> For `Bottom Panels` creating a toolbar icon is not required. Each bottom panel appears as a tab in the shared tab bar. 1. **Import required modules** ```jsx @@ -160,11 +160,21 @@ Bottom panels are created similarly to plugin panels but use different methods: 2. **Create the bottom panel** ```jsx const bottomPanel = WorkspaceManager.createBottomPanel( - "myextension.panel", - $panel, - 200, + "myextension.panel", // Unique ID using package-style naming + $panel, // jQuery object for panel content + undefined, // minSize (deprecated, pass undefined) + "My Panel", // Title shown on the tab + { + iconSvg: "path/to/icon.svg" // SVG icon for the tab + } ); ``` + + - **`title`**: The text shown on the panel's tab. If not provided, Phoenix Code uses the text from a `.toolbar .title` element inside your panel, or derives it from the panel ID. + - **`iconSvg`**: Path to an SVG file used as the tab icon. The icon automatically adapts to light and dark themes. If not provided, a default icon is used. + +> The `minSize` parameter (third argument) is deprecated and no longer used. Pass `undefined` for this parameter. + > For a detailed description, refer to [this link](https://docs.phcode.dev/api/API-Reference/view/WorkspaceManager#createBottomPanel). Full Code Example for Bottom Panel: @@ -189,11 +199,13 @@ Full Code Example for Bottom Panel: .attr("id", "my-extension-panel") .html("

My Bottom Panel

Hello from the panel!

"); - // Create the plugin panel + // Create the bottom panel bottomPanel = WorkspaceManager.createBottomPanel( "myextension.panel", $panel, - 200, + undefined, + "My Panel", + { iconSvg: "styles/images/panel-icon-default.svg" } ); bottomPanel.show(); } @@ -246,33 +258,33 @@ Bottom panels support similar state management to plugin panels: } ``` +4. **Update Tab Title** + ```jsx + bottomPanel.setTitle("New Title"); + ``` + +5. **Handle Close Confirmation** + + If your panel has unsaved state or running processes, you can register a handler that runs before the panel closes. Return `false` to prevent closing. + ```jsx + bottomPanel.registerOnCloseRequestedHandler(async function () { + if (hasUnsavedChanges) { + const confirmed = await showConfirmDialog("Discard changes?"); + return confirmed; // true to close, false to cancel + } + return true; + }); + ``` + + To programmatically close a panel while respecting its close handler, use `requestClose()`: + ```jsx + const wasClosed = await bottomPanel.requestClose(); + ``` + ## Best Practices 1. Always use unique, package-style IDs (e.g., "yourextension.panel-name") to avoid conflicts with other extensions. 2. Save panel state (e.g., visibility, size) in preferences if needed, to restore state when the extension is reloaded. -Example CSS for Bottom Panel: - -```css -.bottom-panel { - background-color: #f8f9fa; - border-top: 1px solid #ddd; -} - -.bottom-panel .toolbar { - padding: 4px 8px; - display: flex; - justify-content: space-between; - align-items: center; - background-color: #e9ecef; - border-bottom: 1px solid #ddd; -} - -.bottom-panel .panel-content { - padding: 8px; - overflow-y: auto; -} -``` - > For more information about the WorkSpace Manager API, refer to the [Phoenix Code API documentation](https://docs.phcode.dev/api/API-Reference/view/WorkspaceManager). \ No newline at end of file From af46de0bd2970bc9a3fbf57495f03795d1695ccd Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 18 Apr 2026 16:46:48 +0530 Subject: [PATCH 7/8] feat: AI docs --- docs/08-Features/12-ai-chat.md | 93 ++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 docs/08-Features/12-ai-chat.md diff --git a/docs/08-Features/12-ai-chat.md b/docs/08-Features/12-ai-chat.md new file mode 100644 index 00000000..7744a499 --- /dev/null +++ b/docs/08-Features/12-ai-chat.md @@ -0,0 +1,93 @@ +--- +title: AI Chat +--- + +Phoenix Code comes with a built-in AI assistant powered by Claude Code. You can ask it to write code, fix bugs, explain files, and more. The AI can read and edit your project files, run terminal commands, take screenshots of your Live Preview, and work alongside you as you code. + +> AI Chat is available only in desktop apps. Free users get a daily and monthly chat limit. [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) for unlimited access. + + + +## Getting Started + +AI Chat requires the Claude Code CLI to be installed on your machine. If it's not installed, Phoenix Code shows a setup screen with the install command for your platform. + +Once installed, click **Set up Claude Code** to log in. Phoenix Code detects when the login is complete and opens the chat panel automatically. + + + +## Opening the AI Panel + +Click the **AI tab** *(sparkle icon)* in the sidebar to open the chat panel. + + + +## Sending Messages + +Type your message in the input box at the bottom and press `Enter` to send. Press `Shift + Enter` to add a new line. + +While the AI is working, you can type your next message. It shows up as a queued message and gets sent automatically once the AI finishes its current response. + +### Context + +Phoenix Code automatically provides context about what you're working on. Small chips appear above the input box showing: + +- **Selection** - the file and line range you have selected in the editor +- **Cursor** - your current line and file +- **Live Preview** - if the Live Preview panel is open + +You can dismiss any of these by clicking the **x** button on the chip. + +## Attachments and Screenshots + +Click the **paperclip button** to attach files from your project. You can attach images (PNG, JPG, GIF, WebP, SVG) and other files like code or documents. + +Click the **camera button** to take a screenshot and attach it. The dropdown lets you choose what to capture: + +- **Live Preview** - your Live Preview panel (if open) +- **Selected Element** - the currently selected element in Live Preview +- **Full Editor** - the entire editor window +- **Area** - a custom region you select with a crop tool + +## Permission Modes + +The AI has three permission levels that control how much it can do on its own. Click the **permission label** at the bottom of the panel to cycle between them. + +- **Plan** - the AI proposes a plan first. You review it and click **Approve** to proceed or **Revise** to give feedback. Good for complex tasks where you want to stay in control. +- **Edit** (default) - the AI can read and edit files on its own, but asks for your approval before running terminal commands. +- **Full Auto** - the AI works through everything without pausing. Terminal commands still ask for confirmation. + + + +## Session History + +Every conversation is saved automatically. Click the **history dropdown** at the top of the panel to see your recent sessions and switch between them. + +Sessions are saved per project, so each project has its own chat history. + +## Undo and Restore + +Before the AI makes any edits, Phoenix Code creates a **restore point**. If you don't like the changes, click **Undo** on the edit summary card to revert all the files back to how they were. + +If the AI made changes across multiple responses, you can click **Restore to this point** on any earlier edit summary to go back to that state. + + + +## Settings + +Click the **gear icon** in the chat panel to open AI settings. Here you can: + +- Switch between AI providers +- Add a custom API provider with your own API key and endpoint +- Set a custom API timeout + + + +## Keyboard Shortcuts + +| Action | Shortcut | +|--------|----------| +| Send message | `Enter` | +| New line | `Shift + Enter` | +| Cycle permission mode | `Shift + Tab` | +| Cancel or clear input | `Escape` | From 9ac9132e76f9e3834ca81941ee4682775c5c5899 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 18 Apr 2026 16:53:10 +0530 Subject: [PATCH 8/8] refactor: better file organization Co-Authored-By: Claude Opus 4.6 (1M context) --- .../12-ai-chat.md => 07-Pro Features/01-ai-chat.md} | 0 .../{01-live-preview-edit.md => 02-edit-mode-live-preview.md} | 4 ++-- .../{02-image-gallery.md => 03-image-gallery.md} | 0 .../{05-markdown-editor.md => 04-markdown-editor.md} | 0 .../{03-measurements.md => 05-measurements.md} | 0 .../{04-resize-ruler.md => 06-resize-ruler.md} | 0 docs/08-Features/{02-editor-rulers.md => 03-editor-rulers.md} | 0 docs/08-Features/{03-emmet.md => 04-emmet.md} | 0 docs/08-Features/{03-find-in-files.md => 05-find-in-files.md} | 0 docs/08-Features/{04-git.md => 06-git.md} | 0 .../{05-keyboard-shortcuts.md => 07-keyboard-shortcuts.md} | 0 .../{06-Live Preview => 08-Live Preview}/01-live-preview.md | 2 +- .../02-live-preview-settings.md | 0 .../03-markdown-live-preview.md} | 0 .../04-php-live-preview.md} | 0 .../{07-Problems Panel => 09-Problems Panel}/01-html-lint.md | 0 .../{07-Problems Panel => 09-Problems Panel}/02-ESLint.md | 0 docs/08-Features/{08-quick-edit.md => 10-quick-edit.md} | 0 .../{10-syntax-highlighting.md => 11-syntax-highlighting.md} | 0 docs/08-Features/{09-terminal.md => 12-terminal.md} | 0 docs/08-Features/{11-themes.md => 13-themes.md} | 0 21 files changed, 3 insertions(+), 3 deletions(-) rename docs/{08-Features/12-ai-chat.md => 07-Pro Features/01-ai-chat.md} (100%) rename docs/07-Pro Features/{01-live-preview-edit.md => 02-edit-mode-live-preview.md} (99%) rename docs/07-Pro Features/{02-image-gallery.md => 03-image-gallery.md} (100%) rename docs/07-Pro Features/{05-markdown-editor.md => 04-markdown-editor.md} (100%) rename docs/07-Pro Features/{03-measurements.md => 05-measurements.md} (100%) rename docs/07-Pro Features/{04-resize-ruler.md => 06-resize-ruler.md} (100%) rename docs/08-Features/{02-editor-rulers.md => 03-editor-rulers.md} (100%) rename docs/08-Features/{03-emmet.md => 04-emmet.md} (100%) rename docs/08-Features/{03-find-in-files.md => 05-find-in-files.md} (100%) rename docs/08-Features/{04-git.md => 06-git.md} (100%) rename docs/08-Features/{05-keyboard-shortcuts.md => 07-keyboard-shortcuts.md} (100%) rename docs/08-Features/{06-Live Preview => 08-Live Preview}/01-live-preview.md (99%) rename docs/08-Features/{06-Live Preview => 08-Live Preview}/02-live-preview-settings.md (100%) rename docs/08-Features/{06-Live Preview/04-markdown-live-preview.md => 08-Live Preview/03-markdown-live-preview.md} (100%) rename docs/08-Features/{06-Live Preview/03-php-live-preview.md => 08-Live Preview/04-php-live-preview.md} (100%) rename docs/08-Features/{07-Problems Panel => 09-Problems Panel}/01-html-lint.md (100%) rename docs/08-Features/{07-Problems Panel => 09-Problems Panel}/02-ESLint.md (100%) rename docs/08-Features/{08-quick-edit.md => 10-quick-edit.md} (100%) rename docs/08-Features/{10-syntax-highlighting.md => 11-syntax-highlighting.md} (100%) rename docs/08-Features/{09-terminal.md => 12-terminal.md} (100%) rename docs/08-Features/{11-themes.md => 13-themes.md} (100%) diff --git a/docs/08-Features/12-ai-chat.md b/docs/07-Pro Features/01-ai-chat.md similarity index 100% rename from docs/08-Features/12-ai-chat.md rename to docs/07-Pro Features/01-ai-chat.md diff --git a/docs/07-Pro Features/01-live-preview-edit.md b/docs/07-Pro Features/02-edit-mode-live-preview.md similarity index 99% rename from docs/07-Pro Features/01-live-preview-edit.md rename to docs/07-Pro Features/02-edit-mode-live-preview.md index 75c348ed..800d96e8 100644 --- a/docs/07-Pro Features/01-live-preview-edit.md +++ b/docs/07-Pro Features/02-edit-mode-live-preview.md @@ -1,5 +1,5 @@ --- -title: Live Preview Edit Mode +title: Edit Mode - Live Preview --- import React from 'react'; @@ -70,7 +70,7 @@ The right side of the Control Box displays a set of tools you can use to modify - **Change Image** *(image icon)*: Opens an image gallery at the bottom of the Live Preview, where you can browse and select an image. You can also choose an image from your computer. Phoenix Code automatically saves the image to your project folder and updates the `src` attribute of the element. *This button appears only for `` elements.* - See [Image Gallery](./02-image-gallery.md) for more details. + See [Image Gallery](./03-image-gallery.md) for more details. - **Edit Text** *(pen icon)*: Opens inline text editing for the selected element. You can edit text directly in the Live Preview, and Phoenix Code automatically updates the source code. *This button appears only for elements that can contain text (it is not available for ``, `