format-emoji-blot.js

import Quill from "quill";
import emojiMap from "./emoji-map";

const Embed = Quill.import("blots/embed");

class EmojiBlot extends Embed {
  static create(value) {
    let node = super.create();
    if (typeof value === "object") {
      EmojiBlot.buildSpan(value, node);
    } else if (typeof value === "string") {
      const valueObj = emojiMap[value];

      if (valueObj) {
        EmojiBlot.buildSpan(valueObj, node);
      }
    }

    return node;
  }

  static value(node) {
    return node.dataset.name;
  }

  static buildSpan(value, node) {
    node.setAttribute("data-name", value.name);
    let emojiSpan = document.createElement("span");
    6;
    emojiSpan.classList.add(this.emojiClass);
    emojiSpan.classList.add(this.emojiPrefix + value.name);
    // unicode can be '1f1f5-1f1ea',see emoji-list.js.
    emojiSpan.innerText = String.fromCodePoint(
      ...EmojiBlot.parseUnicode(value.unicode)
    );
    node.appendChild(emojiSpan);
  }
  static parseUnicode(string) {
    return string.split("-").map((str) => parseInt(str, 16));
  }
}

EmojiBlot.blotName = "emoji";
EmojiBlot.className = "ql-emojiblot";
EmojiBlot.tagName = "span";
EmojiBlot.emojiClass = "ap";
EmojiBlot.emojiPrefix = "ap-";

export default EmojiBlot;