or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

ace-editor.mddiff-editor.mdindex.mdsplit-editor.md
tile.json

tessl/npm-react-ace

A React component for Ace Editor providing comprehensive code editing capabilities with syntax highlighting, themes, and customization options

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-ace@13.0.x

To install, run

npx @tessl/cli install tessl/npm-react-ace@13.0.0

index.mddocs/

React-Ace

React-Ace is a comprehensive React component library that provides seamless integration with the Ace Editor (a high-performance code editor). It offers multiple editor components including the main AceEditor component, a Split Editor for side-by-side editing, and a Diff Editor for comparing code differences. The library supports extensive customization through themes, syntax highlighting modes, and editor options, while maintaining TypeScript support for type safety.

Package Information

  • Package Name: react-ace
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-ace ace-builds

Core Imports

import AceEditor from "react-ace";
import { diff, split } from "react-ace";

For specific imports:

import { 
  diff, 
  split,
  IAceEditorProps,
  IDiffEditorProps,
  IDiffEditorState,
  ISplitEditorProps,
  IAceOptions,
  IAnnotation,
  ICommand,
  ICommandBindKey,
  ICommandManager,
  IEditorProps,
  IMarker,
  getAceInstance,
  debounce,
  editorOptions,
  editorEvents,
  EditorOption,
  EditorEvent
} from "react-ace";

CommonJS:

const AceEditor = require("react-ace").default;
const { 
  diff, 
  split, 
  getAceInstance, 
  debounce, 
  editorOptions, 
  editorEvents 
} = require("react-ace");

Basic Usage

import React from "react";
import AceEditor, { getAceInstance, debounce } from "react-ace";

// Import required ace-builds modules
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";

function MyEditor() {
  const [code, setCode] = React.useState('console.log("Hello World");');

  // Use debounce utility for performance optimization
  const debouncedChange = React.useCallback(
    debounce((value: string) => {
      setCode(value);
      // Perform expensive operations like API calls here
    }, 500),
    []
  );

  // Access ACE instance for advanced configuration
  const handleLoad = (editor: any) => {
    const ace = getAceInstance();
    // Configure ACE editor with advanced options
    console.log("ACE instance loaded:", ace);
  };

  return (
    <AceEditor
      mode="javascript"
      theme="github"
      onChange={debouncedChange}
      onLoad={handleLoad}
      name="my-editor"
      value={code}
      width="100%"
      height="400px"
      fontSize={14}
      showPrintMargin={true}
      showGutter={true}
      highlightActiveLine={true}
      setOptions={{
        enableBasicAutocompletion: true,
        enableLiveAutocompletion: true,
        enableSnippets: true,
        showLineNumbers: true,
        tabSize: 2,
      }}
    />
  );
}

Architecture

React-Ace is built around three main components:

  • AceEditor Component: The primary code editor component with full Ace Editor integration
  • Split Editor: Provides side-by-side editing capabilities with synchronized or independent panes
  • Diff Editor: Specialized component for comparing and highlighting differences between two text sources
  • Type System: Comprehensive TypeScript interfaces for all configuration options and event handlers
  • Ace Integration: Direct integration with ace-builds package for core editor functionality

Capabilities

Main Code Editor

The primary AceEditor component provides comprehensive code editing functionality with syntax highlighting, themes, autocomplete, and extensive customization options.

declare class ReactAce extends React.Component<IAceEditorProps> {}

