Floating link does not perform well when there are multiple instance of plate editor

[eugenet8k]

Description

If I have two editors on the page, I can independently edit hyperlinks with a floating link component. But there is a case when the behavior seems synchronized, so it looks like a bug.

Steps

1. Go to https://codesandbox.io/s/sandpack-project-forked-gljxt3
2. Click on the link in the first editor
3. Click on the link in the second editor
4. Both floating link popups should be visible
5. Click on Edit in either of them

Actual result Both floating link popups switch to editing mode

Screenshot

Sandbox

https://codesandbox.io/s/sandpack-project-forked-gljxt3

Expectation

Only the popup that was clicked to be edited switch to editing mode

Environment

• slate: 0.78
• slate-react: 0.79
• browser: chrome

[zbeyens]

Looks like I can't access the sandbox.

I was initially hiding the floating on unfocus but that brought other bugs to fix.

The floating link store https://github.com/udecode/plate/blob/d9680868cfa3e66a337805011264b4f9ff749c58/packages/nodes/link/src/components/FloatingLink/floatingLinkStore.ts#L5 is global so we'll need to store the editor id (a new field or replacing a boolean like open by a string | null)

[eugenet8k]

@zbeyens sorry, it was a broken link, here is the working one https://codesandbox.io/s/sandpack-project-forked-gljxt3

[benshope]

I've been hitting this issue also

[rawi96]

The whole FloatingLinkInsertRoot Element is rendered as many times as there are Richtext editors on the same page. Which is an issue because if you click on the top element, it automatically calls an "outsideclick" on the other ones and closes all elements.

E.g. If you mark text, click on the link icon the linkInsertRoot element will open. if you then click on it e.g. into the input field change the linktext with the cursor, it closes again because 2 elements are rendered on top of each other.

Would be great if that would be fixed. 🥰

[bojangles-m]

As @rawi96 pointed out, clicking on the input field is closing the dialog and link cant be created.

Would be great if that could be fixed. 🥰

[O4epegb]

It basically makes link toolbar unusable with multiple editors, would be awesome to have it fixed!

I think I might try to fix it actually, seems not that complex. If I don't post any update until this evening then I gave up :)

[bojangles-m]

I tried it and is not working yet as it should. When you insert first link forks but with the second link when you click with mouse on the input field the dialog disappears. Made video for it. https://www.loom.com/share/e380e1062f5d4643ba85b64f7aabc8a8

What i did on our side, but not sure if it the right way, updated the code in the file useFloatingLinkInsert.ts.

const ref = useOnClickOutside(() => {
        if (floatingLinkSelectors.mode() === 'insert' && open) {
            floatingLinkActions.hide();
            focusEditor(editor, editor.selection!);
        }
    });

[O4epegb]

@bojangles-m good catch, thank you! I missed it because I only used keyboard for testing 😄 I'll create PR to fix it too