Cleanup: merge render functions

web/components/editor/contract-mention-suggestion.ts

@@ -1,19 +1,16 @@
 import type { MentionOptions } from '@tiptap/extension-mention'
-import { ReactRenderer } from '@tiptap/react'
 import { searchInAny } from 'common/util/parse'
 import { orderBy } from 'lodash'
-import tippy from 'tippy.js'
 import { getCachedContracts } from 'web/hooks/use-contracts'
 import { MentionList } from './contract-mention-list'
 import { PluginKey } from 'prosemirror-state'
+import { makeMentionRender } from './mention-suggestion'
 
 type Suggestion = MentionOptions['suggestion']
 
 const beginsWith = (text: string, query: string) =>
   text.toLocaleLowerCase().startsWith(query.toLocaleLowerCase())
 
-// copied from https://tiptap.dev/api/nodes/mention#usage
-// TODO: merge with mention-suggestion.ts?
 export const contractMentionSuggestion: Suggestion = {
   char: '%',
   allowSpaces: true,
@@ -26,57 +23,5 @@ export const contractMentionSuggestion: Suggestion = {
       [(c) => [c.question].some((s) => beginsWith(s, query))],
       ['desc', 'desc']
     ).slice(0, 5),
-  render: () => {
+  render: makeMentionRender(MentionList),
-    let component: ReactRenderer
-    let popup: ReturnType<typeof tippy>
-    return {
-      onStart: (props) => {
-        component = new ReactRenderer(MentionList, {
-          props,
-          editor: props.editor,
-        })
-        if (!props.clientRect) {
-          return
-        }
-
-        popup = tippy('body', {
-          getReferenceClientRect: props.clientRect as any,
-          appendTo: () => document.body,
-          content: component?.element,
-          showOnCreate: true,
-          interactive: true,
-          trigger: 'manual',
-          placement: 'bottom-start',
-        })
-      },
-      onUpdate(props) {
-        component?.updateProps(props)
-
-        if (!props.clientRect) {
-          return
-        }
-
-        popup?.[0].setProps({
-          getReferenceClientRect: props.clientRect as any,
-        })
-      },
-      onKeyDown(props) {
-        if (props.event.key)
-          if (
-            props.event.key === 'Escape' ||
-            // Also break out of the mention if the tooltip isn't visible
-            (props.event.key === 'Enter' && !popup?.[0].state.isShown)
-          ) {
-            popup?.[0].destroy()
-            component?.destroy()
-            return false
-          }
-        return (component?.ref as any)?.onKeyDown(props)
-      },
-      onExit() {
-        popup?.[0].destroy()
-        component?.destroy()
-      },
-    }
-  },
 }

web/components/editor/mention-suggestion.ts

@@ -5,6 +5,7 @@ import { orderBy } from 'lodash'
 import tippy from 'tippy.js'
 import { getCachedUsers } from 'web/hooks/use-users'
 import { MentionList } from './mention-list'
+type Render = Suggestion['render']
 
 type Suggestion = MentionOptions['suggestion']
 
@@ -24,12 +25,16 @@ export const mentionSuggestion: Suggestion = {
       ],
       ['desc', 'desc']
     ).slice(0, 5),
-  render: () => {
+  render: makeMentionRender(MentionList),
+}
+
+export function makeMentionRender(mentionList: any): Render {
+  return () => {
     let component: ReactRenderer
     let popup: ReturnType<typeof tippy>
     return {
       onStart: (props) => {
-        component = new ReactRenderer(MentionList, {
+        component = new ReactRenderer(mentionList, {
           props,
           editor: props.editor,
         })
@@ -59,9 +64,15 @@ export const mentionSuggestion: Suggestion = {
         })
       },
       onKeyDown(props) {
-        if (props.event.key === 'Escape') {
+        if (props.event.key)
-          popup?.[0].hide()
+          if (
-          return true
+            props.event.key === 'Escape' ||
+            // Also break out of the mention if the tooltip isn't visible
+            (props.event.key === 'Enter' && !popup?.[0].state.isShown)
+          ) {
+            popup?.[0].destroy()
+            component?.destroy()
+            return false
           }
         return (component?.ref as any)?.onKeyDown(props)
       },
@@ -70,5 +81,5 @@ export const mentionSuggestion: Suggestion = {
         component?.destroy()
       },
     }
-  },
+  }
 }