Как добавить новый div при нажатии клавиши ввода в contenteditable div

Question

Я создаю Angular 7 приложение. В этом приложении у меня есть страница с div, который получил contenteditable значение true. Когда пользователь нажимает клавишу ввода, новый div добавляется в редактор / div сразу после div, который был сфокусирован, когда пользователь нажимал ввод. К сожалению, этот код (см. Ниже) работает, только если div получил хотя бы один символ. Это не очень хорошо, потому что я хотел бы использовать поддельный заполнитель в div, а не фактические символы.

Как я могу изменить свой код ниже, чтобы он работал, даже если div пуст?

insertBlock($event) {
    $event.preventDefault();
    const selection = window.getSelection();
    const selectedElement = selection.anchorNode.parentNode;
    const block = document.createElement('div');
    block.innerHTML = 'Type slash for commands';
    block.className = 'ce-block';
    block.setAttribute('placeholder', 'Type slash for commands');
    this.editor.insertBefore(block, selectedElement.nextSibling);
    selection.collapse(block.firstChild, block.textContent.length);
  }

HTML выглядит следующим образом (я использую директиву для прослушивания событий редактора):

<div class="ce-container" blockeditor [menu]="menu">
 <div class="ce-menu" contenteditable="false" #menu>Menu</div>
 <div class="ce-block" placeholder="Type slash for commands"></div>
</div>

Идея заключается в создании так называемого редактора блоков (как, например, Notion.so).

Спасибо!

Answer 1

У меня было go, не уверен, что вам нужно, но посмотрите на StackBlitz demo

Использует Renderer2 для создания и добавьте новые div и дайте им прослушиватель событий, который вызывает тот же обработчик, чтобы добавить больше из новых.

Использует keyup.enter в качестве события для запуска обработчика.

Поведение:

• Начните с пустого элемента div, нажмите на него и нажмите Enter. Новый div создан после него.
• Перейдите на новый div и нажмите Enter. Новый div, созданный после этого.
• Go вернуться к предыдущему div, нажать enter - новый div, созданный после этого div и до следующего.

Основная функция в .ts это:

    onPress(item: HTMLElement) {
//Create div element with contenteditable attrbute. This is the new div
         let div = this.renderer.createElement('div');
         this.renderer.setAttribute(div, 'contenteditable','');
//Add enter key press listener that calls this same function so gives add functionality to new divs
          this.renderer.listen(div, 'keyup.enter', (event) => { this.onPress(event.target) });

//Attaches the new div to the DOM
         if (item.nextSibling != null)
         {
           this.renderer.insertBefore(item.parentElement,div,item.nextSibling);
         }
         else
         {
           this.renderer.appendChild(item.parentElement, div);
         }
       }

html шаблон:

<div contenteditable (keyup.enter)="onPress($event.target)"></div>