@dialpad/dialtone-vue 3.122.0 → 3.123.2

package/dist/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 } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtEmoji } from "./emoji.js";
-import { shortcodeToEmojiData, codeToEmojiData } from "../common/emoji.js";
+import { codeToEmojiData } from "../common/emoji.js";
 import { PluginKey, Plugin } from "@tiptap/pm/state";
 import Suggestion from "@tiptap/suggestion";
 import { emojisIndexed } from "@dialpad/dialtone-emojis";
@@ -32,10 +32,10 @@ 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";
-import "emoji-regex";
 import "../chunks/list_item_constants-u1xcN9Dd.js";
 import "./item-layout.js";
 import "./icon.js";
@@ -305,7 +305,7 @@ const suggestionOptions = {
 };
 const EmojiPluginKey = new PluginKey("emoji");
 const inputShortCodeRegex = /:\w+:$/;
-const pasteShortCodeRegex = /:\w+:/g;
+const emojiShortCodeRegex = /:\w+:/g;
 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 inputRuleMatch = (match) => {
@@ -318,7 +318,7 @@ const inputRuleMatch = (match) => {
   }
 };
 const shortCodePasteMatch = (text) => {
-  const matches = [...text.matchAll(pasteShortCodeRegex)];
+  const matches = [...text.matchAll(emojiShortCodeRegex)];
   return matches.filter((match) => codeToEmojiData(match[0])).map((match) => ({
     index: match.index,
     text: match[0],
@@ -387,7 +387,7 @@ const Emoji = Node.create({
         },
         type: this.type,
         getAttributes(attrs) {
-          const unicode = shortcodeToEmojiData(attrs[0]).unicode_output;
+          const unicode = codeToEmojiData(attrs[0]).unicode_output;
           const emoji = String.fromCodePoint(parseInt(unicode, 16));
           return {
             code: emoji,
@@ -565,7 +565,7 @@ function autolink(options) {
   });
 }
 const defaultAttributes = {
-  class: "d-link d-c-text d-d-inline-block",
+  class: "d-link d-c-text d-d-inline-block d-wb-break-all",
   rel: "noopener noreferrer nofollow"
 };
 const Link = Mark.create({
@@ -619,6 +619,30 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   });
 }
 const MentionComponent = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+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);
@@ -647,7 +671,38 @@ const MentionPlugin = Mention.extend({
     return `@${node.attrs.id}`;
   },
   renderHTML({ HTMLAttributes }) {
-    return ["mention-component", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    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());
+        }
+      })
+    ];
+  }
+}).configure({
+  suggestion: {
+    char: "@",
+    pluginKey: new PluginKey("mentionSuggestion")
   }
 });
 const _sfc_main$3 = {
@@ -679,8 +734,34 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   });
 }
 const ChannelComponent = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+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);
   },
@@ -708,7 +789,33 @@ const ChannelPlugin = Mention.extend({
     return `#${node.attrs.id}`;
   },
   renderHTML({ HTMLAttributes }) {
-    return ["channel-component", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    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());
+        }
+      })
+    ];
   }
 }).configure({
   suggestion: {
@@ -1098,7 +1205,7 @@ const _sfc_main = {
     "input",
     /**
      * Event to sync the value with the parent
-     * @event input
+     * @event update:value
      * @type {String|JSON}
      */
     "update:modelValue",
@@ -1118,7 +1225,8 @@ const _sfc_main = {
   data() {
     return {
       editor: null,
-      popoverOpened: false
+      popoverOpened: false,
+      internalValue: this.modelValue
     };
   },
   computed: {
@@ -1235,7 +1343,8 @@ const _sfc_main = {
       if (newValue === currentValue) {
         return;
       }
-      this.editor.commands.setContent(newValue, false);
+      this.internalValue = newValue;
+      this.insertContent();
     }
   },
   created() {
@@ -1248,7 +1357,6 @@ const _sfc_main = {
     createEditor() {
       this.editor = new Editor({
         autofocus: this.autoFocus,
-        content: this.modelValue,
         editable: this.editable,
         extensions: this.extensions,
         editorProps: {
@@ -1258,8 +1366,62 @@ 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 = [...this.modelValue.matchAll(emojiRegex()), ...this.modelValue.matchAll(emojiShortCodeRegex)];
+      if (!matches)
+        return;
+      matches.forEach((match) => {
+        const emoji = codeToEmojiData(match[0]);
+        if (!emoji)
+          return;
+        this.internalValue = this.internalValue.replace(new RegExp(` ${match[0]}`), ` <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();
     },