@dialpad/dialtone-vue 3.126.0 → 3.128.0

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, 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";
@@ -42,7 +41,7 @@ import "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
 import "../chunks/stack_constants-HraCekPm.js";
 import "../common/constants.js";
-import "../chunks/link_constants-nWVlXQBs.js";
+import "../chunks/link_constants-AfTWrr-n.js";
 import "./presence.js";
 const _sfc_main$9 = {
   name: "EmojiComponent",
@@ -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 {
@@ -575,8 +567,8 @@ const defaultAttributes = {
   class: "d-link d-c-text d-d-inline-block d-wb-break-all",
   rel: "noopener noreferrer nofollow"
 };
-const Link = Mark.create({
-  name: "Link",
+const CustomLink = Mark.create({
+  name: "CustomLink",
   renderHTML({ HTMLAttributes }) {
     return [
       "a",
@@ -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);
       }
@@ -1319,12 +1209,29 @@ const _sfc_main = {
       default: ""
     },
     /**
-     * Enables the Link extension and optionally passes configurations to it
+     * Enables the TipTap Link extension and optionally passes configurations to it
+     *
+     * It is not recommended to use this and the custom link extension at the same time.
      */
     link: {
       type: [Boolean, Object],
       default: false
     },
+    /**
+     * Enables the Custom Link extension and optionally passes configurations to it
+     *
+     * It is not recommended to use this and the built in TipTap link extension at the same time.
+     *
+     * The custom link does some additional things on top of the built in TipTap link
+     * extension such as styling phone numbers and IP adresses as links, and allows you
+     * to linkify text without having to type a space after the link. Currently it is missing some
+     * functionality such as editing links and will likely require more work to be fully usable,
+     * so it is recommended to use the built in TipTap link for now.
+     */
+    customLink: {
+      type: [Boolean, Object],
+      default: false
+    },
     /**
      * suggestion object containing the items query function.
      * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
@@ -1413,6 +1320,13 @@ const _sfc_main = {
     allowUnderline: {
       type: Boolean,
       default: true
+    },
+    /**
+     * Whether the input allows codeblock to be introduced in the text.
+     */
+    allowCodeblock: {
+      type: Boolean,
+      default: true
     }
   },
   emits: [
@@ -1460,7 +1374,16 @@ const _sfc_main = {
     extensions() {
       const extensions = [Document, Paragraph, Text];
       if (this.link) {
-        extensions.push(this.getExtension(Link, this.link));
+        extensions.push(TipTapLink.extend({ inclusive: false }).configure({
+          HTMLAttributes: {
+            class: "d-link d-wb-break-all"
+          },
+          autolink: true,
+          protocols: RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS
+        }));
+      }
+      if (this.customLink) {
+        extensions.push(this.getExtension(CustomLink, this.customLink));
       }
       if (this.allowBlockquote) {
         extensions.push(Blockquote);
@@ -1471,9 +1394,7 @@ const _sfc_main = {
       if (this.allowBulletList) {
         extensions.push(BulletList);
         extensions.push(ListItem);
-        extensions.push(OrderedList.configure({
-          itemTypeName: "listItem"
-        }));
+        extensions.push(OrderedList);
       }
       if (this.allowItalic) {
         extensions.push(Italic);
@@ -1484,10 +1405,13 @@ const _sfc_main = {
       if (this.allowUnderline) {
         extensions.push(Underline);
       }
-      extensions.push(
-        Placeholder.configure({ placeholder: this.placeholder })
-      );
+      if (this.placeholder) {
+        extensions.push(
+          Placeholder.configure({ placeholder: this.placeholder })
+        );
+      }
       if (!this.allowLineBreaks) {
+        const self = this;
         extensions.push(
           HardBreak.extend({
             addKeyboardShortcuts() {
@@ -1495,6 +1419,7 @@ const _sfc_main = {
                 Enter: () => true,
                 "Shift-Enter": () => this.editor.commands.first(({ commands }) => [
                   () => commands.newlineInCode(),
+                  () => self.allowBulletList && commands.splitListItem("listItem"),
                   () => commands.createParagraphNear(),
                   () => commands.liftEmptyBlock(),
                   () => commands.splitBlock()
@@ -1504,10 +1429,6 @@ const _sfc_main = {
           })
         );
       }
-      extensions.push(TipTapLink.extend({ inclusive: false }).configure({
-        autolink: true,
-        protocols: RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS
-      }));
       if (this.mentionSuggestion) {
         const suggestionObject = { ...this.mentionSuggestion, ...mentionSuggestion };
         extensions.push(MentionPlugin.configure({ suggestion: suggestionObject }));
@@ -1525,11 +1446,13 @@ const _sfc_main = {
         types: ["paragraph"],
         defaultAlignment: "left"
       }));
-      extensions.push(CodeBlock.configure({
-        HTMLAttributes: {
-          class: "dt-rich-text-editor--code-block"
-        }
-      }));
+      if (this.allowCodeblock) {
+        extensions.push(CodeBlock.configure({
+          HTMLAttributes: {
+            class: "dt-rich-text-editor--code-block"
+          }
+        }));
+      }
       return extensions;
     },
     inputAttrs() {
@@ -1573,8 +1496,7 @@ const _sfc_main = {
       if (newValue === currentValue) {
         return;
       }
-      this.internalValue = newValue;
-      this.insertContent();
+      this.editor.commands.setContent(newValue, false);
     }
   },
   created() {
@@ -1590,6 +1512,7 @@ const _sfc_main = {
     createEditor() {
       this.editor = new Editor({
         autofocus: this.autoFocus,
+        content: this.modelValue,
         editable: this.editable,
         extensions: this.extensions,
         editorProps: {
@@ -1599,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();
     },