tessl/npm-uiw--react-codemirror

React wrapper component for CodeMirror 6 editor with TypeScript support and extensible theming system

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

React CodeMirror

Name: tessl/npm-uiw--react-codemirror
Author: tessl

React CodeMirror is a comprehensive React wrapper for CodeMirror 6, providing a modern, type-safe interface for integrating advanced code editing capabilities into React applications. It offers both a main component and hook-based API with full TypeScript support, extensible theming, and seamless CodeMirror 6 integration.

Package Information

Package Name: @uiw/react-codemirror
Package Type: npm
Language: TypeScript
Installation: npm install @uiw/react-codemirror

Core Imports

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

For CommonJS:

const CodeMirror = require("@uiw/react-codemirror");
const { useCodeMirror } = require("@uiw/react-codemirror");

Basic Usage

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

function App() {
  const [value, setValue] = React.useState("console.log('hello world!');");
  
  const onChange = React.useCallback((val, viewUpdate) => {
    console.log('val:', val);
    setValue(val);
  }, []);

  return (
    <CodeMirror
      value={value}
      height="200px"
      extensions={[javascript({ jsx: true })]}
      onChange={onChange}
    />
  );
}

Architecture

React CodeMirror is built around several key components:

Main Component: CodeMirror component providing declarative React interface
Hook API: useCodeMirror hook for advanced integration and custom containers
Extension System: Full CodeMirror 6 extension support with default configurations
Theme Engine: Built-in light/dark themes plus custom theme creation
State Management: Automatic synchronization between React state and CodeMirror state
Event System: Comprehensive event handling for changes, updates, and editor lifecycle

Capabilities

Main Component

Primary React component that renders a CodeMirror 6 editor with full configuration support. Handles all common use cases with declarative props.

declare const ReactCodeMirror: React.ForwardRefExoticComponent<
  ReactCodeMirrorProps & React.RefAttributes<ReactCodeMirrorRef>
>;

export default ReactCodeMirror;

interface ReactCodeMirrorProps
  extends Omit<EditorStateConfig, 'doc' | 'extensions'>,
    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {
  value?: string;
  height?: string;
  minHeight?: string;
  maxHeight?: string;
  width?: string;
  minWidth?: string;
  maxWidth?: string;
  autoFocus?: boolean;
  placeholder?: string | HTMLElement;
  theme?: 'light' | 'dark' | 'none' | Extension;
  basicSetup?: boolean | BasicSetupOptions;
  editable?: boolean;
  readOnly?: boolean;
  indentWithTab?: boolean;
  onChange?(value: string, viewUpdate: ViewUpdate): void;
  onStatistics?(data: Statistics): void;
  onUpdate?(viewUpdate: ViewUpdate): void;
  onCreateEditor?(view: EditorView, state: EditorState): void;
  extensions?: Extension[];
  root?: ShadowRoot | Document;
  initialState?: {
    json: any;
    fields?: Record<string, StateField<any>>;
  };
}

interface ReactCodeMirrorRef {
  editor?: HTMLDivElement | null;
  state?: EditorState;
  view?: EditorView;
}

Main Component

Hook API

Hook-based interface for advanced integration scenarios, custom containers, and direct CodeMirror state management.

function useCodeMirror(props: UseCodeMirror): {
  state: EditorState | undefined;
  setState: React.Dispatch<React.SetStateAction<EditorState | undefined>>;
  view: EditorView | undefined;
  setView: React.Dispatch<React.SetStateAction<EditorView | undefined>>;
  container: HTMLDivElement | null | undefined;
  setContainer: React.Dispatch<React.SetStateAction<HTMLDivElement | null | undefined>>;
};

interface UseCodeMirror extends ReactCodeMirrorProps {
  container?: HTMLDivElement | null;
}

Hook API

Extensions and Configuration

Default extension management and configuration utilities for setting up common CodeMirror features.

function getDefaultExtensions(options?: DefaultExtensionsOptions): Extension[];

interface DefaultExtensionsOptions {
  indentWithTab?: boolean;
  basicSetup?: boolean | BasicSetupOptions;
  placeholder?: string | HTMLElement;
  theme?: 'light' | 'dark' | 'none' | Extension;
  readOnly?: boolean;
  editable?: boolean;
}

Extensions

Utilities and Statistics

Utility functions for extracting editor statistics and managing editor state information.

function getStatistics(view: ViewUpdate): Statistics;

interface Statistics {
  length: number;
  lineCount: number;
  line: Line;
  lineBreak: string;
  readOnly: boolean;
  tabSize: number;
  selection: EditorSelection;
  selectionAsSingle: SelectionRange;
  ranges: readonly SelectionRange[];
  selectionCode: string;
  selections: string[];
  selectedText: boolean;
}

Utilities

Theme System

Built-in themes and utilities for creating custom themes for the CodeMirror editor.

const defaultLightThemeOption: Extension;

Themes

Types

Core types used throughout the API. All CodeMirror types are re-exported for convenience:

// Re-exported from @codemirror/state for direct use
export {
  EditorState,
  EditorStateConfig, 
  Extension,
  StateField,
  EditorSelection,
  SelectionRange,
  Line
} from '@codemirror/state';

// Re-exported from @codemirror/view for direct use
export {
  EditorView,
  ViewUpdate
} from '@codemirror/view';

// Re-exported from @uiw/codemirror-extensions-basic-setup
export { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';

// Internal annotation used for external change tracking
export const ExternalChange: import('@codemirror/state').AnnotationType<boolean>;

Usage:

// You can import CodeMirror types directly from react-codemirror
import { EditorState, EditorView, Extension } from "@uiw/react-codemirror";

// Instead of importing from the original packages
// import { EditorState, EditorView, Extension } from "@codemirror/state";
// import { EditorView } from "@codemirror/view";