@dialpad/dialtone-vue 2.133.0 → 2.135.0

package/dist/lib/rich-text-editor.cjs

@@ -20,7 +20,7 @@ const TextAlign = require("@tiptap/extension-text-align");
 const core = require("@tiptap/core");
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
 const lib_emoji = require("./emoji.cjs");
-const common_emoji = require("../common/emoji.cjs");
+const common_emoji = require("../chunks/index-anN_sx1F.js");
 const state = require("@tiptap/pm/state");
 const Suggestion = require("@tiptap/suggestion");
 const dialtoneEmojis = require("@dialpad/dialtone-emojis");
@@ -33,7 +33,6 @@ const lib_link = require("./link.cjs");
 const lib_avatar = require("./avatar.cjs");
 const DtIconHash = require("@dialpad/dialtone-icons/vue2/hash");
 const DtIconLock = require("@dialpad/dialtone-icons/vue2/lock");
-const emojiRegex = require("emoji-regex");
 require("./skeleton.cjs");
 require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
@@ -45,7 +44,7 @@ require("@dialpad/dialtone-icons/vue2");
 require("../chunks/stack_constants-SMzMWnAQ.js");
 require("../common/constants.cjs");
 require("vue");
-require("../chunks/link_constants-Huj7D_hm.js");
+require("../chunks/link_constants-x8NwdqmA.js");
 require("./presence.cjs");
 const _sfc_main$9 = {
   name: "EmojiComponent",
@@ -230,7 +229,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 }) => {
@@ -277,7 +276,6 @@ const suggestionOptions = {
           interactive: true,
           trigger: "manual",
           placement: "top-start",
-          contentElement: null,
           zIndex: 650
         });
       },
@@ -307,8 +305,7 @@ const suggestionOptions = {
 };
 const EmojiPluginKey = new state.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(common_emoji.emojiPattern + "$");
 const inputRuleMatch = (match) => {
   if (match && common_emoji.codeToEmojiData(match[0])) {
     const text = match[2] || match[0];
@@ -348,9 +345,6 @@ const Emoji = core.Node.create({
     return {
       code: {
         default: null
-      },
-      id: {
-        default: null
       }
     };
   },
@@ -393,11 +387,9 @@ const Emoji = core.Node.create({
         },
         type: this.type,
         getAttributes(attrs) {
-          const unicode = common_emoji.codeToEmojiData(attrs[0]).unicode_output;
-          const emoji = String.fromCodePoint(parseInt(unicode, 16));
+          const emoji = common_emoji.codeToEmojiData(attrs[0]).shortname;
           return {
-            code: emoji,
-            label: "emoji"
+            code: emoji
           };
         }
       })
@@ -415,7 +407,7 @@ const Emoji = core.Node.create({
         }
       }),
       core.nodePasteRule({
-        find: pasteUnicodeRegex,
+        find: common_emoji.emojiRegex,
         type: this.type,
         getAttributes(attrs) {
           return {
@@ -574,8 +566,8 @@ const defaultAttributes = {
   class: "d-link d-c-text d-d-inline-block d-wb-break-all",
   rel: "noopener noreferrer nofollow"
 };
-const Link = core.Mark.create({
-  name: "Link",
+const CustomLink = core.Mark.create({
+  name: "CustomLink",
   renderHTML({ HTMLAttributes }) {
     return [
       "a",
@@ -625,34 +617,7 @@ var __component__$6 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   null
 );
 const MentionComponent = __component__$6.exports;
-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({
-  name: "mention",
-  group: "inline",
-  inline: true,
   addNodeView() {
     return vue2.VueNodeViewRenderer(MentionComponent);
   },
@@ -680,33 +645,7 @@ const MentionPlugin = Mention.extend({
     return `@${node.attrs.id}`;
   },
   renderHTML({ HTMLAttributes }) {
-    return ["mention-component", core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
-  },
-  addInputRules() {
-    var _a;
-    const suggestions = (_a = this.options.suggestion) == null ? void 0 : _a.items({ query: "" });
-    return [
-      core.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 [
-      core.nodePasteRule({
-        find: (text) => mentionPasteMatch(text, suggestions),
-        type: this.type,
-        getAttributes(attrs) {
-          return suggestions.find(({ id }) => id === attrs[0].trim());
-        }
-      })
-    ];
+    return ["mention-component", core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
   }
 }).configure({
   suggestion: {
@@ -743,34 +682,8 @@ var __component__$5 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   null
 );
 const ChannelComponent = __component__$5.exports;
-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 vue2.VueNodeViewRenderer(ChannelComponent);
   },
@@ -798,33 +711,7 @@ const ChannelPlugin = Mention.extend({
     return `#${node.attrs.id}`;
   },
   renderHTML({ HTMLAttributes }) {
-    return ["channel-component", core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
-  },
-  addInputRules() {
-    var _a;
-    const suggestions = (_a = this.options.suggestion) == null ? void 0 : _a.items({ query: "" });
-    return [
-      core.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 [
-      core.nodePasteRule({
-        find: (text) => channelPasteMatch(text, suggestions),
-        type: this.type,
-        getAttributes(attrs) {
-          return suggestions.find(({ id }) => id === attrs[0].trim());
-        }
-      })
-    ];
+    return ["channel-component", core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
   }
 }).configure({
   suggestion: {
@@ -1309,7 +1196,7 @@ const _sfc_main = {
      */
     outputFormat: {
       type: String,
-      default: "text",
+      default: "html",
       validator(outputFormat) {
         return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);
       }
@@ -1322,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
@@ -1416,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: [
@@ -1463,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);
@@ -1474,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);
@@ -1487,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() {
@@ -1498,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()
@@ -1507,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 }));
@@ -1528,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() {
@@ -1576,8 +1496,7 @@ const _sfc_main = {
       if (newValue === currentValue) {
         return;
       }
-      this.internalValue = newValue;
-      this.insertContent();
+      this.editor.commands.setContent(newValue, false);
     }
   },
   created() {
@@ -1593,6 +1512,7 @@ const _sfc_main = {
     createEditor() {
       this.editor = new vue2.Editor({
         autofocus: this.autoFocus,
+        content: this.value,
         editable: this.editable,
         extensions: this.extensions,
         editorProps: {
@@ -1602,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.value.matchAll(emojiRegex()), ...this.value.matchAll(common_emoji.emojiShortCodeRegex)].map((match) => match[0].trim())
-      );
-      if (!matches)
-        return;
-      matches.forEach((match) => {
-        const emoji = common_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.value.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.value.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();
     },