feat(richtext-lexical): add jsx and html converters for tab nodes (#10565)

Author: AlessioGr

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

@@ -0,0 +1,9 @@
+import type { SerializedTabNode } from '../../../../../../nodeTypes.js'
+import type { JSXConverters } from '../types.js'
+
+export const TabJSXConverter: JSXConverters<SerializedTabNode> = {
+  tab: ({ node }) => {
+    // Tab
+    return node.text
+  },
+}

packages/richtext-lexical/src/exports/react/components/RichText/converter/defaultConverters.ts

@@ -8,6 +8,7 @@ import { LinebreakJSXConverter } from './converters/linebreak.js'
 import { LinkJSXConverter } from './converters/link.js'
 import { ListJSXConverter } from './converters/list.js'
 import { ParagraphJSXConverter } from './converters/paragraph.js'
+import { TabJSXConverter } from './converters/tab.js'
 import { TableJSXConverter } from './converters/table.js'
 import { TextJSXConverter } from './converters/text.js'
 import { UploadJSXConverter } from './converters/upload.js'
@@ -23,4 +24,5 @@ export const defaultJSXConverters: JSXConverters<DefaultNodeTypes> = {
   ...ListJSXConverter,
   ...LinkJSXConverter({}),
   ...UploadJSXConverter,
+  ...TabJSXConverter,
 }

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

@@ -5,8 +5,10 @@ export { LinebreakJSXConverter } from './components/RichText/converter/converter
 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 { UploadJSXConverter } from './components/RichText/converter/converters/upload.js'
 
 export { defaultJSXConverters } from './components/RichText/converter/defaultConverters.js'

packages/richtext-lexical/src/features/converters/html/converter/converters/linebreak.ts

@@ -1,8 +1,7 @@
-import type { SerializedParagraphNode } from 'lexical'
-
+import type { SerializedLineBreakNode } from '../../../../../nodeTypes.js'
 import type { HTMLConverter } from '../types.js'
 
-export const LinebreakHTMLConverter: HTMLConverter<SerializedParagraphNode> = {
+export const LinebreakHTMLConverter: HTMLConverter<SerializedLineBreakNode> = {
   converter() {
     return `<br>`
   },

packages/richtext-lexical/src/features/converters/html/converter/converters/paragraph.ts

@@ -1,5 +1,4 @@
-import type { SerializedParagraphNode } from 'lexical'
-
+import type { SerializedParagraphNode } from '../../../../../nodeTypes.js'
 import type { HTMLConverter } from '../types.js'
 
 import { convertLexicalNodesToHTML } from '../index.js'

packages/richtext-lexical/src/features/converters/html/converter/converters/tab.ts

@@ -0,0 +1,9 @@
+import type { SerializedTabNode } from '../../../../../nodeTypes.js'
+import type { HTMLConverter } from '../types.js'
+
+export const TabHTMLConverter: HTMLConverter<SerializedTabNode> = {
+  converter({ node }) {
+    return node.text
+  },
+  nodeTypes: ['tab'],
+}

packages/richtext-lexical/src/features/converters/html/converter/converters/text.ts

@@ -1,7 +1,6 @@
-import type { SerializedTextNode } from 'lexical'
-
 import escapeHTML from 'escape-html'
 
+import type { SerializedTextNode } from '../../../../../nodeTypes.js'
 import type { HTMLConverter } from '../types.js'
 
 import { NodeFormat } from '../../../../../lexical/utils/nodeFormat.js'

packages/richtext-lexical/src/features/converters/html/converter/defaultConverters.ts

@@ -2,10 +2,12 @@ import type { HTMLConverter } from './types.js'
 
 import { LinebreakHTMLConverter } from './converters/linebreak.js'
 import { ParagraphHTMLConverter } from './converters/paragraph.js'
+import { TabHTMLConverter } from './converters/tab.js'
 import { TextHTMLConverter } from './converters/text.js'
 
 export const defaultHTMLConverters: HTMLConverter<any>[] = [
   ParagraphHTMLConverter,
   TextHTMLConverter,
   LinebreakHTMLConverter,
+  TabHTMLConverter,
 ]

packages/richtext-lexical/src/index.ts

@@ -869,6 +869,8 @@ export {
 export { LinebreakHTMLConverter } from './features/converters/html/converter/converters/linebreak.js'
 export { ParagraphHTMLConverter } from './features/converters/html/converter/converters/paragraph.js'
 
+export { TabHTMLConverter } from './features/converters/html/converter/converters/tab.js'
+
 export { TextHTMLConverter } from './features/converters/html/converter/converters/text.js'
 export { defaultHTMLConverters } from './features/converters/html/converter/defaultConverters.js'
 export {

packages/richtext-lexical/src/nodeTypes.ts

@@ -1,5 +1,6 @@
 import type {
   SerializedLineBreakNode as _SerializedLineBreakNode,
+  SerializedTabNode as _SerializedTabNode,
   SerializedTextNode as _SerializedTextNode,
   SerializedEditorState,
   SerializedElementNode,
@@ -55,6 +56,14 @@ export type SerializedTextNode = Spread<
   _SerializedTextNode
 >
 
+export type SerializedTabNode = Spread<
+  {
+    children?: never // required so that our typed editor state doesn't automatically add children
+    type: 'tab'
+  },
+  _SerializedTabNode
+>
+
 export type SerializedLineBreakNode = Spread<
   {
     children?: never // required so that our typed editor state doesn't automatically add children