interface IAceEditorProps {
  mode?: string | object;
  theme?: string;
  value?: string;
  defaultValue?: string;
  height?: string;
  width?: string;
  className?: string;
  fontSize?: number | string;
  lineHeight?: number | string;
  showGutter?: boolean;
  showPrintMargin?: boolean;
  highlightActiveLine?: boolean;
  focus?: boolean;
  cursorStart?: number;
  wrapEnabled?: boolean;
  readOnly?: boolean;
  minLines?: number;
  maxLines?: number;
  navigateToFileEnd?: boolean;
  debounceChangePeriod?: number;
  enableBasicAutocompletion?: boolean | string[];
  enableLiveAutocompletion?: boolean | string[];
  enableMobileMenu?: boolean;
  tabSize?: number;
  placeholder?: string;
  scrollMargin?: number[];
  enableSnippets?: boolean;
  onSelectionChange?: (value: any, event?: any) => void;
  onCursorChange?: (value: any, event?: any) => void;
  onInput?: (event?: any) => void;
  onLoad?: (editor: Ace.Editor) => void;
  onValidate?: (annotations: Ace.Annotation[]) => void;
  onBeforeLoad?: (ace: any) => void;
  onChange?: (value: string, event?: any) => void;
  onSelection?: (selectedText: string, event?: any) => void;
  onCopy?: (value: string) => void;
  onPaste?: (value: string) => void;
  onFocus?: (event: any, editor?: Ace.Editor) => void;
  onBlur?: (event: any, editor?: Ace.Editor) => void;
  onScroll?: (editor: IEditorProps) => void;
  editorProps?: IEditorProps;
  setOptions?: IAceOptions;
  keyboardHandler?: string;
  commands?: ICommand[];
  annotations?: Ace.Annotation[];
  markers?: IMarker[];
}

Main Editor

Split Screen Editor

Split screen editor component for side-by-side editing with multiple panes that can be synchronized or operate independently.

declare class SplitComponent extends React.Component<ISplitEditorProps> {}

interface ISplitEditorProps {
  splits: number;
  orientation?: string;
  value?: string[];
  defaultValue?: string[];
  mode?: string;
  theme?: string;
  height?: string;
  width?: string;
  className?: string;
  fontSize?: number | string;
  showGutter?: boolean;
  showPrintMargin?: boolean;
  highlightActiveLine?: boolean;
  focus?: boolean;
  cursorStart?: number;
  wrapEnabled?: boolean;
  readOnly?: boolean;
  minLines?: number;
  maxLines?: number;
  onChange?: (value: string[], event?: any) => void;
  onLoad?: (editor: IEditorProps) => void;
  annotations?: IAnnotation[][];
  markers?: IMarker[][];
}

Split Editor

Diff Editor

Diff editor component for comparing two pieces of text with visual highlighting of differences.

declare class DiffComponent extends React.Component<IDiffEditorProps, IDiffEditorState> {}

interface IDiffEditorProps {
  value?: string[];
  height?: string;
  width?: string;
  className?: string;
  fontSize?: number;
  mode?: string;
  theme?: string;
  orientation?: string;
  splits?: number;
  readOnly?: boolean;
  showGutter?: boolean;
  showPrintMargin?: boolean;
  highlightActiveLine?: boolean;
  onChange?: (value: string[], event?: any) => void;
  onLoad?: (editor: IEditorProps) => void;
}

interface IDiffEditorState {
  value: string[];
}

Diff Editor

Utility Functions

Utility functions for working with ACE editor instances and performance optimization.

/**
 * Gets the ACE instance with SSR (Server-Side Rendering) support
 * @returns ACE builds object for dynamic import and configuration
 */
function getAceInstance(): any;

/**
 * Utility function for debouncing function calls
 * @param fn - Function to debounce
 * @param delay - Delay in milliseconds
 * @returns Debounced function
 */
function debounce(fn: (...args: any[]) => void, delay: number): (...args: any[]) => void;

Editor Configuration Constants

Pre-defined constants for editor options and events.

/** Array of all supported ACE editor options */
const editorOptions: EditorOption[];

/** Array of all supported ACE editor events */
const editorEvents: EditorEvent[];

/** Union type of all supported editor options */
type EditorOption = "selectionStyle" | "highlightActiveLine" | "highlightSelectedWord" | 
  "readOnly" | "cursorStyle" | "mergeUndoDeltas" | "behavioursEnabled" | 
  "wrapBehavioursEnabled" | "autoScrollEditorIntoView" | "hScrollBarAlwaysVisible" |
  "vScrollBarAlwaysVisible" | "highlightGutterLine" | "animatedScroll" | 
  "showInvisibles" | "showPrintMargin" | "printMarginColumn" | "printMargin" |
  "fadeFoldWidgets" | "showFoldWidgets" | "showLineNumbers" | "showGutter" |
  "displayIndentGuides" | "fontSize" | "fontFamily" | "maxLines" | "minLines" |
  "scrollPastEnd" | "fixedWidthGutter" | "theme" | "scrollSpeed" | "dragDelay" |
  "dragEnabled" | "focusTimout" | "tooltipFollowsMouse" | "firstLineNumber" |
  "overwrite" | "newLineMode" | "useWorker" | "useSoftTabs" | "tabSize" |
  "wrap" | "foldStyle" | "mode" | "enableMultiselect" | "enableEmmet" |
  "enableBasicAutocompletion" | "enableLiveAutocompletion" | "enableSnippets" |
  "spellcheck" | "useElasticTabstops";

