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.

convertToRaw is removing inline styles

See original GitHub issue

Do 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 GitHub Comments

1reaction

farhansalamcommented, Aug 3, 2017

@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

0reactions

cathykccommented, Aug 13, 2020

@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 the inlineStyleRanges field

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 ...

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 ...

draftjs-to-markdown | Yarn - Package Manager

import draftToMarkdown from 'draftjs-to-markdown'; import { convertToRaw } from ... Converts inline styles BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, CODE, ...

How to use the draft-js.convertToRaw function in draft-js - Snyk

getCurrentContent()), ) ) { if (shouldFilterPaste) { let filteredState = editorState; filteredState = filterEditorState( { blocks: [], styles: [], entities: [ { ...

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.