@dialpad/dialtone 9.39.0 → 9.41.0

package/dist/vue3/lib/rich-text-editor.js

@@ -19,7 +19,7 @@ import { Node, mergeAttributes, nodeInputRule, nodePasteRule, getMarksBetween, c
 import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementBlock, withDirectives, createElementVNode, Fragment, renderList, normalizeClass, withModifiers, resolveDynamicComponent, vShow, createTextVNode, toDisplayString, markRaw, createCommentVNode } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtEmoji } from "./emoji.js";
-import { codeToEmojiData, emojiShortCodeRegex } from "../common/emoji.js";
+import { codeToEmojiData, emojiRegex, emojiPattern, emojiShortCodeRegex } from "../chunks/index-GVD15GIB.js";
 import { PluginKey, Plugin } from "@tiptap/pm/state";
 import Suggestion from "@tiptap/suggestion";
 import { emojisIndexed } from "@dialpad/dialtone-emojis";
@@ -32,7 +32,6 @@ import { DtLink } from "./link.js";
 import { DtAvatar } from "./avatar.js";
 import DtIconHash from "@dialpad/dialtone-icons/vue3/hash";
 import DtIconLock from "@dialpad/dialtone-icons/vue3/lock";
-import emojiRegex from "emoji-regex";
 import "./skeleton.js";
 import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
@@ -232,7 +231,7 @@ const suggestionOptions = {
       return false;
     });
     return filteredEmoji.map((item) => {
-      return { id: item.unicode_character, code: item.shortname };
+      return { code: item.shortname };
     });
   },
   command: ({ editor, range, props }) => {
@@ -278,7 +277,6 @@ const suggestionOptions = {
           interactive: true,
           trigger: "manual",
           placement: "top-start",
-          contentElement: null,
           zIndex: 650
         });
       },
@@ -308,8 +306,7 @@ const suggestionOptions = {
 };
 const EmojiPluginKey = new PluginKey("emoji");
 const inputShortCodeRegex = new RegExp("(^| |(?<=:))(:\\w+:)$");
