Markdown rendering

[notmd]

close #1350 #837

• Use Charka prose to style markdown.
• Use react-markdown to render markdown.
• Use react-syntax-highlighter to highlight code.
• Remove tailwind base style in favor of Charka

Update: Ready to review now

Lightmode

Darkmode

[mashdragon]

@notmd thank you for solving this. The only test case that fails is ordered lists (1., 2., etc.) are not rendering the numbers. The line spacing is also really big still in message blocks.

Also, one thing that was discussed was to also render the Markdown when the user presses Review. Here is a diff that does this for your convenience:

Git diff

diff --git a/website/src/components/Tasks/CreateTask.tsx b/website/src/components/Tasks/CreateTask.tsx
index 448ad287..b28f5ad6 100644
--- a/website/src/components/Tasks/CreateTask.tsx
+++ b/website/src/components/Tasks/CreateTask.tsx
@@ -10,6 +10,7 @@ import { getTypeSafei18nKey } from "src/lib/i18n";
 import { TaskType } from "src/types/Task";
 import { CreateTaskReply } from "src/types/TaskResponses";
 import { CreateTaskType } from "src/types/Tasks";
+import RenderedMarkdown from "../Messages/RenderedMarkdown";
 
 export const CreateTask = ({
   task,
@@ -37,6 +38,11 @@ export const CreateTask = ({
     }
   };
 
+  let renderedMessage = <></>;
+  if (!isEditable) {
+    renderedMessage = <RenderedMarkdown markdown={inputText}></RenderedMarkdown>;
+  }
+
   return (
     <div data-cy="task" data-task-type="create-task">
       <TwoColumnsWithCards>
@@ -55,16 +61,19 @@ export const CreateTask = ({
                 {t(getTypeSafei18nKey(`tasks:${taskType.id}.instruction`))}
               </Text>
             )}
-            <TrackedTextarea
-              text={inputText}
-              onTextChange={textChangeHandler}
-              thresholds={{ low: 20, medium: 40, goal: 50 }}
-              textareaProps={{
-                placeholder: t(getTypeSafei18nKey(`tasks:${taskType.id}.response_placeholder`)),
-                isDisabled,
-                isReadOnly: !isEditable,
-              }}
-            />
+            <div hidden={!isEditable}>
+              <TrackedTextarea
+                text={inputText}
+                onTextChange={textChangeHandler}
+                thresholds={{ low: 20, medium: 40, goal: 50 }}
+                textareaProps={{
+                  placeholder: t(getTypeSafei18nKey(`tasks:${taskType.id}.response_placeholder`)),
+                  isDisabled,
+                  isReadOnly: !isEditable,
+                }}
+              />
+            </div>
+            {renderedMessage}
           </Stack>
         </>
       </TwoColumnsWithCards>

Line spacing is interestingly not a problem for this Review rendering. So maybe there is an issue with the message block styling.

[notmd]

@mashdragon Thank you for the feedback, I will check it again tomorrow. About render mark markdown when editing, I plan to make it in another PR and add auto grow feature to the textarea too.

[mashdragon]

One other place that needs rendering is in the modals of the ranking task. I did not remember that before.

[notmd]

@mashdragon I just tweak style (heading space only) similar to boostrap which is the CSS framework Github use. Can you take a look at the style?

[AbdBarho]

I am not really sure what is the reason for the disabling css reset stuff / using chakra reset? but anyway looks good!

[notmd]

I am not really sure what is the reason for the disabling css reset stuff / using chakra reset? but anyway looks good!

Tailwind also reset style ol tag . I just look overall the site when change CSS reset to Charka, it still look good.