@dialpad/dialtone 9.54.2 → 9.55.0

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

@@ -113,9 +113,7 @@ const _sfc_main$8 = {
         return true;
       }
       if (event.key === "Enter" || event.key === "Tab") {
-        event.preventDefault();
         this.selectHandler();
-        event.stopPropagation();
         return true;
       }
       return false;
@@ -128,7 +126,8 @@ const _sfc_main$8 = {
       this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
       this.scrollActiveElementIntoView();
     },
-    scrollActiveElementIntoView() {
+    async scrollActiveElementIntoView() {
+      await this.$nextTick();
       const activeElement = this.$refs.suggestionList.querySelector(".dt-list-item--highlighted");
       if (activeElement) {
         activeElement.scrollIntoView({
@@ -161,7 +160,7 @@ const _sfc_main$8 = {
 };
 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("div", { staticClass: "d-popover__dialog dt-suggestion-list__container" }, [_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: [
       "dt-suggestion-list--item",
       { "dt-list-item--highlighted": index === _vm.selectedIndex }
@@ -169,7 +168,6 @@ var _sfc_render$8 = function render2() {
       return _vm.selectItem(index);
     }, "keydown": function($event) {
       $event.preventDefault();
-      $event.stopPropagation();
       return _vm.onKeyDown.apply(null, arguments);
     } } }, [_c(_vm.itemComponent, { tag: "component", attrs: { "item": item } })], 1);
   }), 1)]);
@@ -215,6 +213,25 @@ var __component__$7 = /* @__PURE__ */ normalizeComponent(
   null
 );
 const EmojiSuggestion = __component__$7.exports;
+const hideOnEsc = {
+  name: "hideOnEsc",
+  defaultValue: true,
+  fn({ hide }) {
+    function onKeyDown(event) {
+      if (event.keyCode === 27) {
+        hide();
+      }
+    }
+    return {
+      onShow() {
+        document.addEventListener("keydown", onKeyDown);
+      },
+      onHide() {
+        document.removeEventListener("keydown", onKeyDown);
+      }
+    };
+  }
+};
 const suggestionOptions = {
   items: ({ query }) => {
     if (query.length < 2) {
@@ -253,6 +270,7 @@ const suggestionOptions = {
   render: () => {
     let component;
     let popup;
+    let popupIsOpen = false;
     return {
       onStart: (props) => {
         component = new VueRenderer(SuggestionList, {
@@ -271,33 +289,45 @@ const suggestionOptions = {
           getReferenceClientRect: props.clientRect,
           appendTo: () => document.body,
           content: component.element,
-          showOnCreate: true,
+          showOnCreate: false,
+          onShow: () => {
+            popupIsOpen = true;
+          },
+          onHidden: () => {
+            popupIsOpen = false;
+          },
           interactive: true,
           trigger: "manual",
           placement: "top-start",
-          zIndex: 650
+          zIndex: 650,
+          plugins: [hideOnEsc]
         });
+        if (props.items.length > 0) {
+          popup == null ? void 0 : popup[0].show();
+        }
       },
       onUpdate(props) {
-        component.updateProps(props);
-        if (!props.clientRect) {
-          return;
+        component == null ? void 0 : component.updateProps(props);
+        if (props.items.length > 0) {
+          popup == null ? void 0 : popup[0].show();
+        } else {
+          popup == null ? void 0 : popup[0].hide();
         }
-        popup[0].setProps({
+        popup == null ? void 0 : popup[0].setProps({
           getReferenceClientRect: props.clientRect
         });
       },
       onKeyDown(props) {
         var _a;
-        if (props.event.key === "Escape") {
-          popup[0].hide();
-          return true;
+        if (popupIsOpen) {
+          return (_a = component == null ? void 0 : component.ref) == null ? void 0 : _a.onKeyDown(props);
         }
-        return (_a = component.ref) == null ? void 0 : _a.onKeyDown(props);
       },
       onExit() {
-        popup[0].destroy();
-        component.destroy();
+        popup == null ? void 0 : popup[0].destroy();
+        popup = null;
+        component == null ? void 0 : component.destroy();
+        component = null;
       }
     };
   }
@@ -894,6 +924,7 @@ const mentionSuggestion = {
   render: () => {
     let component;
     let popup;
+    let popupIsOpen = false;
     return {
       onStart: (props) => {
         component = new VueRenderer(SuggestionList, {
@@ -912,31 +943,48 @@ const mentionSuggestion = {
           getReferenceClientRect: props.clientRect,
           appendTo: () => document.body,
           content: component.element,
-          showOnCreate: true,
+          showOnCreate: false,
+          onShow: () => {
+            popupIsOpen = true;
+          },
+          onHidden: () => {
+            popupIsOpen = false;
+          },
           interactive: true,
           trigger: "manual",
-          placement: "top-start"
+          placement: "top-start",
+          zIndex: 650,
+          plugins: [hideOnEsc]
         });
+        if (props.items.length > 0) {
+          popup == null ? void 0 : popup[0].show();
+        }
       },
       onUpdate(props) {
-        component.updateProps(props);
+        component == null ? void 0 : component.updateProps(props);
+        if (props.items.length > 0) {
+          popup == null ? void 0 : popup[0].show();
+        } else {
+          popup == null ? void 0 : popup[0].hide();
+        }
         if (!props.clientRect) {
           return;
         }
-        popup[0].setProps({
+        popup == null ? void 0 : popup[0].setProps({
           getReferenceClientRect: props.clientRect
         });
       },
       onKeyDown(props) {
-        if (props.event.key === "Escape") {
-          popup[0].hide();
-          return true;
+        var _a;
+        if (popupIsOpen) {
+          return (_a = component == null ? void 0 : component.ref) == null ? void 0 : _a.onKeyDown(props);
         }
-        return component == null ? void 0 : component.ref.onKeyDown(props);
       },
       onExit() {
-        popup[0].destroy();
-        component.destroy();
+        popup == null ? void 0 : popup[0].destroy();
+        popup = null;
+        component == null ? void 0 : component.destroy();
+        component = null;
       }
     };
   }
@@ -984,6 +1032,7 @@ const channelSuggestion = {
   render: () => {
     let component;
     let popup;
+    let popupIsOpen = false;
     return {
       onStart: (props) => {
         component = new VueRenderer(SuggestionList, {
@@ -1002,31 +1051,48 @@ const channelSuggestion = {
           getReferenceClientRect: props.clientRect,
           appendTo: () => document.body,
           content: component.element,
-          showOnCreate: true,
+          showOnCreate: false,
+          onShow: () => {
+            popupIsOpen = true;
+          },
+          onHidden: () => {
+            popupIsOpen = false;
+          },
           interactive: true,
           trigger: "manual",
-          placement: "top-start"
+          placement: "top-start",
+          zIndex: 650,
+          plugins: [hideOnEsc]
         });
+        if (props.items.length > 0) {
+          popup == null ? void 0 : popup[0].show();
+        }
       },
       onUpdate(props) {
-        component.updateProps(props);
+        component == null ? void 0 : component.updateProps(props);
+        if (props.items.length > 0) {
+          popup == null ? void 0 : popup[0].show();
+        } else {
+          popup == null ? void 0 : popup[0].hide();
+        }
         if (!props.clientRect) {
           return;
         }
-        popup[0].setProps({
+        popup == null ? void 0 : popup[0].setProps({
           getReferenceClientRect: props.clientRect
         });
       },
       onKeyDown(props) {
-        if (props.event.key === "Escape") {
-          popup[0].hide();
-          return true;
+        var _a;
+        if (popupIsOpen) {
+          return (_a = component == null ? void 0 : component.ref) == null ? void 0 : _a.onKeyDown(props);
         }
-        return component == null ? void 0 : component.ref.onKeyDown(props);
       },
       onExit() {
-        popup[0].destroy();
-        component.destroy();
+        popup == null ? void 0 : popup[0].destroy();
+        popup = null;
+        component == null ? void 0 : component.destroy();
+        component = null;
       }
     };
   }
@@ -1053,7 +1119,7 @@ const _sfc_main$1 = {
 };
 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) + " ")])]);
+  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 d-fc-tertiary" }, [_vm._v(" " + _vm._s(_vm.description) + " ")])]);
 };
 var _sfc_staticRenderFns$1 = [];
 var __component__$1 = /* @__PURE__ */ normalizeComponent(
@@ -1076,6 +1142,7 @@ const slashCommandSuggestion = {
   render: () => {
     let component;
     let popup;
+    let popupIsOpen = false;
     return {
       onStart: (props) => {
         component = new VueRenderer(SuggestionList, {
@@ -1094,31 +1161,48 @@ const slashCommandSuggestion = {
           getReferenceClientRect: props.clientRect,
           appendTo: () => document.body,
           content: component.element,
-          showOnCreate: true,
+          showOnCreate: false,
+          onShow: () => {
+            popupIsOpen = true;
+          },
+          onHidden: () => {
+            popupIsOpen = false;
+          },
           interactive: true,
           trigger: "manual",
-          placement: "top-start"
+          placement: "top-start",
+          zIndex: 650,
+          plugins: [hideOnEsc]
         });
+        if (props.items.length > 0) {
+          popup == null ? void 0 : popup[0].show();
+        }
       },
       onUpdate(props) {
-        component.updateProps(props);
+        component == null ? void 0 : component.updateProps(props);
+        if (props.items.length > 0) {
+          popup == null ? void 0 : popup[0].show();
+        } else {
+          popup == null ? void 0 : popup[0].hide();
+        }
         if (!props.clientRect) {
           return;
         }
-        popup[0].setProps({
+        popup == null ? void 0 : popup[0].setProps({
           getReferenceClientRect: props.clientRect
         });
       },
       onKeyDown(props) {
-        if (props.event.key === "Escape") {
-          popup[0].hide();
-          return true;
+        var _a;
+        if (popupIsOpen) {
+          return (_a = component == null ? void 0 : component.ref) == null ? void 0 : _a.onKeyDown(props);
         }
-        return component == null ? void 0 : component.ref.onKeyDown(props);
       },
       onExit() {
-        popup[0].destroy();
-        component.destroy();
+        popup == null ? void 0 : popup[0].destroy();
+        popup = null;
+        component == null ? void 0 : component.destroy();
+        component = null;
       }
     };
   }
@@ -1368,7 +1452,13 @@ const _sfc_main = {
      * @event focus
      * @type {FocusEvent}
      */
-    "focus"
+    "focus",
+    /**
+     * Enter was pressed. Note that shift enter must be pressed to line break the input.
+     * @event enter
+     * @type {String}
+     */
+    "enter"
   ],
   data() {
     return {
@@ -1433,14 +1523,20 @@ const _sfc_main = {
           HardBreak.extend({
             addKeyboardShortcuts() {
               return {
-                Enter: () => true,
-                "Shift-Enter": () => this.editor.commands.first(({ commands }) => [
-                  () => commands.newlineInCode(),
-                  () => self.allowBulletList && commands.splitListItem("listItem"),
-                  () => commands.createParagraphNear(),
-                  () => commands.liftEmptyBlock(),
-                  () => commands.splitBlock()
-                ])
+                Enter: () => {
+                  self.$emit("enter");
+                  return true;
+                },
+                "Shift-Enter": () => {
+                  this.editor.commands.first(({ commands }) => [
+                    () => commands.newlineInCode(),
+                    () => self.allowBulletList && commands.splitListItem("listItem"),
+                    () => commands.createParagraphNear(),
+                    () => commands.liftEmptyBlock(),
+                    () => commands.splitBlock()
+                  ]);
+                  return true;
+                }
               };
             }
           })