feat: Individual page export in Markdown and HTML formats (#80)

* fix maths node * render default html width * Add page export module * with support for html and markdown exports * Page export UI * Add PDF print too * remove unused import
2026-05-17 23:14:07 +08:00 · 2024-07-12 14:45:09 +01:00
parent b43de81013
commit f388540293
30 changed files with 782 additions and 76 deletions
@@ -0,0 +1,100 @@
+import * as TurndownService from '@joplin/turndown';
+import * as TurndownPluginGfm from '@joplin/turndown-plugin-gfm';
+
+export function turndown(html: string): string {
+  const turndownService = new TurndownService({
+    headingStyle: 'atx',
+    codeBlockStyle: 'fenced',
+    hr: '---',
+    bulletListMarker: '-',
+  });
+  const tables = TurndownPluginGfm.tables;
+  const strikethrough = TurndownPluginGfm.strikethrough;
+  const highlightedCodeBlock = TurndownPluginGfm.highlightedCodeBlock;
+
+  turndownService.use([
+    tables,
+    strikethrough,
+    highlightedCodeBlock,
+    taskList,
+    callout,
+    toggleListTitle,
+    toggleListBody,
+    listParagraph,
+  ]);
+
+  return turndownService.turndown(html).replaceAll('<br>', ' ');
+}
+
+function listParagraph(turndownService: TurndownService) {
+  turndownService.addRule('paragraph', {
+    filter: ['p'],
+    replacement: (content: any, node: HTMLInputElement) => {
+      if (node.parentElement?.nodeName === 'LI') {
+        return content;
+      }
+
+      return `\n\n${content}\n\n`;
+    },
+  });
+}
+
+function callout(turndownService: TurndownService) {
+  turndownService.addRule('callout', {
+    filter: function (node: HTMLInputElement) {
+      return (
+        node.nodeName === 'DIV' && node.getAttribute('data-type') === 'callout'
+      );
+    },
+    replacement: function (content: any, node: HTMLInputElement) {
+      const calloutType = node.getAttribute('data-callout-type');
+      return `\n\n:::${calloutType}\n${content.trim()}\n:::\n\n`;
+    },
+  });
+}
+
+function taskList(turndownService: TurndownService) {
+  turndownService.addRule('taskListItem', {
+    filter: function (node: HTMLInputElement) {
+      return (
+        node.getAttribute('data-type') === 'taskItem' &&
+        node.parentNode.nodeName === 'UL'
+      );
+    },
+    replacement: function (content: any, node: HTMLInputElement) {
+      const checkbox = node.querySelector(
+        'input[type="checkbox"]',
+      ) as HTMLInputElement;
+      const isChecked = checkbox.checked;
+
+      return `- ${isChecked ? '[x]' : '[ ]'}  ${content.trim()} \n`;
+    },
+  });
+}
+
+function toggleListTitle(turndownService: TurndownService) {
+  turndownService.addRule('toggleListTitle', {
+    filter: function (node: HTMLInputElement) {
+      return (
+        node.nodeName === 'SUMMARY' && node.parentNode.nodeName === 'DETAILS'
+      );
+    },
+    replacement: function (content: any, node: HTMLInputElement) {
+      return '- ' + content;
+    },
+  });
+}
+
+function toggleListBody(turndownService: TurndownService) {
+  turndownService.addRule('toggleListContent', {
+    filter: function (node: HTMLInputElement) {
+      return (
+        node.getAttribute('data-type') === 'detailsContent' &&
+        node.parentNode.nodeName === 'DETAILS'
+      );
+    },
+    replacement: function (content: any, node: HTMLInputElement) {
+      return `   ${content.replace(/\n/g, '\n    ')}  `;
+    },
+  });
+}