react-ace

repository·main·Indexed 26 days ago

https://github.com/securingsincity/react-ace

A React component wrapper for the Ace Editor, providing the AceEditor and DiffEditor components. It allows developers to integrate a powerful code editor into React applications with support for language modes, themes, autocompletion, snippets, and markers. Requires ace-builds as a dependency for the editor engine.

Tokens: 8.8K
Snippets: 15
Records: 45
Agent score: 88%

What's inside react-ace

Use the SplitEditor component for linked editor instances

main

The split component (imported as SplitEditor) allows you to create multiple linked instances of the Ace editor. All instances share the same theme and other properties, but maintain their own independent values. This is useful for viewing different parts of the same content or managing multiple synchronized views.

import React from "react";
import { render } from "react-dom";
import { split as SplitEditor } from "react-ace";

import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";

// Render editor
render(
  <SplitEditor
    mode="java"
    theme="github"
    splits={2}
    orientation="below"
    value={["hi", "hello"]}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
  />,
  document.getElementById("example")
);

Use the AceEditor component
main
The AceEditor component is the primary way to integrate the Ace editor into your React application. You need to import specific modes, themes, and extensions from ace-builds/src-noconflict to make them available to the editor.
Key props:
- mode: The language mode (e.g., 'java').
- theme: The visual theme (e.g., 'github').
- onChange: A callback function triggered when the editor content changes.
- name: A unique ID for the editor instance.
- editorProps: An object used to pass internal Ace editor properties (e.g., $blockScrolling).
```
import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";

function onChange(newValue) {
  console.log("change", newValue);
}

// Render editor
render(
  <AceEditor
    mode="java"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
  />,
  document.getElementById("example")
);
```
https://github.com/securingsincity/react-ace/blob/main/README.md
Migrate from v7 to v8 by replacing brace with ace-builds
main
To upgrade to version 8.0.0, you must uninstall the brace package and install ace-builds instead. This change is required as the project has moved away from brace dependencies.
```
npm uninstall brace
npm install react-ace@8.0.0 ace-builds
```
https://github.com/securingsincity/react-ace/blob/main/docs/Migrate-v7-to-v8.md
Update mode, theme, and snippet imports for v8
main
When migrating to v8, update your import paths for modes, themes, and snippets. Replace imports from brace with imports from ace-builds/src-noconflict/.
```
// Replace these:
import 'brace/mode/html'
import 'brace/theme/monokai'
import 'brace/snippets/html'

// With these:
import 'ace-builds/src-noconflict/mode-html'
import 'ace-builds/src-noconflict/theme-monokai'
import 'ace-builds/src-noconflict/snippets/html'
```
https://github.com/securingsincity/react-ace/blob/main/docs/Migrate-v7-to-v8.md

Add language snippets and autocompletion

main

To enable snippets and autocompletion, import the necessary ace-builds extensions and modes, then set enableBasicAutocompletion, enableLiveAutocompletion, and enableSnippets to true on the AceEditor component.

import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";

import "ace-builds/src-min-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/snippets/python";
import "ace-builds/src-noconflict/theme-github";

function onChange(newValue) {
  console.log("change", newValue);
}

// Render editor
render(
  <AceEditor
    mode="python"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
    enableBasicAutocompletion={true}
    enableLiveAutocompletion={true}
    enableSnippets={true}
  />,
  document.getElementById("example")
);

Add the search box
main
To enable the built-in Ace search box, import the following extension before rendering the component:
```
import 'ace-builds/src-min-noconflict/ext-searchbox';
```
https://github.com/securingsincity/react-ace/blob/main/docs/FAQ.md

Add a custom mode

main

To implement a custom mode:

Create a custom mode class extending ace/mode/java.Mode (or another base mode).
Define HighlightRules within that class.
In your React component's componentDidMount, instantiate your custom mode and call this.refs.aceEditor.editor.getSession().setMode(customMode).

// CustomSqlMode.js
import "ace-builds/src-noconflict/mode-java";

export class CustomHighlightRules extends window.ace.acequire(
  "ace/mode/text_highlight_rules"
).TextHighlightRules {
  constructor() {
    super();
    this.$rules = {
      start: [
        { token: "comment", regex: "#.*$" },
        { token: "string", regex: "\".*?\"" }
      ]
    };
  }
}

export default class CustomSqlMode extends window.ace.acequire("ace/mode/java")
  .Mode {
  constructor() {
    super();
    this.HighlightRules = CustomHighlightRules;
  }
}

// App.js
import React, { Component } from "react";
import AceEditor from "react-ace";
import CustomSqlMode from "./CustomSqlMode.js";
import "ace-builds/src-noconflict/theme-github";

class App extends Component {
  componentDidMount() {
    const customMode = new CustomSqlMode();
    this.refs.aceEditor.editor.getSession().setMode(customMode);
  }

  render() {
    return (
      <div className="App">
        <AceEditor
          ref="aceEditor"
          mode="text"
          theme="github"
          name="UNIQUE_ID_OF_DIV"
          editorProps={{ $blockScrolling: true }}
        />
      </div>
    );
  }
}

export default App;

Install react-ace and ace-builds
main
To use React-Ace, you must install both react-ace and ace-builds as dependencies. ace-builds provides the actual editor engine, while react-ace provides the React component wrappers.
```
npm install react-ace ace-builds

# or

yarn add react-ace ace-builds
```
https://github.com/securingsincity/react-ace/blob/main/README.md
Configure Ace modes, themes, and keyboard handlers
main
To use specific modes (languages), themes, or keyboard handlers in react-ace, you must require them directly from the ace-builds package. react-ace acts as a wrapper, so the underlying Ace assets must be loaded into the environment via ace-builds to be available for selection.
https://github.com/securingsincity/react-ace/blob/main/docs/Modes.md
Configure editor options via editorProps
main
Use the editorProps prop to pass configuration options directly to the underlying Ace editor instance. For example, to set $blockScrolling to Infinity:
```
<ReactAce
  editorProps={{
    $blockScrolling: Infinity
  }}
/>
```
https://github.com/securingsincity/react-ace/blob/main/docs/FAQ.md
Configure ace-build workers for autocomplete and validation
main
If autocomplete or validation features fail to work, or if you see console errors regarding ace-build workers, you must configure the workers to load properly. This can be achieved by configuring your bundler (e.g., webpack) or by pointing the editor to a CDN copy of the worker files.
https://github.com/securingsincity/react-ace/blob/main/docs/Migrate-v7-to-v8.md
Use the DiffEditor component
main
The DiffEditor component (exported as diff from react-ace) provides a split-view editor that highlights differences between two sets of content. It accepts an array of strings for the value prop, where index 0 represents the first editor and index 1 represents the second editor.
```
import React, { Component } from "react";
import { render } from "react-dom";
import { diff as DiffEditor } from "react-ace";

import "ace-builds/src-noconflict/theme-github";

render(
  <DiffEditor
    value={["Test code differences", "Test code difference"]}
    height="1000px"
    width="1000px"
    mode="text"
  />
);
```
https://github.com/securingsincity/react-ace/blob/main/docs/Diff.md