Search code examples
javascripthtmlcsscontenteditablenested-lists

Nested List within contenteditable

I am currently trying to auto-create bullet points in a tree hierarchy formation where, when you press tab, you would go to the sub-point of the main point.

It is meant to be similar to the Outliner in Microsoft Word. However, I am struggling what approach I should make to this as currently from the code below, I can only create a list of points but I want to be able to indent some of the points where they would move to the right along with the bullet point.

function list() {
  let ul = document.getElementById("ul");
  let li = document.createElement("li");
  ul.appendChild(li);
}
<div id="ul" contenteditable="true" class="editor" draggable="true" onfocus="list()" style="font-weight:normal;">
</div>

Solution

  • If I got you right all you would need is to set a padding on the parent ul, which funny enough they are already set, if you want to further indent it, you could add even more padding to it, but from your example it is not clear enough, you are not setting an innerHtml or innerText to the li, on the other hand, if you want to focus a div, you should probably set a tabindex to it.

    EDIT: I did not catch before that you were using a div with the id of ul, still you can add an inner child li, but it doesn't make much sense, if you still decide to go that way you can style each li child to have the same margin left and also set the before attribute to have the '*'

    EDIT 2:

    Initial markup:

    <div class="outline-editor">
  <button>+ Add child</button>
  <input type="text" name="content" id="add-text" />
  <ul>
    Items go here:
  </ul>
</div>

<script>
  const button = document.querySelector('button')
  const input = document.querySelector('input')
  const ul = document.querySelector('ul')

  function addChild(li) {
    let ul = li.querySelector('ul');
    if (!ul) {
      ul = document.createElement('ul')
      li.appendChild(ul)
    }

    let childLi = document.createElement('li')
    let childButton = document.createElement('button')
    childButton.innerText = '+ Add child'

    let childSpan = document.createElement('span')
    childSpan.innerText = input.value;
    childButton.addEventListener('click', () => {
      addChild(childLi)
    })
    childLi.style.marginLeft = '15px'
    childLi.appendChild(childSpan)
    childLi.appendChild(childButton)
    ul.appendChild(childLi)
  }

  function handleClick(e) {
    let li = document.createElement('li')
    let childButton = document.createElement('button')
    childButton.innerText = '+ Add child'

    let childSpan = document.createElement('span')
    childSpan.innerText = input.value;
    childButton.addEventListener('click', () => {
      addChild(li)
    })
    li.style.marginLeft = '15px'
    li.appendChild(childSpan)
    li.appendChild(childButton)
    ul.appendChild(li)
  }

  button.addEventListener('click', handleClick)
</script>

    You can check the behaviour on the codepen:

    https://codepen.io/jenaro94/pen/RwNwyBr

    Of course you can further style each li element and you should probably use a modal to check what the user writes as a child to each li.

    EDIT 3:

    Ok this is mhy last and final edit, hope this works well for you.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <style>
  .outline-editor {
    margin: 100px auto;
  }

  ul {
    position: relative;
  }

  button {
    border: 1px solid black;
  }

  input {
    border: none;
  }
</style>

<div class="outline-editor">
  <ul id="top-level">
    Items go here:

    <li>
      <input type="text" name="content" id="add-text" />
    </li>
  </ul>
</div>

<script>
  const input = document.querySelector('#add-text')
  const ul = document.querySelector('#top-level')

  function addChild(li) {
    let ul = li.tagName === 'UL' ? li : li.querySelector('ul')
    if (!ul) {
      ul = document.createElement('ul')
      li.appendChild(ul)
    }

    let childLi = document.createElement('li')

    let text = document.createElement('input')
    text.type = 'text'
    text.rows = 1
    text.cols = 10
    text.focus()
    text.addEventListener('keydown', e => {
      e.preventDefault()
      if (e.keyCode === 9) {
        addChild(childLi)
      } else if (e.keyCode === 13) {
        addChild(li)
      }
    })
    childLi.appendChild(text)
    ul.appendChild(childLi)
  }

  function handleKeyDown(e) {
    e.preventDefault();
    e.stopPropagation();
    let li = document.createElement('li')
    if (e.keyCode === 9) {
      addChild(this.parentElement)
    } else if (e.keyCode === 13) {
      addChild(this.parentElement.parentElement)
    }
  }

  input.addEventListener('keydown', handleKeyDown)
</script>
  </body>
</html>