rich_text:
  label: Filter tips
  namespace: Atoms/HTML
  use: '@atoms/html/rich-text/rich-text.twig'
  description: Component for displaying rich text, for example from a WYSIWYG editor.
    Check https://github.com/tailwindlabs/tailwindcss-typography for more informations.
  visibility: storybook
  fields:
    text:
      type: text
      label: Text
      preview: '<div class="bd-text"> <h2>Compose tips</h2> <h2>Text Formats</h2>
        <h3>Basic HTML</h3> <ul> <li> <p>Allowed HTML tags: &lt;a href hreflang&gt;
        &lt;em&gt; &lt;strong&gt; &lt;cite&gt; &lt;blockquote cite&gt; &lt;code&gt;
        &lt;ul type&gt; &lt;ol start type&gt; &lt;li&gt; &lt;dl&gt; &lt;dt&gt; &lt;dd&gt;
        &lt;h2 id&gt; &lt;h3 id&gt; &lt;h4 id&gt; &lt;h5 id&gt; &lt;h6 id&gt; &lt;p&gt;
        &lt;br&gt; &lt;span&gt; &lt;img src alt height width data-entity-type data-entity-uuid
        data-align data-caption&gt;</p> </li> <li> <p>You can align images, videos,
        blockquotes and so on to the left, right or center. Examples:</p> <ul> <li>Align
        an image to the left:&nbsp;<code>&lt;img src="" data-align="left" /&gt;</code></li>
        <li>Align an image to the center:&nbsp;<code>&lt;img src="" data-align="center"
        /&gt;</code></li> <li>Align an image to the right:&nbsp;<code>&lt;img src=""
        data-align="right" /&gt;</code></li> <li>… and you can apply this to other
        elements as well:&nbsp;<code>&lt;video src="" data-align="center" /&gt;</code></li>
        </ul> </li> <li> <p>You can caption images, videos, blockquotes, and so on.
        Examples:</p> <ul> <li><code>&lt;img src="" data-caption="This is a caption"
        /&gt;</code></li> <li><code>&lt;video src="" data-caption="The Drupal Dance"
        /&gt;</code></li> <li><code>&lt;blockquote data-caption="Dries Buytaert"&gt;Drupal
        is awesome!&lt;/blockquote&gt;</code></li> <li><code>&lt;code data-caption="Hello
        world in JavaScript."&gt;alert("Hello world!");&lt;/code&gt;</code></li> </ul>
        </li> <li>Only images hosted on this site may be used in &lt;img&gt; tags.</li>
        </ul> <h3>Restricted HTML</h3> <ul> <li> <p>Allowed HTML tags: &lt;a href
        hreflang&gt; &lt;em&gt; &lt;strong&gt; &lt;cite&gt; &lt;blockquote cite&gt;
        &lt;code&gt; &lt;ul type&gt; &lt;ol start type&gt; &lt;li&gt; &lt;dl&gt; &lt;dt&gt;
        &lt;dd&gt; &lt;h2 id&gt; &lt;h3 id&gt; &lt;h4 id&gt; &lt;h5 id&gt; &lt;h6
        id&gt;</p> <p>This site allows HTML content. While learning all of HTML may
        feel intimidating, learning how to use a very small number of the most basic
        HTML "tags" is very easy. This table provides examples for each tag that is
        enabled on this site.</p> <p>For more information see W3Cs&nbsp;<a href="http://www.w3.org/TR/html/">HTML
        Specifications</a>&nbsp;or use your favorite search engine to find other sites
        that explain HTML.</p> <table data-striping="1"> <thead> <tr> <th>Tag Description</th>
        <th>You Type</th> <th>You Get</th> </tr> </thead> <tbody> <tr> <td>Anchors
        are used to make links to other pages.</td> <td><code>&lt;a href="http://drupal.ttd"&gt;TOC
        Module Development&lt;/a&gt;</code></td> <td><a href="http://drupal.ttd/">TOC
        Module Development</a></td> </tr> <tr> <td>Emphasized</td> <td><code>&lt;em&gt;Emphasized&lt;/em&gt;</code></td>
        <td><em>Emphasized</em></td> </tr> <tr> <td>Strong</td> <td><code>&lt;strong&gt;Strong&lt;/strong&gt;</code></td>
        <td><strong>Strong</strong></td> </tr> <tr> <td>Cited</td> <td><code>&lt;cite&gt;Cited&lt;/cite&gt;</code></td>
        <td><cite>Cited</cite></td> </tr> <tr> <td>Block quoted</td> <td><code>&lt;blockquote&gt;Block
        quoted&lt;/blockquote&gt;</code></td> <td> <blockquote>Block quoted</blockquote>
        </td> </tr> <tr> <td>Coded text used to show programming source code</td>
        <td><code>&lt;code&gt;Coded&lt;/code&gt;</code></td> <td><code>Coded</code></td>
        </tr> <tr> <td>Unordered list - use the &lt;li&gt; to begin each list item</td>
        <td><code>&lt;ul&gt; &lt;li&gt;First item&lt;/li&gt; &lt;li&gt;Second item&lt;/li&gt;
        &lt;/ul&gt;</code></td> <td> <ul> <li>First item</li> <li>Second item</li>
        </ul> </td> </tr> <tr> <td>Ordered list - use the &lt;li&gt; to begin each
        list item</td> <td><code>&lt;ol&gt; &lt;li&gt;First item&lt;/li&gt; &lt;li&gt;Second
        item&lt;/li&gt; &lt;/ol&gt;</code></td> <td> <ol> <li>First item</li> <li>Second
        item</li> </ol> </td> </tr> <tr> <td colspan="3">No help provided for tag&nbsp;<em>li</em>.</td>
        </tr> <tr> <td>Definition lists are similar to other HTML lists. &lt;dl&gt;
        begins the definition list, &lt;dt&gt; begins the definition term and &lt;dd&gt;
        begins the definition description.</td> <td><code>&lt;dl&gt; &lt;dt&gt;First
        term&lt;/dt&gt; &lt;dd&gt;First definition&lt;/dd&gt; &lt;dt&gt;Second term&lt;/dt&gt;
        &lt;dd&gt;Second definition&lt;/dd&gt; &lt;/dl&gt;</code></td> <td> <dl> <dt>First
        term</dt> <dd>First definition</dd> <dt>Second term</dt> <dd>Second definition</dd>
        </dl> </td> </tr> <tr> <td colspan="3">No help provided for tag&nbsp;<em>dt</em>.</td>
        </tr> <tr> <td colspan="3">No help provided for tag&nbsp;<em>dd</em>.</td>
        </tr> <tr> <td>Heading</td> <td><code>&lt;h2&gt;Subtitle&lt;/h2&gt;</code></td>
        <td> <h2>Subtitle</h2> </td> </tr> <tr> <td>Heading</td> <td><code>&lt;h3&gt;Subtitle
        three&lt;/h3&gt;</code></td> <td> <h3>Subtitle three</h3> </td> </tr> <tr>
        <td>Heading</td> <td><code>&lt;h4&gt;Subtitle four&lt;/h4&gt;</code></td>
        <td> <h4>Subtitle four</h4> </td> </tr> <tr> <td>Heading</td> <td><code>&lt;h5&gt;Subtitle
        five&lt;/h5&gt;</code></td> <td> <h5>Subtitle five</h5> </td> </tr> <tr> <td>Heading</td>
        <td><code>&lt;h6&gt;Subtitle six&lt;/h6&gt;</code></td> <td> <h6>Subtitle
        six</h6> </td> </tr> </tbody> </table> <p>Most unusual characters can be directly
        entered without any problems.</p> <p>If you do encounter problems, try using
        HTML character entities. A common example looks like &amp;amp; for an ampersand
        &amp; character. For a full list of entities see HTMLs&nbsp;<a href="http://www.w3.org/TR/html4/sgml/entities.html">entities</a>&nbsp;page.
        Some of the available characters include:</p> <table data-striping="1"> <thead>
        <tr> <th>Character Description</th> <th>You Type</th> <th>You Get</th> </tr>
        </thead> <tbody> <tr> <td>Ampersand</td> <td><code>&amp;amp;</code></td> <td>&amp;</td>
        </tr> <tr> <td>Greater than</td> <td><code>&amp;gt;</code></td> <td>&gt;</td>
        </tr> <tr> <td>Less than</td> <td><code>&amp;lt;</code></td> <td>&lt;</td>
        </tr> <tr> <td>Quotation mark</td> <td><code>&amp;quot;</code></td> <td>"</td>
        </tr> </tbody> </table> </li> <li>Lines and paragraphs are automatically recognized.
        The &lt;br /&gt; line break, &lt;p&gt; paragraph and &lt;/p&gt; close paragraph
        tags are inserted automatically. If paragraphs are not recognized simply add
        a couple of blank lines.</li> <li>Web page addresses and email addresses turn
        into links automatically.</li> </ul> <h3>Full HTML</h3> <ul> <li> <p>You can
        align images, videos, blockquotes and so on to the left, right or center.
        Examples:</p> <ul> <li>Align an image to the left:&nbsp;<code>&lt;img src=""
        data-align="left" /&gt;</code></li> <li>Align an image to the center:&nbsp;<code>&lt;img
        src="" data-align="center" /&gt;</code></li> <li>Align an image to the right:&nbsp;<code>&lt;img
        src="" data-align="right" /&gt;</code></li> <li>… and you can apply this to
        other elements as well:&nbsp;<code>&lt;video src="" data-align="center" /&gt;</code></li>
        </ul> </li> <li> <p>You can caption images, videos, blockquotes, and so on.
        Examples:</p> <ul> <li><code>&lt;img src="" data-caption="This is a caption"
        /&gt;</code></li> <li><code>&lt;video src="" data-caption="The Drupal Dance"
        /&gt;</code></li> <li><code>&lt;blockquote data-caption="Dries Buytaert"&gt;Drupal
        is awesome!&lt;/blockquote&gt;</code></li> <li><code>&lt;code data-caption="Hello
        world in JavaScript."&gt;alert("Hello world!");&lt;/code&gt;</code></li> </ul>
        </li> </ul> <h3>Plain text</h3> <ul> <li>No HTML tags allowed.</li> <li>Lines
        and paragraphs are automatically recognized. The &lt;br /&gt; line break,
        &lt;p&gt; paragraph and &lt;/p&gt; close paragraph tags are inserted automatically.
        If paragraphs are not recognized simply add a couple of blank lines.</li>
        <li>Web page addresses and email addresses turn into links automatically.</li>
        </ul> </div>'
