Merge pull request #184 from Irev-Dev/kurt/177

Issue-177 Add helper text to make it obvious markdown works

web/src/components/PartProfile/PartProfile.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useAuth } from '@redwoodjs/auth'
 import { Link, navigate, routes } from '@redwoodjs/router'
 import Editor from 'rich-markdown-editor'
@@ -23,6 +23,7 @@ const PartProfile = ({
   const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false)
   const [isInvalid, setIsInvalid] = useState(false)
   const { currentUser } = useAuth()
+  const editorRef = useRef(null)
   const canEdit = currentUser?.sub === userPart.id
   const isImageEditable = !isEditable && canEdit // image is editable when not in profile edit mode in order to separate them as it's too hard too to upload an image to cloudinary temporarily until the use saves (and maybe have to clean up) for the time being
   const part = userPart?.Part
@@ -165,11 +166,16 @@ const PartProfile = ({
               width={1010}
             />
           )}
+          <div className="text-gray-500 text-sm font-ropa-sans pt-8">
+            {isEditable ? 'Markdown supported' : ''}
+          </div>
           <div
             name="description"
-            className="markdown-overrides rounded-lg shadow-md bg-white p-12 my-8 min-h-md"
+            className="markdown-overrides rounded-lg shadow-md bg-white px-12 py-6 min-h-md"
+            onClick={() => editorRef?.current?.focusAtEnd()}
           >
             <Editor
+              ref={editorRef}
               defaultValue={part?.description || ''}
               readOnly={!isEditable}
               onChange={onDescriptionChange}