react-quill | A Quill component for React | Editor library

I have the following code I am trying to port to TypeScript:

I am using react-quill, and it's requirement is that modules prop must be cached and shouldn't change. I am using useMemo hook to memoize it. The object is:

React-Quill toolbar not displaying correctly.

I am using React Quill (https://github.com/zenoamaro/react-quill) as a rich text editor in my React project.

Im running into an issue when inserting the below html span element to the editor with an ID:

The value of the text editor is contained within React State and when console.logging state i can see the span element in there:

However, the span element doesnt exist when inspecting via chrome dev tools and thus in the DOM.

The reason why I need this element to exist in the DOM is because i need to use document.getElementById('incInsert') to insert HTML into the span element which is done later in my submit function.

TIA

I am trying to deploy a React app with Craco to GCP Cloud Run. I am using the Cloud Code in Visual Studio Code to deploy. It say deployment is successful, but I am getting really weird error when viewing in browser, it runs locally just fine, please help.

For build, I am using the remote build option in GCP, it autmatically create a dockerfile and use nginx to build I guess? It's really confusing.

My package.json

I have some problems with the strapi rich text editor. When I type some text, the format doesn't appear at all in the render of my app. No line break. Plus, the markDown code stays visible.

I tried by replacing the strapi text editor by react-quill and I still have the same problem. I type some text in the admin panel and when I render my app, all the html is visible.

What did I miss?

I am stuck on this for a day now. Have read multiple answers but could not find anything.

My task is simple, I have a page where a user can answer a question.

• The page will have two editors open(by default). (Found this in a react-quill GitHub discussion).

• There will be an 'Add step' button which will, of course, add another quill editor below and the user can add as many steps as he/she likes.

• The editors will have a 'Delete' button alongside it to delete the editors, except for the first two editors.

Now, I want to store the said steps separately in my DB as well, but the onClick on the editor does not have e.target, instead, it just gives the HTML value. Therefore, how can I add editors onClick and separate the value from the multiple editors?

Any direction or hint towards the solution would be appreciated. Thanks.

Current behaviour:

I'm having a local development environment on mac from which I git push to my remote repo. My production server is on linxu and there I pull my repo. Usually this works fine but this time I'm stuck with an error I can't find a workaround for :( npm ci failing on linux because of fsevents

Steps to reproduce:

$ npm ci

I'm using react-quilljs and reactjs-popup together and can't get the quill-based editor to show in my modal dialog. I can use the editor on the main page with no issues but it will not work on the popup.

I have the expected imports: