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
+11-8Lines changed: 11 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -58,23 +58,26 @@ The Tool Box displays different options depending on the selected element type.
58
58
-**Select Parent***(up-arrow icon)*: Selects the parent of the currently selected element.
59
59
*This button appears only when a valid parent exists (it is not shown when the parent is `body`, `html`, or a JavaScript-rendered element).*
60
60
61
-
-**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. See the [Inline Text Editing](#inline-text-editing) section for more details.
61
+
-**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.
62
+
See the [Inline Text Editing](#inline-text-editing) section for more details.
62
63
*This button appears only for elements that can contain text (it is not available for `<img>`, `<video>`, `<br>`, etc.).*
63
64
64
-
-**Edit Hyperlink***(link icon)*: Opens a floating input box that lets you edit the element’s `href` attribute.
65
+
-**Edit Hyperlink***(link icon)*: Opens a floating input box that lets you edit the element's `href` attribute.
65
66
*This button appears only for `<a>` elements.*
66
67
67
-
-**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.
68
-
*This button appears only for `<img>` elements.* See [Image Gallery](./02-image-gallery.md) for more details.
68
+
-**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.
69
+
See [Image Gallery](./02-image-gallery.md) for more details.
70
+
*This button appears only for `<img>` elements.*
69
71
70
-
-**Duplicate***(copy icon)*: Copies the selected element and places it below. You can also duplicate elements using `Ctrl/Cmd + D` after clicking an element.
72
+
-**Duplicate***(copy icon)*: Copies the selected element and places it below. You can also duplicate elements using `Ctrl/Cmd + D` after clicking an element.
71
73
*This option is available for all elements.*
72
74
73
-
-**Delete***(trash icon)*: Deletes the selected element. You can also delete elements using the `Delete` key after clicking an element.
75
+
-**Delete***(trash icon)*: Deletes the selected element. You can also delete elements using the `Delete` key after clicking an element.
74
76
*This option is available for all elements.*
75
77
76
-
-**More Options***(three-dots icon)*: Opens a menu with additional actions.
77
-
*This option is available for all elements.* See [Cut, Copy, and Paste](#cut-copy-and-paste) and [Measurements](./03-measurements.md) for more details.
78
+
-**More Options***(three-dots icon)*: Opens a menu with additional actions.
79
+
See [Cut, Copy, and Paste](#cut-copy-and-paste) and [Measurements](./03-measurements.md) for more details.
80
+
*This option is available for all elements.*
78
81
79
82
> The Tool Box is never shown for non-editable elements that are dynamically created by JavaScript.
0 commit comments