With storybook and knobs release candidate 4, I have the ' string misformated as in the image.
Configure a text knob with text like You're great!
, it will be displayed as You're great!
.
Minimal repository reproducing the bug
Saw it on Chrome and Firefox
import { withKnobs, text } from '@storybook/addon-knobs';
import Title from '../Title';
storiesOf('Knobs', module)
.addDecorator(withKnobs)
.add('Title', () => <Title text={text('text', "You're great!")} />);
I found the same behavior on object knob props on alpha.16
Is there a workaround for this?
Knobs are using https://github.com/component/escape-html package to escapes ", ', &, <, and >.
To prevent escaping you can use it like this:
storiesOf(...)
.add('name', () => {}, {
knobs: {
escapeHTML: false
}
})
This can be applied globally by passing it to the decorator setup.
addDecorator(
withKnobs({
escapeHTML: false,
})
);
Using 4.1.11 across the board, only @igor-dv 's answer worked:
storiesOf(...)
.add('name', () => {}, {
knobs: {
escapeHTML: false
}
})
This is in a Vue project where the knobs are being included directly in the components. It would be cleaner if escapeHtml was an option on text knobs - this way the logic will reside with the knob in the component. Please consider exposing this option.
fwiw, with the new exported story format, it goes under parameters
:
export default {
title: 'Base Component',
component: { BaseComponent },
decorators: [withKnobs],
parameters: {
knobs: {
escapeHTML: false,
},
},
}
Most helpful comment
This can be applied globally by passing it to the decorator setup.