Как настроить вставленные div-ы contentEditable на разрывы строк? - PullRequest
Новая
       10

Как настроить вставленные div-ы contentEditable на разрывы строк?

1 голос
/ 07 марта 2019

У меня есть generate_uuid() функция, которая генерирует уникальные идентификаторы (первоначально полученные из здесь ): 

function generate_uuid() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  )
}

У меня есть contentEditable div: 

<div contenteditable>
  <div id="48b62163-9f3b-4b20-8dad-dc99e27e1243">Edit text content here.<div>
</div>

Когда я добавляю новую строку к текстовому содержимому, html-код становится: 

<div contenteditable>
  <div id="48b62163-9f3b-4b20-8dad-dc99e27e1243">Edit text content here.<div>
  <div id="48b62163-9f3b-4b20-8dad-dc99e27e1243">New line 1.</div>
</div>

Как мы заметили, новый div идентичен ранее существовавшему div.

Когда я добавляю больше строк, HTML-код становится: 

<div contenteditable>
  <div id="48b62163-9f3b-4b20-8dad-dc99e27e1243">Edit text content here.<div>
  <div id="48b62163-9f3b-4b20-8dad-dc99e27e1243">New line 1.</div>
  <div id="48b62163-9f3b-4b20-8dad-dc99e27e1243">New line 2.</div>
  <div id="48b62163-9f3b-4b20-8dad-dc99e27e1243">New line 3.</div>
</div>

То же, новые div идентичны ранее существовавшим div.

Как я могу настроить новые div каждый раз, когда пользователь нажимает разрыв строки? Я хочу, чтобы атрибут id для вновь вставленного div был сгенерирован функцией generate_uuid(). Примерно так должно быть в результате: 

<div contenteditable>
  <div id="48b62163-9f3b-4b20-8dad-dc99e27e1243">Edit text content here.<div>
  <div id="0b0e3518-1fb2-43e4-9160-6563ac0f82be">New line 1.</div>
  <div id="57d399c6-afa0-42ae-83c2-d6d7937f22d3">New line 2.</div>
  <div id="1fe51cac-bb79-47e2-bd95-e813b33e29aa">New line 3.</div>
</div>

1 Ответ

2 голосов
/ 08 марта 2019

Вы можете использовать MutationObserver, чтобы определить, когда добавлен дочерний элемент, и сгенерировать динамический идентификатор: 

function uuid() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  )
}

function subscriber(mutations) {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => node.id = uuid());
    console.clear();
    console.log([...mutation.target.children].map(x => x.id));
  });
}

const observer = new MutationObserver(subscriber);
observer.observe(document.querySelector('div[contenteditable]'), { childList: true });
<div contenteditable>
  <div id="48b62163-9f3b-4b20-8dad-dc99e27e1243">Edit text content here.<div>
</div>
...