Docs - fix playground preview divider (#3728)

* Docs - fix playground preview divider

* adding scrollbar-width

* fix   scrollbar-width: none;

* revert prettify button deletion

* comment out buggy button code

* comment out code

Author: Inbal-Tish

docuilib/src/components/UILivePreview.module.scss

@@ -28,12 +28,12 @@ $editor-height: 700px;
   max-width: calc(100% - ($preview-width + $preview-margin));
   border-radius: 8px;
   overflow-y: scroll;
+  scrollbar-width: none;
 
   pre {
     min-height: 100%;
     padding: 20px !important;
     background-color: #1d1e21 !important;
-    border-right: 1px solid #d2d6d8;
   }
 }
 
@@ -59,6 +59,11 @@ $editor-height: 700px;
   }
 }
 
+.previewContainer {
+  border-left: 1px solid #d2d6d8;
+  display: flex;
+}
+
 .preview {
   position: relative;
   width: $preview-width;

docuilib/src/components/UILivePreview.tsx

@@ -1,10 +1,10 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {LiveProvider, LiveEditor, LiveError} from 'react-live';
 import {themes} from 'prism-react-renderer';
+// import {Button} from 'react-native-ui-lib/core';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import CodeBlock from '@theme/CodeBlock';
-import {Button} from 'react-native-ui-lib/core';
 import ReactLiveScope from '../theme/ReactLiveScope';
 import {isComponentSupported} from '../utils/componentUtils';
 import useFormattedCode from '../hooks/useFormattedCode';
@@ -16,8 +16,14 @@ export default function UILivePreview({code: initialCode, componentName = undefi
   const [iframeLoaded, setIframeLoaded] = useState(false);
   const {siteConfig} = useDocusaurusContext();
   const iframeRef = useRef(null);
-  const [code, setCode] = useState(initialCode);
-  const {code: formattedCode} = useFormattedCode(code, {printWidth: 100});
+  const {code: formattedCode} = useFormattedCode(initialCode, {printWidth: 100});
+  const [code, setCode] = useState(formattedCode);
+  // const [code, setCode] = useState(initialCode);
+  // const {code: formattedCode} = useFormattedCode(code, {printWidth: 100});
+
+  useEffect(() => {
+    setCode(formattedCode);
+  }, [formattedCode]);
 
   useEffect(() => {
     if (iframeLoaded) {
@@ -30,9 +36,9 @@ export default function UILivePreview({code: initialCode, componentName = undefi
     iframeRef.current?.contentWindow.postMessage(message, '*');
   };
 
-  const handleFormat = () => {
-    setCode(formattedCode);
-  };
+  // const handleFormat = () => {
+  //   setCode(formattedCode);
+  // };
 
   if (!liveScopeSupport && !isComponentSupported(componentName)) {
     return <CodeBlock language="jsx">{code}</CodeBlock>;
@@ -47,28 +53,30 @@ export default function UILivePreview({code: initialCode, componentName = undefi
           <LiveProvider code={code} scope={ReactLiveScope} theme={themes.oceanicNext}>
             <div className={styles.container}>
               <div className={styles.codeContainer}>
-                <div className={styles.codeHeader}>
+                {/* <div className={styles.codeHeader}>
                   <Button
                     label="Prettify"
                     size={Button.sizes.small}
                     onPress={handleFormat}
                     backgroundColor="#2d2d2d"
                     borderRadius={4}
                   />
-                </div>
+                </div> */}
                 <LiveEditor onChange={setCode} className={styles.liveEditor}/>
                 <div className={styles.errorContainer}>
                   <LiveError/>
                 </div>
               </div>
-              <div className={styles.preview}>
-                <iframe
-                  ref={iframeRef}
-                  className={styles.iframe}
-                  src={iframeSource}
-                  title="Simulator"
-                  onLoad={() => setIframeLoaded(true)}
-                />
+              <div className={styles.previewContainer}>
+                <div className={styles.preview}>
+                  <iframe
+                    ref={iframeRef}
+                    className={styles.iframe}
+                    src={iframeSource}
+                    title="Simulator"
+                    onLoad={() => setIframeLoaded(true)}
+                  />
+                </div>
               </div>
             </div>
           </LiveProvider>