chore(richtext-lexical): add DebugJsxConverterFeature

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

@@ -25,6 +25,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/exports/react/index.ts

@@ -1,21 +1,22 @@
-export { BlockquoteJSXConverter } from './components/RichText/converter/converters/blockquote.js'
-export { HeadingJSXConverter } from './components/RichText/converter/converters/heading.js'
-export { HorizontalRuleJSXConverter } from './components/RichText/converter/converters/horizontalRule.js'
-export { LinebreakJSXConverter } from './components/RichText/converter/converters/linebreak.js'
-export { LinkJSXConverter } from './components/RichText/converter/converters/link.js'
-export { ListJSXConverter } from './components/RichText/converter/converters/list.js'
-export { ParagraphJSXConverter } from './components/RichText/converter/converters/paragraph.js'
-export { TabJSXConverter } from './components/RichText/converter/converters/tab.js'
-export { TableJSXConverter } from './components/RichText/converter/converters/table.js'
-export { TextJSXConverter } from './components/RichText/converter/converters/text.js'
+export { BlockquoteJSXConverter } from '../../features/converters/jsx/converter/converters/blockquote.js'
 
-export { UploadJSXConverter } from './components/RichText/converter/converters/upload.js'
+export { HeadingJSXConverter } from '../../features/converters/jsx/converter/converters/heading.js'
+export { HorizontalRuleJSXConverter } from '../../features/converters/jsx/converter/converters/horizontalRule.js'
+export { LinebreakJSXConverter } from '../../features/converters/jsx/converter/converters/linebreak.js'
+export { LinkJSXConverter } from '../../features/converters/jsx/converter/converters/link.js'
+export { ListJSXConverter } from '../../features/converters/jsx/converter/converters/list.js'
+export { ParagraphJSXConverter } from '../../features/converters/jsx/converter/converters/paragraph.js'
+export { TabJSXConverter } from '../../features/converters/jsx/converter/converters/tab.js'
+export { TableJSXConverter } from '../../features/converters/jsx/converter/converters/table.js'
+export { TextJSXConverter } from '../../features/converters/jsx/converter/converters/text.js'
+export { UploadJSXConverter } from '../../features/converters/jsx/converter/converters/upload.js'
 
-export { defaultJSXConverters } from './components/RichText/converter/defaultConverters.js'
-export { convertLexicalNodesToJSX } from './components/RichText/converter/index.js'
+export { defaultJSXConverters } from '../../features/converters/jsx/converter/defaultConverters.js'
+
+export { convertLexicalNodesToJSX } from '../../features/converters/jsx/converter/index.js'
 export type {
   JSXConverter,
   JSXConverters,
   SerializedLexicalNodeWithParent,
-} from './components/RichText/converter/types.js'
-export { type JSXConvertersFunction, RichText } from './components/RichText/index.js'
+} from '../../features/converters/jsx/converter/types.js'
+export { type JSXConvertersFunction, RichText } from '../../features/converters/jsx/index.js'

packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/blockquote.tsx → packages/richtext-lexical/src/features/converters/jsx/converter/converters/blockquote.tsx

