Improved link editor UX

[ChronicLynx]

Summary of Changes:

• Toggling editMode results in less jarring transition by attempting to reconcile height differences between elements.
• Reduced link-input width to allow for new buttons controlling submission and cancellation (in addition to keyboard commands).
• Escape key now exits without saving the link changes, Enter continues to submit.
• Disabled the ability to open the link when in the editor. Prior to this you could accidentally open the link when trying to move your cursor on the text by clicking. You can still click the link from the link-editor itself to test it. The link will still become clickable if you try to export it elsewhere because this only applies to things nested under ContentEditable__root.
• link-editor is flex.
• Split the state of linkUrl to not immediately register the changes until a submit event.
• Created new functions to handle key presses and submission.
• Removed background highlighting for initial view. This implied it was a clickable area, but usually resulted in you accidentally opening the link.
• New app settings to disable LinkPreview by default

---

LinkPreview

Because LinkPreview is not completely configured in the Playground and uses a Suspense it causes weird visual glitches as the component changes dimensions for a brief moment until deciding preview is null and it should not display anything. The setting to disable LinkPreview from attempting to render when it will 404 (because there's no endpoint) should avoid this issue.

---

Demo:

Screen.Recording.2023-03-03.at.3.57.35.PM.mov

Issues:

This problem is prior to my current changes. Removing this code fixes it, but might reintroduce the original problem.

#4013: You cannot click and drag to highlight text anymore @LuciNyan

useEffect(() => {
    function mouseMoveListener(e: MouseEvent) {
      if (editorRef?.current && (e.buttons === 1 || e.buttons === 3)) {
        editorRef.current.style.pointerEvents = 'none';
      }
    }
    function mouseUpListener(e: MouseEvent) {
      if (editorRef?.current) {
        editorRef.current.style.pointerEvents = 'auto';
      }
    }

    if (editorRef?.current) {
      document.addEventListener('mousemove', mouseMoveListener);
      document.addEventListener('mouseup', mouseUpListener);

      return () => {
        document.removeEventListener('mousemove', mouseMoveListener);
        document.removeEventListener('mouseup', mouseUpListener);
      };
    }
  }, [editorRef]);

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 3, 2023 at 10:51PM (UTC)
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 3, 2023 at 10:51PM (UTC)

[acywatson]

Love it. Thanks!

[thegreatercurve]

I think these changes are okay. Removing the ability to drag and drop the Lexical Nodes by anything other than the handle seems like a sensible change, as it's causing a related issue here (#4028) when combined with the additional mouse listener introduced in #4013.

I've tried to reproduce the original glitching issues from #4028 though by checking out this PR, and the old bug does not seem to be present, so I think this is fine to merge.

Closes #4028