Make added text go after img instead of replacing (#725)

web/components/contract/contract-description.tsx

@@ -13,6 +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'
 
 export function ContractDescription(props: {
   contract: Contract
@@ -94,12 +95,7 @@ function RichEditContract(props: { contract: Contract; isAdmin?: boolean }) {
           size="xs"
           onClick={() => {
             setEditing(true)
-            editor
+            appendToEditor(editor, `<p>${editTimestamp()}</p>`)
-              ?.chain()
-              .setContent(contract.description)
-              .focus('end')
-              .insertContent(`<p>${editTimestamp()}</p>`)
-              .run()
           }}
         >
           Edit description
@@ -131,7 +127,7 @@ function EditQuestion(props: {
 
   function joinContent(oldContent: ContentType, newContent: string) {
     const editor = new Editor({ content: oldContent, extensions: exhibitExts })
-    editor.chain().focus('end').insertContent(newContent).run()
+    appendToEditor(editor, newContent)
     return editor.getJSON()
   }
 

web/components/contract/contract-details.tsx

@@ -33,6 +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'
 
 export type ShowTime = 'resolve-date' | 'close-date'
 
@@ -282,12 +283,10 @@ function EditableCloseDate(props: {
       const formattedCloseDate = dayjs(newCloseTime).format('YYYY-MM-DD h:mm a')
 
       const editor = new Editor({ content, extensions: exhibitExts })
-      editor
+      appendToEditor(
-        .chain()
+        editor,
-        .focus('end')
+        `<br><p>Close date updated to ${formattedCloseDate}</p>`
-        .insertContent('<br /><br />')
+      )
-        .insertContent(`Close date updated to ${formattedCloseDate}`)
-        .run()
 
       updateContract(contract.id, {
         closeTime: newCloseTime,

web/components/editor/utils.ts

@@ -0,0 +1,10 @@
+import { Editor, Content } from '@tiptap/react'
+
+export function appendToEditor(editor: Editor | null, content: Content) {
+  editor
+    ?.chain()
+    .focus('end')
+    .createParagraphNear()
+    .insertContent(content)
+    .run()
+}