Full Screen Node | WyzQuests Documentation

1. Front Matter

Title: Full Screen Node
Author: Joshua Uriel Tribiana
Reviewers: Joylynne Esportuno ( teruterubozuuu )
Creation Date: 2026-06-29
Status: Approved
References:
- Issue: [2.2.7] Full Screen Node

2. Introduction & Goals

Problem Summary
Creators find it difficult to edit content-heavy nodes, particularly the CodeNode (HTML Embed), within the small card on the Visual Canvas. The limited space requires excessive scrolling and makes it hard to get a clear overview of the content, leading to a poor and inefficient authoring experience.
Goals
- Provide a "fullscreen" or "focus" mode for specific nodes, starting with the CodeNode.
- The fullscreen view will overlay the entire canvas, providing a large, dedicated editing space.
- The fullscreen view will render the node's full editing interface (e.g., Monaco Editor).
- Provide a clear UI control to exit fullscreen mode and return to the standard canvas view.
- Manage the fullscreen state at the parent canvas level, ensuring it is a transient UI state.
Non-Goals
- A separate browser tab or window for editing. The feature is an overlay within the existing editor.
- Fullscreen mode for all node types at once. It will be implemented for CodeNode first and can be extended to other complex nodes later.
- Persisting the fullscreen state in the database or across page reloads. The editor will always default to the standard canvas view.
Glossary
- Focus Mode / Fullscreen Mode: A UI state where a single node's editing interface takes over the entire viewport of the canvas area.
- Node Wrapper: A higher-order component that provides common functionality or chrome around a node, such as the fullscreen toggle.

3. High-Level Architecture

System Diagram

              Fullscreen Code Editor Workflow
 
+----------------------+
| Code Node            |
| Click Maximize       |
+----------------------+
           |
           v
+----------------------+
| Set Fullscreen State |
+----------------------+
           |
           v
+----------------------+
| Re-render Canvas     |
+----------------------+
           |
     +-----+-----+
     |           |
     v           v
+----------------------+      +----------------------+
| Canvas View          |      | Fullscreen View      |
| (Default)            |      | Display Code Node    |
+----------------------+      +----------------------+
                                      |
                                      v
                           +----------------------+
                           | Edit Code            |
                           | in Fullscreen        |
                           +----------------------+
                                      |
                                      v
                           +----------------------+
                           | Click Collapse       |
                           +----------------------+
                                      |
                                      v
                           +----------------------+
                           | Clear Fullscreen     |
                           | State                |
                           +----------------------+
                                      |
                                      v
                           +----------------------+
                           | Return to            |
                           | Canvas View          |
                           +----------------------+

Technologies Used
- React: For UI components and state management (useState).
- React Flow / Custom Canvas: The underlying library for the visual editor.
- lucide-react: For UI icons (Maximize2, Minimize2).
- clsx / tailwind-merge: For conditional styling.

4. Detailed Design & Implementation

Data Model / Schema
No database or schema changes are required. This feature is implemented entirely as a transient, client-side UI state managed by the parent canvas component.
API Specification
No new API endpoints are needed. The feature uses the existing PUT /api/creator/update-quest-canvas endpoint to persist any content changes made while in fullscreen mode, just as it does in the standard view.
Logic & Workflows
1. Entering Fullscreen Mode:
  - The CodeNode component displays a "Maximize" icon button.
  - On click, this button calls the onOpenFullscreen(nodeId, nodeType) function, which is passed down as a prop from the parent canvas page.
  - The onOpenFullscreen handler in the parent component updates its state, setting fullscreenNode to an object like { id: 'node-123', type: 'Code' }.
2. Rendering the Fullscreen View:
  - The parent canvas component has a conditional rendering block. If fullscreenNode is not null, it renders a FullscreenNodeWrapper component instead of the main React Flow canvas.
  - The FullscreenNodeWrapper is passed the fullscreenNode state object.
  - It finds the full node data from the main nodes array using the ID.
  - It dynamically renders the correct node component (e.g., CodeNode) based on the type and passes the isFullscreen={true} prop, along with an onExitFullscreen handler.
3. Exiting Fullscreen Mode:
  - The FullscreenNodeWrapper includes a "Collapse" or "Exit" button.
  - When clicked, this button calls the onExitFullscreen handler.
  - The handler in the parent component sets the fullscreenNode state back to null.
  - The conditional renderer now shows the main React Flow canvas again, returning the user to the standard view.
4. Key Files:
  - app/quest-editor/[questID]/.../page.tsx: The main canvas page that will hold the fullscreenNode state and the onOpenFullscreen/onExitFullscreen handlers.
  - components/quest-editor/visual-canvas/FullscreenNodeWrapper.tsx: A new component that acts as the overlay and renders the specified node in focus mode.
  - components/quest-editor/visual-canvas/nodes/CodeNode.tsx: The node component is updated to accept onOpenFullscreen and isFullscreen props and to render the "Maximize" icon.

5. Infrastructure & Operations

Dependencies
- This is a self-contained frontend feature with no new external dependencies.
Monitoring & Alerting
- Not applicable. This is a client-side UI feature with no direct backend operational impact.
Deployment Plan
- The feature can be deployed directly. Since it's a progressive enhancement, existing nodes will continue to function without it. The "Maximize" icon will only appear on nodes that have been updated to support the feature (i.e., CodeNode).

6. Testing & Quality Assurance

Test Strategy

Component Tests:
- Test the FullscreenNodeWrapper to ensure it correctly renders the child node when given a nodeId.
- Test the CodeNode to ensure the "Maximize" icon is only visible when the onOpenFullscreen prop is provided.
End-to-End (E2E) / QA:
- Flow 1 (Enter/Exit): On the Visual Canvas, click the "Maximize" icon on a CodeNode. Verify the view changes to a fullscreen editor. Click the "Collapse" icon. Verify the view returns to the standard canvas.
- Flow 2 (Editing): Enter fullscreen mode. Make a change to the HTML content. Exit fullscreen mode. Verify the change is reflected in the small node preview. Refresh the page and verify the change was persisted.
- Flow 3 (Responsiveness): Verify the fullscreen editor layout is usable on smaller screen sizes.

Known Limitations

Initially, only the CodeNode will support fullscreen mode. Other complex nodes (like ScenarioNode) will require individual updates to be compatible.

7. Maintenance & Support

Troubleshooting

"Maximize" icon does not appear:
1. Ensure the onOpenFullscreen prop is being correctly passed from the parent canvas page down to the CodeNode.
2. The feature might be intentionally disabled for child nodes (e.g., nodes inside a ScenarioNode).
Fullscreen view is blank or shows the wrong node:
1. Check the logic in FullscreenNodeWrapper.tsx. Ensure it is correctly finding the node from the nodes array using the fullscreenNode.id.
2. Verify the dynamic component rendering logic is correctly mapping the node type to the component file.

Changelog

1.0 - Approved, Technical guide created for planned feature, 2026-06-29