@@ -1,4 +1,4 @@
-import type { SerializedQuoteNode } from '../../../../../../nodeTypes.js'
+import type { SerializedQuoteNode } from '../../../../../nodeTypes.js'
 import type { JSXConverters } from '../types.js'
 
 export const BlockquoteJSXConverter: JSXConverters<SerializedQuoteNode> = {

packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/heading.tsx → packages/richtext-lexical/src/features/converters/jsx/converter/converters/heading.tsx

@@ -1,4 +1,4 @@
-import type { SerializedHeadingNode } from '../../../../../../nodeTypes.js'
+import type { SerializedHeadingNode } from '../../../../../nodeTypes.js'
 import type { JSXConverters } from '../types.js'
 
 export const HeadingJSXConverter: JSXConverters<SerializedHeadingNode> = {

packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/horizontalRule.tsx → packages/richtext-lexical/src/features/converters/jsx/converter/converters/horizontalRule.tsx

@@ -1,4 +1,4 @@
-import type { SerializedHorizontalRuleNode } from '../../../../../../nodeTypes.js'
+import type { SerializedHorizontalRuleNode } from '../../../../../nodeTypes.js'
 import type { JSXConverters } from '../types.js'
 export const HorizontalRuleJSXConverter: JSXConverters<SerializedHorizontalRuleNode> = {
   horizontalrule: () => {

packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/linebreak.tsx → packages/richtext-lexical/src/features/converters/jsx/converter/converters/linebreak.tsx

@@ -1,4 +1,4 @@
-import type { SerializedLineBreakNode } from '../../../../../../nodeTypes.js'
+import type { SerializedLineBreakNode } from '../../../../../nodeTypes.js'
 import type { JSXConverters } from '../types.js'
 
 export const LinebreakJSXConverter: JSXConverters<SerializedLineBreakNode> = {

packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/link.tsx → packages/richtext-lexical/src/features/converters/jsx/converter/converters/link.tsx

@@ -1,4 +1,4 @@
-import type { SerializedAutoLinkNode, SerializedLinkNode } from '../../../../../../nodeTypes.js'
+import type { SerializedAutoLinkNode, SerializedLinkNode } from '../../../../../nodeTypes.js'
 import type { JSXConverters } from '../types.js'
 
 export const LinkJSXConverter: (args: {

packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/list.tsx → packages/richtext-lexical/src/features/converters/jsx/converter/converters/list.tsx

@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from 'uuid'
 
-import type { SerializedListItemNode, SerializedListNode } from '../../../../../../nodeTypes.js'
+import type { SerializedListItemNode, SerializedListNode } from '../../../../../nodeTypes.js'
 import type { JSXConverters } from '../types.js'
 
 export const ListJSXConverter: JSXConverters<SerializedListItemNode | SerializedListNode> = {

packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/paragraph.tsx → packages/richtext-lexical/src/features/converters/jsx/converter/converters/paragraph.tsx

@@ -1,4 +1,4 @@
-import type { SerializedParagraphNode } from '../../../../../../nodeTypes.js'
+import type { SerializedParagraphNode } from '../../../../../nodeTypes.js'
 import type { JSXConverters } from '../types.js'
 
 export const ParagraphJSXConverter: JSXConverters<SerializedParagraphNode> = {

packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/tab.tsx → packages/richtext-lexical/src/features/converters/jsx/converter/converters/tab.tsx

@@ -1,4 +1,4 @@
-import type { SerializedTabNode } from '../../../../../../nodeTypes.js'
+import type { SerializedTabNode } from '../../../../../nodeTypes.js'
 import type { JSXConverters } from '../types.js'
 
 export const TabJSXConverter: JSXConverters<SerializedTabNode> = {

packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/table.tsx → packages/richtext-lexical/src/features/converters/jsx/converter/converters/table.tsx

@@ -2,7 +2,7 @@ import type {
   SerializedTableCellNode,
   SerializedTableNode,
   SerializedTableRowNode,
-} from '../../../../../../nodeTypes.js'
+} from '../../../../../nodeTypes.js'
 import type { JSXConverters } from '../types.js'
 
 export const TableJSXConverter: JSXConverters<

packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/text.tsx → packages/richtext-lexical/src/features/converters/jsx/converter/converters/text.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-import type { SerializedTextNode } from '../../../../../../nodeTypes.js'
+import type { SerializedTextNode } from '../../../../../nodeTypes.js'
 import type { JSXConverters } from '../types.js'
 
-import { NodeFormat } from '../../../../../../lexical/utils/nodeFormat.js'
+import { NodeFormat } from '../../../../../lexical/utils/nodeFormat.js'
 
 export const TextJSXConverter: JSXConverters<SerializedTextNode> = {
   text: ({ node }) => {

packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/upload.tsx → packages/richtext-lexical/src/features/converters/jsx/converter/converters/upload.tsx

@@ -1,6 +1,6 @@
 import type { FileData, FileSize, TypeWithID } from 'payload'
 
-import type { SerializedUploadNode } from '../../../../../../nodeTypes.js'
+import type { SerializedUploadNode } from '../../../../../nodeTypes.js'
 import type { JSXConverters } from '../types.js'
 
 export const UploadJSXConverter: JSXConverters<SerializedUploadNode> = {

packages/richtext-lexical/src/exports/react/components/RichText/converter/defaultConverters.ts → packages/richtext-lexical/src/features/converters/jsx/converter/defaultConverters.ts

@@ -1,4 +1,4 @@
-import type { DefaultNodeTypes } from '../../../../../nodeTypes.js'
+import type { DefaultNodeTypes } from '../../../../nodeTypes.js'
 import type { JSXConverters } from './types.js'
 
 import { BlockquoteJSXConverter } from './converters/blockquote.js'

packages/richtext-lexical/src/exports/react/components/RichText/converter/index.tsx → packages/richtext-lexical/src/features/converters/jsx/converter/index.tsx

@@ -2,10 +2,10 @@ import type { SerializedEditorState, SerializedLexicalNode } from 'lexical'
 
 import React from 'react'
 
-import type { SerializedBlockNode, SerializedInlineBlockNode } from '../../../../../nodeTypes.js'
+import type { SerializedBlockNode, SerializedInlineBlockNode } from '../../../../nodeTypes.js'
 import type { JSXConverter, JSXConverters, SerializedLexicalNodeWithParent } from './types.js'
 
-import { hasText } from '../../../../../validate/hasText.js'
+import { hasText } from '../../../../validate/hasText.js'
 
 export type ConvertLexicalToHTMLArgs = {
   converters: JSXConverters

packages/richtext-lexical/src/exports/react/components/RichText/converter/types.ts → packages/richtext-lexical/src/features/converters/jsx/converter/types.ts

@@ -4,7 +4,7 @@ import type {
   DefaultNodeTypes,
   SerializedBlockNode,
   SerializedInlineBlockNode,
-} from '../../../../../nodeTypes.js'
+} from '../../../../nodeTypes.js'
 export type JSXConverter<T extends { [key: string]: any; type?: string } = SerializedLexicalNode> =
   (args: {
     childIndex: number

packages/richtext-lexical/src/exports/react/components/RichText/index.tsx → packages/richtext-lexical/src/features/converters/jsx/index.tsx

@@ -6,7 +6,7 @@ import type {
   DefaultNodeTypes,
   SerializedBlockNode,
   SerializedInlineBlockNode,
-} from '../../../../nodeTypes.js'
+} from '../../../nodeTypes.js'
 import type { JSXConverters } from './converter/types.js'
 
 import { defaultJSXConverters } from './converter/defaultConverters.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'
+
+import { defaultJSXConverters } from '../../../../converters/jsx/converter/defaultConverters.js'
+import { RichText } from '../../../../converters/jsx/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

@@ -896,6 +896,7 @@ export {
   HTMLConverterFeature,
   type HTMLConverterFeatureProps,
 } from './features/converters/html/index.js'
+export { DebugJsxConverterFeature } from './features/debug/jsxConverter/server/index.js'
 export { TestRecorderFeature } from './features/debug/testRecorder/server/index.js'
 export { TreeViewFeature } from './features/debug/treeView/server/index.js'
 export { EXPERIMENTAL_TableFeature } from './features/experimental_table/server/index.js'