Draft.js: how to remove formatting of the text

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. We believe this behaviour is commonly used and our users may expect this feature to be on it’s place. As always in order to add this feature you would need to spend significant amount of time digging into in order to find required information. Draft.js documentation This post describes what steps you should take in order to add this behaviour into your project. TL;DR As always, there is a available for you not to implement everything manually. npm package All editing in Draft.js may be divided into 3 groups: Inline styles Custom entities(for example images, links etc.) Block types In order to clean the text up we need to take care of all of these groups. Inline Styles This one is pretty simple. First, we need to define a list of styles which we support in the project (in our case — Bold, Italic and Underline texts). Next, we need to call a method called of module that comes as a part of Draft.js package. Obviously enough, this method allows us to remove specified inline style from the selected range. So we need to call it for each item of our array. removeInlineStyles Modifier styles To simplify the code, we would use method here. If you are not familiar with it — you can read about it . reduce here Note that we use 2 different here — the argument we pass in the function which represents current state of the editor and which should be imported from Draft.js itself along with module. editorStates EditorState Modifier method is used to create a new object with applied as a content of the editor. push EditorState contentWithoutStyles Note the third parameter we pass to method(a string ). This parameter is called and Draft.js uses it to specify a correct undo/redo behaviour. This particular one means that inline style has been applied or removed for one or more characters. push change-inline-style changeType Entities This one is even easier. We don’t need to build any additional array of styles or use any iteration functions. Instead we need to call method of the exact same module. This method allows us to apply an entity to the selected range. In order to remove all entities we need to pass as a third argument to this function. applyEntity Modifier null And again you may notice that we use as a change type in call. This one means an entity has been applied or removed to one or more characters. apply-entity EditorState.push() Block Types The complex one. 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 . You can read more about what a block is and why it has different types . This post is not 100% actual nowadays but it gives right mindset to better understand how Draft.js works. unstyled here And 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. First, we need to get all the blocks from the selection range. Here we may want to use method from package. getSelectedBlocksMap [draftjs-utils](https://github.com/jpuri/draftjs-utils) Next we need to detect whether we want to perform any action on the block. In our case we need to check the block type and we do so by calling method of the block. So if the block has any type ( ) — the block should be updated. getType blockType !== ‘unstyled’ Once we find a block to update we need to change it’s type. Here we need to update the selection range to select whole block(you can use text length here to set the end index of the selection range). Now we need to call method of module to update the type of the block and get new and then we need to push it to the . This functions expects to get a parameter which in our case should be as we want to wipe all of the edits. The change type for this operation is . I guess by now you get what it means :) setBlockType Modifier contentState EditorState blockType unstyled change-block-type Let’s combine it all together and use method to simplify the code so we run only once like we’ve done in section. reduce EditorState.push() Inline Styles Combining everything together All set now! Let’s get all these functions to work! I would recommend to use function of package or any of the alternatives here because it would drastically increase the readability of the code. Let’s try it out: flow lodash And here is the result: We select all the text, hit ‘Clear’ button and all editing is removed! If you’ve read this post till this moment you may also want to check about Draft.js enchantment and apply it to your project as well. my previous post