Как реализовать Quill Emoji Blot

Question

Я пытаюсь реализовать редактор Emoji Blot to Quill,

Но у меня есть некоторые проблемы с курсором на редакторе.

Чтобы решить эту проблему, я добавил пробел после вставки смайликов, но когда я пытаюсь их удалить, нужны два пробела для удаления смайликов. В первый раз курсор останавливается в начале эмодзи, а во второй раз эмодзи удаляется.

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

Спасибо в любом заранее.

const Embed = Quill.import("blots/embed");
class EmojiBlot extends Embed {
  static create(classes) {
    let node = super.create();
    classes.split(" ").forEach(iconClass => {
      node.classList.add(iconClass);
    });
    return node;
  }

  static formats(node) {
    let format = {};
    if (node.hasAttribute("class")) {
      format.class = node.getAttribute("class");
    }
    return format;
  }

  static value(node) {
    return node.getAttribute("class");
  }

  format(name, value) {
    if (name === "class") {
      if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name, value);
      }
    } else {
      super.format(name, value);
    }
  }
}

EmojiBlot.blotName = "emoji";
EmojiBlot.tagName = "span";
Quill.register({
  "formats/emoji": EmojiBlot
});

var myEditor = new Quill("#editor-container", {
  modules: {
    toolbar: document.getElementById("toolbar")
  },
  placeholder: "Compose an epic...",
  theme: "snow" // or 'bubble'
});

const insertEmoji = function() {
  let editorSelection = myEditor.getSelection();
  const cursorPosition = editorSelection && editorSelection.index ? editorSelection.index : 0;
  myEditor.insertEmbed(cursorPosition, "emoji", 'icon icon-smiley');
  myEditor.insertText(cursorPosition + 1, ' ')
  myEditor.setSelection(cursorPosition + 2)
};
document.querySelector(".emojiButton").addEventListener("click", insertEmoji);

#editor-container {
  height: 200px;
}

.icon {
  display: inline-block;
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1em 1em;
  font-size: 20px;
}

.icon-smiley {
  background-image: url("https://twemoji.maxcdn.com/2/svg/1f603.svg"); 
}

<link href="//cdn.quilljs.com/1.3.5/quill.snow.css" rel="stylesheet"/>
<script src="//cdn.quilljs.com/1.3.5/quill.js"></script>
<div
    id="editor-container"
></div>
<div id="toolbar">
    <button class="ql-bold"></button>
    <button class="ql-italic"></button>
    <button class="emojiButton">:D</button>
</div>

Answer 1

Я изменил тег emoji с span на img, а также заменил:

myEditor.insertText(cursorPosition + 1, ' ')
myEditor.setSelection(cursorPosition + 2)

С

myEditor.setSelection(cursorPosition + 1);

Это решает проблему. Смотрите пример здесь: https://jsfiddle.net/nadavrt/Ldgfp5pa/

Что касается причин неправильного поведения диапазона, я предполагаю, что Quill не может правильно зарегистрировать ширину вашего блота из-за ошибки в самом Quill. Я бы порекомендовал вам открыть проблему с ошибками на странице проекта GitHub.