Как заставить отступ перемещать текущий div как дочерний по отношению к предыдущему в contentEditable? - PullRequest
Новая
       51

Как заставить отступ перемещать текущий div как дочерний по отношению к предыдущему в contentEditable?

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

У меня есть этот контент. Редактируемый код: 

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

// ---------------------------------

// observing any div addition to conentEditable div in order to assign new uuid for added div
  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 });

// ---------------------------------

// Assigning tab key shortcut
  document.querySelector('div[contenteditable]').onkeydown = function(e){
    if (e.keyCode === 9) { 
      e.preventDefault();  // this will prevent us from tabbing out of the editor
      document.execCommand('styleWithCSS',true,null);
      document.execCommand('indent',true,null);
    }
  };
<div contenteditable>
  <div id="48b62163-9f3b-4b20-8dad-dc99e27e1243">Edit text content here.<div>
</div>

Код устанавливает новый uuid для каждого вновь созданного элемента в contentEditable при разрыве строки.Код MutationObserver был первоначально упомянут в предыдущем вопросе .

Чтобы проиллюстрировать, что я хочу сделать, я объясню это пример :
Допустим, я набрал:

Редактировать текстовое содержимое здесь.
Новая строка 1.
Новая строка 2.
Новая строка 3.

Тогда у меня будет оригинальный HTML-код, подобный следующему: 

<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>

Теперь, когда курсор находится на New line 2, и я нажимаю клавишу на клавиатуре , строка будет с отступоми представление contentEditable будет таким:

Редактировать текстовое содержимое здесь.
Новая строка 1.
.,. Новая строка 2.
Новая строка 3.

и оригинальный HTML-код будет выглядеть так: 

<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>
  <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;" id="a1badbcd-be93-4193-b73f-807d619393b5">
    <div id="57d399c6-afa0-42ae-83c2-d6d7937f22d3">New line 2.</div>
  </blockquote>
  <div id="1fe51cac-bb79-47e2-bd95-e813b33e29aa">New line 3.</div>
</div>

Я не хочу, чтобы сделатьтакой отступ с созданием blockquote.
Вместо этого я хочу, чтобы он переместил активный div, чтобы он был дочерним по отношению к предыдущему, вот так: 

<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 id="57d399c6-afa0-42ae-83c2-d6d7937f22d3" style="margin: 0 0 0 40px;>New line 2.</div>
  </div>
  <div id="1fe51cac-bb79-47e2-bd95-e813b33e29aa">New line 3.</div>
</div>

И я хочу, чтобыЯ намереваюсь больше как это:

Редактировать текстовое содержание здесь.
Новая строка 1.
.,,,,,,,. Новая строка 2.
Новая строка 3.

, HTML-код становится следующим: 

<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 id="57d399c6-afa0-42ae-83c2-d6d7937f22d3" style="margin: 0 0 0 120px;>New line 2.</div>
  </div>
  <div id="1fe51cac-bb79-47e2-bd95-e813b33e29aa">New line 3.</div>
</div>

У меня есть мысли подойти к этому, чтобы сделать кодпроверьте, есть ли предшествующий элемент div, если это так, он должен сделать активный элемент div его дочерним.Также к активному элементу div будет добавлен стиль отступа.
Я немного поиграюсь с window.getSelection().focusNode.parentNode и выложу свое решение, как только закончу писать.Однако я надеюсь, что есть более эффективный способ.

...