rich_text:
  namespace: "Atoms/HTML"
  use: "@atoms/html/rich-text/rich-text.twig"
  label: Filter tips
  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: '<h1>Compose tips</h1>
                <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>'
