Using this library in Angular and with reactive form?

[ysk3a]

Hi,
this is was a library I was looking for for some time now and due other great popular code editors being overkill for my use case the 'why' section of this project's readme fit my case perfectly.

That being said, I was trying to use this library in angular.
My initial and beginner approach was to 'wrap' it in an angular directive (since i could not figure out how to use the webcomponents option in angular). So every element that uses this directive seems to create a new instance of the directive(?) as such I am not sure if this is the best/performant approach.

But the next part I could not figure out was to use this library with angular reactive forms.
The example in https://github.com/FIameCaster/prism-code-editor?tab=readme-ov-file#examples uses formdata while i don't think there is any formdata in angular just template driven and reactive forms.

As this is a Q&A to ask the community, I'm hoping that this may come across another experienced developer that would be willing to share their knowledge and suggest an approach where I could make this library work with an angular app.

[jonpyt]

I have not touched Angular unfortunitely, but I did get the form to submit using FormData. Here's how:

Firstly, you can't use any of the setups. They use a shadow root, which makes the underlying textarea element inaccessible to the form element. Just use createEditor() to append an editor to the wrapper element managed by Angular. You then must import prism-code-editor/layout.css since createEditor doesn't automatically load any CSS.

Next you must add a name attribute to the editor's textarea element. The textarea can be accessed from the returned PrismEditor object.

You also forgot to bind the element ref and the submit event for the form element, so replace <form> with the following:

<form (submit)="onSubmit($event)" #formElement>

Lastly, to test that it works, in the onSubmit method you call the get method of the FormData object, pass it the name of the textarea and console log the result.

But the next part I could not figure out was to use this library with angular reactive forms.

Since I have zero experience working with Angular, I cannot help you with this, but I hope this helps regardless.

[ysk3a]

Since I have zero experience working with Angular, I cannot help you with this, but I hope this helps regardless.

Thank you for replying nevertheless. :)

just wanted to share that the min reproducible code that was original shared had some metadata that i was not sure if i was allowed to shared so better safe than sorry by deleting it. hence the deleted edited of the original post.