convertToRaw is removing inline styles
See original GitHub issueDo you want to request a feature or report a bug?
bug
What is the current behavior?
Editor state has some inline styles but convertToRaw
is removing them.
EditorState (in json) which has the first three characters as BOLD
{"_immutable":{"allowUndo":true,"currentContent":{"entityMap":{},"blockMap":{"4p3m0":{"key":"4p3m0","type":"unstyled","text":"asd qwe","characterList":[{"style":["BOLD"],"entity":null},{"style":["BOLD"],"entity":null},{"style":["BOLD"],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null}],"depth":0,"data":{}}},"selectionBefore":{"anchorKey":"4p3m0","anchorOffset":0,"focusKey":"4p3m0","focusOffset":3,"isBackward":false,"hasFocus":true},"selectionAfter":{"anchorKey":"4p3m0","anchorOffset":0,"focusKey":"4p3m0","focusOffset":3,"isBackward":false,"hasFocus":true}},"decorator":{"decorators":[{"_decorators":[{}]},{"_decorators":[{}]}]},"directionMap":{"4p3m0":"LTR"},"forceSelection":false,"inCompositionMode":false,"inlineStyleOverride":null,"lastChangeType":"change-inline-style","nativelyRenderedContent":null,"redoStack":[],"selection":{"anchorKey":"4p3m0","anchorOffset":0,"focusKey":"4p3m0","focusOffset":3,"isBackward":false,"hasFocus":false},"treeMap":{"4p3m0":[{"start":0,"end":7,"decoratorKey":null,"leaves":[{"start":0,"end":3},{"start":3,"end":7}]}]},"undoStack":[{"entityMap":{},"blockMap":{"4p3m0":{"key":"4p3m0","type":"unstyled","text":"asd qwe","characterList":[{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null},{"style":[],"entity":null}],"depth":0,"data":{}}},"selectionBefore":{"anchorKey":"4p3m0","anchorOffset":0,"focusKey":"4p3m0","focusOffset":0,"isBackward":false,"hasFocus":true},"selectionAfter":{"anchorKey":"4p3m0","anchorOffset":7,"focusKey":"4p3m0","focusOffset":7,"isBackward":false,"hasFocus":true}},{"entityMap":{},"blockMap":{"4p3m0":{"key":"4p3m0","type":"unstyled","text":"","characterList":[],"depth":0,"data":{}}},"selectionBefore":{"anchorKey":"4p3m0","anchorOffset":0,"focusKey":"4p3m0","focusOffset":0,"isBackward":false,"hasFocus":false},"selectionAfter":{"anchorKey":"4p3m0","anchorOffset":0,"focusKey":"4p3m0","focusOffset":0,"isBackward":false,"hasFocus":false}}]}}
convertToRaw
output:
{
"entityMap": {},
"blocks": [
{
"key": "6t4k4",
"text": "asd qwe",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
}
]
}
What is the expected behavior?
The convert to Raw output should have styling inside inlineStyleRanges
array.
Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?
0.10.0
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Can't get draft-js Modifier's applyInlineStyle function to apply ...
It seems like you are not returning 'handled' after you apply the inline style manually. If you just return 'handled' after onChange(EditorState ...
Read more >draftjs-to-html - npm.io
Converts inline styles color, background-color, font-size, font-family to a span tag with inline style details: <span style="color:xyz;font-size:xx"> . (The ...
Read more >draftjs-to-markdown | Yarn - Package Manager
import draftToMarkdown from 'draftjs-to-markdown'; import { convertToRaw } from ... Converts inline styles BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, CODE, ...
Read more >How to use the draft-js.convertToRaw function in draft-js - Snyk
getCurrentContent()), ) ) { if (shouldFilterPaste) { let filteredState = editorState; filteredState = filterEditorState( { blocks: [], styles: [], entities: [ { ...
Read more >How Draft.js Represents Rich Text Data | by rajaraodv - Medium
Thankfully Draft.js provides a function called convertToRaw(for exporting data) and ... Inline Styles are just regular styles we add to the text.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@flarnie sorry about not reporting back, but I found the bug to be in my code which was removing the styles, and actually i was looking at
undoStack
and thinking that it had styles.This should be closed IMO
@zachdixon Exact same issue here and am wondering if you have any leads for me - am going to step through the convertToRaw code today to figure out why
characterList
styles aren’t getting translated into theinlineStyleRanges
field