@dialpad/dialtone 9.164.0 → 9.166.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/tokens/doc.json +124660 -124660
  2. package/dist/vue3/component-documentation.json +1 -1
  3. package/dist/vue3/lib/editor/EditorToolbarButton.cjs +1 -1
  4. package/dist/vue3/lib/editor/EditorToolbarButton.cjs.map +1 -1
  5. package/dist/vue3/lib/editor/EditorToolbarButton.js +14 -13
  6. package/dist/vue3/lib/editor/EditorToolbarButton.js.map +1 -1
  7. package/dist/vue3/lib/editor/editor.cjs +1 -1
  8. package/dist/vue3/lib/editor/editor.cjs.map +1 -1
  9. package/dist/vue3/lib/editor/editor.js +209 -191
  10. package/dist/vue3/lib/editor/editor.js.map +1 -1
  11. package/dist/vue3/lib/message-input/message-input.cjs +1 -1
  12. package/dist/vue3/lib/message-input/message-input.cjs.map +1 -1
  13. package/dist/vue3/lib/message-input/message-input.js +19 -18
  14. package/dist/vue3/lib/message-input/message-input.js.map +1 -1
  15. package/dist/vue3/lib/rich-text-editor/rich-text-editor.cjs +3 -3
  16. package/dist/vue3/lib/rich-text-editor/rich-text-editor.cjs.map +1 -1
  17. package/dist/vue3/lib/rich-text-editor/rich-text-editor.js +161 -131
  18. package/dist/vue3/lib/rich-text-editor/rich-text-editor.js.map +1 -1
  19. package/dist/vue3/localization/de-DE.cjs +4 -0
  20. package/dist/vue3/localization/de-DE.cjs.map +1 -1
  21. package/dist/vue3/localization/de-DE.js +4 -0
  22. package/dist/vue3/localization/de-DE.js.map +1 -1
  23. package/dist/vue3/localization/es-LA.cjs +4 -0
  24. package/dist/vue3/localization/es-LA.cjs.map +1 -1
  25. package/dist/vue3/localization/es-LA.js +4 -0
  26. package/dist/vue3/localization/es-LA.js.map +1 -1
  27. package/dist/vue3/localization/fr-FR.cjs +4 -0
  28. package/dist/vue3/localization/fr-FR.cjs.map +1 -1
  29. package/dist/vue3/localization/fr-FR.js +4 -0
  30. package/dist/vue3/localization/fr-FR.js.map +1 -1
  31. package/dist/vue3/localization/it-IT.cjs +4 -0
  32. package/dist/vue3/localization/it-IT.cjs.map +1 -1
  33. package/dist/vue3/localization/it-IT.js +4 -0
  34. package/dist/vue3/localization/it-IT.js.map +1 -1
  35. package/dist/vue3/localization/nl-NL.cjs +4 -0
  36. package/dist/vue3/localization/nl-NL.cjs.map +1 -1
  37. package/dist/vue3/localization/nl-NL.js +4 -0
  38. package/dist/vue3/localization/nl-NL.js.map +1 -1
  39. package/dist/vue3/localization/pt-BR.cjs +4 -0
  40. package/dist/vue3/localization/pt-BR.cjs.map +1 -1
  41. package/dist/vue3/localization/pt-BR.js +4 -0
  42. package/dist/vue3/localization/pt-BR.js.map +1 -1
  43. package/dist/vue3/localization/ru-RU.cjs +4 -0
  44. package/dist/vue3/localization/ru-RU.cjs.map +1 -1
  45. package/dist/vue3/localization/ru-RU.js +4 -0
  46. package/dist/vue3/localization/ru-RU.js.map +1 -1
  47. package/dist/vue3/localization/zh-CN.cjs +4 -0
  48. package/dist/vue3/localization/zh-CN.cjs.map +1 -1
  49. package/dist/vue3/localization/zh-CN.js +4 -0
  50. package/dist/vue3/localization/zh-CN.js.map +1 -1
  51. package/dist/vue3/style.css +1 -1
  52. package/dist/vue3/types/components/rich_text_editor/extensions/variable/VariableComponent.vue.d.ts +1 -0
  53. package/dist/vue3/types/components/rich_text_editor/extensions/variable/VariableComponent.vue.d.ts.map +1 -1
  54. package/dist/vue3/types/components/rich_text_editor/extensions/variable/variable.d.ts.map +1 -1
  55. package/dist/vue3/types/recipes/conversation_view/editor/EditorToolbarButton.vue.d.ts.map +1 -1
  56. package/package.json +4 -4
