jpuri / react-draft-wysiwyg

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
MIT License
6.41k stars 1.16k forks source link

How to get active toolbar option? #407

Open alexgvozden opened 7 years ago

alexgvozden commented 7 years ago

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

jpuri commented 7 years ago

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.

alexgvozden commented 7 years ago

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 notifications@github.com 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

NaumenkoSergiy commented 1 year ago

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

ChethiyaKD commented 2 weeks ago

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!