\n\n\n\n","\n \n \n {{ item.code }}\n \n\n\n\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\n \n \n {{ text }}\n \n \n\n\n\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\n \n \n {{ text }}\n \n \n\n\n\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\n \n {{ text }}\n \n\n\n\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","\n \n \n \n \n \n {{ name }}\n \n \n \n {{ presenceText }}\n \n \n •\n \n \n {{ status }}\n \n \n \n \n\n\n\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","\n \n \n \n {{ name }}\n \n\n\n\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\n
\n
\n /{{ command }} {{ parametersExample }}\n
\n
\n {{ description }}\n
\n
\n\n\n\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\n