@@ -1,60 +1,61 @@
1
- import { EDITOR_DEFAULT_FONT_COLOR as Tt, EDITOR_SUPPORTED_LINK_PROTOCOLS as mt, EDITOR_DEFAULT_LINK_PREFIX as gt } from "./editor-constants.js";
2
- import { addClassStyleAttrs as _t, removeClassStyleAttrs as kt } from "../../common/utils/index.js";
3
- import It from "./EditorToolbarButton.js";
4
- import Lt from "./EditorToolbarDropdownButton.js";
5
- import At from "./EditorToolbarPopoverButton.js";
6
- import { DtIconFontSize as K, DtIconChevronDown as Et, DtIconBraces as H, DtIconType as J, DtIconSearch as yt, DtIconImage as Y, DtIconLink2 as j, DtIconCodeBlock as G, DtIconQuote as X, DtIconAlignJustify as Z, DtIconAlignRight as W, DtIconAlignCenter as $, DtIconAlignLeft as tt, DtIconListOrdered as et, DtIconListBullet as ot, DtIconStrikethrough as it, DtIconUnderline as nt, DtIconItalic as rt, DtIconBold as st, DtIconQuickReply as lt } from "@dialpad/dialtone-icons/vue3";
7
- import { DialtoneLocalization as wt } from "../../localization/index.js";
8
- import { resolveComponent as f, resolveDirective as bt, openBlock as u, createElementBlock as g, mergeProps as B, createVNode as d, withCtx as a, Fragment as _, renderList as E, createBlock as p, createElementVNode as k, normalizeStyle as D, createTextVNode as w, toDisplayString as I, withDirectives as Ot, withKeys as b, withModifiers as L, createCommentVNode as F, resolveDynamicComponent as Ct } from "vue";
9
- import { _ as Rt } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
10
- import xt from "../combobox/combobox.js";
11
- import Dt from "../tooltip/tooltip.js";
12
- import Ft from "../input/input.js";
13
- import St from "../stack/stack.js";
14
- import vt from "../popover/popover.js";
15
- import Nt from "../button/button.js";
16
- import Ut from "../rich-text-editor/rich-text-editor.js";
17
- import Vt from "../list-item/list-item.js";
18
- import Qt from "../dropdown/dropdown-separator.js";
19
- import Mt from "../list-item-group/list-item-group.js";
20
- import { RICH_TEXT_EDITOR_OUTPUT_FORMATS as qt, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as zt } from "../rich-text-editor/rich-text-editor-constants.js";
21
- const Pt = {
1
+ import { EDITOR_DEFAULT_FONT_COLOR as K, EDITOR_SUPPORTED_LINK_PROTOCOLS as _t, EDITOR_DEFAULT_LINK_PREFIX as kt } from "./editor-constants.js";
2
+ import { addClassStyleAttrs as It, removeClassStyleAttrs as Lt } from "../../common/utils/index.js";
3
+ import At from "./EditorToolbarButton.js";
4
+ import yt from "./EditorToolbarDropdownButton.js";
5
+ import Et from "./EditorToolbarPopoverButton.js";
6
+ 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";
7
+ import { DialtoneLocalization as Ct } from "../../localization/index.js";
8
+ 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";
9
+ import { _ as Ft } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
10
+ import Dt from "../combobox/combobox.js";
11
+ import St from "../tooltip/tooltip.js";
12
+ import vt from "../input/input.js";
13
+ import Nt from "../stack/stack.js";
14
+ import Ut from "../popover/popover.js";
15
+ import Vt from "../button/button.js";
16
+ import zt from "../rich-text-editor/rich-text-editor.js";
17
+ import Qt from "../list-item/list-item.js";
18
+ import Mt from "../dropdown/dropdown-separator.js";
19
+ import qt from "../list-item-group/list-item-group.js";
20
+ import { RICH_TEXT_EDITOR_OUTPUT_FORMATS as Pt, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as Kt } from "../rich-text-editor/rich-text-editor-constants.js";
21
+ const Ht = {
22
22
  compatConfig: { MODE: 3 },
23
23
  name: "DtRecipeEditor",
24
24
  components: {
25
- DtListItemGroup: Mt,
26
- DtDropdownSeparator: Qt,
27
- DtListItem: Vt,
28
- DtRichTextEditor: Ut,
29
- DtButton: Nt,
30
- DtPopover: vt,
31
- DtStack: St,
32
- DtInput: Ft,
33
- DtTooltip: Dt,
34
- DtCombobox: xt,
35
- EditorToolbarButton: It,
36
- EditorToolbarDropdownButton: Lt,
37
- EditorToolbarPopoverButton: At,
38
- DtIconQuickReply: lt,
39
- DtIconBold: st,
40
- DtIconItalic: rt,
41
- DtIconUnderline: nt,
42
- DtIconStrikethrough: it,
43
- DtIconListBullet: ot,
44
- DtIconListOrdered: et,
45
- DtIconAlignLeft: tt,
46
- DtIconAlignCenter: $,
47
- DtIconAlignRight: W,
48
- DtIconAlignJustify: Z,
49
- DtIconQuote: X,
50
- DtIconCodeBlock: G,
51
- DtIconLink2: j,
52
- DtIconImage: Y,
53
- DtIconSearch: yt,
54
- DtIconType: J,
55
- DtIconBraces: H,
56
- DtIconChevronDown: Et,
57
- DtIconFontSize: K
25
+ DtListItemGroup: qt,
26
+ DtDropdownSeparator: Mt,
27
+ DtListItem: Qt,
28
+ DtRichTextEditor: zt,
29
+ DtButton: Vt,
30
+ DtPopover: Ut,
31
+ DtStack: Nt,
32
+ DtInput: vt,
33
+ DtTooltip: St,
34
+ DtCombobox: Dt,
35
+ EditorToolbarButton: At,
36
+ EditorToolbarDropdownButton: yt,
37
+ EditorToolbarPopoverButton: Et,
38
+ DtIconQuickReply: ut,
39
+ DtIconBold: at,
40
+ DtIconItalic: st,
41
+ DtIconUnderline: lt,
42
+ DtIconStrikethrough: rt,
43
+ DtIconListBullet: nt,
44
+ DtIconListOrdered: it,
45
+ DtIconAlignLeft: ot,
46
+ DtIconAlignCenter: et,
47
+ DtIconAlignRight: tt,
48
+ DtIconAlignJustify: $,
49
+ DtIconQuote: W,
50
+ DtIconCodeBlock: Z,
51
+ DtIconLink2: X,
52
+ DtIconImage: G,
53
+ DtIconSearch: bt,
54
+ DtIconType: j,
55
+ DtIconBraces: Y,
56
+ DtIconChevronDown: wt,
57
+ DtIconFontSize: J,
58
+ DtIconStopFilled: H
58
59
  },
59
60
  mixins: [],
60
61
  inheritAttrs: !1,
@@ -106,7 +107,7 @@ const Pt = {
106
107
  type: [Boolean, String, Number],
107
108
  default: !1,
108
109
  validator(t) {
109
- return typeof t == "string" ? zt.includes(t) : !0;
110
+ return typeof t == "string" ? Kt.includes(t) : !0;
110
111
  }
111
112
  },
112
113
  /**
@@ -309,6 +310,13 @@ const Pt = {
309
310
  allowTables: {
310
311
  type: Boolean,
311
312
  default: !1
313
+ },
314
+ /**
315
+ * Allow image resizing
316
+ */
317
+ allowImageResize: {
318
+ type: Boolean,
319
+ default: !1
312
320
  }
313
321
  },
314
322
  emits: [
@@ -368,7 +376,7 @@ const Pt = {
368
376
  linkInput: "",
369
377
  currentButtonRefIndex: 0,
370
378
  variableSearchValue: "",
371
- i18n: new wt()
379
+ i18n: new Ct()
372
380
  };
373
381
  },
374
382
  computed: {
@@ -376,7 +384,7 @@ const Pt = {
376
384
  return this.internalInputValue.length;
377
385
  },
378
386
  htmlOutputFormat() {
379
- return qt[2];
387
+ return Pt[2];
380
388
  },
381
389
  flattenedVariableItems() {
382
390
  return this.variableCategories ? this.variableCategories.reduce((t, o) => t.concat(o.items || []), []) : [];
@@ -392,8 +400,8 @@ const Pt = {
392
400
  },
393
401
  orderedRefs() {
394
402
  const t = this.buttonGroups.reduce((function(o, i) {
395
- return i.buttonGroup.forEach((s) => {
396
- o.push(this.getButtonRef(i.key, s.selector));
403
+ return i.buttonGroup.forEach((l) => {
404
+ o.push(this.getButtonRef(i.key, l.selector));
397
405
  }, this), o;
398
406
  }).bind(this), []);
399
407
  return t.push(this.getButtonRef("custom", "link")), t;
@@ -418,7 +426,7 @@ const Pt = {
418
426
  buttonType: "button",
419
427
  label: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
420
428
  selector: "quickReplies",
421
- icon: lt,
429
+ icon: ut,
422
430
  dataQA: "dt-recipe-editor-quick-replies-btn",
423
431
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
424
432
  onClick: this.onQuickRepliesClick
@@ -431,7 +439,7 @@ const Pt = {
431
439
  showBtn: this.showFontStyleButton,
432
440
  buttonType: "popover",
433
441
  selector: "fontStyle",
434
- icon: J,
442
+ icon: j,
435
443
  dataQA: "dt-recipe-editor-font-style-btn",
436
444
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_STYLE_BUTTON_LABEL")
437
445
  },
@@ -439,7 +447,7 @@ const Pt = {
439
447
  showBtn: this.showFontSizeButton,
440
448
  buttonType: "popover",
441
449
  selector: "fontSize",
442
- icon: K,
450
+ icon: J,
443
451
  dataQA: "dt-recipe-editor-font-size-btn",
444
452
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_SIZE_BUTTON_LABEL")
445
453
  },
@@ -447,6 +455,7 @@ const Pt = {
447
455
  showBtn: this.showFontColorButton,
448
456
  buttonType: "custom",
449
457
  selector: "fontColor",
458
+ icon: H,
450
459
  dataQA: "dt-recipe-editor-font-color-btn",
451
460
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_COLOR_BUTTON_LABEL"),
452
461
  onClick: this.onColorPickerButtonClick
@@ -455,7 +464,7 @@ const Pt = {
455
464
  showBtn: this.showBoldButton,
456
465
  buttonType: "button",
457
466
  selector: "bold",
458
- icon: st,
467
+ icon: at,
459
468
  dataQA: "dt-recipe-editor-bold-btn",
460
469
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BOLD_BUTTON_LABEL"),
461
470
  onClick: this.onBoldTextToggle
@@ -464,7 +473,7 @@ const Pt = {
464
473
  showBtn: this.showItalicsButton,
465
474
  buttonType: "button",
466
475
  selector: "italic",
467
- icon: rt,
476
+ icon: st,
468
477
  dataQA: "dt-recipe-editor-italics-btn",
469
478
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ITALICS_BUTTON_LABEL"),
470
479
  onClick: this.onItalicTextToggle
@@ -473,7 +482,7 @@ const Pt = {
473
482
  showBtn: this.showUnderlineButton,
474
483
  buttonType: "button",
475
484
  selector: "underline",
476
- icon: nt,
485
+ icon: lt,
477
486
  dataQA: "dt-recipe-editor-underline-btn",
478
487
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL"),
479
488
  onClick: this.onUnderlineTextToggle
@@ -482,7 +491,7 @@ const Pt = {
482
491
  showBtn: this.showStrikeButton,
483
492
  buttonType: "button",
484
493
  selector: "strike",
485
- icon: it,
494
+ icon: rt,
486
495
  dataQA: "dt-recipe-editor-strike-btn",
487
496
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_STRIKE_BUTTON_LABEL"),
488
497
  onClick: this.onStrikethroughTextToggle
@@ -495,7 +504,7 @@ const Pt = {
495
504
  showBtn: this.showAlignLeftButton,
496
505
  buttonType: "button",
497
506
  selector: { textAlign: "left" },
498
- icon: tt,
507
+ icon: ot,
499
508
  dataQA: "dt-recipe-editor-align-left-btn",
500
509
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL"),
501
510
  onClick: () => this.onTextAlign("left")
@@ -504,7 +513,7 @@ const Pt = {
504
513
  showBtn: this.showAlignCenterButton,
505
514
  buttonType: "button",
506
515
  selector: { textAlign: "center" },
507
- icon: $,
516
+ icon: et,
508
517
  dataQA: "dt-recipe-editor-align-center-btn",
509
518
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL"),
510
519
  onClick: () => this.onTextAlign("center")
@@ -513,7 +522,7 @@ const Pt = {
513
522
  showBtn: this.showAlignRightButton,
514
523
  buttonType: "button",
515
524
  selector: { textAlign: "right" },
516
- icon: W,
525
+ icon: tt,
517
526
  dataQA: "dt-recipe-editor-align-right-btn",
518
527
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL"),
519
528
  onClick: () => this.onTextAlign("right")
@@ -522,7 +531,7 @@ const Pt = {
522
531
  showBtn: this.showAlignJustifyButton,
523
532
  buttonType: "button",
524
533
  selector: { textAlign: "justify" },
525
- icon: Z,
534
+ icon: $,
526
535
  dataQA: "dt-recipe-editor-align-justify-btn",
527
536
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL"),
528
537
  onClick: () => this.onTextAlign("justify")
@@ -535,7 +544,7 @@ const Pt = {
535
544
  showBtn: this.showListItemsButton,
536
545
  buttonType: "button",
537
546
  selector: "bulletList",
538
- icon: ot,
547
+ icon: nt,
539
548
  dataQA: "dt-recipe-editor-list-items-btn",
540
549
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BULLET_LIST_BUTTON_LABEL"),
541
550
  onClick: this.onBulletListToggle
@@ -544,7 +553,7 @@ const Pt = {
544
553
  showBtn: this.showOrderedListButton,
545
554
  buttonType: "button",
546
555
  selector: "orderedList",
547
- icon: et,
556
+ icon: it,
548
557
  dataQA: "dt-recipe-editor-ordered-list-items-btn",
549
558
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL"),
550
559
  onClick: this.onOrderedListToggle
@@ -557,7 +566,7 @@ const Pt = {
557
566
  showBtn: this.showQuoteButton,
558
567
  buttonType: "button",
559
568
  selector: "blockquote",
560
- icon: X,
569
+ icon: W,
561
570
  dataQA: "dt-recipe-editor-blockquote-btn",
562
571
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUOTE_BUTTON_LABEL"),
563
572
  onClick: this.onBlockquoteToggle
@@ -566,7 +575,7 @@ const Pt = {
566
575
  showBtn: this.showCodeBlockButton,
567
576
  buttonType: "button",
568
577
  selector: "codeBlock",
569
- icon: G,
578
+ icon: Z,
570
579
  dataQA: "dt-recipe-editor-code-block-btn",
571
580
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_CODE_BUTTON_LABEL"),
572
581
  onClick: this.onCodeBlockToggle
@@ -575,7 +584,7 @@ const Pt = {
575
584
  showBtn: this.showInlineImageButton,
576
585
  buttonType: "button",
577
586
  selector: "image",
578
- icon: Y,
587
+ icon: G,
579
588
  dataQA: "dt-recipe-editor-inline-image-btn",
580
589
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_IMAGE_BUTTON_LABEL"),
581
590
  // Handle getting image
@@ -585,7 +594,7 @@ const Pt = {
585
594
  showBtn: this.showVariableButton,
586
595
  buttonType: "popover",
587
596
  selector: "variable",
588
- icon: H,
597
+ icon: Y,
589
598
  dataQA: "dt-recipe-editor-variable-btn",
590
599
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_VARIABLE_BUTTON_LABEL")
591
600
  }
@@ -596,7 +605,7 @@ const Pt = {
596
605
  showBtn: this.showAddLink.showAddLinkButton,
597
606
  buttonType: "custom",
598
607
  selector: "link",
599
- icon: j,
608
+ icon: X,
600
609
  dataQA: "dt-recipe-editor-add-link-btn",
601
610
  tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_LINK_BUTTON_LABEL"),
602
611
  onClick: this.openLinkInput
@@ -628,6 +637,9 @@ const Pt = {
628
637
  colorPickerInput() {
629
638
  return document.querySelector(".colorPickerInput");
630
639
  },
640
+ isDefaultFontColor() {
641
+ return this.currentFontColor === K;
642
+ },
631
643
  actionBarBtn() {
632
644
  var o, i;
633
645
  const t = ((i = (o = this.$refs[this.orderedRefs[this.currentButtonRefIndex]][0]) == null ? void 0 : o.$refs) == null ? void 0 : i.buttonRef) || this.$refs[this.orderedRefs[this.currentButtonRefIndex]];
@@ -640,26 +652,26 @@ const Pt = {
640
652
  }
641
653
  },
642
654
  methods: {
643
- removeClassStyleAttrs: kt,
644
- addClassStyleAttrs: _t,
655
+ removeClassStyleAttrs: Lt,
656
+ addClassStyleAttrs: It,
645
657
  onInputFocus(t) {
646
658
  t == null || t.stopPropagation();
647
659
  },
648
660
  removeLink() {
649
- var t, o, i, s, r;
650
- (r = (s = (i = (o = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : o.chain()) == null ? void 0 : i.focus()) == null ? void 0 : s.unsetLink()) == null || r.run(), this.closeLinkInput();
661
+ var t, o, i, l, r;
662
+ (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();
651
663
  },
652
664
  setLink(t) {
653
- var r, e, T;
665
+ var r, e, m;
654
666
  const o = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor;
655
667
  if (t == null || t.preventDefault(), t == null || t.stopPropagation(), !this.linkInput) {
656
668
  this.removeLink();
657
669
  return;
658
670
  }
659
- mt.find((A) => A.test(this.linkInput)) || (this.linkInput = `${gt}${this.linkInput}`);
660
- const s = (T = (e = o == null ? void 0 : o.view) == null ? void 0 : e.state) == null ? void 0 : T.selection;
661
- s.anchor === s.head ? o.chain().focus().insertContentAt(
662
- s.anchor,
671
+ _t.find((A) => A.test(this.linkInput)) || (this.linkInput = `${kt}${this.linkInput}`);
672
+ const l = (m = (e = o == null ? void 0 : o.view) == null ? void 0 : e.state) == null ? void 0 : m.selection;
673
+ l.anchor === l.head ? o.chain().focus().insertContentAt(
674
+ l.anchor,
663
675
  `<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`
664
676
  ).run() : o.chain().focus().extendMarkRange("link").setLink({ href: this.linkInput, class: this.linkOptions.class }).run(), this.closeLinkInput();
665
677
  },
@@ -667,10 +679,10 @@ const Pt = {
667
679
  this.showLinkInput = !0;
668
680
  },
669
681
  updateInput(t) {
670
- var o, i, s;
682
+ var o, i, l;
671
683
  if (!t)
672
684
  return this.closeLinkInput();
673
- this.linkInput = (s = (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null ? void 0 : i.getAttributes("link")) == null ? void 0 : s.href;
685
+ this.linkInput = (l = (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null ? void 0 : i.getAttributes("link")) == null ? void 0 : l.href;
674
686
  },
675
687
  closeLinkInput() {
676
688
  var t;
@@ -693,9 +705,9 @@ const Pt = {
693
705
  (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleStrike().run();
694
706
  },
695
707
  onTextAlign(t) {
696
- var o, i, s, r;
708
+ var o, i, l, r;
697
709
  if ((i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) != null && i.isActive({ textAlign: t }))
698
- return (s = this.$refs.richTextEditor) == null ? void 0 : s.editor.chain().focus().unsetTextAlign().run();
710
+ return (l = this.$refs.richTextEditor) == null ? void 0 : l.editor.chain().focus().unsetTextAlign().run();
699
711
  (r = this.$refs.richTextEditor) == null || r.editor.chain().focus().setTextAlign(t).run();
700
712
  },
701
713
  onBulletListToggle() {
@@ -721,7 +733,8 @@ const Pt = {
721
733
  (i = this.$refs.richTextEditor) == null || i.editor.chain().focus().insertVariable({
722
734
  id: o.id,
723
735
  placeholder: o.placeholder || "",
724
- altText: ""
736
+ altText: "",
737
+ enableAltText: o.enableAltText
725
738
  }).run();
726
739
  },
727
740
  insertInlineImage(t) {
@@ -778,24 +791,24 @@ const Pt = {
778
791
  shiftButtonRefIndex(t) {
779
792
  const o = this.actionBarBtn, i = (this.currentButtonRefIndex + t) % this.orderedRefs.length;
780
793
  this.currentButtonRefIndex = i >= 0 ? i : this.orderedRefs.length + i;
781
- const s = this.actionBarBtn;
782
- o.$el.blur(), s.$el.focus();
794
+ const l = this.actionBarBtn;
795
+ o.$el.blur(), l.$el.focus();
783
796
  },
784
797
  onFontStyleSelect(t) {
785
- var o, i, s, r, e, T;
786
- t ? (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setFontFamily(t).run() : (r = (s = this.$refs.richTextEditor) == null ? void 0 : s.editor) == null || r.chain().focus().unsetFontFamily().run(), (T = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null || T.commands.focus();
798
+ var o, i, l, r, e, m;
799
+ 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();
787
800
  },
788
801
  isCurrentFontFamily(t) {
789
- var o, i, s, r, e;
790
- return t ? (e = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor) == null ? void 0 : e.isActive("textStyle", { fontFamily: t }) : !((s = (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null ? void 0 : i.getAttributes("textStyle")) != null && s.fontFamily);
802
+ var o, i, l, r, e;
803
+ return t ? (e = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor) == null ? void 0 : e.isActive("textStyle", { fontFamily: t }) : !((l = (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null ? void 0 : i.getAttributes("textStyle")) != null && l.fontFamily);
791
804
  },
792
805
  onFontSizeSelect(t) {
793
- var o, i, s, r;
794
- (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setFontSize(t).run(), (r = (s = this.$refs.richTextEditor) == null ? void 0 : s.editor) == null || r.commands.focus();
806
+ var o, i, l, r;
807
+ (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setFontSize(t).run(), (r = (l = this.$refs.richTextEditor) == null ? void 0 : l.editor) == null || r.commands.focus();
795
808
  },
796
809
  isCurrentFontSize(t) {
797
- var o, i, s, r, e;
798
- return t ? (e = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor) == null ? void 0 : e.isActive("textStyle", { fontSize: t }) : !((s = (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null ? void 0 : i.getAttributes("textStyle")) != null && s.fontSize);
810
+ var o, i, l, r, e;
811
+ return t ? (e = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor) == null ? void 0 : e.isActive("textStyle", { fontSize: t }) : !((l = (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null ? void 0 : i.getAttributes("textStyle")) != null && l.fontSize);
799
812
  },
800
813
  getFilteredItemsForCategory(t) {
801
814
  const o = this.variableSearchValue.toLowerCase();
@@ -805,60 +818,60 @@ const Pt = {
805
818
  },
806
819
  updateFontColorInput() {
807
820
  var t, o, i;
808
- this.currentFontColor = ((i = (o = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : i.color) || Tt;
821
+ this.currentFontColor = ((i = (o = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : i.color) || K;
809
822
  },
810
823
  onColorPickerButtonClick() {
811
824
  var t;
812
825
  (t = this.colorPickerInput) == null || t.click();
813
826
  },
814
827
  onColorPickerInput(t) {
815
- var o, i, s, r;
816
- (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setColor(t).run(), (r = (s = this.$refs.richTextEditor) == null ? void 0 : s.editor) == null || r.commands.focus();
828
+ var o, i, l, r;
829
+ (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setColor(t).run(), (r = (l = this.$refs.richTextEditor) == null ? void 0 : l.editor) == null || r.commands.focus(), this.updateFontColorInput();
817
830
  }
818
831
  }
819
- }, Kt = { class: "d-recipe-editor__popover-content" };
820
- function Ht(t, o, i, s, r, e) {
821
- const T = f("dt-icon-search"), A = f("dt-input"), C = f("dt-list-item"), S = f("dt-combobox"), v = f("editor-toolbar-popover-button"), at = f("editor-toolbar-dropdown-button"), y = f("dt-button"), ut = f("dt-dropdown-separator"), ct = f("dt-list-item-group"), dt = f("editor-toolbar-button"), O = f("dt-stack"), ht = f("dt-tooltip"), ft = f("dt-popover"), pt = f("dt-rich-text-editor"), Bt = bt("dt-tooltip");
822
- return u(), g("div", B({ class: "d-recipe-editor" }, e.addClassStyleAttrs(t.$attrs), {
832
+ }, Jt = { class: "d-recipe-editor__popover-content" };
833
+ function Yt(t, o, i, l, r, e) {
834
+ 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");
835
+ return u(), T("div", B({ class: "d-recipe-editor" }, e.addClassStyleAttrs(t.$attrs), {
823
836
  "data-qa": "dt-recipe-editor",
824
837
  role: "presentation",
825
- onClick: o[7] || (o[7] = (l) => t.$refs.richTextEditor.focusEditor())
838
+ onClick: o[7] || (o[7] = (s) => t.$refs.richTextEditor.focusEditor())
826
839
  }), [
827
- d(O, {
840
+ d(C, {
828
841
  class: "d-recipe-editor__top-bar",
829
842
  direction: "row",
830
843
  gap: "450"
831
844
  }, {
832
845
  default: a(() => [
833
- (u(!0), g(_, null, E(e.buttonGroups, (l) => (u(), p(O, {
834
- key: l.key,
846
+ (u(!0), T(_, null, y(e.buttonGroups, (s) => (u(), f(C, {
847
+ key: s.key,
835
848
  direction: "row",
836
849
  gap: "300"
837
850
  }, {
838
851
  default: a(() => [
839
- (u(!0), g(_, null, E(l.buttonGroup, (n) => {
840
- var R, N, U, V, Q, M, q, z;
841
- return u(), g(_, null, [
842
- n.buttonType === "popover" && n.selector === "fontStyle" ? (u(), p(v, {
843
- key: e.getButtonKey(l.key, n.selector),
852
+ (u(!0), T(_, null, y(s.buttonGroup, (n) => {
853
+ var x, N, U, V, z, Q, M, q;
854
+ return u(), T(_, null, [
855
+ n.buttonType === "popover" && n.selector === "fontStyle" ? (u(), f(v, {
856
+ key: e.getButtonKey(s.key, n.selector),
844
857
  ref_for: !0,
845
- ref: e.getButtonRef(l.key, n.selector),
846
- "is-active": (N = (R = t.$refs.richTextEditor) == null ? void 0 : R.editor) == null ? void 0 : N.isActive(n.selector),
858
+ ref: e.getButtonRef(s.key, n.selector),
859
+ "is-active": (N = (x = t.$refs.richTextEditor) == null ? void 0 : x.editor) == null ? void 0 : N.isActive(n.selector),
847
860
  "tooltip-message": n.tooltipMessage,
848
861
  "data-qa": n.dataQA,
849
862
  "popover-data-qa": "dt-recipe-editor-font-style-input-popover",
850
- tabindex: e.canFocus(e.getButtonRef(l.key, n.selector)) ? 0 : -1,
863
+ tabindex: e.canFocus(e.getButtonRef(s.key, n.selector)) ? 0 : -1,
851
864
  icon: n.icon,
852
865
  onShiftFocusRight: e.shiftActionBarFocusRight,
853
866
  onShiftFocusLeft: e.shiftActionBarFocusLeft
854
867
  }, {
855
- content: a(({ close: m }) => [
868
+ content: a(({ close: g }) => [
856
869
  d(S, {
857
870
  label: "",
858
871
  "label-visible": !1,
859
872
  "show-list": !0,
860
873
  "click-on-select": !0,
861
- onEscape: (h) => m()
874
+ onEscape: (h) => g()
862
875
  }, {
863
876
  input: a(({ inputProps: h }) => [
864
877
  d(A, B({ ref_for: !0 }, h, {
@@ -871,21 +884,21 @@ function Ht(t, o, i, s, r, e) {
871
884
  role: "menuitem"
872
885
  }), {
873
886
  leftIcon: a(({ iconSize: c }) => [
874
- d(T, { size: c }, null, 8, ["size"])
887
+ d(m, { size: c }, null, 8, ["size"])
875
888
  ]),
876
889
  _: 1
877
890
  }, 16, ["modelValue", "placeholder"])
878
891
  ]),
879
892
  list: a(({ listProps: h }) => [
880
893
  k("ul", B({ ref_for: !0 }, h), [
881
- (u(!0), g(_, null, E(e.filteredFontStyles, (c) => (u(), p(C, {
894
+ (u(!0), T(_, null, y(e.filteredFontStyles, (c) => (u(), f(R, {
882
895
  key: c.name,
883
896
  selected: e.isCurrentFontFamily(c.value),
884
- style: D({ fontFamily: c.value || "inherit" }),
897
+ style: O({ fontFamily: c.value || "inherit" }),
885
898
  role: "option",
886
899
  "navigation-type": "arrow-keys",
887
900
  onClick: (P) => {
888
- m(), e.onFontStyleSelect(c.value);
901
+ g(), e.onFontStyleSelect(c.value);
889
902
  }
890
903
  }, {
891
904
  default: a(() => [
@@ -899,61 +912,65 @@ function Ht(t, o, i, s, r, e) {
899
912
  }, 1032, ["onEscape"])
900
913
  ]),
901
914
  _: 1
902
- }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "popover" && n.selector === "fontSize" ? (u(), p(at, {
903
- key: e.getButtonKey(l.key, n.selector),
915
+ }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "popover" && n.selector === "fontSize" ? (u(), f(dt, {
916
+ key: e.getButtonKey(s.key, n.selector),
904
917
  ref_for: !0,
905
- ref: e.getButtonRef(l.key, n.selector),
918
+ ref: e.getButtonRef(s.key, n.selector),
906
919
  "is-active": (V = (U = t.$refs.richTextEditor) == null ? void 0 : U.editor) == null ? void 0 : V.isActive(n.selector),
907
920
  "tooltip-message": n.tooltipMessage,
908
921
  "data-qa": n.dataQA,
909
922
  "dropdown-data-qa": "dt-recipe-editor-font-size-input-popover",
910
- tabindex: e.canFocus(e.getButtonRef(l.key, n.selector)) ? 0 : -1,
923
+ tabindex: e.canFocus(e.getButtonRef(s.key, n.selector)) ? 0 : -1,
911
924
  icon: n.icon,
912
925
  onShiftFocusRight: e.shiftActionBarFocusRight,
913
926
  onShiftFocusLeft: e.shiftActionBarFocusLeft
914
927
  }, {
915
- list: a(({ close: m }) => [
916
- (u(!0), g(_, null, E(i.fontSizes, (h) => (u(), p(C, {
928
+ list: a(({ close: g }) => [
929
+ (u(!0), T(_, null, y(i.fontSizes, (h) => (u(), f(R, {
917
930
  key: h.name,
918
931
  selected: e.isCurrentFontSize(h.value),
919
932
  role: "menuitem",
920
933
  "navigation-type": "arrow-keys",
921
934
  onClick: (c) => {
922
- m(), e.onFontSizeSelect(h.value, c);
935
+ g(), e.onFontSizeSelect(h.value, c);
923
936
  }
924
937
  }, {
925
938
  default: a(() => [
926
939
  k("span", {
927
- style: D({ fontSize: h.value })
940
+ style: O({ fontSize: h.value })
928
941
  }, I(h.name), 5)
929
942
  ]),
930
943
  _: 2
931
944
  }, 1032, ["selected", "onClick"]))), 128))
932
945
  ]),
933
946
  _: 1
934
- }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "custom" && n.selector === "fontColor" ? Ot((u(), p(y, {
935
- key: e.getButtonKey(l.key, n.selector),
947
+ }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "custom" && n.selector === "fontColor" ? Rt((u(), f(E, {
948
+ key: e.getButtonKey(s.key, n.selector),
936
949
  ref_for: !0,
937
- ref: e.getButtonRef(l.key, n.selector),
950
+ ref: e.getButtonRef(s.key, n.selector),
938
951
  kind: "muted",
939
952
  importance: "clear",
940
953
  size: "xs",
941
- active: (M = (Q = t.$refs.richTextEditor) == null ? void 0 : Q.editor) == null ? void 0 : M.isActive(n.selector),
942
- tabindex: e.canFocus(e.getButtonRef(l.key, n.selector)) ? 0 : -1,
954
+ active: (Q = (z = t.$refs.richTextEditor) == null ? void 0 : z.editor) == null ? void 0 : Q.isActive(n.selector),
955
+ tabindex: e.canFocus(e.getButtonRef(s.key, n.selector)) ? 0 : -1,
943
956
  "aria-label": n.tooltipMessage,
944
957
  "data-qa": n.dataQA,
945
958
  onKeydown: [
946
959
  b(L(e.shiftActionBarFocusRight, ["stop"]), ["right"]),
947
960
  b(L(e.shiftActionBarFocusLeft, ["stop"]), ["left"])
948
961
  ],
949
- onClick: (m) => n.onClick()
962
+ onClick: (g) => n.onClick()
950
963
  }, {
951
- default: a(() => [
964
+ icon: a(() => [
965
+ (u(), f(ct(n.icon), {
966
+ size: "200",
967
+ style: O(e.isDefaultFontColor ? {} : { color: r.currentFontColor })
968
+ }, null, 8, ["style"])),
952
969
  d(A, {
953
970
  value: r.currentFontColor,
954
- "root-class": "d-w12 d-h12 d-my1",
955
- "input-class": "colorPickerInput d-w100p d-h100p d-p0 d-bar0 d-c-pointer",
956
- "input-wrapper-class": "d-w12 d-h12 d-bar2 d-ba-none",
971
+ "root-class": "d-w0 d-h0 d-of-hidden",
972
+ "input-class": "colorPickerInput d-w0 d-h0 d-p0 d-bar0",
973
+ "input-wrapper-class": "d-w0 d-h0 d-ba-none",
957
974
  size: "sm",
958
975
  type: "color",
959
976
  onInput: e.onColorPickerInput,
@@ -961,29 +978,29 @@ function Ht(t, o, i, s, r, e) {
961
978
  }, ["stop"]))
962
979
  }, null, 8, ["value", "onInput"])
963
980
  ]),
964
- _: 1
965
- }, 8, ["active", "tabindex", "aria-label", "data-qa", "onKeydown", "onClick"])), [
966
- [Bt, { message: n.tooltipMessage, placement: "top" }]
967
- ]) : n.buttonType === "popover" && n.selector === "variable" ? (u(), p(v, {
968
- key: e.getButtonKey(l.key, n.selector),
981
+ _: 2
982
+ }, 1032, ["active", "tabindex", "aria-label", "data-qa", "onKeydown", "onClick"])), [
983
+ [Tt, { message: n.tooltipMessage, placement: "top" }]
984
+ ]) : n.buttonType === "popover" && n.selector === "variable" ? (u(), f(v, {
985
+ key: e.getButtonKey(s.key, n.selector),
969
986
  ref_for: !0,
970
- ref: e.getButtonRef(l.key, n.selector),
987
+ ref: e.getButtonRef(s.key, n.selector),
971
988
  "is-active": !1,
972
989
  "tooltip-message": n.tooltipMessage,
973
990
  "data-qa": n.dataQA,
974
991
  "popover-data-qa": "dt-recipe-editor-variable-popover",
975
- tabindex: e.canFocus(e.getButtonRef(l.key, n.selector)) ? 0 : -1,
992
+ tabindex: e.canFocus(e.getButtonRef(s.key, n.selector)) ? 0 : -1,
976
993
  icon: n.icon,
977
994
  onShiftFocusRight: e.shiftActionBarFocusRight,
978
995
  onShiftFocusLeft: e.shiftActionBarFocusLeft
979
996
  }, {
980
- content: a(({ close: m }) => [
997
+ content: a(({ close: g }) => [
981
998
  d(S, {
982
999
  label: "",
983
1000
  "label-visible": !1,
984
1001
  "show-list": !0,
985
1002
  "click-on-select": !0,
986
- onEscape: (h) => m()
1003
+ onEscape: (h) => g()
987
1004
  }, {
988
1005
  input: a(({ inputProps: h }) => [
989
1006
  d(A, B({ ref_for: !0 }, h, {
@@ -996,33 +1013,33 @@ function Ht(t, o, i, s, r, e) {
996
1013
  role: "menuitem"
997
1014
  }), {
998
1015
  leftIcon: a(({ iconSize: c }) => [
999
- d(T, { size: c }, null, 8, ["size"])
1016
+ d(m, { size: c }, null, 8, ["size"])
1000
1017
  ]),
1001
1018
  _: 1
1002
1019
  }, 16, ["modelValue", "placeholder"])
1003
1020
  ]),
1004
1021
  list: a(({ listProps: h }) => [
1005
1022
  k("div", B({ ref_for: !0 }, h), [
1006
- (u(!0), g(_, null, E(e.filteredCategories, (c, P) => (u(), p(ct, {
1023
+ (u(!0), T(_, null, y(e.filteredCategories, (c, P) => (u(), f(ft, {
1007
1024
  key: c.name,
1008
1025
  heading: c.name,
1009
1026
  "heading-class": "d-headline--sm-compact d-p8"
1010
1027
  }, {
1011
1028
  default: a(() => [
1012
- (u(!0), g(_, null, E(e.getFilteredItemsForCategory(c), (x) => (u(), p(C, {
1013
- key: c.name + x.name,
1029
+ (u(!0), T(_, null, y(e.getFilteredItemsForCategory(c), (F) => (u(), f(R, {
1030
+ key: c.name + F.name,
1014
1031
  role: "option",
1015
1032
  "navigation-type": "arrow-keys",
1016
- onClick: (Jt) => {
1017
- e.insertVariable(c.name, x), m();
1033
+ onClick: (jt) => {
1034
+ e.insertVariable(c.name, F), g();
1018
1035
  }
1019
1036
  }, {
1020
1037
  default: a(() => [
1021
- w(I(x.name), 1)
1038
+ w(I(F.name), 1)
1022
1039
  ]),
1023
1040
  _: 2
1024
1041
  }, 1032, ["onClick"]))), 128)),
1025
- P < e.filteredCategories.length - 1 ? (u(), p(ut, { key: 0 })) : F("", !0)
1042
+ P < e.filteredCategories.length - 1 ? (u(), f(ht, { key: 0 })) : D("", !0)
1026
1043
  ]),
1027
1044
  _: 2
1028
1045
  }, 1032, ["heading"]))), 128))
@@ -1032,33 +1049,33 @@ function Ht(t, o, i, s, r, e) {
1032
1049
  }, 1032, ["onEscape"])
1033
1050
  ]),
1034
1051
  _: 1
1035
- }, 8, ["tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "button" ? (u(), p(dt, {
1036
- key: e.getButtonKey(l.key, n.selector),
1052
+ }, 8, ["tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "button" ? (u(), f(pt, {
1053
+ key: e.getButtonKey(s.key, n.selector),
1037
1054
  ref_for: !0,
1038
- ref: e.getButtonRef(l.key, n.selector),
1039
- "is-active": (z = (q = t.$refs.richTextEditor) == null ? void 0 : q.editor) == null ? void 0 : z.isActive(n.selector),
1055
+ ref: e.getButtonRef(s.key, n.selector),
1056
+ "is-active": (q = (M = t.$refs.richTextEditor) == null ? void 0 : M.editor) == null ? void 0 : q.isActive(n.selector),
1040
1057
  "tooltip-message": n.tooltipMessage,
1041
1058
  "data-qa": n.dataQA,
1042
- tabindex: e.canFocus(e.getButtonRef(l.key, n.selector)) ? 0 : -1,
1059
+ tabindex: e.canFocus(e.getButtonRef(s.key, n.selector)) ? 0 : -1,
1043
1060
  icon: n.icon,
1044
1061
  label: n.label,
1045
1062
  "on-click": n.onClick,
1046
1063
  onShiftFocusRight: e.shiftActionBarFocusRight,
1047
1064
  onShiftFocusLeft: e.shiftActionBarFocusLeft
1048
- }, null, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "label", "on-click", "onShiftFocusRight", "onShiftFocusLeft"])) : F("", !0)
1065
+ }, null, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "label", "on-click", "onShiftFocusRight", "onShiftFocusLeft"])) : D("", !0)
1049
1066
  ], 64);
1050
1067
  }), 256)),
1051
1068
  o[8] || (o[8] = k("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))
1052
1069
  ]),
1053
1070
  _: 2
1054
1071
  }, 1024))), 128)),
1055
- e.linkButton.showBtn ? (u(), p(O, {
1072
+ e.linkButton.showBtn ? (u(), f(C, {
1056
1073
  key: 0,
1057
1074
  direction: "row",
1058
1075
  gap: "300"
1059
1076
  }, {
1060
1077
  default: a(() => [
1061
- d(ft, {
1078
+ d(mt, {
1062
1079
  open: r.showLinkInput,
1063
1080
  "show-close-button": !1,
1064
1081
  "data-qa": "dt-recipe-editor-link-input-popover",
@@ -1071,31 +1088,31 @@ function Ht(t, o, i, s, r, e) {
1071
1088
  onOpened: e.updateInput
1072
1089
  }, {
1073
1090
  anchor: a(() => [
1074
- (u(), p(ht, {
1091
+ (u(), f(Bt, {
1075
1092
  key: e.linkButton.key,
1076
1093
  message: e.linkButton.tooltipMessage,
1077
1094
  placement: "top"
1078
1095
  }, {
1079
1096
  anchor: a(() => {
1080
- var l, n;
1097
+ var s, n;
1081
1098
  return [
1082
- d(y, {
1099
+ d(E, {
1083
1100
  ref: e.getButtonRef("custom", "link"),
1084
- active: (n = (l = t.$refs.richTextEditor) == null ? void 0 : l.editor) == null ? void 0 : n.isActive(e.linkButton.selector),
1101
+ active: (n = (s = t.$refs.richTextEditor) == null ? void 0 : s.editor) == null ? void 0 : n.isActive(e.linkButton.selector),
1085
1102
  "aria-label": e.linkButton.tooltipMessage,
1086
1103
  "data-qa": e.linkButton.dataQA,
1087
1104
  tabindex: e.canFocus(e.getButtonRef("custom", "link")) ? 0 : -1,
1088
1105
  importance: "clear",
1089
1106
  kind: "muted",
1090
1107
  size: "xs",
1091
- onClick: o[3] || (o[3] = (R) => e.linkButton.onClick()),
1108
+ onClick: o[3] || (o[3] = (x) => e.linkButton.onClick()),
1092
1109
  onKeydown: [
1093
1110
  b(L(e.shiftActionBarFocusRight, ["stop"]), ["right"]),
1094
1111
  b(L(e.shiftActionBarFocusLeft, ["stop"]), ["left"])
1095
1112
  ]
1096
1113
  }, {
1097
1114
  icon: a(() => [
1098
- (u(), p(Ct(e.linkButton.icon), { size: "200" }))
1115
+ (u(), f(ct(e.linkButton.icon), { size: "200" }))
1099
1116
  ]),
1100
1117
  _: 1
1101
1118
  }, 8, ["active", "aria-label", "data-qa", "tabindex", "onKeydown"])
@@ -1105,11 +1122,11 @@ function Ht(t, o, i, s, r, e) {
1105
1122
  }, 8, ["message"]))
1106
1123
  ]),
1107
1124
  content: a(() => [
1108
- k("div", Kt, [
1125
+ k("div", Jt, [
1109
1126
  k("span", null, I(e.showAddLinkButtonLabels.title), 1),
1110
1127
  d(A, {
1111
1128
  modelValue: r.linkInput,
1112
- "onUpdate:modelValue": o[4] || (o[4] = (l) => r.linkInput = l),
1129
+ "onUpdate:modelValue": o[4] || (o[4] = (s) => r.linkInput = s),
1113
1130
  "input-aria-label": e.showAddLinkButtonLabels["aria-label"],
1114
1131
  placeholder: i.setLinkPlaceholder,
1115
1132
  "data-qa": "dt-recipe-editor-link-input",
@@ -1124,13 +1141,13 @@ function Ht(t, o, i, s, r, e) {
1124
1141
  ])
1125
1142
  ]),
1126
1143
  footerContent: a(() => [
1127
- d(O, {
1144
+ d(C, {
1128
1145
  direction: "row",
1129
1146
  gap: "300",
1130
1147
  class: "d-recipe-editor__popover-footer"
1131
1148
  }, {
1132
1149
  default: a(() => [
1133
- d(y, B({
1150
+ d(E, B({
1134
1151
  "data-qa": "dt-recipe-editor-remove-link-btn",
1135
1152
  importance: "clear",
1136
1153
  kind: "muted",
@@ -1141,7 +1158,7 @@ function Ht(t, o, i, s, r, e) {
1141
1158
  ]),
1142
1159
  _: 1
1143
1160
  }, 16, ["onClick"]),
1144
- d(y, B({
1161
+ d(E, B({
1145
1162
  "data-qa": "dt-recipe-editor-set-link-cancel-btn",
1146
1163
  importance: "clear",
1147
1164
  kind: "muted",
@@ -1152,7 +1169,7 @@ function Ht(t, o, i, s, r, e) {
1152
1169
  ]),
1153
1170
  _: 1
1154
1171
  }, 16, ["onClick"]),
1155
- d(y, B({
1172
+ d(E, B({
1156
1173
  "data-qa": "dt-recipe-editor-set-link-confirm-btn",
1157
1174
  size: "sm"
1158
1175
  }, e.confirmSetLinkButtonLabels, { onClick: e.setLink }), {
@@ -1169,18 +1186,18 @@ function Ht(t, o, i, s, r, e) {
1169
1186
  }, 8, ["open", "onClick", "onOpened"])
1170
1187
  ]),
1171
1188
  _: 1
1172
- })) : F("", !0)
1189
+ })) : D("", !0)
1173
1190
  ]),
1174
1191
  _: 1
1175
1192
  }),
1176
1193
  k("div", {
1177
- style: D({ "max-height": i.maxHeight }),
1178
- class: "d-recipe-editor__content"
1194
+ style: O({ "max-height": i.maxHeight }),
1195
+ class: xt(["d-recipe-editor__content", { "d-recipe-editor__content-image-resize": i.allowImageResize }])
1179
1196
  }, [
1180
- d(pt, B({
1197
+ d(gt, B({
1181
1198
  ref: "richTextEditor",
1182
1199
  modelValue: r.internalInputValue,
1183
- "onUpdate:modelValue": o[5] || (o[5] = (l) => r.internalInputValue = l),
1200
+ "onUpdate:modelValue": o[5] || (o[5] = (s) => r.internalInputValue = s),
1184
1201
  "allow-font-color": !0,
1185
1202
  "allow-font-family": !0,
1186
1203
  "allow-inline-images": !0,
@@ -1198,19 +1215,20 @@ function Ht(t, o, i, s, r, e) {
1198
1215
  placeholder: i.placeholder,
1199
1216
  "use-div-tags": i.useDivTags,
1200
1217
  "allow-tables": i.allowTables,
1218
+ "allow-image-resize": i.allowImageResize,
1201
1219
  "data-qa": "dt-rich-text-editor"
1202
1220
  }, e.removeClassStyleAttrs(t.$attrs), {
1203
1221
  onTextInput: e.onTextInput,
1204
1222
  onBlur: e.onBlur,
1205
1223
  onFocus: e.onFocus,
1206
- onInput: o[6] || (o[6] = (l) => e.onInput(l)),
1224
+ onInput: o[6] || (o[6] = (s) => e.onInput(s)),
1207
1225
  onSelected: e.onSelected
1208
- }), null, 16, ["modelValue", "allow-font-size", "variable-items", "auto-focus", "editable", "input-aria-label", "input-class", "output-format", "placeholder", "use-div-tags", "allow-tables", "onTextInput", "onBlur", "onFocus", "onSelected"])
1209
- ], 4)
1226
+ }), 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"])
1227
+ ], 6)
1210
1228
  ], 16);
1211
1229
  }
1212
- const fe = /* @__PURE__ */ Rt(Pt, [["render", Ht]]);
1230
+ const Be = /* @__PURE__ */ Ft(Ht, [["render", Yt]]);
1213
1231
  export {
1214
- fe as default
1232
+ Be as default
1215
1233
  };
1216
1234
  //# sourceMappingURL=editor.js.map