@djangocfg/widget-code 0.1.1

package/src/editor/components/DiffEditor.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import type * as monaco from 'monaco-editor';
+
+import { useMonaco } from '../hooks/useMonaco';
+import { useEditorTheme, EDITOR_BACKGROUND } from '../hooks/useEditorTheme';
+import type { DiffEditorProps } from '../types';
+
+/**
+ * Monaco Diff Editor Component
+ *
+ * Side-by-side or inline diff view for comparing two versions of content.
+ *
+ * @example
+ * ```tsx
+ * <DiffEditor
+ *   original={originalCode}
+ *   modified={modifiedCode}
+ *   language="typescript"
+ * />
+ * ```
+ */
+export function DiffEditor({
+  original,
+  modified,
+  language = 'plaintext',
+  options = {},
+  className = '',
+  height = '100%',
+}: DiffEditorProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<monaco.editor.IStandaloneDiffEditor | null>(null);
+  const { monaco, isLoading, error } = useMonaco();
+  const resolvedTheme = useEditorTheme(monaco, options.theme);
+
+  // Create diff editor — runs once Monaco is available.
+  useEffect(() => {
+    if (!monaco || !containerRef.current || editorRef.current) return;
+
+    const editor = monaco.editor.createDiffEditor(containerRef.current, {
+      theme: resolvedTheme,
+      fontSize: options.fontSize || 14,
+      fontFamily: options.fontFamily || "'Fira Code', 'Consolas', monospace",
+      readOnly: true,
+      automaticLayout: true,
+      renderSideBySide: true,
+      scrollBeyondLastLine: false,
+      minimap: { enabled: false },
+    });
+
+    const originalModel = monaco.editor.createModel(original, language);
+    const modifiedModel = monaco.editor.createModel(modified, language);
+
+    editor.setModel({
+      original: originalModel,
+      modified: modifiedModel,
+    });
+
+    editorRef.current = editor;
+
+    return () => {
+      // Dispose models before the editor so Monaco releases all references.
+      originalModel.dispose();
+      modifiedModel.dispose();
+      editor.dispose();
+      editorRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [monaco]);
+
+  // Update models when content changes — skip no-op writes to avoid
+  // resetting scroll/decorations on unrelated re-renders.
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    const model = editor.getModel();
+    if (!model) return;
+    if (model.original.getValue() !== original) model.original.setValue(original);
+    if (model.modified.getValue() !== modified) model.modified.setValue(modified);
+  }, [original, modified]);
+
+  // Update language
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor || !monaco) return;
+
+    const model = editor.getModel();
+    if (model) {
+      monaco.editor.setModelLanguage(model.original, language);
+      monaco.editor.setModelLanguage(model.modified, language);
+    }
+  }, [language, monaco]);
+
+  // Apply theme — must go through setTheme(), updateOptions ignores `theme`.
+  useEffect(() => {
+    if (!monaco || !editorRef.current) return;
+    monaco.editor.setTheme(resolvedTheme);
+  }, [monaco, resolvedTheme]);
+
+  if (error) {
+    return (
+      <div
+        className={className}
+        role="alert"
+        style={{
+          width: '100%',
+          height,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 16,
+          textAlign: 'center',
+          backgroundColor: EDITOR_BACKGROUND,
+          color: 'hsl(var(--destructive))',
+          fontSize: 13,
+        }}
+      >
+        Failed to load diff editor: {error.message}
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div
+        className={className}
+        role="status"
+        aria-busy="true"
+        style={{
+          width: '100%',
+          height,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: EDITOR_BACKGROUND,
+          color: 'hsl(var(--muted-foreground))',
+          fontSize: 13,
+        }}
+      >
+        Loading diff editor…
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{
+        width: '100%',
+        height,
+        backgroundColor: EDITOR_BACKGROUND,
+      }}
+    />
+  );
+}

package/src/editor/components/Editor.tsx

