fix(richtext-lexical): upload, relationship and block node insertion …

…fails sometimes (#6390) Backport of #6389
payloadcms · May 16, 2024 · 48a410e · 48a410e
1 parent 82b88a3
commit 48a410e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 21 deletions.
diff --git a/packages/richtext-lexical/src/field/features/Blocks/plugin/index.tsx b/packages/richtext-lexical/src/field/features/Blocks/plugin/index.tsx
@@ -31,11 +31,12 @@ export function BlocksPlugin(): JSX.Element | null {
         INSERT_BLOCK_COMMAND,
         (payload: InsertBlockPayload) => {
           editor.update(() => {
-            const blockNode = $createBlockNode(payload)
-
             const selection = $getSelection() || $getPreviousSelection()
 
             if ($isRangeSelection(selection)) {
+              const blockNode = $createBlockNode(payload)
+              $insertNodeToNearestRoot(blockNode)
+
               const { focus } = selection
               const focusNode = focus.getNode()
 
@@ -51,8 +52,6 @@ export function BlocksPlugin(): JSX.Element | null {
               ) {
                 focusNode.remove()
               }
-
-              $insertNodeToNearestRoot(blockNode)
             }
           })
 

diff --git a/packages/richtext-lexical/src/field/features/Relationship/plugins/index.tsx b/packages/richtext-lexical/src/field/features/Relationship/plugins/index.tsx
@@ -46,11 +46,12 @@ export function RelationshipPlugin(props?: RelationshipFeatureProps): JSX.Elemen
     return editor.registerCommand<RelationshipData>(
       INSERT_RELATIONSHIP_COMMAND,
       (payload) => {
-        const relationshipNode = $createRelationshipNode(payload)
-
         const selection = $getSelection() || $getPreviousSelection()
 
         if ($isRangeSelection(selection)) {
+          const relationshipNode = $createRelationshipNode(payload)
+          $insertNodeToNearestRoot(relationshipNode)
+
           const { focus } = selection
           const focusNode = focus.getNode()
 
@@ -66,8 +67,6 @@ export function RelationshipPlugin(props?: RelationshipFeatureProps): JSX.Elemen
           ) {
             focusNode.remove()
           }
-
-          $insertNodeToNearestRoot(relationshipNode)
         }
 
         return true

diff --git a/packages/richtext-lexical/src/field/features/Upload/component/ExtraFieldsDrawer/index.tsx b/packages/richtext-lexical/src/field/features/Upload/component/ExtraFieldsDrawer/index.tsx
@@ -57,7 +57,7 @@ export const ExtraFieldsUploadDrawer: React.FC<
   const fieldSchema = useMemo(() => {
     const fieldSchemaUnSanitized = (
       editorConfig?.resolvedFeatureMap.get('upload')?.props as UploadFeatureProps
-    )?.collections?.[relatedCollection.slug].fields
+    )?.collections?.[relatedCollection.slug]?.fields
 
     const validRelationships = config.collections.map((c) => c.slug) || []
     // Sanitize custom fields here

diff --git a/packages/richtext-lexical/src/field/features/Upload/plugin/index.tsx b/packages/richtext-lexical/src/field/features/Upload/plugin/index.tsx
@@ -37,19 +37,20 @@ export function UploadPlugin(): JSX.Element | null {
         INSERT_UPLOAD_COMMAND,
         (payload: InsertUploadPayload) => {
           editor.update(() => {
-            const uploadNode = $createUploadNode({
-              data: {
-                fields: payload.fields,
-                relationTo: payload.relationTo,
-                value: {
-                  id: payload.id,
-                },
-              },
-            })
-
             const selection = $getSelection() || $getPreviousSelection()
 
             if ($isRangeSelection(selection)) {
+              const uploadNode = $createUploadNode({
+                data: {
+                  fields: payload.fields,
+                  relationTo: payload.relationTo,
+                  value: {
+                    id: payload.id,
+                  },
+                },
+              })
+              $insertNodeToNearestRoot(uploadNode)
+
               const { focus } = selection
               const focusNode = focus.getNode()
 
@@ -65,8 +66,6 @@ export function UploadPlugin(): JSX.Element | null {
               ) {
                 focusNode.remove()
               }
-
-              $insertNodeToNearestRoot(uploadNode)
             }
           })