From 83d2da840938b1e389e22108188157734cbc9d37 Mon Sep 17 00:00:00 2001 From: Pluto Date: Fri, 17 Apr 2026 00:39:14 +0530 Subject: [PATCH 1/6] feat: add control box and hover box docs --- docs/07-Pro Features/01-live-preview-edit.md | 93 +++++++++++--------- docs/07-Pro Features/02-image-gallery.md | 2 +- docs/07-Pro Features/03-measurements.md | 2 +- 3 files changed, 54 insertions(+), 43 deletions(-) diff --git a/docs/07-Pro Features/01-live-preview-edit.md b/docs/07-Pro Features/01-live-preview-edit.md index 3ff82bf2..fb3863d4 100644 --- a/docs/07-Pro Features/01-live-preview-edit.md +++ b/docs/07-Pro Features/01-live-preview-edit.md @@ -9,7 +9,7 @@ import VideoPlayer from '@site/src/components/Video/player'; [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature. ::: -**Edit Mode** lets you modify your page directly in the Live Preview. You can edit text, rearrange elements, and update images and links. You can also duplicate, delete, and inspect elements with precise measurements. +**Edit Mode** lets you modify your page directly in the Live Preview. You can edit text, change element tags, update classes and IDs, insert new elements, rearrange them with drag and drop, swap images, edit links, and much more. **Phoenix Code** updates your source code automatically as you make changes. By default, the Info Box appears when you hover over an element in the Live Preview, but this behavior can be changed. See the [Inspect Element on Hover](#inspect-element-on-hover) section for more details. +When you click an element in the Live Preview (or select it through the source code), a **Control Box** appears near it. This floating panel shows you what the element is and gives you tools to edit it. -![Info Box](./images/info-box.png "Info Box") + -The Info Box displays: -- **Tag name and dimensions**: The element type (for example, `div`, `p`, `img`) and its size in pixels (width × height) +> The Control Box is shown only for editable elements. It is not shown for non-editable elements that are dynamically created by JavaScript. + +### Element Info + +The left side of the Control Box displays information about the selected element: +- **Tag name**: The element type (for example, `div`, `p`, `img`) - **ID**: The element’s ID attribute (if present), shown with a `#` prefix +- **Dimensions**: The element’s size in pixels (width × height) - **CSS classes**: The element’s classes, shown with a `.` prefix. If the element has more than three classes, only the first three are shown, followed by a “+N more” indicator -- **Link URL**: The element’s `href` attribute (if present). This is shown only for anchor (``) elements -#### Visual Indicators + -The Info Box normally has a *blue* background for standard HTML elements (for example, `
`, `

`, ``). For dynamically created (JavaScript-rendered) elements, it appears with a *gray* background, indicating that these elements cannot be edited. +Clicking on the info section opens the [Element Properties](#element-properties) editor, where you can edit the element’s tag name, classes, and ID. -![Info Box non-editable](./images/info-box-gray.png "Info Box non editable") - ---- +### Select Parent -## Tool Box +The **Select Parent** button *(up-arrow icon)* appears next to the info section. Clicking it selects the parent of the currently selected element. -The **Tool Box** displays a set of tools you can use to modify elements in the Live Preview. -> The Tool Box appears only when you click an element or select it through the source code. +*This button appears only when a valid parent exists (it is not shown when the parent is `body`, `html`, or a JavaScript-rendered element).* -![Tool Box](./images/tool-box.png "Tool Box") +### Tools -### Tool Box Options +The right side of the Control Box displays a set of tools you can use to modify the selected element. The available tools depend on the element type. Some buttons are shown for all elements, while others appear only for specific element types. -The Tool Box displays different options depending on the selected element type. Some buttons are available for all elements, while others are specific to certain element types. + -- **Select Parent** *(up-arrow icon)*: Selects the parent of the currently selected element. - *This button appears only when a valid parent exists (it is not shown when the parent is `body`, `html`, or a JavaScript-rendered element).* - -- **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 ``, `` elements.* See the [Edit Hyperlink](#edit-hyperlink) section for more details. -- **Image Gallery** *(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. +- **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](./02-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 ``, ``) elements directly in the Live Preview. -To edit a hyperlink, select an `` element and click the **Edit Hyperlink** button *(link icon)* in the Tool Box. A floating input box appears near the element. +To edit a hyperlink, select an `` element and click the **Edit Hyperlink** button *(chain icon)* in the Control Box. An editing panel appears near the element. The input box includes: - **URL input**: Edit the link's destination (`href` attribute). Press `Enter` to save your changes or `Esc` to cancel. @@ -195,7 +206,7 @@ The **Measurements** feature displays ruler lines from the edges of a selected e ## Cut, Copy, and Paste -You can cut, copy, and paste elements in Edit Mode using standard keyboard shortcuts or the Tool Box **More Options** menu *(three-dots icon)*. +You can cut, copy, and paste elements in Edit Mode using standard keyboard shortcuts or the Control Box **More Options** menu *(three-dots icon)*. ### Using Keyboard Shortcuts @@ -207,7 +218,7 @@ When you click an element in the Live Preview, keyboard focus moves to the Live ### Using the More Options Menu ![More Options dropdown](./images/more-options-dropdown.png "More Options Dropdown") -Click the **More Options** button *(three-dots icon)* in the Tool Box and select **Cut**, **Copy**, or **Paste** from the dropdown menu. +Click the **More Options** button *(three-dots icon)* in the Control Box and select **Cut**, **Copy**, or **Paste** from the dropdown menu. > Keyboard shortcuts apply to elements only when focus is in the Live Preview. When editing source code, the shortcuts affect the code instead. diff --git a/docs/07-Pro Features/02-image-gallery.md b/docs/07-Pro Features/02-image-gallery.md index 2a957f1b..e570aa62 100644 --- a/docs/07-Pro Features/02-image-gallery.md +++ b/docs/07-Pro Features/02-image-gallery.md @@ -13,7 +13,7 @@ The **Image Gallery** is a panel that appears at the bottom of the Live Preview. > The Image Gallery is available only for `` elements. -By default, the Image Gallery appears when you select an `` element. You can close it by clicking the Image Gallery button in the Tool Box or the close button in the gallery. To reopen it, click the Image Gallery button again. +By default, the Image Gallery appears when you select an `` element. You can close it by clicking the Change Image button in the Control Box or the close button in the gallery. To reopen it, click the Change Image button again. ![Image Gallery](./images/image-gallery.png "Image Gallery") diff --git a/docs/07-Pro Features/03-measurements.md b/docs/07-Pro Features/03-measurements.md index 4603a6bf..c80b04c7 100644 --- a/docs/07-Pro Features/03-measurements.md +++ b/docs/07-Pro Features/03-measurements.md @@ -20,7 +20,7 @@ To enable measurements, click the **mode selector dropdown** in the Live Preview ![Enable Show Measurements](./images/enable-show-measurements.png "Enable Show Measurements") -Alternatively, you can enable measurements from the **More Options** menu *(three-dots icon)* in the Tool Box. Select **Show Measurements** to toggle it on or off. +Alternatively, you can enable measurements from the **More Options** menu *(three-dots icon)* in the Control Box. Select **Show Measurements** to toggle it on or off. You can also change this setting by updating the `livePreviewShowMeasurements` preference in the preferences file. Set it to `true` or `false` (default). See [Editing Preferences](../editing-text#editing-preferences) to learn how to edit the preferences file. From 9023c8f42e19e5c2393c1de48ae119d59f25a941 Mon Sep 17 00:00:00 2001 From: Pluto Date: Fri, 17 Apr 2026 00:48:50 +0530 Subject: [PATCH 2/6] fix: control box not shown on source code selection --- docs/07-Pro Features/01-live-preview-edit.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/07-Pro Features/01-live-preview-edit.md b/docs/07-Pro Features/01-live-preview-edit.md index fb3863d4..20a225ea 100644 --- a/docs/07-Pro Features/01-live-preview-edit.md +++ b/docs/07-Pro Features/01-live-preview-edit.md @@ -30,7 +30,7 @@ Alternatively, you can switch to Edit Mode by updating the `livePreviewMode` set ## Control Box -When you click an element in the Live Preview (or select it through the source code), a **Control Box** appears near it. This floating panel shows you what the element is and gives you tools to edit it. +When you click an element in the Live Preview, a **Control Box** appears near it. This floating panel shows you what the element is and gives you tools to edit it. @@ -52,7 +52,7 @@ Clicking on the info section opens the [Element Properties](#element-properties) The **Select Parent** button *(up-arrow icon)* appears next to the info section. Clicking it selects the parent of the currently selected element. -*This button appears only when a valid parent exists (it is not shown when the parent is `body`, `html`, or a JavaScript-rendered element).* +> This button appears only when a valid parent exists. It is not shown when the parent is `body`, `html`, or a JavaScript-rendered element. ### Tools @@ -264,6 +264,6 @@ When an element has this class, the element behaves as if you're in Preview Mode If you want only to exclude the particular element and not its children, use the class `phcode-no-lp-edit-this`. -> Placing your cursor on the element in the source code will still select it in Live Preview and allow you to use edit features. +> Placing your cursor on the element in the source code will still highlight it in the Live Preview. To use edit features, click the element directly in the Live Preview. --- \ No newline at end of file From 31aab29eea8979307cca970a543e038f7d99a8d5 Mon Sep 17 00:00:00 2001 From: Pluto Date: Fri, 17 Apr 2026 00:59:09 +0530 Subject: [PATCH 3/6] feat: add docs for formatting toolbar --- docs/07-Pro Features/01-live-preview-edit.md | 29 +++++++++++++++----- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/docs/07-Pro Features/01-live-preview-edit.md b/docs/07-Pro Features/01-live-preview-edit.md index 20a225ea..9e136d4c 100644 --- a/docs/07-Pro Features/01-live-preview-edit.md +++ b/docs/07-Pro Features/01-live-preview-edit.md @@ -129,15 +129,30 @@ To start editing, **double-click** an element in the Live Preview or click the * Edit the text as needed, then press `Enter` to save or `Esc` to cancel. To insert a line break, press `Shift + Enter`. -> Text editing is available only for elements that can contain text. It is not supported for elements such as ``, `

`, `
`, `
`, etc.). + +### Picking an Element + +The panel shows a grid of commonly used HTML elements like Paragraph, Heading, Link, Image, Button, Div, List, Form, and many more. Each item shows the element name and its HTML tag. Click an item to insert it. + +Use the **search bar** at the top to filter elements by name or tag. If no matching element exists, you can type any valid HTML tag name and click **Create <tag>** to insert a custom element. + + + +After inserting an element, Phoenix Code automatically selects it in the Live Preview so you can continue editing it. + +--- + ## Inline Text Editing The **Inline Text Editing** feature lets you modify text content directly in the Live Preview, with all changes automatically synced to the source code. From 6bbac3f2448a0cff6c0c911d18bfc87cbc87705a Mon Sep 17 00:00:00 2001 From: Pluto Date: Fri, 17 Apr 2026 01:24:23 +0530 Subject: [PATCH 6/6] feat: updated edit hyperlink docs --- docs/07-Pro Features/01-live-preview-edit.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/docs/07-Pro Features/01-live-preview-edit.md b/docs/07-Pro Features/01-live-preview-edit.md index f326ce4d..75c348ed 100644 --- a/docs/07-Pro Features/01-live-preview-edit.md +++ b/docs/07-Pro Features/01-live-preview-edit.md @@ -252,14 +252,13 @@ To cancel a drag, press `Esc`. The **Edit Hyperlink** feature lets you modify the URL and behavior of anchor (``) elements directly in the Live Preview. -To edit a hyperlink, select an `` element and click the **Edit Hyperlink** button *(chain icon)* in the Control Box. An editing panel appears near the element. +To edit a hyperlink, select an `` element and click the **Edit Hyperlink** button *(chain icon)* in the [Control Box](#control-box). A panel appears near the element with the following options: -The input box includes: - **URL input**: Edit the link's destination (`href` attribute). Press `Enter` to save your changes or `Esc` to cancel. -- **Opens in new tab**: Check this option to make the link open in a new tab. Checking this option will add `target="_blank"` in your source code. -- **Open this link**: Clicking on this button opens the URL in your default browser. This option is available only in desktop apps. +- **Opens in new tab**: Toggle this option to make the link open in a new tab. This adds `target="_blank"` in your source code. +- **Open this link**: Opens the URL in your default browser. This option is available only in desktop apps. -![Edit Hyperlink](./images/edit-hyperlink.png "Edit Hyperlink") + ---