Implements Editor in edit team and team footer

This implements the Editor component in EditPartyModal and PartyFooter. In PartyFooter, it is read-only.

components/party/EditPartyModal/index.tsx

@@ -6,12 +6,13 @@ import classNames from 'classnames'
 import debounce from 'lodash.debounce'
 
 import Alert from '~components/common/Alert'
+import Button from '~components/common/Button'
 import { Dialog, DialogTrigger } from '~components/common/Dialog'
 import DialogHeader from '~components/common/DialogHeader'
 import DialogFooter from '~components/common/DialogFooter'
 import DialogContent from '~components/common/DialogContent'
-import Button from '~components/common/Button'
 import DurationInput from '~components/common/DurationInput'
+import Editor from '~components/common/Editor'
 import Input from '~components/common/Input'
 import InputTableField from '~components/common/InputTableField'
 import RaidCombobox from '~components/raids/RaidCombobox'
@@ -24,6 +25,7 @@ import Textarea from '~components/common/Textarea'
 import capitalizeFirstLetter from '~utils/capitalizeFirstLetter'
 import type { DetailsObject } from 'types'
 import type { DialogProps } from '@radix-ui/react-dialog'
+import type { JSONContent } from '@tiptap/core'
 
 import { appState } from '~utils/appState'
 
@@ -129,6 +131,11 @@ const EditPartyModal = ({
     setErrors(newErrors)
   }
 
+  function handleEditorUpdate(content: JSONContent) {
+    console.log('Editor updated')
+    setDescription(JSON.stringify(content))
+  }
+
   function handleChargeAttackChanged(checked: boolean) {
     setChargeAttack(checked)
   }
@@ -338,7 +345,6 @@ const EditPartyModal = ({
   }
 
   async function updateDetails(event: React.MouseEvent) {
-    const descriptionValue = descriptionInput.current?.innerHTML
     const details: DetailsObject = {
       fullAuto: fullAuto,
       autoGuard: autoGuard,
@@ -349,7 +355,7 @@ const EditPartyModal = ({
       turnCount: turnCount,
       chainCount: chainCount,
       name: name,
-      description: descriptionValue,
+      description: description,
       raid: raid,
       extra: extra,
     }
@@ -457,6 +463,15 @@ const EditPartyModal = ({
     />
   )
 
+  const editorField = (
+    <Editor
+      bound={true}
+      content={description}
+      editable={true}
+      onUpdate={handleEditorUpdate}
+    />
+  )
+
   const chargeAttackField = (
     <SwitchTableField
       name="charge_attack"
@@ -560,7 +575,7 @@ const EditPartyModal = ({
       {nameField}
       {raidField}
       {extraNotice()}
-      {descriptionField}
+      {editorField}
     </>
   )
 

components/party/PartyFooter/index.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: $unit-2x;
-  margin: $unit-4x auto 0 auto;
+  margin: $unit-4x auto $unit-10x auto;
   max-width: $grid-width;
 
   @include breakpoint(phone) {
@@ -22,8 +22,7 @@
     line-height: 1.4;
     white-space: pre-wrap;
     margin: 0 auto $unit-2x;
-    margin-bottom: $unit-12x;
-    min-height: 10vh;
+    min-height: 20vh;
     max-width: $unit * 94;
     overflow: hidden;
     width: 100%;
@@ -32,22 +31,6 @@
       padding: 0 $unit;
     }
 
-    .noRemixes,
-    .noDescription {
-      align-items: center;
-      display: flex;
-      flex-direction: column;
-      gap: $unit-2x;
-      margin: 0 auto;
-      padding: $unit-4x 0;
-
-      h3 {
-        font-size: $font-small;
-        font-weight: $medium;
-        text-align: center;
-      }
-    }
-
     p {
       font-size: $font-regular;
       line-height: $font-regular * 1.2;
@@ -147,6 +130,23 @@
     }
   }
 
+  .noRemixes,
+  .noDescription {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    min-height: 20vh;
+    gap: $unit-2x;
+    margin: 0 auto;
+    padding: $unit-4x 0;
+
+    h3 {
+      font-size: $font-small;
+      font-weight: $medium;
+      text-align: center;
+    }
+  }
+
   .PartyInfo {
     box-sizing: border-box;
     display: flex;

components/party/PartyFooter/index.tsx

@@ -23,6 +23,7 @@ import type { DetailsObject } from 'types'
 import RemixIcon from '~public/icons/Remix.svg'
 import EditIcon from '~public/icons/Edit.svg'
 import styles from './index.module.scss'
+import Editor from '~components/common/Editor'
 
 // Props
 interface Props {
@@ -210,10 +211,7 @@ const PartyFooter = (props: Props) => {
       {partySnapshot &&
         partySnapshot.description &&
         partySnapshot.description.length > 0 && (
-          <section
-            className={styles.description}
-            dangerouslySetInnerHTML={{ __html: sanitizedDescription }}
-          />
+          <Editor content={partySnapshot.description} />
         )}
       {(!partySnapshot || !partySnapshot.description) && (
         <section className={styles.noDescription}>