From 22abe744960e43c198fecda3ba3ff88e132dc61d Mon Sep 17 00:00:00 2001 From: adids1221 Date: Sun, 11 May 2025 17:26:31 +0300 Subject: [PATCH 1/3] Refactor UILivePreview component to support code format --- docuilib/src/components/UILivePreview.tsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/docuilib/src/components/UILivePreview.tsx b/docuilib/src/components/UILivePreview.tsx index 9d9736a5f9..702b2bcc50 100644 --- a/docuilib/src/components/UILivePreview.tsx +++ b/docuilib/src/components/UILivePreview.tsx @@ -15,18 +15,14 @@ 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 [rawCode, setRawCode] = useState(initialCode); + const {code: formattedCode} = useFormattedCode(rawCode, {printWidth: 100}); useEffect(() => { if (iframeLoaded) { - sendMessageToIframe(code); + sendMessageToIframe(formattedCode); } - }, [iframeLoaded, code]); + }, [iframeLoaded, formattedCode]); const sendMessageToIframe = code => { const message = {type: IFRAME_MESSAGE_TYPE, code}; @@ -34,7 +30,7 @@ export default function UILivePreview({code: initialCode, componentName = undefi }; if (!liveScopeSupport && !isComponentSupported(componentName)) { - return {code}; + return {formattedCode}; } return ( @@ -43,10 +39,10 @@ export default function UILivePreview({code: initialCode, componentName = undefi const iframeSource = `${window.location.origin}${siteConfig?.baseUrl}livePreview`; return ( - +
- +
From 7f0a287e9164d6efef211c84e5b5a89a6ad7b359 Mon Sep 17 00:00:00 2001 From: adids1221 Date: Mon, 12 May 2025 15:59:22 +0300 Subject: [PATCH 2/3] Refactor to use prettify button --- .../src/components/UILivePreview.module.scss | 26 +++++++++++------ docuilib/src/components/UILivePreview.tsx | 28 ++++++++++++++----- 2 files changed, 39 insertions(+), 15 deletions(-) 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 702b2bcc50..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,22 +16,26 @@ export default function UILivePreview({code: initialCode, componentName = undefi const [iframeLoaded, setIframeLoaded] = useState(false); const {siteConfig} = useDocusaurusContext(); const iframeRef = useRef(null); - const [rawCode, setRawCode] = useState(initialCode); - const {code: formattedCode} = useFormattedCode(rawCode, {printWidth: 100}); + const [code, setCode] = useState(initialCode); + const {code: formattedCode} = useFormattedCode(code, {printWidth: 100}); useEffect(() => { if (iframeLoaded) { - sendMessageToIframe(formattedCode); + sendMessageToIframe(code); } - }, [iframeLoaded, formattedCode]); + }, [iframeLoaded, code]); const sendMessageToIframe = code => { const message = {type: IFRAME_MESSAGE_TYPE, code}; iframeRef.current?.contentWindow.postMessage(message, '*'); }; + const handleFormat = () => { + setCode(formattedCode); + }; + if (!liveScopeSupport && !isComponentSupported(componentName)) { - return {formattedCode}; + return {code}; } return ( @@ -39,10 +44,19 @@ export default function UILivePreview({code: initialCode, componentName = undefi const iframeSource = `${window.location.origin}${siteConfig?.baseUrl}livePreview`; return ( - +
- +
+
+
From ab2a448bba4a8414e5e2460832b6f506f0f28ed0 Mon Sep 17 00:00:00 2001 From: adids1221 Date: Mon, 12 May 2025 18:54:24 +0300 Subject: [PATCH 3/3] bump docs version --- docuilib/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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",