diff --git a/src/components/ui/editor.jsx b/src/components/ui/editor.jsx
index ba46794..1bf22ec 100644
--- a/src/components/ui/editor.jsx
+++ b/src/components/ui/editor.jsx
@@ -1,42 +1,98 @@
-import React, { useEffect, useRef, useState, useLayoutEffect } from 'react';
-import * as monaco from 'monaco-editor';
-import { TokenizationRegistry } from 'monaco-editor/esm/vs/editor/common/languages';
-import { MarkerSeverity } from 'monaco-editor/esm/vs/platform/markers/common/markers';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution';
-import { loadSchema, validateYaml, getHoverInfo } from '../../schema';
-import { debug } from '../../debug';
-import { formatYaml, setupYamlFormatting } from '../../lib/format-yaml';
-import { useToast } from "@/hooks/use-toast"
-import { generateShareUrl, getSharedContent } from '../../share';
-import { showShareDialog } from '../../lib/dialog';
-import { registerCompletionProvider } from '../../completions';
-import { EditorMenu } from './editor-menu';
-import { saveEditorContent, loadEditorContent } from '../../lib/storage';
-
+import React, { useEffect, useRef, useState } from "react";
+import * as monaco from "monaco-editor";
+import { MarkerSeverity } from "monaco-editor/esm/vs/platform/markers/common/markers";
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+import "monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution";
+import {
+ setupEditorFeatures,
+ updateDiagnostics,
+} from "@/lib/schema-validation";
+import { debug } from "@/lib/debug";
+import { formatYaml } from "@/lib/format-yaml";
+import { useToast } from "@/hooks/use-toast";
+import { getSharedContent } from "@/lib/share";
+import { EditorMenu } from "./editor-menu";
+import { saveEditorContent } from "@/lib/storage";
+import { getEditorOptions } from "@/lib/editor-config";
+
+/**
+ * @fileoverview
+ * Monaco Editor component for Lando configuration files.
+ * This component provides a full-featured YAML editor with Lando-specific functionality,
+ * including schema validation, autocompletion, and custom formatting.
+ * It handles file drag-and-drop, content sharing, and local storage persistence.
+ */
+
+/**
+ * Configures Monaco editor web workers for JSON and general editor functionality
+ */
+const setupMonacoWorkers = () => {
+ debug.log("Setting up Monaco workers");
+ self.MonacoEnvironment = {
+ getWorker(_, label) {
+ debug.log("Requesting worker for language:", label);
+ if (label === "json") {
+ return new jsonWorker();
+ }
+ return new editorWorker();
+ },
+ };
+};
+
+/**
+ * A Monaco-based YAML editor component specialized for Lando configuration files.
+ * Provides features including:
+ * - Syntax highlighting
+ * - Schema validation
+ * - Auto-completion
+ * - File drag & drop
+ * - Content sharing
+ * - Local storage persistence
+ * - Auto-formatting
+ *
+ * @returns {JSX.Element} The editor component
+ */
export function Editor() {
+ /**
+ * Reference to the DOM container element for the Monaco editor
+ * @type {React.RefObject
}
+ */
const containerRef = useRef(null);
+
+ /**
+ * Reference to the Monaco editor instance
+ * @type {React.RefObject}
+ */
const editorRef = useRef(null);
+
+ /**
+ * Flag to prevent multiple editor initializations
+ * @type {React.RefObject}
+ */
const initializingRef = useRef(false);
+
+ /**
+ * Toast notification hook for displaying user feedback
+ */
const { toast } = useToast();
+
+ /**
+ * State for controlling the editor menu visibility
+ * @type {[boolean, React.Dispatch>]}
+ */
const [isMenuOpen, setIsMenuOpen] = useState(false);
- const [isEditorReady, setIsEditorReady] = useState(false);
- // Setup Monaco workers
- const setupMonacoWorkers = () => {
- debug.log('Setting up Monaco workers');
- self.MonacoEnvironment = {
- getWorker(_, label) {
- debug.log('Requesting worker for language:', label);
- if (label === 'json') {
- return new jsonWorker();
- }
- return new editorWorker();
- },
- };
- };
+ /**
+ * State indicating whether the editor has completed initialization
+ * @type {[boolean, React.Dispatch>]}
+ */
+ const [isEditorReady, setIsEditorReady] = useState(false);
+ /**
+ * Effect hook for initializing the Monaco editor
+ * Sets up the editor instance, workers, and features
+ */
useEffect(() => {
// Wait for next frame to ensure container is ready
requestAnimationFrame(() => {
@@ -45,30 +101,33 @@ export function Editor() {
initializingRef.current = true;
try {
- debug.log('Initializing editor...');
+ debug.log("Initializing editor...");
if (!containerRef.current) {
- throw new Error('Editor container not found');
+ throw new Error("Editor container not found");
}
setupMonacoWorkers();
- editorRef.current = monaco.editor.create(containerRef.current, getEditorOptions());
- await setupEditorFeatures();
+ editorRef.current = monaco.editor.create(
+ containerRef.current,
+ getEditorOptions(),
+ );
+ await setupEditorFeatures(editorRef.current, toast);
setupEventListeners();
handleSharedContent();
setIsEditorReady(true);
// Fade out loader
setTimeout(() => {
- const loader = document.getElementById('editor-loader');
+ const loader = document.getElementById("editor-loader");
if (loader) {
- loader.style.opacity = '0';
- loader.addEventListener('transitionend', () => loader.remove());
+ loader.style.opacity = "0";
+ loader.addEventListener("transitionend", () => loader.remove());
}
}, 500);
- debug.log('Editor initialized successfully');
+ debug.log("Editor initialized successfully");
} catch (error) {
- debug.error('Failed to initialize editor:', error);
+ debug.error("Failed to initialize editor:", error);
throw error;
}
};
@@ -81,195 +140,63 @@ export function Editor() {
editorRef.current.dispose();
}
};
- }, []);
+ }, [toast]);
+ /**
+ * Effect hook for handling clicks outside the editor menu
+ * Closes the menu when clicking outside its boundaries
+ */
useEffect(() => {
const handleClickOutside = (e) => {
- if (isMenuOpen && !e.target.closest('.editor-drawer') && !e.target.closest('#editor-menu-button')) {
+ if (
+ isMenuOpen &&
+ !e.target.closest(".editor-drawer") &&
+ !e.target.closest("#editor-menu-button")
+ ) {
setIsMenuOpen(false);
}
};
- document.addEventListener('click', handleClickOutside);
- return () => document.removeEventListener('click', handleClickOutside);
+ document.addEventListener("click", handleClickOutside);
+ return () => document.removeEventListener("click", handleClickOutside);
}, [isMenuOpen]);
- const getEditorOptions = () => ({
- value: getDefaultContent(),
- language: 'yaml',
- theme: document.documentElement.classList.contains('dark') ? 'lando' : 'vs',
- automaticLayout: true,
- minimap: { enabled: false },
- scrollBeyondLastLine: false,
- fontSize: 18,
- lineNumbers: 'on',
- renderWhitespace: 'selection',
- tabSize: 2,
- fixedOverflowWidgets: true,
- quickSuggestions: true,
- suggestOnTriggerCharacters: true,
- wordBasedSuggestions: false,
- parameterHints: { enabled: true },
- suggest: {
- snippetsPreventQuickSuggestions: false,
- showWords: false,
- filterGraceful: false,
- showSnippets: true,
- showProperties: true,
- localityBonus: true,
- insertMode: 'insert',
- insertHighlight: true,
- selectionMode: 'always',
- },
- acceptSuggestionOnEnter: 'on',
- acceptSuggestionOnCommitCharacter: true,
- snippetSuggestions: 'inline',
- tabCompletion: 'on',
- snippetOptions: { exitOnEnter: true },
- });
-
- const setupEditorFeatures = async () => {
- // Set up YAML tokenization
- const existingTokensProvider = TokenizationRegistry.get('yaml');
- if (existingTokensProvider) {
- const originalTokenize = existingTokensProvider.tokenize.bind(existingTokensProvider);
- monaco.languages.setMonarchTokensProvider('yaml', {
- ...existingTokensProvider,
- tokenize: (line, state) => {
- const tokens = originalTokenize(line, state);
- if (tokens && tokens.tokens) {
- tokens.tokens = tokens.tokens.map(token => {
- if (token.scopes.includes('type.yaml')) {
- return { ...token, scopes: ['key'] };
- }
- return token;
- });
- }
- return tokens;
- },
- });
- }
-
- // Register hover provider
- monaco.languages.registerHoverProvider('yaml', {
- provideHover: (model, position) => {
- const content = model.getValue();
- return getHoverInfo(content, position);
- }
- });
-
- // Load schema and set up validation
- debug.log('Loading schema...');
- const schemaContent = await loadSchema();
-
- if (!schemaContent) {
- handleSchemaLoadFailure();
- } else {
- debug.log('Schema loaded successfully');
- setupSchemaValidation(schemaContent);
- }
-
- // Register YAML completion provider
- if (schemaContent) {
- registerCompletionProvider(schemaContent);
- }
-
- // Add format action setup
- setupYamlFormatting(editorRef.current, toast);
- };
-
- const handleSchemaLoadFailure = () => {
- debug.warn('Schema failed to load - editor will continue without validation');
- monaco.editor.setModelMarkers(editorRef.current.getModel(), 'yaml', [{
- severity: MarkerSeverity.Warning,
- message: 'Schema validation unavailable - schema failed to load',
- startLineNumber: 1,
- startColumn: 1,
- endLineNumber: 1,
- endColumn: 1,
- }]);
- };
-
- const setupSchemaValidation = (schemaContent) => {
- const updateDiagnostics = () => {
- const content = editorRef.current.getValue();
- try {
- debug.log('Validating YAML content...');
- const diagnostics = validateYaml(content, schemaContent);
- debug.log('Validation results:', diagnostics);
- monaco.editor.setModelMarkers(editorRef.current.getModel(), 'yaml', diagnostics);
- } catch (e) {
- debug.error('Validation error:', e);
- }
- };
-
- // Update diagnostics on content change
- editorRef.current.onDidChangeModelContent(() => {
- debug.log('Content changed, updating diagnostics...');
- updateDiagnostics();
- });
-
- // Initial validation
- updateDiagnostics();
- };
-
+ /**
+ * Handles shared content from URL parameters
+ * Loads the content into the editor and shows a notification
+ */
const handleSharedContent = () => {
const sharedContent = getSharedContent();
if (sharedContent) {
try {
editorRef.current.setValue(sharedContent);
toast({
- description: 'Loaded shared Landofile',
+ description: "Loaded shared Landofile",
duration: 2000,
});
// Clear the URL parameter without reloading the page
const url = new URL(window.location.href);
- url.searchParams.delete('s');
- window.history.replaceState({}, '', url.toString());
+ url.searchParams.delete("s");
+ window.history.replaceState({}, "", url.toString());
} catch (error) {
- debug.error('Failed to load shared content:', error);
+ debug.error("Failed to load shared content:", error);
toast({
- description: 'Failed to load shared content',
+ description: "Failed to load shared content",
duration: 5000,
- className: 'bg-red-50 dark:bg-red-900/10 text-red-800 dark:text-red-200',
+ className:
+ "bg-red-50 dark:bg-red-900/10 text-red-800 dark:text-red-200",
});
}
}
};
- const getDefaultContent = () => {
- // First try to load shared content
- const sharedContent = getSharedContent();
- if (sharedContent) {
- return sharedContent;
- }
-
- // Then try to load from local storage
- const savedContent = loadEditorContent();
- if (savedContent) {
- return savedContent;
- }
-
- // Fall back to default template
- return `name: my-lando-app
-recipe: lamp
-config:
- php: '8.3'
- webroot: .
- database: mysql:8.0
- xdebug: false
-
-services:
- node:
- type: node:20
- build:
- - npm install
- command: vite --host 0.0.0.0
- port: 5173
- ssl: true
-`;
- };
-
+ /**
+ * Sets up event listeners for the editor including:
+ * - Paste formatting
+ * - Window resize handling
+ * - File drag and drop
+ * - Content change persistence
+ */
const setupEventListeners = () => {
// Handle paste events
editorRef.current.onDidPaste(() => {
@@ -279,60 +206,65 @@ services:
// Only format and show toast if content changed
if (formatted !== content) {
- editorRef.current.executeEdits('format', [{
- range: editorRef.current.getModel().getFullModelRange(),
- text: formatted,
- }]);
+ editorRef.current.executeEdits("format", [
+ {
+ range: editorRef.current.getModel().getFullModelRange(),
+ text: formatted,
+ },
+ ]);
toast({
- description: 'Content was automatically formatted',
+ description: "Content was automatically formatted",
duration: 2000,
});
}
} catch (error) {
- debug.error('Failed to format pasted content:', error);
+ debug.error("Failed to format pasted content:", error);
toast({
description: `Failed to format: ${error.message}`,
duration: 5000,
- className: 'bg-red-50 dark:bg-red-900/10 text-red-800 dark:text-red-200',
+ className:
+ "bg-red-50 dark:bg-red-900/10 text-red-800 dark:text-red-200",
});
}
});
// Handle window resizing
- window.addEventListener('resize', () => {
- debug.log('Window resized, updating editor layout...');
+ window.addEventListener("resize", () => {
+ debug.log("Window resized, updating editor layout...");
editorRef.current.layout();
});
// Update drag and drop handling to target the main container
const editorContainer = containerRef.current;
if (editorContainer) {
- editorContainer.addEventListener('dragover', (e) => {
+ editorContainer.addEventListener("dragover", (e) => {
e.preventDefault();
- editorContainer.classList.add('drag-over');
+ editorContainer.classList.add("drag-over");
});
- editorContainer.addEventListener('dragleave', () => {
- editorContainer.classList.remove('drag-over');
+ editorContainer.addEventListener("dragleave", () => {
+ editorContainer.classList.remove("drag-over");
});
- editorContainer.addEventListener('drop', async (e) => {
+ editorContainer.addEventListener("drop", async (e) => {
e.preventDefault();
- editorContainer.classList.remove('drag-over');
+ editorContainer.classList.remove("drag-over");
const file = e.dataTransfer.files[0];
if (!file) return;
if (!file.name.match(/^\.lando(\..*)?\.yml$/i)) {
- debug.warn('Invalid file type:', file.name);
- monaco.editor.setModelMarkers(editorRef.current.getModel(), 'yaml', [{
- severity: MarkerSeverity.Error,
- message: 'Only .lando.yml and .lando.*.yml files are supported',
- startLineNumber: 1,
- startColumn: 1,
- endLineNumber: 1,
- endColumn: 1,
- }]);
+ debug.warn("Invalid file type:", file.name);
+ monaco.editor.setModelMarkers(editorRef.current.getModel(), "yaml", [
+ {
+ severity: MarkerSeverity.Error,
+ message: "Only .lando.yml and .lando.*.yml files are supported",
+ startLineNumber: 1,
+ startColumn: 1,
+ endLineNumber: 1,
+ endColumn: 1,
+ },
+ ]);
return;
}
@@ -341,37 +273,42 @@ services:
const formatted = formatYaml(content);
if (formatted !== content) {
toast({
- description: 'File was automatically formatted',
+ description: "File was automatically formatted",
duration: 2000,
});
}
- editorRef.current.executeEdits('format', [{
- range: editorRef.current.getModel().getFullModelRange(),
- text: formatted,
- }]);
- debug.log('File loaded successfully:', file.name);
+ editorRef.current.executeEdits("format", [
+ {
+ range: editorRef.current.getModel().getFullModelRange(),
+ text: formatted,
+ },
+ ]);
+ debug.log("File loaded successfully:", file.name);
} catch (error) {
- debug.error('Error reading file:', error);
+ debug.error("Error reading file:", error);
toast({
description: `Error reading file: ${error.message}`,
duration: 5000,
- className: 'bg-red-50 dark:bg-red-900/10 text-red-800 dark:text-red-200',
+ className:
+ "bg-red-50 dark:bg-red-900/10 text-red-800 dark:text-red-200",
});
- monaco.editor.setModelMarkers(editorRef.current.getModel(), 'yaml', [{
- severity: MarkerSeverity.Error,
- message: `Error reading file: ${error.message}`,
- startLineNumber: 1,
- startColumn: 1,
- endLineNumber: 1,
- endColumn: 1,
- }]);
+ monaco.editor.setModelMarkers(editorRef.current.getModel(), "yaml", [
+ {
+ severity: MarkerSeverity.Error,
+ message: `Error reading file: ${error.message}`,
+ startLineNumber: 1,
+ startColumn: 1,
+ endLineNumber: 1,
+ endColumn: 1,
+ },
+ ]);
}
});
}
// Add content change listener to save to localStorage
editorRef.current.onDidChangeModelContent(() => {
- debug.log('Content changed, saving to localStorage...');
+ debug.log("Content changed, saving to localStorage...");
const content = editorRef.current.getValue();
saveEditorContent(content);
// Existing validation call
@@ -384,15 +321,29 @@ services:
{editorRef.current && (
diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx
index 70831a4..c223acc 100644
--- a/src/components/ui/input.jsx
+++ b/src/components/ui/input.jsx
@@ -1,19 +1,31 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import { cn } from "@/lib/utils";
+/**
+ * Input component.
+ *
+ * This component renders an input field with a default set of styles.
+ * It uses the cn utility function from @/lib/utils to concatenate the base and variant class names.
+ *
+ * @param {Object} props - The props passed to the component.
+ * @param {String} props.className - Additional class names to be applied to the component.
+ * @param {String} props.type - The type of the input field.
+ * @param {React.RefObject} ref - The ref object passed to the component.
+ * @returns {React.ReactElement} - The Input component.
+ */
const Input = React.forwardRef(({ className, type, ...props }, ref) => {
return (
- ()
+ {...props}
+ />
);
-})
-Input.displayName = "Input"
+});
+Input.displayName = "Input";
-export { Input }
+export { Input };
diff --git a/src/components/ui/share-dialog.jsx b/src/components/ui/share-dialog.jsx
index 2f8652c..39103d2 100644
--- a/src/components/ui/share-dialog.jsx
+++ b/src/components/ui/share-dialog.jsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import React from "react";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
-} from "@/components/ui/dialog"
+} from "@/components/ui/dialog";
export function ShareDialog({ isOpen, onClose, shareUrl }) {
return (
@@ -25,10 +25,11 @@ export function ShareDialog({ isOpen, onClose, shareUrl }) {
onClick={(e) => e.target.select()}
/>
- )
+ );
}
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index 2a7aaaf..b7bee25 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -1,14 +1,30 @@
-"use client"
+"use client";
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-const ToastProvider = ToastPrimitives.Provider
+/**
+ * ToastProvider component.
+ *
+ * This component wraps the ToastPrimitives.Provider component from @radix-ui/react-toast.
+ * It is used to provide context to the toast components.
+ */
+const ToastProvider = ToastPrimitives.Provider;
+/**
+ * ToastViewport component.
+ *
+ * This component wraps the ToastPrimitives.Viewport component from @radix-ui/react-toast.
+ * It is used to render the viewport for the toast notifications.
+ *
+ * @param {React.ComponentPropsWithoutRef