@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.
- package/dist/tokens/doc.json +124660 -124660
- package/dist/vue3/component-documentation.json +1 -1
- package/dist/vue3/lib/editor/EditorToolbarButton.cjs +1 -1
- package/dist/vue3/lib/editor/EditorToolbarButton.cjs.map +1 -1
- package/dist/vue3/lib/editor/EditorToolbarButton.js +14 -13
- package/dist/vue3/lib/editor/EditorToolbarButton.js.map +1 -1
- package/dist/vue3/lib/editor/editor.cjs +1 -1
- package/dist/vue3/lib/editor/editor.cjs.map +1 -1
- package/dist/vue3/lib/editor/editor.js +209 -191
- package/dist/vue3/lib/editor/editor.js.map +1 -1
- package/dist/vue3/lib/message-input/message-input.cjs +1 -1
- package/dist/vue3/lib/message-input/message-input.cjs.map +1 -1
- package/dist/vue3/lib/message-input/message-input.js +19 -18
- package/dist/vue3/lib/message-input/message-input.js.map +1 -1
- package/dist/vue3/lib/rich-text-editor/rich-text-editor.cjs +3 -3
- package/dist/vue3/lib/rich-text-editor/rich-text-editor.cjs.map +1 -1
- package/dist/vue3/lib/rich-text-editor/rich-text-editor.js +161 -131
- package/dist/vue3/lib/rich-text-editor/rich-text-editor.js.map +1 -1
- package/dist/vue3/localization/de-DE.cjs +4 -0
- package/dist/vue3/localization/de-DE.cjs.map +1 -1
- package/dist/vue3/localization/de-DE.js +4 -0
- package/dist/vue3/localization/de-DE.js.map +1 -1
- package/dist/vue3/localization/es-LA.cjs +4 -0
- package/dist/vue3/localization/es-LA.cjs.map +1 -1
- package/dist/vue3/localization/es-LA.js +4 -0
- package/dist/vue3/localization/es-LA.js.map +1 -1
- package/dist/vue3/localization/fr-FR.cjs +4 -0
- package/dist/vue3/localization/fr-FR.cjs.map +1 -1
- package/dist/vue3/localization/fr-FR.js +4 -0
- package/dist/vue3/localization/fr-FR.js.map +1 -1
- package/dist/vue3/localization/it-IT.cjs +4 -0
- package/dist/vue3/localization/it-IT.cjs.map +1 -1
- package/dist/vue3/localization/it-IT.js +4 -0
- package/dist/vue3/localization/it-IT.js.map +1 -1
- package/dist/vue3/localization/nl-NL.cjs +4 -0
- package/dist/vue3/localization/nl-NL.cjs.map +1 -1
- package/dist/vue3/localization/nl-NL.js +4 -0
- package/dist/vue3/localization/nl-NL.js.map +1 -1
- package/dist/vue3/localization/pt-BR.cjs +4 -0
- package/dist/vue3/localization/pt-BR.cjs.map +1 -1
- package/dist/vue3/localization/pt-BR.js +4 -0
- package/dist/vue3/localization/pt-BR.js.map +1 -1
- package/dist/vue3/localization/ru-RU.cjs +4 -0
- package/dist/vue3/localization/ru-RU.cjs.map +1 -1
- package/dist/vue3/localization/ru-RU.js +4 -0
- package/dist/vue3/localization/ru-RU.js.map +1 -1
- package/dist/vue3/localization/zh-CN.cjs +4 -0
- package/dist/vue3/localization/zh-CN.cjs.map +1 -1
- package/dist/vue3/localization/zh-CN.js +4 -0
- package/dist/vue3/localization/zh-CN.js.map +1 -1
- package/dist/vue3/style.css +1 -1
- package/dist/vue3/types/components/rich_text_editor/extensions/variable/VariableComponent.vue.d.ts +1 -0
- package/dist/vue3/types/components/rich_text_editor/extensions/variable/VariableComponent.vue.d.ts.map +1 -1
- package/dist/vue3/types/components/rich_text_editor/extensions/variable/variable.d.ts.map +1 -1
- package/dist/vue3/types/recipes/conversation_view/editor/EditorToolbarButton.vue.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -1,60 +1,61 @@
|
|
|
1
|
-
import { EDITOR_DEFAULT_FONT_COLOR as
|
|
2
|
-
import { addClassStyleAttrs as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { DtIconFontSize as
|
|
7
|
-
import { DialtoneLocalization as
|
|
8
|
-
import { resolveComponent as
|
|
9
|
-
import { _ as
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import { RICH_TEXT_EDITOR_OUTPUT_FORMATS as
|
|
21
|
-
const
|
|
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:
|
|
26
|
-
DtDropdownSeparator:
|
|
27
|
-
DtListItem:
|
|
28
|
-
DtRichTextEditor:
|
|
29
|
-
DtButton:
|
|
30
|
-
DtPopover:
|
|
31
|
-
DtStack:
|
|
32
|
-
DtInput:
|
|
33
|
-
DtTooltip:
|
|
34
|
-
DtCombobox:
|
|
35
|
-
EditorToolbarButton:
|
|
36
|
-
EditorToolbarDropdownButton:
|
|
37
|
-
EditorToolbarPopoverButton:
|
|
38
|
-
DtIconQuickReply:
|
|
39
|
-
DtIconBold:
|
|
40
|
-
DtIconItalic:
|
|
41
|
-
DtIconUnderline:
|
|
42
|
-
DtIconStrikethrough:
|
|
43
|
-
DtIconListBullet:
|
|
44
|
-
DtIconListOrdered:
|
|
45
|
-
DtIconAlignLeft:
|
|
46
|
-
DtIconAlignCenter:
|
|
47
|
-
DtIconAlignRight:
|
|
48
|
-
DtIconAlignJustify:
|
|
49
|
-
DtIconQuote:
|
|
50
|
-
DtIconCodeBlock:
|
|
51
|
-
DtIconLink2:
|
|
52
|
-
DtIconImage:
|
|
53
|
-
DtIconSearch:
|
|
54
|
-
DtIconType:
|
|
55
|
-
DtIconBraces:
|
|
56
|
-
DtIconChevronDown:
|
|
57
|
-
DtIconFontSize:
|
|
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" ?
|
|
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
|
|
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
|
|
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((
|
|
396
|
-
o.push(this.getButtonRef(i.key,
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
644
|
-
addClassStyleAttrs:
|
|
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,
|
|
650
|
-
(r = (
|
|
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,
|
|
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
|
-
|
|
660
|
-
const
|
|
661
|
-
|
|
662
|
-
|
|
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,
|
|
682
|
+
var o, i, l;
|
|
671
683
|
if (!t)
|
|
672
684
|
return this.closeLinkInput();
|
|
673
|
-
this.linkInput = (
|
|
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,
|
|
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 (
|
|
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
|
|
782
|
-
o.$el.blur(),
|
|
794
|
+
const l = this.actionBarBtn;
|
|
795
|
+
o.$el.blur(), l.$el.focus();
|
|
783
796
|
},
|
|
784
797
|
onFontStyleSelect(t) {
|
|
785
|
-
var o, i,
|
|
786
|
-
t ? (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setFontFamily(t).run() : (r = (
|
|
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,
|
|
790
|
-
return t ? (e = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor) == null ? void 0 : e.isActive("textStyle", { fontFamily: t }) : !((
|
|
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,
|
|
794
|
-
(i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setFontSize(t).run(), (r = (
|
|
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,
|
|
798
|
-
return t ? (e = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor) == null ? void 0 : e.isActive("textStyle", { fontSize: t }) : !((
|
|
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) ||
|
|
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,
|
|
816
|
-
(i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setColor(t).run(), (r = (
|
|
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
|
-
},
|
|
820
|
-
function
|
|
821
|
-
const
|
|
822
|
-
return u(),
|
|
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] = (
|
|
838
|
+
onClick: o[7] || (o[7] = (s) => t.$refs.richTextEditor.focusEditor())
|
|
826
839
|
}), [
|
|
827
|
-
d(
|
|
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),
|
|
834
|
-
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),
|
|
840
|
-
var
|
|
841
|
-
return u(),
|
|
842
|
-
n.buttonType === "popover" && n.selector === "fontStyle" ? (u(),
|
|
843
|
-
key: e.getButtonKey(
|
|
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(
|
|
846
|
-
"is-active": (N = (
|
|
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(
|
|
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:
|
|
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) =>
|
|
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(
|
|
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),
|
|
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:
|
|
897
|
+
style: O({ fontFamily: c.value || "inherit" }),
|
|
885
898
|
role: "option",
|
|
886
899
|
"navigation-type": "arrow-keys",
|
|
887
900
|
onClick: (P) => {
|
|
888
|
-
|
|
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(),
|
|
903
|
-
key: e.getButtonKey(
|
|
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(
|
|
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(
|
|
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:
|
|
916
|
-
(u(!0),
|
|
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
|
-
|
|
935
|
+
g(), e.onFontSizeSelect(h.value, c);
|
|
923
936
|
}
|
|
924
937
|
}, {
|
|
925
938
|
default: a(() => [
|
|
926
939
|
k("span", {
|
|
927
|
-
style:
|
|
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" ?
|
|
935
|
-
key: e.getButtonKey(
|
|
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(
|
|
950
|
+
ref: e.getButtonRef(s.key, n.selector),
|
|
938
951
|
kind: "muted",
|
|
939
952
|
importance: "clear",
|
|
940
953
|
size: "xs",
|
|
941
|
-
active: (
|
|
942
|
-
tabindex: e.canFocus(e.getButtonRef(
|
|
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: (
|
|
962
|
+
onClick: (g) => n.onClick()
|
|
950
963
|
}, {
|
|
951
|
-
|
|
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-
|
|
955
|
-
"input-class": "colorPickerInput d-
|
|
956
|
-
"input-wrapper-class": "d-
|
|
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
|
-
_:
|
|
965
|
-
},
|
|
966
|
-
[
|
|
967
|
-
]) : n.buttonType === "popover" && n.selector === "variable" ? (u(),
|
|
968
|
-
key: e.getButtonKey(
|
|
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(
|
|
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(
|
|
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:
|
|
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) =>
|
|
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(
|
|
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),
|
|
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),
|
|
1013
|
-
key: c.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: (
|
|
1017
|
-
e.insertVariable(c.name,
|
|
1033
|
+
onClick: (jt) => {
|
|
1034
|
+
e.insertVariable(c.name, F), g();
|
|
1018
1035
|
}
|
|
1019
1036
|
}, {
|
|
1020
1037
|
default: a(() => [
|
|
1021
|
-
w(I(
|
|
1038
|
+
w(I(F.name), 1)
|
|
1022
1039
|
]),
|
|
1023
1040
|
_: 2
|
|
1024
1041
|
}, 1032, ["onClick"]))), 128)),
|
|
1025
|
-
P < e.filteredCategories.length - 1 ? (u(),
|
|
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(),
|
|
1036
|
-
key: e.getButtonKey(
|
|
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(
|
|
1039
|
-
"is-active": (
|
|
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(
|
|
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"])) :
|
|
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(),
|
|
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(
|
|
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(),
|
|
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
|
|
1097
|
+
var s, n;
|
|
1081
1098
|
return [
|
|
1082
|
-
d(
|
|
1099
|
+
d(E, {
|
|
1083
1100
|
ref: e.getButtonRef("custom", "link"),
|
|
1084
|
-
active: (n = (
|
|
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] = (
|
|
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(),
|
|
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",
|
|
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] = (
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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
|
-
})) :
|
|
1189
|
+
})) : D("", !0)
|
|
1173
1190
|
]),
|
|
1174
1191
|
_: 1
|
|
1175
1192
|
}),
|
|
1176
1193
|
k("div", {
|
|
1177
|
-
style:
|
|
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(
|
|
1197
|
+
d(gt, B({
|
|
1181
1198
|
ref: "richTextEditor",
|
|
1182
1199
|
modelValue: r.internalInputValue,
|
|
1183
|
-
"onUpdate:modelValue": o[5] || (o[5] = (
|
|
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] = (
|
|
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
|
-
],
|
|
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
|
|
1230
|
+
const Be = /* @__PURE__ */ Ft(Ht, [["render", Yt]]);
|
|
1213
1231
|
export {
|
|
1214
|
-
|
|
1232
|
+
Be as default
|
|
1215
1233
|
};
|
|
1216
1234
|
//# sourceMappingURL=editor.js.map
|