Browse Source

fix: markdown checkbox rendering with links

NGPixel 3 years ago
parent
commit
0d7d95d2ac
2 changed files with 19 additions and 15 deletions
  1. 2 2
      client/components/editor/editor-markdown.vue
  2. 17 13
      client/themes/default/scss/app.scss

+ 2 - 2
client/components/editor/editor-markdown.vue

@@ -290,7 +290,7 @@ const md = new MarkdownIt({
   })
   })
   .use(underline)
   .use(underline)
   .use(mdEmoji)
   .use(mdEmoji)
-  .use(mdTaskLists, {label: true, labelAfter: true})
+  .use(mdTaskLists, {label: false, labelAfter: false})
   .use(mdExpandTabs)
   .use(mdExpandTabs)
   .use(mdAbbr)
   .use(mdAbbr)
   .use(mdSup)
   .use(mdSup)
@@ -627,7 +627,7 @@ export default {
             hint: async (cm, options) => {
             hint: async (cm, options) => {
               const cur = cm.getCursor()
               const cur = cm.getCursor()
               const curLine = cm.getLine(cur.line).substring(0, cur.ch)
               const curLine = cm.getLine(cur.line).substring(0, cur.ch)
-              const queryString = curLine.substring(curLine.lastIndexOf('[')+1,curLine.length-2)
+              const queryString = curLine.substring(curLine.lastIndexOf('[') + 1, curLine.length - 2)
               const token = cm.getTokenAt(cur)
               const token = cm.getTokenAt(cur)
               try {
               try {
                 const respRaw = await this.$apollo.query({
                 const respRaw = await this.$apollo.query({

+ 17 - 13
client/themes/default/scss/app.scss

@@ -77,7 +77,7 @@
     & + h2, & + h3, & + h4, & + h5, & + h6 {
     & + h2, & + h3, & + h4, & + h5, & + h6 {
       margin-top: 8px;
       margin-top: 8px;
     }
     }
-    
+
     & + hr.footnotes-sep {
     & + hr.footnotes-sep {
       display: none;
       display: none;
     }
     }
@@ -508,7 +508,7 @@
     }
     }
   }
   }
 
 
-  ul:not(.tabset-tabs) {
+  ul:not(.tabset-tabs):not(.contains-task-list) {
     list-style: none;
     list-style: none;
     > li::before {
     > li::before {
       position: absolute;
       position: absolute;
@@ -596,21 +596,25 @@
   // TASK LISTS
   // TASK LISTS
   // ---------------------------------
   // ---------------------------------
 
 
+  .contains-task-list {
+    padding-left: 0;
+  }
+
   .task-list-item {
   .task-list-item {
     position: relative;
     position: relative;
     list-style-type: none;
     list-style-type: none;
 
 
     &-checkbox[disabled] {
     &-checkbox[disabled] {
-      display: none;
-
-      & + label {
-        padding-left: 1.5rem;
-      }
+      width: 1.1rem;
+      height: 1.1rem;
+      top: 2px;
+      position: relative;
+      margin-right: 2px;
 
 
-      & + label::before {
+      &::after {
         position: absolute;
         position: absolute;
         left: 0;
         left: 0;
-        top: 2px;
+        top: 0;
         content: ' ';
         content: ' ';
         display: block;
         display: block;
         width: 1.1rem;
         width: 1.1rem;
@@ -629,7 +633,7 @@
         }
         }
       }
       }
 
 
-      &[checked] + label::before  {
+      &[checked]::after  {
         content: '✓';
         content: '✓';
       }
       }
     }
     }
@@ -817,15 +821,15 @@
         outline: none;
         outline: none;
         background-color: mc('grey', '100');
         background-color: mc('grey', '100');
       }
       }
-      
+
       > h1, h2, h3, h4, h5, h6 {
       > h1, h2, h3, h4, h5, h6 {
         width: 95%;
         width: 95%;
         display: inline-block;
         display: inline-block;
-        
+
         &:first-child {
         &:first-child {
           margin-top: 0;
           margin-top: 0;
         }
         }
-        
+
         &:only-child::after {
         &:only-child::after {
           display: none;
           display: none;
         }
         }