diff --git a/web/components/editor/mention-list.tsx b/web/components/editor/mention-list.tsx index bda9d2fc..4852e93f 100644 --- a/web/components/editor/mention-list.tsx +++ b/web/components/editor/mention-list.tsx @@ -1,13 +1,19 @@ import { SuggestionProps } from '@tiptap/suggestion' import clsx from 'clsx' import { Contract } from 'common/contract' +import { FIXED_ANTE } from 'common/economy' +import { formatMoney } from 'common/util/format' import { forwardRef, useEffect, useImperativeHandle, useState } from 'react' +import { useUser } from 'web/hooks/use-user' import { contractPath } from 'web/lib/firebase/contracts' import { Avatar } from '../avatar' +import { Col } from '../layout/col' +import { Row } from '../layout/row' // copied from https://tiptap.dev/api/nodes/mention#usage const M = forwardRef((props: SuggestionProps, ref) => { - const { items: contracts, command } = props + const { items: contracts, command, query } = props + const user = useUser() const [selectedIndex, setSelectedIndex] = useState(0) useEffect(() => setSelectedIndex(0), [contracts]) @@ -18,9 +24,24 @@ const M = forwardRef((props: SuggestionProps, ref) => { command({ id: contract.id, label: contractPath(contract) } as any) } + const createOptions = [ + { + text: `Create yes/no`, + // TODO: Get these commmands to work + onClick: () => command({ id: 'new', label: 'new' } as any), + }, + { + text: `Create free response`, + onClick: () => command({ id: 'new', label: 'new' } as any), + }, + ] + + const choiceLength = + contracts.length > 0 ? contracts.length : createOptions.length + const onUp = () => - setSelectedIndex((i) => (i + contracts.length - 1) % contracts.length) - const onDown = () => setSelectedIndex((i) => (i + 1) % contracts.length) + setSelectedIndex((i) => (i + choiceLength - 1) % choiceLength) + const onDown = () => setSelectedIndex((i) => (i + 1) % choiceLength) const onEnter = () => submitUser(selectedIndex) useImperativeHandle(ref, () => ({ @@ -44,7 +65,29 @@ const M = forwardRef((props: SuggestionProps, ref) => { return (
{!contracts.length ? ( - No results... + + +
{query}
+
+ + {createOptions.map((option, i) => ( + + ))} + ) : ( contracts.map((contract, i) => (