@dialpad/dialtone 9.30.1 → 9.32.0

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

@@ -30,6 +30,8 @@ import { linkRegex, getPhoneNumberRegex } from "../common/utils.js";
 import Mention from "@tiptap/extension-mention";
 import { DtLink } from "./link.js";
 import { DtAvatar } from "./avatar.js";
+import DtIconHash from "@dialpad/dialtone-icons/vue3/hash";
+import DtIconLock from "@dialpad/dialtone-icons/vue3/lock";
 import "./skeleton.js";
 import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
@@ -42,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$5 = {
+const _sfc_main$7 = {
   name: "EmojiComponent",
   components: {
     NodeViewWrapper,
@@ -50,7 +52,7 @@ const _sfc_main$5 = {
   },
   props: 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 = 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" }, {
@@ -63,8 +65,8 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const EmojiComponent = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
-const _sfc_main$4 = {
+const EmojiComponent = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+const _sfc_main$6 = {
   name: "SuggestionList",
   components: {
     DtListItem
@@ -144,6 +146,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;
       }
     }
   }
@@ -153,7 +158,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 = resolveComponent("dt-list-item");
   return openBlock(), createElementBlock("div", _hoisted_1, [
     withDirectives(createElementVNode("ul", _hoisted_2, [
@@ -179,8 +184,8 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const SuggestionList = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
-const _sfc_main$3 = {
+const SuggestionList = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
+const _sfc_main$5 = {
   name: "EmojiSuggestion",
   components: {
     DtEmoji,
@@ -193,7 +198,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 = resolveComponent("dt-emoji");
   const _component_dt_stack = resolveComponent("dt-stack");
   return openBlock(), createBlock(_component_dt_stack, {
@@ -210,7 +215,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const EmojiSuggestion = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const EmojiSuggestion = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
 const suggestionOptions = {
   items: ({ query }) => {
     if (query.length < 2) {
@@ -585,7 +590,7 @@ const Link = Mark.create({
     ];
   }
 });
-const _sfc_main$2 = {
+const _sfc_main$4 = {
   name: "MentionComponent",
   components: {
     NodeViewWrapper,
@@ -598,7 +603,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 = resolveComponent("dt-link");
   const _component_node_view_wrapper = resolveComponent("node-view-wrapper");
   return openBlock(), createBlock(_component_node_view_wrapper, { class: "d-d-inline-block" }, {
@@ -613,7 +618,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const MentionComponent = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const MentionComponent = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
 const MentionPlugin = Mention.extend({
   addNodeView() {
     return VueNodeViewRenderer(MentionComponent);
@@ -645,6 +650,72 @@ const MentionPlugin = Mention.extend({
     return ["mention-component", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
   }
 });
+const _sfc_main$3 = {
+  name: "ChannelComponent",
+  components: {
+    NodeViewWrapper,
+    DtLink
+  },
+  props: nodeViewProps,
+  computed: {
+    text() {
+      return "#" + this.$props.node.attrs.name;
+    }
+  }
+};
+function _sfc_render$3(_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" }, {
+    default: withCtx(() => [
+      createVNode(_component_dt_link, { kind: "mention" }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString($options.text), 1)
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+const ChannelComponent = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const ChannelPlugin = Mention.extend({
+  name: "channel",
+  addNodeView() {
+    return 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", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  }
+}).configure({
+  suggestion: {
+    char: "#",
+    pluginKey: new PluginKey("channelSuggestion")
+  }
+});
 const RICH_TEXT_EDITOR_OUTPUT_FORMATS = [
   "text",
   "json",
@@ -663,7 +734,7 @@ const RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS = [
   "sftp",
   "mailto"
 ];
-const _sfc_main$1 = {
+const _sfc_main$2 = {
   name: "MentionSuggestion",
   components: {
     DtAvatar,
@@ -684,7 +755,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 = resolveComponent("dt-avatar");
   const _component_dt_stack = resolveComponent("dt-stack");
   return openBlock(), createBlock(_component_dt_stack, {
@@ -703,8 +774,8 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   });
 }
-const MentionSuggestion = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-const suggestion = {
+const MentionSuggestion = /* @__PURE__ */ _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 [] },
@@ -758,6 +829,101 @@ const suggestion = {
     };
   }
 };
+const _sfc_main$1 = {
+  name: "ChannelSuggestion",
+  components: {
+    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 = resolveComponent("dt-icon-hash");
+  const _component_dt_icon_lock = resolveComponent("dt-icon-lock");
+  const _component_dt_stack = resolveComponent("dt-stack");
+  return openBlock(), createBlock(_component_dt_stack, {
+    direction: "row",
+    gap: "400"
+  }, {
+    default: withCtx(() => [
+      !$props.item.locked ? (openBlock(), createBlock(_component_dt_icon_hash, {
+        key: 0,
+        size: "300"
+      })) : (openBlock(), createBlock(_component_dt_icon_lock, {
+        key: 1,
+        size: "300"
+      })),
+      createElementVNode("span", null, toDisplayString($options.name), 1)
+    ]),
+    _: 1
+  });
+}
+const ChannelSuggestion = /* @__PURE__ */ _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 VueRenderer(SuggestionList, {
+          props: {
+            itemComponent: 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: {
@@ -865,6 +1031,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.
      */
@@ -994,9 +1175,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"],