Fix Callout and Grid inner for output as HTML to support rich formats.

longbridge · Oct 24, 2023 · 0cdef00 · 0cdef00
1 parent 69ad098
commit 0cdef00
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 6 deletions.
diff --git a/feishu-docx/package.json b/feishu-docx/package.json
@@ -24,6 +24,7 @@
     "feishu-docx": "^0.1.3",
     "js-yaml": "^4.1.0",
     "jsdom": "^22.1.0",
+    "marked": "^9.1.2",
     "typescript": "^5.2.2"
   },
   "devDependencies": {
@@ -33,4 +34,4 @@
     "ts-jest": "^29.1.1"
   },
   "license": "MIT"
-}
+}
diff --git a/feishu-docx/src/markdown_renderer.ts b/feishu-docx/src/markdown_renderer.ts
@@ -1,5 +1,6 @@
 import { CodeLanguage } from 'feishu-docx';
 import YAML from 'js-yaml';
+import { marked } from 'marked';
 import { createElement } from './dom';
 import { getEmojiChar } from './emoji';
 import { Buffer } from './string_buffer';
@@ -461,6 +462,7 @@ export class MarkdownRenderer extends Renderer {
     const buf = new Buffer();
 
     buf.write(`<div class="grid gap-3 grid-cols-${block.grid.column_size}">\n`);
+
     block.children?.forEach((childId) => {
       const child = this.blockMap[childId];
       buf.write(this.parseGridColumn(child));
@@ -474,10 +476,13 @@ export class MarkdownRenderer extends Renderer {
     const buf = new Buffer();
 
     buf.write(`<div>\n`);
+
+    let innerBuf = new Buffer();
     block.children?.forEach((childId) => {
       const child = this.blockMap[childId];
-      buf.write(this.parseBlock(child, 0));
+      innerBuf.write(this.parseBlock(child, 0));
     });
+    buf.write(marked.parse(innerBuf.toString()));
     buf.write('</div>\n');
 
     return buf.toString();
@@ -514,14 +519,21 @@ export class MarkdownRenderer extends Renderer {
       .join('; ');
 
     buf.write(`<div class="${classNames.join(' ')}">\n`);
+
+    // Inner of the Callout, we need ouput as HTML
+    let markdownBuf = new Buffer();
     if (block.callout.emoji_id) {
-      buf.write(getEmojiChar(block.callout.emoji_id));
-      buf.write(' ');
+      markdownBuf.write(getEmojiChar(block.callout.emoji_id));
+      markdownBuf.write(' ');
     }
     block.children?.forEach((childId) => {
       const child = this.blockMap[childId];
-      buf.write(this.parseBlock(child, 0));
+      markdownBuf.write(this.parseBlock(child, 0));
     });
+
+    let html = marked.parse(markdownBuf.toString());
+
+    buf.write(html);
     buf.write('</div>\n');
 
     return buf.toString();
@@ -553,4 +565,9 @@ export class MarkdownRenderer extends Renderer {
     buf.write('\n```\n');
     return buf.toString();
   }
+
+  markdownToHTML(markdown: string): string {
+    let html = marked.parse(markdown);
+    return html;
+  }
 }
diff --git a/feishu-docx/tests/fixtures/case3.expect.md b/feishu-docx/tests/fixtures/case3.expect.md
@@ -1,7 +1,7 @@
 # Feishu Pages
 
 <div class="callout callout-bg-3 callout-border-2">
-🎉 This site build by GitHub Actions with feishu-pages.
+<p>🎉 This site build by GitHub Actions with feishu-pages.</p>
 </div>
 
 <div class="grid gap-3 grid-cols-3">
@@ -108,6 +108,11 @@ yarn feishu-pages
 
 <iframe src="https://www.bilibili.com/video/BV1L94y1t7Yb/"/>
 
+<div class="callout callout-bg-3 callout-border-3">
+<p>💡 文档内 <a href="J1o5w2l0NiV8tekJvXycfkkengb">Page Mata</a> 标识为 <code>hide: true</code> 的文档将会被排除掉，你可以用来隐藏一些不想公开的文档。
+所有的 Markdown 导出的文件名将遵循知识库的目录树，并按照 Page Meta 里面的 <code>slug</code> 来整理文件夹和文件名。</p>
+</div>
+
 ## **License**
 
 MIT
diff --git a/feishu-docx/tests/fixtures/case3.raw.json b/feishu-docx/tests/fixtures/case3.raw.json
@@ -59,6 +59,7 @@
         "L66Rd3RXPoOHnexBiu9chq85nUd",
         "XxcIdOlVqos2hexsgEFcmjMfnEe",
         "doxcnP6QMnaWlJ6TAPfIprc09na",
+        "SAeTdzWccoP0p5xhzndcPM7SnOn",
         "HV3MdieCiobo9OxiBbccB0P4nie",
         "DLCvdPFhFoIGQmxh6OYctEkAnPe",
         "doxcn0jEv7SPSvdT0Pznv2VsrAc"
@@ -3238,6 +3239,145 @@
       },
       "parent_id": "Fkoed2dB5ofvJbxSmZbcWMBhnQd"
     },
+    {
+      "block_id": "SAeTdzWccoP0p5xhzndcPM7SnOn",
+      "block_type": 19,
+      "callout": {
+        "background_color": 3,
+        "border_color": 3,
+        "emoji_id": "bulb"
+      },
+      "children": [
+        "E5sRdtfFloceUdxQ2zlcFPiLnsh",
+        "QADBdwAumoEAYwxhrULcoY96nbO"
+      ],
+      "parent_id": "Fkoed2dB5ofvJbxSmZbcWMBhnQd"
+    },
+    {
+      "block_id": "E5sRdtfFloceUdxQ2zlcFPiLnsh",
+      "block_type": 2,
+      "parent_id": "SAeTdzWccoP0p5xhzndcPM7SnOn",
+      "text": {
+        "elements": [
+          {
+            "text_run": {
+              "content": "文档内 ",
+              "text_element_style": {
+                "bold": false,
+                "inline_code": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false
+              }
+            }
+          },
+          {
+            "mention_doc": {
+              "obj_type": 16,
+              "text_element_style": {
+                "bold": false,
+                "inline_code": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false
+              },
+              "title": "Page Mata",
+              "token": "J1o5w2l0NiV8tekJvXycfkkengb",
+              "url": "https://longbridge.feishu.cn/wiki/J1o5w2l0NiV8tekJvXycfkkengb"
+            }
+          },
+          {
+            "text_run": {
+              "content": " 标识为 ",
+              "text_element_style": {
+                "bold": false,
+                "inline_code": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false
+              }
+            }
+          },
+          {
+            "text_run": {
+              "content": "hide: true",
+              "text_element_style": {
+                "bold": false,
+                "inline_code": true,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false
+              }
+            }
+          },
+          {
+            "text_run": {
+              "content": " 的文档将会被排除掉，你可以用来隐藏一些不想公开的文档。",
+              "text_element_style": {
+                "bold": false,
+                "inline_code": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false
+              }
+            }
+          }
+        ],
+        "style": {
+          "align": 1,
+          "folded": false
+        }
+      }
+    },
+    {
+      "block_id": "QADBdwAumoEAYwxhrULcoY96nbO",
+      "block_type": 2,
+      "parent_id": "SAeTdzWccoP0p5xhzndcPM7SnOn",
+      "text": {
+        "elements": [
+          {
+            "text_run": {
+              "content": "所有的 Markdown 导出的文件名将遵循知识库的目录树，并按照 Page Meta 里面的 ",
+              "text_element_style": {
+                "bold": false,
+                "inline_code": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false
+              }
+            }
+          },
+          {
+            "text_run": {
+              "content": "slug",
+              "text_element_style": {
+                "bold": false,
+                "inline_code": true,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false
+              }
+            }
+          },
+          {
+            "text_run": {
+              "content": " 来整理文件夹和文件名。",
+              "text_element_style": {
+                "bold": false,
+                "inline_code": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false
+              }
+            }
+          }
+        ],
+        "style": {
+          "align": 1,
+          "folded": false
+        }
+      }
+    },
     {
       "block_id": "HV3MdieCiobo9OxiBbccB0P4nie",
       "block_type": 4,

diff --git a/yarn.lock b/yarn.lock
@@ -2626,6 +2626,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/mark.js/-/mark.js-8.11.1.tgz#180f1f9ebef8b0e638e4166ad52db879beb2ffc5"
   integrity sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==
 
+marked@^9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-9.1.2.tgz#a54ca772d2b5a43de7d8ed40111354b4b7985527"
+  integrity sha512-qoKMJqK0w6vkLk8+KnKZAH6neUZSNaQqVZ/h2yZ9S7CbLuFHyS2viB0jnqcWF9UKjwsAbMrQtnQhdmdvOVOw9w==
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"