@dialpad/dialtone 9.166.0 → 9.167.0

package/dist/vue3/lib/editor/editor.js

@@ -1,11 +1,11 @@
-import { EDITOR_DEFAULT_FONT_COLOR as K, EDITOR_SUPPORTED_LINK_PROTOCOLS as _t, EDITOR_DEFAULT_LINK_PREFIX as kt } from "./editor-constants.js";
+import { EDITOR_DEFAULT_FONT_COLOR as K, EDITOR_SUPPORTED_LINK_PROTOCOLS as kt, EDITOR_DEFAULT_LINK_PREFIX as _t } from "./editor-constants.js";
 import { addClassStyleAttrs as It, removeClassStyleAttrs as Lt } from "../../common/utils/index.js";
 import At from "./EditorToolbarButton.js";
 import yt from "./EditorToolbarDropdownButton.js";
 import Et from "./EditorToolbarPopoverButton.js";
 import { DtIconStopFilled as H, DtIconFontSize as J, DtIconChevronDown as wt, DtIconBraces as Y, DtIconType as j, DtIconSearch as bt, DtIconImage as G, DtIconLink2 as X, DtIconCodeBlock as Z, DtIconQuote as W, DtIconAlignJustify as $, DtIconAlignRight as tt, DtIconAlignCenter as et, DtIconAlignLeft as ot, DtIconListOrdered as it, DtIconListBullet as nt, DtIconStrikethrough as rt, DtIconUnderline as lt, DtIconItalic as st, DtIconBold as at, DtIconQuickReply as ut } from "@dialpad/dialtone-icons/vue3";
 import { DialtoneLocalization as Ct } from "../../localization/index.js";
-import { resolveComponent as p, resolveDirective as Ot, openBlock as u, createElementBlock as T, mergeProps as B, createVNode as d, withCtx as a, Fragment as _, renderList as y, createBlock as f, createElementVNode as k, normalizeStyle as O, createTextVNode as w, toDisplayString as I, withDirectives as Rt, withKeys as b, withModifiers as L, resolveDynamicComponent as ct, createCommentVNode as D, normalizeClass as xt } from "vue";
+import { resolveComponent as p, resolveDirective as Ot, openBlock as u, createElementBlock as T, mergeProps as B, createVNode as d, withCtx as a, Fragment as k, renderList as y, createBlock as f, createElementVNode as _, normalizeStyle as O, createTextVNode as w, toDisplayString as I, withDirectives as Rt, withKeys as b, withModifiers as L, resolveDynamicComponent as ct, createCommentVNode as D, normalizeClass as xt } from "vue";
 import { _ as Ft } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import Dt from "../combobox/combobox.js";
 import St from "../tooltip/tooltip.js";
@@ -297,6 +297,20 @@ const Ht = {
         { name: "Huge", value: "36px" }
       ]
     },
+    /**
+     * Whether the input allows background color to be introduced in the text.
+     */
+    allowBackgroundColor: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Whether the input allows line height to be introduced in the text.
+     */
+    allowLineHeight: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * Use div tags instead of paragraph tags to show text
      */
