feat(richtext-lexical): new FieldsDrawer utility

Author: AlessioGr

packages/richtext-lexical/src/exports/client/index.ts

@@ -123,3 +123,5 @@ export {
   $isBlockNode,
   BlockNode,
 } from '../../features/blocks/nodes/BlocksNode.js'
+
+export { FieldsDrawer } from '../../utilities/fieldsDrawer/Drawer.js'

packages/richtext-lexical/src/features/link/drawer/index.scss

@@ -24,7 +24,7 @@ import type { LinkPayload } from '../types.js'
 import { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js'
 import { getSelectedNode } from '../../../../../lexical/utils/getSelectedNode.js'
 import { setFloatingElemPositionForLinkEditor } from '../../../../../lexical/utils/setFloatingElemPositionForLinkEditor.js'
-import { LinkDrawer } from '../../../drawer/index.js'
+import { FieldsDrawer } from '../../../../../utilities/fieldsDrawer/Drawer.js'
 import { $isAutoLinkNode } from '../../../nodes/AutoLinkNode.js'
 import { $createLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from '../../../nodes/LinkNode.js'
 import { TOGGLE_LINK_WITH_MODAL_COMMAND } from './commands.js'
@@ -44,7 +44,7 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R
 
   const [stateData, setStateData] = useState<{} | (LinkFields & { id?: string; text: string })>({})
 
-  const { closeModal, isModalOpen, toggleModal } = useModal()
+  const { closeModal, toggleModal } = useModal()
   const editDepth = useEditDepth()
   const [isLink, setIsLink] = useState(false)
   const [selectedNodes, setSelectedNodes] = useState<LexicalNode[]>([])
@@ -312,50 +312,52 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R
           )}
         </div>
       </div>
-      {isModalOpen(drawerSlug) && (
-        <LinkDrawer
-          drawerSlug={drawerSlug}
-          handleModalSubmit={(fields: FormState, data: Data) => {
-            closeModal(drawerSlug)
-
-            const newLinkPayload = data as LinkFields & { text: string }
-
-            const bareLinkFields: LinkFields = {
-              ...newLinkPayload,
-            }
-            delete bareLinkFields.text
-
-            // See: https://github.com/facebook/lexical/pull/5536. This updates autolink nodes to link nodes whenever a change was made (which is good!).
-            editor.update(() => {
-              const selection = $getSelection()
-              let linkParent = null
-              if ($isRangeSelection(selection)) {
-                linkParent = getSelectedNode(selection).getParent()
-              } else {
-                if (selectedNodes.length) {
-                  linkParent = selectedNodes[0].getParent()
-                }
+      <FieldsDrawer
+        className="lexical-link-edit-drawer"
+        data={stateData}
+        drawerSlug={drawerSlug}
+        drawerTitle={t('fields:editLink')}
+        featureKey="link"
+        handleDrawerSubmit={(fields: FormState, data: Data) => {
+          closeModal(drawerSlug)
+
+          const newLinkPayload = data as LinkFields & { text: string }
+
+          const bareLinkFields: LinkFields = {
+            ...newLinkPayload,
+          }
+          delete bareLinkFields.text
+
+          // See: https://github.com/facebook/lexical/pull/5536. This updates autolink nodes to link nodes whenever a change was made (which is good!).
+          editor.update(() => {
+            const selection = $getSelection()
+            let linkParent = null
+            if ($isRangeSelection(selection)) {
+              linkParent = getSelectedNode(selection).getParent()
+            } else {
+              if (selectedNodes.length) {
+                linkParent = selectedNodes[0].getParent()
               }
+            }
 
-              if (linkParent && $isAutoLinkNode(linkParent)) {
-                const linkNode = $createLinkNode({
-                  fields: bareLinkFields,
-                })
-                linkParent.replace(linkNode, true)
-              }
-            })
-
-            // Needs to happen AFTER a potential auto link => link node conversion, as otherwise, the updated text to display may be lost due to
-            // it being applied to the auto link node instead of the link node.
-            editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
-              fields: bareLinkFields,
-              selectedNodes,
-              text: newLinkPayload.text,
-            })
-          }}
-          stateData={stateData}
-        />
-      )}
+            if (linkParent && $isAutoLinkNode(linkParent)) {
+              const linkNode = $createLinkNode({
+                fields: bareLinkFields,
+              })
+              linkParent.replace(linkNode, true)
+            }
+          })
+
+          // Needs to happen AFTER a potential auto link => link node conversion, as otherwise, the updated text to display may be lost due to
+          // it being applied to the auto link node instead of the link node.
+          editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
+            fields: bareLinkFields,
+            selectedNodes,
+            text: newLinkPayload.text,
+          })
+        }}
+        schemaPathSuffix="fields"
+      />
     </React.Fragment>
   )
 }