Editable Content - focus and click problems

Question

I have an editable content div, that a user adds elements to. The user has a side menu with all the available tags that can be added by click on each tag. It is also possible to type in text before/after each tag.

Each tag element has contenteditable="false", for example:

.keyword-item {
  background-color: #EEFDE5;
  font-weight: bold;
  border-radius: 20px;
  border: unset;
  cursor: pointer; 
  margin: 0 0.25rem 0 0.25rem;
}

img {
  padding-left: 2%;
}

span {
  padding-right: 2%;
}

<div contenteditable="true" id="expression-textarea">
  <label class="keyword-item" contenteditable="false">
    <input type="hidden" value="1">
        <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
        <span>bla</span>
    </label>
  <label class="keyword-item" contenteditable="false">
    <input type="hidden" value="2">
        <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
        <span>bla bla 2</span>
    </label>
  <label class="keyword-item" contenteditable="false">
        <input type="hidden" value="18">
        <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
        <span>bla2</span>
     </label>
</div>

Two problems with this (with Chrome at least):

1. When I'm using the keyboard arrows to navigate around those items, it works well. However, mouse navigation is a little bizzare; It seems impossible to get the cursor between the second and the third icon.
2. The first item is being deleted only by focusing in front of it and pressing the DEL key, it doesn't delete by focusing after it and pressing backspace.

Thanks in advance

Answer 1

You can accomplish what you're looking for using flex:

#expression-textarea {
  padding-left: 2px;
  display: flex;
}

.keyword-item {
  background-color: #EEFDE5;
  font-weight: bold;
  border-radius: 20px;
  border: unset;
  cursor: pointer; 
  margin: 0 0.25rem 0 0.25rem;
  white-space: nowrap;
}

img {
  padding-left: 2%;
}

span {
  padding-right: 2%;
}

<div contenteditable="true" id="expression-textarea">
  <span></span>
  <div class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
    bla
  </div>
  <span></span>
  <div class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
      bla bla 2
  </div>
  <span></span>
  <div class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
    bla2
  </div>
  <span></span>
</div>

I did also modify some of the markup - removing the inputs, using divs instead of labels, etc.

Using the above code, navigating with the arrows as well as with the mouse works as you'd expect.

The padding on the left side wrapper div is so that you can see the cursor at the start of the div.

Answer 2

Can you use a button instead of a label/input? It seems to fix the mouse selection issues. Adding an empty tag at the beginning of the contenteditable div allows the first tag to be deleted.

.keyword-item {
  border: none;
  background: none;
  font: inherit;
  background-color: #EEFDE5;
  font-weight: bold;
  border-radius: 20px;
  cursor: pointer;
  padding: 0 .5rem;
  margin: 0 .25rem;
}

<div contenteditable="true" id="expression-textarea">
  <span></span>
  <button class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
    <span>bla</span>
  </button>
  <button class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
    <span>bla bla 2</span>
  </button>
  <button class="keyword-item" contenteditable="false">
    <img src="https://img.icons8.com/small/16/000000/download-2.png"/>
    <span>bla2</span>
  </button>
</div>