diff --git a/docuilib/package.json b/docuilib/package.json
index ccfb3f0e02..10b1f5e7ad 100644
--- a/docuilib/package.json
+++ b/docuilib/package.json
@@ -1,6 +1,6 @@
{
"name": "uilib-docs",
- "version": "3.27.0",
+ "version": "3.28.0",
"main": "./src/index.ts",
"scripts": {
"docusaurus": "docusaurus",
diff --git a/docuilib/src/components/UILivePreview.module.scss b/docuilib/src/components/UILivePreview.module.scss
index 23ff011d46..f1577e7dbd 100644
--- a/docuilib/src/components/UILivePreview.module.scss
+++ b/docuilib/src/components/UILivePreview.module.scss
@@ -4,16 +4,16 @@ $editor-height: 700px;
.container {
display: flex;
- background-color: #1D1E21;
+ background-color: #1d1e21;
border-radius: 8px;
- padding: 50px
+ padding: 50px;
}
.liveEditor {
height: $editor-height;
span {
- font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
font-size: 14px;
font-weight: 600;
line-height: 24px;
@@ -32,11 +32,21 @@ $editor-height: 700px;
pre {
min-height: 100%;
padding: 20px !important;
- background-color: #1D1E21 !important;
- border-right: 1px solid #D2D6D8;
+ background-color: #1d1e21 !important;
+ border-right: 1px solid #d2d6d8;
}
}
+.codeHeader {
+ position: sticky;
+ top: 5px;
+ right: 16px;
+ z-index: 1;
+ margin-right: 24px;
+ display: flex;
+ justify-content: flex-end;
+}
+
.errorContainer {
position: absolute;
bottom: 0;
@@ -44,7 +54,7 @@ $editor-height: 700px;
right: 0;
pre {
- background-color: rgba(255, 255, 255, 0.80) !important;
+ background-color: rgba(255, 255, 255, 0.8) !important;
margin: 10px;
}
}
@@ -54,7 +64,7 @@ $editor-height: 700px;
width: $preview-width;
margin-left: $preview-margin;
border-radius: 36px;
- border: 10px solid rgba(255, 255, 255, 0.20);
+ border: 10px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 0 15px rgba(110, 120, 129, 0.05);
overflow: hidden;
}
@@ -68,4 +78,4 @@ $editor-height: 700px;
border: 0;
padding: 10;
background-color: #fff;
-}
\ No newline at end of file
+}
diff --git a/docuilib/src/components/UILivePreview.tsx b/docuilib/src/components/UILivePreview.tsx
index 9d9736a5f9..e4022efa38 100644
--- a/docuilib/src/components/UILivePreview.tsx
+++ b/docuilib/src/components/UILivePreview.tsx
@@ -4,6 +4,7 @@ import {themes} from 'prism-react-renderer';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import BrowserOnly from '@docusaurus/BrowserOnly';
import CodeBlock from '@theme/CodeBlock';
+import Button from 'react-native-ui-lib/Button';
import ReactLiveScope from '../theme/ReactLiveScope';
import {isComponentSupported} from '../utils/componentUtils';
import useFormattedCode from '../hooks/useFormattedCode';
@@ -15,12 +16,8 @@ export default function UILivePreview({code: initialCode, componentName = undefi
const [iframeLoaded, setIframeLoaded] = useState(false);
const {siteConfig} = useDocusaurusContext();
const iframeRef = useRef(null);
- const {code: formattedCode} = useFormattedCode(initialCode, {printWidth: 100});
- const [code, setCode] = useState(formattedCode);
-
- useEffect(() => {
- setCode(formattedCode);
- }, [formattedCode]);
+ const [code, setCode] = useState(initialCode);
+ const {code: formattedCode} = useFormattedCode(code, {printWidth: 100});
useEffect(() => {
if (iframeLoaded) {
@@ -33,6 +30,10 @@ export default function UILivePreview({code: initialCode, componentName = undefi
iframeRef.current?.contentWindow.postMessage(message, '*');
};
+ const handleFormat = () => {
+ setCode(formattedCode);
+ };
+
if (!liveScopeSupport && !isComponentSupported(componentName)) {
return {code};
}
@@ -46,6 +47,15 @@ export default function UILivePreview({code: initialCode, componentName = undefi