v0.2.5

* 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.2.5",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -26,6 +26,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "emoji-mart": "^5.6.0",
+    "file-saver": "^2.0.5",
     "jotai": "^2.8.3",
     "jotai-optics": "^0.4.0",
     "js-cookie": "^3.0.5",

apps/client/src/components/common/recent-changes.tsx

@@ -1,4 +1,11 @@
-import { Text, Group, UnstyledButton, Badge, Table } from "@mantine/core";
+import {
+  Text,
+  Group,
+  UnstyledButton,
+  Badge,
+  Table,
+  ScrollArea,
+} from "@mantine/core";
 import { Link } from "react-router-dom";
 import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
@@ -22,46 +29,48 @@ export default function RecentChanges({ spaceId }: Props) {
   }
 
   return pages && pages.items.length > 0 ? (
-    <Table highlightOnHover verticalSpacing="sm">
-      <Table.Tbody>
-        {pages.items.map((page) => (
-          <Table.Tr key={page.id}>
-            <Table.Td>
-              <UnstyledButton
-                component={Link}
-                to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
-              >
-                <Group wrap="nowrap">
-                  {page.icon || <IconFileDescription size={18} />}
-
-                  <Text fw={500} size="md" lineClamp={1}>
-                    {page.title || "Untitled"}
-                  </Text>
-                </Group>
-              </UnstyledButton>
-            </Table.Td>
-            {!spaceId && (
+    <ScrollArea>
+      <Table highlightOnHover verticalSpacing="sm">
+        <Table.Tbody>
+          {pages.items.map((page) => (
+            <Table.Tr key={page.id}>
               <Table.Td>
-                <Badge
-                  color="blue"
-                  variant="light"
+                <UnstyledButton
                   component={Link}
-                  to={getSpaceUrl(page?.space.slug)}
-                  style={{ cursor: "pointer" }}
+                  to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
                 >
-                  {page?.space.name}
-                </Badge>
+                  <Group wrap="nowrap">
+                    {page.icon || <IconFileDescription size={18} />}
+
+                    <Text fw={500} size="md" lineClamp={1}>
+                      {page.title || "Untitled"}
+                    </Text>
+                  </Group>
+                </UnstyledButton>
               </Table.Td>
-            )}
-            <Table.Td>
-              <Text c="dimmed" size="xs" fw={500}>
-                {formattedDate(page.updatedAt)}
-              </Text>
-            </Table.Td>
-          </Table.Tr>
-        ))}
-      </Table.Tbody>
-    </Table>
+              {!spaceId && (
+                <Table.Td>
+                  <Badge
+                    color="blue"
+                    variant="light"
+                    component={Link}
+                    to={getSpaceUrl(page?.space.slug)}
+                    style={{ cursor: "pointer" }}
+                  >
+                    {page?.space.name}
+                  </Badge>
+                </Table.Td>
+              )}
+              <Table.Td>
+                <Text c="dimmed" size="xs" fw={500}>
+                  {formattedDate(page.updatedAt)}
+                </Text>
+              </Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </ScrollArea>
   ) : (
     <Text size="md" ta="center">
       No pages yet

apps/client/src/components/layouts/global/top-menu.tsx

@@ -1,5 +1,6 @@
-import { Avatar, Group, Menu, rem, UnstyledButton, Text } from "@mantine/core";
+import { Group, Menu, UnstyledButton, Text } from "@mantine/core";
 import {
+  IconBrush,
   IconChevronDown,
   IconLogout,
   IconSettings,
@@ -38,10 +39,7 @@ export default function TopMenu() {
             <Text fw={500} size="sm" lh={1} mr={3}>
               {workspace.name}
             </Text>
-            <IconChevronDown
-              style={{ width: rem(12), height: rem(12) }}
-              stroke={1.5}
-            />
+            <IconChevronDown size={16} />
           </Group>
         </UnstyledButton>
       </Menu.Target>
@@ -51,12 +49,7 @@ export default function TopMenu() {
         <Menu.Item
           component={Link}
           to={APP_ROUTE.SETTINGS.WORKSPACE.GENERAL}
-          leftSection={
-            <IconSettings
-              style={{ width: rem(16), height: rem(16) }}
-              stroke={1.5}
-            />
-          }
+          leftSection={<IconSettings size={16} />}
         >
           Workspace settings
         </Menu.Item>
@@ -64,12 +57,7 @@ export default function TopMenu() {
         <Menu.Item
           component={Link}
           to={APP_ROUTE.SETTINGS.WORKSPACE.MEMBERS}
-          leftSection={
-            <IconUsers
-              style={{ width: rem(16), height: rem(16) }}
-              stroke={1.5}
-            />
-          }
+          leftSection={<IconUsers size={16} />}
         >
           Manage members
         </Menu.Item>
@@ -98,27 +86,22 @@ export default function TopMenu() {
         <Menu.Item
           component={Link}
           to={APP_ROUTE.SETTINGS.ACCOUNT.PROFILE}
-          leftSection={
-            <IconUserCircle
-              style={{ width: rem(16), height: rem(16) }}
-              stroke={1.5}
-            />
-          }
+          leftSection={<IconUserCircle size={16} />}
         >
           My profile
         </Menu.Item>
 
+        <Menu.Item
+          component={Link}
+          to={APP_ROUTE.SETTINGS.ACCOUNT.PREFERENCES}
+          leftSection={<IconBrush size={16} />}
+        >
+          My preferences
+        </Menu.Item>
+
         <Menu.Divider />
 
-        <Menu.Item
-          onClick={logout}
-          leftSection={
-            <IconLogout
-              style={{ width: rem(16), height: rem(16) }}
-              stroke={1.5}
-            />
-          }
-        >
+        <Menu.Item onClick={logout} leftSection={<IconLogout size={16} />}>
           Logout
         </Menu.Item>
       </Menu.Dropdown>

apps/client/src/features/auth/atoms/auth-tokens-atom.ts

@@ -1,14 +1,17 @@
 import Cookies from "js-cookie";
 import { createJSONStorage, atomWithStorage } from "jotai/utils";
-import { ITokens } from '../types/auth.types';
-
+import { ITokens } from "../types/auth.types";
 
 const cookieStorage = createJSONStorage<ITokens>(() => {
   return {
     getItem: () => Cookies.get("authTokens"),
-    setItem: (key, value) => Cookies.set(key, value),
+    setItem: (key, value) => Cookies.set(key, value, { expires: 30 }),
     removeItem: (key) => Cookies.remove(key),
   };
 });
 
-export const authTokensAtom = atomWithStorage<ITokens | null>("authTokens", null, cookieStorage);
+export const authTokensAtom = atomWithStorage<ITokens | null>(
+  "authTokens",
+  null,
+  cookieStorage,
+);

apps/client/src/features/auth/hooks/use-auth.ts

@@ -4,11 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { useAtom } from "jotai";
 import { authTokensAtom } from "@/features/auth/atoms/auth-tokens-atom";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
-import {
-  ILogin,
-  IRegister,
-  ISetupWorkspace,
-} from "@/features/auth/types/auth.types";
+import { ILogin, ISetupWorkspace } from "@/features/auth/types/auth.types";
 import { notifications } from "@mantine/notifications";
 import { IAcceptInvite } from "@/features/workspace/types/workspace.types.ts";
 import { acceptInvitation } from "@/features/workspace/services/workspace-service.ts";
@@ -49,7 +45,6 @@ export default function useAuth() {
       const res = await acceptInvitation(data);
       setIsLoading(false);
 
-      console.log(res);
       setAuthToken(res.tokens);
 
       navigate(APP_ROUTE.HOME);

apps/client/src/features/editor/components/image/image-view.tsx

@@ -2,32 +2,28 @@ import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { useMemo } from "react";
 import { Image } from "@mantine/core";
 import { getFileUrl } from "@/lib/config.ts";
+import clsx from "clsx";
 
 export default function ImageView(props: NodeViewProps) {
   const { node, selected } = props;
   const { src, width, align, title } = node.attrs;
 
-  const flexJustifyContent = useMemo(() => {
-    if (align === "center") return "center";
-    if (align === "right") return "flex-end";
-    return "flex-start";
+  const alignClass = useMemo(() => {
+    if (align === "left") return "alignLeft";
+    if (align === "right") return "alignRight";
+    if (align === "center") return "alignCenter";
+    return "alignCenter";
   }, [align]);
 
   return (
-    <NodeViewWrapper
-      style={{
-        position: "relative",
-        display: "flex",
-        justifyContent: flexJustifyContent,
-      }}
-    >
+    <NodeViewWrapper>
       <Image
         radius="md"
         fit="contain"
         w={width}
         src={getFileUrl(src)}
         alt={title}
-        className={selected ? "ProseMirror-selectednode" : ""}
+        className={clsx(selected ? "ProseMirror-selectednode" : "", alignClass)}
       />
     </NodeViewWrapper>
   );

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -184,7 +184,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
           .chain()
           .focus()
           .deleteRange(range)
-          .insertTable({ rows: 3, cols: 3, withHeaderRow: false })
+          .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
           .run(),
     },
     {
@@ -264,10 +264,20 @@ export const getSuggestionItems = ({
   const search = query.toLowerCase();
   const filteredGroups: SlashMenuGroupedItemsType = {};
 
+  const fuzzyMatch = (query, target) => {
+    let queryIndex = 0;
+    target = target.toLowerCase();
+    for (let char of target) {
+      if (query[queryIndex] === char) queryIndex++;
+      if (queryIndex === query.length) return true;
+    }
+    return false;
+  };
+
   for (const [group, items] of Object.entries(CommandGroups)) {
     const filteredItems = items.filter((item) => {
       return (
-        item.title.toLowerCase().includes(search) ||
+        fuzzyMatch(search, item.title) ||
         item.description.toLowerCase().includes(search) ||
         (item.searchTerms &&
           item.searchTerms.some((term: string) => term.includes(search)))

apps/client/src/features/editor/components/video/video-view.tsx

@@ -1,31 +1,27 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { useMemo } from "react";
 import { getFileUrl } from "@/lib/config.ts";
+import clsx from "clsx";
 
 export default function VideoView(props: NodeViewProps) {
   const { node, selected } = props;
   const { src, width, align } = node.attrs;
 
-  const flexJustifyContent = useMemo(() => {
-    if (align === "center") return "center";
-    if (align === "right") return "flex-end";
-    return "flex-start";
+  const alignClass = useMemo(() => {
+    if (align === "left") return "alignLeft";
+    if (align === "right") return "alignRight";
+    if (align === "center") return "alignCenter";
+    return "alignCenter";
   }, [align]);
 
   return (
-    <NodeViewWrapper
-      style={{
-        position: "relative",
-        display: "flex",
-        justifyContent: flexJustifyContent,
-      }}
-    >
+    <NodeViewWrapper>
       <video
         preload="metadata"
         width={width}
         controls
         src={getFileUrl(src)}
-        className={selected ? "ProseMirror-selectednode" : ""}
+        className={clsx(selected ? "ProseMirror-selectednode" : "", alignClass)}
       />
     </NodeViewWrapper>
   );

apps/client/src/features/editor/full-editor.tsx

@@ -2,6 +2,9 @@ import classes from "@/features/editor/styles/editor.module.css";
 import React from "react";
 import { TitleEditor } from "@/features/editor/title-editor";
 import PageEditor from "@/features/editor/page-editor";
+import { Container } from "@mantine/core";
+import { useAtom } from "jotai";
+import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
 
 const MemoizedTitleEditor = React.memo(TitleEditor);
 const MemoizedPageEditor = React.memo(PageEditor);
@@ -21,8 +24,16 @@ export function FullEditor({
   spaceSlug,
   editable,
 }: FullEditorProps) {
+  const [user] = useAtom(userAtom);
+  const fullPageWidth = user.settings?.preferences?.fullPageWidth;
+
   return (
-    <div className={classes.editor}>
+    <Container
+      fluid={fullPageWidth}
+      {...(fullPageWidth && { mx: 80 })}
+      size={850}
+      className={classes.editor}
+    >
       <MemoizedTitleEditor
         pageId={pageId}
         slugId={slugId}
@@ -31,6 +42,6 @@ export function FullEditor({
         editable={editable}
       />
       <MemoizedPageEditor pageId={pageId} editable={editable} />
-    </div>
+    </Container>
   );
 }

apps/client/src/features/editor/styles/core.css

@@ -9,7 +9,7 @@
   );
   font-size: var(--mantine-font-size-md);
   line-height: var(--mantine-line-height-xl);
-  font-weight: 415;
+  font-weight: 400;
   width: 100%;
 
   > * + * {
@@ -125,6 +125,21 @@
     cursor: ew-resize;
     cursor: col-resize;
   }
+
+  .alignLeft {
+    margin-left: 0;
+    margin-right: auto;
+  }
+
+  .alignRight {
+    margin-right: 0;
+    margin-left: auto;
+  }
+
+  .alignCenter {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 .ProseMirror-icon {
@@ -148,3 +163,4 @@
 .actionIconGroup {
   background: var(--mantine-color-body);
 }
+

apps/client/src/features/editor/styles/editor.module.css

@@ -1,7 +1,11 @@
 .editor {
-    max-width: 800px;
     height: 100%;
     padding: 8px 20px;
     margin: 64px auto;
+
+    @media print {
+        padding: 0;
+        margin: 0;
+    }
 }
 

apps/client/src/features/editor/styles/index.css

@@ -8,5 +8,7 @@
 @import "./youtube.css";
 @import "./media.css";
 @import "./code.css";
+@import "./print.css";
+
 
 

apps/client/src/features/editor/styles/placeholder.css

@@ -4,6 +4,10 @@
   color: #adb5bd;
   pointer-events: none;
   height: 0;
+
+  @media print {
+    display: none;
+  }
 }
 
 .ProseMirror .is-empty::before {
@@ -12,9 +16,17 @@
   color: #adb5bd;
   pointer-events: none;
   height: 0;
+
+  @media print {
+    display: none;
+  }
 }
 
 .ProseMirror table .is-editor-empty:first-child::before,
 .ProseMirror table .is-empty::before {
   content: '';
+
+  @media print {
+    display: none;
+  }
 }

apps/client/src/features/editor/styles/print.css

@@ -0,0 +1,11 @@
+@media print {
+    .mantine-AppShell-header,
+    .mantine-AppShell-navbar,
+    .mantine-AppShell-aside{
+        display: none !important;
+    }
+
+    .mantine-AppShell-main {
+        padding-top: 0 !important;
+    }
+}

apps/client/src/features/editor/styles/youtube.css

@@ -4,7 +4,7 @@
 
         iframe {
             display: block;
-            outline: 0px solid transparent;
+            outline: 0 solid transparent;
             border-radius: var(--mantine-radius-md);
             width: 100%;
         }
@@ -17,5 +17,9 @@
         &.ProseMirror-selectednode {
             background-color: transparent;
         }
+
+        @media print {
+            display: none;
+        }
     }
 }

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

@@ -1,16 +1,19 @@
-import { ActionIcon, Menu, Tooltip } from "@mantine/core";
+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";
@@ -19,7 +22,8 @@ import { getAppUrl } from "@/lib/config.ts";
 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 { boolean } from "zod";
+import { PageWidthToggle } from "@/features/user/components/page-width-pref.tsx";
+import PageExportModal from "@/features/page/components/page-export-modal.tsx";
 
 interface PageHeaderMenuProps {
   readOnly?: boolean;
@@ -56,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 =
@@ -65,6 +71,12 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
     notifications.show({ message: "Link copied" });
   };
 
+  const handlePrint = () => {
+    setTimeout(() => {
+      window.print();
+    }, 250);
+  };
+
   const openHistoryModal = () => {
     setHistoryModalOpen(true);
   };
@@ -74,48 +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.Item
-          leftSection={<IconHistory size={16} stroke={2} />}
-          onClick={openHistoryModal}
-        >
-          Page history
-        </Menu.Item>
+        <Menu.Dropdown>
+          <Menu.Item
+            leftSection={<IconLink size={16} />}
+            onClick={handleCopyLink}
+          >
+            Copy link
+          </Menu.Item>
+          <Menu.Divider />
 
-        {!readOnly && (
-          <>
-            <Menu.Divider />
-            <Menu.Item
-              color={"red"}
-              leftSection={<IconTrash size={16} stroke={2} />}
-              onClick={handleDeletePage}
-            >
-              Delete
-            </Menu.Item>
-          </>
-        )}
-      </Menu.Dropdown>
-    </Menu>
+          <Menu.Item leftSection={<IconArrowsHorizontal size={16} />}>
+            <Group wrap="nowrap">
+              <PageWidthToggle label="Full width" />
+            </Group>
+          </Menu.Item>
+
+          <Menu.Item
+            leftSection={<IconHistory size={16} />}
+            onClick={openHistoryModal}
+          >
+            Page history
+          </Menu.Item>
+
+          <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}
+      />
+    </>
   );
 }

apps/client/src/features/page/components/header/page-header.module.css

@@ -8,4 +8,8 @@
     top: var(--app-shell-header-offset, 0rem);
     inset-inline-start: var(--app-shell-navbar-offset, 0rem);
     inset-inline-end: var(--app-shell-aside-offset, 0rem);
+
+    @media print {
+        display: none;
+    }
 }

apps/client/src/features/page/components/page-export-modal.tsx

@@ -0,0 +1,84 @@
+import { Modal, Button, Group, Text, Select } from "@mantine/core";
+import { exportPage } from "@/features/page/services/page-service.ts";
+import { useState } from "react";
+import * as React from "react";
+import { ExportFormat } from "@/features/page/types/page.types.ts";
+import { notifications } from "@mantine/notifications";
+
+interface PageExportModalProps {
+  pageId: string;
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function PageExportModal({
+  pageId,
+  open,
+  onClose,
+}: PageExportModalProps) {
+  const [format, setFormat] = useState<ExportFormat>(ExportFormat.Markdown);
+
+  const handleExport = async () => {
+    try {
+      await exportPage({ pageId: pageId, format });
+      onClose();
+    } catch (err) {
+      notifications.show({
+        message: "Export failed:" + err.response?.data.message,
+        color: "red",
+      });
+      console.error("export error", err);
+    }
+  };
+
+  const handleChange = (format: ExportFormat) => {
+    setFormat(format);
+  };
+
+  return (
+    <>
+      <Modal
+        opened={open}
+        onClose={onClose}
+        size="350"
+        centered
+        withCloseButton={false}
+      >
+        <Group justify="space-between" wrap="nowrap">
+          <div>
+            <Text size="md">Export format</Text>
+          </div>
+          <ExportFormatSelection onChange={handleChange} />
+        </Group>
+
+        <Group justify="flex-start" mt="md">
+          <Button onClick={onClose} variant="default">
+            Cancel
+          </Button>
+          <Button onClick={handleExport}>Export</Button>
+        </Group>
+      </Modal>
+    </>
+  );
+}
+
+interface ExportFormatSelection {
+  onChange: (value: string) => void;
+}
+function ExportFormatSelection({ onChange }: ExportFormatSelection) {
+  return (
+    <Select
+      data={[
+        { value: "markdown", label: "Markdown" },
+        { value: "html", label: "HTML" },
+      ]}
+      defaultValue={ExportFormat.Markdown}
+      onChange={onChange}
+      styles={{ wrapper: { maxWidth: 120 } }}
+      comboboxProps={{ width: "120" }}
+      allowDeselect={false}
+      withCheckIcon={false}
+      aria-label="Select export format"
+    />
+  );
+}

apps/client/src/features/page/services/page-service.ts

@@ -1,11 +1,13 @@
 import api from "@/lib/api-client";
 import {
+  IExportPageParams,
   IMovePage,
   IPage,
   IPageInput,
   SidebarPagesParams,
 } from "@/features/page/types/page.types";
 import { IAttachment, IPagination } from "@/lib/types.ts";
+import { saveAs } from "file-saver";
 
 export async function createPage(data: Partial<IPage>): Promise<IPage> {
   const req = await api.post<IPage>("/pages/create", data);
@@ -53,18 +55,28 @@ export async function getRecentChanges(
   return req.data;
 }
 
+export async function exportPage(data: IExportPageParams): Promise<void> {
+  const req = await api.post("/pages/export", data, {
+    responseType: "blob",
+  });
+
+  const fileName = req?.headers["content-disposition"]
+    .split("filename=")[1]
+    .replace(/"/g, "");
+
+  saveAs(req.data, fileName);
+}
+
 export async function uploadFile(file: File, pageId: string) {
   const formData = new FormData();
   formData.append("pageId", pageId);
   formData.append("file", file);
 
-  // should be file endpoint
   const req = await api.post<IAttachment>("/files/upload", formData, {
     headers: {
       "Content-Type": "multipart/form-data",
     },
   });
-  // console.log("req", req);
 
   return req;
 }

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -88,6 +88,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
     if (pagesData?.pages && !hasNextPage) {
       const allItems = pagesData.pages.flatMap((page) => page.items);
       const treeData = buildTree(allItems);
+
       if (data.length < 1 || data?.[0].spaceId !== spaceId) {
         //Thoughts
         // don't reset if there is data in state
@@ -106,7 +107,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
     const fetchData = async () => {
       if (isDataLoaded.current && currentPage) {
         // check if pageId node is present in the tree
-        const node = dfs(treeApiRef.current.root, currentPage.id);
+        const node = dfs(treeApiRef.current?.root, currentPage.id);
         if (node) {
           // if node is found, no need to traverse its ancestors
           return;

apps/client/src/features/page/tree/hooks/use-tree-mutation.ts

@@ -52,6 +52,8 @@ export function useTreeMutation<T>(spaceId: string) {
       slugId: createdPage.slugId,
       name: "",
       position: createdPage.position,
+      spaceId: createdPage.spaceId,
+      parentPageId: createdPage.parentPageId,
       children: [],
     } as any;
 

apps/client/src/features/page/types/page.types.ts

@@ -44,3 +44,13 @@ export interface IPageInput {
   coverPhoto: string;
   position: string;
 }
+
+export interface IExportPageParams {
+  pageId: string;
+  format: ExportFormat;
+}
+
+export enum ExportFormat {
+  HTML = "html",
+  Markdown = "markdown",
+}

apps/client/src/features/search/search-spotlight.tsx

@@ -1,17 +1,10 @@
 import { Group, Center, Text } from "@mantine/core";
 import { Spotlight } from "@mantine/spotlight";
-import {
-  IconFileDescription,
-  IconHome,
-  IconSearch,
-  IconSettings,
-} from "@tabler/icons-react";
+import { IconFileDescription, IconSearch } from "@tabler/icons-react";
 import React, { useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useDebouncedValue } from "@mantine/hooks";
 import { usePageSearchQuery } from "@/features/search/queries/search-query";
-import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
-import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 
 interface SearchSpotlightProps {

apps/client/src/features/user/atoms/current-user-atom.ts

@@ -1,5 +1,16 @@
 import { atomWithStorage } from "jotai/utils";
 
 import { ICurrentUser } from "@/features/user/types/user.types";
+import { focusAtom } from "jotai-optics";
 
-export const currentUserAtom = atomWithStorage<ICurrentUser | null>("currentUser", null);
+export const currentUserAtom = atomWithStorage<ICurrentUser | null>(
+  "currentUser",
+  null,
+);
+
+export const userAtom = focusAtom(currentUserAtom, (optic) =>
+  optic.prop("user"),
+);
+export const workspaceAtom = focusAtom(currentUserAtom, (optic) =>
+  optic.prop("workspace"),
+);

apps/client/src/features/user/components/change-password.tsx

@@ -95,9 +95,11 @@ function ChangePasswordForm({ onClose }: ChangePasswordFormProps) {
         {...form.getInputProps("newPassword")}
       />
 
-      <Button type="submit" disabled={isLoading} loading={isLoading}>
-        Change password
-      </Button>
+      <Group justify="flex-end" mt="md">
+        <Button type="submit" disabled={isLoading} loading={isLoading}>
+          Change password
+        </Button>
+      </Group>
     </form>
   );
 }

apps/client/src/features/user/components/page-width-pref.tsx

@@ -0,0 +1,49 @@
+import { Group, Text, Switch, MantineSize } from "@mantine/core";
+import { useAtom } from "jotai/index";
+import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { updateUser } from "@/features/user/services/user-service.ts";
+import React, { useState } from "react";
+
+export default function PageWidthPref() {
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">Full page width</Text>
+        <Text size="sm" c="dimmed">
+          Choose your preferred page width.
+        </Text>
+      </div>
+
+      <PageWidthToggle />
+    </Group>
+  );
+}
+
+interface PageWidthToggleProps {
+  size?: MantineSize;
+  label?: string;
+}
+export function PageWidthToggle({ size, label }: PageWidthToggleProps) {
+  const [user, setUser] = useAtom(userAtom);
+  const [checked, setChecked] = useState(
+    user.settings?.preferences?.fullPageWidth,
+  );
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    const updatedUser = await updateUser({ fullPageWidth: value });
+    setChecked(value);
+    setUser(updatedUser);
+  };
+
+  return (
+    <Switch
+      size={size}
+      label={label}
+      labelPosition="left"
+      defaultChecked={checked}
+      onChange={handleChange}
+      aria-label="Toggle full page width"
+    />
+  );
+}

apps/client/src/features/user/types/user.types.ts

@@ -7,7 +7,7 @@ export interface IUser {
   emailVerifiedAt: Date;
   avatarUrl: string;
   timezone: string;
-  settings: any;
+  settings: IUserSettings;
   invitedById: string;
   lastLoginAt: string;
   lastActiveAt: Date;
@@ -17,9 +17,16 @@ export interface IUser {
   workspaceId: string;
   deactivatedAt: Date;
   deletedAt: Date;
+  fullPageWidth: boolean; // used for update
 }
 
 export interface ICurrentUser {
   user: IUser;
   workspace: IWorkspace;
 }
+
+export interface IUserSettings {
+  preferences: {
+    fullPageWidth: boolean;
+  };
+}

apps/client/src/lib/api-client.ts

@@ -1,10 +1,10 @@
 import axios, { AxiosInstance } from "axios";
 import Cookies from "js-cookie";
 import Routes from "@/lib/app-route.ts";
-import { getBackendUrl } from "@/lib/config.ts";
 
 const api: AxiosInstance = axios.create({
-  baseURL: getBackendUrl(),
+  baseURL: "/api",
+  withCredentials: true,
 });
 
 api.interceptors.request.use(
@@ -31,6 +31,11 @@ api.interceptors.request.use(
 
 api.interceptors.response.use(
   (response) => {
+    // we need the response headers
+    if (response.request.responseURL.includes("/api/pages/export")) {
+      return response;
+    }
+
     return response.data;
   },
   (error) => {

apps/client/src/lib/config.ts

@@ -7,13 +7,11 @@ declare global {
 export function getAppUrl(): string {
   let appUrl = window.CONFIG?.APP_URL || process.env.APP_URL;
 
-  if (!appUrl) {
-    appUrl = import.meta.env.DEV
-      ? "http://localhost:3000"
-      : window.location.protocol + "//" + window.location.host;
+  if (import.meta.env.DEV) {
+    return appUrl || "http://localhost:3000";
   }
 
-  return appUrl;
+  return `${window.location.protocol}//${window.location.host}`;
 }
 
 export function getBackendUrl(): string {

apps/client/src/lib/types.ts

@@ -22,6 +22,10 @@ export interface IRoleData {
   description: string;
 }
 
+export interface ApiResponse<T> {
+  data: T;
+}
+
 export type IPaginationMeta = {
   limit: number;
   page: number;

apps/client/src/pages/settings/account/account-preferences.tsx

@@ -1,11 +1,15 @@
 import SettingsTitle from "@/components/settings/settings-title.tsx";
 import AccountTheme from "@/features/user/components/account-theme.tsx";
+import PageWidthPref from "@/features/user/components/page-width-pref.tsx";
+import { Divider } from "@mantine/core";
 
 export default function AccountPreferences() {
   return (
     <>
       <SettingsTitle title="Preferences" />
       <AccountTheme />
+      <Divider my={"md"} />
+      <PageWidthPref />
     </>
   );
 }

apps/client/vite.config.ts

@@ -19,5 +19,13 @@ export default defineConfig(({ mode }) => {
         "@": "/src",
       },
     },
+    server: {
+      proxy: {
+        "/api": {
+          target: APP_URL,
+          changeOrigin: true,
+        },
+      },
+    },
   };
 });

apps/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "0.2.0",
+  "version": "0.2.5",
   "description": "",
   "author": "",
   "private": true,
@@ -31,6 +31,7 @@
     "@aws-sdk/client-s3": "^3.600.0",
     "@aws-sdk/s3-request-presigner": "^3.600.0",
     "@casl/ability": "^6.7.1",
+    "@fastify/cookie": "^9.3.1",
     "@fastify/multipart": "^8.3.0",
     "@fastify/static": "^7.0.4",
     "@nestjs/bullmq": "^10.1.1",
@@ -43,6 +44,7 @@
     "@nestjs/passport": "^10.0.3",
     "@nestjs/platform-fastify": "^10.3.9",
     "@nestjs/platform-socket.io": "^10.3.9",
+    "@nestjs/terminus": "^10.2.3",
     "@nestjs/websockets": "^10.3.9",
     "@react-email/components": "0.0.19",
     "@react-email/render": "^0.0.15",

apps/server/src/app.module.ts

@@ -11,6 +11,8 @@ import { MailModule } from './integrations/mail/mail.module';
 import { QueueModule } from './integrations/queue/queue.module';
 import { StaticModule } from './integrations/static/static.module';
 import { EventEmitterModule } from '@nestjs/event-emitter';
+import { HealthModule } from './integrations/health/health.module';
+import { ExportModule } from './integrations/export/export.module';
 
 @Module({
   imports: [
@@ -21,6 +23,8 @@ import { EventEmitterModule } from '@nestjs/event-emitter';
     WsModule,
     QueueModule,
     StaticModule,
+    HealthModule,
+    ExportModule,
     StorageModule.forRootAsync({
       imports: [EnvironmentModule],
     }),

apps/server/src/collaboration/collaboration.util.ts

@@ -60,7 +60,7 @@ export const tiptapExtensions = [
   Callout,
 ] as any;
 
-export function jsonToHtml(tiptapJson: JSONContent) {
+export function jsonToHtml(tiptapJson: any) {
   return generateHTML(tiptapJson, tiptapExtensions);
 }
 

apps/server/src/common/interceptors/http-response.interceptor.ts

@@ -16,7 +16,15 @@ export class TransformHttpResponseInterceptor<T>
   intercept(
     context: ExecutionContext,
     next: CallHandler<T>,
-  ): Observable<Response<T>> {
+  ): Observable<Response<T> | any> {
+    const request = context.switchToHttp().getRequest();
+    const path = request.url;
+
+    // Skip interceptor for the /api/health path
+    if (path === '/api/health') {
+      return next.handle();
+    }
+
     return next.handle().pipe(
       map((data) => {
         const status = context.switchToHttp().getResponse().statusCode;

apps/server/src/core/attachment/attachment.controller.ts

@@ -45,7 +45,6 @@ import {
 import WorkspaceAbilityFactory from '../casl/abilities/workspace-ability.factory';
 import { PageRepo } from '@docmost/db/repos/page/page.repo';
 import { AttachmentRepo } from '@docmost/db/repos/attachment/attachment.repo';
-import { Public } from '../../common/decorators/public.decorator';
 import { validate as isValidUUID } from 'uuid';
 
 @Controller()
@@ -129,12 +128,11 @@ export class AttachmentController {
     }
   }
 
-  @Public()
   @UseGuards(JwtAuthGuard)
   @Get('/files/:fileId/:fileName')
   async getFile(
     @Res() res: FastifyReply,
-    //@AuthUser() user: User,
+    @AuthUser() user: User,
     @AuthWorkspace() workspace: Workspace,
     @Param('fileId') fileId: string,
     @Param('fileName') fileName?: string,
@@ -144,18 +142,29 @@ export class AttachmentController {
     }
 
     const attachment = await this.attachmentRepo.findById(fileId);
-    if (attachment.workspaceId !== workspace.id) {
+    if (
+      !attachment ||
+      attachment.workspaceId !== workspace.id ||
+      !attachment.pageId ||
+      !attachment.spaceId
+    ) {
       throw new NotFoundException();
     }
 
-    if (!attachment || !attachment.pageId) {
-      throw new NotFoundException('File record not found');
+    const spaceAbility = await this.spaceAbility.createForUser(
+      user,
+      attachment.spaceId,
+    );
+
+    if (spaceAbility.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Page)) {
+      throw new ForbiddenException();
     }
 
     try {
       const fileStream = await this.storageService.read(attachment.filePath);
       res.headers({
         'Content-Type': getMimeType(attachment.filePath),
+        'Cache-Control': 'public, max-age=3600',
       });
       return res.send(fileStream);
     } catch (err) {
@@ -268,6 +277,7 @@ export class AttachmentController {
       const fileStream = await this.storageService.read(filePath);
       res.headers({
         'Content-Type': getMimeType(filePath),
+        'Cache-Control': 'public, max-age=86400',
       });
       return res.send(fileStream);
     } catch (err) {

apps/server/src/core/auth/strategies/jwt.strategy.ts

@@ -4,11 +4,12 @@ import {
   UnauthorizedException,
 } from '@nestjs/common';
 import { PassportStrategy } from '@nestjs/passport';
-import { ExtractJwt, Strategy } from 'passport-jwt';
+import { Strategy } from 'passport-jwt';
 import { EnvironmentService } from '../../../integrations/environment/environment.service';
 import { JwtPayload, JwtType } from '../dto/jwt-payload';
 import { WorkspaceRepo } from '@docmost/db/repos/workspace/workspace.repo';
 import { UserRepo } from '@docmost/db/repos/user/user.repo';
+import { FastifyRequest } from 'fastify';
 
 @Injectable()
 export class JwtStrategy extends PassportStrategy(Strategy, 'jwt') {
@@ -18,7 +19,15 @@ export class JwtStrategy extends PassportStrategy(Strategy, 'jwt') {
     private readonly environmentService: EnvironmentService,
   ) {
     super({
-      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
+      jwtFromRequest: (req: FastifyRequest) => {
+        let accessToken = null;
+
+        try {
+          accessToken = JSON.parse(req.cookies?.authTokens)?.accessToken;
+        } catch {}
+
+        return accessToken || this.extractTokenFromHeader(req);
+      },
       ignoreExpiration: false,
       secretOrKey: environmentService.getAppSecret(),
       passReqToCallback: true,
@@ -50,4 +59,9 @@ export class JwtStrategy extends PassportStrategy(Strategy, 'jwt') {
 
     return { user, workspace };
   }
+
+  private extractTokenFromHeader(request: FastifyRequest): string | undefined {
+    const [type, token] = request.headers.authorization?.split(' ') ?? [];
+    return type === 'Bearer' ? token : undefined;
+  }
 }

apps/server/src/core/core.module.ts

@@ -34,7 +34,10 @@ export class CoreModule implements NestModule {
   configure(consumer: MiddlewareConsumer) {
     consumer
       .apply(DomainMiddleware)
-      .exclude({ path: 'auth/setup', method: RequestMethod.POST })
+      .exclude(
+        { path: 'auth/setup', method: RequestMethod.POST },
+        { path: 'health', method: RequestMethod.GET },
+      )
       .forRoutes('*');
   }
 }

apps/server/src/core/user/dto/update-user.dto.ts

@@ -1,6 +1,6 @@
 import { OmitType, PartialType } from '@nestjs/mapped-types';
 import { CreateUserDto } from '../../auth/dto/create-user.dto';
-import { IsOptional, IsString } from 'class-validator';
+import { IsBoolean, IsOptional, IsString } from 'class-validator';
 
 export class UpdateUserDto extends PartialType(
   OmitType(CreateUserDto, ['password'] as const),
@@ -8,4 +8,8 @@ export class UpdateUserDto extends PartialType(
   @IsOptional()
   @IsString()
   avatarUrl: string;
+
+  @IsOptional()
+  @IsBoolean()
+  fullPageWidth: boolean;
 }

apps/server/src/core/user/user.service.ts

@@ -20,10 +20,19 @@ export class UserService {
     workspaceId: string,
   ) {
     const user = await this.userRepo.findById(userId, workspaceId);
+
     if (!user) {
       throw new NotFoundException('User not found');
     }
 
+    // preference update
+    if (typeof updateUserDto.fullPageWidth !== 'undefined') {
+      return this.updateUserPageWidthPreference(
+        userId,
+        updateUserDto.fullPageWidth,
+      );
+    }
+
     if (updateUserDto.name) {
       user.name = updateUserDto.name;
     }
@@ -42,4 +51,12 @@ export class UserService {
     await this.userRepo.updateUser(updateUserDto, userId, workspaceId);
     return user;
   }
+
+  async updateUserPageWidthPreference(userId: string, fullPageWidth: boolean) {
+    return this.userRepo.updatePreference(
+      userId,
+      'fullPageWidth',
+      fullPageWidth,
+    );
+  }
 }

apps/server/src/database/database.module.ts

@@ -36,6 +36,8 @@ types.setTypeParser(types.builtins.INT8, (val) => Number(val));
         dialect: new PostgresDialect({
           pool: new Pool({
             connectionString: environmentService.getDatabaseURL(),
+          }).on('error', (err) => {
+            console.error('Database error:', err.message);
           }),
         }),
         plugins: [new CamelCasePlugin()],
@@ -102,7 +104,7 @@ export class DatabaseModule implements OnModuleDestroy, OnApplicationBootstrap {
   }
 
   async establishConnection() {
-    const retryAttempts = 10;
+    const retryAttempts = 15;
     const retryDelay = 3000;
 
     this.logger.log('Establishing database connection');

apps/server/src/database/migrations/20240707T145623-drop-redundant-pages-slug_id-index.ts

@@ -0,0 +1,7 @@
+import { type Kysely } from 'kysely';
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await db.schema.dropIndex('pages_slug_id_idx').ifExists().execute();
+}
+
+export async function down(db: Kysely<any>): Promise<void> {}

apps/server/src/database/repos/user/user.repo.ts

@@ -6,15 +6,12 @@ import { hashPassword } from '../../../common/helpers';
 import { dbOrTx } from '@docmost/db/utils';
 import {
   InsertableUser,
-  Space,
   UpdatableUser,
   User,
 } from '@docmost/db/types/entity.types';
 import { PaginationOptions } from '../../pagination/pagination-options';
-import {
-  executeWithPagination,
-  PaginationResult,
-} from '@docmost/db/pagination/pagination';
+import { executeWithPagination } from '@docmost/db/pagination/pagination';
+import { sql } from 'kysely';
 
 @Injectable()
 export class UserRepo {
@@ -65,7 +62,7 @@ export class UserRepo {
       .selectFrom('users')
       .select(this.baseFields)
       .$if(includePassword, (qb) => qb.select('password'))
-      .where('email', '=', email)
+      .where(sql`LOWER(email)`, '=', sql`LOWER(${email})`)
       .where('workspaceId', '=', workspaceId)
       .executeTakeFirst();
   }
@@ -157,6 +154,24 @@ export class UserRepo {
     return result;
   }
 
+  async updatePreference(
+    userId: string,
+    prefKey: string,
+    prefValue: string | boolean,
+  ) {
+    return await this.db
+      .updateTable('users')
+      .set({
+        settings: sql`COALESCE(settings, '{}'::jsonb)
+                || jsonb_build_object('preferences', COALESCE(settings->'preferences', '{}'::jsonb) 
+                || jsonb_build_object('${sql.raw(prefKey)}', ${sql.lit(prefValue)}))`,
+        updatedAt: new Date(),
+      })
+      .where('id', '=', userId)
+      .returning(this.baseFields)
+      .executeTakeFirst();
+  }
+
   /*
   async getSpaceIds(
     workspaceId: string,

apps/server/src/integrations/export/dto/export-dto.ts

@@ -0,0 +1,26 @@
+import {
+  IsBoolean,
+  IsIn,
+  IsNotEmpty,
+  IsOptional,
+  IsString,
+} from 'class-validator';
+
+export enum ExportFormat {
+  HTML = 'html',
+  Markdown = 'markdown',
+}
+
+export class ExportPageDto {
+  @IsString()
+  @IsNotEmpty()
+  pageId: string;
+
+  @IsString()
+  @IsIn(['html', 'markdown'])
+  format: ExportFormat;
+
+  @IsOptional()
+  @IsBoolean()
+  includeFiles?: boolean;
+}

apps/server/src/integrations/export/export.controller.ts

@@ -0,0 +1,69 @@
+import {
+  Body,
+  Controller,
+  ForbiddenException,
+  HttpCode,
+  HttpStatus,
+  NotFoundException,
+  Post,
+  Res,
+  UseGuards,
+} from '@nestjs/common';
+import { ExportService } from './export.service';
+import { ExportPageDto } from './dto/export-dto';
+import { AuthUser } from '../../common/decorators/auth-user.decorator';
+import { User } from '@docmost/db/types/entity.types';
+import SpaceAbilityFactory from '../../core/casl/abilities/space-ability.factory';
+import { JwtAuthGuard } from '../../common/guards/jwt-auth.guard';
+import { PageRepo } from '@docmost/db/repos/page/page.repo';
+import {
+  SpaceCaslAction,
+  SpaceCaslSubject,
+} from '../../core/casl/interfaces/space-ability.type';
+import { FastifyReply } from 'fastify';
+import { sanitize } from 'sanitize-filename-ts';
+import { getExportExtension } from './utils';
+import { getMimeType } from '../../common/helpers';
+
+@Controller()
+export class ImportController {
+  constructor(
+    private readonly importService: ExportService,
+    private readonly pageRepo: PageRepo,
+    private readonly spaceAbility: SpaceAbilityFactory,
+  ) {}
+
+  @UseGuards(JwtAuthGuard)
+  @HttpCode(HttpStatus.OK)
+  @Post('pages/export')
+  async exportPage(
+    @Body() dto: ExportPageDto,
+    @AuthUser() user: User,
+    @Res() res: FastifyReply,
+  ) {
+    const page = await this.pageRepo.findById(dto.pageId, {
+      includeContent: true,
+    });
+
+    if (!page) {
+      throw new NotFoundException('Page not found');
+    }
+
+    const ability = await this.spaceAbility.createForUser(user, page.spaceId);
+    if (ability.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Page)) {
+      throw new ForbiddenException();
+    }
+
+    const rawContent = await this.importService.exportPage(dto.format, page);
+
+    const fileExt = getExportExtension(dto.format);
+    const fileName = sanitize(page.title || 'Untitled') + fileExt;
+
+    res.headers({
+      'Content-Type': getMimeType(fileExt),
+      'Content-Disposition': 'attachment; filename="' + fileName + '"',
+    });
+
+    res.send(rawContent);
+  }
+}

apps/server/src/integrations/export/export.module.ts

@@ -0,0 +1,9 @@
+import { Module } from '@nestjs/common';
+import { ExportService } from './export.service';
+import { ImportController } from './export.controller';
+
+@Module({
+  providers: [ExportService],
+  controllers: [ImportController],
+})
+export class ExportModule {}

apps/server/src/integrations/export/export.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@nestjs/common';
+import { jsonToHtml } from '../../collaboration/collaboration.util';
+import { turndown } from './turndown-utils';
+import { ExportFormat } from './dto/export-dto';
+import { Page } from '@docmost/db/types/entity.types';
+
+@Injectable()
+export class ExportService {
+  async exportPage(format: string, page: Page) {
+    const titleNode = {
+      type: 'heading',
+      attrs: { level: 1 },
+      content: [{ type: 'text', text: page.title }],
+    };
+
+    let prosemirrorJson: any = page.content || { type: 'doc', content: [] };
+
+    if (page.title) {
+      prosemirrorJson.content.unshift(titleNode);
+    }
+
+    const pageHtml = jsonToHtml(prosemirrorJson);
+
+    if (format === ExportFormat.HTML) {
+      return `<!DOCTYPE html><html><head><title>${page.title}</title></head><body>${pageHtml}</body></html>`;
+    }
+
+    if (format === ExportFormat.Markdown) {
+      return turndown(pageHtml);
+    }
+
+    return;
+  }
+}

apps/server/src/integrations/export/turndown-utils.ts

@@ -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    ')}  `;
+    },
+  });
+}

apps/server/src/integrations/export/utils.ts

@@ -0,0 +1,12 @@
+import { ExportFormat } from './dto/export-dto';
+
+export function getExportExtension(format: string) {
+  if (format === ExportFormat.HTML) {
+    return '.html';
+  }
+
+  if (format === ExportFormat.Markdown) {
+    return '.md';
+  }
+  return;
+}

apps/server/src/integrations/health/health.controller.ts

@@ -0,0 +1,22 @@
+import { Controller, Get } from '@nestjs/common';
+import { HealthCheck, HealthCheckService } from '@nestjs/terminus';
+import { PostgresHealthIndicator } from './postgres.health';
+import { RedisHealthIndicator } from './redis.health';
+
+@Controller('health')
+export class HealthController {
+  constructor(
+    private health: HealthCheckService,
+    private postgres: PostgresHealthIndicator,
+    private redis: RedisHealthIndicator,
+  ) {}
+
+  @Get()
+  @HealthCheck()
+  async check() {
+    return this.health.check([
+      () => this.postgres.pingCheck('database'),
+      () => this.redis.pingCheck('redis'),
+    ]);
+  }
+}

apps/server/src/integrations/health/health.module.ts

@@ -0,0 +1,13 @@
+import { Global, Module } from '@nestjs/common';
+import { HealthController } from './health.controller';
+import { TerminusModule } from '@nestjs/terminus';
+import { PostgresHealthIndicator } from './postgres.health';
+import { RedisHealthIndicator } from './redis.health';
+
+@Global()
+@Module({
+  controllers: [HealthController],
+  providers: [PostgresHealthIndicator, RedisHealthIndicator],
+  imports: [TerminusModule],
+})
+export class HealthModule {}

apps/server/src/integrations/health/postgres.health.ts

@@ -0,0 +1,31 @@
+import { InjectKysely } from 'nestjs-kysely';
+import {
+  HealthCheckError,
+  HealthIndicator,
+  HealthIndicatorResult,
+} from '@nestjs/terminus';
+import { Injectable, Logger } from '@nestjs/common';
+import { sql } from 'kysely';
+import { KyselyDB } from '@docmost/db/types/kysely.types';
+
+@Injectable()
+export class PostgresHealthIndicator extends HealthIndicator {
+  private readonly logger = new Logger(PostgresHealthIndicator.name);
+
+  constructor(@InjectKysely() private readonly db: KyselyDB) {
+    super();
+  }
+
+  async pingCheck(key: string): Promise<HealthIndicatorResult> {
+    try {
+      await sql`SELECT 1=1`.execute(this.db);
+      return this.getStatus(key, true);
+    } catch (e) {
+      this.logger.error(JSON.stringify(e));
+      throw new HealthCheckError(
+        `${key} is not available`,
+        this.getStatus(key, false),
+      );
+    }
+  }
+}

apps/server/src/integrations/health/redis.health.ts

@@ -0,0 +1,34 @@
+import {
+  HealthCheckError,
+  HealthIndicator,
+  HealthIndicatorResult,
+} from '@nestjs/terminus';
+import { Injectable, Logger } from '@nestjs/common';
+import { EnvironmentService } from '../environment/environment.service';
+import { Redis } from 'ioredis';
+
+@Injectable()
+export class RedisHealthIndicator extends HealthIndicator {
+  private readonly logger = new Logger(RedisHealthIndicator.name);
+
+  constructor(private environmentService: EnvironmentService) {
+    super();
+  }
+
+  async pingCheck(key: string): Promise<HealthIndicatorResult> {
+    try {
+      const redis = new Redis(this.environmentService.getRedisUrl(), {
+        maxRetriesPerRequest: 15,
+      });
+
+      await redis.ping();
+      return this.getStatus(key, true);
+    } catch (e) {
+      this.logger.error(e);
+      throw new HealthCheckError(
+        `${key} is not available`,
+        this.getStatus(key, false),
+      );
+    }
+  }
+}

apps/server/src/integrations/storage/drivers/s3.driver.ts

@@ -34,9 +34,6 @@ export class S3Driver implements StorageDriver {
       });
 
       await this.s3Client.send(command);
-      // we can get the path from location
-
-      console.log(`File uploaded successfully: ${filePath}`);
     } catch (err) {
       throw new Error(`Failed to upload file: ${(err as Error).message}`);
     }

apps/server/src/integrations/storage/providers/storage.provider.ts

@@ -41,20 +41,34 @@ export const storageDriverConfigProvider = {
         };
 
       case StorageOption.S3:
-        return {
+        const s3Config = {
           driver,
           config: {
             region: environmentService.getAwsS3Region(),
             endpoint: environmentService.getAwsS3Endpoint(),
             bucket: environmentService.getAwsS3Bucket(),
             baseUrl: environmentService.getAwsS3Url(),
-            credentials: {
-              accessKeyId: environmentService.getAwsS3AccessKeyId(),
-              secretAccessKey: environmentService.getAwsS3SecretAccessKey(),
-            },
+            credentials: undefined,
           },
         };
 
+        /**
+         * This makes use of AWS_S3_ACCESS_KEY_ID and AWS_S3_SECRET_ACCESS_KEY if present,
+         * If not present, it makes it lenient for the AWS SDK to use
+         * AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY if they are present in the environment
+         */
+        if (
+          environmentService.getAwsS3AccessKeyId() ||
+          environmentService.getAwsS3SecretAccessKey()
+        ) {
+          s3Config.config.credentials = {
+            accessKeyId: environmentService.getAwsS3AccessKeyId(),
+            secretAccessKey: environmentService.getAwsS3SecretAccessKey(),
+          };
+        }
+
+        return s3Config;
+
       default:
         throw new Error(`Unknown storage driver: ${driver}`);
     }

apps/server/src/integrations/storage/storage.service.ts

@@ -1,15 +1,17 @@
-import { Inject, Injectable } from '@nestjs/common';
+import { Inject, Injectable, Logger } from '@nestjs/common';
 import { STORAGE_DRIVER_TOKEN } from './constants/storage.constants';
 import { StorageDriver } from './interfaces';
 
 @Injectable()
 export class StorageService {
+  private readonly logger = new Logger(StorageService.name);
   constructor(
     @Inject(STORAGE_DRIVER_TOKEN) private storageDriver: StorageDriver,
   ) {}
 
   async upload(filePath: string, fileContent: Buffer | any) {
     await this.storageDriver.upload(filePath, fileContent);
+    this.logger.debug(`File uploaded successfully. Path: ${filePath}`);
   }
 
   async read(filePath: string): Promise<Buffer> {

apps/server/src/main.ts

@@ -9,6 +9,7 @@ import { TransformHttpResponseInterceptor } from './common/interceptors/http-res
 import fastifyMultipart from '@fastify/multipart';
 import { WsRedisIoAdapter } from './ws/adapter/ws-redis.adapter';
 import { InternalLogFilter } from './common/logger/internal-log-filter';
+import fastifyCookie from '@fastify/cookie';
 
 async function bootstrap() {
   const app = await NestFactory.create<NestFastifyApplication>(
@@ -31,6 +32,7 @@ async function bootstrap() {
   app.useWebSocketAdapter(redisIoAdapter);
 
   await app.register(fastifyMultipart as any);
+  await app.register(fastifyCookie as any);
 
   app
     .getHttpAdapter()
@@ -38,7 +40,8 @@ async function bootstrap() {
     .addHook('preHandler', function (req, reply, done) {
       if (
         req.originalUrl.startsWith('/api') &&
-        !req.originalUrl.startsWith('/api/auth/setup')
+        !req.originalUrl.startsWith('/api/auth/setup') &&
+        !req.originalUrl.startsWith('/api/health')
       ) {
         if (!req.raw?.['workspaceId']) {
           throw new NotFoundException('Workspace not found');
@@ -56,6 +59,7 @@ async function bootstrap() {
       transform: true,
     }),
   );
+
   app.enableCors();
 
   app.useGlobalInterceptors(new TransformHttpResponseInterceptor());

package.json

@@ -1,7 +1,7 @@
 {
   "name": "docmost",
   "homepage": "https://docmost.com",
-  "version": "0.2.0",
+  "version": "0.2.5",
   "private": true,
   "scripts": {
     "build": "nx run-many -t build",
@@ -12,14 +12,17 @@
     "client:dev": "nx run client:dev",
     "server:dev": "nx run server:start:dev",
     "server:start": "nx run server:start:prod",
-    "email:dev": "nx run @docmost/transactional:dev"
+    "email:dev": "nx run @docmost/transactional:dev",
+    "dev": "pnpm concurrently -n \"frontend,backend\" -c \"cyan,green\" \"pnpm run client:dev\" \"pnpm run server:dev\""
   },
   "dependencies": {
     "@docmost/editor-ext": "workspace:*",
-    "@hocuspocus/extension-redis": "^2.13.2",
-    "@hocuspocus/provider": "^2.13.2",
-    "@hocuspocus/server": "^2.13.2",
-    "@hocuspocus/transformer": "^2.13.2",
+    "@hocuspocus/extension-redis": "^2.13.5",
+    "@hocuspocus/provider": "^2.13.5",
+    "@hocuspocus/server": "^2.13.5",
+    "@hocuspocus/transformer": "^2.13.5",
+    "@joplin/turndown": "^4.0.74",
+    "@joplin/turndown-plugin-gfm": "^1.0.56",
     "@sindresorhus/slugify": "^2.2.1",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-code-block": "^2.4.0",
@@ -65,6 +68,7 @@
   "devDependencies": {
     "@nx/js": "19.3.2",
     "@types/uuid": "^10.0.0",
+    "concurrently": "^8.2.2",
     "nx": "19.3.2",
     "tsx": "^4.15.7"
   },

packages/editor-ext/src/lib/image/image.ts

@@ -57,9 +57,9 @@ export const TiptapImage = Image.extend<ImageOptions>({
       },
       width: {
         default: "100%",
-        parseHTML: (element) => element.getAttribute("data-width"),
+        parseHTML: (element) => element.getAttribute("width"),
         renderHTML: (attributes: ImageAttributes) => ({
-          "data-width": attributes.width,
+          width: attributes.width,
         }),
       },
       align: {

packages/editor-ext/src/lib/math/math-block.ts

@@ -56,7 +56,7 @@ export const MathBlock = Node.create({
     return [
       "div",
       {},
-      ["div", { "data-katex": true }, `$${HTMLAttributes.text}$`],
+      ["div", { "data-katex": true }, `$$${HTMLAttributes.text}$$`],
     ];
   },
 
@@ -64,10 +64,6 @@ export const MathBlock = Node.create({
     return ReactNodeViewRenderer(this.options.view);
   },
 
-  renderText({ node }) {
-    return node.attrs.text;
-  },
-
   addCommands() {
     return {
       setMathBlock:

packages/editor-ext/src/lib/math/math-inline.ts

@@ -54,15 +54,7 @@ export const MathInline = Node.create<MathInlineOption>({
   },
 
   renderHTML({ HTMLAttributes }) {
-    return [
-      "div",
-      {},
-      ["span", { "data-katex": true }, `$${HTMLAttributes.text}$`],
-    ];
-  },
-
-  renderText({ node }) {
-    return node.attrs.text;
+    return ["span", { "data-katex": true }, `$${HTMLAttributes.text}$` || {}];
   },
 
   addNodeView() {

packages/editor-ext/src/lib/video/video.ts

@@ -62,9 +62,9 @@ export const TiptapVideo = Node.create<VideoOptions>({
       },
       width: {
         default: "100%",
-        parseHTML: (element) => element.getAttribute("data-width"),
+        parseHTML: (element) => element.getAttribute("width"),
         renderHTML: (attributes: VideoAttributes) => ({
-          "data-width": attributes.width,
+          width: attributes.width,
         }),
       },
       size: {