Merge pull request #773 from nature-of-code/dev/codesplit-comment

Improve comment display and marks handling
nature-of-code · Feb 21, 2024 · 9d41bee · 9d41bee
2 parents 02b4c47 + 678fe48
commit 9d41bee
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/magicbook/plugins/codesplit.js b/magicbook/plugins/codesplit.js
@@ -71,15 +71,24 @@ Plugin.prototype = {
         const regex = /\{(.+)\}/;
         const match = regex.exec(line);
         if (match) {
-          const values = match[1].trim().split(' ');
-          values.forEach((value) => {
-            if (value.charAt(0) === '#') pair.id = value.substring(1);
-            if (value.charAt(0) === '.') {
-              pair.className.push(value.substring(1));
-            }
-            if (value.charAt(0) === '!')
-              pair.maxLines = parseInt(value.substring(1));
-          });
+          // match !.#
+          const marks = match[1].match(/([!#.])([^!#.\s]+)/g);
+
+          if (marks) {
+            marks.forEach((mark) => {
+              switch (mark.charAt(0)) {
+                case '#':
+                  pair.id = mark.substring(1);
+                  break;
+                case '.':
+                  pair.className.push(mark.substring(1));
+                  break;
+                case '!':
+                  pair.maxLines = parseInt(mark.substring(1));
+                  break;
+              }
+            });
+          }
           line = line.replace(regex, '');
         }
 
@@ -94,7 +103,9 @@ Plugin.prototype = {
 
     pairs.forEach((pair) => {
       const code = pair.code.join('\n') + '\n';
-      const comments = pair.comment.map((str) => str.replace('//', '').trim());
+      const comments = pair.comment
+        .map((str) => str.replace('//', '').trim())
+        .filter((str) => !!str);
       const className = pair.className.concat('pair');
 
       // highlight the pair that has comment

diff --git a/magicbook/stylesheets/components/codesplit.scss b/magicbook/stylesheets/components/codesplit.scss
@@ -24,7 +24,6 @@
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
     border-bottom: 1px dashed $color-gray-200 !important;
-  }
 
     .pair:last-child::after {
       position: absolute;
@@ -85,6 +84,10 @@
       border-top: 1pt solid $color-gray-100;
     }
 
+    &.highlight + .pair.continue {
+      border-top: initial;
+    }
+
     .comment {
       page-break-inside: avoid;
       flex-grow: 1;