diff --git a/web/components/contract/contract-description.tsx b/web/components/contract/contract-description.tsx index 4c9b77a2..1b2a831d 100644 --- a/web/components/contract/contract-description.tsx +++ b/web/components/contract/contract-description.tsx @@ -13,7 +13,7 @@ import { TextEditor, useTextEditor } from 'web/components/editor' import { Button } from '../button' import { Spacer } from '../layout/spacer' import { Editor, Content as ContentType } from '@tiptap/react' -import { appendToEditor } from '../editor/utils' +import { insertContent } from '../editor/utils' export function ContractDescription(props: { contract: Contract @@ -95,7 +95,7 @@ function RichEditContract(props: { contract: Contract; isAdmin?: boolean }) { size="xs" onClick={() => { setEditing(true) - appendToEditor(editor, `

${editTimestamp()}

`) + insertContent(editor, `

${editTimestamp()}

`) }} > Edit description @@ -127,7 +127,7 @@ function EditQuestion(props: { function joinContent(oldContent: ContentType, newContent: string) { const editor = new Editor({ content: oldContent, extensions: exhibitExts }) - appendToEditor(editor, newContent) + insertContent(editor, newContent) return editor.getJSON() } diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx index 90b5f3d1..51b6539c 100644 --- a/web/components/contract/contract-details.tsx +++ b/web/components/contract/contract-details.tsx @@ -33,7 +33,7 @@ import { Col } from 'web/components/layout/col' import { ContractGroupsList } from 'web/components/groups/contract-groups-list' import { SiteLink } from 'web/components/site-link' import { groupPath } from 'web/lib/firebase/groups' -import { appendToEditor } from '../editor/utils' +import { insertContent } from '../editor/utils' export type ShowTime = 'resolve-date' | 'close-date' @@ -283,7 +283,8 @@ function EditableCloseDate(props: { const formattedCloseDate = dayjs(newCloseTime).format('YYYY-MM-DD h:mm a') const editor = new Editor({ content, extensions: exhibitExts }) - appendToEditor( + editor.commands.focus('end') + insertContent( editor, `

Close date updated to ${formattedCloseDate}

` ) diff --git a/web/components/editor.tsx b/web/components/editor.tsx index 44dd92ad..9732ecbe 100644 --- a/web/components/editor.tsx +++ b/web/components/editor.tsx @@ -35,6 +35,7 @@ import { Button } from './button' import { Row } from './layout/row' import { Spacer } from './layout/spacer' import { MarketModal } from './editor/market-modal' +import { insertContent } from './editor/utils' const proseClass = clsx( 'prose prose-p:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none prose-quoteless leading-relaxed', @@ -105,7 +106,7 @@ export function useTextEditor(props: { // If the pasted content is iframe code, directly inject it const text = event.clipboardData?.getData('text/plain').trim() ?? '' if (isValidIframe(text)) { - editor.chain().insertContent(text).run() + insertContent(editor, text) return true // Prevent the code from getting pasted as text } @@ -238,7 +239,7 @@ function IframeModal(props: { disabled={!valid} onClick={() => { if (editor && valid) { - editor.chain().insertContent(embedCode).run() + insertContent(editor, embedCode) setEmbedCode('') setOpen(false) } diff --git a/web/components/editor/market-modal.tsx b/web/components/editor/market-modal.tsx index 6ea9ee6f..1c88afbc 100644 --- a/web/components/editor/market-modal.tsx +++ b/web/components/editor/market-modal.tsx @@ -8,6 +8,7 @@ import { Modal } from '../layout/modal' import { Row } from '../layout/row' import { LoadingIndicator } from '../loading-indicator' import { embedCode } from '../share-embed-button' +import { insertContent } from './utils' export function MarketModal(props: { editor: Editor | null @@ -27,14 +28,7 @@ export function MarketModal(props: { async function doneAddingContracts() { setLoading(true) - if (editor) { - const e = editor.chain() - for (const contract of contracts) { - console.log('embedding', embedCode(contract)) - e.insertContent(embedCode(contract)) - } - e.run() - } + insertContent(editor, ...contracts.map(embedCode)) setLoading(false) setOpen(false) setContracts([]) diff --git a/web/components/editor/utils.ts b/web/components/editor/utils.ts index 74af38c5..50b94ce2 100644 --- a/web/components/editor/utils.ts +++ b/web/components/editor/utils.ts @@ -1,10 +1,13 @@ import { Editor, Content } from '@tiptap/react' -export function appendToEditor(editor: Editor | null, content: Content) { - editor - ?.chain() - .focus('end') - .createParagraphNear() - .insertContent(content) - .run() +export function insertContent(editor: Editor | null, ...contents: Content[]) { + if (!editor) { + return + } + + let e = editor.chain() + for (const content of contents) { + e = e.createParagraphNear().insertContent(content) + } + e.run() }