react-ace | React Ace Component | Editor library

I'm currently trying to implement a CodeMirror of sorts with the help of ACE Editor. I've tried using state alongside the 'onClick' button param but am unable to actually get this working.

I have a problem with state synchronization. When I click on the outside of the editor (wanna close it) I want to pass the actual text back to parent node (callback function). But when I click outside the queryText state seems to be always one step behind. (E.g.: If there is abc inside the Editor, I type d, CALLBACK: abc, I type e, CALLBACK: abcd and so on...).

How can I achieve that if I click outside of my Editor there will be the actual state of queryText?

I'm trying to remove the vertical line in my react ace editor:

I've tried setting the printMargin to false but it doesn't seem to be working. Tried restarting the server too but nothing. I'm also using next.js if that helps.

Here is what that code looks like:

I'm looking to display some code through the value props in my react component but the editor just stays blank and does not show any values. I can type within the editor and everything seems to be working, including syntax highlighting. No errors in sight. Am I missing something obvious?

I should note, I'm using next.js and react-ace as shown here: https://github.com/mingderwang/ace-editor-with-next

Here is my main index.js page code:

I am using Ace editor with React (https://github.com/securingsincity/react-ace, version: 8.0.0)

I have managed to add an undo button, but undoing on a new editor instance is erasing the whole document.

My code so far :

In my react app I have a component with two nodes, the first one is the ace editor component the second is an h1 HTML node. I also established a WebSocket connection to wss://echo.websocket.org which should return what I just sent.

What I wanted to achieve is in the ace editor on change the text input is sent to the server then the response from the server is rendered in the h1 node.

Currently, the character input into the ace editor is being sent and received from the server and rendered to the h1 node however only one character is being sent and received ie you cannot type more than two characters in the ace editor.

Having tried to debug, I found that when the set state in componentDidMount that should update the h1 is removed the ace editor you can type more than one character, however, I need to render the response from the server in the h1 tag.

Here is the code:

AceEditor is not getting displayed unless and until I don't change the size of the component(Resizable)

If I add any other HTML element like

Is there any way to make Ace editor resizable without any library.

I'm looking to display the value prop from the React Ace Editor. Just looking to console.log it for now.

I'm not sure how to access it and display it when the "see code" button is clicked.

Here is the code I'm currently working on at the moment:

I'm using Ace Editor and specifically react-ace. I want to highlight a certain word.

I am aware that I can define custom syntax highlighting rules but it seems more hassle than it's worth compared to updating a marker every time the input changes (which in my case, should not be too often).

For a marker, I need the Range of the word - startRow, startCol, endRow, endCol. I tried using find() for this, and it seems to indeed return the desired range of a term/regex I search for, but this seems to a high-level command which performs what you would expect from a "find" operation in an editor - highlights the term and jumps to it.

How would I go about retrieving the Range of a word in an Ace Editor?