@dialpad/dialtone 9.34.4 → 9.34.6

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

@@ -16,10 +16,10 @@ import Underline from "@tiptap/extension-underline";
 import Text from "@tiptap/extension-text";
 import TextAlign from "@tiptap/extension-text-align";
 import { Node, mergeAttributes, nodeInputRule, nodePasteRule, getMarksBetween, combineTransactionSteps, getChangedRanges, findChildrenInRange, Mark } from "@tiptap/core";
-import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementBlock, withDirectives, createElementVNode, Fragment, renderList, normalizeClass, withModifiers, resolveDynamicComponent, vShow, createTextVNode, toDisplayString, markRaw } from "vue";
+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 } from "../common/emoji.js";
+import { codeToEmojiData, emojiShortCodeRegex } from "../common/emoji.js";
 import { PluginKey, Plugin } from "@tiptap/pm/state";
 import Suggestion from "@tiptap/suggestion";
 import { emojisIndexed } from "@dialpad/dialtone-emojis";
@@ -44,7 +44,7 @@ import "../chunks/stack_constants-HraCekPm.js";
 import "../common/constants.js";
 import "../chunks/link_constants-nWVlXQBs.js";
 import "./presence.js";
-const _sfc_main$7 = {
+const _sfc_main$9 = {
   name: "EmojiComponent",
   components: {
     NodeViewWrapper,
@@ -52,7 +52,7 @@ const _sfc_main$7 = {
   },
   props: nodeViewProps
 };
-function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_emoji = resolveComponent("dt-emoji");
   const _component_node_view_wrapper = resolveComponent("node-view-wrapper");
   return openBlock(), createBlock(_component_node_view_wrapper, { class: "d-d-inline-block d-va-bottom d-lh0" }, {
@@ -65,8 +65,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const EmojiComponent = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
-const _sfc_main$6 = {
+const EmojiComponent = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
+const _sfc_main$8 = {
   name: "SuggestionList",
   components: {
     DtListItem
@@ -149,19 +149,22 @@ const _sfc_main$6 = {
         case "channel":
           this.command({ name: item.name, id: item.id });
           break;
+        case "slash-command":
+          this.command({ command: item.command });
+          break;
       }
     }
   }
 };
-const _hoisted_1 = { class: "d-popover__dialog" };
-const _hoisted_2 = {
+const _hoisted_1$1 = { class: "d-popover__dialog" };
+const _hoisted_2$1 = {
   ref: "suggestionList",
   class: "dt-suggestion-list"
 };
-function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_list_item = resolveComponent("dt-list-item");
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    withDirectives(createElementVNode("ul", _hoisted_2, [
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [
+    withDirectives(createElementVNode("ul", _hoisted_2$1, [
       (openBlock(true), createElementBlock(Fragment, null, renderList($props.items, (item, index) => {
         return openBlock(), createBlock(_component_dt_list_item, {
           key: item.id,
@@ -184,8 +187,8 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const SuggestionList = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
-const _sfc_main$5 = {
+const SuggestionList = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
+const _sfc_main$7 = {
   name: "EmojiSuggestion",
   components: {
     DtEmoji,
@@ -198,7 +201,7 @@ const _sfc_main$5 = {
     }
   }
 };
-function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_emoji = resolveComponent("dt-emoji");
   const _component_dt_stack = resolveComponent("dt-stack");
   return openBlock(), createBlock(_component_dt_stack, {
@@ -215,7 +218,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const EmojiSuggestion = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
+const EmojiSuggestion = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
 const suggestionOptions = {
   items: ({ query }) => {
     if (query.length < 2) {
@@ -304,15 +307,15 @@ const suggestionOptions = {
   }
 };
 const EmojiPluginKey = new PluginKey("emoji");
-const inputShortCodeRegex = /:\w+:$/;
-const emojiShortCodeRegex = /:\w+:/g;
+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 inputRuleMatch = (match) => {
   if (match && codeToEmojiData(match[0])) {
+    const text = match[2] || match[0];
     return {
       index: match.index,
-      text: match[0],
+      text,
       match
     };
   }
@@ -371,6 +374,8 @@ const Emoji = Node.create({
       nodeInputRule({
         find: (text) => {
           const match = text.match(inputShortCodeRegex);
+          if (!match)
+            return;
           return inputRuleMatch(match);
         },
         type: this.type,
@@ -383,6 +388,8 @@ const Emoji = Node.create({
       nodeInputRule({
         find: (text) => {
           const match = text.match(inputUnicodeRegex);
+          if (!match)
+            return;
           return inputRuleMatch(match);
         },
         type: this.type,
@@ -590,7 +597,7 @@ const Link = Mark.create({
     ];
   }
 });
-const _sfc_main$4 = {
+const _sfc_main$6 = {
   name: "MentionComponent",
   components: {
     NodeViewWrapper,
@@ -603,7 +610,7 @@ const _sfc_main$4 = {
     }
   }
 };
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_link = resolveComponent("dt-link");
   const _component_node_view_wrapper = resolveComponent("node-view-wrapper");
   return openBlock(), createBlock(_component_node_view_wrapper, { class: "d-d-inline-block" }, {
@@ -618,7 +625,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const MentionComponent = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+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)];
@@ -705,7 +712,7 @@ const MentionPlugin = Mention.extend({
     pluginKey: new PluginKey("mentionSuggestion")
   }
 });
-const _sfc_main$3 = {
+const _sfc_main$5 = {
   name: "ChannelComponent",
   components: {
     NodeViewWrapper,
@@ -718,7 +725,7 @@ const _sfc_main$3 = {
     }
   }
 };
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_link = resolveComponent("dt-link");
   const _component_node_view_wrapper = resolveComponent("node-view-wrapper");
   return openBlock(), createBlock(_component_node_view_wrapper, { class: "d-d-inline-block" }, {
@@ -733,7 +740,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const ChannelComponent = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+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)];
@@ -823,6 +830,112 @@ const ChannelPlugin = Mention.extend({
     pluginKey: new PluginKey("channelSuggestion")
   }
 });
+const _sfc_main$4 = {
+  name: "SlashCommandsComponent",
+  components: {
+    NodeViewWrapper
+  },
+  props: nodeViewProps,
+  emits: ["selected-command"],
+  computed: {
+    text() {
+      return "/" + this.$props.node.attrs.command;
+    }
+  },
+  created() {
+    this.$parent.$emit("selected-command", this.$props.node.attrs.command);
+  }
+};
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_node_view_wrapper = resolveComponent("node-view-wrapper");
+  return openBlock(), createBlock(_component_node_view_wrapper, { class: "d-d-inline-block" }, {
+    default: withCtx(() => [
+      createTextVNode(toDisplayString($options.text), 1)
+    ]),
+    _: 1
+  });
+}
+const SlashCommandComponent = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const slashCommandPasteMatch = (text, slashCommandRegex) => {
+  const matches = [...text.matchAll(slashCommandRegex)];
+  return matches.map((match) => {
+    let slashCommand = match[2];
+    if (!slashCommand.endsWith(" "))
+      slashCommand += " ";
+    return {
+      index: match.index,
+      text: slashCommand,
+      match
+    };
+  });
+};
+const SlashCommandPlugin = Mention.extend({
+  name: "slash-commands",
+  group: "inline",
+  inline: true,
+  addNodeView() {
+    return VueNodeViewRenderer(SlashCommandComponent);
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "command-component"
+      }
+    ];
+  },
+  addAttributes() {
+    return {
+      command: {
+        default: ""
+      },
+      parametersExample: {
+        default: ""
+      },
+      description: {
+        default: ""
+      }
+    };
+  },
+  renderText({ node }) {
+    return `/${node.attrs.command}`;
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["command-component", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+  },
+  addInputRules() {
+    var _a;
+    const suggestions = (_a = this.options.suggestion) == null ? void 0 : _a.items({ query: "" }).map((suggestion) => suggestion.command);
+    const slashCommandRegex = new RegExp(`^((?:\\/)(${suggestions.join("|")})) $`);
+    return [
+      nodeInputRule({
+        find: slashCommandRegex,
+        type: this.type,
+        getAttributes(attrs) {
+          return { command: attrs[2] };
+        }
+      })
+    ];
+  },
+  addPasteRules() {
+    var _a;
+    const suggestions = (_a = this.options.suggestion) == null ? void 0 : _a.items({ query: "" }).map((suggestion) => suggestion.command);
+    const slashCommandRegex = new RegExp(`^((?:\\/)(${suggestions.join("|")})) ?$`, "g");
+    return [
+      nodePasteRule({
+        find: (text) => slashCommandPasteMatch(text, slashCommandRegex),
+        type: this.type,
+        getAttributes(attrs) {
+          return { command: attrs[0].trim() };
+        }
+      })
+    ];
+  }
+}).configure({
+  suggestion: {
+    char: "/",
+    pluginKey: new PluginKey("slashCommandSuggestion")
+  }
+});
 const RICH_TEXT_EDITOR_OUTPUT_FORMATS = [
   "text",
   "json",
@@ -841,7 +954,7 @@ const RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS = [
   "sftp",
   "mailto"
 ];
-const _sfc_main$2 = {
+const _sfc_main$3 = {
   name: "MentionSuggestion",
   components: {
     DtAvatar,
@@ -862,7 +975,7 @@ const _sfc_main$2 = {
     }
   }
 };
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_avatar = resolveComponent("dt-avatar");
   const _component_dt_stack = resolveComponent("dt-stack");
   return openBlock(), createBlock(_component_dt_stack, {
@@ -881,7 +994,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const MentionSuggestion = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const MentionSuggestion = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
 const mentionSuggestion = {
   // This function comes from the user and passed to the editor directly.
   // This will also activate the mention plugin on the editor
@@ -936,7 +1049,7 @@ const mentionSuggestion = {
     };
   }
 };
-const _sfc_main$1 = {
+const _sfc_main$2 = {
   name: "ChannelSuggestion",
   components: {
     DtStack,
@@ -955,7 +1068,7 @@ const _sfc_main$1 = {
     }
   }
 };
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_hash = resolveComponent("dt-icon-hash");
   const _component_dt_icon_lock = resolveComponent("dt-icon-lock");
   const _component_dt_stack = resolveComponent("dt-stack");
@@ -976,7 +1089,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const ChannelSuggestion = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const ChannelSuggestion = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
 const channelSuggestion = {
   // This function comes from the user and passed to the editor directly.
   // This will also activate the mention plugin on the editor
@@ -1031,6 +1144,95 @@ const channelSuggestion = {
     };
   }
 };
+const _sfc_main$1 = {
+  name: "SlashCommandSuggestion",
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    command() {
+      return this.item.command;
+    },
+    description() {
+      return this.item.description;
+    },
+    parametersExample() {
+      return this.item.parametersExample;
+    }
+  }
+};
+const _hoisted_1 = { class: "d-body--md-compact" };
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = { class: "d-body--sm" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", null, [
+    createElementVNode("div", _hoisted_1, [
+      createElementVNode("span", null, "/" + toDisplayString($options.command), 1),
+      $options.parametersExample ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString($options.parametersExample), 1)) : createCommentVNode("", true)
+    ]),
+    createElementVNode("div", _hoisted_3, toDisplayString($options.description), 1)
+  ]);
+}
+const SlashCommandSuggestion = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const slashCommandSuggestion = {
+  // This function comes from the user and passed to the editor directly.
+  // This will also activate the mention plugin on the editor
+  // items: ({ query }) => { return [] },
+  allowSpaces: true,
+  startOfLine: true,
+  render: () => {
+    let component;
+    let popup;
+    return {
+      onStart: (props) => {
+        component = new VueRenderer(SuggestionList, {
+          parent: void 0,
+          props: {
+            itemComponent: markRaw(SlashCommandSuggestion),
+            itemType: "slash-command",
+            ...props
+          },
+          editor: props.editor
+        });
+        if (!props.clientRect) {
+          return;
+        }
+        popup = tippy("body", {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: "manual",
+          placement: "top-start"
+        });
+      },
+      onUpdate(props) {
+        component.updateProps(props);
+        if (!props.clientRect) {
+          return;
+        }
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect
+        });
+      },
+      onKeyDown(props) {
+        if (props.event.key === "Escape") {
+          popup[0].hide();
+          return true;
+        }
+        return component == null ? void 0 : component.ref.onKeyDown(props);
+      },
+      onExit() {
+        popup[0].destroy();
+        component.destroy();
+      }
+    };
+  }
+};
 const _sfc_main = {
   name: "DtRichTextEditor",
   components: {
@@ -1153,6 +1355,23 @@ const _sfc_main = {
       type: Object,
       default: null
     },
+    /**
+     * suggestion object containing the items query function.
+     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
+     *
+     * The only required key is the items function which is used to query the slash commands for suggestion.
+     * items({ query }) => { return [SlashCommandObject]; }
+     * SlashCommandObject format:
+     * { command: string, description: string, parametersExample?: string }
+     * The "parametersExample" parameter is optional, and describes an example
+     * of the parameters that command can take.
+     *
+     * When null, it does not add the plugin.
+     */
+    slashCommandSuggestion: {
+      type: Object,
+      default: null
+    },
     /**
      * Whether the input allows for block quote.
      */
@@ -1220,7 +1439,14 @@ const _sfc_main = {
      * @event focus
      * @type {FocusEvent}
      */
-    "focus"
+    "focus",
+    /**
+     * Fires when a slash command is selected
+     *
+     * @event selected-command
+     * @type {String}
+     */
+    "selected-command"
   ],
   data() {
     return {
@@ -1290,6 +1516,10 @@ const _sfc_main = {
         const suggestionObject = { ...this.channelSuggestion, ...channelSuggestion };
         extensions.push(ChannelPlugin.configure({ suggestion: suggestionObject }));
       }
+      if (this.slashCommandSuggestion) {
+        const suggestionObject = { ...this.slashCommandSuggestion, ...slashCommandSuggestion };
+        extensions.push(SlashCommandPlugin.configure({ suggestion: suggestionObject }));
+      }
       extensions.push(Emoji);
       extensions.push(TextAlign.configure({
         types: ["paragraph"],
@@ -1354,6 +1584,9 @@ const _sfc_main = {
     this.destroyEditor();
   },
   methods: {
+    onSelectedCommand(command) {
+      this.$emit("selected-command", command);
+    },
     createEditor() {
       this.editor = new Editor({
         autofocus: this.autoFocus,
@@ -1382,14 +1615,16 @@ const _sfc_main = {
       this.editor.commands.setContent(this.internalValue, true);
     },
     parseEmojis() {
-      const matches = [...this.modelValue.matchAll(emojiRegex()), ...this.modelValue.matchAll(emojiShortCodeRegex)];
+      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[0]);
+        const emoji = codeToEmojiData(match);
         if (!emoji)
           return;
-        this.internalValue = this.internalValue.replace(new RegExp(` ${match[0]}`), ` <emoji-component code="${emoji.shortname}"></emoji-component>`);
+        this.internalValue = this.internalValue.replace(new RegExp(`${match}`, "g"), `<emoji-component code="${emoji.shortname}"></emoji-component>`);
       });
     },
     parseChannels() {
@@ -1473,8 +1708,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(_component_editor_content, {
     editor: $data.editor,
     "data-qa": "dt-rich-text-editor",
-    class: "dt-rich-text-editor"
-  }, null, 8, ["editor"]);
+    class: "dt-rich-text-editor",
+    onSelectedCommand: $options.onSelectedCommand
+  }, null, 8, ["editor", "onSelectedCommand"]);
 }
 const DtRichTextEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {