@dialpad/dialtone-vue 2.179.1 → 2.181.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/components/pagination/pagination.vue.cjs +2 -2
- package/dist/components/pagination/pagination.vue.cjs.map +1 -1
- package/dist/components/pagination/pagination.vue.js +2 -2
- package/dist/components/pagination/pagination.vue.js.map +1 -1
- package/dist/components/rich_text_editor/extensions/div/div.cjs +14 -0
- package/dist/components/rich_text_editor/extensions/div/div.cjs.map +1 -0
- package/dist/components/rich_text_editor/extensions/div/div.js +14 -0
- package/dist/components/rich_text_editor/extensions/div/div.js.map +1 -0
- package/dist/components/rich_text_editor/extensions/div/index.cjs +5 -0
- package/dist/components/rich_text_editor/extensions/div/index.cjs.map +1 -0
- package/dist/components/rich_text_editor/extensions/div/index.js +5 -0
- package/dist/components/rich_text_editor/extensions/div/index.js.map +1 -0
- package/dist/components/rich_text_editor/rich_text_editor.vue.cjs +10 -1
- package/dist/components/rich_text_editor/rich_text_editor.vue.cjs.map +1 -1
- package/dist/components/rich_text_editor/rich_text_editor.vue.js +10 -1
- package/dist/components/rich_text_editor/rich_text_editor.vue.js.map +1 -1
- package/dist/recipes/conversation_view/editor/editor.vue.cjs +38 -3
- package/dist/recipes/conversation_view/editor/editor.vue.cjs.map +1 -1
- package/dist/recipes/conversation_view/editor/editor.vue.js +39 -4
- package/dist/recipes/conversation_view/editor/editor.vue.js.map +1 -1
- package/dist/types/components/pagination/pagination.vue.d.ts.map +1 -1
- package/dist/types/components/rich_text_editor/extensions/div/div.d.ts +2 -0
- package/dist/types/components/rich_text_editor/extensions/div/div.d.ts.map +1 -0
- package/dist/types/components/rich_text_editor/extensions/div/index.d.ts +3 -0
- package/dist/types/components/rich_text_editor/extensions/div/index.d.ts.map +1 -0
- package/dist/types/components/rich_text_editor/rich_text_editor.vue.d.ts +9 -0
- package/dist/types/components/rich_text_editor/rich_text_editor.vue.d.ts.map +1 -1
- package/dist/types/recipes/conversation_view/editor/editor.vue.d.ts +21 -1
- package/dist/types/recipes/conversation_view/editor/editor.vue.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editor.vue.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 data-qa=\"dt-rich-text-editor\"\n v-bind=\"$attrs\"\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 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 },\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 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 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 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 ].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 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 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":["editor"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"editor.vue.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 @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 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 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":["editor"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.vue.d.ts","sourceRoot":"","sources":["../../../../components/pagination/pagination.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pagination.vue.d.ts","sourceRoot":"","sources":["../../../../components/pagination/pagination.vue"],"names":[],"mappings":"AAiEA;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"div.d.ts","sourceRoot":"","sources":["../../../../../../components/rich_text_editor/extensions/div/div.js"],"names":[],"mappings":"AAOA,oHASG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../components/rich_text_editor/extensions/div/index.js"],"names":[],"mappings":";6BAA6B,OAAO"}
|
|
@@ -102,6 +102,10 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
102
102
|
type: BooleanConstructor;
|
|
103
103
|
default: boolean;
|
|
104
104
|
};
|
|
105
|
+
useDivTags: {
|
|
106
|
+
type: BooleanConstructor;
|
|
107
|
+
default: boolean;
|
|
108
|
+
};
|
|
105
109
|
}, {}, {
|
|
106
110
|
editor: null;
|
|
107
111
|
tippyOptions: {
|
|
@@ -246,6 +250,10 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
246
250
|
type: BooleanConstructor;
|
|
247
251
|
default: boolean;
|
|
248
252
|
};
|
|
253
|
+
useDivTags: {
|
|
254
|
+
type: BooleanConstructor;
|
|
255
|
+
default: boolean;
|
|
256
|
+
};
|
|
249
257
|
}>>, {
|
|
250
258
|
link: boolean | Record<string, any>;
|
|
251
259
|
value: string | Record<string, any>;
|
|
@@ -271,6 +279,7 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
271
279
|
allowInlineImages: boolean;
|
|
272
280
|
additionalExtensions: unknown[];
|
|
273
281
|
hideLinkBubbleMenu: boolean;
|
|
282
|
+
useDivTags: boolean;
|
|
274
283
|
}>;
|
|
275
284
|
export default _default;
|
|
276
285
|
//# sourceMappingURL=rich_text_editor.vue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rich_text_editor.vue.d.ts","sourceRoot":"","sources":["../../../../components/rich_text_editor/rich_text_editor.vue"],"names":[],"mappings":"AAoDA
|
|
1
|
+
{"version":3,"file":"rich_text_editor.vue.d.ts","sourceRoot":"","sources":["../../../../components/rich_text_editor/rich_text_editor.vue"],"names":[],"mappings":"AAoDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAg5B0B,cAAc"}
|
|
@@ -106,6 +106,10 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
106
106
|
type: BooleanConstructor;
|
|
107
107
|
default: boolean;
|
|
108
108
|
};
|
|
109
|
+
showInlineImageButton: {
|
|
110
|
+
type: BooleanConstructor;
|
|
111
|
+
default: boolean;
|
|
112
|
+
};
|
|
109
113
|
showAddLink: {
|
|
110
114
|
type: ObjectConstructor;
|
|
111
115
|
default: () => {
|
|
@@ -114,6 +118,10 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
114
118
|
setLinkInputAriaLabel: string;
|
|
115
119
|
};
|
|
116
120
|
};
|
|
121
|
+
useDivTags: {
|
|
122
|
+
type: BooleanConstructor;
|
|
123
|
+
default: boolean;
|
|
124
|
+
};
|
|
117
125
|
}, {}, {
|
|
118
126
|
internalInputValue: any;
|
|
119
127
|
hasFocus: boolean;
|
|
@@ -218,13 +226,15 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
218
226
|
onOrderedListToggle(): void;
|
|
219
227
|
onCodeBlockToggle(): void;
|
|
220
228
|
onQuickRepliesClick(): void;
|
|
229
|
+
onInsertInlineImageClick(): void;
|
|
230
|
+
insertInlineImage(imageUrl: any): void;
|
|
221
231
|
onBlockquoteToggle(): void;
|
|
222
232
|
insertInMessageBody(messageContent: any): void;
|
|
223
233
|
setCursorPosition(position?: null): void;
|
|
224
234
|
onFocus(event: any): void;
|
|
225
235
|
onBlur(event: any): void;
|
|
226
236
|
onInput(event: any): void;
|
|
227
|
-
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("input" | "focus" | "blur" | "quick-replies-click")[], string, Readonly<import('vue').ExtractPropTypes<{
|
|
237
|
+
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("input" | "focus" | "blur" | "quick-replies-click" | "inline-image-click")[], string, Readonly<import('vue').ExtractPropTypes<{
|
|
228
238
|
value: {
|
|
229
239
|
type: (ObjectConstructor | StringConstructor)[];
|
|
230
240
|
default: string;
|
|
@@ -332,6 +342,10 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
332
342
|
type: BooleanConstructor;
|
|
333
343
|
default: boolean;
|
|
334
344
|
};
|
|
345
|
+
showInlineImageButton: {
|
|
346
|
+
type: BooleanConstructor;
|
|
347
|
+
default: boolean;
|
|
348
|
+
};
|
|
335
349
|
showAddLink: {
|
|
336
350
|
type: ObjectConstructor;
|
|
337
351
|
default: () => {
|
|
@@ -340,6 +354,10 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
340
354
|
setLinkInputAriaLabel: string;
|
|
341
355
|
};
|
|
342
356
|
};
|
|
357
|
+
useDivTags: {
|
|
358
|
+
type: BooleanConstructor;
|
|
359
|
+
default: boolean;
|
|
360
|
+
};
|
|
343
361
|
}>>, {
|
|
344
362
|
value: string | Record<string, any>;
|
|
345
363
|
maxHeight: string;
|
|
@@ -348,6 +366,7 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
348
366
|
editable: boolean;
|
|
349
367
|
inputAriaLabel: string;
|
|
350
368
|
autoFocus: string | number | boolean;
|
|
369
|
+
useDivTags: boolean;
|
|
351
370
|
confirmSetLinkButton: Record<string, any>;
|
|
352
371
|
removeLinkButton: Record<string, any>;
|
|
353
372
|
cancelSetLinkButton: Record<string, any>;
|
|
@@ -365,6 +384,7 @@ declare const _default: import('vue').DefineComponent<{
|
|
|
365
384
|
showQuoteButton: boolean;
|
|
366
385
|
showCodeBlockButton: boolean;
|
|
367
386
|
showQuickRepliesButton: boolean;
|
|
387
|
+
showInlineImageButton: boolean;
|
|
368
388
|
showAddLink: Record<string, any>;
|
|
369
389
|
}>;
|
|
370
390
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editor.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/conversation_view/editor/editor.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"editor.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/conversation_view/editor/editor.vue"],"names":[],"mappings":"AAoLA;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dialpad/dialtone-vue",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.181.0",
|
|
4
4
|
"description": "Vue component library for Dialpad's design system Dialtone",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"overlayscrollbars": "2.10.0",
|
|
39
39
|
"regex-combined-emojis": "1.6.0",
|
|
40
40
|
"tippy.js": "6.3.7",
|
|
41
|
-
"@dialpad/dialtone-icons": "4.34.
|
|
42
|
-
"@dialpad/dialtone-emojis": "1.1.
|
|
41
|
+
"@dialpad/dialtone-icons": "4.34.5",
|
|
42
|
+
"@dialpad/dialtone-emojis": "1.1.1"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@storybook/addon-a11y": "7.6.20",
|
|
@@ -51,12 +51,12 @@
|
|
|
51
51
|
"react": "17.0.2",
|
|
52
52
|
"storybook-dark-mode": "^3.0.3",
|
|
53
53
|
"vue": "^2.7.15",
|
|
54
|
-
"@dialpad/
|
|
55
|
-
"@dialpad/dialtone
|
|
54
|
+
"@dialpad/dialtone-css": "8.50.6",
|
|
55
|
+
"@dialpad/generator-dialtone": "0.1.0"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"vue": ">=2.6",
|
|
59
|
-
"@dialpad/dialtone-css": "^8.50.
|
|
59
|
+
"@dialpad/dialtone-css": "^8.50.6"
|
|
60
60
|
},
|
|
61
61
|
"bugs": {
|
|
62
62
|
"email": "dialtone@dialpad.com"
|