Text knob transforms characters

[cichelero]

Bug or support request summary

With storybook and knobs release candidate 4, I have the ' string misformated as in the image.

Steps to reproduce

Configure a text knob with text like You're great!, it will be displayed as You're great!.

Minimal repository reproducing the bug

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

• @storybook/react 4.0.0-rc.0
• @storybook/addon-knobs 4.0.0-rc.0

Affected platforms

Saw it on Chrome and Firefox

Screenshots / Screencast / Code Snippets (Optional)

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!")} />);

[brunoreis]

I found the same behavior on object knob props on alpha.16

[pho3nixf1re]

Is there a workaround for this?

[igor-dv]

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
    }
  })

[pho3nixf1re]

This can be applied globally by passing it to the decorator setup.

addDecorator(
  withKnobs({
    escapeHTML: false,
  })
);

[sirberus]

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.

[aminimalanimal]

fwiw, with the new exported story format, it goes under parameters:

export default {
  title: 'Base Component',
  component: { BaseComponent },
  decorators: [withKnobs],
  parameters: {
    knobs: {
      escapeHTML: false,
    },
  },
}

[evans]

I found adding the following to .storybook/preview.js gave me back the functionality of https://github.com/storybookjs/storybook/issues/4445#issuecomment-434775097 after upgrading to 6.x from 5.x

const parameters = {
  knobs: {
    escapeHTML: false,
  },
};

storybook docs for global parameters