v3shin

dispatchEvent(new Event('input', {
    bubbles: true,
    cancelable: true,
}));

element.innerHTML = textarea.value.replace(/\r/g, '').split('\n').map(str => str.trim() ? `<p>${str.trim()}</p>` : '').join('');

<h1 class="hero__title">
  <span class="shadow">Дизайн и верстка</span>
  <span class="shadow">сайтов с нуля</span>
  <span class="shadow">для вас</span>
</h1>

.hero__title {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.shadow {
  position: relative;
}
.shadow:after {
  background: #000;
  content: '';
  position: absolute;
  top: 10px;
  left: -10px;
  width: 100%;
  height: 100%;
  z-index: -1;
}

<div class="images">
<div class="image">йа картинко 1</div>
<div class="image">йа картинко 2</div>
<div class="image">йа картинко 3</div>
</div>
<button id="shuffle">Перемешать</button>

<script>
function shuffle(a){for(var e=a.length;e&&--e;){var t=a[e],n=Math.floor(Math.random()*(e+1));a[e]=a[n],a[n]=t}return a}

document.getElementById('shuffle').addEventListener('click', () => {
    let imagesContainer = document.querySelector('.images'),
        images = [...imagesContainer.querySelectorAll('.image')];
    shuffle(images).forEach(image => {
        imagesContainer.appendChild(image);
    });
});
</script>

$('div[contenteditable="true"]').parents().andSelf().trigger('input');