storybookjs/storybook

Allow to disable HTML escape in text control

Open

#12,516 opened on Sep 18, 2020

View on GitHub
 (6 comments) (8 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
addon: controlsfeature requesthelp wantedtriage:reviewed

Description

Is your feature request related to a problem? Please describe. After updating to v6, I want to have a control with text input that allows to insert HTML. It is usefull for components with slots to see how the component behave.

Describe the solution you'd like Have an escapeHTML: false property in argTypes for text inputs, just like there is in knobs.

Describe alternatives you've considered I have a function that insert text input in a dynamicaly created div.

const stringAsHtml: (str: string) => HTMLDivElement = (str: string) => {
  const dom: HTMLDivElement = document.createElement('div');
  dom.innerHTML = str;
  return dom;
};

Are you able to assist bring the feature to reality? no

Additional context We talked about this in Discord channel addon-controls

Contributor guide

Tech stack
typescriptreact
Domain
frontenddeveloper experience
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Familiarity with Storybook argTypesBasic React knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Review the source code of Storybook's addon controls package, specifically the Text control component. Check for any existing implementation of escapeHTML in the knobs addon for guidance. Examine the issue comments for any additional context or proposed solutions. Implement a new escapeHTML property in argTypes for text inputs.