TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add preview panel button

Browse Source
This commit is contained in:
Akhileshrangani4
2024-10-12 17:55:49 -04:00
parent 6ea86afc70
commit f863f2f763
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/components/editor/index.tsx
View File

@ -145,7 +145,7 @@ export default function CodeEditor({
const generateRef = useRef<HTMLDivElement>(null)
const suggestionRef = useRef<HTMLDivElement>(null)
const generateWidgetRef = useRef<HTMLDivElement>(null)
const previewPanelRef = useRef<ImperativePanelHandle>(null)
const { previewPanelRef } = usePreview();
const editorPanelRef = useRef<ImperativePanelHandle>(null)
const previewWindowRef = useRef<{ refreshIframe: () => void }>(null)
@ -827,6 +827,16 @@ export default function CodeEditor({
})
}
const togglePreviewPanel = () => {
if (isPreviewCollapsed) {
previewPanelRef.current?.expand();
setIsPreviewCollapsed(false);
} else {
previewPanelRef.current?.collapse();
setIsPreviewCollapsed(true);
}
};
// On disabled access for shared users, show un-interactable loading placeholder + info modal
if (disableAccess.isDisabled)
return (
@ -1061,7 +1071,7 @@ export default function CodeEditor({
<ResizablePanel defaultSize={40}>
<ResizablePanelGroup direction="vertical">
<ResizablePanel
ref={usePreview().previewPanelRef}
ref={previewPanelRef}
defaultSize={4}
collapsedSize={4}
minSize={25}
@ -1071,10 +1081,7 @@ export default function CodeEditor({
onExpand={() => setIsPreviewCollapsed(false)}
>
<PreviewWindow
open={() => {
usePreview().previewPanelRef.current?.expand()
setIsPreviewCollapsed(false)
}}
open={togglePreviewPanel}
collapsed={isPreviewCollapsed}
src={previewURL}
ref={previewWindowRef}
@ -1116,4 +1123,4 @@ const defaultCompilerOptions: monaco.languages.typescript.CompilerOptions = {
module: monaco.languages.typescript.ModuleKind.ESNext,
moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
target: monaco.languages.typescript.ScriptTarget.ESNext,
}
}