From 2e09da8a8c90fd90c556226cdc4392b6cd1a9ba3 Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Tue, 14 Jan 2025 00:55:51 -0700 Subject: [PATCH] feat(richtext-lexical): add jsx and html converters for tab nodes (#10565) --- .../components/RichText/converter/converters/tab.tsx | 9 +++++++++ .../components/RichText/converter/defaultConverters.ts | 2 ++ packages/richtext-lexical/src/exports/react/index.ts | 2 ++ .../converters/html/converter/converters/linebreak.ts | 5 ++--- .../converters/html/converter/converters/paragraph.ts | 3 +-- .../features/converters/html/converter/converters/tab.ts | 9 +++++++++ .../converters/html/converter/converters/text.ts | 3 +-- .../converters/html/converter/defaultConverters.ts | 2 ++ packages/richtext-lexical/src/index.ts | 2 ++ packages/richtext-lexical/src/nodeTypes.ts | 9 +++++++++ 10 files changed, 39 insertions(+), 7 deletions(-) create mode 100644 packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/tab.tsx create mode 100644 packages/richtext-lexical/src/features/converters/html/converter/converters/tab.ts diff --git a/packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/tab.tsx b/packages/richtext-lexical/src/exports/react/components/RichText/converter/converters/tab.tsx new file mode 100644 index 000000000..63d66a216 --- /dev/null +++ b/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 = { + tab: ({ node }) => { + // Tab + return node.text + }, +} diff --git a/packages/richtext-lexical/src/exports/react/components/RichText/converter/defaultConverters.ts b/packages/richtext-lexical/src/exports/react/components/RichText/converter/defaultConverters.ts index 6051d43d4..5e59c8094 100644 --- a/packages/richtext-lexical/src/exports/react/components/RichText/converter/defaultConverters.ts +++ b/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 = { ...ListJSXConverter, ...LinkJSXConverter({}), ...UploadJSXConverter, + ...TabJSXConverter, } diff --git a/packages/richtext-lexical/src/exports/react/index.ts b/packages/richtext-lexical/src/exports/react/index.ts index 6810ccbe4..70de9c5d5 100644 --- a/packages/richtext-lexical/src/exports/react/index.ts +++ b/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' diff --git a/packages/richtext-lexical/src/features/converters/html/converter/converters/linebreak.ts b/packages/richtext-lexical/src/features/converters/html/converter/converters/linebreak.ts index 15b67fe55..281d76c31 100644 --- a/packages/richtext-lexical/src/features/converters/html/converter/converters/linebreak.ts +++ b/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 = { +export const LinebreakHTMLConverter: HTMLConverter = { converter() { return `
` }, diff --git a/packages/richtext-lexical/src/features/converters/html/converter/converters/paragraph.ts b/packages/richtext-lexical/src/features/converters/html/converter/converters/paragraph.ts index 723673aa1..f9bd4640e 100644 --- a/packages/richtext-lexical/src/features/converters/html/converter/converters/paragraph.ts +++ b/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' diff --git a/packages/richtext-lexical/src/features/converters/html/converter/converters/tab.ts b/packages/richtext-lexical/src/features/converters/html/converter/converters/tab.ts new file mode 100644 index 000000000..b4f4b5e83 --- /dev/null +++ b/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 = { + converter({ node }) { + return node.text + }, + nodeTypes: ['tab'], +} diff --git a/packages/richtext-lexical/src/features/converters/html/converter/converters/text.ts b/packages/richtext-lexical/src/features/converters/html/converter/converters/text.ts index 3389674f0..854db6739 100644 --- a/packages/richtext-lexical/src/features/converters/html/converter/converters/text.ts +++ b/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' diff --git a/packages/richtext-lexical/src/features/converters/html/converter/defaultConverters.ts b/packages/richtext-lexical/src/features/converters/html/converter/defaultConverters.ts index 8802e10c1..b4ca3d609 100644 --- a/packages/richtext-lexical/src/features/converters/html/converter/defaultConverters.ts +++ b/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[] = [ ParagraphHTMLConverter, TextHTMLConverter, LinebreakHTMLConverter, + TabHTMLConverter, ] diff --git a/packages/richtext-lexical/src/index.ts b/packages/richtext-lexical/src/index.ts index 67572a450..170e5e397 100644 --- a/packages/richtext-lexical/src/index.ts +++ b/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 { diff --git a/packages/richtext-lexical/src/nodeTypes.ts b/packages/richtext-lexical/src/nodeTypes.ts index c158acc69..e475db716 100644 --- a/packages/richtext-lexical/src/nodeTypes.ts +++ b/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