-const inputUnicodeRegex = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])$/;
-const pasteUnicodeRegex = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g;
+const inputUnicodeRegex = new RegExp(emojiPattern + "$");
 const inputRuleMatch = (match) => {
   if (match && codeToEmojiData(match[0])) {
     const text = match[2] || match[0];
@@ -349,9 +346,6 @@ const Emoji = Node.create({
     return {
       code: {
         default: null
-      },
-      id: {
-        default: null
       }
     };
   },
@@ -394,11 +388,9 @@ const Emoji = Node.create({
         },
         type: this.type,
         getAttributes(attrs) {
-          const unicode = codeToEmojiData(attrs[0]).unicode_output;
-          const emoji = String.fromCodePoint(parseInt(unicode, 16));
+          const emoji = codeToEmojiData(attrs[0]).shortname;
           return {
-            code: emoji,
-            label: "emoji"
+            code: emoji
           };
         }
       })
@@ -416,7 +408,7 @@ const Emoji = Node.create({
         }
       }),
       nodePasteRule({
-        find: pasteUnicodeRegex,
+        find: emojiRegex,
         type: this.type,
         getAttributes(attrs) {
           return {
@@ -626,30 +618,6 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
   });
 }
 const MentionComponent = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
-const mentionRegex = /@([\w.-]+)[^\w.-]?/g;
-const mentionPasteMatch = (text, suggestions) => {
-  const matches = [...text.matchAll(mentionRegex)];
-  return matches.filter((match) => suggestions.some(({ id }) => id === match[1].trim())).map((match) => {
-    let mention = match[1];
-    if (!mention.endsWith(" "))
-      mention += " ";
-    return {
-      index: match.index,
-      text: mention,
-      match
-    };
-  });
-};
-const mentionInputMatch = (text, suggestions) => {
-  const match = text.match(/@([\w.-]+)[^\w.-]$/);
-  if (!match || !suggestions.some(({ id }) => id === match[1]))
-    return;
-  return {
-    index: match.index,
-    text: match[0],
-    match
-  };
-};
 const MentionPlugin = Mention.extend({
   addNodeView() {
     return VueNodeViewRenderer(MentionComponent);
@@ -678,33 +646,7 @@ const MentionPlugin = Mention.extend({
     return `@${node.attrs.id}`;
   },
   renderHTML({ HTMLAttributes }) {
-    return ["mention-component", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
-  },
-  addInputRules() {
-    var _a;
-    const suggestions = (_a = this.options.suggestion) == null ? void 0 : _a.items({ query: "" });
-    return [
-      nodeInputRule({
-        find: (text) => mentionInputMatch(text, suggestions),
-        type: this.type,
-        getAttributes(attrs) {
-          return suggestions.find(({ id }) => id === attrs[0].replace("@", "").trim());
-        }
-      })
-    ];
-  },
-  addPasteRules() {
-    var _a;
-    const suggestions = (_a = this.options.suggestion) == null ? void 0 : _a.items({ query: "" });
-    return [
-      nodePasteRule({
-        find: (text) => mentionPasteMatch(text, suggestions),
-        type: this.type,
-        getAttributes(attrs) {
-          return suggestions.find(({ id }) => id === attrs[0].trim());
-        }
-      })
-    ];
+    return ["mention-component", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
   }
 }).configure({
   suggestion: {
@@ -741,34 +683,8 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   });
 }
 const ChannelComponent = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
-const channelRegex = /#([\w-]+)[^\w-]?/g;
-const channelPasteMatch = (text, suggestions) => {
-  const matches = [...text.matchAll(channelRegex)];
-  return matches.filter((match) => suggestions.some(({ id }) => id === match[1].trim())).map((match) => {
-    let channel = match[1];
-    if (!channel.endsWith(" "))
-      channel += " ";
-    return {
-      index: match.index,
-      text: channel,
-      match
-    };
-  });
-};
-const channelInputMatch = (text, suggestions) => {
-  const match = text.match(/#([\w-]+)[^\w-]$/);
-  if (!match || !suggestions.some(({ id }) => id === match[1]))
-    return;
-  return {
-    index: match.index,
-    text: match[0],
-    match
-  };
-};
 const ChannelPlugin = Mention.extend({
   name: "channel",
-  group: "inline",
-  inline: true,
   addNodeView() {
     return VueNodeViewRenderer(ChannelComponent);
   },
@@ -796,33 +712,7 @@ const ChannelPlugin = Mention.extend({
     return `#${node.attrs.id}`;
   },
   renderHTML({ HTMLAttributes }) {
-    return ["channel-component", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
-  },
-  addInputRules() {
-    var _a;
-    const suggestions = (_a = this.options.suggestion) == null ? void 0 : _a.items({ query: "" });
-    return [
-      nodeInputRule({
-        find: (text) => channelInputMatch(text, suggestions),
-        type: this.type,
-        getAttributes(attrs) {
-          return suggestions.find(({ id }) => id === attrs[0].replace("#", "").trim());
-        }
-      })
-    ];
-  },
-  addPasteRules() {
-    var _a;
-    const suggestions = (_a = this.options.suggestion) == null ? void 0 : _a.items({ query: "" });
-    return [
-      nodePasteRule({
-        find: (text) => channelPasteMatch(text, suggestions),
-        type: this.type,
-        getAttributes(attrs) {
-          return suggestions.find(({ id }) => id === attrs[0].trim());
-        }
-      })
-    ];
+    return ["channel-component", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
   }
 }).configure({
   suggestion: {
@@ -1306,7 +1196,7 @@ const _sfc_main = {
      */
     outputFormat: {
       type: String,
-      default: "text",
+      default: "html",
       validator(outputFormat) {
         return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);
       }
@@ -1606,8 +1496,7 @@ const _sfc_main = {
       if (newValue === currentValue) {
         return;
       }
-      this.internalValue = newValue;
-      this.insertContent();
+      this.editor.commands.setContent(newValue, false);
     }
   },
   created() {
@@ -1623,6 +1512,7 @@ const _sfc_main = {
     createEditor() {
       this.editor = new Editor({
         autofocus: this.autoFocus,
+        content: this.modelValue,
         editable: this.editable,
         extensions: this.extensions,
         editorProps: {
@@ -1632,64 +1522,8 @@ const _sfc_main = {
           }
         }
       });
-      this.insertContent();
       this.addEditorListeners();
     },
-    /**
-     * This function is necessary as tiptap doesn't render the content passed
-     * directly through `editor.commands.setContent` the content passed down to it
-     * should be already parsed. So We're parsing the elements into it's corresponding
-     * HTML version before setting it.
-     */
-    insertContent() {
-      this.parseMentions();
-      this.parseChannels();
-      this.parseEmojis();
-      this.editor.commands.setContent(this.internalValue, true);
-    },
-    parseEmojis() {
-      const matches = new Set(
-        [...this.modelValue.matchAll(emojiRegex()), ...this.modelValue.matchAll(emojiShortCodeRegex)].map((match) => match[0].trim())
-      );
-      if (!matches)
-        return;
-      matches.forEach((match) => {
-        const emoji = codeToEmojiData(match);
-        if (!emoji)
-          return;
-        this.internalValue = this.internalValue.replace(new RegExp(`${match}`, "g"), `<emoji-component code="${emoji.shortname}"></emoji-component>`);
-      });
-    },
-    parseChannels() {
-      if (!this.channelSuggestion)
-        return;
-      const suggestions = this.channelSuggestion.items({ query: "" });
-      const matches = [...this.modelValue.matchAll(channelRegex)].filter((match) => suggestions.some(({ id }) => id === match[1]));
-      if (!matches)
-        return;
-      matches.forEach((match) => {
-        const channel = suggestions.find(({ id }) => id === match[1]);
-        this.internalValue = this.internalValue.replace(
-          `#${match[1]}`,
-          /** The space at the beginning is important as tiptap removes that while rendering.
-           *  So if multiple mentions, channels or emojis are next to each other it will fail
-           */
-          ` <channel-component name="${channel.name}" id="${channel.id}"></channel-component>`
-        );
-      });
-    },
-    parseMentions() {
-      if (!this.mentionSuggestion)
-        return;
-      const suggestions = this.mentionSuggestion.items({ query: "" });
-      const matches = [...this.modelValue.matchAll(mentionRegex)].filter((match) => suggestions.some(({ id }) => id === match[1]));
-      if (!matches)
-        return;
-      matches.forEach((match) => {
-        const mention = suggestions.find(({ id }) => id === match[1]);
-        this.internalValue = this.internalValue.replace(`@${match[1]}`, ` <mention-component name="${mention.name}" id="${mention.id}"></mention-component>`);
-      });
-    },
     destroyEditor() {
       this.editor.destroy();
     },