Questions tagged [react-ace]
44 questions
12
votes
4 answers
How to use JSON with react-ace?
Im using react-ace and trying the readme example with java syntax. Works great. But I can't seem to set it to JSON.
Java works
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-java";
import…
ajthinking
- 3,386
- 8
- 45
- 75
7
votes
2 answers
trigger react-ace onChange via React Testing Library (RTL)
in my code, i have component that using react-ace.
in my render function i have this row:
kilzid
- 173
- 6
5
votes
1 answer
How to add custom completer in react ace editor from outside of language_tools
How to add custom completer in react based ace editor from index.js using functions like addCompleter or setCompleter
import { render } from "react-dom";
import AceEditor from "../src/ace";
import "brace/mode/jsx";
import…
davinci
- 73
- 1
- 5
4
votes
1 answer
Set a multiline string as defaultValue in react-ace Ace Editor
When using the react-ace (Ace Editor) library, I find myself in the need to define the defaultValue property as a code block in the JSX format (the editor mode I have left in JavaScript), like this:
…
user11717481
- 1
- 9
- 15
- 25
3
votes
1 answer
How to remove all the existing highlight markers in ace editor using react
I am using ace editor and I am highlighting lines by defining this code:
var Range = ace.require('ace/range').Range;
editor.session.addMarker(new Range(item - 1, 0, item - 1, 1), "warning-marker", "fullLine");
Now I want to remove all the markers…
Ehtesham Ahmad Nadim
- 412
- 5
- 14
3
votes
1 answer
How to use the Ace editor validator without instantiating an Ace editor instance?
I use react-ace to create a CSS text editor in my React app.
That looks something like...
import Ace from 'react-ace'
...
Chris W.
- 37,583
- 36
- 99
- 136
3
votes
1 answer
React Ace editor marker highlight the whole line even startCol and endCol defined to limit the columns
I use the following code to display an Ace editor and highlight a text range.
JS:
let markers = [];
markers.push({startRow: 6, startCol: 5, endRow: 7, endCol: 6, className: 'replacement_marker', type: 'text' });
React render() :
return (
…
hetptis
- 786
- 1
- 12
- 23
2
votes
0 answers
Call an Ace custom autocompleter on every keystroke
I'm adding a custom auto-completer to Ace. I have it working just fine as such, except my custom auto-completer is only called every few keypresses, which doesn't really work in practice.
For example, if I type "W", my auto-completer is returning…
cw124
- 51
- 4
2
votes
0 answers
R language syntax highlight with react-ace
Is it possible to highlight syntax error written in R on AceEditor (react-ace).
I am trying to use react ace editor to implement Online R IDE.
import AceEditor from "react-ace";
import 'brace/mode/r';
import 'brace/theme/kuroir';
import…
Viz
- 141
- 2
- 9
2
votes
0 answers
Removing all Annotations from the gutter in react-ace editor
I'm using AceEditor in my react project but I don't want to show errors or warnings in the gutter. How can I do that? I tried one way as follows but it didn't worked.
Cansel Muti
- 598
- 2
- 9
- 22
1
vote
0 answers
Ace Editor difference between addCompleter and setCompleters
I am using the react-ace editor and using the sql language mode and trying to include the table and column name as part of the auto completion. I found this https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor which uses…
Dony Joseph
- 499
- 2
- 5
- 10
1
vote
4 answers
ReferenceError: ace is not defined
I'm new to ace and trying to build an Editor with react-ace.
Here is what I did:
npm install react-ace ace-builds
I added the following code to my App.js
import React from "react";
import { render } from "react-dom";
import AceEditor from…
abdellah
- 65
- 1
- 8
1
vote
0 answers
Start Ace Editor autocomplete on "." (React-Ace)
I'm trying to get my editor to autocomplete after the user types "custom."
What I've done so far is to change the identifierRegexps to [/[a-zA-Z_0-9\.\-\u00A2-\uFFFF]/]
which allows me to determine the full prefix after the ".".
I can see that the…
Daniel Lawton
- 416
- 3
- 9
- 30
1
vote
1 answer
Use react-ace diff component cannot showing the diff change
I want to show the different change between two side contents, but the results are not showing what I expect them to. No changes are showing.
The version I am using of react-ace is 7.0.5.
Can some one tell which point I missed.
import { diff as…
side
- 209
- 2
- 9
1
vote
1 answer
How to disable particular ACE editor CSS-mode warning rules?
My project makes use of the Ace Editor (via Brace and React-Ace).
We set the mode of the editor to "css" and embed it in our page. This works just fine, however, by default, we find some of the enabled CSS rule highlighting to be too stringent—some…
Chris W.
- 37,583
- 36
- 99
- 136