@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

dialtone.dialpad.com

1 lines • 107 kB

Source Map (JSON)

{"version":3,"file":"rich-text-editor.cjs","sources":["../../../components/rich_text_editor/extensions/emoji/EmojiComponent.vue","../../../components/rich_text_editor/extensions/suggestion/SuggestionList.vue","../../../components/rich_text_editor/extensions/emoji/EmojiSuggestion.vue","../../../components/rich_text_editor/extensions/tippy_plugins/hide_on_esc.js","../../../components/rich_text_editor/extensions/emoji/suggestion.js","../../../components/rich_text_editor/extensions/emoji/emoji.js","../../../components/rich_text_editor/extensions/custom_link/utils.js","../../../components/rich_text_editor/extensions/custom_link/autolink.js","../../../components/rich_text_editor/extensions/custom_link/custom_link.js","../../../components/rich_text_editor/extensions/image/image.js","../../../components/rich_text_editor/extensions/div/div.js","../../../components/rich_text_editor/extensions/mentions/MentionComponent.vue","../../../components/rich_text_editor/extensions/mentions/mention.js","../../../components/rich_text_editor/extensions/channels/ChannelComponent.vue","../../../components/rich_text_editor/extensions/channels/channel.js","../../../components/rich_text_editor/extensions/slash_command/SlashCommandComponent.vue","../../../components/rich_text_editor/extensions/slash_command/slash_command.js","../../../components/rich_text_editor/extensions/mentions/MentionSuggestion.vue","../../../components/rich_text_editor/extensions/mentions/suggestion.js","../../../components/rich_text_editor/extensions/channels/ChannelSuggestion.vue","../../../components/rich_text_editor/extensions/channels/suggestion.js","../../../components/rich_text_editor/extensions/slash_command/SlashCommandSuggestion.vue","../../../components/rich_text_editor/extensions/slash_command/suggestion.js","../../../components/rich_text_editor/rich_text_editor.vue"],"sourcesContent":["\n<template>\n <node-view-wrapper\n class=\"d-d-inline-block d-va-bottom d-lh0\"\n >\n <dt-emoji\n size=\"500\"\n :code=\"node.attrs.code\"\n />\n </node-view-wrapper>\n</template>\n\n<script>\nimport { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3';\n\nimport { DtEmoji } from '@/components/emoji';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'EmojiComponent',\n components: {\n NodeViewWrapper,\n DtEmoji,\n },\n\n props: nodeViewProps,\n};\n</script>\n","\n<template>\n <div class=\"d-popover__dialog d-suggestion-list__container\">\n <ul\n v-show=\"items.length\"\n ref=\"suggestionList\"\n class=\"d-suggestion-list\"\n >\n <dt-list-item\n v-for=\"(item, index) in items\"\n :key=\"item.id\"\n :class=\"[\n 'd-suggestion-list__item',\n { 'd-list-item--highlighted': index === selectedIndex },\n ]\"\n navigation-type=\"arrow-keys\"\n @click=\"selectItem(index)\"\n @keydown.prevent=\"onKeyDown\"\n >\n <component\n :is=\"itemComponent\"\n :item=\"item\"\n />\n </dt-list-item>\n </ul>\n </div>\n</template>\n\n<script>\nimport { DtListItem } from '@/components/list_item';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'SuggestionList',\n components: {\n DtListItem,\n },\n\n props: {\n items: {\n type: Array,\n required: true,\n },\n\n command: {\n type: Function,\n required: true,\n },\n\n itemComponent: {\n type: Object,\n required: true,\n },\n\n itemType: {\n type: String,\n required: true,\n },\n },\n\n data () {\n return {\n selectedIndex: 0,\n };\n },\n\n watch: {\n items () {\n this.selectedIndex = 0;\n },\n },\n\n methods: {\n onKeyDown ({ event }) {\n if (event.key === 'ArrowUp') {\n this.upHandler();\n return true;\n }\n\n if (event.key === 'ArrowDown') {\n this.downHandler();\n return true;\n }\n\n if (event.key === 'Enter' || event.key === 'Tab') {\n this.selectHandler();\n return true;\n }\n\n return false;\n },\n\n upHandler () {\n this.selectedIndex = ((this.selectedIndex + this.items.length) - 1) % this.items.length;\n\n this.scrollActiveElementIntoView();\n },\n\n downHandler () {\n this.selectedIndex = (this.selectedIndex + 1) % this.items.length;\n\n this.scrollActiveElementIntoView();\n },\n\n async scrollActiveElementIntoView () {\n await this.$nextTick();\n const activeElement = this.$refs.suggestionList.querySelector('.d-list-item--highlighted');\n if (activeElement) {\n activeElement.scrollIntoView({\n behaviour: 'smooth',\n block: 'center',\n });\n }\n },\n\n selectHandler () {\n this.selectItem(this.selectedIndex);\n },\n\n selectItem (index) {\n const item = this.items[index];\n\n switch (this.itemType) {\n case 'emoji':\n this.command(item);\n return;\n case 'mention':\n this.command({ name: item.name, id: item.id, avatarSrc: item.avatarSrc });\n break;\n case 'channel':\n this.command({ name: item.name, id: item.id });\n break;\n case 'slash-command':\n this.command({ command: item.command });\n break;\n }\n },\n },\n};\n</script>\n","<template>\n <dt-stack\n direction=\"row\"\n gap=\"400\"\n >\n <dt-emoji\n size=\"200\"\n :code=\"item.code\"\n />\n {{ item.code }}\n </dt-stack>\n</template>\n\n<script>\nimport { DtEmoji } from '@/components/emoji';\nimport { DtStack } from '@/components/stack';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'EmojiSuggestion',\n components: {\n DtEmoji,\n DtStack,\n },\n\n props: {\n item: {\n type: Object,\n required: true,\n },\n },\n};\n</script>\n","export default {\n name: 'hideOnEsc',\n defaultValue: true,\n fn ({ hide }) {\n function onKeyDown (event) {\n if (event.keyCode === 27) {\n hide();\n }\n }\n\n return {\n onShow () {\n document.addEventListener('keydown', onKeyDown);\n },\n onHide () {\n document.removeEventListener('keydown', onKeyDown);\n },\n };\n },\n};\n","import { markRaw } from 'vue';\nimport { VueRenderer } from '@tiptap/vue-3';\nimport { emojisIndexed } from '@dialpad/dialtone-emojis';\n\nimport SuggestionList from '../suggestion/SuggestionList.vue';\nimport EmojiSuggestion from './EmojiSuggestion.vue';\n\nimport tippy from 'tippy.js';\nimport hideOnEsc from '../tippy_plugins/hide_on_esc';\n\nconst suggestionLimit = 20;\n\nexport default {\n items: ({ query }) => {\n if (query.length < 2) {\n return [];\n }\n const emojiList = Object.values(emojisIndexed);\n query = query.toLowerCase();\n\n const filteredEmoji = emojiList\n .filter(\n item => [\n item.name,\n item.shortname.replaceAll(':', ''),\n ...item.keywords,\n ].some(text => text.startsWith(query)),\n ).splice(0, suggestionLimit);\n return filteredEmoji.map(item => ({ code: item.shortname }));\n },\n\n command: ({ editor, range, props }) => {\n // increase range.to by one when the next node is of type \"text\"\n // and starts with a space character\n const nodeAfter = editor.view.state.selection.$to.nodeAfter;\n const overrideSpace = nodeAfter?.text?.startsWith(' ');\n\n if (overrideSpace) {\n range.to += 1;\n }\n\n editor\n .chain()\n .focus()\n .insertContentAt(range, [\n {\n type: 'emoji',\n attrs: props,\n },\n ])\n .run();\n\n window.getSelection()?.collapseToEnd();\n },\n\n render: () => {\n let component;\n let popup;\n let popupIsOpen = false;\n\n return {\n onStart: props => {\n component = new VueRenderer(SuggestionList, {\n props: {\n itemComponent: markRaw(EmojiSuggestion),\n itemType: 'emoji',\n ...props,\n },\n editor: props.editor,\n });\n\n if (!props.clientRect) {\n return;\n }\n\n popup = tippy('body', {\n getReferenceClientRect: props.clientRect,\n appendTo: () => document.body,\n content: component.element,\n showOnCreate: false,\n onShow: () => { popupIsOpen = true; },\n onHidden: () => { popupIsOpen = false; },\n interactive: true,\n trigger: 'manual',\n placement: 'top-start',\n zIndex: 650,\n plugins: [hideOnEsc],\n });\n\n if (props.items.length > 0) {\n popup?.[0].show();\n }\n },\n\n onUpdate (props) {\n component?.updateProps(props);\n\n if (props.items.length > 0) {\n popup?.[0].show();\n } else {\n popup?.[0].hide();\n }\n popup?.[0].setProps({\n getReferenceClientRect: props.clientRect,\n });\n },\n\n onKeyDown (props) {\n if (popupIsOpen) {\n return component?.ref?.onKeyDown(props);\n }\n },\n\n onExit () {\n popup?.[0].destroy();\n popup = null;\n component?.destroy();\n component = null;\n },\n };\n },\n};\n","import { InputRule, mergeAttributes, Node, nodePasteRule } from '@tiptap/core';\nimport { PluginKey } from '@tiptap/pm/state';\nimport { VueNodeViewRenderer } from '@tiptap/vue-3';\nimport Suggestion from '@tiptap/suggestion';\nimport { emojiPattern } from 'regex-combined-emojis';\n\nimport EmojiComponent from './EmojiComponent.vue';\nimport { codeToEmojiData, emojiShortCodeRegex, emojiRegex, stringToUnicode } from '@/common/emoji';\nimport suggestionOptions from './suggestion';\n\nconst inputShortCodeRegex = /(:\\w+:)$/;\nconst inputUnicodeRegex = new RegExp(emojiPattern + '$');\n\nconst inputRuleMatch = (match) => {\n if (match && codeToEmojiData(match[0])) {\n const text = match[2] || match[0];\n // needs to be a dict returned\n // ref type InputRuleMatch:\n // https://github.com/ueberdosis/tiptap/blob/main/packages/core/src/InputRule.ts#L16\n return { text };\n }\n};\n\nconst shortCodePasteMatch = (text) => {\n const matches = [...text.matchAll(emojiShortCodeRegex)];\n\n return matches\n .filter(match => codeToEmojiData(match[0]))\n .map(match => ({\n index: match.index,\n text: match[0],\n match,\n }));\n};\n\nexport const Emoji = Node.create({\n name: 'emoji',\n addOptions () {\n return {\n HTMLAttributes: {},\n };\n },\n group: 'inline',\n inline: true,\n selectable: false,\n atom: true,\n\n addNodeView () {\n return VueNodeViewRenderer(EmojiComponent);\n },\n\n addAttributes () {\n return {\n code: {\n default: null,\n },\n };\n },\n\n parseHTML () {\n return [\n {\n tag: 'emoji-component',\n },\n ];\n },\n\n renderText ({ node }) {\n // output emoji in text as unicode character rather than shortname for backwards compatibility with\n // our backend.\n const unicodeEmoji = stringToUnicode(codeToEmojiData(node.attrs.code).unicode_output);\n return unicodeEmoji;\n },\n\n renderHTML ({ HTMLAttributes }) {\n return ['emoji-component', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];\n },\n\n addInputRules () {\n return [\n new InputRule({\n find: (text) => {\n const match = text.match(inputShortCodeRegex) || text.match(inputUnicodeRegex);\n if (!match) return;\n\n return inputRuleMatch(match);\n },\n handler: ({ state, range, match}) => {\n const { tr } = state;\n const start = range.from;\n const end = range.to;\n tr.replaceWith(start, end, this.type.create({ code: match[0] }));\n },\n }),\n ];\n },\n\n addPasteRules () {\n return [\n nodePasteRule({\n find: shortCodePasteMatch,\n type: this.type,\n getAttributes (attrs) {\n return {\n code: attrs[0],\n };\n },\n }),\n nodePasteRule({\n find: emojiRegex,\n type: this.type,\n getAttributes (attrs) {\n return {\n code: attrs[0],\n };\n },\n }),\n ];\n },\n\n addProseMirrorPlugins () {\n return [\n Suggestion({\n char: ':',\n pluginKey: new PluginKey('emoji'),\n editor: this.editor,\n ...this.options.suggestion,\n ...suggestionOptions,\n }),\n ];\n },\n\n addKeyboardShortcuts () {\n return {\n Backspace: () => this.editor.commands.command(({ tr, state }) => {\n let isEmoji = false;\n const { selection } = state;\n const { empty, anchor } = selection;\n if (!empty) { return false; }\n state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {\n if (node.type.name === this.name) {\n isEmoji = true;\n tr.insertText('', pos, pos + node.nodeSize);\n return false;\n }\n });\n return isEmoji;\n }),\n };\n },\n});\n","import { getMarksBetween } from '@tiptap/core';\nimport {\n getPhoneNumberRegex,\n linkRegex,\n} from '@/common/utils';\n\n/**\n * Get matches in a string and return the ones that pass the optional extra\n * validation or if no validator is provided return all matches.\n */\nexport function getRegexMatches (text, regex, validator = () => true) {\n const matches = [];\n\n // Reset the lastIndex since the last time this was run.\n regex.lastIndex = 0;\n\n let match;\n while ((match = regex.exec(text))) {\n if (validator(text, match)) {\n matches.push(match);\n }\n }\n\n return matches;\n}\n\n/**\n * Validate the prefix of a match in a string not to contain certain characters.\n */\nexport function hasValidPrefix (text, match) {\n // The string match can't start with # or @ or have either preceding the match\n // as they're reserved for mentions and hashtags.\n return !['#', '@'].includes(text.charAt(match.index)) &&\n !['#', '@'].includes(text.charAt(match.index - 1));\n}\n\n/**\n * Trim punctuation characters at the a of the string, e.g. \"dialpad.com!\" =>\n * \"dialpad.com\"\n */\nexport function trimEndPunctiation (string) {\n const endPunctuationRegex = new RegExp(\n '(?:' +\n [\n '[!?.,:;\\'\"]',\n '(?:&|&)(?:lt|gt|quot|apos|raquo|laquo|rsaquo|lsaquo);)+$',\n ].join('|'),\n 'g',\n );\n return string.replace(endPunctuationRegex, '');\n}\n\n/**\n * Find the word from a string at a given index. For example for \"example here\"\n * - indices 0-7 => \"example\"\n * - indices 8-12 => \"here\".\n * Modified from https://stackoverflow.com/a/5174867\n */\nexport function getWordAt (text, index) {\n // Position of the first non-whitespace character following a possible\n // whitespace when looking from the index to the left.\n const left = text.slice(0, index + 1).search(/\\S+\\s*$/);\n\n // Position of the first whitespace when looking from the index to the right.\n const right = text.slice(index).search(/\\s/);\n\n // If the word is at the end of the string, right is -1.\n if (right < 0) {\n const word = text.slice(left);\n return {\n text: word,\n from: left,\n to: left + word.length,\n };\n }\n\n return {\n text: text.slice(left, right + index),\n from: left,\n to: right + index,\n };\n}\n\n/**\n * Helper to check if a word at a given index matches a regex and if true, finds\n * the previous or next word until the regex doesn't match anymore. Useful to\n * find for example the entire phone number when it is separated by whitespace.\n */\nexport function getWordAtUntil (text, index, direction, regex) {\n const word = getWordAt(text, index);\n\n // Reset the lastIndex since the last time this was run.\n regex.lastIndex = 0;\n\n // If the word doesn't match the regex we can just return it.\n if (!regex.test(word.text)) {\n return word;\n }\n\n // Depending on the direction take one step to the left or right to find the\n // preceding or following word.\n const newIndex = direction === 'left' ? word.from - 1 : word.to + 1;\n\n // Prevent an infinite loop for the base cases.\n if (newIndex <= 0 || newIndex >= text.length || newIndex === index) {\n return word;\n }\n\n // Run the preceding/following word through the validator until we meet the\n // string boundaries or find a word that doesn't match the regex.\n return getWordAtUntil(text, newIndex, direction, regex);\n}\n\n/**\n * Remove marks from a range.\n */\nexport function removeMarks (range, doc, tr, type) {\n const from = Math.max(range.from - 1, 0);\n const to = Math.min(range.to + 1, doc.content.size);\n const marksInRange = getMarksBetween(from, to, doc);\n\n for (const mark of marksInRange) {\n if (mark.mark.type !== type) {\n continue;\n }\n\n tr.removeMark(mark.from, mark.to, type);\n }\n}\n\n// Regex to match partial phone numbers.\nconst partialPhoneNumberRegex = getPhoneNumberRegex(1, 15);\n\n/**\n * Find matches from text and add marks on them.\n */\nexport function addMarks (text, pos, from, to, tr, type) {\n if (!text) {\n return;\n }\n\n // from = start index for the change\n // pos = start index of the node\n // 1 = range uses 1-based indexing, deduct 1\n let rangeFrom = from - pos - 1;\n\n // If the change spans multiple nodes/paragraphs the start index can become\n // negative, so default to 0.\n rangeFrom = rangeFrom < 0 ? 0 : rangeFrom;\n\n // to = end index of the change\n // pos = start index of the node\n const rangeTo = to - pos;\n\n // Get the first word in the range.\n const firstWordInRange = getWordAtUntil(\n text,\n rangeFrom,\n 'left',\n partialPhoneNumberRegex,\n );\n\n // Get the last word in the range.\n const lastWordInRange = getWordAtUntil(\n text,\n rangeTo,\n 'right',\n partialPhoneNumberRegex,\n );\n\n // Create a substring that consists of whole words only.\n const wordsInRange = text.slice(firstWordInRange.from, lastWordInRange.to);\n\n // Find all valid matches within the substring.\n const matches = getRegexMatches(wordsInRange, linkRegex, hasValidPrefix);\n\n // Loop through the matches and add marks.\n matches.forEach(match => {\n // Trim any punctuation characters at the end of the match.\n const word = trimEndPunctiation(match[0]);\n\n // pos = start index of the node\n // firstWordInRange.from = start index of the first word in range\n // match.index = index of the regex match\n // 1 = addMark() uses 1-based indexing, add 1\n const from = pos + firstWordInRange.from + match.index + 1;\n\n // Sum up the from index and the match length to get the end index.\n const to = from + word.length;\n\n tr.addMark(from, to, type.create());\n });\n}\n","import {\n combineTransactionSteps,\n findChildrenInRange,\n getChangedRanges,\n} from '@tiptap/core';\nimport {\n Plugin,\n PluginKey,\n} from '@tiptap/pm/state';\nimport {\n addMarks,\n removeMarks,\n} from './utils';\n\n/**\n * Plugin to automatically add links into content.\n */\nexport function autolink (options) {\n // Flag to see if we've loaded this plugin once already. This is used to run\n // the initial content through the plugin if the editor was mounted with some.\n let hasInitialized = false;\n\n return new Plugin({\n key: new PluginKey('autolink'),\n\n appendTransaction: (transactions, oldState, newState) => {\n const contentChanged = transactions.some(tr => tr.docChanged) &&\n !oldState.doc.eq(newState.doc);\n\n // Every interaction with the editor is a transaction, but we only care\n // about the ones with content changes.\n if (hasInitialized && !contentChanged) {\n return;\n }\n\n // The original transaction that we're manipulating.\n const { tr } = newState;\n\n // Text content after the original transaction.\n const { textContent } = newState.doc;\n\n // When the editor is initialized we want to add links to it.\n if (!hasInitialized) {\n addMarks(textContent, 0, 0, textContent.length, tr, options.type);\n }\n\n hasInitialized = true;\n\n // The transformed state of the document.\n const transform = combineTransactionSteps(\n oldState.doc,\n [...transactions],\n );\n\n // All the changes within the document.\n const changes = getChangedRanges(transform);\n\n changes.forEach(({ oldRange, newRange }) => {\n // Remove all link marks in the changed range since we'll add them\n // right back if they're still valid links.\n removeMarks(newRange, newState.doc, tr, options.type);\n\n // Find all paragraphs (Textblocks) that were affected since we want to\n // handle matches in each paragraph separately.\n const paragraphs = findChildrenInRange(\n newState.doc,\n newRange,\n node => node.isTextblock,\n );\n\n paragraphs.forEach(({ node, pos }) => {\n addMarks(\n node.textContent,\n pos,\n oldRange.from,\n newRange.to,\n tr,\n options.type,\n );\n });\n });\n\n // Return the modified transaction or the changes above wont have effect.\n return tr;\n },\n });\n}\n","/**\n *\n * The custom link does some additional things on top of the built in TipTap link\n * extension such as styling phone numbers and IP adresses as links, and allows you\n * to linkify text without having to type a space after the link. Currently it is missing some\n * functionality such as editing links and will likely require more work to be fully usable,\n * so it is recommended to use the built in TipTap link for now.\n */\n\nimport {\n mergeAttributes,\n Mark,\n} from '@tiptap/core';\nimport { autolink } from './autolink';\n\nconst defaultAttributes = {\n class: 'd-link d-c-text d-d-inline-block d-wb-break-all',\n rel: 'noopener noreferrer nofollow',\n};\n\n// This is the actual extension code, which is mostly showing that all the\n// functionality comes from the ProseMirror plugin.\nexport const CustomLink = Mark.create({\n name: 'CustomLink',\n\n renderHTML ({ HTMLAttributes }) {\n return [\n 'a',\n mergeAttributes(\n this.options.HTMLAttributes,\n HTMLAttributes,\n defaultAttributes,\n ),\n ];\n },\n\n renderText ({ node }) {\n return node.attrs.text;\n },\n\n addProseMirrorPlugins () {\n return [\n autolink({ type: this.type }),\n ];\n },\n});\n","import Image from '@tiptap/extension-image';\n\nexport const ConfigurableImage = Image.extend({\n name: 'ConfigurableImage',\n\n addAttributes () {\n return {\n src: {\n default: '',\n },\n alt: {\n default: undefined,\n },\n title: {\n default: undefined,\n },\n width: {\n default: undefined,\n },\n height: {\n default: undefined,\n },\n style: {\n default: undefined,\n },\n };\n },\n}).configure({ inline: true, allowBase64: true });\n","import { mergeAttributes } from '@tiptap/core';\nimport Paragraph from '@tiptap/extension-paragraph';\n\n/** Extension for div tag support\n * Replaces the default p tags when typing text to div tags\n * Extends the following extension: https://github.com/ueberdosis/tiptap/blob/main/packages/extension-paragraph/src/paragraph.ts\n */\nexport const DivParagraph = Paragraph.extend({\n parseHTML () {\n return [{ tag: 'div' }];\n },\n\n renderHTML ({ HTMLAttributes }) {\n return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];\n },\n\n});\n","\n<template>\n <node-view-wrapper\n class=\"d-d-inline-block\"\n >\n <dt-link\n kind=\"mention\"\n >\n {{ text }}\n </dt-link>\n </node-view-wrapper>\n</template>\n\n<script>\nimport { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3';\n\nimport { DtLink } from '@/components/link';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'MentionComponent',\n components: {\n NodeViewWrapper,\n DtLink,\n },\n\n props: nodeViewProps,\n\n computed: {\n text () {\n return '@' + this.$props.node.attrs.name;\n },\n },\n};\n</script>\n","import Mention from '@tiptap/extension-mention';\nimport { mergeAttributes } from '@tiptap/core';\nimport { VueNodeViewRenderer } from '@tiptap/vue-3';\nimport { PluginKey } from '@tiptap/pm/state';\n\n// Mention component\nimport MentionComponent from './MentionComponent.vue';\n\nexport const MentionPlugin = Mention.extend({\n\n addNodeView () {\n return VueNodeViewRenderer(MentionComponent);\n },\n\n parseHTML () {\n return [\n {\n tag: 'mention-component',\n },\n ];\n },\n\n addAttributes () {\n return {\n name: {\n default: '',\n },\n avatarSrc: {\n default: '',\n },\n id: {\n default: '',\n },\n };\n },\n\n renderText ({ node }) {\n return `@${node.attrs.id}`;\n },\n\n renderHTML ({ HTMLAttributes }) {\n return ['mention-component', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];\n },\n\n}).configure({\n suggestion: {\n char: '@',\n pluginKey: new PluginKey('mentionSuggestion'),\n },\n});\n","\n<template>\n <node-view-wrapper\n class=\"d-d-inline-block\"\n >\n <dt-link\n kind=\"mention\"\n >\n {{ text }}\n </dt-link>\n </node-view-wrapper>\n</template>\n\n<script>\nimport { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3';\n\nimport { DtLink } from '@/components/link';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'ChannelComponent',\n components: {\n NodeViewWrapper,\n DtLink,\n },\n\n props: nodeViewProps,\n\n computed: {\n text () {\n return '#' + this.$props.node.attrs.name;\n },\n },\n};\n</script>\n","import Mention from '@tiptap/extension-mention';\nimport { mergeAttributes } from '@tiptap/core';\nimport { VueNodeViewRenderer } from '@tiptap/vue-3';\nimport { PluginKey } from '@tiptap/pm/state';\n\n// Channel Mention component\nimport ChannelComponent from './ChannelComponent.vue';\n\nexport const ChannelPlugin = Mention.extend({\n name: 'channel',\n\n addNodeView () {\n return VueNodeViewRenderer(ChannelComponent);\n },\n\n parseHTML () {\n return [\n {\n tag: 'channel-component',\n },\n ];\n },\n\n addAttributes () {\n return {\n name: {\n default: '',\n },\n id: {\n default: '',\n },\n locked: {\n default: false,\n },\n };\n },\n\n renderText ({ node }) {\n return `#${node.attrs.id}`;\n },\n\n renderHTML ({ HTMLAttributes }) {\n return ['channel-component', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];\n },\n\n}).configure({\n suggestion: {\n char: '#',\n pluginKey: new PluginKey('channelSuggestion'),\n },\n});\n","\n<template>\n <node-view-wrapper\n class=\"d-d-inline-block\"\n >\n {{ text }}\n </node-view-wrapper>\n</template>\n\n<script>\nimport { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'SlashCommandsComponent',\n components: {\n NodeViewWrapper,\n },\n\n props: {\n ...nodeViewProps,\n },\n\n emits: ['selected-command'],\n\n computed: {\n text () {\n return '/' + this.$props.node.attrs.command;\n },\n },\n\n created () {\n const command = this.$props.node.attrs.command;\n\n // First emit the event using the component's own emit\n this.$emit('selected-command', command);\n\n // Access the callback from the editor's storage\n const onSelectedCommand = this.editor?.storage?.['slash-commands']?.onSelectedCommand;\n if (onSelectedCommand && typeof onSelectedCommand === 'function') {\n onSelectedCommand(command);\n }\n },\n};\n</script>\n","import Mention from '@tiptap/extension-mention';\nimport { VueNodeViewRenderer } from '@tiptap/vue-3';\nimport { PluginKey } from '@tiptap/pm/state';\n\n// Slash Command Mention component\nimport SlashCommandComponent from './SlashCommandComponent.vue';\nimport { mergeAttributes, nodeInputRule, nodePasteRule } from '@tiptap/core';\n\nconst slashCommandPasteMatch = (text, slashCommandRegex) => {\n const matches = [...text.matchAll(slashCommandRegex)];\n\n return matches\n .map(match => {\n let slashCommand = match[2];\n if (!slashCommand.endsWith(' ')) slashCommand += ' ';\n return {\n index: match.index,\n text: slashCommand,\n match,\n };\n });\n};\n\nexport const SlashCommandPlugin = Mention.extend({\n name: 'slash-commands',\n group: 'inline',\n inline: true,\n\n addOptions () {\n return {\n ...this.parent?.(),\n onSelectedCommand: null,\n };\n },\n\n addStorage () {\n return {\n onSelectedCommand: this.options.onSelectedCommand,\n };\n },\n\n addNodeView () {\n return VueNodeViewRenderer(SlashCommandComponent);\n },\n\n parseHTML () {\n return [\n {\n tag: 'command-component',\n },\n ];\n },\n\n addAttributes () {\n return {\n command: {\n default: '',\n },\n parametersExample: {\n default: '',\n },\n description: {\n default: '',\n },\n };\n },\n\n renderText ({ node }) {\n return `/${node.attrs.command}`;\n },\n\n renderHTML ({ HTMLAttributes }) {\n return ['command-component', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];\n },\n\n addInputRules () {\n const suggestions = this.options.suggestion?.items({ query: '' }).map(suggestion => suggestion.command);\n const slashCommandRegex = new RegExp(`^((?:\\\\/)(${suggestions.join('|')})) $`);\n return [\n nodeInputRule({\n find: slashCommandRegex,\n type: this.type,\n getAttributes (attrs) {\n return { command: attrs[2] };\n },\n }),\n ];\n },\n\n addPasteRules () {\n const suggestions = this.options.suggestion?.items({ query: '' }).map(suggestion => suggestion.command);\n const slashCommandRegex = new RegExp(`^((?:\\\\/)(${suggestions.join('|')})) ?$`, 'g');\n return [\n nodePasteRule({\n find: (text) => slashCommandPasteMatch(text, slashCommandRegex),\n type: this.type,\n getAttributes (attrs) {\n return { command: attrs[0].trim() };\n },\n }),\n ];\n },\n}).configure({\n suggestion: {\n char: '/',\n pluginKey: new PluginKey('slashCommandSuggestion'),\n },\n});\n","<template>\n <dt-stack\n direction=\"row\"\n class=\"d-mention-suggestion__container\"\n gap=\"400\"\n >\n <dt-avatar\n :full-name=\"name\"\n :image-src=\"avatarSrc\"\n :image-alt=\"name\"\n :show-presence=\"showDetails\"\n :presence=\"presence\"\n size=\"sm\"\n />\n <dt-stack\n class=\"d-mention-suggestion__details-container\"\n gap=\"100\"\n >\n \n <span class=\"d-mention-suggestion__name\">\n {{ name }}\n </span>\n <dt-stack\n v-if=\"showDetails\"\n direction=\"row\"\n gap=\"300\"\n class=\"d-label--sm-plain\"\n >\n <span\n v-if=\"presenceText\"\n class=\"d-mention-suggestion__presence\"\n :class=\"[presenceFontColorClass]\"\n >\n {{ presenceText }}\n </span>\n <div\n v-if=\"status && presenceText\"\n class=\"d-mention-suggestion__divider\"\n >\n •\n </div>\n <div\n v-if=\"status\"\n class=\"d-mention-suggestion__status\"\n >\n {{ status }}\n </div>\n </dt-stack>\n </dt-stack>\n </dt-stack>\n</template>\n\n<script>\nimport { DtAvatar } from '@/components/avatar';\nimport { DtStack } from '@/components/stack';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'MentionSuggestion',\n components: {\n DtAvatar,\n DtStack,\n },\n\n props: {\n item: {\n type: Object,\n required: true,\n },\n },\n\n computed: {\n name () {\n return this.item.name;\n },\n\n avatarSrc () {\n return this.item.avatarSrc;\n },\n\n presence () {\n return this.item.presence;\n },\n\n status () {\n return this.item.status;\n },\n\n presenceText () {\n return this.item.presenceText;\n },\n\n presenceFontColorClass () {\n const presenceFontColors = {\n active: 'd-recipe-contact-row--active',\n busy: 'd-recipe-contact-row--busy',\n away: 'd-recipe-contact-row--away',\n offline: 'd-recipe-contact-row--busy',\n };\n\n return presenceFontColors[this.presence];\n },\n\n showDetails () {\n return this.item.showDetails;\n },\n },\n};\n</script>\n","import { markRaw } from 'vue';\nimport { VueRenderer } from '@tiptap/vue-3';\nimport tippy from 'tippy.js';\n\nimport SuggestionList from '../suggestion/SuggestionList.vue';\nimport MentionSuggestion from './MentionSuggestion.vue';\nimport hideOnEsc from '../tippy_plugins/hide_on_esc';\n\nexport default {\n\n // This function comes from the user and passed to the editor directly.\n // This will also activate the mention plugin on the editor\n // items: ({ query }) => { return [] },\n\n allowSpaces: true,\n\n render: () => {\n let component;\n let popup;\n let popupIsOpen = false;\n\n return {\n onStart: props => {\n component = new VueRenderer(SuggestionList, {\n props: {\n itemComponent: markRaw(MentionSuggestion),\n itemType: 'mention',\n ...props,\n },\n editor: props.editor,\n });\n\n if (!props.clientRect) {\n return;\n }\n\n popup = tippy('body', {\n getReferenceClientRect: props.clientRect,\n appendTo: () => document.body,\n content: component.element,\n showOnCreate: false,\n onShow: () => { popupIsOpen = true; },\n onHidden: () => { popupIsOpen = false; },\n interactive: true,\n trigger: 'manual',\n placement: 'top-start',\n zIndex: 650,\n plugins: [hideOnEsc],\n });\n\n if (props.items.length > 0) {\n popup?.[0].show();\n }\n },\n\n onUpdate (props) {\n component?.updateProps(props);\n\n if (props.items.length > 0) {\n popup?.[0].show();\n } else {\n popup?.[0].hide();\n }\n\n if (!props.clientRect) {\n return;\n }\n\n popup?.[0].setProps({\n getReferenceClientRect: props.clientRect,\n });\n },\n\n onKeyDown (props) {\n if (popupIsOpen) {\n return component?.ref?.onKeyDown(props);\n }\n },\n\n onExit () {\n popup?.[0].destroy();\n popup = null;\n component?.destroy();\n component = null;\n },\n };\n },\n};\n","<template>\n <dt-stack\n direction=\"row\"\n gap=\"400\"\n >\n <dt-icon-hash\n v-if=\"!item.locked\"\n size=\"300\"\n />\n <dt-icon-lock\n v-else\n size=\"300\"\n />\n <span>{{ name }}</span>\n </dt-stack>\n</template>\n\n<script>\nimport { DtStack } from '@/components/stack';\nimport DtIconHash from '@dialpad/dialtone-icons/vue3/hash';\nimport DtIconLock from '@dialpad/dialtone-icons/vue3/lock';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'ChannelSuggestion',\n components: {\n DtStack,\n DtIconHash,\n DtIconLock,\n },\n\n props: {\n item: {\n type: Object,\n required: true,\n },\n },\n\n computed: {\n name () {\n return this.item.name;\n },\n },\n};\n</script>\n","import { markRaw } from 'vue';\nimport { VueRenderer } from '@tiptap/vue-3';\nimport tippy from 'tippy.js';\n\nimport SuggestionList from '../suggestion/SuggestionList.vue';\nimport ChannelSuggestion from './ChannelSuggestion.vue';\nimport hideOnEsc from '../tippy_plugins/hide_on_esc';\n\nexport default {\n\n // This function comes from the user and passed to the editor directly.\n // This will also activate the mention plugin on the editor\n // items: ({ query }) => { return [] },\n\n allowSpaces: true,\n\n render: () => {\n let component;\n let popup;\n let popupIsOpen = false;\n\n return {\n onStart: props => {\n component = new VueRenderer(SuggestionList, {\n props: {\n itemComponent: markRaw(ChannelSuggestion),\n itemType: 'channel',\n ...props,\n },\n editor: props.editor,\n });\n\n if (!props.clientRect) {\n return;\n }\n\n popup = tippy('body', {\n getReferenceClientRect: props.clientRect,\n appendTo: () => document.body,\n content: component.element,\n showOnCreate: false,\n onShow: () => { popupIsOpen = true; },\n onHidden: () => { popupIsOpen = false; },\n interactive: true,\n trigger: 'manual',\n placement: 'top-start',\n zIndex: 650,\n plugins: [hideOnEsc],\n });\n\n if (props.items.length > 0) {\n popup?.[0].show();\n }\n },\n\n onUpdate (props) {\n component?.updateProps(props);\n\n if (props.items.length > 0) {\n popup?.[0].show();\n } else {\n popup?.[0].hide();\n }\n\n if (!props.clientRect) {\n return;\n }\n\n popup?.[0].setProps({\n getReferenceClientRect: props.clientRect,\n });\n },\n\n onKeyDown (props) {\n if (popupIsOpen) {\n return component?.ref?.onKeyDown(props);\n }\n },\n\n onExit () {\n popup?.[0].destroy();\n popup = null;\n component?.destroy();\n component = null;\n },\n };\n },\n};\n","\n<template>\n <div>\n <div class=\"d-body--md-compact\">\n <span>/{{ command }}</span><span v-if=\"parametersExample\"> {{ parametersExample }}</span>\n </div>\n <div class=\"d-body--sm d-fc-tertiary\">\n {{ description }}\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n compatConfig: { MODE: 3 },\n name: 'SlashCommandSuggestion',\n\n props: {\n item: {\n type: Object,\n required: true,\n },\n },\n\n computed: {\n command () {\n return this.item.command;\n },\n\n description () {\n return this.item.description;\n },\n\n parametersExample () {\n return this.item.parametersExample;\n },\n },\n};\n</script>\n","import { markRaw } from 'vue';\nimport { VueRenderer } from '@tiptap/vue-3';\nimport tippy from 'tippy.js';\nimport hideOnEsc from '../tippy_plugins/hide_on_esc';\n\nimport SuggestionList from '../suggestion/SuggestionList.vue';\nimport SlashCommandSuggestion from './SlashCommandSuggestion.vue';\n\nexport default {\n\n // This function comes from the user and passed to the editor directly.\n // This will also activate the mention plugin on the editor\n // items: ({ query }) => { return [] },\n\n allowSpaces: true,\n startOfLine: true,\n\n render: () => {\n let component;\n let popup;\n let popupIsOpen = false;\n\n return {\n onStart: props => {\n component = new VueRenderer(SuggestionList, {\n parent: this,\n props: {\n itemComponent: markRaw(SlashCommandSuggestion),\n itemType: 'slash-command',\n ...props,\n },\n editor: props.editor,\n });\n\n if (!props.clientRect) {\n return;\n }\n\n popup = tippy('body', {\n getReferenceClientRect: props.clientRect,\n appendTo: () => document.body,\n content: component.element,\n showOnCreate: false,\n onShow: () => { popupIsOpen = true; },\n onHidden: () => { popupIsOpen = false; },\n interactive: true,\n trigger: 'manual',\n placement: 'top-start',\n zIndex: 650,\n plugins: [hideOnEsc],\n });\n\n if (props.items.length > 0) {\n popup?.[0].show();\n }\n },\n\n onUpdate (props) {\n component?.updateProps(props);\n\n if (props.items.length > 0) {\n popup?.[0].show();\n } else {\n popup?.[0].hide();\n }\n\n if (!props.clientRect) {\n return;\n }\n\n popup?.[0].setProps({\n getReferenceClientRect: props.clientRect,\n });\n },\n\n onKeyDown (props) {\n if (popupIsOpen) {\n return component?.ref?.onKeyDown(props);\n }\n },\n\n onExit () {\n popup?.[0].destroy();\n popup = null;\n component?.destroy();\n component = null;\n },\n };\n },\n};\n","\n\n\n<template>\n <div>\n \n <bubble-menu\n v-if=\"editor && link && !hideLinkBubbleMenu\"\n :editor=\"editor\"\n :should-show=\"bubbleMenuShouldShow\"\n :tippy-options=\"tippyOptions\"\n style=\"visibility: visible;\"\n >\n <div class=\"d-popover__dialog\">\n <dt-stack\n direction=\"row\"\n class=\"d-rich-text-editor-bubble-menu__button-stack\"\n gap=\"0\"\n >\n <dt-button\n kind=\"muted\"\n importance=\"clear\"\n @click=\"editLink\"\n >\n {{ i18n.$t('DIALTONE_RICH_TEXT_EDITOR_EDIT_BUTTON_LABEL') }}\n </dt-button>\n <dt-button\n kind=\"muted\"\n importance=\"clear\"\n @click=\"openLink\"\n >\n {{ i18n.$t('DIALTONE_RICH_TEXT_EDITOR_OPEN_LINK_BUTTON_LABEL') }}\n </dt-button>\n <dt-button\n kind=\"danger\"\n importance=\"clear\"\n @click=\"removeLink\"\n >\n {{ i18n.$t('DIALTONE_RICH_TEXT_EDITOR_REMOVE_BUTTON_LABEL') }}\n </dt-button>\n </dt-stack>\n </div>\n </bubble-menu>\n <editor-content\n ref=\"editor\"\n :editor=\"editor\"\n class=\"d-rich-text-editor\"\n data-qa=\"dt-rich-text-editor\"\n v-bind=\"attrs\"\n />\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-3';\nimport { Extension } from '@tiptap/core';\nimport { DtButton } from '../button';\nimport { DtStack } from '../stack';\nimport Blockquote from '@tiptap/extension-blockquote';\nimport CodeBlock from '@tiptap/extension-code-block';\nimport Code from '@tiptap/extension-code';\nimport Document from '@tiptap/extension-document';\nimport HardBreak from '@tiptap/extension-hard-break';\nimport Paragraph from '@tiptap/extension-paragraph';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport Bold from '@tiptap/extension-bold';\nimport BulletList from '@tiptap/extension-bullet-list';\nimport Italic from '@tiptap/extension-italic';\nimport TipTapLink from '@tiptap/extension-link';\nimport ListItem from '@tiptap/extension-list-item';\nimport OrderedList from '@tiptap/extension-ordered-list';\nimport Strike from '@tiptap/extension-strike';\nimport Underline from '@tiptap/extension-underline';\nimport Text from '@tiptap/extension-text';\nimport TextAlign from '@tiptap/extension-text-align';\nimport History from '@tiptap/extension-history';\nimport TextStyle from '@tiptap/extension-text-style';\nimport Color from '@tiptap/extension-color';\nimport FontFamily from '@tiptap/extension-font-family';\nimport Emoji from './extensions/emoji';\nimport CustomLink from './extensions/custom_link';\nimport ConfigurableImage from './extensions/image';\nimport DivParagraph from './extensions/div';\nimport { MentionPlugin } from './extensions/mentions/mention';\nimport { ChannelPlugin } from './extensions/channels/channel';\nimport { SlashCommandPlugin } from './extensions/slash_command/slash_command';\nimport {\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS,\n} from './rich_text_editor_constants';\nimport { emojiPattern } from 'regex-combined-emojis';\n\nimport mentionSuggestion from './extensions/mentions/suggestion';\nimport channelSuggestion from './extensions/channels/suggestion';\nimport slashCommandSuggestion from './extensions/slash_command/suggestion';\nimport { warnIfUnmounted, returnFirstEl } from '@/common/utils';\nimport deepEqual from 'deep-equal';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRichTextEditor',\n\n components: {\n EditorContent,\n BubbleMenu,\n DtButton,\n DtStack,\n },\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 modelValue: {\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 * Prevents the user from typing any further. Deleting text will still work.\n */\n preventTyping: {\n type: Boolean,\n default: false,\n },\n\n /**\n * When this option is false the editor will only ever paste plain text, no rich text formatting will be applied,\n * and any HTML will be rendered as text.\n */\n pasteRichText: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether the input allows for line breaks to be introduced in the text by pressing enter. If this is disabled,\n * line breaks can still be entered by pressing shift+enter.\n */\n allowLineBreaks: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Descriptive label for the input element\n */\n inputAriaLabel: {\n type: String,\n required: true,\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 * The output format that the editor uses when emitting the \"@input\" event.\n * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for\n * examples.\n * @values text, json, html\n */\n outputFormat: {\n type: String,\n default: 'html',\n validator (outputFormat) {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);\n },\n },\n\n /**\n * Placeholder text\n */\n placeholder: {\n type: String,\n default: '',\n },\n\n /**\n * Enables the TipTap Link extension and optionally passes configurations to it\n *\n * It is not recommended to use this and the custom link extension at the same time.\n */\n link: {\n type: [Boolean, Object],\n default: false,\n },\n\n /**\n * Enables the Custom Link extension and optionally passes configurations to it\n *\n * It is not recommended to use this and the built in TipTap link extension at the same time.\n *\n * The custom link does some additional things on top of the built in TipTap link\n * extension such as styling phone numbers and IP adresses as links, and allows you\n * to linkify text without having to type a space after the link. Currently it is missing some\n * functionality such as editing links and will likely require more work to be fully usable,\n * so it is recommended to use the built in TipTap link for now.\n */\n customLink: {\n type: [Boolean, Object],\n default: false,\n },\n\n /**\n * suggestion object containing the items query function.\n * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n *\n * The only required key is the items function which is