[lexical-markdown][lexical-playground] Bug Fix: Keep indent when switching with markdown

packages/lexical-markdown/flow/LexicalMarkdown.js.flow

@@ -127,6 +127,7 @@ declare export var CHECK_LIST: ElementTransformer;
 declare export var ORDERED_LIST: ElementTransformer;
 
 declare export var LINK: TextMatchTransformer;
+declare export var INDENT: TextMatchTransformer;
 
 declare export var TRANSFORMERS: Array<Transformer>;
 declare export var ELEMENT_TRANSFORMERS: Array<ElementTransformer>;

packages/lexical-markdown/src/MarkdownTransformers.ts

@@ -36,6 +36,8 @@ import {
   $createLineBreakNode,
   $createTextNode,
   $getState,
+  $isParagraphNode,
+  $isTextNode,
   $setState,
   createState,
   ElementNode,
@@ -216,6 +218,7 @@ const TAG_START_REGEX = /^<[a-z_][\w-]*(?:\s[^<>]*)?\/?>/i;
 const TAG_END_REGEX = /^<\/[a-z_][\w-]*\s*>/i;
 const ENDS_WITH = (regex: RegExp) =>
   new RegExp(`(?:${regex.source})$`, regex.flags);
+const INDENT_REGEX = /^\t+/;
 
 export const listMarkerState = createState('mdListMarker', {
   parse: (v) => (typeof v === 'string' && /^[-*+]$/.test(v) ? v : '-'),
@@ -622,6 +625,37 @@ export const LINK: TextMatchTransformer = {
   type: 'text-match',
 };
 
+export const INDENT: TextMatchTransformer = {
+  dependencies: [],
+  export: (node, exportChildren, exportFormat) => {
+    const parentNode = node.getParent();
+    const textContent = node.getTextContent();
+    if (
+      !$isParagraphNode(parentNode) ||
+      !$isTextNode(node) ||
+      parentNode.getFirstChild() !== node
+    ) {
+      return null;
+    }
+    const indent = parentNode.getIndent();
+    const textWithFormat = exportFormat(node, textContent);
+    return textWithFormat ? '\t'.repeat(indent) + textWithFormat : null;
+  },
+  importRegExp: INDENT_REGEX,
+  regExp: INDENT_REGEX,
+  replace: (textNode, match) => {
+    const [indents] = match;
+    const parentNode = textNode.getParent();
+    if (!parentNode || !$isParagraphNode(parentNode)) {
+      return;
+    }
+    parentNode.setIndent(indents.length);
+    textNode.setTextContent(textNode.getTextContent().replace(/^\t+/, ''));
+    return textNode;
+  },
+  type: 'text-match',
+};
+
 export const ELEMENT_TRANSFORMERS: Array<ElementTransformer> = [
   HEADING,
   QUOTE,

packages/lexical-markdown/src/__tests__/unit/LexicalMarkdown.test.ts

@@ -32,6 +32,7 @@ import {describe, expect, it} from 'vitest';
 import {
   $convertFromMarkdownString,
   $convertToMarkdownString,
+  INDENT,
   LINK,
   registerMarkdownShortcuts,
   TextMatchTransformer,
@@ -706,6 +707,26 @@ describe('Markdown', () => {
       html: '<p><span style="white-space: pre-wrap;">[](https://lexical.dev)</span></p>',
       md: '[](https://lexical.dev)',
     },
+    {
+      customTransformers: [INDENT],
+      html: '<p style="padding-inline-start: 40px;"><span style="white-space: pre-wrap;">Hello Word</span></p>',
+      md: '\tHello Word',
+    },
+    {
+      customTransformers: [INDENT],
+      html: '<p style="padding-inline-start: 80px;"><span style="white-space: pre-wrap;">Hello Word</span></p>',
+      md: '\t\tHello Word',
+    },
+    {
+      customTransformers: [INDENT],
+      html: '<p><span style="white-space: pre-wrap;">Hello\t Word</span></p>',
+      md: 'Hello\t Word',
+    },
+    {
+      customTransformers: [INDENT],
+      html: '<p style="padding-inline-start: 40px;"><i><em style="white-space: pre-wrap;">Hello</em></i><span style="white-space: pre-wrap;"> Word</span></p>',
+      md: '\t*Hello* Word',
+    },
   ];
 
   for (const {

packages/lexical-markdown/src/index.ts

@@ -28,6 +28,7 @@ import {
   ELEMENT_TRANSFORMERS,
   HEADING,
   HIGHLIGHT,
+  INDENT,
   INLINE_CODE,
   ITALIC_STAR,
   ITALIC_UNDERSCORE,
@@ -94,6 +95,7 @@ export {
   type ElementTransformer,
   HEADING,
   HIGHLIGHT,
+  INDENT,
   INLINE_CODE,
   ITALIC_STAR,
   ITALIC_UNDERSCORE,

packages/lexical-playground/src/plugins/MarkdownTransformers/index.ts

@@ -12,6 +12,7 @@ import {
   CHECK_LIST,
   ELEMENT_TRANSFORMERS,
   ElementTransformer,
+  INDENT,
   MULTILINE_ELEMENT_TRANSFORMERS,
   TEXT_FORMAT_TRANSFORMERS,
   TEXT_MATCH_TRANSFORMERS,
@@ -315,6 +316,7 @@ export const PLAYGROUND_TRANSFORMERS: Array<Transformer> = [
   EQUATION,
   TWEET,
   CHECK_LIST,
+  INDENT,
   ...ELEMENT_TRANSFORMERS,
   ...MULTILINE_ELEMENT_TRANSFORMERS,
   ...TEXT_FORMAT_TRANSFORMERS,