Extensions and Configuration

/**
 * Generate default extension array based on configuration options
 * @param options - Configuration options for default extensions
 * @returns Array of CodeMirror extensions ready for use
 */
function getDefaultExtensions(options?: DefaultExtensionsOptions): Extension[];

interface DefaultExtensionsOptions {
  /** Enable tab indentation - defaults to true */
  indentWithTab?: boolean;
  /** Basic setup configuration - defaults to true */
  basicSetup?: boolean | BasicSetupOptions;
  /** Placeholder text or element when editor is empty */
  placeholder?: string | HTMLElement;
  /** Theme selection - 'light', 'dark', 'none', or custom Extension */
  theme?: 'light' | 'dark' | 'none' | Extension;
  /** Whether content is read-only - defaults to false */
  readOnly?: boolean;
  /** Whether content is editable - defaults to true */
  editable?: boolean;
}

import { getDefaultExtensions } from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";

// Basic default extensions
const basicExtensions = getDefaultExtensions();

// Customized default extensions
const customExtensions = getDefaultExtensions({
  theme: 'dark',
  indentWithTab: true,
  placeholder: 'Enter your code here...',
  basicSetup: {
    lineNumbers: true,
    highlightActiveLine: true,
    bracketMatching: true,
    autocompletion: true,
  },
});

// Combined with language extensions
const fullExtensions = [
  ...getDefaultExtensions({ theme: oneDark }),
  javascript({ jsx: true }),
];

interface BasicSetupOptions {
  /** Show line numbers in the gutter */
  lineNumbers?: boolean;
  /** Highlight the line where the cursor is */
  highlightActiveLineGutter?: boolean;
  /** Highlight special characters */
  highlightSpecialChars?: boolean;
  /** Enable undo/redo history */
  history?: boolean;
  /** Enable code folding in the gutter */
  foldGutter?: boolean;
  /** Draw selection highlights */
  drawSelection?: boolean;
  /** Show drop cursor when dragging */
  dropCursor?: boolean;
  /** Allow multiple selections */
  allowMultipleSelections?: boolean;
  /** Auto-indent on input */
  indentOnInput?: boolean;
  /** Enable syntax highlighting */
  syntaxHighlighting?: boolean;
  /** Highlight matching brackets */
  bracketMatching?: boolean;
  /** Auto-close brackets */
  closeBrackets?: boolean;
  /** Enable autocompletion */
  autocompletion?: boolean;
  /** Enable rectangular selection */
  rectangularSelection?: boolean;
  /** Show crosshair cursor */
  crosshairCursor?: boolean;
  /** Highlight the active line */
  highlightActiveLine?: boolean;
  /** Highlight selection matches */
  highlightSelectionMatches?: boolean;
  /** Include close brackets keymap */
  closeBracketsKeymap?: boolean;
  /** Include default keymap */
  defaultKeymap?: boolean;
  /** Include search keymap */
  searchKeymap?: boolean;
  /** Include history keymap */
  historyKeymap?: boolean;
  /** Include fold keymap */
  foldKeymap?: boolean;
  /** Include completion keymap */
  completionKeymap?: boolean;
  /** Include lint keymap */
  lintKeymap?: boolean;
}

import CodeMirror from "@uiw/react-codemirror";
import { python } from "@codemirror/lang-python";

// Minimal setup for simple editing
function MinimalEditor() {
  return (
    <CodeMirror
      value="print('Hello World')"
      basicSetup={{
        lineNumbers: false,
        highlightActiveLine: false,
        history: true,
        autocompletion: false,
      }}
      extensions={[python()]}
    />
  );
}

// Full-featured setup for development
function FullEditor() {
  return (
    <CodeMirror
      value="print('Hello World')"
      basicSetup={{
        lineNumbers: true,
        highlightActiveLine: true,
        highlightActiveLineGutter: true,
        history: true,
        foldGutter: true,
        bracketMatching: true,
        closeBrackets: true,
        autocompletion: true,
        syntaxHighlighting: true,
        rectangularSelection: true,
        highlightSelectionMatches: true,
        searchKeymap: true,
        historyKeymap: true,
        foldKeymap: true,
        completionKeymap: true,
      }}
      extensions={[python()]}
    />
  );
}

// Built-in theme constants exported from extensions
const defaultLightThemeOption: Extension;

// Re-exported from @codemirror/theme-one-dark
const oneDark: Extension;

import CodeMirror from "@uiw/react-codemirror";
import { getDefaultExtensions, oneDark, defaultLightThemeOption } from "@uiw/react-codemirror";
import { EditorView } from "@codemirror/view";

// Using built-in themes
function ThemedEditor() {
  return (
    <div>
      {/* Light theme (default) */}
      <CodeMirror
        value="// Light theme"
        theme="light"
      />
      
      {/* Dark theme */}
      <CodeMirror
        value="// Dark theme"
        theme="dark"
      />
      
      {/* No theme */}
      <CodeMirror
        value="// No theme"
        theme="none"
      />
      
      {/* Custom theme extension */}
      <CodeMirror
        value="// Custom theme"
        theme={oneDark}
      />
    </div>
  );
}

// Creating custom theme
function CustomThemedEditor() {
  const customTheme = EditorView.theme({
    '&': {
      color: '#333',
      backgroundColor: '#f5f5f5',
    },
    '.cm-content': {
      padding: '10px',
    },
    '.cm-focused .cm-cursor': {
      borderLeftColor: '#ff6b6b',
    },
    '.cm-focused .cm-selectionBackground, ::selection': {
      backgroundColor: '#ffd93d55',
    },
  });

  return (
    <CodeMirror
      value="// Custom styled editor"
      theme={customTheme}
    />
  );
}

import CodeMirror from "@uiw/react-codemirror";
import { getDefaultExtensions } from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { linter, lintGutter } from "@codemirror/lint";
import { autocompletion, completionKeymap } from "@codemirror/autocomplete";

// Combining extensions systematically
function ExtendedEditor() {
  const baseExtensions = getDefaultExtensions({
    theme: 'dark',
    basicSetup: {
      lineNumbers: true,
      bracketMatching: true,
    },
  });

  const languageExtensions = [
    javascript({ jsx: true, typescript: true }),
  ];

  const lintingExtensions = [
    lintGutter(),
    linter((view) => {
      // Custom linting logic
      return [];
    }),
  ];

  const completionExtensions = [
    autocompletion(),
    completionKeymap,
  ];

  const allExtensions = [
    ...baseExtensions,
    ...languageExtensions,
    ...lintingExtensions,
    ...completionExtensions,
  ];

  return (
    <CodeMirror
      value="const greeting = 'Hello World';"
      extensions={allExtensions}
      height="300px"
    />
  );
}

// Conditional extension loading
function ConditionalEditor({ enableLinting = false, language = 'javascript' }) {
  const extensions = React.useMemo(() => {
    const base = getDefaultExtensions();
    const result = [...base];

    // Add language support
    if (language === 'javascript') {
      result.push(javascript({ jsx: true }));
    }

    // Conditionally add linting
    if (enableLinting) {
      result.push(lintGutter());
    }

    return result;
  }, [enableLinting, language]);

  return (
    <CodeMirror
      value="// Conditional extensions"
      extensions={extensions}
    />
  );
}