Custom Toolbar Button

[MC-AHOP]

Hey,

first of all, thank you for this repo!
I have a specific use case where I need a custom link button with extended behavior.

Basically, what I want to achieve is: when you click the link button, a popup appears where you can choose your link option using tabs:

• URL
• Internal file
• Related post

To implement this, I created a wrapper for a custom button with a dialog and some additional logic.

My problem is that every action inside the dialog seems to be canceled by the EditorProvider tag. However, I need the EditorContext for my implementation to work.

Is this an issue on my side, or could it be a known bug?

Here are the relevant code snippets:

Editor Toolbar:

<Toolbar>
    <BtnStyles />
    <BtnBold />
    <BtnItalic />
    <BtnBulletList />
    <BtnNumberedList />
    <BtnStrikeThrough />
    <BtnLink />
    <BtnUndo />
    <BtnRedo />
    <MyLinkButton />
</Toolbar>

MyLinkButton Component:

return (
<>
     <dialog>
          <input type="text" />
     </dialog>
    <button ... />
</>
)

It's basic, but I think it demonstrates the concept.

Can you help me with this?
Of course, I'm happy to elaborate further if this isn't enough information!

[megahertz]

What do you mean? Does MyLinkButton get remounted too frequently?

[MC-AHOP]

Could be, everytime I click into the Textfield, die cursor instantly gets removed. And Button Events are cancelled, so if I wanna open another Dropdown e.g. to select files, the dropdown wont open up. I honestly have no direct idea how this happens :/

[MC-AHOP]

After some observation, it seems that the editor including the buttons and the containing dialog Element gets remounted, rerendered or just updated, everytime I click on any controll of the dialog.

[megahertz]

Please try wrapping your component by the memo HOC. If that isn't helpful, please send me the whole sample that reproduces it.

[MC-AHOP]

i solved the issue by moving the dialog to the outer component (before EditorProvider) and passing the EditorContext via setState from inside EditorProvider.

But now I found another Issue. When I create a Link inside of a P (with the Default Link Button), its not possable to remove it, because $selections returns the p instead of the a

The HTML inside the editor would be

<p>This is a typed Text with a <a href="#">link</a></p>

When I select the link and press the link button again, selection is the P element and $el is the wrapping div.

[megahertz]

If the standard document.execCommand('unlink') doesn't work, you must do low-level DOM manipulation. I can't help with it unfortunately.