fix: checklist not working anymore inside markdown #2988

src/app/ui/inline-markdown/inline-markdown.component.scss

@@ -1,4 +1,4 @@
-@import "../../../_variables";
+@import '../../../_variables';
 
 :host {
   display: block;
@@ -21,7 +21,7 @@
 
   .resize-to-fit {
     position: absolute;
-    right: $s*2;
+    right: $s * 2;
     top: 0;
     cursor: pointer;
   }
@@ -35,7 +35,7 @@
 .markdown-parsed {
   //transition: height 1.3s;
   border: 0;
-  padding: $s $s*2;
+  padding: $s $s * 2;
   margin: 0;
   width: 100%;
   box-sizing: border-box;
@@ -53,14 +53,13 @@
     padding-top: 0;
   }
 
-
   h1,
   h2,
   h3 {
     &,
     .mat-typography & {
       margin-bottom: $s;
-      margin-top: $s*2;
+      margin-top: $s * 2;
 
       &:first-child {
         margin-top: 0;
@@ -71,16 +70,32 @@
 
   ul {
     margin: 0 $s;
-    padding-left: $s*2;
+    padding-left: $s * 2;
   }
 
   > ul {
-    padding-left: $s*2;
+    padding-left: $s * 2;
   }
 
   ul ul {
     padding-top: 0;
   }
+
+  .checkbox {
+    display: inline-block;
+    font-size: 20px;
+    width: 20px;
+    line-height: 1;
+    text-align: center;
+    margin-left: -28px;
+    vertical-align: middle;
+    margin-right: $s;
+  }
+
+  .checkbox-wrapper {
+    list-style: none;
+    margin-bottom: $s;
+  }
 }
 
 textarea {

src/app/ui/inline-markdown/inline-markdown.component.ts

@@ -114,7 +114,13 @@ export class InlineMarkdownComponent implements OnInit, OnDestroy {
 
   toggleShowEdit($event?: MouseEvent): void {
     // check if anchor link was clicked
-    if (!$event || ($event.target as HTMLElement).tagName !== 'A') {
+    console.log(($event?.target as any).className);
+
+    if (
+      !$event ||
+      (($event.target as HTMLElement).tagName !== 'A' &&
+        !($event.target as HTMLElement).className.includes('marked-checkbox'))
+    ) {
       this.isShowEdit = true;
       this.modelCopy = this.model || '';
 

src/app/ui/ui.module.ts

@@ -189,10 +189,17 @@ const OTHER_3RD_PARTY_MODS_WITHOUT_CFG = [
         provide: MarkedOptions,
         useFactory: (): MarkedOptions => {
           const renderer = new MarkedRenderer();
-          renderer.listitem = (text: string) =>
-            /<input.+type="checkbox"/.test(text)
-              ? '<li style="list-style: none;">' + text + '</li>'
+          renderer.checkbox = (isChecked: boolean) => {
+            return `<span class="checkbox material-icons">${
+              isChecked ? 'check_box ' : 'check_box_outline_blank '
+            }</span>`;
+          };
+          renderer.listitem = (text: string) => {
+            console.log(text, text.includes('checkbox'));
+            return text.includes('checkbox')
+              ? '<li class="checkbox-wrapper">' + text + '</li>'
               : '<li>' + text + '</li>';
+          };
           return {
             renderer: renderer,
             gfm: true,