@@ -0,0 +1,293 @@
+'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, EDITOR_BACKGROUND } 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,
+    autoFocus = false,
+    onSave,
+  },
+  ref
+) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const { monaco, isLoading, error } = 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]);
+
+  // Keep latest callbacks in refs so the create-effect can stay [monaco]-only
+  // without going stale when the parent passes new function identities.
+  const onChangeRef = useRef(onChange);
+  const onMountRef = useRef(onMount);
+  const onSaveRef = useRef(onSave);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+    onMountRef.current = onMount;
+    onSaveRef.current = onSave;
+  });
+
+  // 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 — runs once Monaco is available.
+  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,
+      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;
+
+    // Change listener — always attached; reads latest onChange via ref.
+    const changeSub = editor.onDidChangeModelContent(() => {
+      onChangeRef.current?.(editor.getValue());
+    });
+
+    // Auto-height: resize container to fit content
+    let sizeSub: monaco.IDisposable | undefined;
+    if (autoHeight) {
+      sizeSub = editor.onDidContentSizeChange(() => updateContentHeight(editor));
+      updateContentHeight(editor);
+    }
+
+    // Cmd/Ctrl+S → save. Registered as a Monaco command so it wins over
+    // the browser's "save page" default whenever the editor has focus.
+    // Read through the ref so swapping handlers does not need to rebuild.
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+      onSaveRef.current?.(editor.getValue());
+    });
+
+    // autoFocus on first mount — Monaco refuses focus during layout
+    // measurement otherwise.
+    if (autoFocus) {
+      // queueMicrotask: defer past Monaco's own post-create layout so the
+      // focus call lands on a fully laid-out editor.
+      queueMicrotask(() => editorRef.current?.focus());
+    }
+
+    // Call onMount callback
+    onMountRef.current?.(editor);
+
+    return () => {
+      changeSub.dispose();
+      sizeSub?.dispose();
+      // Dispose the model explicitly — editor.dispose() does not always
+      // release models in older Monaco builds, and never the ones we own.
+      editor.getModel()?.dispose();
+      editor.dispose();
+      editorRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [monaco]);
+
+  // Sync value when the prop changes from outside (skip echoes of user typing).
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    const currentValue = editor.getValue();
+    // If the prop already matches the editor, nothing to do — this also
+    // covers the common controlled case where onChange echoes value back,
+    // so we never reset the cursor on the user's own keystrokes.
+    if (value === currentValue) return;
+
+    const position = editor.getPosition();
+    const selections = editor.getSelections();
+
+    // executeEdits preserves undo history (unlike setValue, which wipes it).
+    const model = editor.getModel();
+    if (model) {
+      editor.executeEdits('external-sync', [
+        { range: model.getFullModelRange(), text: value, forceMoveMarkers: true },
+      ]);
+      editor.pushUndoStop();
+    } else {
+      editor.setValue(value);
+    }
+
+    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 && model.getLanguageId() !== language) {
+      monaco.editor.setModelLanguage(model, language);
+    }
+  }, [language, monaco]);
+
+  // Apply theme — Monaco ignores `theme` inside updateOptions, it must go
+  // through setTheme(). This is what makes light/dark switching actually work.
+  useEffect(() => {
+    if (!monaco || !editorRef.current) return;
+    monaco.editor.setTheme(resolvedTheme);
+  }, [monaco, resolvedTheme]);
+
+  // Update options when props change
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    editor.updateOptions({
+      fontSize: options.fontSize,
+      readOnly: options.readOnly,
+      minimap: { enabled: options.minimap !== false },
+      wordWrap: options.wordWrap,
+      lineNumbers: options.lineNumbers,
+      tabSize: options.tabSize,
+      insertSpaces: options.insertSpaces,
+    });
+  }, [
+    options.fontSize,
+    options.readOnly,
+    options.minimap,
+    options.wordWrap,
+    options.lineNumbers,
+    options.tabSize,
+    options.insertSpaces,
+  ]);
+
+  if (error) {
+    return (
+      <div
+        className={className}
+        role="alert"
+        style={{
+          width,
+          height,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 16,
+          textAlign: 'center',
+          backgroundColor: EDITOR_BACKGROUND,
+          color: 'hsl(var(--destructive))',
+          fontSize: 13,
+        }}
+      >
+        Failed to load editor: {error.message}
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div
+        className={className}
+        role="status"
+        aria-busy="true"
+        style={{
+          width,
+          height,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: EDITOR_BACKGROUND,
+          color: 'hsl(var(--muted-foreground))',
+          fontSize: 13,
+        }}
+      >
+        Loading editor…
+      </div>
+    );
+  }
+
+  const resolvedHeight = autoHeight && contentHeight != null ? contentHeight : height;
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{
+        width,
+        height: resolvedHeight,
+        backgroundColor: EDITOR_BACKGROUND,
+        ...(autoHeight && { minHeight, maxHeight, overflow: 'hidden' }),
+      }}
+    />
+  );
+});

package/src/editor/components/index.ts

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

package/src/editor/context/EditorProvider.tsx

@@ -0,0 +1,212 @@
+'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);
+          const next = newFiles[newIndex];
+          if (next) setActiveFilePath(next.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]
+  );
+
+  // Memoize so consumers don't re-render on unrelated parent renders.
+  const value = useMemo<EditorContextValue>(
+    () => ({
+      openFiles,
+      activeFile,
+      monaco,
+      editor,
+      isReady: monaco !== null && editor !== null,
+
+      openFile,
+      closeFile,
+      setActiveFile,
+      updateContent,
+      saveFile,
+
+      isDirty,
+      getContent,
+      getFile,
+    }),
+    [
+      openFiles,
+      activeFile,
+      monaco,
+      editor,
+      openFile,
+      closeFile,
+      setActiveFile,
+      updateContent,
+      saveFile,
+      isDirty,
+      getContent,
+      getFile,
+    ],
+  );
+
+  return (
+    <EditorContext.Provider value={value}>
+      {children}
+    </EditorContext.Provider>
+  );
+}

package/src/editor/context/index.ts

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