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

@@ -121,14 +121,8 @@ If you have CSP configured, be sure to make your site available for use inside a
 
 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-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). 
-::
-
-This can then be included in your website like as follows:
-
 ```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;
 }
 ```