chore(docs): wrap Repl in client only

docs/src/examples/edges/connection-line.md

@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Custom Connection Line
 
 If the default connection lines aren't to your liking, or you want to expand on the existing 
@@ -11,9 +6,5 @@ functionality you can use your own custom connection line.
 Simply pass a component in the designated template slot, and you're good to go.
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="connectionline"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="connectionline"></Repl>
 </div>

docs/src/examples/edges/index.md

@@ -1,17 +1,8 @@
----
-layout: page
-
----
-
 # Edges
 
 Vue Flow comes with four pre-defined edge types - bezier-, step-, smoothstep and straight-edges.
 In addition to the built-in edge types you can create your own custom edges. You can find more information on edge types [here](/guide/edge.html#default-edge-types).
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="edges"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="edges"></Repl>
 </div>

docs/src/examples/edges/updatable-edge.md

@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Updatable Edge
 
 Existing edges can be updated, meaning their source / target position can be changed interactively.

docs/src/examples/edges/validation.md

@@ -1,13 +1,9 @@
----
-layout: page
-
----
-
 # Connection Validation
 
 Connections can be validated before edges are created and nodes get connected. 
 
 ## Using a handle in a custom node
+
 ```vue
 <div>
   [ ... ]
@@ -17,6 +13,7 @@ Connections can be validated before edges are created and nodes get connected.
 ```
 
 ## Passing as node option
+
 ```ts
 const nodes = [
   {
@@ -31,9 +28,5 @@ const nodes = [
 ```
 
 <div class="mt-6">
-  <ClientOnly>
-    <Suspense>
-      <Repl example="validation"></Repl>
-    </Suspense>
-  </ClientOnly>
+  <Repl example="validation"></Repl>
 </div>