You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/07-Pro Features/01-live-preview-edit.md
+36Lines changed: 36 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -44,4 +44,40 @@ The Info Box normally has a *blue* background for standard HTML elements (for ex
44
44
45
45
---
46
46
47
+
## Tool Box
47
48
49
+
The **Tool Box** displays a set of tools you can use to modify elements in the Live Preview. It is normally shown at the top-right of the Live Preview, but Phoenix Code may adjust its position if there is not enough space, ensuring it remains visible.
50
+
51
+
> The Tool Box appears only when you click an element or select it through the source code.
52
+
53
+
<!-- TODO: add image showing Tool Box -->
54
+
55
+
### Tool Box Options
56
+
57
+
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.
58
+
59
+
-**Select Parent***(up-arrow icon)*: Selects the parent of the currently selected element.
60
+
*This button appears only when a valid parent exists (it is not shown when the parent is `body`, `html`, or a JavaScript-rendered element).*
61
+
62
+
-**Edit Text***(pencil 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. Press `Enter` to save the edited text or `Esc` to cancel.
63
+
*This button appears only for elements that can contain text (it is not available for `<img>`, `<video>`, `<br>`, etc.).*
64
+
> You can also edit text by double-clicking the element in the Live Preview.
65
+
66
+
-**Edit Hyperlink***(link icon)*: Opens a floating input box that lets you edit the element’s `href` attribute.
67
+
*This button appears only for `<a>` elements.*
68
+
69
+
-**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.
70
+
*This button appears only for `<img>` elements.* See the **Image Gallery** section for more details.
71
+
72
+
-**Duplicate***(copy icon)*: Copies the selected element and places it below.
73
+
*This option is available for all elements.*
74
+
75
+
-**Delete***(trash icon)*: Deletes the selected element.
76
+
*This option is available for all elements.*
77
+
78
+
-**More Options***(three-dots icon)*: Opens a menu with additional actions such as `Cut`, `Copy`, `Paste`, and `Show Measurements`.
79
+
*This option is available for all elements.* See the **Tool Box More Options** section for more details.
80
+
81
+
> The Tool Box is never shown for non-editable elements that are dynamically created by JavaScript.
Copy file name to clipboardExpand all lines: docs/07-Pro Features/01-live-preview-edit.md~
+37-1Lines changed: 37 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -24,7 +24,7 @@ Alternatively, you can switch to Edit Mode by updating the `livePreviewMode` set
24
24
25
25
## Info Box
26
26
27
-
The **Info Box** displays information about an element. It is normally shown at the top-left of the element, but if there is not enough space, Phoenix Code may display it on another side where sufficient space is available. Phoenix Code always tries to keep the Info Box visible near the element.
27
+
The **Info Box** displays information about an element. It is normally shown at the top-left of the element, but if there is not enough space, Phoenix Code may display it on another side where sufficient space is available. Phoenix Code attempts to position the Info Box as close to the element as possible while keeping it visible.
28
28
29
29
> By default, the Info Box appears when you hover over an element in the Live Preview, but this behavior can be changed. See the **Edit Highlights on Hover** section for more details.
30
30
@@ -44,4 +44,40 @@ The Info Box normally has a *blue* background for standard HTML elements (for ex
44
44
45
45
---
46
46
47
+
## Tool Box
47
48
49
+
The **Tool Box** displays a set of tools you can use to modify elements in the Live Preview. It is normally shown at the top-right of the Live Preview, but Phoenix Code may adjust its position if there is not enough space, ensuring it remains visible.
50
+
51
+
> The Tool Box appears only when you click an element or select it through the source code.
52
+
53
+
<!-- TODO: add image showing Tool Box -->
54
+
55
+
### Tool Box Options
56
+
57
+
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.
58
+
59
+
- **Select Parent** *(up-arrow icon)*: Selects the parent of the currently selected element.
60
+
*This button appears only when a valid parent exists (it is not shown when the parent is `body`, `html`, or a JavaScript-rendered element).*
61
+
62
+
- **Edit Text** *(pencil 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. Press `Enter` to save the edited text or `Esc` to cancel.
63
+
*This button appears only for elements that can contain text (it is not available for `<img>`, `<video>`, `<br>`, etc.).*
64
+
> You can also edit text by double-clicking the element in the Live Preview.
65
+
66
+
- **Edit Hyperlink** *(link icon)*: Opens a floating input box that lets you edit the element’s `href` attribute.
67
+
*This button appears only for `<a>` elements.*
68
+
69
+
- **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.
70
+
*This button appears only for `<img>` elements.* See the **Image Gallery** section for more details.
71
+
72
+
- **Duplicate** *(copy icon)*: Copies the selected element and places it below.
73
+
*This option is available for all elements.*
74
+
75
+
- **Delete** *(trash icon)*: Deletes the selected element.
76
+
*This option is available for all elements.*
77
+
78
+
- **More Options** *(three-dots icon)*: Opens a menu with additional actions such as `Cut`, `Copy`, `Paste`, and `Show Measurements`.
79
+
*This option is available for all elements.* See the **Tool Box More Options** section for more details.
80
+
81
+
> The Tool Box is never shown for non-editable elements that are dynamically created by JavaScript.
0 commit comments