I use the Lexical Editor, which exports and imports Markdown using built-in tools. The bug can be reproduced in the lexical/playground sandbox; detailed steps are below
Lexical version: 0.38.2
Steps To Reproduce
- Open the
lexical/playground project and the Editor.tsx file
- Add imports
$convertToMarkdownString and TRANSFORMERS from @lexical/markdown
- Add import
OnChangePlugin from @lexical/react/LexicalOnChangePlugin
- Add
<OnChangePlugin onChange={onChange} /> to editor code and create the next onChange handler:
const onChange = (editorState) => {
const markdown = editorState.read(() =>
$convertToMarkdownString(TRANSFORMERS)
)
console.log(markdown)
}
- Run the project, clear editor input and type next subsequence: press
Bold => type '123' => press Italic => type '456' (Result: 123456 - a string without spaces, the first three characters are bold, the next three are bold and italicized). Log and copy converted to markdown result - should be **123*456*** string
- Go to
App.tsx and initialize the editor with a value converted from this string:
defineExtension({
$initialEditorState: () => $convertFromMarkdownString('**123*456***', TRANSFORMERS)
- Check the results
The current behavior
The editor displays a distorted string 123*456* (See screenshot):
The expected behavior
The editor displays the same string we entered in step 5: 123456