@dialpad/dialtone 9.30.1 → 9.32.0

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

@@ -32,6 +32,8 @@ const common_utils = require("../common/utils.cjs");
 const Mention = require("@tiptap/extension-mention");
 const lib_link = require("./link.cjs");
 const lib_avatar = require("./avatar.cjs");
+const DtIconHash = require("@dialpad/dialtone-icons/vue3/hash");
+const DtIconLock = require("@dialpad/dialtone-icons/vue3/lock");
 require("./skeleton.cjs");
 require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
@@ -44,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$5 = {
+const _sfc_main$7 = {
   name: "EmojiComponent",
   components: {
     NodeViewWrapper: vue3.NodeViewWrapper,
@@ -52,7 +54,7 @@ const _sfc_main$5 = {
   },
   props: vue3.nodeViewProps
 };
-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_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" }, {
@@ -65,8 +67,8 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const EmojiComponent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
-const _sfc_main$4 = {
+const EmojiComponent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+const _sfc_main$6 = {
   name: "SuggestionList",
   components: {
     DtListItem: lib_listItem.DtListItem
@@ -146,6 +148,9 @@ const _sfc_main$4 = {
         case "mention":
           this.command({ name: item.name, id: item.id, avatarSrc: item.avatarSrc });
           break;
+        case "channel":
+          this.command({ name: item.name, id: item.id });
+          break;
       }
     }
   }
@@ -155,7 +160,7 @@ const _hoisted_2 = {
   ref: "suggestionList",
   class: "dt-suggestion-list"
 };
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$6(_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, [
@@ -181,8 +186,8 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const SuggestionList = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
-const _sfc_main$3 = {
+const SuggestionList = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
+const _sfc_main$5 = {
   name: "EmojiSuggestion",
   components: {
     DtEmoji: lib_emoji.DtEmoji,
@@ -195,7 +200,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_emoji = vue.resolveComponent("dt-emoji");
   const _component_dt_stack = vue.resolveComponent("dt-stack");
   return vue.openBlock(), vue.createBlock(_component_dt_stack, {
@@ -212,7 +217,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const EmojiSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const EmojiSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
 const suggestionOptions = {
   items: ({ query }) => {
     if (query.length < 2) {
@@ -587,7 +592,7 @@ const Link = core.Mark.create({
     ];
   }
 });
-const _sfc_main$2 = {
+const _sfc_main$4 = {
   name: "MentionComponent",
   components: {
     NodeViewWrapper: vue3.NodeViewWrapper,
@@ -600,7 +605,7 @@ const _sfc_main$2 = {
     }
   }
 };
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$4(_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" }, {
@@ -615,7 +620,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const MentionComponent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const MentionComponent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
 const MentionPlugin = Mention.extend({
   addNodeView() {
     return vue3.VueNodeViewRenderer(MentionComponent);
@@ -647,6 +652,72 @@ const MentionPlugin = Mention.extend({
     return ["mention-component", core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
   }
 });
+const _sfc_main$3 = {
+  name: "ChannelComponent",
+  components: {
+    NodeViewWrapper: vue3.NodeViewWrapper,
+    DtLink: lib_link.DtLink
+  },
+  props: vue3.nodeViewProps,
+  computed: {
+    text() {
+      return "#" + this.$props.node.attrs.name;
+    }
+  }
+};
+function _sfc_render$3(_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" }, {
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_dt_link, { kind: "mention" }, {
+        default: vue.withCtx(() => [
+          vue.createTextVNode(vue.toDisplayString($options.text), 1)
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+const ChannelComponent = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const ChannelPlugin = Mention.extend({
+  name: "channel",
+  addNodeView() {
+    return vue3.VueNodeViewRenderer(ChannelComponent);
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "channel-component"
+      }
+    ];
+  },
+  addAttributes() {
+    return {
+      name: {
+        default: ""
+      },
+      id: {
+        default: ""
+      },
+      locked: {
+        default: false
+      }
+    };
+  },
+  renderText({ node }) {
+    return `#${node.attrs.id}`;
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["channel-component", core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  }
+}).configure({
+  suggestion: {
+    char: "#",
+    pluginKey: new state.PluginKey("channelSuggestion")
+  }
+});
 const RICH_TEXT_EDITOR_OUTPUT_FORMATS = [
   "text",
   "json",
@@ -665,7 +736,7 @@ const RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS = [
   "sftp",
   "mailto"
 ];
-const _sfc_main$1 = {
+const _sfc_main$2 = {
   name: "MentionSuggestion",
   components: {
     DtAvatar: lib_avatar.DtAvatar,
@@ -686,7 +757,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_avatar = vue.resolveComponent("dt-avatar");
   const _component_dt_stack = vue.resolveComponent("dt-stack");
   return vue.openBlock(), vue.createBlock(_component_dt_stack, {
@@ -705,8 +776,8 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const MentionSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-const suggestion = {
+const MentionSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const mentionSuggestion = {
   // 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 [] },
@@ -760,6 +831,101 @@ const suggestion = {
     };
   }
 };
+const _sfc_main$1 = {
+  name: "ChannelSuggestion",
+  components: {
+    DtStack: lib_stack.DtStack,
+    DtIconHash,
+    DtIconLock
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    name() {
+      return this.item.name;
+    }
+  }
+};
+function _sfc_render$1(_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");
+  return vue.openBlock(), vue.createBlock(_component_dt_stack, {
+    direction: "row",
+    gap: "400"
+  }, {
+    default: vue.withCtx(() => [
+      !$props.item.locked ? (vue.openBlock(), vue.createBlock(_component_dt_icon_hash, {
+        key: 0,
+        size: "300"
+      })) : (vue.openBlock(), vue.createBlock(_component_dt_icon_lock, {
+        key: 1,
+        size: "300"
+      })),
+      vue.createElementVNode("span", null, vue.toDisplayString($options.name), 1)
+    ]),
+    _: 1
+  });
+}
+const ChannelSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+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 vue3.VueRenderer(SuggestionList, {
+          props: {
+            itemComponent: vue.markRaw(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 = {
   name: "DtRichTextEditor",
   components: {
@@ -867,6 +1033,21 @@ 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 channels for suggestion.
+     * items({ query }) => { return [ChannelObject]; }
+     * ChannelObject format:
+     * { name: string, id: string, locked: boolean }
+     *
+     * When null, it does not add the plugin. Setting locked to true will display a lock rather than hash.
+     */
+    channelSuggestion: {
+      type: Object,
+      default: null
+    },
     /**
      * Whether the input allows for block quote.
      */
@@ -996,9 +1177,13 @@ const _sfc_main = {
         protocols: RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS
       }));
       if (this.mentionSuggestion) {
-        const suggestionObject = { ...this.mentionSuggestion, ...suggestion };
+        const suggestionObject = { ...this.mentionSuggestion, ...mentionSuggestion };
         extensions.push(MentionPlugin.configure({ suggestion: suggestionObject }));
       }
+      if (this.channelSuggestion) {
+        const suggestionObject = { ...this.channelSuggestion, ...channelSuggestion };
+        extensions.push(ChannelPlugin.configure({ suggestion: suggestionObject }));
+      }
       extensions.push(Emoji);
       extensions.push(TextAlign.configure({
         types: ["paragraph"],