fix: correctly escape multi-line block quotes and callouts

Author: JohannesRudolph

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.1",
+  "version": "0.5.2",
   "name": "@meshcloud/notion-markdown-cms",
   "engines": {
     "node": ">=14"

src/BlockRenderer.ts

@@ -1,59 +1,13 @@
-import {
-    Block as PublicBlock, BlockBase, Emoji, ExternalFile, ExternalFileWithCaption, File,
-    FileWithCaption, ImageBlock, RichText
-} from '@notionhq/client/build/src/api-types';
-
 import { AssetWriter } from './AssetWriter';
+import {
+    Block, Emoji, ExternalFile, ExternalFileWithCaption, File, FileWithCaption, ImageBlock
+} from './Blocks';
 import { DeferredRenderer } from './DeferredRenderer';
 import { logger } from './logger';
 import { RichTextRenderer } from './RichTextRenderer';
 
 const debug = require("debug")("blocks");
 
-export interface CodeBlock extends BlockBase {
-  type: "code";
-  code: {
-    text: RichText[];
-    language: string;
-  };
-}
-
-export interface QuoteBlock extends BlockBase {
-  type: "quote";
-  code: {
-    text: RichText[];
-    language: string;
-  };
-}
-
-export interface CalloutBlock extends BlockBase {
-  type: "callout";
-  callout: {
-    text: RichText[];
-    icon: File | ExternalFile | Emoji;
-  };
-}
-
-export interface DividerBlock extends BlockBase {
-  type: "divider";
-}
-
-export interface ChildDatabaseBlock extends BlockBase {
-  type: "child_database";
-}
-
-// these are blocks that the notion API client code does not have proper typings for
-// for unknown reasons they removed types alltogether in v0.4 of the client
-// https://github.com/makenotion/notion-sdk-js/pulls?q=is%3Apr+is%3Aclosed#issuecomment-927781781
-export type Block =
-  | PublicBlock
-  | CodeBlock
-  | QuoteBlock
-  | CalloutBlock
-  | DividerBlock
-  | ChildDatabaseBlock;
-
-
 export interface BlockRenderResult {
   lines: string;
   childIndent?: number;
@@ -62,9 +16,12 @@ export class BlockRenderer {
   constructor(
     private readonly richText: RichTextRenderer,
     private readonly deferredRenderer: DeferredRenderer
-  ) { }
+  ) {}
 
-  async renderBlock(block: Block, assets: AssetWriter): Promise<BlockRenderResult> {
+  async renderBlock(
+    block: Block,
+    assets: AssetWriter
+  ): Promise<BlockRenderResult> {
     switch (block.type) {
       case "paragraph":
         return {
@@ -73,58 +30,70 @@ export class BlockRenderer {
       // note: render headings +1 level, because h1 is reserved for page titles
       case "heading_1":
         return {
-          lines: "## " + (await this.richText.renderMarkdown(block.heading_1.text))
+          lines:
+            "## " + (await this.richText.renderMarkdown(block.heading_1.text)),
         };
       case "heading_2":
         return {
-          lines: "### " + (await this.richText.renderMarkdown(block.heading_2.text))
+          lines:
+            "### " + (await this.richText.renderMarkdown(block.heading_2.text)),
         };
       case "heading_3":
         return {
-          lines: "#### " + (await this.richText.renderMarkdown(block.heading_3.text))
+          lines:
+            "#### " +
+            (await this.richText.renderMarkdown(block.heading_3.text)),
         };
       case "bulleted_list_item":
         return {
-          lines: "- " + await this.richText.renderMarkdown(block.bulleted_list_item.text),
-          childIndent: 4
+          lines:
+            "- " +
+            (await this.richText.renderMarkdown(block.bulleted_list_item.text)),
+          childIndent: 4,
         };
       case "numbered_list_item":
         return {
-          lines: "1. " + await this.richText.renderMarkdown(block.numbered_list_item.text),
-          childIndent: 4
+          lines:
+            "1. " +
+            (await this.richText.renderMarkdown(block.numbered_list_item.text)),
+          childIndent: 4,
         };
       case "to_do":
         return {
-          lines: "[ ] " + (await this.richText.renderMarkdown(block.to_do.text))
+          lines:
+            "[ ] " + (await this.richText.renderMarkdown(block.to_do.text)),
         };
       case "image":
         return {
-          lines: await this.renderImage(block, assets)
-        }
-      case "quote":
-        block as any;
-        return {
-          lines: "> " + (await this.richText.renderMarkdown((block as any).quote.text))
+          lines: await this.renderImage(block, assets),
         };
-      case "code":
+      case "quote": {
+        // it's legal for a notion block to be cmoposed of multiple lines
+        // each of them must be prefixed with "> " to be part of the same quote block
+        const content = await this.richText.renderMarkdown(block.quote.text);
+
+        return { lines: this.formatAsQuoteBlock(content) };
+      }
+      case "code": {
         const code = await this.richText.renderPlainText(block.code.text);
         if (code.startsWith("<!--notion-markdown-cms:raw-->")) {
           return { lines: code };
         }
 
         return {
-          lines: 
-            "```" +
-            block.code.language +
-            "\n" + code +
-            "\n```"
+          lines: "```" + block.code.language + "\n" + code + "\n```",
         };
-      case "callout":
+      }
+      case "callout": {
+        // render emoji as bold, this enables css to target it as `blockquote > strong:first-child`
+        const content =
+          `**${this.renderIcon(block.callout.icon)}** ` +
+          (await this.richText.renderMarkdown(block.callout.text));
+
         return {
-          lines:
-            `> **${this.renderIcon(block.callout.icon)}** `+ // render emoji as bold, this enables css to target it as `blockquote > strong:first-child`
-            (await this.richText.renderMarkdown(block.callout.text)),
+          lines: this.formatAsQuoteBlock(content),
         };
+      }
       case "divider":
         return { lines: "---" };
       case "child_database":
@@ -142,8 +111,11 @@ export class BlockRenderer {
       case "unsupported":
       default:
         return {
-          lines: this.renderUnsupported(`unsupported block type: ${block.type}`, block)
-        }
+          lines: this.renderUnsupported(
+            `unsupported block type: ${block.type}`,
+            block
+          ),
+        };
     }
   }
 
@@ -179,6 +151,13 @@ export class BlockRenderer {
     }
   }
 
+  private formatAsQuoteBlock(content: string) {
+    return content
+      .split("\n")
+      .map((x) => "> " + x)
+      .join("\n");
+  }
+
   private renderUnsupported(msg: string, obj: any): string {
     logger.warn(msg);
     debug(msg + "\n%O", obj);

src/Blocks.ts

@@ -0,0 +1,56 @@
+import {
+    Block as PublicBlock, BlockBase, Emoji, ExternalFile, ExternalFileWithCaption, File,
+    FileWithCaption, ImageBlock, RichText
+} from '@notionhq/client/build/src/api-types';
+
+export interface CodeBlock extends BlockBase {
+  type: "code";
+  code: {
+    text: RichText[];
+    language: string;
+  };
+}
+
+export interface QuoteBlock extends BlockBase {
+  type: "quote";
+  quote: {
+    text: RichText[];
+    language: string;
+  };
+}
+
+export interface CalloutBlock extends BlockBase {
+  type: "callout";
+  callout: {
+    text: RichText[];
+    icon: File | ExternalFile | Emoji;
+  };
+}
+
+export interface DividerBlock extends BlockBase {
+  type: "divider";
+}
+
+export interface ChildDatabaseBlock extends BlockBase {
+  type: "child_database";
+}
+
+// these are blocks that the notion API client code does not have proper typings for
+// for unknown reasons they removed types alltogether in v0.4 of the client
+// https://github.com/makenotion/notion-sdk-js/pulls?q=is%3Apr+is%3Aclosed#issuecomment-927781781
+export type Block =
+  | PublicBlock
+  | CodeBlock
+  | QuoteBlock
+  | CalloutBlock
+  | DividerBlock
+  | ChildDatabaseBlock;
+
+export {
+  Emoji,
+  ExternalFile,
+  ExternalFileWithCaption,
+  File,
+  FileWithCaption,
+  ImageBlock,
+};