@@ -662,14 +676,14 @@ const Ht = {
       (r = (l = (i = (o = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : o.chain()) == null ? void 0 : i.focus()) == null ? void 0 : l.unsetLink()) == null || r.run(), this.closeLinkInput();
     },
     setLink(t) {
-      var r, e, m;
+      var r, e, g;
       const o = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor;
       if (t == null || t.preventDefault(), t == null || t.stopPropagation(), !this.linkInput) {
         this.removeLink();
         return;
       }
-      _t.find((A) => A.test(this.linkInput)) || (this.linkInput = `${kt}${this.linkInput}`);
-      const l = (m = (e = o == null ? void 0 : o.view) == null ? void 0 : e.state) == null ? void 0 : m.selection;
+      kt.find((A) => A.test(this.linkInput)) || (this.linkInput = `${_t}${this.linkInput}`);
+      const l = (g = (e = o == null ? void 0 : o.view) == null ? void 0 : e.state) == null ? void 0 : g.selection;
       l.anchor === l.head ? o.chain().focus().insertContentAt(
         l.anchor,
         `<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`
@@ -795,8 +809,8 @@ const Ht = {
       o.$el.blur(), l.$el.focus();
     },
     onFontStyleSelect(t) {
-      var o, i, l, r, e, m;
-      t ? (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setFontFamily(t).run() : (r = (l = this.$refs.richTextEditor) == null ? void 0 : l.editor) == null || r.chain().focus().unsetFontFamily().run(), (m = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null || m.commands.focus();
+      var o, i, l, r, e, g;
+      t ? (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setFontFamily(t).run() : (r = (l = this.$refs.richTextEditor) == null ? void 0 : l.editor) == null || r.chain().focus().unsetFontFamily().run(), (g = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null || g.commands.focus();
     },
     isCurrentFontFamily(t) {
       var o, i, l, r, e;
@@ -831,7 +845,7 @@ const Ht = {
   }
 }, Jt = { class: "d-recipe-editor__popover-content" };
 function Yt(t, o, i, l, r, e) {
-  const m = p("dt-icon-search"), A = p("dt-input"), R = p("dt-list-item"), S = p("dt-combobox"), v = p("editor-toolbar-popover-button"), dt = p("editor-toolbar-dropdown-button"), E = p("dt-button"), ht = p("dt-dropdown-separator"), ft = p("dt-list-item-group"), pt = p("editor-toolbar-button"), C = p("dt-stack"), Bt = p("dt-tooltip"), mt = p("dt-popover"), gt = p("dt-rich-text-editor"), Tt = Ot("dt-tooltip");
+  const g = p("dt-icon-search"), A = p("dt-input"), R = p("dt-list-item"), S = p("dt-combobox"), v = p("editor-toolbar-popover-button"), dt = p("editor-toolbar-dropdown-button"), E = p("dt-button"), ht = p("dt-dropdown-separator"), ft = p("dt-list-item-group"), pt = p("editor-toolbar-button"), C = p("dt-stack"), Bt = p("dt-tooltip"), gt = p("dt-popover"), mt = p("dt-rich-text-editor"), Tt = Ot("dt-tooltip");
   return u(), T("div", B({ class: "d-recipe-editor" }, e.addClassStyleAttrs(t.$attrs), {
     "data-qa": "dt-recipe-editor",
     role: "presentation",
@@ -843,15 +857,15 @@ function Yt(t, o, i, l, r, e) {
       gap: "450"
     }, {
       default: a(() => [
-        (u(!0), T(_, null, y(e.buttonGroups, (s) => (u(), f(C, {
+        (u(!0), T(k, null, y(e.buttonGroups, (s) => (u(), f(C, {
           key: s.key,
           direction: "row",
           gap: "300"
         }, {
           default: a(() => [
-            (u(!0), T(_, null, y(s.buttonGroup, (n) => {
+            (u(!0), T(k, null, y(s.buttonGroup, (n) => {
               var x, N, U, V, z, Q, M, q;
-              return u(), T(_, null, [
+              return u(), T(k, null, [
                 n.buttonType === "popover" && n.selector === "fontStyle" ? (u(), f(v, {
                   key: e.getButtonKey(s.key, n.selector),
                   ref_for: !0,
@@ -865,13 +879,13 @@ function Yt(t, o, i, l, r, e) {
                   onShiftFocusRight: e.shiftActionBarFocusRight,
                   onShiftFocusLeft: e.shiftActionBarFocusLeft
                 }, {
-                  content: a(({ close: g }) => [
+                  content: a(({ close: m }) => [
                     d(S, {
                       label: "",
                       "label-visible": !1,
                       "show-list": !0,
                       "click-on-select": !0,
-                      onEscape: (h) => g()
+                      onEscape: (h) => m()
                     }, {
                       input: a(({ inputProps: h }) => [
                         d(A, B({ ref_for: !0 }, h, {
@@ -884,21 +898,21 @@ function Yt(t, o, i, l, r, e) {
                           role: "menuitem"
                         }), {
                           leftIcon: a(({ iconSize: c }) => [
-                            d(m, { size: c }, null, 8, ["size"])
+                            d(g, { size: c }, null, 8, ["size"])
                           ]),
                           _: 1
                         }, 16, ["modelValue", "placeholder"])
                       ]),
                       list: a(({ listProps: h }) => [
-                        k("ul", B({ ref_for: !0 }, h), [
-                          (u(!0), T(_, null, y(e.filteredFontStyles, (c) => (u(), f(R, {
+                        _("ul", B({ ref_for: !0 }, h), [
+                          (u(!0), T(k, null, y(e.filteredFontStyles, (c) => (u(), f(R, {
                             key: c.name,
                             selected: e.isCurrentFontFamily(c.value),
                             style: O({ fontFamily: c.value || "inherit" }),
                             role: "option",
                             "navigation-type": "arrow-keys",
                             onClick: (P) => {
-                              g(), e.onFontStyleSelect(c.value);
+                              m(), e.onFontStyleSelect(c.value);
                             }
                           }, {
                             default: a(() => [
@@ -925,18 +939,18 @@ function Yt(t, o, i, l, r, e) {
                   onShiftFocusRight: e.shiftActionBarFocusRight,
                   onShiftFocusLeft: e.shiftActionBarFocusLeft
                 }, {
-                  list: a(({ close: g }) => [
-                    (u(!0), T(_, null, y(i.fontSizes, (h) => (u(), f(R, {
+                  list: a(({ close: m }) => [
+                    (u(!0), T(k, null, y(i.fontSizes, (h) => (u(), f(R, {
                       key: h.name,
                       selected: e.isCurrentFontSize(h.value),
                       role: "menuitem",
                       "navigation-type": "arrow-keys",
                       onClick: (c) => {
-                        g(), e.onFontSizeSelect(h.value, c);
+                        m(), e.onFontSizeSelect(h.value, c);
                       }
                     }, {
                       default: a(() => [
-                        k("span", {
+                        _("span", {
                           style: O({ fontSize: h.value })
                         }, I(h.name), 5)
                       ]),
@@ -959,7 +973,7 @@ function Yt(t, o, i, l, r, e) {
                     b(L(e.shiftActionBarFocusRight, ["stop"]), ["right"]),
                     b(L(e.shiftActionBarFocusLeft, ["stop"]), ["left"])
                   ],
-                  onClick: (g) => n.onClick()
+                  onClick: (m) => n.onClick()
                 }, {
                   icon: a(() => [
                     (u(), f(ct(n.icon), {
@@ -994,13 +1008,13 @@ function Yt(t, o, i, l, r, e) {
                   onShiftFocusRight: e.shiftActionBarFocusRight,
                   onShiftFocusLeft: e.shiftActionBarFocusLeft
                 }, {
-                  content: a(({ close: g }) => [
+                  content: a(({ close: m }) => [
                     d(S, {
                       label: "",
                       "label-visible": !1,
                       "show-list": !0,
                       "click-on-select": !0,
-                      onEscape: (h) => g()
+                      onEscape: (h) => m()
                     }, {
                       input: a(({ inputProps: h }) => [
                         d(A, B({ ref_for: !0 }, h, {
@@ -1013,25 +1027,25 @@ function Yt(t, o, i, l, r, e) {
                           role: "menuitem"
                         }), {
                           leftIcon: a(({ iconSize: c }) => [
-                            d(m, { size: c }, null, 8, ["size"])
+                            d(g, { size: c }, null, 8, ["size"])
                           ]),
                           _: 1
                         }, 16, ["modelValue", "placeholder"])
                       ]),
                       list: a(({ listProps: h }) => [
-                        k("div", B({ ref_for: !0 }, h), [
-                          (u(!0), T(_, null, y(e.filteredCategories, (c, P) => (u(), f(ft, {
+                        _("div", B({ ref_for: !0 }, h), [
+                          (u(!0), T(k, null, y(e.filteredCategories, (c, P) => (u(), f(ft, {
                             key: c.name,
                             heading: c.name,
                             "heading-class": "d-headline--sm-compact d-p8"
                           }, {
                             default: a(() => [
-                              (u(!0), T(_, null, y(e.getFilteredItemsForCategory(c), (F) => (u(), f(R, {
+                              (u(!0), T(k, null, y(e.getFilteredItemsForCategory(c), (F) => (u(), f(R, {
                                 key: c.name + F.name,
                                 role: "option",
                                 "navigation-type": "arrow-keys",
                                 onClick: (jt) => {
-                                  e.insertVariable(c.name, F), g();
+                                  e.insertVariable(c.name, F), m();
                                 }
                               }, {
                                 default: a(() => [
@@ -1065,7 +1079,7 @@ function Yt(t, o, i, l, r, e) {
                 }, null, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "label", "on-click", "onShiftFocusRight", "onShiftFocusLeft"])) : D("", !0)
               ], 64);
             }), 256)),
-            o[8] || (o[8] = k("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))
+            o[8] || (o[8] = _("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))
           ]),
           _: 2
         }, 1024))), 128)),
@@ -1075,7 +1089,7 @@ function Yt(t, o, i, l, r, e) {
           gap: "300"
         }, {
           default: a(() => [
-            d(mt, {
+            d(gt, {
               open: r.showLinkInput,
               "show-close-button": !1,
               "data-qa": "dt-recipe-editor-link-input-popover",
@@ -1122,8 +1136,8 @@ function Yt(t, o, i, l, r, e) {
                 }, 8, ["message"]))
               ]),
               content: a(() => [
-                k("div", Jt, [
-                  k("span", null, I(e.showAddLinkButtonLabels.title), 1),
+                _("div", Jt, [
+                  _("span", null, I(e.showAddLinkButtonLabels.title), 1),
                   d(A, {
                     modelValue: r.linkInput,
                     "onUpdate:modelValue": o[4] || (o[4] = (s) => r.linkInput = s),
@@ -1190,11 +1204,11 @@ function Yt(t, o, i, l, r, e) {
       ]),
       _: 1
     }),
-    k("div", {
+    _("div", {
       style: O({ "max-height": i.maxHeight }),
       class: xt(["d-recipe-editor__content", { "d-recipe-editor__content-image-resize": i.allowImageResize }])
     }, [
-      d(gt, B({
+      d(mt, B({
         ref: "richTextEditor",
         modelValue: r.internalInputValue,
         "onUpdate:modelValue": o[5] || (o[5] = (s) => r.internalInputValue = s),
@@ -1204,6 +1218,8 @@ function Yt(t, o, i, l, r, e) {
         "allow-line-breaks": !0,
         "allow-variable": !0,
         "allow-font-size": i.showFontSizeButton,
+        "allow-background-color": i.allowBackgroundColor,
+        "allow-line-height": i.allowLineHeight,
         "variable-items": e.flattenedVariableItems,
         "hide-link-bubble-menu": !0,
         "auto-focus": i.autoFocus,
@@ -1223,7 +1239,7 @@ function Yt(t, o, i, l, r, e) {
         onFocus: e.onFocus,
         onInput: o[6] || (o[6] = (s) => e.onInput(s)),
         onSelected: e.onSelected
-      }), null, 16, ["modelValue", "allow-font-size", "variable-items", "auto-focus", "editable", "input-aria-label", "input-class", "output-format", "placeholder", "use-div-tags", "allow-tables", "allow-image-resize", "onTextInput", "onBlur", "onFocus", "onSelected"])
+      }), null, 16, ["modelValue", "allow-font-size", "allow-background-color", "allow-line-height", "variable-items", "auto-focus", "editable", "input-aria-label", "input-class", "output-format", "placeholder", "use-div-tags", "allow-tables", "allow-image-resize", "onTextInput", "onBlur", "onFocus", "onSelected"])
     ], 6)
   ], 16);
 }