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

apps/client/src/features/page/components/header/page-header-menu.tsx

@@ -2,16 +2,18 @@ import { ActionIcon, Group, Menu, Tooltip } from "@mantine/core";
 import {
   IconArrowsHorizontal,
   IconDots,
+  IconDownload,
   IconHistory,
   IconLink,
   IconMessage,
+  IconPrinter,
   IconTrash,
 } from "@tabler/icons-react";
 import React from "react";
 import useToggleAside from "@/hooks/use-toggle-aside.tsx";
 import { useAtom } from "jotai";
 import { historyAtoms } from "@/features/page-history/atoms/history-atoms.ts";
-import { useClipboard } from "@mantine/hooks";
+import { useClipboard, useDisclosure } from "@mantine/hooks";
 import { useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
@@ -21,6 +23,7 @@ import { extractPageSlugId } from "@/lib";
 import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
 import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
 import { PageWidthToggle } from "@/features/user/components/page-width-pref.tsx";
+import PageExportModal from "@/features/page/components/page-export-modal.tsx";
 
 interface PageHeaderMenuProps {
   readOnly?: boolean;
@@ -57,6 +60,8 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
   });
   const { openDeleteModal } = useDeletePageModal();
   const [tree] = useAtom(treeApiAtom);
+  const [opened, { open: openExportModal, close: closeExportModal }] =
+    useDisclosure(false);
 
   const handleCopyLink = () => {
     const pageUrl =
@@ -66,6 +71,12 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
     notifications.show({ message: "Link copied" });
   };
 
+  const handlePrint = () => {
+    setTimeout(() => {
+      window.print();
+    }, 250);
+  };
+
   const openHistoryModal = () => {
     setHistoryModalOpen(true);
   };
@@ -75,55 +86,79 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
   };
 
   return (
-    <Menu
-      shadow="xl"
-      position="bottom-end"
-      offset={20}
-      width={200}
-      withArrow
-      arrowPosition="center"
-    >
-      <Menu.Target>
-        <ActionIcon variant="default" style={{ border: "none" }}>
-          <IconDots size={20} stroke={2} />
-        </ActionIcon>
-      </Menu.Target>
+    <>
+      <Menu
+        shadow="xl"
+        position="bottom-end"
+        offset={20}
+        width={200}
+        withArrow
+        arrowPosition="center"
+      >
+        <Menu.Target>
+          <ActionIcon variant="default" style={{ border: "none" }}>
+            <IconDots size={20} />
+          </ActionIcon>
+        </Menu.Target>
 
-      <Menu.Dropdown>
-        <Menu.Item
-          leftSection={<IconLink size={16} stroke={2} />}
-          onClick={handleCopyLink}
-        >
-          Copy link
-        </Menu.Item>
-        <Menu.Divider />
+        <Menu.Dropdown>
+          <Menu.Item
+            leftSection={<IconLink size={16} />}
+            onClick={handleCopyLink}
+          >
+            Copy link
+          </Menu.Item>
+          <Menu.Divider />
 
-        <Menu.Item leftSection={<IconArrowsHorizontal size={16} stroke={2} />}>
-          <Group wrap="nowrap">
-            <PageWidthToggle label="Full width" />
-          </Group>
-        </Menu.Item>
+          <Menu.Item leftSection={<IconArrowsHorizontal size={16} />}>
+            <Group wrap="nowrap">
+              <PageWidthToggle label="Full width" />
+            </Group>
+          </Menu.Item>
 
-        <Menu.Item
-          leftSection={<IconHistory size={16} stroke={2} />}
-          onClick={openHistoryModal}
-        >
-          Page history
-        </Menu.Item>
+          <Menu.Item
+            leftSection={<IconHistory size={16} />}
+            onClick={openHistoryModal}
+          >
+            Page history
+          </Menu.Item>
 
-        {!readOnly && (
-          <>
-            <Menu.Divider />
-            <Menu.Item
-              color={"red"}
-              leftSection={<IconTrash size={16} stroke={2} />}
-              onClick={handleDeletePage}
-            >
-              Delete
-            </Menu.Item>
-          </>
-        )}
-      </Menu.Dropdown>
-    </Menu>
+          <Menu.Divider />
+
+          <Menu.Item
+            leftSection={<IconDownload size={16} />}
+            onClick={openExportModal}
+          >
+            Export
+          </Menu.Item>
+
+          <Menu.Item
+            leftSection={<IconPrinter size={16} />}
+            onClick={handlePrint}
+          >
+            Print PDF
+          </Menu.Item>
+
+          {!readOnly && (
+            <>
+              <Menu.Divider />
+              <Menu.Item
+                color={"red"}
+                leftSection={<IconTrash size={16} />}
+                onClick={handleDeletePage}
+              >
+                Delete
+              </Menu.Item>
+            </>
+          )}
+        </Menu.Dropdown>
+      </Menu>
+
+      <PageExportModal
+        pageId={page.id}
+        open={opened}
+        onClose={closeExportModal}
+      />
+    </>
   );
 }