Skip to content

Commit 07202db

Browse files
committed
feat: update quick preview doc
1 parent 631fbc7 commit 07202db

1 file changed

Lines changed: 7 additions & 3 deletions

File tree

docs/07-Pro Features/02-edit-mode-live-preview.md

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import VideoPlayer from '@site/src/components/Video/player';
2020

2121
## Enabling Edit Mode
2222

23-
To switch to Edit Mode, click the **mode selector dropdown** in the Live Preview toolbar and select **Edit Mode**.
23+
To switch to Edit Mode, click the **chevron icon** next to the **Preview Mode** button *(pen icon)* in the Live Preview toolbar, then select **Edit Mode**.
2424

2525
![Live Preview Edit mode](./images/lp-mode.png "Live Preview edit mode")
2626

@@ -104,7 +104,7 @@ The Hover Box helps you quickly identify elements as you move your cursor over t
104104

105105
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.
106106

107-
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.
107+
To toggle this setting, click the **chevron icon** next to the **Preview Mode** button *(pen icon)* in the Live Preview toolbar and unselect **Inspect Element on Hover**. By default, this option remains checked.
108108

109109
<!-- Add an image here showing the Inspect Element on Hover option in the mode selector dropdown -->
110110

@@ -303,7 +303,11 @@ These shortcuts work for all Edit Mode operations, including text edits, element
303303

304304
## Quick Preview Toggle
305305

306-
A **Quick Preview Toggle** button is available at the top center of the Live Preview. It lets you quickly switch to Preview Mode and back to the previously selected mode (Highlight Mode or Edit Mode). This is especially useful when working with a popped-out Live Preview window. You can also use the `F8` keyboard shortcut to toggle Preview Mode.
306+
:::note
307+
The Quick Preview Toggle button is available only in the popped-out Live Preview window.
308+
:::
309+
310+
A **Quick Preview Toggle** button is available at the top center of the popped-out Live Preview window. It lets you quickly switch to Preview Mode and back to the previously selected mode (Highlight Mode or Edit Mode). You can also use the `F8` keyboard shortcut to toggle Preview Mode.
307311

308312
<VideoPlayer
309313
src="https://docs-images.phcode.dev/videos/live-preview-edit/quick-preview-toggle.mp4"

0 commit comments

Comments
 (0)