@dialpad/dialtone-vue/dist/components/rich_text_editor/extensions/emoji/emoji.cjs

Vue component library for Dialpad's design system Dialtone

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const core = require("@tiptap/core");
const state = require("@tiptap/pm/state");
const vue2 = require("@tiptap/vue-2");
const Suggestion = require("@tiptap/suggestion");
const regexCombinedEmojis = require("regex-combined-emojis");
const EmojiComponent = require("./EmojiComponent.vue.cjs");
const common_emoji = require("../../../../common/emoji.cjs");
const suggestion = require("./suggestion.cjs");
const inputShortCodeRegex = /(:\w+:)$/;
const inputUnicodeRegex = new RegExp(regexCombinedEmojis.emojiPattern + "$");
const inputRuleMatch = (match) => {
  if (match && common_emoji.codeToEmojiData(match[0])) {
    const text = match[2] || match[0];
    return { text };
  }
};
const shortCodePasteMatch = (text) => {
  const matches = [...text.matchAll(common_emoji.emojiShortCodeRegex)];
  return matches.filter((match) => common_emoji.codeToEmojiData(match[0])).map((match) => ({
    index: match.index,
    text: match[0],
    match
  }));
};
const Emoji = core.Node.create({
  name: "emoji",
  addOptions() {
    return {
      HTMLAttributes: {}
    };
  },
  group: "inline",
  inline: true,
  selectable: false,
  atom: true,
  addNodeView() {
    return vue2.VueNodeViewRenderer(EmojiComponent.default);
  },
  addAttributes() {
    return {
      code: {
        default: null
      }
    };
  },
  parseHTML() {
    return [
      {
        tag: "emoji-component"
      }
    ];
  },
  renderText({ node }) {
    const unicodeEmoji = common_emoji.stringToUnicode(common_emoji.codeToEmojiData(node.attrs.code).unicode_output);
    return unicodeEmoji;
  },
  renderHTML({ HTMLAttributes }) {
    return ["emoji-component", core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
  },
  addInputRules() {
    return [
      new core.InputRule({
        find: (text) => {
          const match = text.match(inputShortCodeRegex) || text.match(inputUnicodeRegex);
          if (!match) return;
          return inputRuleMatch(match);
        },
        handler: ({ state: state2, range, match, commands, chain, can }) => {
          const { tr } = state2;
          const start = range.from;
          const end = range.to;
          tr.replaceWith(start, end, this.type.create({ code: match[0] }));
        }
      })
    ];
  },
  addPasteRules() {
    return [
      core.nodePasteRule({
        find: shortCodePasteMatch,
        type: this.type,
        getAttributes(attrs) {
          return {
            code: attrs[0]
          };
        }
      }),
      core.nodePasteRule({
        find: common_emoji.emojiRegex,
        type: this.type,
        getAttributes(attrs) {
          return {
            code: attrs[0]
          };
        }
      })
    ];
  },
  addProseMirrorPlugins() {
    return [
      Suggestion({
        char: ":",
        pluginKey: new state.PluginKey("emoji"),
        editor: this.editor,
        ...this.options.suggestion,
        ...suggestion.default
      })
    ];
  },
  addKeyboardShortcuts() {
    return {
      Backspace: () => this.editor.commands.command(({ tr, state: state2 }) => {
        let isEmoji = false;
        const { selection } = state2;
        const { empty, anchor } = selection;
        if (!empty) {
          return false;
        }
        state2.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
          if (node.type.name === this.name) {
            isEmoji = true;
            tr.insertText("", pos, pos + node.nodeSize);
            return false;
          }
        });
        return isEmoji;
      })
    };
  }
});
exports.Emoji = Emoji;
//# sourceMappingURL=emoji.cjs.map