fix(richtext-lexical): make div container optional (#10383)

Makes the wrapper container `<div class='payload-richtext'>` optional.
This is useful when importing and re-using the `<RichText/>` component
as part of another custom component already providing a container.

Author: bratvanov

packages/richtext-lexical/src/exports/react/components/RichText/index.tsx

@@ -33,6 +33,10 @@ type RichTextProps = {
    * Serialized editor state to render.
    */
   data: SerializedEditorState
+  /**
+   * If true, removes the container div wrapper.
+   */
+  disableContainer?: boolean
   /**
    * If true, disables indentation globally. If an array, disables for specific node `type` values.
    */
@@ -47,6 +51,7 @@ export const RichText: React.FC<RichTextProps> = ({
   className,
   converters,
   data: editorState,
+  disableContainer,
   disableIndent,
   disableTextAlign,
 }) => {
@@ -65,18 +70,21 @@ export const RichText: React.FC<RichTextProps> = ({
     finalConverters = defaultJSXConverters
   }
 
-  return (
-    <div className={className ?? 'payload-richtext'}>
-      {editorState &&
-        !Array.isArray(editorState) &&
-        typeof editorState === 'object' &&
-        'root' in editorState &&
-        convertLexicalToJSX({
-          converters: finalConverters,
-          data: editorState,
-          disableIndent,
-          disableTextAlign,
-        })}
-    </div>
-  )
+  const content =
+    editorState &&
+    !Array.isArray(editorState) &&
+    typeof editorState === 'object' &&
+    'root' in editorState &&
+    convertLexicalToJSX({
+      converters: finalConverters,
+      data: editorState,
+      disableIndent,
+      disableTextAlign,
+    })
+
+  if (disableContainer) {
+    return <>{content}</>
+  }
+
+  return <div className={className ?? 'payload-richtext'}>{content}</div>
 }