Live Preview Edit docs

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.
 
 <VideoPlayer
@@ -28,105 +28,183 @@ Alternatively, you can switch to Edit Mode by updating the `livePreviewMode` set
 
 ---
 
-## Info Box
+## Control Box
 
-The **Info Box** displays information about an element.
-> 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, 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")
+<!-- Add an image here showing the Control Box with the info section and tools section visible -->
 
-The Info Box displays:
-- **Tag name and dimensions**: The element type (for example, `div`, `p`, `img`) and its size in pixels (width × height)
-- **ID**: The element’s ID attribute (if present), shown with a `#` prefix
-- **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 (`<a>`) elements
+> The Control Box is shown only for editable elements. It is not shown for non-editable elements that are dynamically created by JavaScript.
 
-#### Visual Indicators
+### Element Info
 
-The Info Box normally has a *blue* background for standard HTML elements (for example, `<div>`, `<p>`, `<img>`). For dynamically created (JavaScript-rendered) elements, it appears with a *gray* background, indicating that these elements cannot be edited.
+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
 
-![Info Box non-editable](./images/info-box-gray.png "Info Box non editable")
+<!-- Add an image here showing the info section of the Control Box with tag name, ID, dimensions, and classes -->
 
----
+Clicking on the info section opens the [Element Properties](#edit-element-properties) editor, where you can edit the element’s tag name, classes, and ID.
 
-## Tool Box
+### Select Parent
 
-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.
+The **Select Parent** button *(up-arrow icon)* appears next to the info section. Clicking it selects the parent of the currently selected element.
 
-![Tool Box](./images/tool-box.png "Tool Box")
+> 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 Options
+### Tools
 
-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.
+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.
 
-- **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).*
+<!-- Add an image here showing the tools section of the Control Box -->
 
