Draft-js: Is there a way to get the inline styles of current selection?

[ricardo]

Do you want to request a _feature_ or report a _bug_?
feature

What is the current behavior?
I haven't seen a way to get the styles of the current selection

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar.

What is the expected behavior?
Show me a list of the styles from the editorState current selection

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

[namKolo]

With current selection you can get startKey, endKey . Base on those keys, you can get all blocks in that selection.
With each block, you can use getCharacterList function to get all character in that block . Then with each character, use getStyle it will return style for you
Concat all of them, you can get style of current selection
Example code
block.getCharacterList().reduce( (styles,c) => styles.union(c.getStyle()), Immutable.OrderedSet() )
Hope it will help you

[thibaudcolas]

draftjs-utils has a getSelectionCustomInlineStyle function.

[markusenglund]

To anyone coming here from google - there does exist a built in getter method called getCurrentInlineStyle on the editorState object.

So if you for example want to know if the current selection is "BOLD" you could do this:

const { editorState } = this.state;
const inlineStyle = editorState.getCurrentInlineStyle();
const isBold = inlineStyle.has("BOLD");

I hope that helps someone!

[palamccc]

The question was, how to get the style of the "current selection", the @markusenglund answer will give style at the cursor location, not the selection. I'm still searching for the answer.

[promerorgz]

@palamccc couldnt you get the focus first and pass it into the getCurrentInlineStyle() function?

const currentFocus = editor.getSelection().getFocusKey()
const inlineStyle = editor.getCurrentInlineStyle(currentFocus);
const isBold = inlineStyle.has("BOLD")

[palamccc]

@promerorgz, thanks for the comment, we have moved our project to https://github.com/ianstormtaylor/slate I can't confirm whether your solution works or not.

[jtabone16]

@promerorgz worked like a charm, thanks!

[dabretin]

const selection     = editorState.getSelection();
const contentState  = editorState.getCurrentContent();
const styles        = new Set<string>();
if (selection.isCollapsed()) editorState.getCurrentInlineStyle().forEach(style => style && styles.add(style));
else
{
    let     key     = selection.getStartKey();
    let startOffset = selection.getStartOffset();
    const   endKey      = selection.getEndKey();
    const   endOffset   = selection.getEndOffset();
    while(true)
    {
        const lastRound     = (key == endKey);
        const block     = contentState.getBlockForKey(key);
        const offsetEnd     = lastRound ? endOffset : block.getLength();
        const characterList = block.getCharacterList();
        for(let offsetIndex=startOffset; offsetIndex<offsetEnd; offsetIndex++)
            characterList.get(offsetIndex).getStyle().forEach(style => style && styles.add(style));
        if (lastRound) break;
        key     = contentState.getKeyAfter(key);
        startOffset = 0;
    }
}