react-ace/types.d.ts

A react component for Ace Editor

// Type definitions for react-ace 4.1.3
// Project: https://github.com/securingsincity/react-ace
// Definitions by: Alberto Nicoletti <https://github.com/illbexyz>

import { Component, CSSProperties } from "react";

export interface Annotation {
  row: number;
  column: number;
  type: string;
  text: string;
}

export interface Marker {
  startRow: number;
  startCol: number;
  endRow: number;
  endCol: number;
  className: string;
  type: string;
}

export interface CommandBindKey {
  win: string;
  mac: string;
}

export interface Command {
  name: string;
  bindKey: CommandBindKey;
  exec(editor: any): void;
}

export interface Selection {
  getCursor(): Annotation;
}

/**
 * See https://github.com/ajaxorg/ace/wiki/Configuring-Ace
 */
export interface AceOptions {
  selectionStyle?: "line" | "text";
  highlightActiveLine?: boolean;
  highlightSelectedWord?: boolean;
  readOnly?: boolean;
  cursorStyle?: "ace" | "slim" | "smooth" | "wide";
  mergeUndoDeltas?: false | true | "always";
  behavioursEnabled?: boolean;
  wrapBehavioursEnabled?: boolean;
  /** this is needed if editor is inside scrollable page */
  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;
  /** number or css font-size string */
  fontSize?: number | string;
  /** css */
  fontFamily?: string;
  maxLines?: number;
  minLines?: number;
  scrollPastEnd?: boolean;
  fixedWidthGutter?: boolean;
  /** path to a theme e.g "ace/theme/textmate" */
  theme?: string;
  scrollSpeed?: number;
  dragDelay?: number;
  dragEnabled?: boolean;
  focusTimout?: number;
  tooltipFollowsMouse?: boolean;
  firstLineNumber?: number;
  overwrite?: boolean;
  newLineMode?: boolean;
  useWorker?: boolean;
  useSoftTabs?: boolean;
  tabSize?: number;
  wrap?: boolean;
  foldStyle?: "markbegin" | "markbeginend" | "manual";
  /** path to a mode e.g "ace/mode/text" */
  mode?: string;
  /** on by default */
  enableMultiselect?: boolean;
  enableEmmet?: boolean;
  enableBasicAutocompletion?: boolean;
  enableLiveAutocompletion?: boolean;
  enableSnippets?: boolean;
  spellcheck?: boolean;
  useElasticTabstops?: boolean;
}

export interface EditorProps {
  $blockScrolling?: number | boolean;
  $blockSelectEnabled?: boolean;
  $enableBlockSelect?: boolean;
  $enableMultiselect?: boolean;
  $highlightPending?: boolean;
  $highlightTagPending?: boolean;
  $multiselectOnSessionChange?: (...args: any[]) => any;
  $onAddRange?: (...args: any[]) => any;
  $onChangeAnnotation?: (...args: any[]) => any;
  $onChangeBackMarker?: (...args: any[]) => any;
  $onChangeBreakpoint?: (...args: any[]) => any;
  $onChangeFold?: (...args: any[]) => any;
  $onChangeFrontMarker?: (...args: any[]) => any;
  $onChangeMode?: (...args: any[]) => any;
  $onChangeTabSize?: (...args: any[]) => any;
  $onChangeWrapLimit?: (...args: any[]) => any;
  $onChangeWrapMode?: (...args: any[]) => any;
  $onCursorChange?: (...args: any[]) => any;
  $onDocumentChange?: (...args: any[]) => any;
  $onMultiSelect?: (...args: any[]) => any;
  $onRemoveRange?: (...args: any[]) => any;
  $onScrollLeftChange?: (...args: any[]) => any;
  $onScrollTopChange?: (...args: any[]) => any;
  $onSelectionChange?: (...args: any[]) => any;
  $onSingleSelect?: (...args: any[]) => any;
  $onTokenizerUpdate?: (...args: any[]) => any;
}

export interface AceEditorProps {
  name?: string;
  /** For available modes see https://github.com/thlorenz/brace/tree/master/mode */
  mode?: string;
  /** For available themes see https://github.com/thlorenz/brace/tree/master/theme */
  theme?: string;
  height?: string;
  width?: string;
  className?: string;
  fontSize?: number;
  showGutter?: boolean;
  showPrintMargin?: boolean;
  highlightActiveLine?: boolean;
  focus?: boolean;
  cursorStart?: number;
  wrapEnabled?: boolean;
  readOnly?: boolean;
  minLines?: number;
  maxLines?: number;
  enableBasicAutocompletion?: boolean;
  enableLiveAutocompletion?: boolean;
  tabSize?: number;
  value?: string;
  defaultValue?: string;
  scrollMargin?: number[];
  onLoad?: (editor: EditorProps) => void;
  onBeforeLoad?: (ace: any) => void;
  onChange?: (value: string, event?: any) => void;
  onInput?: (value: string, event?: any) => void;
  onSelectionChange?: (selectedText: string, event?: any) => void;
  onCopy?: (value: string) => void;
  onPaste?: (value: string) => void;
  onFocus?: (event: any) => void;
  onBlur?: (event: any) => void;
  onValidate?: (annotations: Array<Annotation>) => void;
  onScroll?: (editor: EditorProps) => void;
  onCursorChange?: (selection: Selection) => void;
  editorProps?: EditorProps;
  setOptions?: AceOptions;
  keyboardHandler?: string;
  commands?: Array<Command>;
  annotations?: Array<Annotation>;
  markers?: Array<Marker>;
  style?: CSSProperties;
  debounceChangePeriod?: number;
}

export default class AceEditor extends Component<AceEditorProps, {}> {}