Currently the `execCommand 'forecolor'` command creates a `<font>` tag with the selected color (which is deprecated). I would like to create a `<span>` tag instead.

I'm trying to write my own function to do so, this is what I currently do:

```
var sel = getSelection();

var range = sel.getRangeAt(0);

var selectedText = getSelection().toString();

document.execCommand("delete");

var newNode = document.createElement("span");

newNode.innerHTML = selectedText;
newNode.style.color = currentColor;

range.insertNode(newNode);

range.setStart(newNode, 0)
range.setEnd(newNode, newNode.childNodes.length);

sel.removeAllRanges;
sel.addRange(range);

```

**The issue I'm facing**: when there are one or more `<br>` tags within the selection they are lost. I know that the `toString()` function strips the tags off, but how can I keep these tags and the text?

**UPDATE**: unfortunately I realized that altough adding \n at every `br` works, when you try to move the caret in the div with the keyboard the \n character is considered: so, for example, if I want to delete an empty line I'll have to push backspace twice to send the caret up one line. I consider the issue still unsolved.