Skip to content

Bug: A combination of bold and bold-italic text on the same line is incorrectly converted to Markdown and back. #7974

@insektary

Description

@insektary

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

  1. Open the lexical/playground project and the Editor.tsx file
  2. Add imports $convertToMarkdownString and TRANSFORMERS from @lexical/markdown
  3. Add import OnChangePlugin from @lexical/react/LexicalOnChangePlugin
  4. 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)
  }
  1. 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
  2. Go to App.tsx and initialize the editor with a value converted from this string:
      defineExtension({
        $initialEditorState: () => $convertFromMarkdownString('**123*456***', TRANSFORMERS)
  1. Check the results

The current behavior

The editor displays a distorted string 123*456* (See screenshot):

Image

The expected behavior

The editor displays the same string we entered in step 5: 123456

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions