@dialpad/dialtone-vue 3.135.2 → 3.136.1

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

@@ -112,9 +112,7 @@ const _sfc_main$8 = {
         return true;
       }
       if (event.key === "Enter" || event.key === "Tab") {
-        event.preventDefault();
         this.selectHandler();
-        event.stopPropagation();
         return true;
       }
       return false;
@@ -127,7 +125,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({
@@ -158,7 +157,7 @@ const _sfc_main$8 = {
     }
   }
 };
-const _hoisted_1$1 = { class: "d-popover__dialog" };
+const _hoisted_1$1 = { class: "d-popover__dialog dt-suggestion-list__container" };
 const _hoisted_2$1 = {
   ref: "suggestionList",
   class: "dt-suggestion-list"
@@ -176,7 +175,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           "navigation-type": "arrow-keys",
           onClick: ($event) => $options.selectItem(index),
-          onKeydown: vue.withModifiers($options.onKeyDown, ["prevent", "stop"])
+          onKeydown: vue.withModifiers($options.onKeyDown, ["prevent"])
         }, {
           default: vue.withCtx(() => [
             (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.itemComponent), { item }, null, 8, ["item"]))
@@ -221,6 +220,25 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   });
 }
 const EmojiSuggestion = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+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) {
@@ -259,6 +277,7 @@ const suggestionOptions = {
   render: () => {
     let component;
     let popup;
+    let popupIsOpen = false;
     return {
       onStart: (props) => {
         component = new vue3.VueRenderer(SuggestionList, {
@@ -276,33 +295,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;
       }
     };
   }
@@ -897,6 +928,7 @@ const mentionSuggestion = {
   render: () => {
     let component;
     let popup;
+    let popupIsOpen = false;
     return {
       onStart: (props) => {
         component = new vue3.VueRenderer(SuggestionList, {
@@ -914,31 +946,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;
       }
     };
   }
@@ -992,6 +1041,7 @@ const channelSuggestion = {
   render: () => {
     let component;
     let popup;
+    let popupIsOpen = false;
     return {
       onStart: (props) => {
         component = new vue3.VueRenderer(SuggestionList, {
@@ -1009,31 +1059,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;
       }
     };
   }
@@ -1060,7 +1127,7 @@ const _sfc_main$1 = {
 };
 const _hoisted_1 = { class: "d-body--md-compact" };
 const _hoisted_2 = { key: 0 };
-const _hoisted_3 = { class: "d-body--sm" };
+const _hoisted_3 = { class: "d-body--sm d-fc-tertiary" };
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", null, [
     vue.createElementVNode("div", _hoisted_1, [
@@ -1080,6 +1147,7 @@ const slashCommandSuggestion = {
   render: () => {
     let component;
     let popup;
+    let popupIsOpen = false;
     return {
       onStart: (props) => {
         component = new vue3.VueRenderer(SuggestionList, {
@@ -1098,31 +1166,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;
       }
     };
   }
@@ -1372,7 +1457,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 {
@@ -1437,14 +1528,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;
+                }
               };
             }
           })