v2.3.0 - Interactive Console REPL & Resizable Console

Description

Implemented an interactive Read-Eval-Print Loop (REPL) within the console drawer and added vertical resizing capabilities. This feature allows users to execute JavaScript directly, inspect variables in the live preview, and adjust the console workspace height for better visibility.

Changes Made

• Console Drawer (Resizing):
  • Vertical Resizing: Enabled resizing by dragging the top border of the console drawer.
  • Constraints: Enforced height limits between a minimum of 48px and a maximum of 600px.
  • Smooth Interaction: Implemented a global overlay during drag operations to prevent iframe pointer event interference.
• Console Drawer (REPL):
  • Added a new LogLevel type ("result") to differentiate REPL outputs.
  • Implemented the onExecute prop to handle code submission.
  • Created a terminal-style input field with monospace styling, a > prompt, and Up/Down arrow key history navigation.
  • Added distinct styling for evaluated results (purple/blue).
• Preview Component:
  • Modified to use forwardRef, exposing the iframe element to the parent.
• Main Content:
  • Wired up the preview iframe ref and implemented handleExecuteInIframe.
  • Updated the injected console script to listen for "eval" messages and return results via postMessage.

How It Works

• REPL: Uses a message protocol where the parent sends execution requests to the iframe. The iframe runs the code using eval() and posts the result back to the console log.
• Resizing: A drag handler on the console's top border calculates the new height based on mouse movement. A temporary overlay is applied during the drag to ensure the mouse cursor doesn't get "stuck" over the iframe.

Notes

• Verified console logs and math operations function correctly in the REPL.
• Confirmed command history and error handling.
• Verified resizing respects the 48px/600px limits.
• Confirmed smooth dragging without iframe interference.

Full Changelog: v2.2.0...v2.3.0