@djangocfg/ui-tools 2.1.239 → 2.1.240

package/src/tools/CodeEditor/components/Editor.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { useRef, useEffect, useState, useCallback, forwardRef, useImperativeHandle } from 'react';
+import type * as monaco from 'monaco-editor';
+
+import { useMonaco } from '../hooks/useMonaco';
+import { useEditorTheme } from '../hooks/useEditorTheme';
+import type { EditorProps } from '../types';
+
+export interface EditorRef {
+  /** Get editor instance */
+  getEditor: () => monaco.editor.IStandaloneCodeEditor | null;
+  /** Get current value */
+  getValue: () => string;
+  /** Set value */
+  setValue: (value: string) => void;
+  /** Focus editor */
+  focus: () => void;
+}
+
+/**
+ * Monaco Editor Component
+ *
+ * A React wrapper around Monaco Editor with full TypeScript support.
+ *
+ * @example
+ * ```tsx
+ * <Editor
+ *   value={code}
+ *   language="typescript"
+ *   onChange={(value) => setCode(value)}
+ *   options={{ fontSize: 14, minimap: false }}
+ * />
+ * ```
+ */
+export const Editor = forwardRef<EditorRef, EditorProps>(function Editor(
+  {
+    value = '',
+    language = 'plaintext',
+    onChange,
+    onMount,
+    options = {},
+    className = '',
+    height = '100%',
+    width = '100%',
+    autoHeight = false,
+    minHeight = 100,
+    maxHeight = 600,
+  },
+  ref
+) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const { monaco, isLoading } = useMonaco();
+  const resolvedTheme = useEditorTheme(monaco, options.theme);
+
+  // Auto-height state
+  const [contentHeight, setContentHeight] = useState<number | null>(null);
+
+  const updateContentHeight = useCallback((editor: monaco.editor.IStandaloneCodeEditor) => {
+    if (!autoHeight) return;
+    const h = editor.getContentHeight();
+    setContentHeight(Math.min(Math.max(h, minHeight), maxHeight));
+  }, [autoHeight, minHeight, maxHeight]);
+
+  // Track internal changes to prevent cursor reset on prop sync
+  const isInternalChangeRef = useRef(false);
+
+  // Expose editor methods via ref
+  useImperativeHandle(ref, () => ({
+    getEditor: () => editorRef.current,
+    getValue: () => editorRef.current?.getValue() || '',
+    setValue: (val: string) => editorRef.current?.setValue(val),
+    focus: () => editorRef.current?.focus(),
+  }));
+
+  // Create editor
+  useEffect(() => {
+    if (!monaco || !containerRef.current || editorRef.current) return;
+
+    const editor = monaco.editor.create(containerRef.current, {
+      value,
+      language,
+      theme: resolvedTheme,
+      fontSize: options.fontSize || 14,
+      fontFamily: options.fontFamily || "'Fira Code', 'Consolas', monospace",
+      tabSize: options.tabSize || 2,
+      insertSpaces: options.insertSpaces !== false,
+      wordWrap: options.wordWrap || 'on',
+      minimap: { enabled: options.minimap !== false },
+      lineNumbers: options.lineNumbers || 'on',
+      readOnly: options.readOnly || false,
+      automaticLayout: true,
+      scrollBeyondLastLine: autoHeight ? false : false,
+      scrollbar: autoHeight ? { vertical: 'hidden', horizontal: 'auto' } : undefined,
+      overviewRulerLanes: autoHeight ? 0 : undefined,
+      padding: { top: 16, bottom: 16 },
+      renderLineHighlight: 'all',
+      cursorBlinking: 'smooth',
+      cursorSmoothCaretAnimation: 'on',
+      smoothScrolling: true,
+      bracketPairColorization: { enabled: true },
+      guides: {
+        bracketPairs: true,
+        indentation: true,
+      },
+    });
+
+    editorRef.current = editor;
+
+    // Setup change listener
+    if (onChange) {
+      editor.onDidChangeModelContent(() => {
+        // Mark as internal change to prevent cursor reset on prop sync
+        isInternalChangeRef.current = true;
+        onChange(editor.getValue());
+      });
+    }
+
+    // Auto-height: resize container to fit content
+    if (autoHeight) {
+      editor.onDidContentSizeChange(() => updateContentHeight(editor));
+      updateContentHeight(editor);
+    }
+
+    // Call onMount callback
+    onMount?.(editor);
+
+    return () => {
+      editor.dispose();
+      editorRef.current = null;
+    };
+  }, [monaco]);
+
+  // Update value when prop changes (only for external changes)
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    // Skip if this is an internal change (user typing) - prevents cursor reset
+    if (isInternalChangeRef.current) {
+      isInternalChangeRef.current = false;
+      return;
+    }
+
+    const currentValue = editor.getValue();
+    if (value !== currentValue) {
+      // Save cursor position
+      const position = editor.getPosition();
+      const selections = editor.getSelections();
+
+      editor.setValue(value);
+
+      // Restore cursor position if possible
+      if (position) {
+        editor.setPosition(position);
+      }
+      if (selections && selections.length > 0) {
+        editor.setSelections(selections);
+      }
+    }
+  }, [value]);
+
+  // Update language when prop changes
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor || !monaco) return;
+
+    const model = editor.getModel();
+    if (model) {
+      monaco.editor.setModelLanguage(model, language);
+    }
+  }, [language, monaco]);
+
+  // Update options when props change
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    editor.updateOptions({
+      theme: resolvedTheme,
+      fontSize: options.fontSize,
+      readOnly: options.readOnly,
+      minimap: { enabled: options.minimap !== false },
+      wordWrap: options.wordWrap,
+      lineNumbers: options.lineNumbers,
+    });
+  }, [options, resolvedTheme]);
+
+  if (isLoading) {
+    return (
+      <div
+        className={className}
+        style={{
+          width,
+          height,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#1e1e1e',
+          color: '#666',
+        }}
+      >
+        Loading editor...
+      </div>
+    );
+  }
+
+  const resolvedHeight = autoHeight && contentHeight != null ? contentHeight : height;
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{
+        width,
+        height: resolvedHeight,
+        ...(autoHeight && { minHeight: minHeight, maxHeight: maxHeight, overflow: 'hidden' }),
+      }}
+    />
+  );
+});

