Update Visual Editor Documentation

content/guides/2.content/8.visual-editor/0.index.md

@@ -3,11 +3,6 @@ title: Visual Editor
 description: The Directus visual editor module allows you to visually edit the content of your website directly in-place.
 ---
 
-::callout{icon="material-symbols:info"}
-**Beta**  
-The visual editor module is currently in beta and some functionality is subject to change.
-::
-
 <div style="padding:56.33% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1068823628?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Directus-Visual-Editor-Preview"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
 
 Making use of the visual editor requires some effort on the part of web developers through two separate but related aspects. These are the [Frontend Library](/guides/content/visual-editor/frontend-library), and the [Studio Module](/guides/content/visual-editor/studio-module) built into Directus.

content/guides/2.content/8.visual-editor/1.frontend-library.md

@@ -117,18 +117,20 @@ It is recommended to call the global `remove()` method on client-side navigation
 If you have CSP configured, be sure to make your site available for use inside an iFrame in Directus. If you’re unsure where your CSP is defined, check your web server configuration files, your site’s build configuration, or your hosting platform’s security settings.
 ::
 
-## Usage in Non-JS Environments
-
-Given this library is built as a Node package, environments that can’t take advantage of NPM will need to take a slightly different approach to including the functionality in their websites.
+::callout{icon="material-symbols:info"}
+**Usage with Directus Cloud and local development**  
+Connecting your local development environment to a Directus Cloud Starter or Professional instance must be done by exposing your localhost to the web through an SSL secured connection. There are multiple ways to achieve this:
 
-::callout{icon="material-symbols:info-outline"}
-The compiled code for the library can be found in [the git repository](https://github.com/directus/visual-editing/blob/main/dist/visual-editing.js). 
+- Using a tool like [Ngrok](https://content-machine.directus.app/admin/login), [serveo](https://serveo.net/), or [localtunnel](https://theboroer.github.io/localtunnel-www/)
+- Creating and using your own SSL certificate. In the case of Vite this can be done with an [SSL plugin](https://github.com/vitejs/vite-plugin-basic-ssl)
 ::
 
-This can then be included in your website like as follows:
+## Usage in Non-JS Environments
+
+Given this library is built as a Node package, environments that can’t take advantage of NPM will need to take a slightly different approach to including the functionality in their websites.
 
 ```js
-<script src="path-to/visual-editing.js" type="text/javascript"></script>
+<script src="https://unpkg.com/@directus/visual-editing" type="text/javascript"></script>
 ```
 
 ```js

content/guides/2.content/8.visual-editor/3.customization.md

@@ -28,6 +28,11 @@ The library ships with a number of built in CSS Selectors already applied to its
 .directus-visual-editing-rect-hover {
 	/* class that applies when the original element is hovered */
 }
+
+.directus-visual-editing-rect-parent-hover {
+	/* class that applies to the parent element when the original element is hovered */
+}
+
 .directus-visual-editing-rect-inner {
 	/* the element with the rectangle styles */
 }
@@ -54,6 +59,7 @@ The library also ships with a number of predefined CSS variables. These can be o
 	--directus-visual-editing--edit-btn--bg-color: #6644ff;
 	--directus-visual-editing--edit-btn--icon-bg-image: url('data:image/svg+xml,<svg>…</svg>');
 	--directus-visual-editing--edit-btn--icon-bg-size: 66.6%;
+	--directus-visual-editing--rect-hover--opacity: 0.333;
 }
 ```