Storybook: Addon knobs converts string characters to html entity #s

[binomialstew]

Bug or support request summary

When using @storybook/addon-knobs and entering text in the knobs panel using the text() knob, special characters are converted to their corresponding html entity. For example, typing what's shows what's in the rendered story.

Please specify which version of Storybook and optionally any affected addons that you're running

@storybook/addon-actions": "^4.0.0-alpha.8"
@storybook/addon-knobs": "^4.0.0-alpha.8"
@storybook/addon-options": "^4.0.0-alpha.8"
@storybook/core": "^4.0.0-alpha.8"
@storybook/react": "^4.0.0-alpha.8"
"react": "^16.4.0"
"react-dom": "^16.4.0"

[binomialstew]

I had to edit my dependencies in my initial comment to use the actual versions—more recent versions were being used (4.0.0-alpha.8) than were in my package.json (4.0.0-alpha.3). Also note that this is not an issue using @storybook/addon-knobs": "^4.0.0-alpha.6" and before. It must have been introduced in alpha.7 or alpha.8.

[Keraito]

Thanks for the update @binomialstew, the additional information helps a lot!

[Keraito]

Hey @binomialstew there's actually an escapeHTML option for the knobs addon, which is turned on by default. For your use case, you can set this to false. There has been some maintenance going on at the addons, so that could explain the (intended) changed behaviour since alpha.7.

[binomialstew]

Yes. Thanks, that takes care of it. It seems the behavior was recently changed to be default true in storybook-react, which explains why this wasn't a problem for us earlier.

[johnhunter]

In case anyone is looking for an html knob here...

For most cases escaping HTML is what I want from a text knob. There are some exceptions where I want to provide editable HTML to a component. Seems like the escapeHTML option would effect all text calls in the story so I use a custom knob that unescapes the output:

knob-html.js

import { text } from '@storybook/addon-knobs';
import he from 'he';

export default (...args) => he.decode(text(...args));

[stephenhmarsh]

THANK YOU @johnhunter this was driving me crazy