chore(docs): upgrade react-live to latest version (#6184)

Author: dindjarinjs

docs/package.json

@@ -41,7 +41,7 @@
     "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "18.2.0",
     "react-icons": "^4.3.1",
-    "react-live": "^2.4.1",
+    "react-live": "^4.1.8",
     "rehype": "^11.0.0",
     "rehype-autolink-headings": "^5.1.0",
     "rehype-slug": "^4.0.1",

docs/src/components/home/HomeEditor.tsx

@@ -1,11 +1,5 @@
 import * as React from 'react';
-import {
-  LiveProvider,
-  LiveEditor,
-  LivePreview,
-  LiveContext,
-  ContextProps,
-} from 'react-live';
+import { LiveProvider, LiveEditor, LivePreview, LiveContext } from 'react-live';
 // only import the primitives to prevent importing sideEffects
 import { primitives as AUI } from '@aws-amplify/ui-react';
 import { trackClick } from '@/utils/track';
@@ -47,7 +41,7 @@ const code = `<Card variation="elevated">
 </Card>`;
 
 const Error = () => {
-  const context: ContextProps = React.useContext(LiveContext);
+  const context = React.useContext(LiveContext);
   const { error } = context;
   if (error) {
     return <Alert variation="error">{error}</Alert>;
@@ -58,6 +52,7 @@ const Error = () => {
 
 const HomeEditor = () => {
   const [edited, setEdited] = React.useState(false);
+
   return (
     <LiveProvider
       scope={{ ...AUI }}
@@ -73,22 +68,14 @@ const HomeEditor = () => {
         <View
           flex="1"
           className="docs-home-editor__code-panel with-lines scrollable"
+          onKeyUp={() => {
+            if (!edited) {
+              trackClick('HomeCodeEdit');
+              setEdited(true);
+            }
+          }}
         >
-          <LiveEditor
-            onKeyDown={(e) => {
-              // This makes sure the editor is not a focus trap, allowing customers to 'tab' out of the editor
-              if (e.keyCode === 9) {
-                // tab key
-                e.preventDefault();
-                e.currentTarget.blur();
-                return;
-              }
-              if (!edited) {
-                trackClick('HomeCodeEdit');
-                setEdited(true);
-              }
-            }}
-          />
+          <LiveEditor tabMode="focus" />
         </View>
         <View
           aria-label="Live preview results"

docs/src/styles/docs/code.scss

@@ -3,8 +3,15 @@
  * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
  */
 
-.docs-home code.prism-code {
-  font-size: inherit;
+.docs-home {
+  code.prism-code {
+    font-size: inherit;
+  }
+
+  pre.prism-code {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 code[class*='language-'],