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
-
+