frontend: add default task content

twenty-frontend/src/css/_tables.scss

@@ -39,12 +39,13 @@
     padding: 10px;
     border: #cfcfc4 1px solid;
     .task.content {
-      p:first-child strong:first-child {
-        margin: 0 0 5px 0;
-      }
-      p strong:first-child {
-        display: block;
-        margin: 10px 0 5px 0;
+      padding: 10px;
+
+      h3,h4,h5 {
+        &:first-child {
+          margin: 0 0 5px 0;
+        }
+        margin: 15px 0 5px 0;
       }
     }
   }

twenty-frontend/src/js/components/Task.tsx

@@ -13,6 +13,18 @@ type Inputs = {
   projectId: number;
 };
 
+const DEFAULT_TASK_CONTENT = [
+  "## Subtasks",
+  "",
+  "* [] Task 1",
+  "* [] Task 2",
+  "* [] ...",
+  "",
+  "## Description",
+  "",
+  "Add a description here....",
+].join("\n");
+
 export function Task({ task }: { task?: Task }) {
   const { register, handleSubmit, watch, setValue: set } = useForm<Inputs>();
   const [isEditable, setIsEditable] = useState<boolean>(!task);
@@ -66,7 +78,7 @@ export function Task({ task }: { task?: Task }) {
                 <textarea
                   className="form"
                   placeholder="Add your description heren"
-                  defaultValue={task?.content}
+                  defaultValue={task?.content || DEFAULT_TASK_CONTENT}
                   {...register("content", { required: true })}
                 />
               </div>

twenty-frontend/src/js/lib/markdown-utils.ts

@@ -6,6 +6,8 @@ const DEFAULT_RENDER_OPTIONS = {
   strikethrough: true,
   tables: true,
   tasklists: true,
+  ghCodeBlocks: true,
+  headerLevelStart: 3,
 };
 
 export function rendermd(str: string, options = {}) {