chore(richtext-lexical): add DebugJsxConverterFeature (#10856)

Display the editor content below using the JSX converter
Added for debugging reasons, similar to TreeViewFeature

usage:

```ts
    {
      name: 'content',
      type: 'richText',
      editor: lexicalEditor({
        features: ({ defaultFeatures }) => [...defaultFeatures, DebugJsxConverterFeature()],
      }),
    },
```

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

@@ -30,6 +30,7 @@ export { UnorderedListFeatureClient } from '../../features/lists/unorderedList/c
 export { LexicalPluginToLexicalFeatureClient } from '../../features/migrations/lexicalPluginToLexical/feature.client.js'
 export { SlateToLexicalFeatureClient } from '../../features/migrations/slateToLexical/feature.client.js'
 export { ParagraphFeatureClient } from '../../features/paragraph/client/index.js'
+export { DebugJsxConverterFeatureClient } from '../../features/debug/jsxConverter/client/index.js'
 
 export { RelationshipFeatureClient } from '../../features/relationship/client/index.js'
 

packages/richtext-lexical/src/features/debug/jsxConverter/client/index.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { createClientFeature } from '../../../../utilities/createClientFeature.js'
+import { RichTextPlugin } from './plugin/index.js'
+
+export const DebugJsxConverterFeatureClient = createClientFeature({
+  plugins: [
+    {
+      Component: RichTextPlugin,
+      position: 'bottom',
+    },
+  ],
+})

packages/richtext-lexical/src/features/debug/jsxConverter/client/plugin/index.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useEffect, useState } from 'react'
+
+// eslint-disable-next-line payload/no-imports-from-exports-dir
+import { defaultJSXConverters, RichText } from '../../../../../exports/react/index.js'
+
+export function RichTextPlugin() {
+  const [editor] = useLexicalComposerContext()
+  const [editorState, setEditorState] = useState(editor.getEditorState().toJSON())
+
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      setEditorState(editorState.toJSON())
+    })
+  }, [editor])
+
+  return <RichText converters={defaultJSXConverters} data={editorState} />
+}

packages/richtext-lexical/src/features/debug/jsxConverter/server/index.ts

@@ -0,0 +1,8 @@
+import { createServerFeature } from '../../../../utilities/createServerFeature.js'
+
+export const DebugJsxConverterFeature = createServerFeature({
+  feature: {
+    ClientFeature: '@payloadcms/richtext-lexical/client#DebugJsxConverterFeatureClient',
+  },
+  key: 'jsxConverter',
+})

packages/richtext-lexical/src/index.ts

@@ -901,6 +901,7 @@ export {
   HTMLConverterFeature,
   type HTMLConverterFeatureProps,
 } from './features/converters/lexicalToHtml_deprecated/index.js'
+export { DebugJsxConverterFeature } from './features/debug/jsxConverter/server/index.js'
 export { convertLexicalToMarkdown } from './features/converters/lexicalToMarkdown/index.js'
 export { convertMarkdownToLexical } from './features/converters/markdownToLexical/index.js'