fix(richtext-lexical): fixed toolbar actions not ensuring editor focus, various link editor selection issues

Author: AlessioGr

packages/richtext-lexical/src/field/features/link/drawer/types.ts

@@ -5,5 +5,5 @@ import type { LinkFields } from '../nodes/types.js'
 export interface Props {
   drawerSlug: string
   handleModalSubmit: (fields: FormState, data: Record<string, unknown>) => void
-  stateData?: LinkFields & { text: string }
+  stateData: {} | (LinkFields & { text: string })
 }

packages/richtext-lexical/src/field/features/link/feature.client.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import type { LexicalNode } from 'lexical'
+
 import { $findMatchingParent } from '@lexical/utils'
 import { $getSelection, $isRangeSelection } from 'lexical'
 
@@ -34,22 +36,35 @@ const toolbarGroups: ToolbarGroup[] = [
         }
         return false
       },
+      isEnabled: ({ selection }) => {
+        return !!($isRangeSelection(selection) && $getSelection()?.getTextContent()?.length)
+      },
       key: 'link',
       label: `Link`,
       onSelect: ({ editor, isActive }) => {
         if (!isActive) {
-          let selectedText = null
+          let selectedText: string = null
+          let selectedNodes: LexicalNode[] = []
           editor.getEditorState().read(() => {
-            selectedText = $getSelection().getTextContent()
+            selectedText = $getSelection()?.getTextContent()
+            // We need to selected nodes here before the drawer opens, as clicking around in the drawer may change the original selection
+            selectedNodes = $getSelection()?.getNodes() ?? []
           })
+
+          if (!selectedText?.length) {
+            return
+          }
+
           const linkFields: LinkFields = {
             doc: null,
             linkType: 'custom',
             newTab: false,
             url: 'https://',
           }
+
           editor.dispatchCommand(TOGGLE_LINK_WITH_MODAL_COMMAND, {
             fields: linkFields,
+            selectedNodes,
             text: selectedText,
           })
         } else {

packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx

@@ -50,7 +50,7 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R
 
   const { i18n, t } = useTranslation()
 
-  const [stateData, setStateData] = useState<LinkFields & { text: string }>(null)
+  const [stateData, setStateData] = useState<{} | (LinkFields & { text: string })>({})
 
   const { closeModal, toggleModal } = useModal()
   const editDepth = useEditDepth()
@@ -74,6 +74,7 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R
     setLinkUrl(null)
     setLinkLabel(null)
     setSelectedNodes([])
+    setStateData({})
   }, [setIsLink, setLinkUrl, setLinkLabel, setSelectedNodes])
 
   const updateLinkEditor = useCallback(() => {

packages/richtext-lexical/src/field/features/toolbars/shared/ToolbarButton/index.tsx

@@ -81,10 +81,14 @@ export const ToolbarButton = ({
       className={className}
       onClick={() => {
         if (enabled !== false) {
-          item.onSelect({
-            editor,
-            isActive: active,
-          })
+          editor.focus()
+          // We need to wrap the onSelect in a setTimeout, so the editor is properly focused before the onSelect is called.
+          setTimeout(() => {
+            item.onSelect({
+              editor,
+              isActive: active,
+            })
+          }, 0)
         }
       }}
       onMouseDown={(e) => {

packages/richtext-lexical/src/field/features/toolbars/shared/ToolbarDropdown/DropDown.tsx

@@ -66,10 +66,14 @@ export function DropDownItem({
       className={className}
       onClick={() => {
         if (enabled !== false) {
-          item.onSelect({
-            editor,
-            isActive: active,
-          })
+          editor.focus()
+          // We need to wrap the onSelect in a setTimeout, so the editor is properly focused before the onSelect is called.
+          setTimeout(() => {
+            item.onSelect({
+              editor,
+              isActive: active,
+            })
+          }, 0)
         }
       }}
       onMouseDown={(e) => {