Draft js get plain text code#

In our case we need to check the block type and we do so by calling getType method of the block. Next we need to detect whether we want to perform any action on the block. Here we may want to use getSelectedBlocksMap method from () package. This post is not 100% actual nowadays but it gives right mindset to better understand how Draft.js works.Īnd the best way to change the type of block is to go through all of them and to call a change function for each singe one of them.įirst, we need to get all the blocks from the selection range.

You can read more about what a block is and why it has different types here.

Draft js get plain text code#

In order to remove different block types(headers, list items, code blocks etc.) from the selection range and preserve the text we need to change the type of each block to be unstyled . This one means an entity has been applied or removed to one or more characters. If you are not familiar with it - you can read about it here.Īnd again you may notice that we use apply-entity as a change type in EditorState.push() call. To simplify the code, we would use reduce method here. So we need to call it for each item of our styles array. Obviously enough, this method allows us to remove specified inline style from the selected range. Next, we need to call a method called removeInlineStyles of Modifier module that comes as a part of Draft.js package. First, we need to define a list of styles which we support in the project (in our case - Bold, Italic and Underline texts). In order to clean the text up we need to take care of all of these groups. What I found was that while getting simple examples to work was easy enough, once you started trying to build something like Medium, Dropbox Paper or Google Docs, you ran into deeper issues. Custom entities(for example images, links etc.) Before creating Slate, I tried a lot of the other rich text libraries out there Draft.js, Prosemirror, Quill, etc.TL DRĪs always, there is a npm package available for you not to implement everything manually.Īll editing in Draft.js may be divided into 3 groups: This post describes what steps you should take in order to add this behaviour into your project. As always in order to add this feature you would need to spend significant amount of time digging into Draft.js documentation in order to find required information.

We believe this behaviour is commonly used and our users may expect this feature to be on it’s place. One of the features that we at Propeller miss in Draft.js out-of-the-box is the possibility to clear the stylings of selected text, leaving plain text inside the editor.