Rosey/markdown-draft-js

Bug when translating link entities

Closed this issue ยท 8 comments

Hi!, your library is awesome!.

I've been encountering a cornercase bug. Whenever I set up a link entity on the end of the whole draft object, it breaks and translates to the following [LINK instead of [LINK]
(www.my_link.com)
. Any link entity ranged in between all blocks and chars work perfectly.

Example:

hello click here LINK_1
and here LINK_2

in that example LINK_1 translates to markdown but LINK_2 translates to [LINK_2

Thank you in advance!
Leo

Rosey commented

Thanks for the report! Sounds like it's worth digging into. As you may have read in the README I am crazy swamped with IRL demands right now so I may not get to this quickly but perhaps someone else will. Or if not, rest assured that I have seen your issue and will look into it whenever I do have time again.

Rosey commented

@Leonarto Not sure if you have the time, but if you do it would be helpful to have the raw draftjs object you're trying to convert to markdown, as well as any additional options you may be passing in (preserve newlines?). I've been trying to re-create your error but everything seems to be working ok for me.

Here's an example of a raw draftjs object that worked as expected -

{
   "entityMap":{
      "6":{
         "type":"LINK",
         "mutability":"MUTABLE",
         "data":{
            "url":"http://fosadofle.com/",
            "href":"http://fosadofle.com/"
         }
      },
      "7":{
         "type":"LINK",
         "mutability":"MUTABLE",
         "data":{
            "url":"http://fosadofle.com/",
            "href":"http://fosadofle.com/"
         }
      }
   },
   "blocks":[
      {
         "depth":0,
         "type":"unstyled",
         "text":"Test one",
         "entityRanges":[
            {
               "offset":5,
               "length":3,
               "key":6
            }
         ],
         "inlineStyleRanges":[

         ]
      },
      {
         "type":"unstyled",
         "text":"",
         "entityRanges":[

         ],
         "inlineStyleRanges":[

         ]
      },
      {
         "depth":0,
         "type":"unstyled",
         "text":"Test two",
         "entityRanges":[
            {
               "offset":5,
               "length":3,
               "key":7
            }
         ],
         "inlineStyleRanges":[

         ]
      }
   ]
}

Hi!, I'm sorry for taking so long. And you are totally right, I found out recently that this corner case error needs more conditions, is whenever you have a unicode emoticon in the same line, like this example raw object.

In this example the middle link will translate fine while the one at the end of the line won't:

const exampleRawObject = {
  "blocks": [{
    "key": "eubc2",
    "text": "๐Ÿ™‹ link link",
    "type": "unstyled",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [{"offset": 2, "length": 4, "key": 0}, {"offset": 7, "length": 4, "key": 1}],
    "data": {}
  }],
  "entityMap": {
    "0": {
      "type": "LINK",
      "mutability": "MUTABLE",
      "data": {"url": "https://link.com", "href": "https://link.com"}
    }, "1": {"type": "LINK", "mutability": "MUTABLE", "data": {"url": "https://link.com"}}
  }
}
Rosey commented

Ah fantastic thank you! I've encountered similar bugs in the past with strings so I think I know what the problem might be :) (string length issues as outlined in this article https://mathiasbynens.be/notes/javascript-unicode)

Rosey commented

I've opened #123 to address this issue, will leave open for a day or two as an RFC from anyone interested before merging and releasing the fix ๐Ÿ™‚

Rosey commented

Thanks for the report!! ๐ŸŽ‰

Amazing!, thanks to you on your good will!

Hi, I think this issue is still relevant in the latest version. I haven't been able to replicate it yet, but as far as I understood it seems to happen when you have two links next to each other.