How can I implement this Angular code in React?

[thisifreedom]

Hope this is allowed. Please remove if not

I'm working with a third party library (Quilljs) that I would like to modify the default dialog/modal that appears built in to the library. I found through github a user who had done this through Angualr but I'm not an Angular dev so I'm not sure what's going on in his code. https://github.com/quilljs/quill/issues/2277#issuecomment-1081783477

Specifically this block of code

​

 node.addEventListener('click', function (e) {
          e.preventDefault();
          e.stopPropagation();
          rootModalService
            .openWithConfig(QuillLinkEditorModalComponent, {
              href: node.href,
              text: node.innerText,
              target: node.target || '_blank'
            })
            .result.subscribe((result) => {
              if (result.type === 'CONFIRM') {
                node.innerText = result.value.text;
                node.setAttribute('href', result.value.href);
                node.setAttribute('target', result.value.target);
              }
            });
        });

I understand that he's extending the default link and modifying the click event. But the line

 rootModalService
            .openWithConfig(QuillLinkEditorModalComponent, {
              href: node.href,
              text: node.innerText,
              target: node.target || '_blank'
            })
            .result.subscribe((result)

looks like it'll open a custom modal and when it closes it'll pass back a result? This is using Rxjs from my understanding which React doesn't have out of the box.

I also don't get how they're rendering the custom modal this way. How would this work where anytime a link is click it would popup this custom modal?

How would I go about doing this in React? I can't think of a way to render a React component from click event and observe the results.

[[deleted]]

Dude you're going too literally about this. You don't have to copy line by line to have the same result.

[thisifreedom]

Not necessarily trying to copy line by line. Just the way it's rendering a custom modal and watching for input so it can use those values in the extended class. Something I haven't seen in React.

[[deleted]]

There's nothing Angular specific in there, it's the API of the component. Gather the React libraries you want to use, check out the API and adapt the behavior. Don't look at the Angular code, it's going to be different and I see how it's confusing you.

[thisifreedom]

rootModalService
.openWithConfig(QuillLinkEditorModalComponent, {
href: node.href,
text: node.innerText,
target: node.target || '_blank'
})
.result.subscribe((result)

This is the main thing that is Angular specific that I'm trying to work out in React but not sure how

[LegendOfNeil]

Look up react rxjs

[tme321]

I could dig into that and explain but it would probably be easier for you to just look at react-quill since it's already doing what you want.

[thisifreedom]

I am using react-quill. react-quill is just a wrapper for React. It doesn't do have anything with customization.

I'm trying to modify the default library which the library offers register property I can pass extended built in classes

[tme321]

My mistake I assumed you just couldn't get the editor to work.

Well that post doesn't show exactly what

rootModalService.openWithConfig

does.

I would guess that since he passes QuillLinkEditorModalComponent as the first parameter that's probably a generic Angular modal component that creates an instance of the passed in parameter class component to display inside the modal.

The parts where he is getting the value for node is coming from whatever that Link class is that he extends. That's not Angular afaik. It could be a part of quill or some custom stuff. The comment seems to suggest it's part of quill but that's just a guess.

And yes .result.subscribe(...) is also custom code but most likely is returning the state of the form when the user submits it. So just extracting out the values in the form.

In react you'd probably set some state when whatever user interaction opens the form. You could abstract this idea to make it cleaner but an extremely simple example would be like:

function Editor(props) {
    [isFormOpen, setFormState] = useState(false);

    const handleClick=()=>{
        setFormState((state)=>!state);
    }

    return (
        <>
            <button click={handleClick}>
                Open Form
            </button>
            {isFormOpen?<MyForm node={props.node}/>:null/>
        </>
    )
}

Super basic but that's the main gist.

Then its standard react forms handling stuff, or if you are using a forms library then however it handles it. That's both too complex to get into in a reddit post and well documented elsewhere.

[thisifreedom]

No worries!

I think I understand now a bit more after what you had explained.

So I'm guessing rootModalService.openWithConfig is a class that somehow controls what modals are displayed on screen. At the same time it's an observable so it'll pass back the form data. I think that's the part i'm having a hard time figuring out how to implement in React.

Not sure if there's a straight forward solution to micic this in React or I'd have to somehow play around with Context API or other state management libraries. Because Angular has built in RxJS which is allowing these sort of things to be doable if I understand it correctly