Better comment rendering

docs/styles.md

@@ -76,6 +76,7 @@ Various Codicon icons have been used in this extension. Check [here](https://cod
 - `kanbn-task-editor-button-delete`
 - `kanbn-task-editor-buttons`
 - `kanbn-task-editor-button-add`
+- `kanbn-task-editor-button-edit`
 - `kanbn-task-editor-field-relations`
 - `kanbn-task-editor-row-relation`
 - `kanbn-task-editor-field-relation-type`
@@ -84,8 +85,10 @@ Various Codicon icons have been used in this extension. Check [here](https://cod
 - `kanbn-task-editor-field-comments`
 - `kanbn-task-editor-row-comment`
 - `kanbn-task-editor-field-comment-author`
+- `kanbn-task-editor-field-comment-author-value`
 - `kanbn-task-editor-field-comment-date`
 - `kanbn-task-editor-field-comment-text`
+- `kanbn-task-editor-comment-text`
 - `kanbn-task-editor-column-right`
 - `kanbn-task-editor-button-submit`
 - `kanbn-task-editor-field-column`

src/TaskEditor.tsx

@@ -53,6 +53,7 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
     comments: task ? task.comments : []
   });
   const [editingDescription, setEditingDescription] = useState(!editing);
+  const [editingComment, setEditingComment] = useState(-1);
 
   // Called when the name field is changed
   const handleUpdateName = ({ target: { value } }, values) => {
@@ -379,16 +380,25 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
                             <div className="kanbn-task-editor-row-comment" key={index}>
                               <div className="kanbn-task-editor-row">
                                 <div className="kanbn-task-editor-column kanbn-task-editor-field-comment-author">
-                                  <Field
+                                  {
-                                    className="kanbn-task-editor-field-input"
+                                    editingComment === index
-                                    name={`comments.${index}.author`}
+                                      ? <React.Fragment>
-                                    placeholder="Comment author"
+                                        <Field
-                                  />
+                                          className="kanbn-task-editor-field-input"
-                                  <ErrorMessage
+                                          name={`comments.${index}.author`}
-                                    className="kanbn-task-editor-field-errors"
+                                          placeholder="Comment author"
-                                    component="div"
+                                        />
-                                    name={`comments.${index}.author`}
+                                        <ErrorMessage
-                                  />
+                                          className="kanbn-task-editor-field-errors"
+                                          component="div"
+                                          name={`comments.${index}.author`}
+                                        />
+                                      </React.Fragment>
+                                      : <div className="kanbn-task-editor-field-comment-author-value">
+                                        <i className="codicon codicon-account"></i>
+                                        {comment.author || 'Anonymous'}
+                                      </div>
+                                  }
                                 </div>
                                 <div className="kanbn-task-editor-column kanbn-task-editor-field-comment-date">
                                   {formatDate(comment.date, dateFormat)}
@@ -402,20 +412,38 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
                                   >
                                     <i className="codicon codicon-trash"></i>
                                   </button>
+                                  <button
+                                    type="button"
+                                    className="kanbn-task-editor-button kanbn-task-editor-button-edit"
+                                    title="Edit comment"
+                                    onClick={() => {
+                                      setEditingComment(editingComment !== index ? index : -1);
+                                    }}
+                                  >
+                                    <i className="codicon codicon-edit"></i>
+                                  </button>
                                 </div>
                               </div>
                               <div className="kanbn-task-editor-row">
                                 <div className="kanbn-task-editor-column kanbn-task-editor-field-comment-text">
-                                  <Field
+                                  {
-                                    className="kanbn-task-editor-field-textarea"
+                                    editingComment === index
-                                    as="textarea"
+                                      ? <React.Fragment>
-                                    name={`comments.${index}.text`}
+                                        <Field
-                                  />
+                                          className="kanbn-task-editor-field-textarea"
-                                  <ErrorMessage
+                                          as="textarea"
-                                    className="kanbn-task-editor-field-errors"
+                                          name={`comments.${index}.text`}
-                                    component="div"
+                                        />
-                                    name={`comments.${index}.text`}
+                                        <ErrorMessage
-                                  />
+                                          className="kanbn-task-editor-field-errors"
+                                          component="div"
+                                          name={`comments.${index}.text`}
+                                        />
+                                      </React.Fragment>
+                                      : <div className="kanbn-task-editor-comment-text">
+                                        {comment.text}
+                                      </div>
+                                  }
                                 </div>
                               </div>
                             </div>
@@ -425,7 +453,10 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
                               type="button"
                               className="kanbn-task-editor-button kanbn-task-editor-button-add"
                               title="Add comment"
-                              onClick={() => push({ text: '', date: new Date(), author: gitUsername() || '' })}
+                              onClick={() => {
+                                push({ text: '', date: new Date(), author: gitUsername() || '' });
+                                setEditingComment(values.comments.length);
+                              }}
                             >
                               <i className="codicon codicon-comment"></i>Add comment
                             </button>

src/index.css

@@ -451,7 +451,11 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
 }
 
 .kanbn-task-editor-column-buttons .kanbn-task-editor-button {
-    margin: 8px 0;
+    margin: 8px 0 8px 8px;
+}
+
+.kanbn-task-editor-column-buttons .kanbn-task-editor-button .codicon {
+    margin-right: 0;
 }
 
 .kanbn-task-editor-field-progress {
@@ -464,10 +468,6 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
     opacity: 1;
 }
 
-.kanbn-task-editor-column .kanbn-task-editor-button-delete .codicon {
-    margin-right: 0;
-}
-
 .kanbn-task-editor-field-tag {
     position: relative;
 }
@@ -482,10 +482,20 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
 
 .kanbn-task-editor-row-comment {
     padding-bottom: 1em;
-    border-bottom: 1px var(--vscode-activityBar-inactiveForeground) solid;
     margin-bottom: 1em;
 }
 
+.kanbn-task-editor-field-comment-author-value {
+    padding: 16px 0;
+    font-style: italic;
+    opacity: 0.8;
+}
+
+.kanbn-task-editor-field-comment-author-value .codicon {
+    font-size: 0.8em !important;
+    margin-right: 0.5em;
+}
+
 .kanbn-task-editor-field-comment-date {
     padding: 16px 0;
     text-align: right;
@@ -497,15 +507,32 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
     min-height: 90px;
 }
 
+.kanbn-task-editor-comment-text {
+    position: relative;
+    padding: .5em;
+    background-color: var(--vscode-input-background);
+    min-height: 90px;
+    white-space: pre-wrap;
+}
+
+.kanbn-task-editor-comment-text::after {
+	content: "";
+	position: absolute;
+	height: 16px;
+	width: 24px;
+	bottom: -15px;
+	left: 95%;
+	background-color: var(--vscode-input-background);
+	clip-path: polygon(0 0, 100% 0, 100% 100%);
+}
+
 .kanbn-task-editor-field-label-description {
     display: inline-block;
 }
 
 .kanbn-task-editor-description-preview {
     padding: .5em;
-    border: 1px var(--vscode-activityBar-inactiveForeground) solid;
+    border: 1px var(--vscode-input-background) solid;
-    border-radius: 3px;
-    margin-top: 0;
 }
 
 .kanbn-task-editor-button-edit-description {