Make the the editor playground resizable

Author: robertoraggi

package-lock.json

@@ -1 +1,2 @@
 src/lib/utils.ts
+src/components/*

packages/cxx-playground/.prettierignore

@@ -15,6 +15,7 @@
     "lucide-react": "^0.525.0",
     "react": "latest",
     "react-dom": "latest",
+    "react-resizable-panels": "^3.0.3",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {

packages/cxx-playground/package.json

@@ -26,7 +26,11 @@ import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
 import ModelProvider from "./editor-model-provider";
 import EditorProvider from "./editor-provider";
 import AbstractSyntaxTree from "./abstract-syntax-tree";
-
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
 import * as monaco from "monaco-editor";
 
 window.MonacoEnvironment = {
@@ -50,14 +54,24 @@ function App() {
   const model = monaco.editor.createModel(DEFAULT_VALUE, "cpp");
 
   return (
-    <div className="w-svw h-svh flex">
+    <div className="w-svw h-svh">
       <QueryClientProvider client={queryClient}>
         <CxxProvider fallback={<div />}>
           <ModelProvider model={model}>
             <EditorProvider model={model}>
               <ASTProvider model={model} interval={interval}>
-                <Editor />
-                <AbstractSyntaxTree />
+                <ResizablePanelGroup
+                  direction="horizontal"
+                  className="w-full h-full"
+                >
+                  <ResizablePanel className="min-w-1/4">
+                    <Editor />
+                  </ResizablePanel>
+                  <ResizableHandle />
+                  <ResizablePanel className="min-w-1/4" defaultSize={35}>
+                    <AbstractSyntaxTree />
+                  </ResizablePanel>
+                </ResizablePanelGroup>
               </ASTProvider>
             </EditorProvider>
           </ModelProvider>

packages/cxx-playground/src/App.tsx

@@ -49,7 +49,7 @@ export default function AbstractSyntaxTree() {
           message: message,
           source: "C++",
         });
-      }
+      },
     );
 
     monaco.editor.setModelMarkers(model, "cxx", markers);

packages/cxx-playground/src/abstract-syntax-tree.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { GripVerticalIcon } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

packages/cxx-playground/src/components/ui/resizable.tsx

@@ -33,7 +33,7 @@ export default function useDebouncedOnDidChangeContent({
 }) {
   const debouncedOnDidChangeContent = useDebouncedCallback(
     () => onDidChangeContent?.(model),
-    interval
+    interval,
   );
 
   useOnDidChangeContent({

packages/cxx-playground/src/hooks/use-debounced-on-did-change-content.ts

@@ -31,7 +31,7 @@ export default function useDebouncedOnDidChangeCursorPosition({
   interval?: number;
   onDidChangeCursorPosition?: (
     editor: monaco.editor.IStandaloneCodeEditor,
-    position: monaco.Position
+    position: monaco.Position,
   ) => void;
 }) {
   const debouncedOnDidChangeContent = useDebouncedCallback(() => {

packages/cxx-playground/src/hooks/use-debounced-on-did-change-cursor-position.ts

@@ -28,7 +28,7 @@ export default function useOnDidChangeContent({
   model: monaco.editor.ITextModel;
   onDidChangeContent?: (
     model: monaco.editor.ITextModel,
-    event: monaco.editor.IModelContentChangedEvent
+    event: monaco.editor.IModelContentChangedEvent,
   ) => void;
 }) {
   useEffect(() => {

packages/cxx-playground/src/hooks/use-on-did-change-content.ts

@@ -28,7 +28,7 @@ export default function useOnDidChangeCursorPosition({
   editor: monaco.editor.IStandaloneCodeEditor | null;
   onDidChangeCursorPosition?: (
     editor: monaco.editor.IStandaloneCodeEditor,
-    event: monaco.Position
+    event: monaco.Position,
   ) => void;
 }) {
   useEffect(() => {