-- **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 `<img>`, `<video>`, `<br>`, etc.).*  
-  See the [Inline Text Editing](#inline-text-editing) section for more details.  
+- **Insert Element** *(plus icon)*: Opens a panel where you can insert a new HTML element before, after, or inside the selected element.  
+  *This option is available for all elements.*  
+  See the [Insert Element](#insert-element) section for more details.
 
-- **Edit Hyperlink** *(link icon)*: Opens a floating input box that lets you edit the element's `href` attribute.  
+- **Edit Hyperlink** *(chain icon)*: Opens a panel that lets you edit the element’s `href` attribute.  
   *This button appears only for `<a>` 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 `<img>` 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 `<img>`, `<video>`, `<br>`, etc.).*  
+  See the [Inline Text Editing](#inline-text-editing) section for more details.
 
 - **Duplicate** *(copy icon)*: Copies the selected element and places it below. You can also duplicate elements using `Ctrl/Cmd + D` after clicking an element.  
   *This option is available for all elements.*
 
 - **Delete** *(trash icon)*: Deletes the selected element. You can also delete elements using the `Delete` key after clicking an element.  
   *This option is available for all elements.*
 
-- **More Options** *(three-dots icon)*: Opens a menu with additional actions. You can also open this menu by right-clicking anywhere in the live preview, but only in Edit Mode.  
+- **More Options** *(three-dots icon)*: Opens a menu with additional actions. You can also open this menu by right-clicking anywhere in the Live Preview, but only in Edit Mode.  
   *This option is available for all elements.*  
-  See [Cut, Copy, and Paste](#cut-copy-and-paste) for more details. 
+  See [Cut, Copy, and Paste](#cut-copy-and-paste) for more details.
 
-> The Tool Box is never shown for non-editable elements that are dynamically created by JavaScript.
+---
+
+## Hover Box
+
+The **Hover Box** is a small tooltip that appears when you hover over an element in Edit Mode. It shows an icon and a label that describe the element type (for example, “Image”, “Button”, “Container”, “Paragraph”).
+
+<!-- Add an image here showing the Hover Box tooltip on an element -->
+
+The Hover Box helps you quickly identify elements as you move your cursor over the page, without needing to click on them.
+
+> The Hover Box uses a different color for editable and non-editable elements. Standard HTML elements appear in blue, while dynamically created (JavaScript-rendered) elements appear in gray.
 
 ---
 
 ## Inspect Element on Hover
 
-By default, in Edit Mode, hovering over elements in the Live Preview highlights them and displays the Info Box. You can change this behavior to show highlights only when you click elements instead.
+By default, in Edit Mode, hovering over elements in the Live Preview highlights them and displays the [Hover Box](#hover-box). You can change this behavior to show highlights only when you click elements instead.
 
 To toggle this setting, click the **mode selector dropdown** in the Live Preview toolbar and unselect **Inspect Element on Hover**. By default, this option remains checked.
 
-![Inspect Element on Hover](./images/inspect-element-hover.png "Inspect Element on Hover")
+<!-- Add an image here showing the Inspect Element on Hover option in the mode selector dropdown -->
 
 When **Inspect Element on Hover** is checked (default):
-- Hovering over elements shows highlights and the Info Box
-- Clicking an element selects it and displays the Tool Box along with the Info Box
+- Hovering over elements shows highlights and the Hover Box
+- Clicking an element selects it and displays the Control Box
 
 When **Inspect Element on Hover** is unchecked:
 - Hovering over elements has no effect
-- Clicking an element shows highlights, the Info Box, and the Tool Box
+- Clicking an element shows highlights and the Control Box
 
-Alternatively, you can change this setting by updating the `livePreviewElementHighlights` preference in the preferences file. Set it to `"hover"` (default) or `"click"`.  
+Alternatively, you can change this setting by updating the `livePreviewInspectElement` preference in the preferences file. Set it to `”hover”` (default) or `”click”`.  
 See [Editing Preferences](../editing-text#editing-preferences) to learn how to edit the preferences file.
 
 ---
 
+## Edit Element Properties
+
+The **Element Properties** panel lets you edit an element's tag name, ID, classes, and other HTML attributes directly from the Live Preview. All changes are synced to your source code in real-time, and code hints appear as you type to help you pick the right values.
+
+To open the panel, click on the **info section** (the left side showing the tag name, ID, and dimensions) of the [Control Box](#control-box).
+
+<!-- Add an image here showing the Element Properties panel with the tag, ID, classes, and attributes sections -->
+
+The panel has four sections:
+
+- **Tag**: Change the element type (for example, turn a `div` into a `section`). You can type directly or click the **dropdown arrow** to browse a list of common HTML tags.
+- **ID**: Change or remove the element's ID.
+- **Classes**: Existing classes are shown as chips with a **×** button to remove them. Click **+** to add new classes. You can type multiple class names separated by spaces.
+- **Attributes**: All other HTML attributes are shown as editable name-value pairs. Click **+** to add a new attribute, or **×** to remove one.
+
+<!-- Add an image here showing the classes section with a few class chips and the add class input -->
+
+To undo all changes made in the panel, click the **Reset** button in the panel header. This reverts the element to the state it was in when you first opened the panel.
+
+---
+
+## Insert Element
+
+The **Insert Element** panel lets you add new HTML elements to your page directly from the Live Preview.
+
+To open the panel, click the **Insert Element** button *(plus icon)* in the [Control Box](#control-box).
+
+<!-- Add an image here showing the Insert Element panel with the position bar, search, and element grid -->
+
+### Choosing a Position
+
+At the top of the panel, four position buttons control where the new element will be placed relative to the selected element:
+
+- **Before**: Inserts the new element immediately before the selected element
+- **After** (selected by default): Inserts the new element immediately after the selected element
+- **Inside**: Inserts the new element as the last child of the selected element
+- **Wrap**: Wraps the selected element inside the new element
+
+> The **Inside** option is disabled for void elements (like `<img>` or `<br>`) since they cannot have children. The **Wrap** option only shows container elements (like `<div>`, `<section>`, `<form>`, 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 &lt;tag&gt;** to insert a custom element.
+
+<!-- Add an image here showing the search bar with results and the "Create" custom element option -->
+
+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.
 
-To start editing, **double-click** an element in the Live Preview or click the **Edit Text** button *(pen icon)* in the Tool Box.  
+To start editing, **double-click** an element in the Live Preview or click the **Edit Text** button *(pen icon)* in the Control Box.  
 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 `<img>`, `<video>`, `<br>`, and similar non-text elements.  
+> Text editing is available only for elements that can contain text. It is not supported for elements such as `<img>`, `<video>`, `<br>`, and similar non-text elements.
+
+### Formatting Toolbar
+
+When you start editing text, a **Formatting Toolbar** appears near the element. It gives you quick access to common text formatting options.
+
+<!-- Add an image here showing the Formatting Toolbar with the B, I, U buttons and the more button -->
+
+Select the text you want to format and click a formatting button, or use the keyboard shortcut. If no text is selected, the formatting is applied to the entire element. Clicking a format that is already applied removes it.
+
+The toolbar shows three primary formatting buttons:
+- **Bold** (`Ctrl/Cmd + B`): `<b>` tag
+- **Italic** (`Ctrl/Cmd + I`): `<i>` tag
+- **Underline** (`Ctrl/Cmd + U`): `<u>` tag
+
+#### More Formatting Options
 
-### Text Formatting
+Click the **More** button *(three-dots icon)* on the right side of the toolbar to see additional formatting options:
+- **Strikethrough**: `<s>` tag
+- **Subscript**: `<sub>` tag
+- **Superscript**: `<sup>` tag
+- **Code**: `<code>` tag
 
-You can apply formatting to selected text using standard keyboard shortcuts:
-- **Ctrl/Cmd + B**: Bold; wraps selected text in `<b>` tags
-- **Ctrl/Cmd + I**: Italic; wraps selected text in `<i>` tags
-- **Ctrl/Cmd + U**: Underline; wraps selected text in `<u>` tags
-> If the text is already formatted, the formatting will be removed.
+<!-- Add an image here showing the More formatting dropdown with Strikethrough, Subscript, Superscript, and Code options -->
 
 <VideoPlayer
   src="https://docs-images.phcode.dev/videos/live-preview-edit/inline-text-editing.mp4"
@@ -174,14 +252,13 @@ To cancel a drag, press `Esc`.
 
 The **Edit Hyperlink** feature lets you modify the URL and behavior of anchor (`<a>`) elements directly in the Live Preview.
 
-To edit a hyperlink, select an `<a>` 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 `<a>` 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")
+<!-- Add an image here showing the Edit Hyperlink panel with URL input, new tab toggle, and open link button -->
 
 ---
 
@@ -195,7 +272,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 +284,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.
 
@@ -253,6 +330,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.
 
 ---

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 `<img>` elements.
 
-By default, the Image Gallery appears when you select an `<img>` 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 `<img>` 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")