Improved link editor UX (#4026)

packages/lexical-playground/src/appSettings.ts

@@ -18,6 +18,7 @@ export type SettingName =
   | 'showTreeView'
   | 'showNestedEditorTreeView'
   | 'emptyEditor'
+  | 'enableLinkPreviews'
   | 'showTableOfContents';
 
 export type Settings = Record<SettingName, boolean>;
@@ -30,6 +31,7 @@ export const isDevPlayground: boolean =
 export const DEFAULT_SETTINGS: Settings = {
   disableBeforeInput: false,
   emptyEditor: isDevPlayground,
+  enableLinkPreviews: false,
   isAutocomplete: false,
   isCharLimit: false,
   isCharLimitUtf8: false,

packages/lexical-playground/src/index.css

@@ -559,9 +559,9 @@ i.prettier-error {
 
 .link-editor .link-input {
   display: block;
-  width: calc(100% - 24px);
+  width: calc(100% - 75px);
   box-sizing: border-box;
-  margin: 8px 12px;
+  margin: 12px 12px;
   padding: 8px 12px;
   border-radius: 15px;
   background-color: #eee;
@@ -573,6 +573,20 @@ i.prettier-error {
   font-family: inherit;
 }
 
+.link-editor .link-view {
+  display: block;
+  width: calc(100% - 24px);
+  margin: 8px 12px;
+  padding: 8px 12px;
+  border-radius: 15px;
+  font-size: 15px;
+  color: rgb(5, 5, 5);
+  border: 0;
+  outline: 0;
+  position: relative;
+  font-family: inherit;
+}
+
 .link-editor div.link-edit {
   background-image: url(images/icons/pencil-fill.svg);
   background-size: 16px;
@@ -587,10 +601,39 @@ i.prettier-error {
   cursor: pointer;
 }
 
+.link-editor div.link-cancel {
+  background-image: url(images/icons/close.svg);
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  vertical-align: -0.25em;
+  margin-right: 28px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.link-editor div.link-confirm {
+  background-image: url(images/icons/success-alt.svg);
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  vertical-align: -0.25em;
+  margin-right: 2px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
 .link-editor .link-input a {
   color: rgb(33, 111, 219);
-  text-decoration: none;
-  display: block;
+  text-decoration: underline;
   white-space: nowrap;
   overflow: hidden;
   margin-right: 30px;
@@ -614,6 +657,10 @@ i.prettier-error {
   border-radius: 4px;
 }
 
+.ContentEditable__root .PlaygroundEditorTheme__link {
+  pointer-events: none;
+}
+
 .mention:focus {
   box-shadow: rgb(180 213 255) 0px 0px 0px 2px;
   outline: none;

packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.css

@@ -1,4 +1,5 @@
 .link-editor {
+  display: flex;
   position: absolute;
   top: 0;
   left: 0;

packages/lexical-playground/src/plugins/FloatingLinkEditorPlugin/index.tsx

@@ -27,6 +27,7 @@ import {Dispatch, useCallback, useEffect, useRef, useState} from 'react';
 import * as React from 'react';
 import {createPortal} from 'react-dom';
 
+import {useSettings} from '../../context/SettingsContext';
 import LinkPreview from '../../ui/LinkPreview';
 import {getSelectedNode} from '../../utils/getSelectedNode';
 import {setFloatingElemPosition} from '../../utils/setFloatingElemPosition';
@@ -43,9 +44,13 @@ function FloatingLinkEditor({
   setIsLink: Dispatch<boolean>;
   anchorElem: HTMLElement;
 }): JSX.Element {
+  const {
+    settings: {enableLinkPreviews},
+  } = useSettings();
   const editorRef = useRef<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const [linkUrl, setLinkUrl] = useState('');
+  const [editedLinkUrl, setEditedLinkUrl] = useState('');
   const [isEditMode, setEditMode] = useState(false);
   const [lastSelection, setLastSelection] = useState<
     RangeSelection | GridSelection | NodeSelection | null
@@ -196,34 +201,65 @@ function FloatingLinkEditor({
     }
   }, [isEditMode]);
 
+  const monitorInputInteraction = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+  ) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      handleLinkSubmission();
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      setEditMode(false);
+    }
+  };
+
+  const handleLinkSubmission = () => {
+    if (lastSelection !== null) {
+      if (linkUrl !== '') {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(editedLinkUrl));
+      }
+      setEditMode(false);
+    }
+  };
+
   return (
     <div ref={editorRef} className="link-editor">
       {!isLink ? null : isEditMode ? (
-        <input
-          ref={inputRef}
-          className="link-input"
-          value={linkUrl}
-          onChange={(event) => {
-            setLinkUrl(event.target.value);
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter' || event.key === 'Escape') {
-              event.preventDefault();
-              if (lastSelection !== null) {
-                if (linkUrl !== '') {
-                  editor.dispatchCommand(
-                    TOGGLE_LINK_COMMAND,
-                    sanitizeUrl(linkUrl),
-                  );
-                }
+        <>
+          <input
+            ref={inputRef}
+            className="link-input"
+            value={editedLinkUrl}
+            onChange={(event) => {
+              setEditedLinkUrl(event.target.value);
+            }}
+            onKeyDown={(event) => {
+              monitorInputInteraction(event);
+            }}
+          />
+          <div>
+            <div
+              className="link-cancel"
+              role="button"
+              tabIndex={0}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => {
                 setEditMode(false);
-              }
-            }
-          }}
-        />
+              }}
+            />
+
+            <div
+              className="link-confirm"
+              role="button"
+              tabIndex={0}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={handleLinkSubmission}
+            />
+          </div>
+        </>
       ) : (
         <>
-          <div className="link-input">
+          <div className="link-view">
             <a href={linkUrl} target="_blank" rel="noopener noreferrer">
               {linkUrl}
             </a>
@@ -233,11 +269,12 @@ function FloatingLinkEditor({
               tabIndex={0}
               onMouseDown={(event) => event.preventDefault()}
               onClick={() => {
+                setEditedLinkUrl(linkUrl);
                 setEditMode(true);
               }}
             />
           </div>
-          <LinkPreview url={linkUrl} />
+          {enableLinkPreviews ? <LinkPreview url={linkUrl} /> : ''}
         </>
       )}
     </div>