open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleanup: merge render functions

Browse Source
This commit is contained in:
Austin Chen 2022-09-15 17:19:20 -07:00
parent 1b7fd31b88
commit c6178812ff
2 changed files with 20 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
web/components/editor/contract-mention-suggestion.ts
View File

@ -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: () => {
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()
},
}
},
render: makeMentionRender(MentionList),
}

25
web/components/editor/mention-suggestion.ts
View File

@ -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,10 +64,16 @@ export const mentionSuggestion: Suggestion = {
})
},
onKeyDown(props) {
if (props.event.key === 'Escape') {
popup?.[0].hide()
return true
}
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() {
@ -70,5 +81,5 @@ export const mentionSuggestion: Suggestion = {
component?.destroy()
},
}
},
}
}