package/src/tools/CodeEditor/components/index.ts

@@ -0,0 +1,2 @@
+export { Editor } from './Editor';
+export { DiffEditor } from './DiffEditor';

package/src/tools/CodeEditor/context/EditorProvider.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import { createContext, useContext, useState, useCallback, useMemo } from 'react';
+import type * as monaco from 'monaco-editor';
+
+import { useMonaco } from '../hooks/useMonaco';
+import { getLanguageByFilename } from '../lib/languages';
+import type { EditorFile, EditorContextValue } from '../types';
+
+const EditorContext = createContext<EditorContextValue | null>(null);
+
+/**
+ * Hook to access editor context
+ * Must be used within EditorProvider
+ */
+export function useEditorContext(): EditorContextValue {
+  const context = useContext(EditorContext);
+  if (!context) {
+    throw new Error('useEditorContext must be used within EditorProvider');
+  }
+  return context;
+}
+
+interface EditorProviderProps {
+  children: React.ReactNode;
+  /** Callback when file save is requested */
+  onSave?: (path: string, content: string) => Promise<void>;
+}
+
+/**
+ * Editor Context Provider
+ *
+ * Manages multiple open files, active file state, and editor instance.
+ *
+ * @example
+ * ```tsx
+ * <EditorProvider onSave={handleSave}>
+ *   <EditorTabs />
+ *   <Editor />
+ * </EditorProvider>
+ * ```
+ */
+export function EditorProvider({ children, onSave }: EditorProviderProps) {
+  const { monaco } = useMonaco();
+  const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const [openFiles, setOpenFiles] = useState<EditorFile[]>([]);
+  const [activeFilePath, setActiveFilePath] = useState<string | null>(null);
+
+  // Get active file
+  const activeFile = useMemo(
+    () => openFiles.find((f) => f.path === activeFilePath) || null,
+    [openFiles, activeFilePath]
+  );
+
+  // Open a file
+  const openFile = useCallback(
+    (path: string, content: string, language?: string) => {
+      setOpenFiles((files) => {
+        // Check if already open
+        const existing = files.find((f) => f.path === path);
+        if (existing) {
+          return files;
+        }
+
+        // Detect language from filename
+        const basename = path.split('/').pop() || path;
+        const detectedLanguage = language || getLanguageByFilename(basename);
+
+        // Create new file entry
+        const newFile: EditorFile = {
+          path,
+          content,
+          language: detectedLanguage,
+          isDirty: false,
+        };
+
+        return [...files, newFile];
+      });
+
+      // Set as active
+      setActiveFilePath(path);
+    },
+    []
+  );
+
+  // Close a file
+  const closeFile = useCallback(
+    (path: string) => {
+      setOpenFiles((files) => {
+        const index = files.findIndex((f) => f.path === path);
+        if (index === -1) return files;
+
+        const newFiles = files.filter((f) => f.path !== path);
+
+        // If closing active file, activate adjacent file
+        if (activeFilePath === path && newFiles.length > 0) {
+          const newIndex = Math.min(index, newFiles.length - 1);
+          setActiveFilePath(newFiles[newIndex].path);
+        } else if (newFiles.length === 0) {
+          setActiveFilePath(null);
+        }
+
+        return newFiles;
+      });
+    },
+    [activeFilePath]
+  );
+
+  // Set active file
+  const setActiveFile = useCallback((path: string) => {
+    setActiveFilePath(path);
+  }, []);
+
+  // Update file content
+  const updateContent = useCallback((path: string, content: string) => {
+    setOpenFiles((files) =>
+      files.map((f) =>
+        f.path === path
+          ? { ...f, content, isDirty: true }
+          : f
+      )
+    );
+  }, []);
+
+  // Save file
+  const saveFile = useCallback(
+    async (path: string) => {
+      const file = openFiles.find((f) => f.path === path);
+      if (!file) return;
+
+      if (onSave) {
+        await onSave(path, file.content);
+      }
+
+      // Mark as not dirty
+      setOpenFiles((files) =>
+        files.map((f) =>
+          f.path === path ? { ...f, isDirty: false } : f
+        )
+      );
+    },
+    [openFiles, onSave]
+  );
+
+  // Check if file is dirty
+  const isDirty = useCallback(
+    (path: string) => {
+      const file = openFiles.find((f) => f.path === path);
+      return file?.isDirty || false;
+    },
+    [openFiles]
+  );
+
+  // Get file content
+  const getContent = useCallback(
+    (path: string) => {
+      const file = openFiles.find((f) => f.path === path);
+      return file?.content || null;
+    },
+    [openFiles]
+  );
+
+  // Get file by path
+  const getFile = useCallback(
+    (path: string) => {
+      return openFiles.find((f) => f.path === path) || null;
+    },
+    [openFiles]
+  );
+
+  const value: EditorContextValue = {
+    openFiles,
+    activeFile,
+    monaco,
+    editor,
+    isReady: monaco !== null && editor !== null,
+
+    openFile,
+    closeFile,
+    setActiveFile,
+    updateContent,
+    saveFile,
+
+    isDirty,
+    getContent,
+    getFile,
+  };
+
+  return (
+    <EditorContext.Provider value={value}>
+      {children}
+    </EditorContext.Provider>
+  );
+}

