@dialpad/dialtone-vue 2.185.0 → 2.186.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/component-documentation.json +1 -1
- package/dist/lib/button/button-constants.cjs +1 -1
- package/dist/lib/button/button-constants.cjs.map +1 -1
- package/dist/lib/button/button-constants.js +3 -2
- package/dist/lib/button/button-constants.js.map +1 -1
- package/dist/lib/button/button.cjs.map +1 -1
- package/dist/lib/button/button.js +1 -1
- package/dist/lib/button/button.js.map +1 -1
- package/dist/lib/editor/editor.cjs.map +1 -1
- package/dist/lib/editor/editor.js.map +1 -1
- package/dist/lib/message-input/message-input.cjs.map +1 -1
- package/dist/lib/message-input/message-input.js.map +1 -1
- package/dist/lib/rich-text-editor/rich-text-editor.cjs.map +1 -1
- package/dist/lib/rich-text-editor/rich-text-editor.js.map +1 -1
- package/dist/types/components/button/button_constants.d.ts +2 -1
- package/dist/types/components/button/button_constants.d.ts.map +1 -1
- package/package.json +5 -5
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={xs:"d-btn--xs",sm:"d-btn--sm",md:"",lg:"d-btn--lg",xl:"d-btn--xl"},n={default:"",muted:"d-btn--muted",danger:"d-btn--danger",inverted:"d-btn--inverted"},i={clear:"",
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={xs:"d-btn--xs",sm:"d-btn--sm",md:"",lg:"d-btn--lg",xl:"d-btn--xl"},n={default:"",muted:"d-btn--muted",danger:"d-btn--danger",positive:"d-btn--positive",inverted:"d-btn--inverted"},i={clear:"",outlined:"d-btn--outlined",primary:"d-btn--primary"},o=["submit","reset","button"],d={left:"d-btn__icon--left",right:"d-btn__icon--right",top:"d-btn__icon--top",bottom:"d-btn__icon--bottom"},r=[{circle:!0,kind:"default",importance:"primary",message:t(!0,"default","primary")},{circle:!0,kind:"danger",importance:"outlined",message:t(!0,"danger","outlined")},{circle:!0,kind:"muted",importance:"primary",message:t(!0,"muted","primary")},{circle:!1,kind:"muted",importance:"primary",message:t(!1,"muted","primary")}],a={xs:"200",sm:"200",md:"300",lg:"400",xl:"500"};function t(s,I,l){return`You cannot have a ${s?"circle ":""}button with kind: ${I} and importance: ${l} as it does not exist in our design system. See https://dialtone.dialpad.com/components/button.html for a list of available button styles`}const m={BUTTON_SIZE_MODIFIERS:e,BUTTON_KIND_MODIFIERS:n,BUTTON_IMPORTANCE_MODIFIERS:i,BUTTON_TYPES:o,ICON_POSITION_MODIFIERS:d,INVALID_COMBINATION:r,BUTTON_ICON_SIZES:a};exports.BUTTON_ICON_SIZES=a;exports.BUTTON_IMPORTANCE_MODIFIERS=i;exports.BUTTON_KIND_MODIFIERS=n;exports.BUTTON_SIZE_MODIFIERS=e;exports.BUTTON_TYPES=o;exports.ICON_POSITION_MODIFIERS=d;exports.INVALID_COMBINATION=r;exports.default=m;
|
|
2
2
|
//# sourceMappingURL=button-constants.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-constants.cjs","sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n xs: 'd-btn--xs',\n sm: 'd-btn--sm',\n md: '',\n lg: 'd-btn--lg',\n xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n default: '',\n muted: 'd-btn--muted',\n danger: 'd-btn--danger',\n inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n clear: '',\n
|
|
1
|
+
{"version":3,"file":"button-constants.cjs","sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n xs: 'd-btn--xs',\n sm: 'd-btn--sm',\n md: '',\n lg: 'd-btn--lg',\n xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n default: '',\n muted: 'd-btn--muted',\n danger: 'd-btn--danger',\n positive: 'd-btn--positive',\n inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n clear: '',\n outlined: 'd-btn--outlined',\n primary: 'd-btn--primary',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n left: 'd-btn__icon--left',\n right: 'd-btn__icon--right',\n top: 'd-btn__icon--top',\n bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n {\n circle: true,\n kind: 'default',\n importance: 'primary',\n message: _invalidCombinationMessage(true, 'default', 'primary'),\n },\n {\n circle: true,\n kind: 'danger',\n importance: 'outlined',\n message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n },\n {\n circle: true,\n kind: 'muted',\n importance: 'primary',\n message: _invalidCombinationMessage(true, 'muted', 'primary'),\n },\n {\n circle: false,\n kind: 'muted',\n importance: 'primary',\n message: _invalidCombinationMessage(false, 'muted', 'primary'),\n },\n];\n\nexport const BUTTON_ICON_SIZES = {\n xs: '200',\n sm: '200',\n md: '300',\n lg: '400',\n xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n BUTTON_SIZE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_TYPES,\n ICON_POSITION_MODIFIERS,\n INVALID_COMBINATION,\n BUTTON_ICON_SIZES,\n};\n"],"names":["BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_TYPES","ICON_POSITION_MODIFIERS","INVALID_COMBINATION","_invalidCombinationMessage","BUTTON_ICON_SIZES","circle","kind","importance","button_constants"],"mappings":"4GAAY,MAACA,EAAwB,CACnC,GAAI,YACJ,GAAI,YACJ,GAAI,GACJ,GAAI,YACJ,GAAI,WACN,EAEaC,EAAwB,CACnC,QAAS,GACT,MAAO,eACP,OAAQ,gBACR,SAAU,kBACV,SAAU,iBACZ,EAEaC,EAA8B,CACzC,MAAO,GACP,SAAU,kBACV,QAAS,gBACX,EAEaC,EAAe,CAAC,SAAU,QAAS,QAAQ,EAE3CC,EAA0B,CACrC,KAAM,oBACN,MAAO,qBACP,IAAK,mBACL,OAAQ,qBACV,EAEaC,EAAsB,CACjC,CACE,OAAQ,GACR,KAAM,UACN,WAAY,UACZ,QAASC,EAA2B,GAAM,UAAW,SAAS,CAC/D,EACD,CACE,OAAQ,GACR,KAAM,SACN,WAAY,WACZ,QAASA,EAA2B,GAAM,SAAU,UAAU,CAC/D,EACD,CACE,OAAQ,GACR,KAAM,QACN,WAAY,UACZ,QAASA,EAA2B,GAAM,QAAS,SAAS,CAC7D,EACD,CACE,OAAQ,GACR,KAAM,QACN,WAAY,UACZ,QAASA,EAA2B,GAAO,QAAS,SAAS,CAC9D,CACH,EAEaC,EAAoB,CAC/B,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,KACN,EAEA,SAASD,EAA4BE,EAAQC,EAAMC,EAAY,CAC7D,MAAO,qBAAqBF,EAAS,UAAY,EAAE,qBACxCC,CAAI,oBAAoBC,CAAU,2IAI/C,CAEA,MAAeC,EAAA,CACb,sBAAAX,EACA,sBAAAC,EACA,4BAAAC,EACA,aAAAC,EACA,wBAAAC,EACA,oBAAAC,EACA,kBAAAE,CACF"}
|
|
@@ -8,11 +8,12 @@ const o = {
|
|
|
8
8
|
default: "",
|
|
9
9
|
muted: "d-btn--muted",
|
|
10
10
|
danger: "d-btn--danger",
|
|
11
|
+
positive: "d-btn--positive",
|
|
11
12
|
inverted: "d-btn--inverted"
|
|
12
13
|
}, r = {
|
|
13
14
|
clear: "",
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
outlined: "d-btn--outlined",
|
|
16
|
+
primary: "d-btn--primary"
|
|
16
17
|
}, a = ["submit", "reset", "button"], s = {
|
|
17
18
|
left: "d-btn__icon--left",
|
|
18
19
|
right: "d-btn__icon--right",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-constants.js","sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n xs: 'd-btn--xs',\n sm: 'd-btn--sm',\n md: '',\n lg: 'd-btn--lg',\n xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n default: '',\n muted: 'd-btn--muted',\n danger: 'd-btn--danger',\n inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n clear: '',\n
|
|
1
|
+
{"version":3,"file":"button-constants.js","sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n xs: 'd-btn--xs',\n sm: 'd-btn--sm',\n md: '',\n lg: 'd-btn--lg',\n xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n default: '',\n muted: 'd-btn--muted',\n danger: 'd-btn--danger',\n positive: 'd-btn--positive',\n inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n clear: '',\n outlined: 'd-btn--outlined',\n primary: 'd-btn--primary',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n left: 'd-btn__icon--left',\n right: 'd-btn__icon--right',\n top: 'd-btn__icon--top',\n bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n {\n circle: true,\n kind: 'default',\n importance: 'primary',\n message: _invalidCombinationMessage(true, 'default', 'primary'),\n },\n {\n circle: true,\n kind: 'danger',\n importance: 'outlined',\n message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n },\n {\n circle: true,\n kind: 'muted',\n importance: 'primary',\n message: _invalidCombinationMessage(true, 'muted', 'primary'),\n },\n {\n circle: false,\n kind: 'muted',\n importance: 'primary',\n message: _invalidCombinationMessage(false, 'muted', 'primary'),\n },\n];\n\nexport const BUTTON_ICON_SIZES = {\n xs: '200',\n sm: '200',\n md: '300',\n lg: '400',\n xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n BUTTON_SIZE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_TYPES,\n ICON_POSITION_MODIFIERS,\n INVALID_COMBINATION,\n BUTTON_ICON_SIZES,\n};\n"],"names":["BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_TYPES","ICON_POSITION_MODIFIERS","INVALID_COMBINATION","_invalidCombinationMessage","BUTTON_ICON_SIZES","circle","kind","importance","button_constants"],"mappings":"AAAY,MAACA,IAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAwB;AAAA,EACnC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ,GAEaC,IAA8B;AAAA,EACzC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AACX,GAEaC,IAAe,CAAC,UAAU,SAAS,QAAQ,GAE3CC,IAA0B;AAAA,EACrC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AACV,GAEaC,IAAsB;AAAA,EACjC;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASC,EAA2B,IAAM,WAAW,SAAS;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASA,EAA2B,IAAM,UAAU,UAAU;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASA,EAA2B,IAAM,SAAS,SAAS;AAAA,EAC7D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASA,EAA2B,IAAO,SAAS,SAAS;AAAA,EAC9D;AACH,GAEaC,IAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAASD,EAA4BE,GAAQC,GAAMC,GAAY;AAC7D,SAAO,qBAAqBF,IAAS,YAAY,EAAE,qBACxCC,CAAI,oBAAoBC,CAAU;AAI/C;AAEA,MAAeC,IAAA;AAAA,EACb,uBAAAX;AAAA,EACA,uBAAAC;AAAA,EACA,6BAAAC;AAAA,EACA,cAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAE;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n <button\n :class=\"[\n 'base-button__button',\n buttonClasses(),\n ]\"\n data-qa=\"dt-button\"\n :type=\"type\"\n :disabled=\"disabled\"\n :style=\"{ width: width }\"\n :aria-live=\"computedAriaLive\"\n :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n v-on=\"buttonListeners\"\n >\n <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n <span\n v-if=\"shouldRenderIcon()\"\n data-qa=\"dt-button-icon\"\n :class=\"[\n 'base-button__icon',\n 'd-btn__icon',\n ICON_POSITION_MODIFIERS[iconPosition],\n ]\"\n >\n <!-- @slot Button icon -->\n <slot\n name=\"icon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <span\n v-if=\"$slots.default\"\n data-qa=\"dt-button-label\"\n :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n >\n <!-- @slot Content within button -->\n <slot />\n </span>\n </button>\n</template>\n\n<script>\nimport Vue from 'vue';\n\nimport {\n BUTTON_SIZE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_ICON_SIZES,\n BUTTON_TYPES,\n ICON_POSITION_MODIFIERS,\n INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n name: 'DtButton',\n\n props: {\n /**\n * Whether the button is a circle or not.\n * @values true, false\n */\n circle: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The position of the icon slot within the button.\n * @values left, right, top, bottom\n */\n iconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /**\n * The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n */\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /**\n * Whether the button should be styled as a link or not.\n * @values true, false\n * @see DtLink\n */\n link: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the link and button if the button is styled as a link.\n * @values default, warning, danger, success, muted\n * @see DtLink\n */\n linkKind: {\n type: String,\n default: 'default',\n validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n },\n\n /**\n * Determines whether the link should have inverted styling if the button is styled as a link.\n * @values true, false\n * @see DtLink\n */\n linkInverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button disabled attribute\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button type attribute\n * <a\n * class=\"d-link\"\n * href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n * target=\"_blank\"\n * >\n * (Reference)\n * </a>\n * @values button, submit, reset\n */\n type: {\n type: String,\n default: 'button',\n validator: (t) => BUTTON_TYPES.includes(t),\n },\n\n /**\n * Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n */\n width: {\n type: String,\n default: null,\n },\n\n /**\n * The size of the button.\n * @values xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /**\n * Used to customize the label container\n */\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Whether the button should display a loading animation or not.\n * @values true, false\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the button.\n * @values default, muted, danger, inverted\n */\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /**\n * Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus. default is to not.\n * @values true, false\n */\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have active styling\n * default is false.\n * @values true, false\n */\n active: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native button click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Native button focus in event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native button focus out event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n ],\n\n data () {\n return {\n ICON_POSITION_MODIFIERS,\n // whether the button is currently in focus\n isInFocus: false,\n };\n },\n\n computed: {\n\n buttonListeners () {\n if (!this.assertiveOnFocus) {\n return this.$listeners;\n }\n return {\n ...this.$listeners,\n focusin: (e) => {\n this.isInFocus = true;\n },\n\n focusout: (e) => {\n this.isInFocus = false;\n },\n };\n },\n\n computedAriaLive () {\n return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n },\n\n iconSize () {\n return BUTTON_ICON_SIZES[this.size];\n },\n },\n\n watch: {\n $props: {\n deep: true,\n immediate: true,\n handler () {\n if (process.env.NODE_ENV === 'production') return;\n\n if (this.circle && this.link) {\n Vue.util.warn('You cannot enable circle and link at the same time', this);\n }\n\n this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n },\n },\n },\n\n methods: {\n buttonClasses () {\n if (this.link) {\n return [\n 'd-link',\n getLinkKindModifier(this.linkKind, this.linkInverted),\n BUTTON_SIZE_MODIFIERS[this.size],\n ];\n }\n return [\n 'd-btn',\n BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n BUTTON_KIND_MODIFIERS[this.kind],\n BUTTON_SIZE_MODIFIERS[this.size],\n {\n 'd-btn--circle': this.circle,\n 'd-btn--loading': this.loading,\n 'd-btn--icon-only': this.isIconOnly(),\n 'd-btn--vertical': this.isVerticalIconLayout(),\n 'd-btn--active': this.active,\n },\n ];\n },\n\n isInvalidPropCombination (circle, kind, importance) {\n for (const row of INVALID_COMBINATION) {\n if (circle === row.circle && kind === row.kind && importance === row.importance) {\n console.warn(row.message);\n return false;\n }\n }\n return true;\n },\n\n shouldRenderIcon () {\n return this.$scopedSlots.icon && this.$scopedSlots.icon() && !this.link;\n },\n\n isIconOnly () {\n return this.shouldRenderIcon() && !this.$slots.default;\n },\n\n isVerticalIconLayout () {\n return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n },\n },\n};\n</script>\n"],"names":["_sfc_main","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","lk","LINK_KIND_MODIFIERS","t","BUTTON_TYPES","s","BUTTON_SIZE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","BUTTON_ICON_SIZES","Vue","getLinkKindModifier","circle","kind","importance","row","INVALID_COMBINATION"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n <button\n :class=\"[\n 'base-button__button',\n buttonClasses(),\n ]\"\n data-qa=\"dt-button\"\n :type=\"type\"\n :disabled=\"disabled\"\n :style=\"{ width: width }\"\n :aria-live=\"computedAriaLive\"\n :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n v-on=\"buttonListeners\"\n >\n <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n <span\n v-if=\"shouldRenderIcon()\"\n data-qa=\"dt-button-icon\"\n :class=\"[\n 'base-button__icon',\n 'd-btn__icon',\n ICON_POSITION_MODIFIERS[iconPosition],\n ]\"\n >\n <!-- @slot Button icon -->\n <slot\n name=\"icon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <span\n v-if=\"$slots.default\"\n data-qa=\"dt-button-label\"\n :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n >\n <!-- @slot Content within button -->\n <slot />\n </span>\n </button>\n</template>\n\n<script>\nimport Vue from 'vue';\n\nimport {\n BUTTON_SIZE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_ICON_SIZES,\n BUTTON_TYPES,\n ICON_POSITION_MODIFIERS,\n INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n name: 'DtButton',\n\n props: {\n /**\n * Whether the button is a circle or not.\n * @values true, false\n */\n circle: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The position of the icon slot within the button.\n * @values left, right, top, bottom\n */\n iconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /**\n * The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n */\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /**\n * Whether the button should be styled as a link or not.\n * @values true, false\n * @see DtLink\n */\n link: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the link and button if the button is styled as a link.\n * @values default, warning, danger, success, muted\n * @see DtLink\n */\n linkKind: {\n type: String,\n default: 'default',\n validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n },\n\n /**\n * Determines whether the link should have inverted styling if the button is styled as a link.\n * @values true, false\n * @see DtLink\n */\n linkInverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button disabled attribute\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button type attribute\n * <a\n * class=\"d-link\"\n * href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n * target=\"_blank\"\n * >\n * (Reference)\n * </a>\n * @values button, submit, reset\n */\n type: {\n type: String,\n default: 'button',\n validator: (t) => BUTTON_TYPES.includes(t),\n },\n\n /**\n * Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n */\n width: {\n type: String,\n default: null,\n },\n\n /**\n * The size of the button.\n * @values xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /**\n * Used to customize the label container\n */\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Whether the button should display a loading animation or not.\n * @values true, false\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the button.\n * @values default, muted, danger, positive, inverted\n */\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /**\n * Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus. default is to not.\n * @values true, false\n */\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have active styling\n * default is false.\n * @values true, false\n */\n active: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native button click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Native button focus in event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native button focus out event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n ],\n\n data () {\n return {\n ICON_POSITION_MODIFIERS,\n // whether the button is currently in focus\n isInFocus: false,\n };\n },\n\n computed: {\n\n buttonListeners () {\n if (!this.assertiveOnFocus) {\n return this.$listeners;\n }\n return {\n ...this.$listeners,\n focusin: (e) => {\n this.isInFocus = true;\n },\n\n focusout: (e) => {\n this.isInFocus = false;\n },\n };\n },\n\n computedAriaLive () {\n return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n },\n\n iconSize () {\n return BUTTON_ICON_SIZES[this.size];\n },\n },\n\n watch: {\n $props: {\n deep: true,\n immediate: true,\n handler () {\n if (process.env.NODE_ENV === 'production') return;\n\n if (this.circle && this.link) {\n Vue.util.warn('You cannot enable circle and link at the same time', this);\n }\n\n this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n },\n },\n },\n\n methods: {\n buttonClasses () {\n if (this.link) {\n return [\n 'd-link',\n getLinkKindModifier(this.linkKind, this.linkInverted),\n BUTTON_SIZE_MODIFIERS[this.size],\n ];\n }\n return [\n 'd-btn',\n BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n BUTTON_KIND_MODIFIERS[this.kind],\n BUTTON_SIZE_MODIFIERS[this.size],\n {\n 'd-btn--circle': this.circle,\n 'd-btn--loading': this.loading,\n 'd-btn--icon-only': this.isIconOnly(),\n 'd-btn--vertical': this.isVerticalIconLayout(),\n 'd-btn--active': this.active,\n },\n ];\n },\n\n isInvalidPropCombination (circle, kind, importance) {\n for (const row of INVALID_COMBINATION) {\n if (circle === row.circle && kind === row.kind && importance === row.importance) {\n console.warn(row.message);\n return false;\n }\n }\n return true;\n },\n\n shouldRenderIcon () {\n return this.$scopedSlots.icon && this.$scopedSlots.icon() && !this.link;\n },\n\n isIconOnly () {\n return this.shouldRenderIcon() && !this.$slots.default;\n },\n\n isVerticalIconLayout () {\n return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n },\n },\n};\n</script>\n"],"names":["_sfc_main","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","lk","LINK_KIND_MODIFIERS","t","BUTTON_TYPES","s","BUTTON_SIZE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","BUTTON_ICON_SIZES","Vue","getLinkKindModifier","circle","kind","importance","row","INVALID_COMBINATION"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n <button\n :class=\"[\n 'base-button__button',\n buttonClasses(),\n ]\"\n data-qa=\"dt-button\"\n :type=\"type\"\n :disabled=\"disabled\"\n :style=\"{ width: width }\"\n :aria-live=\"computedAriaLive\"\n :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n v-on=\"buttonListeners\"\n >\n <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n <span\n v-if=\"shouldRenderIcon()\"\n data-qa=\"dt-button-icon\"\n :class=\"[\n 'base-button__icon',\n 'd-btn__icon',\n ICON_POSITION_MODIFIERS[iconPosition],\n ]\"\n >\n <!-- @slot Button icon -->\n <slot\n name=\"icon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <span\n v-if=\"$slots.default\"\n data-qa=\"dt-button-label\"\n :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n >\n <!-- @slot Content within button -->\n <slot />\n </span>\n </button>\n</template>\n\n<script>\nimport Vue from 'vue';\n\nimport {\n BUTTON_SIZE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_ICON_SIZES,\n BUTTON_TYPES,\n ICON_POSITION_MODIFIERS,\n INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n name: 'DtButton',\n\n props: {\n /**\n * Whether the button is a circle or not.\n * @values true, false\n */\n circle: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The position of the icon slot within the button.\n * @values left, right, top, bottom\n */\n iconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /**\n * The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n */\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /**\n * Whether the button should be styled as a link or not.\n * @values true, false\n * @see DtLink\n */\n link: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the link and button if the button is styled as a link.\n * @values default, warning, danger, success, muted\n * @see DtLink\n */\n linkKind: {\n type: String,\n default: 'default',\n validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n },\n\n /**\n * Determines whether the link should have inverted styling if the button is styled as a link.\n * @values true, false\n * @see DtLink\n */\n linkInverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button disabled attribute\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button type attribute\n * <a\n * class=\"d-link\"\n * href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n * target=\"_blank\"\n * >\n * (Reference)\n * </a>\n * @values button, submit, reset\n */\n type: {\n type: String,\n default: 'button',\n validator: (t) => BUTTON_TYPES.includes(t),\n },\n\n /**\n * Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n */\n width: {\n type: String,\n default: null,\n },\n\n /**\n * The size of the button.\n * @values xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /**\n * Used to customize the label container\n */\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Whether the button should display a loading animation or not.\n * @values true, false\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the button.\n * @values default, muted, danger, inverted\n */\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /**\n * Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus. default is to not.\n * @values true, false\n */\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have active styling\n * default is false.\n * @values true, false\n */\n active: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native button click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Native button focus in event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native button focus out event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n ],\n\n data () {\n return {\n ICON_POSITION_MODIFIERS,\n // whether the button is currently in focus\n isInFocus: false,\n };\n },\n\n computed: {\n\n buttonListeners () {\n if (!this.assertiveOnFocus) {\n return this.$listeners;\n }\n return {\n ...this.$listeners,\n focusin: (e) => {\n this.isInFocus = true;\n },\n\n focusout: (e) => {\n this.isInFocus = false;\n },\n };\n },\n\n computedAriaLive () {\n return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n },\n\n iconSize () {\n return BUTTON_ICON_SIZES[this.size];\n },\n },\n\n watch: {\n $props: {\n deep: true,\n immediate: true,\n handler () {\n if (process.env.NODE_ENV === 'production') return;\n\n if (this.circle && this.link) {\n Vue.util.warn('You cannot enable circle and link at the same time', this);\n }\n\n this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n },\n },\n },\n\n methods: {\n buttonClasses () {\n if (this.link) {\n return [\n 'd-link',\n getLinkKindModifier(this.linkKind, this.linkInverted),\n BUTTON_SIZE_MODIFIERS[this.size],\n ];\n }\n return [\n 'd-btn',\n BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n BUTTON_KIND_MODIFIERS[this.kind],\n BUTTON_SIZE_MODIFIERS[this.size],\n {\n 'd-btn--circle': this.circle,\n 'd-btn--loading': this.loading,\n 'd-btn--icon-only': this.isIconOnly(),\n 'd-btn--vertical': this.isVerticalIconLayout(),\n 'd-btn--active': this.active,\n },\n ];\n },\n\n isInvalidPropCombination (circle, kind, importance) {\n for (const row of INVALID_COMBINATION) {\n if (circle === row.circle && kind === row.kind && importance === row.importance) {\n console.warn(row.message);\n return false;\n }\n }\n return true;\n },\n\n shouldRenderIcon () {\n return this.$scopedSlots.icon && this.$scopedSlots.icon() && !this.link;\n },\n\n isIconOnly () {\n return this.shouldRenderIcon() && !this.$slots.default;\n },\n\n isVerticalIconLayout () {\n return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n },\n },\n};\n</script>\n"],"names":["_sfc_main","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","lk","LINK_KIND_MODIFIERS","t","BUTTON_TYPES","s","BUTTON_SIZE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","BUTTON_ICON_SIZES","Vue","getLinkKindModifier","circle","kind","importance","row","INVALID_COMBINATION"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n <button\n :class=\"[\n 'base-button__button',\n buttonClasses(),\n ]\"\n data-qa=\"dt-button\"\n :type=\"type\"\n :disabled=\"disabled\"\n :style=\"{ width: width }\"\n :aria-live=\"computedAriaLive\"\n :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n v-on=\"buttonListeners\"\n >\n <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n <span\n v-if=\"shouldRenderIcon()\"\n data-qa=\"dt-button-icon\"\n :class=\"[\n 'base-button__icon',\n 'd-btn__icon',\n ICON_POSITION_MODIFIERS[iconPosition],\n ]\"\n >\n <!-- @slot Button icon -->\n <slot\n name=\"icon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <span\n v-if=\"$slots.default\"\n data-qa=\"dt-button-label\"\n :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n >\n <!-- @slot Content within button -->\n <slot />\n </span>\n </button>\n</template>\n\n<script>\nimport Vue from 'vue';\n\nimport {\n BUTTON_SIZE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_ICON_SIZES,\n BUTTON_TYPES,\n ICON_POSITION_MODIFIERS,\n INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n name: 'DtButton',\n\n props: {\n /**\n * Whether the button is a circle or not.\n * @values true, false\n */\n circle: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The position of the icon slot within the button.\n * @values left, right, top, bottom\n */\n iconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /**\n * The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n */\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /**\n * Whether the button should be styled as a link or not.\n * @values true, false\n * @see DtLink\n */\n link: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the link and button if the button is styled as a link.\n * @values default, warning, danger, success, muted\n * @see DtLink\n */\n linkKind: {\n type: String,\n default: 'default',\n validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n },\n\n /**\n * Determines whether the link should have inverted styling if the button is styled as a link.\n * @values true, false\n * @see DtLink\n */\n linkInverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button disabled attribute\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * HTML button type attribute\n * <a\n * class=\"d-link\"\n * href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n * target=\"_blank\"\n * >\n * (Reference)\n * </a>\n * @values button, submit, reset\n */\n type: {\n type: String,\n default: 'button',\n validator: (t) => BUTTON_TYPES.includes(t),\n },\n\n /**\n * Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n */\n width: {\n type: String,\n default: null,\n },\n\n /**\n * The size of the button.\n * @values xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /**\n * Used to customize the label container\n */\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Whether the button should display a loading animation or not.\n * @values true, false\n */\n loading: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The color of the button.\n * @values default, muted, danger, positive, inverted\n */\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /**\n * Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus. default is to not.\n * @values true, false\n */\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines whether the button should have active styling\n * default is false.\n * @values true, false\n */\n active: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native button click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n\n /**\n * Native button focus in event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native button focus out event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n ],\n\n data () {\n return {\n ICON_POSITION_MODIFIERS,\n // whether the button is currently in focus\n isInFocus: false,\n };\n },\n\n computed: {\n\n buttonListeners () {\n if (!this.assertiveOnFocus) {\n return this.$listeners;\n }\n return {\n ...this.$listeners,\n focusin: (e) => {\n this.isInFocus = true;\n },\n\n focusout: (e) => {\n this.isInFocus = false;\n },\n };\n },\n\n computedAriaLive () {\n return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n },\n\n iconSize () {\n return BUTTON_ICON_SIZES[this.size];\n },\n },\n\n watch: {\n $props: {\n deep: true,\n immediate: true,\n handler () {\n if (process.env.NODE_ENV === 'production') return;\n\n if (this.circle && this.link) {\n Vue.util.warn('You cannot enable circle and link at the same time', this);\n }\n\n this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n },\n },\n },\n\n methods: {\n buttonClasses () {\n if (this.link) {\n return [\n 'd-link',\n getLinkKindModifier(this.linkKind, this.linkInverted),\n BUTTON_SIZE_MODIFIERS[this.size],\n ];\n }\n return [\n 'd-btn',\n BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n BUTTON_KIND_MODIFIERS[this.kind],\n BUTTON_SIZE_MODIFIERS[this.size],\n {\n 'd-btn--circle': this.circle,\n 'd-btn--loading': this.loading,\n 'd-btn--icon-only': this.isIconOnly(),\n 'd-btn--vertical': this.isVerticalIconLayout(),\n 'd-btn--active': this.active,\n },\n ];\n },\n\n isInvalidPropCombination (circle, kind, importance) {\n for (const row of INVALID_COMBINATION) {\n if (circle === row.circle && kind === row.kind && importance === row.importance) {\n console.warn(row.message);\n return false;\n }\n }\n return true;\n },\n\n shouldRenderIcon () {\n return this.$scopedSlots.icon && this.$scopedSlots.icon() && !this.link;\n },\n\n isIconOnly () {\n return this.shouldRenderIcon() && !this.$slots.default;\n },\n\n isVerticalIconLayout () {\n return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n },\n },\n};\n</script>\n"],"names":["_sfc_main","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","lk","LINK_KIND_MODIFIERS","t","BUTTON_TYPES","s","BUTTON_SIZE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","BUTTON_ICON_SIZES","Vue","getLinkKindModifier","circle","kind","importance","row","INVALID_COMBINATION"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editor.cjs","sources":["../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<template>\n <div\n\n class=\"d-recipe-editor\"\n data-qa=\"dt-recipe-editor\"\n role=\"presentation\"\n @click=\"$refs.richTextEditor.focusEditor()\"\n >\n <!-- Section for the top UI -->\n <dt-stack\n class=\"d-recipe-editor__top-bar\"\n direction=\"row\"\n gap=\"450\"\n >\n <dt-stack\n v-for=\"buttonGroup in buttonGroups\"\n :key=\"buttonGroup.key\"\n direction=\"row\"\n gap=\"300\"\n >\n <dt-tooltip\n v-for=\"button in buttonGroup.buttonGroup\"\n :key=\"`${buttonGroup.key}-${JSON.stringify(button.selector)}`\"\n :message=\"button.tooltipMessage\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n :active=\"$refs.richTextEditor?.editor?.isActive(button.selector)\"\n :aria-label=\"button.tooltipMessage\"\n :data-qa=\"button.dataQA\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"xs\"\n @click=\"button.onClick()\"\n >\n <template #icon>\n <component\n :is=\"button.icon\"\n size=\"200\"\n />\n </template>\n <span v-if=\"button.label\">{{ button.label }}</span>\n </dt-button>\n </template>\n </dt-tooltip>\n <div class=\"d-recipe-editor__button-group-divider\" />\n </dt-stack>\n <dt-stack\n v-if=\"linkButton.showBtn\"\n direction=\"row\"\n gap=\"300\"\n >\n <dt-popover\n :open.sync=\"showLinkInput\"\n :show-close-button=\"false\"\n :visually-hidden-close=\"true\"\n :visually-hidden-close-label=\"'Close link input popover'\"\n data-qa=\"dt-recipe-editor-link-input-popover\"\n padding=\"none\"\n placement=\"bottom-start\"\n @click=\"onInputFocus\"\n @opened=\"updateInput\"\n @click.native.stop=\"onInputFocus\"\n >\n <template #anchor>\n <dt-tooltip\n :key=\"linkButton.key\"\n :message=\"linkButton.tooltipMessage\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n :active=\"$refs.richTextEditor?.editor?.isActive(linkButton.selector)\"\n :aria-label=\"linkButton.tooltipMessage\"\n :data-qa=\"linkButton.dataQA\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"xs\"\n @click=\"linkButton.onClick()\"\n >\n <template #icon>\n <component\n :is=\"linkButton.icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </template>\n\n <template #content>\n <div class=\"d-recipe-editor__popover-content\">\n <span\n v-if=\"showAddLink.setLinkTitle.length > 0\"\n >\n {{ showAddLink.setLinkTitle }}\n </span>\n <dt-input\n v-model=\"linkInput\"\n :input-aria-label=\"showAddLink.setLinkInputAriaLabel\"\n :placeholder=\"setLinkPlaceholder\"\n data-qa=\"dt-recipe-editor-link-input\"\n input-wrapper-class=\"d-recipe-editor-link__input-wrapper\"\n @click=\"onInputFocus\"\n @focus=\"onInputFocus\"\n @click.native.stop=\"onInputFocus\"\n @keydown.enter=\"setLink\"\n />\n </div>\n </template>\n <template #footerContent>\n <dt-stack\n direction=\"row\"\n gap=\"300\"\n class=\"d-recipe-editor__popover-footer\"\n >\n <dt-button\n :aria-label=\"removeLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-remove-link-btn\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n @click=\"removeLink\"\n >\n {{ removeLinkButton.label }}\n </dt-button>\n <dt-button\n :aria-label=\"cancelSetLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-set-link-cancel-btn\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n @click=\"closeLinkInput\"\n >\n {{ cancelSetLinkButton.label }}\n </dt-button>\n <dt-button\n :aria-label=\"confirmSetLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-set-link-confirm-btn\"\n size=\"sm\"\n @click=\"setLink\"\n >\n {{ confirmSetLinkButton.label }}\n </dt-button>\n </dt-stack>\n </template>\n </dt-popover>\n </dt-stack>\n </dt-stack>\n\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n :style=\"{ 'max-height': maxHeight }\"\n class=\"d-recipe-editor__content\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :allow-inline-images=\"true\"\n :allow-line-breaks=\"true\"\n :hide-link-bubble-menu=\"true\"\n :auto-focus=\"autoFocus\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"`d-recipe-editor__content-input ${inputClass}`\"\n :link=\"true\"\n :output-format=\"htmlOutputFormat\"\n :placeholder=\"placeholder\"\n :use-div-tags=\"useDivTags\"\n data-qa=\"dt-rich-text-editor\"\n v-bind=\"$attrs\"\n @text-input=\"onTextInput\"\n @blur=\"onBlur\"\n @focus=\"onFocus\"\n @input=\"onInput($event)\"\n />\n </div>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n DtRichTextEditor,\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport {\n EDITOR_SUPPORTED_LINK_PROTOCOLS,\n EDITOR_DEFAULT_LINK_PREFIX,\n} from './editor_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtStack } from '@/components/stack';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\nimport {\n DtIconAlignCenter,\n DtIconAlignJustify,\n DtIconAlignLeft,\n DtIconAlignRight,\n DtIconBold,\n DtIconCodeBlock,\n DtIconImage,\n DtIconItalic,\n DtIconLightningBolt,\n DtIconLink2,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconQuote,\n DtIconStrikethrough,\n DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeEditor',\n\n components: {\n DtRichTextEditor,\n DtButton,\n DtPopover,\n DtStack,\n DtInput,\n DtTooltip,\n DtIconLightningBolt,\n DtIconBold,\n DtIconItalic,\n DtIconUnderline,\n DtIconStrikethrough,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconAlignLeft,\n DtIconAlignCenter,\n DtIconAlignRight,\n DtIconAlignJustify,\n DtIconQuote,\n DtIconCodeBlock,\n DtIconLink2,\n DtIconImage,\n },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Value of the input. The object format should match TipTap's JSON\n * document structure: https://tiptap.dev/guide/output#option-1-json\n */\n value: {\n type: [Object, String],\n default: '',\n },\n\n /**\n * Whether the input is editable\n */\n editable: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Descriptive label for the input element\n */\n inputAriaLabel: {\n type: String,\n required: true,\n default: '',\n },\n\n /**\n * Additional class name for the input element. Only accepts a String value\n * because this is passed to the editor via options. For multiple classes,\n * join them into one string, e.g. \"d-p8 d-hmx96\"\n */\n inputClass: {\n type: String,\n default: '',\n },\n\n /**\n * Whether the input should receive focus after the component has been\n * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n * - `start` Sets the focus to the beginning of the input\n * - `end` Sets the focus to the end of the input\n * - `all` Selects the whole contents of the input\n * - `Number` Sets the focus to a specific position in the input\n * - `true` Defaults to `start`\n * - `false` Disables autofocus\n * @values true, false, start, end, all, number\n */\n autoFocus: {\n type: [Boolean, String, Number],\n default: false,\n validator (autoFocus) {\n if (typeof autoFocus === 'string') {\n return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n }\n return true;\n },\n },\n\n /**\n * Placeholder text\n */\n placeholder: {\n type: String,\n default: '',\n },\n\n /**\n * Content area needs to dynamically adjust height based on the conversation area height.\n * can be vh|px|rem|em|%\n */\n maxHeight: {\n type: String,\n default: 'unset',\n },\n\n /**\n * Confirm set link button defaults.\n */\n confirmSetLinkButton: {\n type: Object,\n default: () => ({ label: 'Confirm', ariaLabel: 'Confirm set link' }),\n },\n\n /**\n * Remove link button defaults.\n */\n removeLinkButton: {\n type: Object,\n default: () => ({ label: 'Remove', ariaLabel: 'Remove link' }),\n },\n\n /**\n * Cancel set link button defaults.\n */\n cancelSetLinkButton: {\n type: Object,\n default: () => ({ label: 'Cancel', ariaLabel: 'Cancel set link' }),\n },\n\n /**\n * Placeholder text for the set link input field\n */\n setLinkPlaceholder: {\n type: String,\n default: '',\n },\n\n /**\n * Show button to render text as bold\n */\n showBoldButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to render text in italics\n */\n showItalicsButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to underline text\n */\n showUnderlineButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to strike text\n */\n showStrikeButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to render list items\n */\n showListItemsButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to render ordered list items\n */\n showOrderedListButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to align text to the left\n */\n showAlignLeftButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to align text to the center\n */\n showAlignCenterButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to align text to the right\n */\n showAlignRightButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to justify text\n */\n showAlignJustifyButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to add quote format to text\n */\n showQuoteButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to add code block\n */\n showCodeBlockButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to handle quick replies\n */\n showQuickRepliesButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to add an inline image\n */\n showInlineImageButton: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Show add link default config.\n */\n showAddLink: {\n type: Object,\n default: () => ({\n showAddLinkButton: true,\n setLinkTitle: 'Add a link',\n setLinkInputAriaLabel: 'Input field to add link',\n }),\n },\n\n /**\n * Use div tags instead of paragraph tags to show text\n */\n useDivTags: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native focus event\n * @event input\n * @type {String|JSON}\n */\n 'focus',\n\n /**\n * Native blur event\n * @event input\n * @type {String|JSON}\n */\n 'blur',\n\n /**\n * Native input event\n * @event input\n * @type {String|JSON}\n */\n 'input',\n\n /**\n * Quick replies button\n * pressed event\n * @event quick-replies-click\n */\n 'quick-replies-click',\n\n /**\n * Emit when inline image button is clicked\n * @event inline-image-click\n */\n 'inline-image-click',\n\n /**\n * Emit when text content changes (not raw html)\n */\n 'text-input',\n ],\n\n data () {\n return {\n internalInputValue: this.value, // internal input content\n hasFocus: false,\n\n linkOptions: {\n class: 'd-recipe-editor__link',\n },\n\n showLinkInput: false,\n linkInput: '',\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n htmlOutputFormat () {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];\n },\n\n showingTextFormatButtons () {\n return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;\n },\n\n showingAlignmentButtons () {\n return this.showAlignLeftButton || this.showAlignCenterButton ||\n this.showAlignRightButton || this.showAlignJustifyButton;\n },\n\n showingListButtons () {\n return this.showListItemsButton || this.showOrderedListButton;\n },\n\n buttonGroups () {\n const individualButtonStacks = this.individualButtons.map(buttonData => ({\n key: buttonData.selector,\n buttonGroup: [buttonData],\n }));\n return [\n { key: 'new', buttonGroup: this.newButtons },\n { key: 'format', buttonGroup: this.textFormatButtons },\n { key: 'alignment', buttonGroup: this.alignmentButtons },\n { key: 'list', buttonGroup: this.listButtons },\n ...individualButtonStacks,\n ].filter(buttonGroupData => buttonGroupData.buttonGroup.length > 0);\n },\n\n newButtons () {\n return [\n {\n showBtn: this.showQuickRepliesButton,\n label: 'Quick reply',\n selector: 'quickReplies',\n icon: DtIconLightningBolt,\n dataQA: 'dt-recipe-editor-quick-replies-btn',\n tooltipMessage: 'Quick Reply',\n onClick: this.onQuickRepliesClick,\n },\n ].filter(button => button.showBtn);\n },\n\n textFormatButtons () {\n return [\n {\n showBtn: this.showBoldButton,\n selector: 'bold',\n icon: DtIconBold,\n dataQA: 'dt-recipe-editor-bold-btn',\n tooltipMessage: 'Bold',\n onClick: this.onBoldTextToggle,\n },\n {\n showBtn: this.showItalicsButton,\n selector: 'italic',\n icon: DtIconItalic,\n dataQA: 'dt-recipe-editor-italics-btn',\n tooltipMessage: 'Italics',\n onClick: this.onItalicTextToggle,\n },\n {\n showBtn: this.showUnderlineButton,\n selector: 'underline',\n icon: DtIconUnderline,\n dataQA: 'dt-recipe-editor-underline-btn',\n tooltipMessage: 'Underline',\n onClick: this.onUnderlineTextToggle,\n },\n {\n showBtn: this.showStrikeButton,\n selector: 'strike',\n icon: DtIconStrikethrough,\n dataQA: 'dt-recipe-editor-strike-btn',\n tooltipMessage: 'Strike',\n onClick: this.onStrikethroughTextToggle,\n },\n ].filter(button => button.showBtn);\n },\n\n alignmentButtons () {\n return [\n {\n showBtn: this.showAlignLeftButton,\n selector: { textAlign: 'left' },\n icon: DtIconAlignLeft,\n dataQA: 'dt-recipe-editor-align-left-btn',\n tooltipMessage: 'Align Left',\n onClick: () => this.onTextAlign('left'),\n },\n {\n showBtn: this.showAlignCenterButton,\n selector: { textAlign: 'center' },\n icon: DtIconAlignCenter,\n dataQA: 'dt-recipe-editor-align-center-btn',\n tooltipMessage: 'Align Center',\n onClick: () => this.onTextAlign('center'),\n },\n {\n showBtn: this.showAlignRightButton,\n selector: { textAlign: 'right' },\n icon: DtIconAlignRight,\n dataQA: 'dt-recipe-editor-align-right-btn',\n tooltipMessage: 'Align Right',\n onClick: () => this.onTextAlign('right'),\n },\n {\n showBtn: this.showAlignJustifyButton,\n selector: { textAlign: 'justify' },\n icon: DtIconAlignJustify,\n dataQA: 'dt-recipe-editor-align-justify-btn',\n tooltipMessage: 'Align Justify',\n onClick: () => this.onTextAlign('justify'),\n },\n ].filter(button => button.showBtn);\n },\n\n listButtons () {\n return [\n {\n showBtn: this.showListItemsButton,\n selector: 'bulletList',\n icon: DtIconListBullet,\n dataQA: 'dt-recipe-editor-list-items-btn',\n tooltipMessage: 'Bullet List',\n onClick: this.onBulletListToggle,\n },\n {\n showBtn: this.showOrderedListButton,\n selector: 'orderedList',\n icon: DtIconListOrdered,\n dataQA: 'dt-recipe-editor-ordered-list-items-btn',\n tooltipMessage: 'Ordered List',\n onClick: this.onOrderedListToggle,\n },\n ].filter(button => button.showBtn);\n },\n\n individualButtons () {\n return [\n {\n showBtn: this.showQuoteButton,\n selector: 'blockquote',\n icon: DtIconQuote,\n dataQA: 'dt-recipe-editor-blockquote-btn',\n tooltipMessage: 'Quote',\n onClick: this.onBlockquoteToggle,\n },\n {\n showBtn: this.showCodeBlockButton,\n selector: 'codeBlock',\n icon: DtIconCodeBlock,\n dataQA: 'dt-recipe-editor-code-block-btn',\n tooltipMessage: 'Code',\n onClick: this.onCodeBlockToggle,\n },\n {\n showBtn: this.showInlineImageButton,\n selector: 'image',\n icon: DtIconImage,\n dataQA: 'dt-recipe-editor-inline-image-btn',\n tooltipMessage: 'Image',\n onClick: this.onInsertInlineImageClick,\n },\n ].filter(button => button.showBtn);\n },\n\n linkButton () {\n return {\n showBtn: this.showAddLink.showAddLinkButton,\n selector: 'link',\n icon: DtIconLink2,\n dataQA: 'dt-recipe-editor-add-link-btn',\n tooltipMessage: 'Link',\n onClick: this.openLinkInput,\n };\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n },\n\n methods: {\n onInputFocus (event) {\n event?.stopPropagation();\n },\n\n removeLink () {\n this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run();\n this.closeLinkInput();\n },\n\n setLink (event) {\n const editor = this.$refs.richTextEditor?.editor;\n event?.preventDefault();\n event?.stopPropagation();\n\n if (!this.linkInput) {\n // If link text is set to empty string,\n // remove any existing links.\n this.removeLink();\n return;\n }\n\n // Check if input matches any of the supported link formats\n const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find(prefixRegex => prefixRegex.test(this.linkInput));\n\n if (!prefix) {\n // If no matching pattern is found, prepend default prefix\n this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;\n }\n\n const selection = editor?.view?.state?.selection;\n\n if (selection.anchor === selection.head) {\n // If no text has been selected, manually insert the link text.\n // Do not rely on link options set through DtRichTextEditor\n // component, because they clash with these and cause issues.\n editor\n .chain()\n .focus()\n .insertContentAt(\n selection.anchor,\n `<a class=\"${this.linkOptions.class}\" href=${this.linkInput}>${this.linkInput}</a>`,\n )\n .run();\n } else {\n // Set or edit the link\n editor\n .chain()\n .focus()\n .extendMarkRange('link')\n .setLink({ href: this.linkInput, class: this.linkOptions.class })\n .run();\n }\n\n this.closeLinkInput();\n },\n\n openLinkInput () {\n this.showLinkInput = true;\n },\n\n updateInput (openedInput) {\n if (!openedInput) {\n return this.closeLinkInput();\n }\n this.linkInput = this.$refs.richTextEditor?.editor?.getAttributes('link')?.href;\n },\n\n closeLinkInput () {\n this.showLinkInput = false;\n this.linkInput = '';\n this.$refs.richTextEditor.editor?.chain().focus();\n },\n\n onBoldTextToggle () {\n this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run();\n },\n\n onItalicTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run();\n },\n\n onUnderlineTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run();\n },\n\n onStrikethroughTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run();\n },\n\n onTextAlign (alignment) {\n if (this.$refs.richTextEditor?.editor?.isActive({ textAlign: alignment })) {\n // If this alignment type is already set here, unset it\n return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();\n }\n this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(alignment).run();\n },\n\n onBulletListToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run();\n },\n\n onOrderedListToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run();\n },\n\n onCodeBlockToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run();\n },\n\n onQuickRepliesClick () {\n this.$emit('quick-replies-click');\n },\n\n onInsertInlineImageClick () {\n this.$emit('inline-image-click');\n },\n\n insertInlineImage (imageUrl) {\n this.$refs.richTextEditor?.editor.chain().focus().setImage({ src: imageUrl }).run();\n },\n\n onBlockquoteToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();\n },\n\n insertInMessageBody (messageContent) {\n this.$refs.richTextEditor?.editor.chain().focus().insertContent(messageContent).run();\n },\n\n setCursorPosition (position = null) {\n this.$refs.richTextEditor?.editor.chain().focus(position).run();\n },\n\n onTextInput (event) {\n this.$emit('text-input', event);\n },\n\n onFocus (event) {\n this.hasFocus = true;\n this.$emit('focus', event);\n },\n\n onBlur (event) {\n this.hasFocus = false;\n this.$emit('blur', event);\n },\n\n onInput (event) {\n this.$emit('input', event);\n },\n\n },\n};\n</script>\n"],"names":["_sfc_main","DtRichTextEditor","DtButton","DtPopover","DtStack","DtInput","DtTooltip","DtIconLightningBolt","DtIconBold","DtIconItalic","DtIconUnderline","DtIconStrikethrough","DtIconListBullet","DtIconListOrdered","DtIconAlignLeft","DtIconAlignCenter","DtIconAlignRight","DtIconAlignJustify","DtIconQuote","DtIconCodeBlock","DtIconLink2","DtIconImage","autoFocus","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS","individualButtonStacks","buttonData","buttonGroupData","button","newValue","event","_e","_d","_c","_b","_a","editor","EDITOR_SUPPORTED_LINK_PROTOCOLS","prefixRegex","EDITOR_DEFAULT_LINK_PREFIX","selection","openedInput","alignment","imageUrl","messageContent","position"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"editor.cjs","sources":["../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<template>\n <div\n\n class=\"d-recipe-editor\"\n data-qa=\"dt-recipe-editor\"\n role=\"presentation\"\n @click=\"$refs.richTextEditor.focusEditor()\"\n >\n <!-- Section for the top UI -->\n <dt-stack\n class=\"d-recipe-editor__top-bar\"\n direction=\"row\"\n gap=\"450\"\n >\n <dt-stack\n v-for=\"buttonGroup in buttonGroups\"\n :key=\"buttonGroup.key\"\n direction=\"row\"\n gap=\"300\"\n >\n <dt-tooltip\n v-for=\"button in buttonGroup.buttonGroup\"\n :key=\"`${buttonGroup.key}-${JSON.stringify(button.selector)}`\"\n :message=\"button.tooltipMessage\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n :active=\"$refs.richTextEditor?.editor?.isActive(button.selector)\"\n :aria-label=\"button.tooltipMessage\"\n :data-qa=\"button.dataQA\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"xs\"\n @click=\"button.onClick()\"\n >\n <template #icon>\n <component\n :is=\"button.icon\"\n size=\"200\"\n />\n </template>\n <span v-if=\"button.label\">{{ button.label }}</span>\n </dt-button>\n </template>\n </dt-tooltip>\n <div class=\"d-recipe-editor__button-group-divider\" />\n </dt-stack>\n <dt-stack\n v-if=\"linkButton.showBtn\"\n direction=\"row\"\n gap=\"300\"\n >\n <dt-popover\n :open.sync=\"showLinkInput\"\n :show-close-button=\"false\"\n :visually-hidden-close=\"true\"\n :visually-hidden-close-label=\"'Close link input popover'\"\n data-qa=\"dt-recipe-editor-link-input-popover\"\n padding=\"none\"\n placement=\"bottom-start\"\n @click=\"onInputFocus\"\n @opened=\"updateInput\"\n @click.native.stop=\"onInputFocus\"\n >\n <template #anchor>\n <dt-tooltip\n :key=\"linkButton.key\"\n :message=\"linkButton.tooltipMessage\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n :active=\"$refs.richTextEditor?.editor?.isActive(linkButton.selector)\"\n :aria-label=\"linkButton.tooltipMessage\"\n :data-qa=\"linkButton.dataQA\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"xs\"\n @click=\"linkButton.onClick()\"\n >\n <template #icon>\n <component\n :is=\"linkButton.icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </template>\n\n <template #content>\n <div class=\"d-recipe-editor__popover-content\">\n <span\n v-if=\"showAddLink.setLinkTitle.length > 0\"\n >\n {{ showAddLink.setLinkTitle }}\n </span>\n <dt-input\n v-model=\"linkInput\"\n :input-aria-label=\"showAddLink.setLinkInputAriaLabel\"\n :placeholder=\"setLinkPlaceholder\"\n data-qa=\"dt-recipe-editor-link-input\"\n input-wrapper-class=\"d-recipe-editor-link__input-wrapper\"\n @click=\"onInputFocus\"\n @focus=\"onInputFocus\"\n @click.native.stop=\"onInputFocus\"\n @keydown.enter=\"setLink\"\n />\n </div>\n </template>\n <template #footerContent>\n <dt-stack\n direction=\"row\"\n gap=\"300\"\n class=\"d-recipe-editor__popover-footer\"\n >\n <dt-button\n :aria-label=\"removeLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-remove-link-btn\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n @click=\"removeLink\"\n >\n {{ removeLinkButton.label }}\n </dt-button>\n <dt-button\n :aria-label=\"cancelSetLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-set-link-cancel-btn\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n @click=\"closeLinkInput\"\n >\n {{ cancelSetLinkButton.label }}\n </dt-button>\n <dt-button\n :aria-label=\"confirmSetLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-set-link-confirm-btn\"\n size=\"sm\"\n @click=\"setLink\"\n >\n {{ confirmSetLinkButton.label }}\n </dt-button>\n </dt-stack>\n </template>\n </dt-popover>\n </dt-stack>\n </dt-stack>\n\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n :style=\"{ 'max-height': maxHeight }\"\n class=\"d-recipe-editor__content\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :allow-inline-images=\"true\"\n :allow-line-breaks=\"true\"\n :hide-link-bubble-menu=\"true\"\n :auto-focus=\"autoFocus\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"`d-recipe-editor__content-input ${inputClass}`\"\n :link=\"true\"\n :output-format=\"htmlOutputFormat\"\n :placeholder=\"placeholder\"\n :use-div-tags=\"useDivTags\"\n data-qa=\"dt-rich-text-editor\"\n v-bind=\"$attrs\"\n @text-input=\"onTextInput\"\n @blur=\"onBlur\"\n @focus=\"onFocus\"\n @input=\"onInput($event)\"\n />\n </div>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n DtRichTextEditor,\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport {\n EDITOR_SUPPORTED_LINK_PROTOCOLS,\n EDITOR_DEFAULT_LINK_PREFIX,\n} from './editor_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtStack } from '@/components/stack';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\nimport {\n DtIconAlignCenter,\n DtIconAlignJustify,\n DtIconAlignLeft,\n DtIconAlignRight,\n DtIconBold,\n DtIconCodeBlock,\n DtIconImage,\n DtIconItalic,\n DtIconLightningBolt,\n DtIconLink2,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconQuote,\n DtIconStrikethrough,\n DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeEditor',\n\n components: {\n DtRichTextEditor,\n DtButton,\n DtPopover,\n DtStack,\n DtInput,\n DtTooltip,\n DtIconLightningBolt,\n DtIconBold,\n DtIconItalic,\n DtIconUnderline,\n DtIconStrikethrough,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconAlignLeft,\n DtIconAlignCenter,\n DtIconAlignRight,\n DtIconAlignJustify,\n DtIconQuote,\n DtIconCodeBlock,\n DtIconLink2,\n DtIconImage,\n },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Value of the input. The object format should match TipTap's JSON\n * document structure: https://tiptap.dev/guide/output#option-1-json\n */\n value: {\n type: [Object, String],\n default: '',\n },\n\n /**\n * Whether the input is editable\n */\n editable: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Descriptive label for the input element\n */\n inputAriaLabel: {\n type: String,\n required: true,\n default: '',\n },\n\n /**\n * Additional class name for the input element. Only accepts a String value\n * because this is passed to the editor via options. For multiple classes,\n * join them into one string, e.g. \"d-p8 d-hmx96\"\n */\n inputClass: {\n type: String,\n default: '',\n },\n\n /**\n * Whether the input should receive focus after the component has been\n * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n * - `start` Sets the focus to the beginning of the input\n * - `end` Sets the focus to the end of the input\n * - `all` Selects the whole contents of the input\n * - `Number` Sets the focus to a specific position in the input\n * - `true` Defaults to `start`\n * - `false` Disables autofocus\n * @values true, false, start, end, all, number\n */\n autoFocus: {\n type: [Boolean, String, Number],\n default: false,\n validator (autoFocus) {\n if (typeof autoFocus === 'string') {\n return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n }\n return true;\n },\n },\n\n /**\n * Placeholder text\n */\n placeholder: {\n type: String,\n default: '',\n },\n\n /**\n * Content area needs to dynamically adjust height based on the conversation area height.\n * can be vh|px|rem|em|%\n */\n maxHeight: {\n type: String,\n default: 'unset',\n },\n\n /**\n * Confirm set link button defaults.\n */\n confirmSetLinkButton: {\n type: Object,\n default: () => ({ label: 'Confirm', ariaLabel: 'Confirm set link' }),\n },\n\n /**\n * Remove link button defaults.\n */\n removeLinkButton: {\n type: Object,\n default: () => ({ label: 'Remove', ariaLabel: 'Remove link' }),\n },\n\n /**\n * Cancel set link button defaults.\n */\n cancelSetLinkButton: {\n type: Object,\n default: () => ({ label: 'Cancel', ariaLabel: 'Cancel set link' }),\n },\n\n /**\n * Placeholder text for the set link input field\n */\n setLinkPlaceholder: {\n type: String,\n default: '',\n },\n\n /**\n * Show button to render text as bold\n */\n showBoldButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to render text in italics\n */\n showItalicsButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to underline text\n */\n showUnderlineButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to strike text\n */\n showStrikeButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to render list items\n */\n showListItemsButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to render ordered list items\n */\n showOrderedListButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to align text to the left\n */\n showAlignLeftButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to align text to the center\n */\n showAlignCenterButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to align text to the right\n */\n showAlignRightButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to justify text\n */\n showAlignJustifyButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to add quote format to text\n */\n showQuoteButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to add code block\n */\n showCodeBlockButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to handle quick replies\n */\n showQuickRepliesButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to add an inline image\n */\n showInlineImageButton: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Show add link default config.\n */\n showAddLink: {\n type: Object,\n default: () => ({\n showAddLinkButton: true,\n setLinkTitle: 'Add a link',\n setLinkInputAriaLabel: 'Input field to add link',\n }),\n },\n\n /**\n * Use div tags instead of paragraph tags to show text\n */\n useDivTags: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native focus event\n * @event input\n * @type {String|JSON}\n */\n 'focus',\n\n /**\n * Native blur event\n * @event input\n * @type {String|JSON}\n */\n 'blur',\n\n /**\n * Native input event\n * @event input\n * @type {String|JSON}\n */\n 'input',\n\n /**\n * Quick replies button\n * pressed event\n * @event quick-replies-click\n */\n 'quick-replies-click',\n\n /**\n * Emit when inline image button is clicked\n * @event inline-image-click\n */\n 'inline-image-click',\n\n /**\n * Emit when text content changes (not raw html)\n */\n 'text-input',\n ],\n\n data () {\n return {\n internalInputValue: this.value, // internal input content\n hasFocus: false,\n\n linkOptions: {\n class: 'd-recipe-editor__link',\n },\n\n showLinkInput: false,\n linkInput: '',\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n htmlOutputFormat () {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];\n },\n\n showingTextFormatButtons () {\n return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;\n },\n\n showingAlignmentButtons () {\n return this.showAlignLeftButton || this.showAlignCenterButton ||\n this.showAlignRightButton || this.showAlignJustifyButton;\n },\n\n showingListButtons () {\n return this.showListItemsButton || this.showOrderedListButton;\n },\n\n buttonGroups () {\n const individualButtonStacks = this.individualButtons.map(buttonData => ({\n key: buttonData.selector,\n buttonGroup: [buttonData],\n }));\n return [\n { key: 'new', buttonGroup: this.newButtons },\n { key: 'format', buttonGroup: this.textFormatButtons },\n { key: 'alignment', buttonGroup: this.alignmentButtons },\n { key: 'list', buttonGroup: this.listButtons },\n ...individualButtonStacks,\n ].filter(buttonGroupData => buttonGroupData.buttonGroup.length > 0);\n },\n\n newButtons () {\n return [\n {\n showBtn: this.showQuickRepliesButton,\n label: 'Quick reply',\n selector: 'quickReplies',\n icon: DtIconLightningBolt,\n dataQA: 'dt-recipe-editor-quick-replies-btn',\n tooltipMessage: 'Quick Reply',\n onClick: this.onQuickRepliesClick,\n },\n ].filter(button => button.showBtn);\n },\n\n textFormatButtons () {\n return [\n {\n showBtn: this.showBoldButton,\n selector: 'bold',\n icon: DtIconBold,\n dataQA: 'dt-recipe-editor-bold-btn',\n tooltipMessage: 'Bold',\n onClick: this.onBoldTextToggle,\n },\n {\n showBtn: this.showItalicsButton,\n selector: 'italic',\n icon: DtIconItalic,\n dataQA: 'dt-recipe-editor-italics-btn',\n tooltipMessage: 'Italics',\n onClick: this.onItalicTextToggle,\n },\n {\n showBtn: this.showUnderlineButton,\n selector: 'underline',\n icon: DtIconUnderline,\n dataQA: 'dt-recipe-editor-underline-btn',\n tooltipMessage: 'Underline',\n onClick: this.onUnderlineTextToggle,\n },\n {\n showBtn: this.showStrikeButton,\n selector: 'strike',\n icon: DtIconStrikethrough,\n dataQA: 'dt-recipe-editor-strike-btn',\n tooltipMessage: 'Strike',\n onClick: this.onStrikethroughTextToggle,\n },\n ].filter(button => button.showBtn);\n },\n\n alignmentButtons () {\n return [\n {\n showBtn: this.showAlignLeftButton,\n selector: { textAlign: 'left' },\n icon: DtIconAlignLeft,\n dataQA: 'dt-recipe-editor-align-left-btn',\n tooltipMessage: 'Align Left',\n onClick: () => this.onTextAlign('left'),\n },\n {\n showBtn: this.showAlignCenterButton,\n selector: { textAlign: 'center' },\n icon: DtIconAlignCenter,\n dataQA: 'dt-recipe-editor-align-center-btn',\n tooltipMessage: 'Align Center',\n onClick: () => this.onTextAlign('center'),\n },\n {\n showBtn: this.showAlignRightButton,\n selector: { textAlign: 'right' },\n icon: DtIconAlignRight,\n dataQA: 'dt-recipe-editor-align-right-btn',\n tooltipMessage: 'Align Right',\n onClick: () => this.onTextAlign('right'),\n },\n {\n showBtn: this.showAlignJustifyButton,\n selector: { textAlign: 'justify' },\n icon: DtIconAlignJustify,\n dataQA: 'dt-recipe-editor-align-justify-btn',\n tooltipMessage: 'Align Justify',\n onClick: () => this.onTextAlign('justify'),\n },\n ].filter(button => button.showBtn);\n },\n\n listButtons () {\n return [\n {\n showBtn: this.showListItemsButton,\n selector: 'bulletList',\n icon: DtIconListBullet,\n dataQA: 'dt-recipe-editor-list-items-btn',\n tooltipMessage: 'Bullet List',\n onClick: this.onBulletListToggle,\n },\n {\n showBtn: this.showOrderedListButton,\n selector: 'orderedList',\n icon: DtIconListOrdered,\n dataQA: 'dt-recipe-editor-ordered-list-items-btn',\n tooltipMessage: 'Ordered List',\n onClick: this.onOrderedListToggle,\n },\n ].filter(button => button.showBtn);\n },\n\n individualButtons () {\n return [\n {\n showBtn: this.showQuoteButton,\n selector: 'blockquote',\n icon: DtIconQuote,\n dataQA: 'dt-recipe-editor-blockquote-btn',\n tooltipMessage: 'Quote',\n onClick: this.onBlockquoteToggle,\n },\n {\n showBtn: this.showCodeBlockButton,\n selector: 'codeBlock',\n icon: DtIconCodeBlock,\n dataQA: 'dt-recipe-editor-code-block-btn',\n tooltipMessage: 'Code',\n onClick: this.onCodeBlockToggle,\n },\n {\n showBtn: this.showInlineImageButton,\n selector: 'image',\n icon: DtIconImage,\n dataQA: 'dt-recipe-editor-inline-image-btn',\n tooltipMessage: 'Image',\n onClick: this.onInsertInlineImageClick,\n },\n ].filter(button => button.showBtn);\n },\n\n linkButton () {\n return {\n showBtn: this.showAddLink.showAddLinkButton,\n selector: 'link',\n icon: DtIconLink2,\n dataQA: 'dt-recipe-editor-add-link-btn',\n tooltipMessage: 'Link',\n onClick: this.openLinkInput,\n };\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n },\n\n methods: {\n onInputFocus (event) {\n event?.stopPropagation();\n },\n\n removeLink () {\n this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run();\n this.closeLinkInput();\n },\n\n setLink (event) {\n const editor = this.$refs.richTextEditor?.editor;\n event?.preventDefault();\n event?.stopPropagation();\n\n if (!this.linkInput) {\n // If link text is set to empty string,\n // remove any existing links.\n this.removeLink();\n return;\n }\n\n // Check if input matches any of the supported link formats\n const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find(prefixRegex => prefixRegex.test(this.linkInput));\n\n if (!prefix) {\n // If no matching pattern is found, prepend default prefix\n this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;\n }\n\n const selection = editor?.view?.state?.selection;\n\n if (selection.anchor === selection.head) {\n // If no text has been selected, manually insert the link text.\n // Do not rely on link options set through DtRichTextEditor\n // component, because they clash with these and cause issues.\n editor\n .chain()\n .focus()\n .insertContentAt(\n selection.anchor,\n `<a class=\"${this.linkOptions.class}\" href=${this.linkInput}>${this.linkInput}</a>`,\n )\n .run();\n } else {\n // Set or edit the link\n editor\n .chain()\n .focus()\n .extendMarkRange('link')\n .setLink({ href: this.linkInput, class: this.linkOptions.class })\n .run();\n }\n\n this.closeLinkInput();\n },\n\n openLinkInput () {\n this.showLinkInput = true;\n },\n\n updateInput (openedInput) {\n if (!openedInput) {\n return this.closeLinkInput();\n }\n this.linkInput = this.$refs.richTextEditor?.editor?.getAttributes('link')?.href;\n },\n\n closeLinkInput () {\n this.showLinkInput = false;\n this.linkInput = '';\n this.$refs.richTextEditor.editor?.chain().focus();\n },\n\n onBoldTextToggle () {\n this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run();\n },\n\n onItalicTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run();\n },\n\n onUnderlineTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run();\n },\n\n onStrikethroughTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run();\n },\n\n onTextAlign (alignment) {\n if (this.$refs.richTextEditor?.editor?.isActive({ textAlign: alignment })) {\n // If this alignment type is already set here, unset it\n return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();\n }\n this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(alignment).run();\n },\n\n onBulletListToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run();\n },\n\n onOrderedListToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run();\n },\n\n onCodeBlockToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run();\n },\n\n onQuickRepliesClick () {\n this.$emit('quick-replies-click');\n },\n\n onInsertInlineImageClick () {\n this.$emit('inline-image-click');\n },\n\n insertInlineImage (imageUrl) {\n this.$refs.richTextEditor?.editor.chain().focus().setImage({ src: imageUrl }).run();\n },\n\n onBlockquoteToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();\n },\n\n insertInMessageBody (messageContent) {\n this.$refs.richTextEditor?.editor.chain().focus().insertContent(messageContent).run();\n },\n\n setCursorPosition (position = null) {\n this.$refs.richTextEditor?.editor.chain().focus(position).run();\n },\n\n onTextInput (event) {\n this.$emit('text-input', event);\n },\n\n onFocus (event) {\n this.hasFocus = true;\n this.$emit('focus', event);\n },\n\n onBlur (event) {\n this.hasFocus = false;\n this.$emit('blur', event);\n },\n\n onInput (event) {\n this.$emit('input', event);\n },\n\n },\n};\n</script>\n"],"names":["_sfc_main","DtRichTextEditor","DtButton","DtPopover","DtStack","DtInput","DtTooltip","DtIconLightningBolt","DtIconBold","DtIconItalic","DtIconUnderline","DtIconStrikethrough","DtIconListBullet","DtIconListOrdered","DtIconAlignLeft","DtIconAlignCenter","DtIconAlignRight","DtIconAlignJustify","DtIconQuote","DtIconCodeBlock","DtIconLink2","DtIconImage","autoFocus","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS","individualButtonStacks","buttonData","buttonGroupData","button","newValue","event","_e","_d","_c","_b","_a","editor","EDITOR_SUPPORTED_LINK_PROTOCOLS","prefixRegex","EDITOR_DEFAULT_LINK_PREFIX","selection","openedInput","alignment","imageUrl","messageContent","position"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editor.js","sources":["../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<template>\n <div\n\n class=\"d-recipe-editor\"\n data-qa=\"dt-recipe-editor\"\n role=\"presentation\"\n @click=\"$refs.richTextEditor.focusEditor()\"\n >\n <!-- Section for the top UI -->\n <dt-stack\n class=\"d-recipe-editor__top-bar\"\n direction=\"row\"\n gap=\"450\"\n >\n <dt-stack\n v-for=\"buttonGroup in buttonGroups\"\n :key=\"buttonGroup.key\"\n direction=\"row\"\n gap=\"300\"\n >\n <dt-tooltip\n v-for=\"button in buttonGroup.buttonGroup\"\n :key=\"`${buttonGroup.key}-${JSON.stringify(button.selector)}`\"\n :message=\"button.tooltipMessage\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n :active=\"$refs.richTextEditor?.editor?.isActive(button.selector)\"\n :aria-label=\"button.tooltipMessage\"\n :data-qa=\"button.dataQA\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"xs\"\n @click=\"button.onClick()\"\n >\n <template #icon>\n <component\n :is=\"button.icon\"\n size=\"200\"\n />\n </template>\n <span v-if=\"button.label\">{{ button.label }}</span>\n </dt-button>\n </template>\n </dt-tooltip>\n <div class=\"d-recipe-editor__button-group-divider\" />\n </dt-stack>\n <dt-stack\n v-if=\"linkButton.showBtn\"\n direction=\"row\"\n gap=\"300\"\n >\n <dt-popover\n :open.sync=\"showLinkInput\"\n :show-close-button=\"false\"\n :visually-hidden-close=\"true\"\n :visually-hidden-close-label=\"'Close link input popover'\"\n data-qa=\"dt-recipe-editor-link-input-popover\"\n padding=\"none\"\n placement=\"bottom-start\"\n @click=\"onInputFocus\"\n @opened=\"updateInput\"\n @click.native.stop=\"onInputFocus\"\n >\n <template #anchor>\n <dt-tooltip\n :key=\"linkButton.key\"\n :message=\"linkButton.tooltipMessage\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n :active=\"$refs.richTextEditor?.editor?.isActive(linkButton.selector)\"\n :aria-label=\"linkButton.tooltipMessage\"\n :data-qa=\"linkButton.dataQA\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"xs\"\n @click=\"linkButton.onClick()\"\n >\n <template #icon>\n <component\n :is=\"linkButton.icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </template>\n\n <template #content>\n <div class=\"d-recipe-editor__popover-content\">\n <span\n v-if=\"showAddLink.setLinkTitle.length > 0\"\n >\n {{ showAddLink.setLinkTitle }}\n </span>\n <dt-input\n v-model=\"linkInput\"\n :input-aria-label=\"showAddLink.setLinkInputAriaLabel\"\n :placeholder=\"setLinkPlaceholder\"\n data-qa=\"dt-recipe-editor-link-input\"\n input-wrapper-class=\"d-recipe-editor-link__input-wrapper\"\n @click=\"onInputFocus\"\n @focus=\"onInputFocus\"\n @click.native.stop=\"onInputFocus\"\n @keydown.enter=\"setLink\"\n />\n </div>\n </template>\n <template #footerContent>\n <dt-stack\n direction=\"row\"\n gap=\"300\"\n class=\"d-recipe-editor__popover-footer\"\n >\n <dt-button\n :aria-label=\"removeLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-remove-link-btn\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n @click=\"removeLink\"\n >\n {{ removeLinkButton.label }}\n </dt-button>\n <dt-button\n :aria-label=\"cancelSetLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-set-link-cancel-btn\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n @click=\"closeLinkInput\"\n >\n {{ cancelSetLinkButton.label }}\n </dt-button>\n <dt-button\n :aria-label=\"confirmSetLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-set-link-confirm-btn\"\n size=\"sm\"\n @click=\"setLink\"\n >\n {{ confirmSetLinkButton.label }}\n </dt-button>\n </dt-stack>\n </template>\n </dt-popover>\n </dt-stack>\n </dt-stack>\n\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n :style=\"{ 'max-height': maxHeight }\"\n class=\"d-recipe-editor__content\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :allow-inline-images=\"true\"\n :allow-line-breaks=\"true\"\n :hide-link-bubble-menu=\"true\"\n :auto-focus=\"autoFocus\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"`d-recipe-editor__content-input ${inputClass}`\"\n :link=\"true\"\n :output-format=\"htmlOutputFormat\"\n :placeholder=\"placeholder\"\n :use-div-tags=\"useDivTags\"\n data-qa=\"dt-rich-text-editor\"\n v-bind=\"$attrs\"\n @text-input=\"onTextInput\"\n @blur=\"onBlur\"\n @focus=\"onFocus\"\n @input=\"onInput($event)\"\n />\n </div>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n DtRichTextEditor,\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport {\n EDITOR_SUPPORTED_LINK_PROTOCOLS,\n EDITOR_DEFAULT_LINK_PREFIX,\n} from './editor_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtStack } from '@/components/stack';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\nimport {\n DtIconAlignCenter,\n DtIconAlignJustify,\n DtIconAlignLeft,\n DtIconAlignRight,\n DtIconBold,\n DtIconCodeBlock,\n DtIconImage,\n DtIconItalic,\n DtIconLightningBolt,\n DtIconLink2,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconQuote,\n DtIconStrikethrough,\n DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeEditor',\n\n components: {\n DtRichTextEditor,\n DtButton,\n DtPopover,\n DtStack,\n DtInput,\n DtTooltip,\n DtIconLightningBolt,\n DtIconBold,\n DtIconItalic,\n DtIconUnderline,\n DtIconStrikethrough,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconAlignLeft,\n DtIconAlignCenter,\n DtIconAlignRight,\n DtIconAlignJustify,\n DtIconQuote,\n DtIconCodeBlock,\n DtIconLink2,\n DtIconImage,\n },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Value of the input. The object format should match TipTap's JSON\n * document structure: https://tiptap.dev/guide/output#option-1-json\n */\n value: {\n type: [Object, String],\n default: '',\n },\n\n /**\n * Whether the input is editable\n */\n editable: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Descriptive label for the input element\n */\n inputAriaLabel: {\n type: String,\n required: true,\n default: '',\n },\n\n /**\n * Additional class name for the input element. Only accepts a String value\n * because this is passed to the editor via options. For multiple classes,\n * join them into one string, e.g. \"d-p8 d-hmx96\"\n */\n inputClass: {\n type: String,\n default: '',\n },\n\n /**\n * Whether the input should receive focus after the component has been\n * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n * - `start` Sets the focus to the beginning of the input\n * - `end` Sets the focus to the end of the input\n * - `all` Selects the whole contents of the input\n * - `Number` Sets the focus to a specific position in the input\n * - `true` Defaults to `start`\n * - `false` Disables autofocus\n * @values true, false, start, end, all, number\n */\n autoFocus: {\n type: [Boolean, String, Number],\n default: false,\n validator (autoFocus) {\n if (typeof autoFocus === 'string') {\n return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n }\n return true;\n },\n },\n\n /**\n * Placeholder text\n */\n placeholder: {\n type: String,\n default: '',\n },\n\n /**\n * Content area needs to dynamically adjust height based on the conversation area height.\n * can be vh|px|rem|em|%\n */\n maxHeight: {\n type: String,\n default: 'unset',\n },\n\n /**\n * Confirm set link button defaults.\n */\n confirmSetLinkButton: {\n type: Object,\n default: () => ({ label: 'Confirm', ariaLabel: 'Confirm set link' }),\n },\n\n /**\n * Remove link button defaults.\n */\n removeLinkButton: {\n type: Object,\n default: () => ({ label: 'Remove', ariaLabel: 'Remove link' }),\n },\n\n /**\n * Cancel set link button defaults.\n */\n cancelSetLinkButton: {\n type: Object,\n default: () => ({ label: 'Cancel', ariaLabel: 'Cancel set link' }),\n },\n\n /**\n * Placeholder text for the set link input field\n */\n setLinkPlaceholder: {\n type: String,\n default: '',\n },\n\n /**\n * Show button to render text as bold\n */\n showBoldButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to render text in italics\n */\n showItalicsButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to underline text\n */\n showUnderlineButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to strike text\n */\n showStrikeButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to render list items\n */\n showListItemsButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to render ordered list items\n */\n showOrderedListButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to align text to the left\n */\n showAlignLeftButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to align text to the center\n */\n showAlignCenterButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to align text to the right\n */\n showAlignRightButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to justify text\n */\n showAlignJustifyButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to add quote format to text\n */\n showQuoteButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to add code block\n */\n showCodeBlockButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to handle quick replies\n */\n showQuickRepliesButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to add an inline image\n */\n showInlineImageButton: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Show add link default config.\n */\n showAddLink: {\n type: Object,\n default: () => ({\n showAddLinkButton: true,\n setLinkTitle: 'Add a link',\n setLinkInputAriaLabel: 'Input field to add link',\n }),\n },\n\n /**\n * Use div tags instead of paragraph tags to show text\n */\n useDivTags: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native focus event\n * @event input\n * @type {String|JSON}\n */\n 'focus',\n\n /**\n * Native blur event\n * @event input\n * @type {String|JSON}\n */\n 'blur',\n\n /**\n * Native input event\n * @event input\n * @type {String|JSON}\n */\n 'input',\n\n /**\n * Quick replies button\n * pressed event\n * @event quick-replies-click\n */\n 'quick-replies-click',\n\n /**\n * Emit when inline image button is clicked\n * @event inline-image-click\n */\n 'inline-image-click',\n\n /**\n * Emit when text content changes (not raw html)\n */\n 'text-input',\n ],\n\n data () {\n return {\n internalInputValue: this.value, // internal input content\n hasFocus: false,\n\n linkOptions: {\n class: 'd-recipe-editor__link',\n },\n\n showLinkInput: false,\n linkInput: '',\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n htmlOutputFormat () {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];\n },\n\n showingTextFormatButtons () {\n return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;\n },\n\n showingAlignmentButtons () {\n return this.showAlignLeftButton || this.showAlignCenterButton ||\n this.showAlignRightButton || this.showAlignJustifyButton;\n },\n\n showingListButtons () {\n return this.showListItemsButton || this.showOrderedListButton;\n },\n\n buttonGroups () {\n const individualButtonStacks = this.individualButtons.map(buttonData => ({\n key: buttonData.selector,\n buttonGroup: [buttonData],\n }));\n return [\n { key: 'new', buttonGroup: this.newButtons },\n { key: 'format', buttonGroup: this.textFormatButtons },\n { key: 'alignment', buttonGroup: this.alignmentButtons },\n { key: 'list', buttonGroup: this.listButtons },\n ...individualButtonStacks,\n ].filter(buttonGroupData => buttonGroupData.buttonGroup.length > 0);\n },\n\n newButtons () {\n return [\n {\n showBtn: this.showQuickRepliesButton,\n label: 'Quick reply',\n selector: 'quickReplies',\n icon: DtIconLightningBolt,\n dataQA: 'dt-recipe-editor-quick-replies-btn',\n tooltipMessage: 'Quick Reply',\n onClick: this.onQuickRepliesClick,\n },\n ].filter(button => button.showBtn);\n },\n\n textFormatButtons () {\n return [\n {\n showBtn: this.showBoldButton,\n selector: 'bold',\n icon: DtIconBold,\n dataQA: 'dt-recipe-editor-bold-btn',\n tooltipMessage: 'Bold',\n onClick: this.onBoldTextToggle,\n },\n {\n showBtn: this.showItalicsButton,\n selector: 'italic',\n icon: DtIconItalic,\n dataQA: 'dt-recipe-editor-italics-btn',\n tooltipMessage: 'Italics',\n onClick: this.onItalicTextToggle,\n },\n {\n showBtn: this.showUnderlineButton,\n selector: 'underline',\n icon: DtIconUnderline,\n dataQA: 'dt-recipe-editor-underline-btn',\n tooltipMessage: 'Underline',\n onClick: this.onUnderlineTextToggle,\n },\n {\n showBtn: this.showStrikeButton,\n selector: 'strike',\n icon: DtIconStrikethrough,\n dataQA: 'dt-recipe-editor-strike-btn',\n tooltipMessage: 'Strike',\n onClick: this.onStrikethroughTextToggle,\n },\n ].filter(button => button.showBtn);\n },\n\n alignmentButtons () {\n return [\n {\n showBtn: this.showAlignLeftButton,\n selector: { textAlign: 'left' },\n icon: DtIconAlignLeft,\n dataQA: 'dt-recipe-editor-align-left-btn',\n tooltipMessage: 'Align Left',\n onClick: () => this.onTextAlign('left'),\n },\n {\n showBtn: this.showAlignCenterButton,\n selector: { textAlign: 'center' },\n icon: DtIconAlignCenter,\n dataQA: 'dt-recipe-editor-align-center-btn',\n tooltipMessage: 'Align Center',\n onClick: () => this.onTextAlign('center'),\n },\n {\n showBtn: this.showAlignRightButton,\n selector: { textAlign: 'right' },\n icon: DtIconAlignRight,\n dataQA: 'dt-recipe-editor-align-right-btn',\n tooltipMessage: 'Align Right',\n onClick: () => this.onTextAlign('right'),\n },\n {\n showBtn: this.showAlignJustifyButton,\n selector: { textAlign: 'justify' },\n icon: DtIconAlignJustify,\n dataQA: 'dt-recipe-editor-align-justify-btn',\n tooltipMessage: 'Align Justify',\n onClick: () => this.onTextAlign('justify'),\n },\n ].filter(button => button.showBtn);\n },\n\n listButtons () {\n return [\n {\n showBtn: this.showListItemsButton,\n selector: 'bulletList',\n icon: DtIconListBullet,\n dataQA: 'dt-recipe-editor-list-items-btn',\n tooltipMessage: 'Bullet List',\n onClick: this.onBulletListToggle,\n },\n {\n showBtn: this.showOrderedListButton,\n selector: 'orderedList',\n icon: DtIconListOrdered,\n dataQA: 'dt-recipe-editor-ordered-list-items-btn',\n tooltipMessage: 'Ordered List',\n onClick: this.onOrderedListToggle,\n },\n ].filter(button => button.showBtn);\n },\n\n individualButtons () {\n return [\n {\n showBtn: this.showQuoteButton,\n selector: 'blockquote',\n icon: DtIconQuote,\n dataQA: 'dt-recipe-editor-blockquote-btn',\n tooltipMessage: 'Quote',\n onClick: this.onBlockquoteToggle,\n },\n {\n showBtn: this.showCodeBlockButton,\n selector: 'codeBlock',\n icon: DtIconCodeBlock,\n dataQA: 'dt-recipe-editor-code-block-btn',\n tooltipMessage: 'Code',\n onClick: this.onCodeBlockToggle,\n },\n {\n showBtn: this.showInlineImageButton,\n selector: 'image',\n icon: DtIconImage,\n dataQA: 'dt-recipe-editor-inline-image-btn',\n tooltipMessage: 'Image',\n onClick: this.onInsertInlineImageClick,\n },\n ].filter(button => button.showBtn);\n },\n\n linkButton () {\n return {\n showBtn: this.showAddLink.showAddLinkButton,\n selector: 'link',\n icon: DtIconLink2,\n dataQA: 'dt-recipe-editor-add-link-btn',\n tooltipMessage: 'Link',\n onClick: this.openLinkInput,\n };\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n },\n\n methods: {\n onInputFocus (event) {\n event?.stopPropagation();\n },\n\n removeLink () {\n this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run();\n this.closeLinkInput();\n },\n\n setLink (event) {\n const editor = this.$refs.richTextEditor?.editor;\n event?.preventDefault();\n event?.stopPropagation();\n\n if (!this.linkInput) {\n // If link text is set to empty string,\n // remove any existing links.\n this.removeLink();\n return;\n }\n\n // Check if input matches any of the supported link formats\n const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find(prefixRegex => prefixRegex.test(this.linkInput));\n\n if (!prefix) {\n // If no matching pattern is found, prepend default prefix\n this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;\n }\n\n const selection = editor?.view?.state?.selection;\n\n if (selection.anchor === selection.head) {\n // If no text has been selected, manually insert the link text.\n // Do not rely on link options set through DtRichTextEditor\n // component, because they clash with these and cause issues.\n editor\n .chain()\n .focus()\n .insertContentAt(\n selection.anchor,\n `<a class=\"${this.linkOptions.class}\" href=${this.linkInput}>${this.linkInput}</a>`,\n )\n .run();\n } else {\n // Set or edit the link\n editor\n .chain()\n .focus()\n .extendMarkRange('link')\n .setLink({ href: this.linkInput, class: this.linkOptions.class })\n .run();\n }\n\n this.closeLinkInput();\n },\n\n openLinkInput () {\n this.showLinkInput = true;\n },\n\n updateInput (openedInput) {\n if (!openedInput) {\n return this.closeLinkInput();\n }\n this.linkInput = this.$refs.richTextEditor?.editor?.getAttributes('link')?.href;\n },\n\n closeLinkInput () {\n this.showLinkInput = false;\n this.linkInput = '';\n this.$refs.richTextEditor.editor?.chain().focus();\n },\n\n onBoldTextToggle () {\n this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run();\n },\n\n onItalicTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run();\n },\n\n onUnderlineTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run();\n },\n\n onStrikethroughTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run();\n },\n\n onTextAlign (alignment) {\n if (this.$refs.richTextEditor?.editor?.isActive({ textAlign: alignment })) {\n // If this alignment type is already set here, unset it\n return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();\n }\n this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(alignment).run();\n },\n\n onBulletListToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run();\n },\n\n onOrderedListToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run();\n },\n\n onCodeBlockToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run();\n },\n\n onQuickRepliesClick () {\n this.$emit('quick-replies-click');\n },\n\n onInsertInlineImageClick () {\n this.$emit('inline-image-click');\n },\n\n insertInlineImage (imageUrl) {\n this.$refs.richTextEditor?.editor.chain().focus().setImage({ src: imageUrl }).run();\n },\n\n onBlockquoteToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();\n },\n\n insertInMessageBody (messageContent) {\n this.$refs.richTextEditor?.editor.chain().focus().insertContent(messageContent).run();\n },\n\n setCursorPosition (position = null) {\n this.$refs.richTextEditor?.editor.chain().focus(position).run();\n },\n\n onTextInput (event) {\n this.$emit('text-input', event);\n },\n\n onFocus (event) {\n this.hasFocus = true;\n this.$emit('focus', event);\n },\n\n onBlur (event) {\n this.hasFocus = false;\n this.$emit('blur', event);\n },\n\n onInput (event) {\n this.$emit('input', event);\n },\n\n },\n};\n</script>\n"],"names":["_sfc_main","DtRichTextEditor","DtButton","DtPopover","DtStack","DtInput","DtTooltip","DtIconLightningBolt","DtIconBold","DtIconItalic","DtIconUnderline","DtIconStrikethrough","DtIconListBullet","DtIconListOrdered","DtIconAlignLeft","DtIconAlignCenter","DtIconAlignRight","DtIconAlignJustify","DtIconQuote","DtIconCodeBlock","DtIconLink2","DtIconImage","autoFocus","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS","individualButtonStacks","buttonData","buttonGroupData","button","newValue","event","_e","_d","_c","_b","_a","editor","EDITOR_SUPPORTED_LINK_PROTOCOLS","prefixRegex","EDITOR_DEFAULT_LINK_PREFIX","selection","openedInput","alignment","imageUrl","messageContent","position"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"editor.js","sources":["../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<template>\n <div\n\n class=\"d-recipe-editor\"\n data-qa=\"dt-recipe-editor\"\n role=\"presentation\"\n @click=\"$refs.richTextEditor.focusEditor()\"\n >\n <!-- Section for the top UI -->\n <dt-stack\n class=\"d-recipe-editor__top-bar\"\n direction=\"row\"\n gap=\"450\"\n >\n <dt-stack\n v-for=\"buttonGroup in buttonGroups\"\n :key=\"buttonGroup.key\"\n direction=\"row\"\n gap=\"300\"\n >\n <dt-tooltip\n v-for=\"button in buttonGroup.buttonGroup\"\n :key=\"`${buttonGroup.key}-${JSON.stringify(button.selector)}`\"\n :message=\"button.tooltipMessage\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n :active=\"$refs.richTextEditor?.editor?.isActive(button.selector)\"\n :aria-label=\"button.tooltipMessage\"\n :data-qa=\"button.dataQA\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"xs\"\n @click=\"button.onClick()\"\n >\n <template #icon>\n <component\n :is=\"button.icon\"\n size=\"200\"\n />\n </template>\n <span v-if=\"button.label\">{{ button.label }}</span>\n </dt-button>\n </template>\n </dt-tooltip>\n <div class=\"d-recipe-editor__button-group-divider\" />\n </dt-stack>\n <dt-stack\n v-if=\"linkButton.showBtn\"\n direction=\"row\"\n gap=\"300\"\n >\n <dt-popover\n :open.sync=\"showLinkInput\"\n :show-close-button=\"false\"\n :visually-hidden-close=\"true\"\n :visually-hidden-close-label=\"'Close link input popover'\"\n data-qa=\"dt-recipe-editor-link-input-popover\"\n padding=\"none\"\n placement=\"bottom-start\"\n @click=\"onInputFocus\"\n @opened=\"updateInput\"\n @click.native.stop=\"onInputFocus\"\n >\n <template #anchor>\n <dt-tooltip\n :key=\"linkButton.key\"\n :message=\"linkButton.tooltipMessage\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n :active=\"$refs.richTextEditor?.editor?.isActive(linkButton.selector)\"\n :aria-label=\"linkButton.tooltipMessage\"\n :data-qa=\"linkButton.dataQA\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"xs\"\n @click=\"linkButton.onClick()\"\n >\n <template #icon>\n <component\n :is=\"linkButton.icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </template>\n\n <template #content>\n <div class=\"d-recipe-editor__popover-content\">\n <span\n v-if=\"showAddLink.setLinkTitle.length > 0\"\n >\n {{ showAddLink.setLinkTitle }}\n </span>\n <dt-input\n v-model=\"linkInput\"\n :input-aria-label=\"showAddLink.setLinkInputAriaLabel\"\n :placeholder=\"setLinkPlaceholder\"\n data-qa=\"dt-recipe-editor-link-input\"\n input-wrapper-class=\"d-recipe-editor-link__input-wrapper\"\n @click=\"onInputFocus\"\n @focus=\"onInputFocus\"\n @click.native.stop=\"onInputFocus\"\n @keydown.enter=\"setLink\"\n />\n </div>\n </template>\n <template #footerContent>\n <dt-stack\n direction=\"row\"\n gap=\"300\"\n class=\"d-recipe-editor__popover-footer\"\n >\n <dt-button\n :aria-label=\"removeLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-remove-link-btn\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n @click=\"removeLink\"\n >\n {{ removeLinkButton.label }}\n </dt-button>\n <dt-button\n :aria-label=\"cancelSetLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-set-link-cancel-btn\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n @click=\"closeLinkInput\"\n >\n {{ cancelSetLinkButton.label }}\n </dt-button>\n <dt-button\n :aria-label=\"confirmSetLinkButton.ariaLabel\"\n data-qa=\"dt-recipe-editor-set-link-confirm-btn\"\n size=\"sm\"\n @click=\"setLink\"\n >\n {{ confirmSetLinkButton.label }}\n </dt-button>\n </dt-stack>\n </template>\n </dt-popover>\n </dt-stack>\n </dt-stack>\n\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n :style=\"{ 'max-height': maxHeight }\"\n class=\"d-recipe-editor__content\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n :allow-inline-images=\"true\"\n :allow-line-breaks=\"true\"\n :hide-link-bubble-menu=\"true\"\n :auto-focus=\"autoFocus\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"`d-recipe-editor__content-input ${inputClass}`\"\n :link=\"true\"\n :output-format=\"htmlOutputFormat\"\n :placeholder=\"placeholder\"\n :use-div-tags=\"useDivTags\"\n data-qa=\"dt-rich-text-editor\"\n v-bind=\"$attrs\"\n @text-input=\"onTextInput\"\n @blur=\"onBlur\"\n @focus=\"onFocus\"\n @input=\"onInput($event)\"\n />\n </div>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n DtRichTextEditor,\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport {\n EDITOR_SUPPORTED_LINK_PROTOCOLS,\n EDITOR_DEFAULT_LINK_PREFIX,\n} from './editor_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtStack } from '@/components/stack';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\nimport {\n DtIconAlignCenter,\n DtIconAlignJustify,\n DtIconAlignLeft,\n DtIconAlignRight,\n DtIconBold,\n DtIconCodeBlock,\n DtIconImage,\n DtIconItalic,\n DtIconLightningBolt,\n DtIconLink2,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconQuote,\n DtIconStrikethrough,\n DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeEditor',\n\n components: {\n DtRichTextEditor,\n DtButton,\n DtPopover,\n DtStack,\n DtInput,\n DtTooltip,\n DtIconLightningBolt,\n DtIconBold,\n DtIconItalic,\n DtIconUnderline,\n DtIconStrikethrough,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconAlignLeft,\n DtIconAlignCenter,\n DtIconAlignRight,\n DtIconAlignJustify,\n DtIconQuote,\n DtIconCodeBlock,\n DtIconLink2,\n DtIconImage,\n },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Value of the input. The object format should match TipTap's JSON\n * document structure: https://tiptap.dev/guide/output#option-1-json\n */\n value: {\n type: [Object, String],\n default: '',\n },\n\n /**\n * Whether the input is editable\n */\n editable: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Descriptive label for the input element\n */\n inputAriaLabel: {\n type: String,\n required: true,\n default: '',\n },\n\n /**\n * Additional class name for the input element. Only accepts a String value\n * because this is passed to the editor via options. For multiple classes,\n * join them into one string, e.g. \"d-p8 d-hmx96\"\n */\n inputClass: {\n type: String,\n default: '',\n },\n\n /**\n * Whether the input should receive focus after the component has been\n * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n * - `start` Sets the focus to the beginning of the input\n * - `end` Sets the focus to the end of the input\n * - `all` Selects the whole contents of the input\n * - `Number` Sets the focus to a specific position in the input\n * - `true` Defaults to `start`\n * - `false` Disables autofocus\n * @values true, false, start, end, all, number\n */\n autoFocus: {\n type: [Boolean, String, Number],\n default: false,\n validator (autoFocus) {\n if (typeof autoFocus === 'string') {\n return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n }\n return true;\n },\n },\n\n /**\n * Placeholder text\n */\n placeholder: {\n type: String,\n default: '',\n },\n\n /**\n * Content area needs to dynamically adjust height based on the conversation area height.\n * can be vh|px|rem|em|%\n */\n maxHeight: {\n type: String,\n default: 'unset',\n },\n\n /**\n * Confirm set link button defaults.\n */\n confirmSetLinkButton: {\n type: Object,\n default: () => ({ label: 'Confirm', ariaLabel: 'Confirm set link' }),\n },\n\n /**\n * Remove link button defaults.\n */\n removeLinkButton: {\n type: Object,\n default: () => ({ label: 'Remove', ariaLabel: 'Remove link' }),\n },\n\n /**\n * Cancel set link button defaults.\n */\n cancelSetLinkButton: {\n type: Object,\n default: () => ({ label: 'Cancel', ariaLabel: 'Cancel set link' }),\n },\n\n /**\n * Placeholder text for the set link input field\n */\n setLinkPlaceholder: {\n type: String,\n default: '',\n },\n\n /**\n * Show button to render text as bold\n */\n showBoldButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to render text in italics\n */\n showItalicsButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to underline text\n */\n showUnderlineButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to strike text\n */\n showStrikeButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to render list items\n */\n showListItemsButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to render ordered list items\n */\n showOrderedListButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to align text to the left\n */\n showAlignLeftButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to align text to the center\n */\n showAlignCenterButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to align text to the right\n */\n showAlignRightButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to justify text\n */\n showAlignJustifyButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to add quote format to text\n */\n showQuoteButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to add code block\n */\n showCodeBlockButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to handle quick replies\n */\n showQuickRepliesButton: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Show button to add an inline image\n */\n showInlineImageButton: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Show add link default config.\n */\n showAddLink: {\n type: Object,\n default: () => ({\n showAddLinkButton: true,\n setLinkTitle: 'Add a link',\n setLinkInputAriaLabel: 'Input field to add link',\n }),\n },\n\n /**\n * Use div tags instead of paragraph tags to show text\n */\n useDivTags: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native focus event\n * @event input\n * @type {String|JSON}\n */\n 'focus',\n\n /**\n * Native blur event\n * @event input\n * @type {String|JSON}\n */\n 'blur',\n\n /**\n * Native input event\n * @event input\n * @type {String|JSON}\n */\n 'input',\n\n /**\n * Quick replies button\n * pressed event\n * @event quick-replies-click\n */\n 'quick-replies-click',\n\n /**\n * Emit when inline image button is clicked\n * @event inline-image-click\n */\n 'inline-image-click',\n\n /**\n * Emit when text content changes (not raw html)\n */\n 'text-input',\n ],\n\n data () {\n return {\n internalInputValue: this.value, // internal input content\n hasFocus: false,\n\n linkOptions: {\n class: 'd-recipe-editor__link',\n },\n\n showLinkInput: false,\n linkInput: '',\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n htmlOutputFormat () {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];\n },\n\n showingTextFormatButtons () {\n return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;\n },\n\n showingAlignmentButtons () {\n return this.showAlignLeftButton || this.showAlignCenterButton ||\n this.showAlignRightButton || this.showAlignJustifyButton;\n },\n\n showingListButtons () {\n return this.showListItemsButton || this.showOrderedListButton;\n },\n\n buttonGroups () {\n const individualButtonStacks = this.individualButtons.map(buttonData => ({\n key: buttonData.selector,\n buttonGroup: [buttonData],\n }));\n return [\n { key: 'new', buttonGroup: this.newButtons },\n { key: 'format', buttonGroup: this.textFormatButtons },\n { key: 'alignment', buttonGroup: this.alignmentButtons },\n { key: 'list', buttonGroup: this.listButtons },\n ...individualButtonStacks,\n ].filter(buttonGroupData => buttonGroupData.buttonGroup.length > 0);\n },\n\n newButtons () {\n return [\n {\n showBtn: this.showQuickRepliesButton,\n label: 'Quick reply',\n selector: 'quickReplies',\n icon: DtIconLightningBolt,\n dataQA: 'dt-recipe-editor-quick-replies-btn',\n tooltipMessage: 'Quick Reply',\n onClick: this.onQuickRepliesClick,\n },\n ].filter(button => button.showBtn);\n },\n\n textFormatButtons () {\n return [\n {\n showBtn: this.showBoldButton,\n selector: 'bold',\n icon: DtIconBold,\n dataQA: 'dt-recipe-editor-bold-btn',\n tooltipMessage: 'Bold',\n onClick: this.onBoldTextToggle,\n },\n {\n showBtn: this.showItalicsButton,\n selector: 'italic',\n icon: DtIconItalic,\n dataQA: 'dt-recipe-editor-italics-btn',\n tooltipMessage: 'Italics',\n onClick: this.onItalicTextToggle,\n },\n {\n showBtn: this.showUnderlineButton,\n selector: 'underline',\n icon: DtIconUnderline,\n dataQA: 'dt-recipe-editor-underline-btn',\n tooltipMessage: 'Underline',\n onClick: this.onUnderlineTextToggle,\n },\n {\n showBtn: this.showStrikeButton,\n selector: 'strike',\n icon: DtIconStrikethrough,\n dataQA: 'dt-recipe-editor-strike-btn',\n tooltipMessage: 'Strike',\n onClick: this.onStrikethroughTextToggle,\n },\n ].filter(button => button.showBtn);\n },\n\n alignmentButtons () {\n return [\n {\n showBtn: this.showAlignLeftButton,\n selector: { textAlign: 'left' },\n icon: DtIconAlignLeft,\n dataQA: 'dt-recipe-editor-align-left-btn',\n tooltipMessage: 'Align Left',\n onClick: () => this.onTextAlign('left'),\n },\n {\n showBtn: this.showAlignCenterButton,\n selector: { textAlign: 'center' },\n icon: DtIconAlignCenter,\n dataQA: 'dt-recipe-editor-align-center-btn',\n tooltipMessage: 'Align Center',\n onClick: () => this.onTextAlign('center'),\n },\n {\n showBtn: this.showAlignRightButton,\n selector: { textAlign: 'right' },\n icon: DtIconAlignRight,\n dataQA: 'dt-recipe-editor-align-right-btn',\n tooltipMessage: 'Align Right',\n onClick: () => this.onTextAlign('right'),\n },\n {\n showBtn: this.showAlignJustifyButton,\n selector: { textAlign: 'justify' },\n icon: DtIconAlignJustify,\n dataQA: 'dt-recipe-editor-align-justify-btn',\n tooltipMessage: 'Align Justify',\n onClick: () => this.onTextAlign('justify'),\n },\n ].filter(button => button.showBtn);\n },\n\n listButtons () {\n return [\n {\n showBtn: this.showListItemsButton,\n selector: 'bulletList',\n icon: DtIconListBullet,\n dataQA: 'dt-recipe-editor-list-items-btn',\n tooltipMessage: 'Bullet List',\n onClick: this.onBulletListToggle,\n },\n {\n showBtn: this.showOrderedListButton,\n selector: 'orderedList',\n icon: DtIconListOrdered,\n dataQA: 'dt-recipe-editor-ordered-list-items-btn',\n tooltipMessage: 'Ordered List',\n onClick: this.onOrderedListToggle,\n },\n ].filter(button => button.showBtn);\n },\n\n individualButtons () {\n return [\n {\n showBtn: this.showQuoteButton,\n selector: 'blockquote',\n icon: DtIconQuote,\n dataQA: 'dt-recipe-editor-blockquote-btn',\n tooltipMessage: 'Quote',\n onClick: this.onBlockquoteToggle,\n },\n {\n showBtn: this.showCodeBlockButton,\n selector: 'codeBlock',\n icon: DtIconCodeBlock,\n dataQA: 'dt-recipe-editor-code-block-btn',\n tooltipMessage: 'Code',\n onClick: this.onCodeBlockToggle,\n },\n {\n showBtn: this.showInlineImageButton,\n selector: 'image',\n icon: DtIconImage,\n dataQA: 'dt-recipe-editor-inline-image-btn',\n tooltipMessage: 'Image',\n onClick: this.onInsertInlineImageClick,\n },\n ].filter(button => button.showBtn);\n },\n\n linkButton () {\n return {\n showBtn: this.showAddLink.showAddLinkButton,\n selector: 'link',\n icon: DtIconLink2,\n dataQA: 'dt-recipe-editor-add-link-btn',\n tooltipMessage: 'Link',\n onClick: this.openLinkInput,\n };\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n },\n\n methods: {\n onInputFocus (event) {\n event?.stopPropagation();\n },\n\n removeLink () {\n this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run();\n this.closeLinkInput();\n },\n\n setLink (event) {\n const editor = this.$refs.richTextEditor?.editor;\n event?.preventDefault();\n event?.stopPropagation();\n\n if (!this.linkInput) {\n // If link text is set to empty string,\n // remove any existing links.\n this.removeLink();\n return;\n }\n\n // Check if input matches any of the supported link formats\n const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find(prefixRegex => prefixRegex.test(this.linkInput));\n\n if (!prefix) {\n // If no matching pattern is found, prepend default prefix\n this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;\n }\n\n const selection = editor?.view?.state?.selection;\n\n if (selection.anchor === selection.head) {\n // If no text has been selected, manually insert the link text.\n // Do not rely on link options set through DtRichTextEditor\n // component, because they clash with these and cause issues.\n editor\n .chain()\n .focus()\n .insertContentAt(\n selection.anchor,\n `<a class=\"${this.linkOptions.class}\" href=${this.linkInput}>${this.linkInput}</a>`,\n )\n .run();\n } else {\n // Set or edit the link\n editor\n .chain()\n .focus()\n .extendMarkRange('link')\n .setLink({ href: this.linkInput, class: this.linkOptions.class })\n .run();\n }\n\n this.closeLinkInput();\n },\n\n openLinkInput () {\n this.showLinkInput = true;\n },\n\n updateInput (openedInput) {\n if (!openedInput) {\n return this.closeLinkInput();\n }\n this.linkInput = this.$refs.richTextEditor?.editor?.getAttributes('link')?.href;\n },\n\n closeLinkInput () {\n this.showLinkInput = false;\n this.linkInput = '';\n this.$refs.richTextEditor.editor?.chain().focus();\n },\n\n onBoldTextToggle () {\n this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run();\n },\n\n onItalicTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run();\n },\n\n onUnderlineTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run();\n },\n\n onStrikethroughTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run();\n },\n\n onTextAlign (alignment) {\n if (this.$refs.richTextEditor?.editor?.isActive({ textAlign: alignment })) {\n // If this alignment type is already set here, unset it\n return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();\n }\n this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(alignment).run();\n },\n\n onBulletListToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run();\n },\n\n onOrderedListToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run();\n },\n\n onCodeBlockToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run();\n },\n\n onQuickRepliesClick () {\n this.$emit('quick-replies-click');\n },\n\n onInsertInlineImageClick () {\n this.$emit('inline-image-click');\n },\n\n insertInlineImage (imageUrl) {\n this.$refs.richTextEditor?.editor.chain().focus().setImage({ src: imageUrl }).run();\n },\n\n onBlockquoteToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();\n },\n\n insertInMessageBody (messageContent) {\n this.$refs.richTextEditor?.editor.chain().focus().insertContent(messageContent).run();\n },\n\n setCursorPosition (position = null) {\n this.$refs.richTextEditor?.editor.chain().focus(position).run();\n },\n\n onTextInput (event) {\n this.$emit('text-input', event);\n },\n\n onFocus (event) {\n this.hasFocus = true;\n this.$emit('focus', event);\n },\n\n onBlur (event) {\n this.hasFocus = false;\n this.$emit('blur', event);\n },\n\n onInput (event) {\n this.$emit('input', event);\n },\n\n },\n};\n</script>\n"],"names":["_sfc_main","DtRichTextEditor","DtButton","DtPopover","DtStack","DtInput","DtTooltip","DtIconLightningBolt","DtIconBold","DtIconItalic","DtIconUnderline","DtIconStrikethrough","DtIconListBullet","DtIconListOrdered","DtIconAlignLeft","DtIconAlignCenter","DtIconAlignRight","DtIconAlignJustify","DtIconQuote","DtIconCodeBlock","DtIconLink2","DtIconImage","autoFocus","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS","individualButtonStacks","buttonData","buttonGroupData","button","newValue","event","_e","_d","_c","_b","_a","editor","EDITOR_SUPPORTED_LINK_PROTOCOLS","prefixRegex","EDITOR_DEFAULT_LINK_PREFIX","selection","openedInput","alignment","imageUrl","messageContent","position"],"mappings":";;;;;;;;;;AAwNA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,WAAA;AAAA,MACA,MAAA,CAAA,SAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAAC,GAAA;AACA,eAAA,OAAAA,KAAA,WACAC,EAAA,SAAAD,CAAA,IAEA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,EAAA,OAAA,WAAA,WAAA,mBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,EAAA,OAAA,UAAA,WAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,EAAA,OAAA,UAAA,WAAA,kBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,uBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,uBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,uBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA;AAAA,QACA,mBAAA;AAAA,QACA,cAAA;AAAA,QACA,uBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,oBAAA,KAAA;AAAA;AAAA,MACA,UAAA;AAAA,MAEA,aAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MAEA,eAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,mBAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAAE,EAAA,CAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,kBAAA,KAAA,qBAAA,KAAA,oBAAA,KAAA;AAAA,IACA;AAAA,IAEA,0BAAA;AACA,aAAA,KAAA,uBAAA,KAAA,yBACA,KAAA,wBAAA,KAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,aAAA,KAAA,uBAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,YAAAC,IAAA,KAAA,kBAAA,IAAA,CAAAC,OAAA;AAAA,QACA,KAAAA,EAAA;AAAA,QACA,aAAA,CAAAA,CAAA;AAAA,MACA,EAAA;AACA,aAAA;AAAA,QACA,EAAA,KAAA,OAAA,aAAA,KAAA,WAAA;AAAA,QACA,EAAA,KAAA,UAAA,aAAA,KAAA,kBAAA;AAAA,QACA,EAAA,KAAA,aAAA,aAAA,KAAA,iBAAA;AAAA,QACA,EAAA,KAAA,QAAA,aAAA,KAAA,YAAA;AAAA,QACA,GAAAD;AAAA,MACA,EAAA,OAAA,CAAAE,MAAAA,EAAA,YAAA,SAAA,CAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,OAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAApB;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,MACA,EAAA,OAAA,CAAAqB,MAAAA,EAAA,OAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAApB;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAAC;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAAC;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAAC;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,MACA,EAAA,OAAA,CAAAiB,MAAAA,EAAA,OAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA,EAAA,WAAA,OAAA;AAAA,UACA,MAAAd;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,MAAA,KAAA,YAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA,EAAA,WAAA,SAAA;AAAA,UACA,MAAAC;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,MAAA,KAAA,YAAA,QAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA,EAAA,WAAA,QAAA;AAAA,UACA,MAAAC;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,MAAA,KAAA,YAAA,OAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA,EAAA,WAAA,UAAA;AAAA,UACA,MAAAC;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,MAAA,KAAA,YAAA,SAAA;AAAA,QACA;AAAA,MACA,EAAA,OAAA,CAAAW,MAAAA,EAAA,OAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAAhB;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAAC;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,MACA,EAAA,OAAA,CAAAe,MAAAA,EAAA,OAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAAV;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAAC;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAAE;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,MACA,EAAA,OAAA,CAAAO,MAAAA,EAAA,OAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA;AAAA,QACA,SAAA,KAAA,YAAA;AAAA,QACA,UAAA;AAAA,QACA,MAAAR;AAAA,QACA,QAAA;AAAA,QACA,gBAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAAS,GAAA;AACA,WAAA,qBAAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAAC,GAAA;AACA,MAAAA,KAAA,QAAAA,EAAA;AAAA,IACA;AAAA,IAEA,aAAA;;AACA,OAAAC,KAAAC,KAAAC,KAAAC,KAAAC,IAAA,KAAA,MAAA,mBAAA,gBAAAA,EAAA,WAAA,gBAAAD,EAAA,YAAA,gBAAAD,EAAA,YAAA,gBAAAD,EAAA,gBAAA,QAAAD,EAAA,OACA,KAAA,eAAA;AAAA,IACA;AAAA,IAEA,QAAAD,GAAA;;AACA,YAAAM,KAAAD,IAAA,KAAA,MAAA,mBAAA,gBAAAA,EAAA;AAIA,UAHAL,KAAA,QAAAA,EAAA,kBACAA,KAAA,QAAAA,EAAA,mBAEA,CAAA,KAAA,WAAA;AAGA,aAAA,WAAA;AACA;AAAA,MACA;AAKA,MAFAO,EAAA,KAAA,CAAAC,MAAAA,EAAA,KAAA,KAAA,SAAA,CAAA,MAIA,KAAA,YAAA,GAAAC,CAAA,GAAA,KAAA,SAAA;AAGA,YAAAC,KAAAP,KAAAC,IAAAE,KAAA,gBAAAA,EAAA,SAAA,gBAAAF,EAAA,UAAA,gBAAAD,EAAA;AAEA,MAAAO,EAAA,WAAAA,EAAA,OAIAJ,EACA,MAAA,EACA,MAAA,EACA;AAAA,QACAI,EAAA;AAAA,QACA,aAAA,KAAA,YAAA,KAAA,UAAA,KAAA,SAAA,IAAA,KAAA,SAAA;AAAA,MACA,EACA,QAGAJ,EACA,MAAA,EACA,MAAA,EACA,gBAAA,MAAA,EACA,QAAA,EAAA,MAAA,KAAA,WAAA,OAAA,KAAA,YAAA,OAAA,EACA,OAGA,KAAA,eAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,YAAAK,GAAA;;AACA,UAAA,CAAAA;AACA,eAAA,KAAA;AAEA,WAAA,aAAAR,KAAAC,KAAAC,IAAA,KAAA,MAAA,mBAAA,gBAAAA,EAAA,WAAA,gBAAAD,EAAA,cAAA,YAAA,gBAAAD,EAAA;AAAA,IACA;AAAA,IAEA,iBAAA;;AACA,WAAA,gBAAA,IACA,KAAA,YAAA,KACAE,IAAA,KAAA,MAAA,eAAA,WAAA,QAAAA,EAAA,QAAA;AAAA,IACA;AAAA,IAEA,mBAAA;;AACA,OAAAD,KAAAC,IAAA,KAAA,MAAA,mBAAA,gBAAAA,EAAA,WAAA,QAAAD,EAAA,QAAA,QAAA,aAAA;AAAA,IACA;AAAA,IAEA,qBAAA;;AACA,OAAAC,IAAA,KAAA,MAAA,mBAAA,QAAAA,EAAA,OAAA,QAAA,QAAA,eAAA;AAAA,IACA;AAAA,IAEA,wBAAA;;AACA,OAAAA,IAAA,KAAA,MAAA,mBAAA,QAAAA,EAAA,OAAA,QAAA,QAAA,kBAAA;AAAA,IACA;AAAA,IAEA,4BAAA;;AACA,OAAAA,IAAA,KAAA,MAAA,mBAAA,QAAAA,EAAA,OAAA,QAAA,QAAA,eAAA;AAAA,IACA;AAAA,IAEA,YAAAO,GAAA;;AACA,WAAAR,KAAAC,IAAA,KAAA,MAAA,mBAAA,gBAAAA,EAAA,WAAA,QAAAD,EAAA,SAAA,EAAA,WAAAQ,EAAA;AAEA,gBAAAT,IAAA,KAAA,MAAA,mBAAA,gBAAAA,EAAA,OAAA,QAAA,QAAA,iBAAA;AAEA,OAAAD,IAAA,KAAA,MAAA,mBAAA,QAAAA,EAAA,OAAA,QAAA,QAAA,aAAAU,GAAA;AAAA,IACA;AAAA,IAEA,qBAAA;;AACA,OAAAP,IAAA,KAAA,MAAA,mBAAA,QAAAA,EAAA,OAAA,QAAA,QAAA,mBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;;AACA,OAAAA,IAAA,KAAA,MAAA,mBAAA,QAAAA,EAAA,OAAA,QAAA,QAAA,oBAAA;AAAA,IACA;AAAA,IAEA,oBAAA;;AACA,OAAAA,IAAA,KAAA,MAAA,mBAAA,QAAAA,EAAA,OAAA,QAAA,QAAA,kBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,WAAA,MAAA,qBAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,WAAA,MAAA,oBAAA;AAAA,IACA;AAAA,IAEA,kBAAAQ,GAAA;;AACA,OAAAR,IAAA,KAAA,MAAA,mBAAA,QAAAA,EAAA,OAAA,QAAA,QAAA,SAAA,EAAA,KAAAQ,EAAA,GAAA;AAAA,IACA;AAAA,IAEA,qBAAA;;AACA,OAAAR,IAAA,KAAA,MAAA,mBAAA,QAAAA,EAAA,OAAA,QAAA,QAAA,mBAAA;AAAA,IACA;AAAA,IAEA,oBAAAS,GAAA;;AACA,OAAAT,IAAA,KAAA,MAAA,mBAAA,QAAAA,EAAA,OAAA,QAAA,QAAA,cAAAS,GAAA;AAAA,IACA;AAAA,IAEA,kBAAAC,IAAA,MAAA;;AACA,OAAAV,IAAA,KAAA,MAAA,mBAAA,QAAAA,EAAA,OAAA,QAAA,MAAAU,GAAA;AAAA,IACA;AAAA,IAEA,YAAAf,GAAA;AACA,WAAA,MAAA,cAAAA,CAAA;AAAA,IACA;AAAA,IAEA,QAAAA,GAAA;AACA,WAAA,WAAA,IACA,KAAA,MAAA,SAAAA,CAAA;AAAA,IACA;AAAA,IAEA,OAAAA,GAAA;AACA,WAAA,WAAA,IACA,KAAA,MAAA,QAAAA,CAAA;AAAA,IACA;AAAA,IAEA,QAAAA,GAAA;AACA,WAAA,MAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|