Inline Tool Wrap/Unwrap

Hello everyone,

I have a problem, I developed several tools for EditorJS and I have a problem with the wrap / unwrap.

For example :

I developed a tool to change the font color. When I select the text, no problem the color of the text changes, but if I want to change the color of only one part of this text again the selected text remains and the unselected text disappears.

I used the doc based on the marker tool

`class FontColor {`

```
static get isInline() {
return true;
}
```
```
get state() {
return this._state;
}
```
```
set state(state) {
this._state = state;

this.button.classList.toggle(this.api.styles.inlineToolButtonActive, state);
}
```
```
constructor({
api
}) {
this.api = api;
this.button = null;
this._state = false;

this.tag = 'EM';
}
```
```
render() {
this.button = document.createElement('button');
this.button.type = 'button';
this.button.innerHTML = ``;
this.button.classList.add(this.api.styles.inlineToolButton);

return this.button;
}
```
```
renderActions() {
this.colorPicker = document.createElement('input');
this.colorPicker.classList.add(this.api.styles.settingsButton, "colorPicker");
this.colorPicker.type = 'color';
this.colorPicker.value = '#FFFFFF';
this.colorPicker.hidden = true;

return this.colorPicker;
}
```
```
surround(range) {
if (this.state) {
this.unwrap(range);
return;
}

this.wrap(range);
}
```
```
wrap(range) {
const selectedText = range.extractContents();
const fontColorTag = document.createElement(this.tag);
const color = this.colorPicker.value;

fontColorTag.style.color = color;
fontColorTag.appendChild(selectedText);
range.insertNode(fontColorTag);

this.api.selection.expandToTag(fontColorTag);
}
```

```
unwrap(range) {
const fontColorTag = this.api.selection.findParentTag(this.tag);
const text = range.extractContents();

fontColorTag.remove();

range.insertNode(text);
}
```
```
checkState() {
const fontColorTag = this.api.selection.findParentTag(this.tag);
// console.log(this.state);
// console.log(fontColorTag);
this.state = !!fontColorTag;
if (this.state) {
this.showActions(fontColorTag);
} else {
this.hideActions();
}
}
```
```
showActions(fontColorTag) {
const {
color
} = fontColorTag.style;
this.colorPicker.value = color ? this.convertToHex(color) : '#f5f1cc';

this.colorPicker.onchange = () => {
fontColorTag.style.color = this.colorPicker.value;
};
this.colorPicker.hidden = false;
}

hideActions() {
this.colorPicker.onchange = null;
this.colorPicker.hidden = true;
}
```
```
convertToHex(color) {
const rgb = color.match(/(\d+)/g);

let hexr = parseInt(rgb[0]).toString(16);
let hexg = parseInt(rgb[1]).toString(16);
let hexb = parseInt(rgb[2]).toString(16);

hexr = hexr.length === 1 ? '0' + hexr : hexr;
hexg = hexg.length === 1 ? '0' + hexg : hexg;
hexb = hexb.length === 1 ? '0' + hexb : hexb;

return '#' + hexr + hexg + hexb;
}
```
```
static get sanitize() {
return {
em: {
style: true
}
};
}
}
```