react-draft-wysiwyg icon indicating copy to clipboard operation
react-draft-wysiwyg copied to clipboard

How to get active toolbar option?

Open alexgvozden opened this issue 8 years ago • 4 comments

Hi,

thanks for the great wrapper component!

I am looking and editorState but I cannot find active toolbar option I need it for activating different icons based on active one. is it possible to get active option in toolbar ?

Thanks

alexgvozden avatar Jul 28 '17 12:07 alexgvozden

In the editor I have done something like this: https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/controls/BlockType/index.js#L29 to check if option is active in current selection. Its different methods for different controls - for instance color-picker will check which color is active in selection.

I hope that answers your question.

jpuri avatar Jul 28 '17 18:07 jpuri

I ended up adding events to buttons and then controlling things from there I needed but it would be good if draft has simple method, it looks like it's embedded in the state but I was not able to find it

On Fri, Jul 28, 2017 at 9:11 PM, Jyoti Puri [email protected] wrote:

In the editor I have done something like this: https://github.com/jpuri/ react-draft-wysiwyg/blob/master/src/controls/BlockType/index.js#L29 to check if option is active in current selection. Its different methods for different controls - for instance color-picker will check which color is active in selection.

I hope that answers your question.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jpuri/react-draft-wysiwyg/issues/407#issuecomment-318725208, or mute the thread https://github.com/notifications/unsubscribe-auth/AAHwhQY169qFtirQWJSGfotPERktxYoiks5sSiRvgaJpZM4OmiK0 .

-- flickr

alexgvozden avatar Jul 28 '17 18:07 alexgvozden

If someone still finding answer:

You can use getSelectedBlocksType and getSelectionInlineStyle from draftjs-utils.

getSelectionInlineStyle(editorState) returns something like: unstyled, ordered-list-item, unordered-list-item. getSelectionInlineStyle(editorState) returns something like:

{
    "BOLD": true,
    "ITALIC": false,
    "UNDERLINE": false,
    "STRIKETHROUGH": false,
    "CODE": false,
    "SUPERSCRIPT": false,
    "SUBSCRIPT": false
}

So you can use this data in conditions for custom toolbar options

NaumenkoSergiy avatar Feb 22 '23 08:02 NaumenkoSergiy

If someone still finding answer:

You can use getSelectedBlocksType and getSelectionInlineStyle from draftjs-utils.

getSelectionInlineStyle(editorState) returns something like: unstyled, ordered-list-item, unordered-list-item. getSelectionInlineStyle(editorState) returns something like:

{
    "BOLD": true,
    "ITALIC": false,
    "UNDERLINE": false,
    "STRIKETHROUGH": false,
    "CODE": false,
    "SUPERSCRIPT": false,
    "SUBSCRIPT": false
}

So you can use this data in conditions for custom toolbar options

Genius!

ChethiyaKD avatar Aug 25 '24 12:08 ChethiyaKD