@dialpad/dialtone 9.34.4 → 9.34.5

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

@@ -46,7 +46,7 @@ require("../chunks/stack_constants-SMzMWnAQ.js");
 require("../common/constants.cjs");
 require("../chunks/link_constants-Huj7D_hm.js");
 require("./presence.cjs");
-const _sfc_main$7 = {
+const _sfc_main$9 = {
   name: "EmojiComponent",
   components: {
     NodeViewWrapper: vue3.NodeViewWrapper,
@@ -54,7 +54,7 @@ const _sfc_main$7 = {
   },
   props: vue3.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 = vue.resolveComponent("dt-emoji");
   const _component_node_view_wrapper = vue.resolveComponent("node-view-wrapper");
   return vue.openBlock(), vue.createBlock(_component_node_view_wrapper, { class: "d-d-inline-block d-va-bottom d-lh0" }, {
@@ -67,8 +67,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const EmojiComponent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
-const _sfc_main$6 = {
+const EmojiComponent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
+const _sfc_main$8 = {
   name: "SuggestionList",
   components: {
     DtListItem: lib_listItem.DtListItem
@@ -151,19 +151,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 = vue.resolveComponent("dt-list-item");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-    vue.withDirectives(vue.createElementVNode("ul", _hoisted_2, [
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+    vue.withDirectives(vue.createElementVNode("ul", _hoisted_2$1, [
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.items, (item, index) => {
         return vue.openBlock(), vue.createBlock(_component_dt_list_item, {
           key: item.id,
@@ -186,8 +189,8 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const SuggestionList = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
-const _sfc_main$5 = {
+const SuggestionList = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
+const _sfc_main$7 = {
   name: "EmojiSuggestion",
   components: {
     DtEmoji: lib_emoji.DtEmoji,
@@ -200,7 +203,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 = vue.resolveComponent("dt-emoji");
   const _component_dt_stack = vue.resolveComponent("dt-stack");
   return vue.openBlock(), vue.createBlock(_component_dt_stack, {
@@ -217,7 +220,7 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const EmojiSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
+const EmojiSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
 const suggestionOptions = {
   items: ({ query }) => {
     if (query.length < 2) {
@@ -306,21 +309,21 @@ const suggestionOptions = {
   }
 };
 const EmojiPluginKey = new state.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 && common_emoji.codeToEmojiData(match[0])) {
+    const text = match[2] || match[0];
     return {
       index: match.index,
-      text: match[0],
+      text,
       match
     };
   }
 };
 const shortCodePasteMatch = (text) => {
-  const matches = [...text.matchAll(emojiShortCodeRegex)];
+  const matches = [...text.matchAll(common_emoji.emojiShortCodeRegex)];
   return matches.filter((match) => common_emoji.codeToEmojiData(match[0])).map((match) => ({
     index: match.index,
     text: match[0],
@@ -373,6 +376,8 @@ const Emoji = core.Node.create({
       core.nodeInputRule({
         find: (text) => {
           const match = text.match(inputShortCodeRegex);
+          if (!match)
+            return;
           return inputRuleMatch(match);
         },
         type: this.type,
@@ -385,6 +390,8 @@ const Emoji = core.Node.create({
       core.nodeInputRule({
         find: (text) => {
           const match = text.match(inputUnicodeRegex);
+          if (!match)
+            return;
           return inputRuleMatch(match);
         },
         type: this.type,
@@ -592,7 +599,7 @@ const Link = core.Mark.create({
     ];
   }
 });
-const _sfc_main$4 = {
+const _sfc_main$6 = {
   name: "MentionComponent",
   components: {
     NodeViewWrapper: vue3.NodeViewWrapper,
@@ -605,7 +612,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 = vue.resolveComponent("dt-link");
   const _component_node_view_wrapper = vue.resolveComponent("node-view-wrapper");
   return vue.openBlock(), vue.createBlock(_component_node_view_wrapper, { class: "d-d-inline-block" }, {
@@ -620,7 +627,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const MentionComponent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const MentionComponent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
 const mentionRegex = /@([\w.-]+)[^\w.-]?/g;
 const mentionPasteMatch = (text, suggestions) => {
   const matches = [...text.matchAll(mentionRegex)];
@@ -707,7 +714,7 @@ const MentionPlugin = Mention.extend({
     pluginKey: new state.PluginKey("mentionSuggestion")
   }
 });
-const _sfc_main$3 = {
+const _sfc_main$5 = {
   name: "ChannelComponent",
   components: {
     NodeViewWrapper: vue3.NodeViewWrapper,
@@ -720,7 +727,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 = vue.resolveComponent("dt-link");
   const _component_node_view_wrapper = vue.resolveComponent("node-view-wrapper");
   return vue.openBlock(), vue.createBlock(_component_node_view_wrapper, { class: "d-d-inline-block" }, {
@@ -735,7 +742,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const ChannelComponent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const ChannelComponent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
 const channelRegex = /#([\w-]+)[^\w-]?/g;
 const channelPasteMatch = (text, suggestions) => {
   const matches = [...text.matchAll(channelRegex)];
@@ -825,6 +832,112 @@ const ChannelPlugin = Mention.extend({
     pluginKey: new state.PluginKey("channelSuggestion")
   }
 });
+const _sfc_main$4 = {
+  name: "SlashCommandsComponent",
+  components: {
+    NodeViewWrapper: vue3.NodeViewWrapper
+  },
+  props: vue3.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 = vue.resolveComponent("node-view-wrapper");
+  return vue.openBlock(), vue.createBlock(_component_node_view_wrapper, { class: "d-d-inline-block" }, {
+    default: vue.withCtx(() => [
+      vue.createTextVNode(vue.toDisplayString($options.text), 1)
+    ]),
+    _: 1
+  });
+}
+const SlashCommandComponent = /* @__PURE__ */ _pluginVue_exportHelper._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 vue3.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", core.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 [
+      core.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 [
+      core.nodePasteRule({
+        find: (text) => slashCommandPasteMatch(text, slashCommandRegex),
+        type: this.type,
+        getAttributes(attrs) {
+          return { command: attrs[0].trim() };
+        }
+      })
+    ];
+  }
+}).configure({
+  suggestion: {
+    char: "/",
+    pluginKey: new state.PluginKey("slashCommandSuggestion")
+  }
+});
 const RICH_TEXT_EDITOR_OUTPUT_FORMATS = [
   "text",
   "json",
@@ -843,7 +956,7 @@ const RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS = [
   "sftp",
   "mailto"
 ];
-const _sfc_main$2 = {
+const _sfc_main$3 = {
   name: "MentionSuggestion",
   components: {
     DtAvatar: lib_avatar.DtAvatar,
@@ -864,7 +977,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 = vue.resolveComponent("dt-avatar");
   const _component_dt_stack = vue.resolveComponent("dt-stack");
   return vue.openBlock(), vue.createBlock(_component_dt_stack, {
@@ -883,7 +996,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const MentionSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const MentionSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._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
@@ -938,7 +1051,7 @@ const mentionSuggestion = {
     };
   }
 };
-const _sfc_main$1 = {
+const _sfc_main$2 = {
   name: "ChannelSuggestion",
   components: {
     DtStack: lib_stack.DtStack,
@@ -957,7 +1070,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 = vue.resolveComponent("dt-icon-hash");
   const _component_dt_icon_lock = vue.resolveComponent("dt-icon-lock");
   const _component_dt_stack = vue.resolveComponent("dt-stack");
@@ -978,7 +1091,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const ChannelSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const ChannelSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._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
@@ -1033,6 +1146,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 vue.openBlock(), vue.createElementBlock("div", null, [
+    vue.createElementVNode("div", _hoisted_1, [
+      vue.createElementVNode("span", null, "/" + vue.toDisplayString($options.command), 1),
+      $options.parametersExample ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString($options.parametersExample), 1)) : vue.createCommentVNode("", true)
+    ]),
+    vue.createElementVNode("div", _hoisted_3, vue.toDisplayString($options.description), 1)
+  ]);
+}
+const SlashCommandSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._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 vue3.VueRenderer(SuggestionList, {
+          parent: void 0,
+          props: {
+            itemComponent: vue.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: {
@@ -1155,6 +1357,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.
      */
@@ -1222,7 +1441,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 {
@@ -1292,6 +1518,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"],
@@ -1356,6 +1586,9 @@ const _sfc_main = {
     this.destroyEditor();
   },
   methods: {
+    onSelectedCommand(command) {
+      this.$emit("selected-command", command);
+    },
     createEditor() {
       this.editor = new vue3.Editor({
         autofocus: this.autoFocus,
@@ -1384,14 +1617,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(common_emoji.emojiShortCodeRegex)].map((match) => match[0].trim())
+      );
       if (!matches)
         return;
       matches.forEach((match) => {
-        const emoji = common_emoji.codeToEmojiData(match[0]);
+        const emoji = common_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() {
@@ -1475,8 +1710,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.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__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtRichTextEditor = DtRichTextEditor;