fix(richtext-*): Link Drawer conditions - missing updates from server

packages/richtext-lexical/src/field/features/link/drawer/index.tsx

@@ -2,6 +2,7 @@ import {
   Drawer,
   FieldPathProvider,
   Form,
+  type FormProps,
   type FormState,
   FormSubmit,
   RenderFields,
@@ -11,7 +12,7 @@ import {
   useTranslation,
 } from '@payloadcms/ui'
 import { useFieldPath } from '@payloadcms/ui'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 
 import { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider'
 import './index.scss'
@@ -50,7 +51,9 @@ export const LinkDrawer: React.FC<Props> = ({ drawerSlug, handleModalSubmit, sta
         serverURL: config.serverURL,
       }) // Form State
 
-      setInitialState(state)
+      if (state) {
+        setInitialState(state)
+      }
     }
 
     if (stateData) {
@@ -58,11 +61,40 @@ export const LinkDrawer: React.FC<Props> = ({ drawerSlug, handleModalSubmit, sta
     }
   }, [config.routes.api, config.serverURL, schemaFieldsPath, getDocPreferences, id, stateData])
 
+  const onChange: FormProps['onChange'][0] = useCallback(
+    async ({ formState: prevFormState }) => {
+      const docPreferences = await getDocPreferences()
+
+      return getFormState({
+        apiRoute: config.routes.api,
+        body: {
+          id,
+          docPreferences,
+          formState: prevFormState,
+          operation: 'update',
+          schemaPath: schemaFieldsPath,
+        },
+        serverURL: config.serverURL,
+      })
+    },
+
+    [config.routes.api, config.serverURL, schemaFieldsPath, getDocPreferences, id],
+  )
+
   return (
     <Drawer className={baseClass} slug={drawerSlug} title={t('fields:editLink') ?? ''}>
       <FieldPathProvider path="" schemaPath="">
-        <Form fields={fieldMap} initialState={initialState} onSubmit={handleModalSubmit}>
-          <RenderFields fieldMap={fieldMap} forceRender readOnly={false} />
+        <Form
+          fields={Array.isArray(fieldMap) ? fieldMap : []}
+          initialState={initialState}
+          onChange={[onChange]}
+          onSubmit={handleModalSubmit}
+        >
+          <RenderFields
+            fieldMap={Array.isArray(fieldMap) ? fieldMap : []}
+            forceRender
+            readOnly={false}
+          />
 
           <FormSubmit>{t('general:submit')}</FormSubmit>
         </Form>

packages/richtext-slate/src/field/elements/link/LinkDrawer/index.tsx

@@ -3,17 +3,23 @@
 import {
   Drawer,
   Form,
+  type FormProps,
   FormSubmit,
   RenderFields,
+  getFormState,
+  useConfig,
+  useDocumentInfo,
   useEditDepth,
+  useFieldPath,
   useTranslation,
 } from '@payloadcms/ui'
 import { FieldPathProvider } from '@payloadcms/ui/forms'
 import { useHotkey } from '@payloadcms/ui/hooks'
-import React, { useRef } from 'react'
+import React, { useCallback, useRef } from 'react'
 
 import type { Props } from './types'
 
+import { linkFieldsSchemaPath } from '../shared'
 import './index.scss'
 
 const baseClass = 'rich-text-link-edit-modal'
@@ -25,11 +31,35 @@ export const LinkDrawer: React.FC<Props> = ({
   initialState,
 }) => {
   const { t } = useTranslation()
+  const { schemaPath } = useFieldPath()
+  const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`
+  const { id, getDocPreferences } = useDocumentInfo()
+  const config = useConfig()
+
+  const onChange: FormProps['onChange'][0] = useCallback(
+    async ({ formState: prevFormState }) => {
+      const docPreferences = await getDocPreferences()
+
+      return getFormState({
+        apiRoute: config.routes.api,
+        body: {
+          id,
+          docPreferences,
+          formState: prevFormState,
+          operation: 'update',
+          schemaPath: fieldMapPath,
+        },
+        serverURL: config.serverURL,
+      })
+    },
+
+    [config.routes.api, config.serverURL, fieldMapPath, getDocPreferences, id],
+  )
 
   return (
     <FieldPathProvider path="" schemaPath="">
       <Drawer className={baseClass} slug={drawerSlug} title={t('fields:editLink')}>
-        <Form initialState={initialState} onSubmit={handleModalSubmit}>
+        <Form initialState={initialState} onChange={[onChange]} onSubmit={handleModalSubmit}>
           <RenderFields fieldMap={fieldMap} forceRender readOnly={false} />
           <LinkSubmit />
         </Form>