@dialpad/dialtone 9.31.1 → 9.33.0

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

@@ -18,7 +18,7 @@ import TextAlign from "@tiptap/extension-text-align";
 import { Node, mergeAttributes, nodeInputRule, nodePasteRule, getMarksBetween, combineTransactionSteps, getChangedRanges, findChildrenInRange, Mark } from "@tiptap/core";
 import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.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";
@@ -31,10 +31,10 @@ import { DtLink } from "./link.js";
 import { DtAvatar } from "./avatar.js";
 import DtIconHash from "@dialpad/dialtone-icons/vue2/hash";
 import DtIconLock from "@dialpad/dialtone-icons/vue2/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 "emoji-toolkit/emoji_strategy.json";
 import "../chunks/list_item_constants-u1xcN9Dd.js";
 import "./item-layout.js";
@@ -45,7 +45,7 @@ import "../common/constants.js";
 import "vue";
 import "../chunks/link_constants-nWVlXQBs.js";
 import "./presence.js";
-const _sfc_main$7 = {
+const _sfc_main$9 = {
   name: "EmojiComponent",
   components: {
     NodeViewWrapper,
@@ -53,23 +53,23 @@ const _sfc_main$7 = {
   },
   props: nodeViewProps
 };
-var _sfc_render$7 = function render() {
+var _sfc_render$9 = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("node-view-wrapper", { staticClass: "d-d-inline-block d-va-bottom d-lh0" }, [_c("dt-emoji", { attrs: { "size": "500", "code": _vm.node.attrs.code } })], 1);
 };
-var _sfc_staticRenderFns$7 = [];
-var __component__$7 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$7,
-  _sfc_render$7,
-  _sfc_staticRenderFns$7,
+var _sfc_staticRenderFns$9 = [];
+var __component__$9 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$9,
+  _sfc_render$9,
+  _sfc_staticRenderFns$9,
   false,
   null,
   null,
   null,
   null
 );
-const EmojiComponent = __component__$7.exports;
-const _sfc_main$6 = {
+const EmojiComponent = __component__$9.exports;
+const _sfc_main$8 = {
   name: "SuggestionList",
   components: {
     DtListItem
@@ -152,11 +152,14 @@ const _sfc_main$6 = {
         case "channel":
           this.command({ name: item.name, id: item.id });
           break;
+        case "slash-command":
+          this.command({ command: item.command });
+          break;
       }
     }
   }
 };
-var _sfc_render$6 = function render2() {
+var _sfc_render$8 = function render2() {
   var _vm = this, _c = _vm._self._c;
   return _c("div", { staticClass: "d-popover__dialog" }, [_c("ul", { directives: [{ name: "show", rawName: "v-show", value: _vm.items.length, expression: "items.length" }], ref: "suggestionList", staticClass: "dt-suggestion-list" }, _vm._l(_vm.items, function(item, index) {
     return _c("dt-list-item", { key: item.id, class: [
@@ -171,19 +174,19 @@ var _sfc_render$6 = function render2() {
     } } }, [_c(_vm.itemComponent, { tag: "component", attrs: { "item": item } })], 1);
   }), 1)]);
 };
-var _sfc_staticRenderFns$6 = [];
-var __component__$6 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$6,
-  _sfc_render$6,
-  _sfc_staticRenderFns$6,
+var _sfc_staticRenderFns$8 = [];
+var __component__$8 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$8,
+  _sfc_render$8,
+  _sfc_staticRenderFns$8,
   false,
   null,
   null,
   null,
   null
 );
-const SuggestionList = __component__$6.exports;
-const _sfc_main$5 = {
+const SuggestionList = __component__$8.exports;
+const _sfc_main$7 = {
   name: "EmojiSuggestion",
   components: {
     DtEmoji,
@@ -196,22 +199,22 @@ const _sfc_main$5 = {
     }
   }
 };
-var _sfc_render$5 = function render3() {
+var _sfc_render$7 = function render3() {
   var _vm = this, _c = _vm._self._c;
   return _c("dt-stack", { attrs: { "direction": "row", "gap": "400" } }, [_c("dt-emoji", { attrs: { "size": "200", "code": _vm.item.code } }), _vm._v(" " + _vm._s(_vm.item.code) + " ")], 1);
 };
-var _sfc_staticRenderFns$5 = [];
-var __component__$5 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$5,
-  _sfc_render$5,
-  _sfc_staticRenderFns$5,
+var _sfc_staticRenderFns$7 = [];
+var __component__$7 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$7,
+  _sfc_render$7,
+  _sfc_staticRenderFns$7,
   false,
   null,
   null,
   null,
   null
 );
-const EmojiSuggestion = __component__$5.exports;
+const EmojiSuggestion = __component__$7.exports;
 const suggestionOptions = {
   items: ({ query }) => {
     if (query.length < 2) {
@@ -302,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) => {
@@ -315,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],
@@ -384,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,
@@ -587,7 +590,7 @@ const Link = Mark.create({
     ];
   }
 });
-const _sfc_main$4 = {
+const _sfc_main$6 = {
   name: "MentionComponent",
   components: {
     NodeViewWrapper,
@@ -600,23 +603,50 @@ const _sfc_main$4 = {
     }
   }
 };
-var _sfc_render$4 = function render4() {
+var _sfc_render$6 = function render4() {
   var _vm = this, _c = _vm._self._c;
   return _c("node-view-wrapper", { staticClass: "d-d-inline-block" }, [_c("dt-link", { attrs: { "kind": "mention" } }, [_vm._v(" " + _vm._s(_vm.text) + " ")])], 1);
 };
-var _sfc_staticRenderFns$4 = [];
-var __component__$4 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$4,
-  _sfc_render$4,
-  _sfc_staticRenderFns$4,
+var _sfc_staticRenderFns$6 = [];
+var __component__$6 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$6,
+  _sfc_render$6,
+  _sfc_staticRenderFns$6,
   false,
   null,
   null,
   null,
   null
 );
-const MentionComponent = __component__$4.exports;
+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 VueNodeViewRenderer(MentionComponent);
   },
@@ -644,10 +674,41 @@ 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 = {
+const _sfc_main$5 = {
   name: "ChannelComponent",
   components: {
     NodeViewWrapper,
@@ -660,24 +721,50 @@ const _sfc_main$3 = {
     }
   }
 };
-var _sfc_render$3 = function render5() {
+var _sfc_render$5 = function render5() {
   var _vm = this, _c = _vm._self._c;
   return _c("node-view-wrapper", { staticClass: "d-d-inline-block" }, [_c("dt-link", { attrs: { "kind": "mention" } }, [_vm._v(" " + _vm._s(_vm.text) + " ")])], 1);
 };
-var _sfc_staticRenderFns$3 = [];
-var __component__$3 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$3,
-  _sfc_render$3,
-  _sfc_staticRenderFns$3,
+var _sfc_staticRenderFns$5 = [];
+var __component__$5 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$5,
+  _sfc_render$5,
+  _sfc_staticRenderFns$5,
   false,
   null,
   null,
   null,
   null
 );
-const ChannelComponent = __component__$3.exports;
+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 VueNodeViewRenderer(ChannelComponent);
   },
@@ -705,7 +792,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: {
@@ -713,6 +826,118 @@ 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);
+  }
+};
+var _sfc_render$4 = function render6() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("node-view-wrapper", { staticClass: "d-d-inline-block" }, [_vm._v(" " + _vm._s(_vm.text) + " ")]);
+};
+var _sfc_staticRenderFns$4 = [];
+var __component__$4 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$4,
+  _sfc_render$4,
+  _sfc_staticRenderFns$4,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const SlashCommandComponent = __component__$4.exports;
+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: ""
+      },
+      paramentersExample: {
+        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",
@@ -731,7 +956,7 @@ const RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS = [
   "sftp",
   "mailto"
 ];
-const _sfc_main$2 = {
+const _sfc_main$3 = {
   name: "MentionSuggestion",
   components: {
     DtAvatar,
@@ -752,22 +977,22 @@ const _sfc_main$2 = {
     }
   }
 };
-var _sfc_render$2 = function render6() {
+var _sfc_render$3 = function render7() {
   var _vm = this, _c = _vm._self._c;
   return _c("dt-stack", { attrs: { "direction": "row", "gap": "400" } }, [_c("dt-avatar", { attrs: { "full-name": _vm.name, "image-src": _vm.avatarSrc, "image-alt": _vm.name, "size": "xs" } }), _vm._v(" " + _vm._s(_vm.name) + " ")], 1);
 };
-var _sfc_staticRenderFns$2 = [];
-var __component__$2 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$2,
-  _sfc_render$2,
-  _sfc_staticRenderFns$2,
+var _sfc_staticRenderFns$3 = [];
+var __component__$3 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
   false,
   null,
   null,
   null,
   null
 );
-const MentionSuggestion = __component__$2.exports;
+const MentionSuggestion = __component__$3.exports;
 const mentionSuggestion = {
   // This function comes from the user and passed to the editor directly.
   // This will also activate the mention plugin on the editor
@@ -823,7 +1048,7 @@ const mentionSuggestion = {
     };
   }
 };
-const _sfc_main$1 = {
+const _sfc_main$2 = {
   name: "ChannelSuggestion",
   components: {
     DtStack,
@@ -842,10 +1067,101 @@ const _sfc_main$1 = {
     }
   }
 };
-var _sfc_render$1 = function render7() {
+var _sfc_render$2 = function render8() {
   var _vm = this, _c = _vm._self._c;
   return _c("dt-stack", { attrs: { "direction": "row", "gap": "400" } }, [!_vm.item.locked ? _c("dt-icon-hash", { attrs: { "size": "300" } }) : _c("dt-icon-lock", { attrs: { "size": "300" } }), _c("span", [_vm._v(_vm._s(_vm.name))])], 1);
 };
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const ChannelSuggestion = __component__$2.exports;
+const channelSuggestion = {
+  // 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,
+  render: () => {
+    let component;
+    let popup;
+    return {
+      onStart: (props) => {
+        component = new VueRenderer(SuggestionList, {
+          parent: void 0,
+          propsData: {
+            itemComponent: ChannelSuggestion,
+            itemType: "channel",
+            ...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$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;
+    }
+  }
+};
+var _sfc_render$1 = function render9() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", [_c("div", { staticClass: "d-body--md-compact" }, [_c("span", [_vm._v("/" + _vm._s(_vm.command))]), _vm.parametersExample ? _c("span", [_vm._v(" " + _vm._s(_vm.parametersExample))]) : _vm._e()]), _c("div", { staticClass: "d-body--sm" }, [_vm._v(" " + _vm._s(_vm.description) + " ")])]);
+};
 var _sfc_staticRenderFns$1 = [];
 var __component__$1 = /* @__PURE__ */ normalizeComponent(
   _sfc_main$1,
@@ -857,12 +1173,13 @@ var __component__$1 = /* @__PURE__ */ normalizeComponent(
   null,
   null
 );
-const ChannelSuggestion = __component__$1.exports;
-const channelSuggestion = {
+const SlashCommandSuggestion = __component__$1.exports;
+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;
@@ -871,8 +1188,8 @@ const channelSuggestion = {
         component = new VueRenderer(SuggestionList, {
           parent: void 0,
           propsData: {
-            itemComponent: ChannelSuggestion,
-            itemType: "channel",
+            itemComponent: SlashCommandSuggestion,
+            itemType: "slash-command",
             ...props
           },
           editor: props.editor
@@ -1035,6 +1352,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.
      */
@@ -1087,7 +1421,7 @@ const _sfc_main = {
     "input",
     /**
      * Event to sync the value with the parent
-     * @event input
+     * @event update:value
      * @type {String|JSON}
      */
     "update:value",
@@ -1107,7 +1441,8 @@ const _sfc_main = {
   data() {
     return {
       editor: null,
-      popoverOpened: false
+      popoverOpened: false,
+      internalValue: this.value
     };
   },
   computed: {
@@ -1171,6 +1506,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"],
@@ -1224,7 +1563,8 @@ const _sfc_main = {
       if (newValue === currentValue) {
         return;
       }
-      this.editor.commands.setContent(newValue, false);
+      this.internalValue = newValue;
+      this.insertContent();
     }
   },
   created() {
@@ -1234,10 +1574,12 @@ const _sfc_main = {
     this.destroyEditor();
   },
   methods: {
+    onSelectedCommand(command) {
+      this.$emit("selected-command", command);
+    },
     createEditor() {
       this.editor = new Editor({
         autofocus: this.autoFocus,
-        content: this.value,
         editable: this.editable,
         extensions: this.extensions,
         editorProps: {
@@ -1247,8 +1589,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.value.matchAll(emojiRegex()), ...this.value.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.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();
     },
@@ -1295,9 +1691,9 @@ const _sfc_main = {
     }
   }
 };
-var _sfc_render = function render8() {
+var _sfc_render = function render10() {
   var _vm = this, _c = _vm._self._c;
-  return _c("editor-content", { staticClass: "dt-rich-text-editor", attrs: { "editor": _vm.editor, "data-qa": "dt-rich-text-editor" } });
+  return _c("editor-content", { staticClass: "dt-rich-text-editor", attrs: { "editor": _vm.editor, "data-qa": "dt-rich-text-editor" }, on: { "selected-command": _vm.onSelectedCommand } });
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(