CodeEditor Component Demo

+ +

+ Language + +

+ +

+ Theme + +

+ +

+ + setReadOnly(e.target.checked)} + /> + Read Only + + + + setShowLineNumbers(e.target.checked)} + /> + Show Line Numbers + + + + setWordWrap(e.target.checked)} + /> + Word Wrap + +

+ +

Editor

+ +

Current Value:

+          {code}
+

+ +

Features:

Syntax highlighting for multiple languages
Light and dark theme support
Line numbers and code folding
Auto-completion and bracket matching
Search functionality (Cmd/Ctrl + F)
Optimized for large files (500KB+)
TypeScript support with full type safety

); + expect(container.firstChild).toBeInTheDocument(); + }); + + it("displays initial value", async () => { + const initialValue = "console.log('Hello, World!');"; + render(); + + await waitFor(() => { + const content = document.querySelector(".cm-content"); + expect(content?.textContent).toContain("Hello, World!"); + }); + }); + + it("calls onChange when content is modified", async () => { + const handleChange = vi.fn(); + const user = userEvent.setup(); + + render(); + + await waitFor(() => { + const editor = document.querySelector(".cm-content"); + expect(editor).toBeInTheDocument(); + }); + + const editor = document.querySelector(".cm-content") as HTMLElement; + + // Focus and type in the editor + await user.click(editor); + await user.type(editor, "test"); + + await waitFor(() => { + expect(handleChange).toHaveBeenCalled(); + }); + }); + + it("respects readOnly prop", async () => { + const handleChange = vi.fn(); + + render( + + ); + + await waitFor(() => { + const content = document.querySelector(".cm-content"); + expect(content).toBeInTheDocument(); + expect(content?.getAttribute("aria-readonly")).toBe("true"); + }); + }); + + it("shows placeholder when empty", async () => { + const placeholderText = "Type your code..."; + + render(); + + await waitFor(() => { + const placeholder = document.querySelector(".cm-placeholder"); + expect(placeholder?.textContent).toBe(placeholderText); + }); + }); + + it("applies custom className", () => { + const { container } = render( + + ); + + expect(container.firstChild).toHaveClass("custom-editor-class"); + }); + + it("respects height prop", () => { + const { container } = render(); + + const editorContainer = container.firstChild as HTMLElement; + expect(editorContainer).toBeInTheDocument(); + }); + + it("shows line numbers when enabled", async () => { + render(); + + await waitFor(() => { + const lineNumbers = document.querySelector(".cm-lineNumbers"); + expect(lineNumbers).toBeInTheDocument(); + }); + }); + + it("hides line numbers when disabled", async () => { + render(); + + await waitFor(() => { + const lineNumbers = document.querySelector(".cm-lineNumbers"); + expect(lineNumbers).not.toBeInTheDocument(); + }); + }); + + it("supports different languages", async () => { + const pythonCode = "def hello():\n print('Hello, World!')"; + + render(); + + await waitFor(() => { + const content = document.querySelector(".cm-content"); + expect(content?.textContent).toContain("Hello, World!"); + }); + }); + + it("updates when value prop changes", async () => { + const { rerender } = render(); + + await waitFor(() => { + const content = document.querySelector(".cm-content"); + expect(content?.textContent).toContain("initial"); + }); + + rerender(); + + await waitFor(() => { + const content = document.querySelector(".cm-content"); + expect(content?.textContent).toContain("updated"); + }); + }); + + it("applies theme override", async () => { + render(); + + await waitFor(() => { + const editor = document.querySelector(".cm-editor"); + expect(editor).toBeInTheDocument(); + }); + }); + + it("renders loading state during SSR", () => { + // The component should render during SSR with loading state + const { container } = render(); + + // Should initially show the container div + expect(container.firstChild).toBeInTheDocument(); + + // After mount, it should show the editor + waitFor(() => { + const editor = document.querySelector(".cm-editor"); + expect(editor).toBeInTheDocument(); + }); + }); +}); diff --git a/components/ui/code-editor.tsx b/components/ui/code-editor.tsx new file mode 100644 index 0000000..18fa169 --- /dev/null +++ b/components/ui/code-editor.tsx @@ -0,0 +1,288 @@ +"use client"; + +import { useEffect, useRef, useMemo, useCallback } from "react"; +import { EditorState, Extension, Compartment } from "@codemirror/state"; +import { EditorView, keymap, lineNumbers, placeholder } from "@codemirror/view"; +import { defaultKeymap, indentWithTab } from "@codemirror/commands"; +import { + indentOnInput, + bracketMatching, + foldGutter, +} from "@codemirror/language"; +import { highlightSelectionMatches, searchKeymap } from "@codemirror/search"; +import { autocompletion, closeBrackets } from "@codemirror/autocomplete"; +import { highlightActiveLine } from "@codemirror/view"; + +// Language imports +import { javascript } from "@codemirror/lang-javascript"; +import { html } from "@codemirror/lang-html"; +import { css } from "@codemirror/lang-css"; +import { json } from "@codemirror/lang-json"; +import { python } from "@codemirror/lang-python"; +import { markdown } from "@codemirror/lang-markdown"; +import { sql } from "@codemirror/lang-sql"; +import { xml } from "@codemirror/lang-xml"; +import { yaml } from "@codemirror/lang-yaml"; + +// Theme imports +import { oneDark } from "@codemirror/theme-one-dark"; +import { githubLight } from "@uiw/codemirror-theme-github"; + +import { useTheme } from "next-themes"; +import { cn } from "@/lib/utils"; + +// Language mode mapping +const languageModes: Record Extension> = { + javascript, + typescript: javascript, + jsx: javascript, + tsx: javascript, + html, + css, + scss: css, + json, + python, + markdown, + sql, + xml, + yaml, + yml: yaml, +}; + +export interface CodeEditorProps { + /** The code content */ + value?: string; + /** Callback when content changes */ + onChange?: (value: string) => void; + /** Programming language for syntax highlighting */ + language?: string; + /** Placeholder text when empty */ + placeholder?: string; + /** Whether the editor is read-only */ + readOnly?: boolean; + /** Whether to show line numbers */ + showLineNumbers?: boolean; + /** Whether to enable word wrap */ + wordWrap?: boolean; + /** Custom class name */ + className?: string; + /** Height of the editor */ + height?: string; + /** Theme override (defaults to system theme) */ + theme?: "light" | "dark"; +} + +// Create compartments for dynamic configuration +const languageCompartment = new Compartment(); +const themeCompartment = new Compartment(); +const readOnlyCompartment = new Compartment(); +const lineNumbersCompartment = new Compartment(); +const lineWrappingCompartment = new Compartment(); + +export function CodeEditor({ + value = "", + onChange, + language = "javascript", + placeholder: placeholderText = "Enter your code here...", + readOnly = false, + showLineNumbers = true, + wordWrap = false, + className, + height = "400px", + theme: themeOverride, +}: CodeEditorProps) { + const containerRef = useRef(null); + const viewRef = useRef(null); + const { theme: systemTheme } = useTheme(); + + // Store the onChange callback in a ref to avoid stale closures + const onChangeRef = useRef(onChange); + onChangeRef.current = onChange; + + // Determine the active theme + const activeTheme = themeOverride || systemTheme || "light"; + + // Get language extension + const getLanguageExtension = useCallback((lang: string) => { + const langKey = lang.toLowerCase(); + const langFunc = languageModes[langKey]; + return langFunc ? langFunc() : javascript(); + }, []); + + // Get theme extension + const getThemeExtension = useCallback((theme: string) => { + return theme === "dark" ? oneDark : githubLight; + }, []); + + // Create base extensions that don't change + const baseExtensions = useMemo( + () => [ + indentOnInput(), + bracketMatching(), + closeBrackets(), + autocompletion(), + highlightActiveLine(), + highlightSelectionMatches(), + keymap.of([...defaultKeymap, ...searchKeymap, indentWithTab]), + placeholder(placeholderText), + EditorView.theme({ + "&": { + fontSize: "14px", + height: height, + fontFamily: + "var(--font-geist-mono), ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace", + }, + ".cm-content": { + padding: "12px", + fontFamily: "inherit", + }, + ".cm-focused": { + outline: "none", + }, + "&.cm-editor.cm-focused": { + outline: "2px solid var(--color-ring)", + outlineOffset: "2px", + }, + ".cm-placeholder": { + color: "var(--color-muted-foreground)", + fontStyle: "italic", + }, + ".cm-cursor": { + borderLeftWidth: "2px", + }, + ".cm-scroller": { + fontFamily: "inherit", + lineHeight: "1.5", + }, + ".cm-gutters": { + fontFamily: "inherit", + }, + }), + ], + [placeholderText, height] + ); + + // Initialize the editor + useEffect(() => { + if (!containerRef.current || viewRef.current) return; + + // Create extensions with compartments + const extensions = [ + ...baseExtensions, + languageCompartment.of(getLanguageExtension(language)), + themeCompartment.of(getThemeExtension(activeTheme)), + readOnlyCompartment.of(EditorState.readOnly.of(readOnly)), + lineNumbersCompartment.of( + showLineNumbers ? [lineNumbers(), foldGutter()] : [] + ), + lineWrappingCompartment.of(wordWrap ? EditorView.lineWrapping : []), + EditorView.updateListener.of((update) => { + if (update.docChanged && onChangeRef.current) { + const newValue = update.state.doc.toString(); + onChangeRef.current(newValue); + } + }), + ]; + + // Create editor state + const state = EditorState.create({ + doc: value, + extensions, + }); + + // Create editor view + const view = new EditorView({ + state, + parent: containerRef.current, + }); + + viewRef.current = view; + + // Cleanup + return () => { + view.destroy(); + viewRef.current = null; + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); // Only run once on mount - we handle all updates through compartments + + // Update language + useEffect(() => { + if (!viewRef.current) return; + + viewRef.current.dispatch({ + effects: languageCompartment.reconfigure(getLanguageExtension(language)), + }); + }, [language, getLanguageExtension]); + + // Update theme + useEffect(() => { + if (!viewRef.current) return; + + viewRef.current.dispatch({ + effects: themeCompartment.reconfigure(getThemeExtension(activeTheme)), + }); + }, [activeTheme, getThemeExtension]); + + // Update read-only state + useEffect(() => { + if (!viewRef.current) return; + + viewRef.current.dispatch({ + effects: readOnlyCompartment.reconfigure( + EditorState.readOnly.of(readOnly) + ), + }); + }, [readOnly]); + + // Update line numbers + useEffect(() => { + if (!viewRef.current) return; + + viewRef.current.dispatch({ + effects: lineNumbersCompartment.reconfigure( + showLineNumbers ? [lineNumbers(), foldGutter()] : [] + ), + }); + }, [showLineNumbers]); + + // Update line wrapping + useEffect(() => { + if (!viewRef.current) return; + + viewRef.current.dispatch({ + effects: lineWrappingCompartment.reconfigure( + wordWrap ? EditorView.lineWrapping : [] + ), + }); + }, [wordWrap]); + + // Update content when value changes from outside + useEffect(() => { + if (!viewRef.current) return; + + const currentValue = viewRef.current.state.doc.toString(); + if (value !== currentValue) { + // Use transaction to update the document + viewRef.current.dispatch({ + changes: { + from: 0, + to: currentValue.length, + insert: value, + }, + }); + } + }, [value]); + + return ( +

+ ); +} diff --git a/lib/codemirror-utils.ts b/lib/codemirror-utils.ts new file mode 100644 index 0000000..83349c2 --- /dev/null +++ b/lib/codemirror-utils.ts @@ -0,0 +1,69 @@ +import { Extension } from "@codemirror/state"; +import { EditorView } from "@codemirror/view"; + +/** + * Performance optimizations for large files + */ +export function largeFileOptimizations(): Extension[] { + return [ + // Limit viewport rendering for better performance + EditorView.theme({ + ".cm-scroller": { + fontFamily: "var(--font-mono)", + }, + }), + + // Disable some expensive features for very large documents + EditorView.updateListener.of((update) => { + const docSize = update.state.doc.length; + + // For files over 100KB, we might want to disable some features + if (docSize > 100000) { + // This is where we'd disable expensive extensions + // But for now, CodeMirror 6 handles large files well out of the box + } + }), + ]; +} + +/** + * Get file size in a human-readable format + */ +export function formatFileSize(bytes: number): string { + if (bytes === 0) return "0 Bytes"; + + const k = 1024; + const sizes = ["Bytes", "KB", "MB", "GB"]; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + + return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]; +} + +/** + * Detect if content is likely minified + */ +export function isMinified(content: string): boolean { + if (!content || content.length < 500) return false; + + // Check average line length + const lines = content.split("\n"); + const avgLineLength = content.length / lines.length; + + // If average line length is very high, it's likely minified + return avgLineLength > 200; +} + +/** + * Get recommended settings based on content + */ +export function getRecommendedSettings(content: string): { + wordWrap: boolean; + showLineNumbers: boolean; +} { + const minified = isMinified(content); + + return { + wordWrap: minified, // Enable word wrap for minified files + showLineNumbers: !minified, // Disable line numbers for minified files + }; +}