fix(richtext-lexical): avoid conflicts between internal component/schema map paths and field names (#7042)

Author: AlessioGr

packages/richtext-lexical/src/cell/index.tsx

@@ -62,7 +62,7 @@ export const RichTextCell: React.FC<
 
       Object.entries(clientFunctions).forEach(([key, plugin]) => {
         if (key.startsWith(`lexicalFeature.${schemaPath}.`)) {
-          if (!key.includes('.components.')) {
+          if (!key.includes('.lexical_internal_components.')) {
             featureProvidersLocal.push(plugin)
           }
           featureProvidersAndComponentsLoaded++
@@ -167,7 +167,9 @@ export const RichTextCell: React.FC<
           featureProviderComponents.map((featureProvider) => {
             // get all components starting with key feature.${FeatureProvider.key}.components.{featureComponentKey}
             const featureComponentKeys = Array.from(richTextComponentMap.keys()).filter((key) =>
-              key.startsWith(`feature.${featureProvider.key}.components.`),
+              key.startsWith(
+                `lexical_internal_feature.${featureProvider.key}.lexical_internal_components.`,
+              ),
             )
 
             const featureComponents: React.ReactNode[] = featureComponentKeys.map((key) => {

packages/richtext-lexical/src/features/blocks/component/index.tsx

@@ -56,8 +56,8 @@ export const BlockComponent: React.FC<Props> = (props) => {
     field: { richTextComponentMap },
   } = useEditorConfigContext()
 
-  const componentMapRenderedFieldsPath = `feature.blocks.fields.${formData?.blockType}`
-  const schemaFieldsPath = `${schemaPath}.feature.blocks.${formData?.blockType}`
+  const componentMapRenderedFieldsPath = `lexical_internal_feature.blocks.fields.${formData?.blockType}`
+  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.${formData?.blockType}`
 
   const reducedBlock: ReducedBlock = (
     editorConfig?.resolvedFeatureMap?.get('blocks')
@@ -145,7 +145,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
           formData={formData}
           formSchema={Array.isArray(fieldMap) ? fieldMap : []}
           nodeKey={nodeKey}
-          path={`${path}.feature.blocks.${formData.blockType}`}
+          path={`${path}.lexical_internal_feature.blocks.${formData.blockType}`}
           reducedBlock={reducedBlock}
           schemaPath={schemaFieldsPath}
         />

packages/richtext-lexical/src/features/createFeaturePropComponent.tsx

@@ -13,7 +13,7 @@ const useLexicalFeatureProp = <T,>(featureKey: string, componentKey: string, pro
   const schemaPath = schemaPathFromCellProps || schemaPathFromFieldProps // schemaPathFromCellProps needs to have priority, as there can be cells within fields (e.g. list drawers) and the cell schemaPath needs to be used there - not the parent field schemaPath. There cannot be fields within cells.
 
   useAddClientFunction(
-    `lexicalFeature.${schemaPath}.${featureKey}.components.${componentKey}`,
+    `lexicalFeature.${schemaPath}.${featureKey}.lexical_internal_components.${componentKey}`,
     prop,
   )
 }

packages/richtext-lexical/src/field/index.tsx

@@ -46,7 +46,9 @@ export const RichTextField: React.FC<
   let featureProvidersAndComponentsToLoad = 0 // feature providers and components
   for (const featureProvider of featureProviderComponents) {
     const featureComponentKeys = Array.from(richTextComponentMap.keys()).filter((key) =>
-      key.startsWith(`feature.${featureProvider.key}.components.`),
+      key.startsWith(
+        `lexical_internal_feature.${featureProvider.key}.lexical_internal_components.`,
+      ),
     )
 
     featureProvidersAndComponentsToLoad += 1
@@ -60,9 +62,10 @@ export const RichTextField: React.FC<
 
       Object.entries(clientFunctions).forEach(([key, plugin]) => {
         if (key.startsWith(`lexicalFeature.${schemaPath}.`)) {
-          if (!key.includes('.components.')) {
+          if (!key.includes('.lexical_internal_components.')) {
             featureProvidersLocal.push(plugin)
           }
+
           featureProvidersAndComponentsLoaded++
         }
       })
@@ -112,7 +115,9 @@ export const RichTextField: React.FC<
           featureProviderComponents.map((featureProvider) => {
             // get all components starting with key feature.${FeatureProvider.key}.components.{featureComponentKey}
             const featureComponentKeys = Array.from(richTextComponentMap.keys()).filter((key) =>
-              key.startsWith(`feature.${featureProvider.key}.components.`),
+              key.startsWith(
+                `lexical_internal_feature.${featureProvider.key}.lexical_internal_components.`,
+              ),
             )
             const featureComponents: React.ReactNode[] = featureComponentKeys.map((key) => {
               return richTextComponentMap.get(key)

packages/richtext-lexical/src/utilities/fieldsDrawer/DrawerContent.tsx

@@ -34,8 +34,8 @@ export const DrawerContent: React.FC<Omit<FieldsDrawerProps, 'drawerSlug' | 'dra
     field: { richTextComponentMap },
   } = useEditorConfigContext()
 
-  const componentMapRenderedFieldsPath = `feature.${featureKey}.fields${schemaPathSuffix ? `.${schemaPathSuffix}` : ''}`
-  const schemaFieldsPath = `${schemaPath}.feature.${featureKey}${schemaPathSuffix ? `.${schemaPathSuffix}` : ''}`
+  const componentMapRenderedFieldsPath = `lexical_internal_feature.${featureKey}.fields${schemaPathSuffix ? `.${schemaPathSuffix}` : ''}`
+  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.${featureKey}${schemaPathSuffix ? `.${schemaPathSuffix}` : ''}`
 
   const fieldMap = richTextComponentMap.get(componentMapRenderedFieldsPath) // Field Schema
 

packages/richtext-lexical/src/utilities/generateComponentMap.tsx

@@ -44,7 +44,7 @@ export const getGenerateComponentMap =
 
               if (Component) {
                 componentMap.set(
-                  `feature.${featureKey}.components.${componentKey}`,
+                  `lexical_internal_feature.${featureKey}.lexical_internal_components.${componentKey}`,
                   <WithServerSideProps
                     Component={Component}
                     componentKey={componentKey}
@@ -79,11 +79,14 @@ export const getGenerateComponentMap =
                   disableAddingID: true,
                   fieldSchema: fields,
                   i18n,
-                  parentPath: `${schemaPath}.feature.${featureKey}.fields.${schemaKey}`,
+                  parentPath: `${schemaPath}.lexical_internal_feature.${featureKey}.fields.${schemaKey}`,
                   readOnly: false,
                 })
 
-                componentMap.set(`feature.${featureKey}.fields.${schemaKey}`, mappedFields)
+                componentMap.set(
+                  `lexical_internal_feature.${featureKey}.fields.${schemaKey}`,
+                  mappedFields,
+                )
               }
             }
           }

packages/richtext-lexical/src/utilities/generateSchemaMap.ts

@@ -33,7 +33,7 @@ export const getGenerateSchemaMap =
             schemaPath: schemaKey,
           })
 
-          schemaMap.set(`${schemaPath}.feature.${featureKey}.${schemaKey}`, fields)
+          schemaMap.set(`${schemaPath}.lexical_internal_feature.${featureKey}.${schemaKey}`, fields)
         }
       }
     }