@dialpad/dialtone-vue 2.127.2 → 2.128.0

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

@@ -29,6 +29,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/vue2/hash";
+import DtIconLock from "@dialpad/dialtone-icons/vue2/lock";
 import "./skeleton.js";
 import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
@@ -43,7 +45,7 @@ import "../common/constants.js";
 import "vue";
 import "../chunks/link_constants-nWVlXQBs.js";
 import "./presence.js";
-const _sfc_main$5 = {
+const _sfc_main$7 = {
   name: "EmojiComponent",
   components: {
     NodeViewWrapper,
@@ -51,23 +53,23 @@ const _sfc_main$5 = {
   },
   props: nodeViewProps
 };
-var _sfc_render$5 = function render() {
+var _sfc_render$7 = 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$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 EmojiComponent = __component__$5.exports;
-const _sfc_main$4 = {
+const EmojiComponent = __component__$7.exports;
+const _sfc_main$6 = {
   name: "SuggestionList",
   components: {
     DtListItem
@@ -147,11 +149,14 @@ 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;
       }
     }
   }
 };
-var _sfc_render$4 = function render2() {
+var _sfc_render$6 = 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: [
@@ -166,19 +171,19 @@ var _sfc_render$4 = function render2() {
     } } }, [_c(_vm.itemComponent, { tag: "component", attrs: { "item": item } })], 1);
   }), 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 SuggestionList = __component__$4.exports;
-const _sfc_main$3 = {
+const SuggestionList = __component__$6.exports;
+const _sfc_main$5 = {
   name: "EmojiSuggestion",
   components: {
     DtEmoji,
@@ -191,22 +196,22 @@ const _sfc_main$3 = {
     }
   }
 };
-var _sfc_render$3 = function render3() {
+var _sfc_render$5 = 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$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 EmojiSuggestion = __component__$3.exports;
+const EmojiSuggestion = __component__$5.exports;
 const suggestionOptions = {
   items: ({ query }) => {
     if (query.length < 2) {
@@ -582,7 +587,7 @@ const Link = Mark.create({
     ];
   }
 });
-const _sfc_main$2 = {
+const _sfc_main$4 = {
   name: "MentionComponent",
   components: {
     NodeViewWrapper,
@@ -595,22 +600,22 @@ const _sfc_main$2 = {
     }
   }
 };
-var _sfc_render$2 = function render4() {
+var _sfc_render$4 = 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$2 = [];
-var __component__$2 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$2,
-  _sfc_render$2,
-  _sfc_staticRenderFns$2,
+var _sfc_staticRenderFns$4 = [];
+var __component__$4 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$4,
+  _sfc_render$4,
+  _sfc_staticRenderFns$4,
   false,
   null,
   null,
   null,
   null
 );
-const MentionComponent = __component__$2.exports;
+const MentionComponent = __component__$4.exports;
 const MentionPlugin = Mention.extend({
   addNodeView() {
     return VueNodeViewRenderer(MentionComponent);
@@ -642,6 +647,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;
+    }
+  }
+};
+var _sfc_render$3 = 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,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const ChannelComponent = __component__$3.exports;
+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",
@@ -660,7 +731,7 @@ const RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS = [
   "sftp",
   "mailto"
 ];
-const _sfc_main$1 = {
+const _sfc_main$2 = {
   name: "MentionSuggestion",
   components: {
     DtAvatar,
@@ -681,10 +752,100 @@ const _sfc_main$1 = {
     }
   }
 };
-var _sfc_render$1 = function render5() {
+var _sfc_render$2 = function render6() {
   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,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const MentionSuggestion = __component__$2.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
+  // items: ({ query }) => { return [] },
+  allowSpaces: true,
+  render: () => {
+    let component;
+    let popup;
+    return {
+      onStart: (props) => {
+        component = new VueRenderer(SuggestionList, {
+          parent: void 0,
+          propsData: {
+            itemComponent: MentionSuggestion,
+            itemType: "mention",
+            ...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: "ChannelSuggestion",
+  components: {
+    DtStack,
+    DtIconHash,
+    DtIconLock
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    name() {
+      return this.item.name;
+    }
+  }
+};
+var _sfc_render$1 = function render7() {
+  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$1 = [];
 var __component__$1 = /* @__PURE__ */ normalizeComponent(
   _sfc_main$1,
@@ -696,8 +857,8 @@ var __component__$1 = /* @__PURE__ */ normalizeComponent(
   null,
   null
 );
-const MentionSuggestion = __component__$1.exports;
-const suggestion = {
+const ChannelSuggestion = __component__$1.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 [] },
@@ -710,8 +871,8 @@ const suggestion = {
         component = new VueRenderer(SuggestionList, {
           parent: void 0,
           propsData: {
-            itemComponent: MentionSuggestion,
-            itemType: "mention",
+            itemComponent: ChannelSuggestion,
+            itemType: "channel",
             ...props
           },
           editor: props.editor
@@ -859,6 +1020,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.
      */
@@ -988,9 +1164,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"],
@@ -1115,7 +1295,7 @@ const _sfc_main = {
     }
   }
 };
-var _sfc_render = function render6() {
+var _sfc_render = function render8() {
   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" } });
 };