// src/components/elements/rte/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/rte
additionalProperties: false
required:
  - markup
properties:
  markup:
    type: string
    format: html
  class:
    type: string

// src/components/elements/rte/mocks.yaml

markup: >-
  <p><strong>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
  nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
  diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
  clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
  amet</strong></p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
  <a href="#test">consetetur sadipscing elitr</a> sed diam nonumy eirmod tempor
  invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
  eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
  sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
  amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
  labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
  accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
  takimata sanctus est Lorem ipsum dolor sit amet.</p> <h2
  class="u-typo-headline4">Lorem ipsum dolor</h2> <p>Lorem ipsum dolor sit amet,
  consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
  et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
  justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
  sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
  magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
  Lorem ipsum dolor sit amet.</p> <p><em>Lorem ipsum dolor sit amet, consetetur
  sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
  magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
  Lorem ipsum dolor sit amet</em></p> <p>Lorem ipsum dolor sit amet, consetetur
  sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
  magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
  Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
  elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
  aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
  et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
  ipsum dolor sit amet.</p> <h3 class="u-typo-headline5">Lorem ipsum dolor</h3>
  <p>Lorem ipsum dolor sit amet, <a href="#test">consetetur sadipscing elitr</a>
  consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
  et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
  justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
  sadipscing elitr, sed diam nonumy eirmod tempor invidunt  <a
  href="#test">consetetur sadipscing elitr</a> ut labore et dolore magna
  aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
  et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
  ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
  ea.</p> <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
  dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate
  velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at
  vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
  zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor
  sit amet.</p>
$variants:
  - $name: Short
    markup: >-
      <p>Lorem ipsum dolor sit amet, <a
      href="#test">https://www.greenpeace.de/sites/www.greenpeace.de/files/tipps_und_anregungen_rund_um_das_thema_kommunikation.pdf</a>
      consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
      labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
      sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
      amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
      <a href="#test">consetetur sadipscing elitr</a> ut labore et dolore magna
      aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
      est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
      sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
      dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
      justo duo dolores et ea.</p> <p>Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in
      hendrerit in vulputate velit esse molestie consequatvel illum dolore eu
      feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
      qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
      nulla facilisi. Lorem ipsum dolor sit amet.</p>
  - $name: Headlines
    markup: >-
      <h1>Headline1</h1><h2 class="u-typo-headline1">Visual Headline1</h2>
      <h2>Headline2</h2><h3 class="u-typo-headline2">Visual Headline2</h3>
      <h3>Headline3</h3><h4 class="u-typo-headline3">Visual Headline3</h4>
      <h4>Headline4</h4><h5 class="u-typo-headline4">Visual Headline4</h5>
      <h5>Headline5</h5><h6 class="u-typo-headline5">Visual Headline5</h6>
      <h6>Headline6</h6><p class="u-typo-headline6">Visual Headline6</p> <p
      class="u-typo-big-copy-subline">Subline</p>
  - $name: Lists
    markup: >-
      <h3>Lists</h3> <h4 class="u-typo-headline5">Unordered List</h4> <p>Lorem
      ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
      amet</p> <ul><li>List item</li><li>List item</li><li>List
      item</li><li>List item</li></ul> <h4 class="u-typo-headline5">Ordered
      List</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
      dolor sit amet</p> <ol><li>List item</li><li>List item</li><li>List
      item</li><li>List item</li></ol>

// src/components/elements/rte/rte.html.twig

<div class="Rte Tracking--rte{% if class %} {{ class }}{% endif %}">
  {{ markup|raw }}
</div>