Indsæt smileys

<style>
.emoji-drawer {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    width: 100px;

    margin-bottom: 32px;
    transition: opacity 0.2s;
}

.hidden {
  opacity: 0;
}

.emoji {
    text-align: center;
    font-size: 24px;
    padding: 8px;
}

.emoji:hover {
    cursor: pointer;
}
</style>


<div id="drawer" class="emoji-drawer"> 
  <div class="emoji" onclick="addEmoji(this.innerHTML)">😀</div>
  <div class="emoji" onclick="addEmoji(this.innerHTML)">😃</div>
  <div class="emoji" onclick="addEmoji(this.innerHTML)">😄</div>
  <div class="emoji" onclick="addEmoji(this.innerHTML)">😁</div>
  <div class="emoji" onclick="addEmoji(this.innerHTML)">😆</div>
</div>


<script>
function addEmoji(emoji) {
  let inputEle = document.getElementById('editor');
  
  editor.value += emoji;
}

function toggleEmojiDrawer() {
  let drawer = document.getElementById('drawer');
  
  if (drawer.classList.contains('hidden')) {
    drawer.classList.remove('hidden');
  } else {
    drawer.classList.add('hidden');
  }
}
</script>