Draft-js: How can I implement "Read more" feature for long text in Draftjs?

Created on 23 Jul 2016 · 4Comments · Source: facebook/draft-js

When the text is too long, I want display only first 30 characters and append a button "see more" into drafts editor. When the button is clicked, full text is displayed.

Have anyone done that before? Please help. Thank you in advance!

Source

nguyenhhien

Most helpful comment

It seems like this isn't a Draft issue, but rather a view issue. I would figure out the space that your content can occupy, and apply a max-height to the editor, as well as a "See more" button with an absolute position to overlay the editor, and then when the "See more" button is clicked just remove the max-height

aem on 25 Jul 2016

👍4

All 4 comments

As far as I understand you're using it in readOnly mode to display your content, am I right?
If that's the case: You can use EditorState.createWithContent({contentHere}) and update it when clicked view more to fetch the rest of the data and fill your component with it.

gabriel-miranda on 25 Jul 2016

Thank @gabriel-miranda for the suggestion. You're right, I'm using Editor in _readOnly_ mode. To be clearer, my question can be broken down into 2 parts:
1) How add "see more" link to the end of editor's content state in summary mode?
2) How to shorten the text while preserving styling?
E.g.
===Full text===
{"entityMap":{},
"blocks":[
{
"key":"vm8k",
"text":"123456789",
"type":"unsettled",
"depth":0,
"inlineStyleRanges":[
{"offset":0,"length":4,"style":"red"},
{"offset":4,"length":5,"style":"blue"}
],
"entityRanges":[],
"data":{}
}
]
}
===Summarized text===
{"entityMap":{},
"blocks":[
{
"key":"vm8k",
"text":"12345",
"type":"unsettled",
"depth":0,
"inlineStyleRanges":[
{"offset":0,"length":4,"style":"red"},
{"offset":4,"length":1,"style":"blue"}
],
"entityRanges":[],
"data":{}
}
]
}