From da977f62a9401b28e56284ec5765322f6239003e Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Sat, 6 Aug 2022 15:43:41 -0700
Subject: [PATCH] Make added text go after img instead of replacing (#725)

---
 web/components/contract/contract-description.tsx | 10 +++-------
 web/components/contract/contract-details.tsx     | 11 +++++------
 web/components/editor/utils.ts                   | 10 ++++++++++
 3 files changed, 18 insertions(+), 13 deletions(-)
 create mode 100644 web/components/editor/utils.ts

diff --git a/web/components/contract/contract-description.tsx b/web/components/contract/contract-description.tsx
index f9db0cd9..4c9b77a2 100644
--- a/web/components/contract/contract-description.tsx
+++ b/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
-              ?.chain()
-              .setContent(contract.description)
-              .focus('end')
-              .insertContent(`<p>${editTimestamp()}</p>`)
-              .run()
+            appendToEditor(editor, `<p>${editTimestamp()}</p>`)
           }}
         >
           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()
   }
 
diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index 936f5e24..90b5f3d1 100644
--- a/web/components/contract/contract-details.tsx
+++ b/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
-        .chain()
-        .focus('end')
-        .insertContent('<br /><br />')
-        .insertContent(`Close date updated to ${formattedCloseDate}`)
-        .run()
+      appendToEditor(
+        editor,
+        `<br><p>Close date updated to ${formattedCloseDate}</p>`
+      )
 
       updateContract(contract.id, {
         closeTime: newCloseTime,
diff --git a/web/components/editor/utils.ts b/web/components/editor/utils.ts
new file mode 100644
index 00000000..74af38c5
--- /dev/null
+++ b/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()
+}