Richtext Editor

<!-- Block type dropdown -->
<button class="outline" id="format-btn" popovertarget="format-menu"><span>Paragraph</span> <svg>...</svg></button>
<div
  id="format-menu"
  popover
  onchange="
    document.getElementById('format-btn').querySelector('span').textContent = event.target
      .closest('label')
      .textContent.trim();
    this.hidePopover();
  "
>
  <menu>
    <li>
      <label><input type="radio" name="block" value="p" checked />Paragraph</label>
    </li>
    <li>
      <label><input type="radio" name="block" value="h1" />Heading 1</label>
    </li>
    <li>
      <label><input type="radio" name="block" value="h2" />Heading 2</label>
    </li>
    <li>
      <label><input type="radio" name="block" value="h3" />Heading 3</label>
    </li>
    <li>
      <label><input type="radio" name="block" value="blockquote" />Blockquote</label>
    </li>
  </menu>
</div>

<!-- Formatting toggles -->
<fieldset role="group">
  <label class="toggle square" title="Bold"><input type="checkbox" /><svg>...</svg></label>
  <label class="toggle square" title="Italic"><input type="checkbox" /><svg>...</svg></label>
  <label class="toggle square" title="Underline"><input type="checkbox" /><svg>...</svg></label>
  <label class="toggle square" title="Strikethrough"><input type="checkbox" /><svg>...</svg></label>
</fieldset>

<!-- Insert -->
<fieldset role="group">
  <button class="ghost square" title="Image" onclick="document.getElementById('image-dialog').showModal()">
    <svg>...</svg>
  </button>
  <button class="ghost square" title="Blockquote"><svg>...</svg></button>
  <button class="ghost square" title="Inline code"><svg>...</svg></button>
</fieldset>

<!-- Alignment & lists -->
<fieldset role="group">
  <button class="ghost square" title="Text alignment" popovertarget="align-menu"><svg>...</svg></button>
  <button class="ghost square" title="Bullet list"><svg>...</svg></button>
  <button class="ghost square" title="Numbered list"><svg>...</svg></button>
</fieldset>
<div id="align-menu" popover>
  <menu>
    <li>
      <label><input type="radio" name="align" value="justifyLeft" checked /><svg>...</svg> Align left</label>
    </li>
    <li>
      <label><input type="radio" name="align" value="justifyCenter" /><svg>...</svg> Align center</label>
    </li>
    <li>
      <label><input type="radio" name="align" value="justifyRight" /><svg>...</svg> Align right</label>
    </li>
  </menu>
</div>

<textarea></textarea>

<!-- Insert image dialog -->
<dialog id="image-dialog" closedby="any">
  <article>
    <header><h3>Insert image</h3></header>
    <form id="image-form" method="dialog">
      <label class="file-drop">
        <input type="file" accept="image/*" />
        <span>Drag image here or choose from folder</span>
      </label>
    </form>
    <footer>
      <button type="button" class="outline">Cancel</button>
      <button type="submit" form="image-form">Insert</button>
    </footer>
  </article>
</dialog>