/** Union type of all supported editor events */
type EditorEvent = "onChange" | "onSelectionChange" | "onCursorChange" | "onInput" |
  "onLoad" | "onValidate" | "onBeforeLoad" | "onSelection" | "onCopy" | 
  "onPaste" | "onFocus" | "onBlur" | "onScroll";

Core Types

Note: The following interfaces reference types from the ace-builds package dependency.

interface IAceOptions {
  selectionStyle?: "line" | "text";
  highlightActiveLine?: boolean;
  highlightSelectedWord?: boolean;
  readOnly?: boolean;
  cursorStyle?: "ace" | "slim" | "smooth" | "wide";
  mergeUndoDeltas?: false | true | "always";
  behavioursEnabled?: boolean;
  wrapBehavioursEnabled?: boolean;
  autoScrollEditorIntoView?: boolean;
  hScrollBarAlwaysVisible?: boolean;
  vScrollBarAlwaysVisible?: boolean;
  highlightGutterLine?: boolean;
  animatedScroll?: boolean;
  showInvisibles?: string | boolean;
  showPrintMargin?: boolean;
  printMarginColumn?: number;
  printMargin?: boolean | number;
  fadeFoldWidgets?: boolean;
  showFoldWidgets?: boolean;
  showLineNumbers?: boolean;
  showGutter?: boolean;
  displayIndentGuides?: boolean;
  fontSize?: number | string;
  fontFamily?: string;
  maxLines?: number;
  minLines?: number;
  scrollPastEnd?: boolean;
  fixedWidthGutter?: boolean;
  theme?: string;
  scrollSpeed?: number;
  dragDelay?: number;
  dragEnabled?: boolean;
  focusTimout?: number;
  tooltipFollowsMouse?: boolean;
  firstLineNumber?: number;
  overwrite?: boolean;
  newLineMode?: "auto" | "unix" | "windows";
  useWorker?: boolean;
  useSoftTabs?: boolean;
  tabSize?: number;
  wrap?: boolean;
  foldStyle?: "markbegin" | "markbeginend" | "manual";
  mode?: string;
  enableMultiselect?: boolean;
  enableEmmet?: boolean;
  enableBasicAutocompletion?: boolean;
  enableLiveAutocompletion?: boolean;
  enableSnippets?: boolean;
  spellcheck?: boolean;
  useElasticTabstops?: boolean;
}

interface IAnnotation {
  row: number;
  column: number;
  text: string;
  type: "error" | "info" | "warning";
}

interface IMarker {
  startRow: number;
  startCol: number;
  endRow: number;
  endCol: number;
  className: string;
  type: "fullLine" | "screenLine" | "text" | Ace.MarkerRenderer;
  inFront?: boolean;
}

interface ICommand {
  name: string;
  bindKey: ICommandBindKey;
  exec: string | ((editor: Ace.Editor, args?: any) => any);
  readOnly?: boolean;
}

interface ICommandBindKey {
  win: string;
  mac: string;
}

interface ICommandManager {
  byName: any;
  commands: any;
  platform: string;
  addCommands(commands: any[]): void;
  addCommand(command: any): void;
  exec(name: string, editor: any, args: any): void;
  bindKey?(bindKey: any, command: any): void;
}

interface IEditorProps {
  [index: string]: any;
  $blockScrolling?: number | boolean;
  $blockSelectEnabled?: boolean;
  $enableBlockSelect?: boolean;
  $enableMultiselect?: boolean;
}