fix: preserve the toggle rendering on the back

Fixes a regression due to changes in the Notion style.

src/lib/parser/DeckParser.ts

@@ -24,6 +24,8 @@ import { isImageFileEmbedable, isMarkdownFile } from '../storage/checks';
 import { getFileContents } from './getFileContents';
 import { handleNestedBulletPointsInMarkdown } from './handleNestedBulletPointsInMarkdown';
 import { checkFlashcardsLimits } from '../User/checkFlashcardsLimits';
+import { extractStyles } from './extractStyles';
+import { withFontSize } from './withFontSize';
 
 export interface DeckParserInput {
   name: string;
@@ -135,16 +137,6 @@ export class DeckParser {
       .replace('<summary class="toggle"></summary>', '');
   }
 
-  setFontSize(style: string) {
-    let { fontSize } = this.settings;
-    if (fontSize && fontSize !== '20px') {
-      // For backwards compatability, don't touch the font-size if it's 20px
-      fontSize = fontSize.trim().endsWith('px') ? fontSize : `${fontSize}px`;
-      style += '\n' + `* { font-size:${fontSize}}`;
-    }
-    return style;
-  }
-
   getLink(pageId: string | undefined, note: Note): string | null {
     try {
       const page = pageId!.replace(/-/g, '');
@@ -195,7 +187,7 @@ export class DeckParser {
     decks: Deck[]
   ) {
     let dom = this.loadDOM(contents);
-    const style = this.extractStyle(dom);
+    const style = withFontSize(extractStyles(dom), this.settings.fontSize);
     let image: string | undefined = this.extractCoverImage(dom);
 
     const name = this.extractName(
@@ -513,15 +505,6 @@ export class DeckParser {
     );
   }
 
-  private extractStyle(dom: cheerio.Root) {
-    let style = dom('style').html();
-    if (style) {
-      style = style.replace(/white-space: pre-wrap;/g, '');
-      return this.setFontSize(style);
-    }
-    return null;
-  }
-
   private extractCoverImage(dom: cheerio.Root) {
     const pageCoverImage = dom('.page-cover-image');
     if (pageCoverImage) {

src/lib/parser/extractStyles.test.ts

@@ -0,0 +1,36 @@
+import cheerio from 'cheerio';
+import { extractStyles } from './extractStyles';
+
+describe('extractStyles', () => {
+  it('should remove list-style-type changes', () => {
+    const page = cheerio.load(`
+ <style>.toggle {
+\tpadding-inline-start: 0em;
+\tlist-style-type: none;
+}</style>
+ `);
+
+    const result = extractStyles(page);
+    expect(result?.trim()).toEqual(
+      `.toggle {
+\tpadding-inline-start: 0em;
+\t
+}`.trim()
+    );
+  });
+
+  it('should remove white-space: pre-wrap', () => {
+    const page = cheerio.load(`
+  <style>.toggle {
+\tpadding-inline-start: 0em;
+\twhite-space: pre-wrap;
+}</style>`);
+    const result = extractStyles(page);
+    expect(result?.trim()).toEqual(
+      `.toggle {
+\tpadding-inline-start: 0em;
+\t
+}`.trim()
+    );
+  });
+});

src/lib/parser/extractStyles.ts

@@ -0,0 +1,20 @@
+import cheerio from 'cheerio';
+
+/**
+ * Extracts the styles from the page and removes formatting issues.
+ *
+ * Removing list-style-type changes (makes nested toggles work)
+ * Removing white-space: pre-wrap (don't remember why)
+ *
+ * @param page
+ */
+export function extractStyles(page: cheerio.Root) {
+  let style = page('style').html();
+  if (!style) {
+    return null;
+  }
+
+  return style
+    .replace(/white-space: pre-wrap;/g, '')
+    .replace(/list-style-type: none;/g, '');
+}

src/lib/parser/withFontSize.ts

@@ -0,0 +1,8 @@
+export function withFontSize(style: string | null, fontSize?: string) {
+  if (style && fontSize && fontSize !== '20px') {
+    // For backwards compatability, don't touch the font-size if it's 20px
+    fontSize = fontSize.trim().endsWith('px') ? fontSize : `${fontSize}px`;
+    style += '\n' + `* { font-size:${fontSize}}`;
+  }
+  return style;
+}