Rosey / markdown-draft-js

A tool to convert content created in DraftJS to markdown and vice versa.
https://rosey.github.io/markdown-draft-js/
MIT License
318 stars 69 forks source link

Fix problems with overlapping formats #130

Closed jfschwarz closed 4 years ago

jfschwarz commented 4 years ago

Hello @Rosey 👋 ! Thank you for this handy library. It works quite well for me, except for a little issue with the way overlapping ranges of inline styles and entity ranges are handled.

The conversion breaks for the following example Draft.js input: foo bar baz

Raw state:

{
  blocks: [
    {
      key: '5rq8m',
      text: 'foo bar baz',
      type: 'unstyled',
      depth: 0,
      inlineStyleRanges: [{ offset: 4, length: 7, style: 'BOLD' }],
      entityRanges: [{ offset: 0, length: 7, key: 0 }],
      data: {}
    }
  ],
  entityMap: {
    '0': {
      type: 'LINK',
      mutability: 'MUTABLE',
      data: {
        url: 'http://localhost:8000',
      }
    }
  }
}

markdown-draft-js maps it to:

[foo **bar](http://localhost:3000/g/statics/jm/journeys/ckcexvump0004wv6ze8ujmo9w) baz**

⚠️ This is invalid markdown.

This PR adjust the implementation so that ranges are split up, keeping the nesting order sane. The new result for the example is:

[foo **bar**](http://localhost:8000) **baz**
Rosey commented 4 years ago

🙌🙌 wow that's quite the bug, thanks for the catch and fix

Rosey commented 4 years ago

Yay very nice, thanks again ❤️