question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot render stickers from raw content state

See original GitHub issue

Howdy,

First, thank you all for the great work on these set of plugins. They’re really helping to reduce my pain points with draft-js.

Second, I’m running into a problem where ContentStates that are “convertFromRaw” and stored as JS strings, can’t render their stickers. Instead, any sticker blockType throws an ‘Invariant’ exception and does not show up in the editor.

I am using draft-js-plugins-v2.0.0@beta5, draft-js-0.9.1, and React@15.3.2.

All stickers run into this problem, while other block types, like text, render perfectly fine.

I have attached screenshots of the debug output, particularly the line where it fails:

screen shot 2016-10-17 at 9 29 20 am

The getEntityAt(0) returns a null that is passed into Entity.get, causing the error shown below.

screen shot 2016-10-17 at 9 34 34 am

And this is JSON of a sample ContentState being loaded, which throws the ‘Invariant’ exceptions:

{
    "entityMap": {
        "0": {
            "type": "sticker",
            "mutability": "IMMUTABLE",
            "data": {
                "id": "/static/media/images.97b53447.jpeg"
            }
        },
        "1": {
            "type": "sticker",
            "mutability": "IMMUTABLE",
            "data": {
                "id": "/static/media/plague.2d0a9da3.gif"
            }
        }
    },
    "blocks": [{
        "key": "7m54a",
        "text": "",
        "type": "sticker",
        "depth": 0,
        "inlineStyleRanges": [],
        "entityRanges": [{
            "offset": 0,
            "length": 0,
            "key": 0
        }],
        "data": {}
    }, {
        "key": "fa7d4",
        "text": "",
        "type": "sticker",
        "depth": 0,
        "inlineStyleRanges": [],
        "entityRanges": [{
            "offset": 0,
            "length": 0,
            "key": 1
        }],
        "data": {}
    }, {
        "key": "f6o38",
        "text": "",
        "type": "unstyled",
        "depth": 0,
        "inlineStyleRanges": [],
        "entityRanges": [],
        "data": {}
    }]
}

Would anyone have an idea of what I’m doing wrong here?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:10 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
mzbaccommented, Oct 19, 2016

@timschambers sure, if there is a bug of plugin, we are PR welcome… but still feel somehow in your code base you have multiple copies of ‘draft-js’

0reactions
nikgrafcommented, May 8, 2017

Let me know if this issue still occurs …

Read more comments on GitHub >

github_iconTop Results From Across the Web

Labeling - USDA Food Safety and Inspection Service
Identify the product name labeling requirements for raw meat and poultry products ... under State and Federal inspection must comply with the same...
Read more >
Packaging, Labeling, Transporting, Storing — Food Law
Packaging. Federal statutory law states that a food product is misbranded(and thus prohibited from being sold) if the container is misleading.
Read more >
Work with Smart Objects in Photoshop - Adobe Support
When you edit a Smart Object, the source content is opened in either Photoshop (if the content is raster data or a camera...
Read more >
Pesticide Labeling Questions & Answers | US EPA
If the product getting stickered doesn't include the sticker information as part of its approved labeling, the product would be misbranded. Pesticide/fertilizer ...
Read more >
FOOD LABELING - GovInfo
101.42 Nutrition labeling of raw fruit, vegetables, and fish. ... or cholesterol content, or such products may state the cholesterol content as zero....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found