react-codemirror | CodeMirror 6 component for React | Editor library

I'm using react-codemirror2 for online code editor kind of project. I want to implement my own real time collaborative platform. In quill js we can use delta object to do this. In code mirror we can get 'data' object from onBeforeChange event handler. Is there any way to use that data object like delta object? (covert to editor's value and vise versa)

I'm using react-codemirror2 in a react project. I want to add features like auto bracket close and auto tag close. There is a npm package called @codemirror/closebrackets but I can't find any documentation to do that.

I am making use of CodeMirror for react. I am referring to the docs but I am unable to make it editable.

Here's the code :

I saw many examples it works fine for all but I don't know why it does not highlight my code. I tried many solutions none of them work for me.

Also, I need to inject my own custom HTML file in it for the initial when user click on demo for the code and also user can change the file and run its own custom code that user want.

Here is the screenshot of the output:

Code that I used for the editor

I have a textarea which is basically the CodeMirror. I want to allow the user to only type the CSS properties without selector and then validate it using CSSLint. I am not sure how I can achieve this with the help of CSSLint.

For example, I want the user to type:

I am using react-codemirror2 with a functional component and I need access to a value from local state inside the onKeyDown event handler but it seems like the context of this changes. I don't know of any way to bind the value of this in a functional component, so how can I access the value of input inside handleKeyPress ? Do I just need to use a class based component? (My app also uses styled components but this can be ignored in the context of this question.)

How do you use custom CodeMirror modes when using react-codemirror2? Both CodeMirror.defineSimpleMode and CodeMirror.defineMode are undefined after I import as follows:

I am trying to override an onChange method in a component but the method is not running on any DOM events like onChange, onClick, onDblClick etc. Here are the codes for the part where the component is being rendered and the component. Here is the onChange Documentation for the package being used. Any help will be appreciated, thanks for taking out the time :)

I have created a react-codemirror 2 component in my react app but the linting feature of the package is not working. I tried browsing other stack overflow questions but since the questions are at least 2 years old it looks like the file structure for the original library i.e. codemirror has been changed and none of the solution seem to work. I also opened an issue in their Github repo but no response on that. Hope you can help, here's the code for my component.