package/src/tools/CodeEditor/context/index.ts

@@ -0,0 +1 @@
+export { EditorProvider, useEditorContext } from './EditorProvider';

package/src/tools/CodeEditor/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useMonaco } from './useMonaco';
+export { useEditor } from './useEditor';
+export { useLanguage } from './useLanguage';
+export { useEditorTheme } from './useEditorTheme';

package/src/tools/CodeEditor/hooks/useEditor.ts

@@ -0,0 +1,36 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import type * as monaco from 'monaco-editor';
+
+import type { UseEditorReturn } from '../types';
+
+/**
+ * Hook to manage editor instance reference
+ *
+ * @example
+ * ```tsx
+ * const { editor, isReady, setEditor } = useEditor();
+ *
+ * // Pass setEditor to Editor component's onMount
+ * <Editor onMount={setEditor} />
+ *
+ * // Use editor when ready
+ * if (isReady) {
+ *   editor.getModel()?.getValue();
+ * }
+ * ```
+ */
+export function useEditor(): UseEditorReturn {
+  const [editor, setEditorState] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
+
+  const setEditor = useCallback((editorInstance: monaco.editor.IStandaloneCodeEditor | null) => {
+    setEditorState(editorInstance);
+  }, []);
+
+  return {
+    editor,
+    isReady: editor !== null,
+    setEditor,
+  };
+}

