React Ace Selection Change Event Not Getting Trigger

Question

Ace Control Code:

<AceEditor
                  mode="mysql"
                  theme="tomorrow"
                  name="UNIQUE_ID_OF_DIV"
                  value={queries ?? ""}
                  editorProps={{ $blockScrolling: true }}
                  onChange={(e) => {
                    setqueries(e);
                  }}
                  onSelectionChange={handleSelectionChange}
                />

Methods:

const handleSelectionChange = (selectedText, event) => {
    setSelectedQueries(selectedText);
    console.log("selectedText", selectedText);
  }

Here in selectedText i am getting selection object which does not hold any selectedText.

How can i get SelectedText on React-Ace editor?

score 0 · Answer 1 · answered Oct 27 '22 at 13:50

Resolved,

 const aceEditor = useRef();

<AceEditor
                  ref={aceEditor}
                  mode="mysql"
                  theme="tomorrow"
                  name="UNIQUE_ID_OF_DIV"
                  value={queries ?? ""}
                  editorProps={{ $blockScrolling: true }}
                  onChange={(e) => {
                    setqueries(e);
                  }}
                  onSelectionChange={(v, e) => {
                    setSelectedQueries(aceEditor.current.editor.getSelectedText())
                  }}
                />

Make sure you are adding ref={aceEditor} in your AceEditor control.

React Ace Selection Change Event Not Getting Trigger

1 Answers1