diff --git a/web/components/editor.tsx b/web/components/editor.tsx index ec4e607e..fb442975 100644 --- a/web/components/editor.tsx +++ b/web/components/editor.tsx @@ -4,33 +4,20 @@ import { useEditor, EditorContent, JSONContent, Content } from '@tiptap/react' import StarterKit from '@tiptap/starter-kit' import clsx from 'clsx' import { useEffect } from 'react' -import { useWarnUnsavedChanges } from 'web/hooks/use-warn-unsaved-changes' import { Linkify } from './linkify' const LINE_HEIGHT = 2 const proseClass = 'prose prose-sm prose-p:my-0 prose-li:my-0 max-w-none' -export function TextEditor(props: { - className?: string +export function useTextEditor(props: { rows?: number placeholder?: string max?: number defaultValue?: Content - onSend: (data: JSONContent) => void - sending: boolean disabled?: boolean }) { - const { - className, - rows, - placeholder, - max, - defaultValue = '', - onSend, - sending, - disabled, - } = props + const { rows, placeholder, max, defaultValue = '', disabled } = props const rowsClass = rows && `box-content min-h-[${LINE_HEIGHT * rows}em]` @@ -49,16 +36,10 @@ export function TextEditor(props: { }) useEffect(() => { - if (sending && editor) onSend(editor.getJSON()) - }, [sending, editor, onSend]) + editor?.setEditable(!disabled) + }, [editor, disabled]) - useEffect(() => { - editor?.setEditable(!disabled && !sending) - }, [editor, disabled, sending]) - - useWarnUnsavedChanges(!sending && editor != null && !editor.isEmpty) - - return + return editor } function RichContent(props: { content: JSONContent }) { diff --git a/web/pages/create.tsx b/web/pages/create.tsx index c9cb8634..2da8a881 100644 --- a/web/pages/create.tsx +++ b/web/pages/create.tsx @@ -27,8 +27,8 @@ import { track } from 'web/lib/service/analytics' import { GroupSelector } from 'web/components/groups/group-selector' import { CATEGORIES } from 'common/categories' import { User } from 'common/user' -import { TextEditor } from 'web/components/editor' -import { JSONContent } from '@tiptap/react' +import { useTextEditor } from 'web/components/editor' +import { EditorContent } from '@tiptap/react' type NewQuestionParams = { groupId?: string @@ -163,8 +163,6 @@ export function NewContract(props: { // get days from today until the end of this year: const daysLeftInTheYear = dayjs().endOf('year').diff(dayjs(), 'day') - useWarnUnsavedChanges(!isSubmitting && Boolean(question)) - const isValid = (outcomeType === 'BINARY' ? initialProb >= 5 && initialProb <= 95 : true) && question.length > 0 && @@ -185,25 +183,39 @@ export function NewContract(props: { min < initialValue && initialValue < max)) + const descriptionPlaceholder = + outcomeType === 'BINARY' + ? `e.g. This question resolves to "YES" if they receive the majority of votes...` + : `e.g. I will choose the answer according to...` + + const editor = useTextEditor({ + rows: 3, + max: MAX_DESCRIPTION_LENGTH, + placeholder: descriptionPlaceholder, + disabled: isSubmitting, + }) + + useWarnUnsavedChanges( + !isSubmitting && (Boolean(question) || (editor != null && !editor.isEmpty)) + ) + function setCloseDateInDays(days: number) { const newCloseDate = dayjs().add(days, 'day').format('YYYY-MM-DD') setCloseDate(newCloseDate) } - function submit() { + async function submit() { // TODO: Tell users why their contract is invalid if (!creator || !isValid) return setIsSubmitting(true) - } - async function onSubmit(description?: JSONContent) { // TODO: add contract id to the group contractIds try { const result = await createMarket( removeUndefinedProps({ question, outcomeType, - description, + description: editor?.getJSON(), initialProb, ante, closeTime, @@ -232,11 +244,6 @@ export function NewContract(props: { } } - const descriptionPlaceholder = - outcomeType === 'BINARY' - ? `e.g. This question resolves to "YES" if they receive the majority of votes...` - : `e.g. I will choose the answer according to...` - if (!creator) return <> return ( @@ -440,14 +447,7 @@ export function NewContract(props: { Description - +