From 0c52bda69faab6e605338fea37619f7e5fe90366 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Tue, 29 Dec 2020 14:50:59 +1100
Subject: [PATCH] Issue-177 Add helper text to make it obvious markdown works

resolves #177
---
 web/src/components/PartProfile/PartProfile.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/components/PartProfile/PartProfile.js b/web/src/components/PartProfile/PartProfile.js
index 8bc1187..4d879b6 100644
--- a/web/src/components/PartProfile/PartProfile.js
+++ b/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}