package/src/tools/CodeEditor/hooks/useEditorTheme.ts

@@ -0,0 +1,158 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
+
+/**
+ * Hook that syncs Monaco editor theme with the app theme.
+ *
+ * Reads CSS variables from the document and creates custom Monaco themes
+ * that match the current light/dark mode. Falls back to built-in 'vs' / 'vs-dark'.
+ *
+ * @param monaco - Monaco namespace (null during loading)
+ * @param themeOverride - Optional explicit theme name (skips auto-detection)
+ * @returns Resolved Monaco theme name to pass to editor options
+ */
+export function useEditorTheme(
+  monaco: typeof import('monaco-editor') | null,
+  themeOverride?: string,
+): string {
+  const appTheme = useResolvedTheme();
+  const registered = useRef(false);
+
+  // Register custom themes once Monaco is loaded
+  useEffect(() => {
+    if (!monaco || registered.current) return;
+
+    try {
+      const colors = _readCSSColors();
+
+      monaco.editor.defineTheme('app-dark', {
+        base: 'vs-dark',
+        inherit: true,
+        rules: [
+          { token: 'comment', foreground: '6A9955', fontStyle: 'italic' },
+          { token: 'keyword', foreground: 'C586C0' },
+          { token: 'string', foreground: 'CE9178' },
+          { token: 'number', foreground: 'B5CEA8' },
+          { token: 'type', foreground: '4EC9B0' },
+          { token: 'function', foreground: 'DCDCAA' },
+          { token: 'variable', foreground: '9CDCFE' },
+        ],
+        colors: {
+          'editor.background': colors.background,
+          'editor.foreground': colors.foreground,
+          'editor.lineHighlightBackground': colors.lineHighlight,
+          'editor.selectionBackground': colors.selection,
+          'editorCursor.foreground': colors.foreground,
+          'editorLineNumber.foreground': colors.mutedForeground,
+          'editorWidget.background': colors.card,
+          'editorWidget.border': colors.border,
+          'input.background': colors.card,
+          'dropdown.background': colors.card,
+        },
+      });
+
+      monaco.editor.defineTheme('app-light', {
+        base: 'vs',
+        inherit: true,
+        rules: [
+          { token: 'comment', foreground: '008000', fontStyle: 'italic' },
+          { token: 'keyword', foreground: 'AF00DB' },
+          { token: 'string', foreground: 'A31515' },
+          { token: 'number', foreground: '098658' },
+          { token: 'type', foreground: '267F99' },
+          { token: 'function', foreground: '795E26' },
+          { token: 'variable', foreground: '001080' },
+        ],
+        colors: {
+          'editor.background': colors.backgroundLight,
+          'editor.foreground': colors.foregroundLight,
+          'editor.lineHighlightBackground': colors.lineHighlightLight,
+          'editor.selectionBackground': colors.selectionLight,
+          'editorLineNumber.foreground': colors.mutedForegroundLight,
+          'editorWidget.background': colors.cardLight,
+          'editorWidget.border': colors.borderLight,
+        },
+      });
+
+      registered.current = true;
+    } catch {
+      // Fallback — use built-in themes
+    }
+  }, [monaco]);
+
+  // If explicit override provided, use it
+  if (themeOverride) return themeOverride;
+
+  // Use registered app themes if available, fallback to built-in
+  if (registered.current) {
+    return appTheme === 'dark' ? 'app-dark' : 'app-light';
+  }
+  return appTheme === 'dark' ? 'vs-dark' : 'vs';
+}
+
+
+/** Read CSS variables and convert HSL to hex for Monaco */
+function _readCSSColors() {
+  const get = (varName: string): string => {
+    if (typeof document === 'undefined') return '';
+    return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+  };
+
+  const hslToHex = (hsl: string): string => {
+    if (!hsl) return '';
+    // CSS vars are "0 0% 96%" — strip % before parsing
+    const parts = hsl.split(/\s+/).map(s => parseFloat(s.replace('%', '')));
+    if (parts.length < 3 || parts.some(isNaN)) return '';
+    const [h, s, l] = [parts[0], parts[1] / 100, parts[2] / 100];
+
+    const a = s * Math.min(l, 1 - l);
+    const f = (n: number) => {
+      const k = (n + h / 30) % 12;
+      const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+      return Math.round(255 * color).toString(16).padStart(2, '0');
+    };
+    return `#${f(0)}${f(8)}${f(4)}`;
+  };
+
+  // Read current (dark) theme CSS variables
+  const background = hslToHex(get('--background')) || '#0a0a0a';
+  const foreground = hslToHex(get('--foreground')) || '#f5f5f5';
+  const card = hslToHex(get('--card')) || '#141414';
+  const border = hslToHex(get('--border')) || '#262626';
+  const mutedForeground = hslToHex(get('--muted-foreground')) || '#858585';
+
+  // Compute derived colors
+  const lineHighlight = _adjustBrightness(background, 10);
+  const primary = hslToHex(get('--primary'));
+  const selection = primary ? _adjustBrightness(primary, -40) : '#264F78';
+
+  // Light theme colors (hardcoded since we can't switch CSS context)
+  return {
+    background,
+    foreground,
+    card,
+    border,
+    mutedForeground,
+    lineHighlight,
+    selection,
+    // Light variants
+    backgroundLight: '#ffffff',
+    foregroundLight: '#1a1a1a',
+    cardLight: '#ffffff',
+    borderLight: '#e5e5e5',
+    mutedForegroundLight: '#737373',
+    lineHighlightLight: '#f5f5f5',
+    selectionLight: '#ADD6FF',
+  };
+}
+
+function _adjustBrightness(hex: string, amount: number): string {
+  const num = parseInt(hex.replace('#', ''), 16);
+  const r = Math.min(255, Math.max(0, ((num >> 16) & 0xff) + amount));
+  const g = Math.min(255, Math.max(0, ((num >> 8) & 0xff) + amount));
+  const b = Math.min(255, Math.max(0, (num & 0xff) + amount));
+  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+}
+

package/src/tools/CodeEditor/hooks/useLanguage.ts

@@ -0,0 +1,29 @@
+'use client';
+
+import { useMemo } from 'react';
+import { getLanguageByFilename } from '../lib/languages';
+
+/**
+ * Hook to detect language from filename
+ *
+ * @param filename - File name or path
+ * @returns Monaco language ID
+ *
+ * @example
+ * ```tsx
+ * const language = useLanguage('app.tsx');
+ * // Returns: 'typescript'
+ *
+ * const language2 = useLanguage('/path/to/Dockerfile');
+ * // Returns: 'dockerfile'
+ * ```
+ */
+export function useLanguage(filename: string | undefined): string {
+  return useMemo(() => {
+    if (!filename) return 'plaintext';
+
+    // Extract basename from path
+    const basename = filename.split('/').pop() || filename;
+    return getLanguageByFilename(basename);
+  }, [filename]);
+}