Insert floating link toolbar persists state and not reacting on enter

[Feshchenko]

Description

After creating the first link, the insert floating UI state persists.

Steps to Reproduce

1. go to platejs.org
2. create a new paragraph or use existing one
3. click Create Link button
4. fill insert floating link with valid content: https://google.com and text google
5. add some other text like
6. click Create Link button again
7. insert form is filled with https://google.com and google and you can't submit it again until adding changes

https://github.com/udecode/plate/assets/7198398/93d9e5c3-5154-44c1-828b-07e3a21278fe

Sandbox

• playground
• sandbox
• any page where link is present

Expected Behavior

• insert link state is incapsulated for each link
• you can submit edit form without changes for created link

Environment

• slate:
• slate-react:
• browser: chrome

Bounty

Click here to add a bounty via Algora.

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[Saland1214]

I met this problem too. I turn input component to a function. and watch insertState.open changed, when it changed, I'll reset loading, it will rerender input. It's work for me.

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!insertState.isOpen) {
      setLoading(true);
    } else {
      setLoading(false);
    }
  }, [insertState]);

  const input = () =>
    loading ? (
      ''
    ) : (
      <div className="flex w-[330px] flex-col">
        <div className="flex items-center">
          <div className="flex items-center pl-3 text-slate-500 dark:text-slate-400">
            <Icons.link className="h-4 w-4" />
          </div>
          <FloatingLinkUrlInput
            className={inputVariants({ variant: 'ghost', h: 'sm' })}
            placeholder="Paste link"
          />
        </div>

        <Separator />

        <div className="flex items-center">
          <div className="flex items-center pl-3 text-slate-500 dark:text-slate-400">
            <Icons.text className="h-4 w-4" />
          </div>
          <input
            className={inputVariants({ variant: 'ghost', h: 'sm' })}
            placeholder="Text to display, please press Enter to save"
            {...textInputProps}
          />
        </div>
      </div>
    );