update README

v0.3.1
fix collaboration websocket
2025-11-25 05:51:09 +10:00 · 2024-09-04 18:56:14 +01:00 · 2024-09-03 10:49:38 +01:00 · 2024-09-03 10:48:47 +01:00 · 2024-09-02 16:39:07 +01:00 · 2024-09-02 15:56:24 +01:00
143 changed files with 7248 additions and 4529 deletions
--- a/.env.example
+++ b/.env.example
@ -19,6 +19,7 @@ AWS_S3_SECRET_ACCESS_KEY=
 AWS_S3_REGION=
 AWS_S3_BUCKET=
 AWS_S3_ENDPOINT=
+AWS_S3_FORCE_PATH_STYLE=

 # options: smtp | postmark
 MAIL_DRIVER=smtp
@ -30,6 +31,7 @@ SMTP_HOST=127.0.0.1
 SMTP_PORT=587
 SMTP_USERNAME=
 SMTP_PASSWORD=
+SMTP_SECURE=false

 # Postmark driver config
 POSTMARK_TOKEN=
--- a/1
+++ b/1
@ -1,4 +1,5 @@
 FROM node:21-alpine AS base
+LABEL org.opencontainers.image.source="https://github.com/docmost/docmost"

 FROM base AS builder

--- a/README.md
+++ b/README.md
@ -17,6 +17,7 @@ To get started with Docmost, please refer to our [documentation](https://docmost

 ## Features
 - Real-time collaboration
+- Diagrams (Draw.io, Excalidraw and Mermaid)
 - Spaces
 - Permissions management
 - Groups
@ -32,4 +33,4 @@ To get started with Docmost, please refer to our [documentation](https://docmost
 </p>

 ### Contributing 
-See the [development doc](https://docmost.com/docs/self-hosting/development)
+See the [development documentation](https://docmost.com/docs/self-hosting/development)
--- a/apps/client/package.json
+++ b/apps/client/package.json
@ -1,7 +1,7 @@
 {
  "name": "client",
  "private": true,
-  "version": "0.2.1",
+  "version": "0.3.1",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
@ -13,55 +13,61 @@
    "@casl/react": "^4.0.0",
    "@emoji-mart/data": "^1.2.1",
    "@emoji-mart/react": "^1.1.1",
-    "@mantine/core": "^7.11.0",
-    "@mantine/form": "^7.11.0",
-    "@mantine/hooks": "^7.11.0",
-    "@mantine/modals": "^7.11.0",
-    "@mantine/notifications": "^7.11.0",
-    "@mantine/spotlight": "^7.11.0",
-    "@tabler/icons-react": "^3.7.0",
-    "@tanstack/react-query": "^5.48.0",
-    "@tiptap/extension-code-block-lowlight": "^2.4.0",
-    "axios": "^1.7.2",
+    "@excalidraw/excalidraw": "^0.17.6",
+    "@mantine/core": "^7.12.2",
+    "@mantine/form": "^7.12.2",
+    "@mantine/hooks": "^7.12.2",
+    "@mantine/modals": "^7.12.2",
+    "@mantine/notifications": "^7.12.2",
+    "@mantine/spotlight": "^7.12.2",
+    "@tabler/icons-react": "^3.14.0",
+    "@tanstack/react-query": "^5.53.2",
+    "axios": "^1.7.7",
    "clsx": "^2.1.1",
    "date-fns": "^3.6.0",
    "emoji-mart": "^5.6.0",
-    "jotai": "^2.8.3",
+    "file-saver": "^2.0.5",
+    "jotai": "^2.9.3",
    "jotai-optics": "^0.4.0",
    "js-cookie": "^3.0.5",
    "jwt-decode": "^4.0.0",
-    "katex": "^0.16.10",
+    "katex": "^0.16.11",
    "lowlight": "^3.1.0",
+    "mermaid": "^11.0.2",
    "react": "^18.3.1",
    "react-arborist": "^3.4.0",
+    "react-clear-modal": "^2.0.9",
    "react-dom": "^18.3.1",
+    "react-drawio": "^0.2.0",
    "react-error-boundary": "^4.0.13",
    "react-helmet-async": "^2.0.5",
    "react-moveable": "^0.56.0",
-    "react-router-dom": "^6.24.0",
+    "react-router-dom": "^6.26.1",
    "socket.io-client": "^4.7.5",
    "tippy.js": "^6.3.7",
+    "tiptap-extension-global-drag-handle": "^0.1.12",
    "zod": "^3.23.8"
  },
  "devDependencies": {
-    "@tanstack/eslint-plugin-query": "^5.47.0",
+    "@tanstack/eslint-plugin-query": "^5.53.0",
+    "@types/file-saver": "^2.0.7",
    "@types/js-cookie": "^3.0.6",
    "@types/katex": "^0.16.7",
-    "@types/node": "20.14.9",
-    "@types/react": "^18.3.3",
+    "@types/node": "22.5.2",
+    "@types/react": "^18.3.5",
    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
    "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^9.5.0",
+    "eslint": "^9.9.1",
    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-react-refresh": "^0.4.11",
    "optics-ts": "^2.4.1",
-    "postcss": "^8.4.38",
-    "postcss-preset-mantine": "^1.15.0",
+    "postcss": "^8.4.43",
+    "postcss-preset-mantine": "^1.17.0",
    "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.3.2",
-    "typescript": "^5.5.2",
-    "vite": "^5.3.1"
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.2"
  }
 }
--- a/apps/client/src/components/common/recent-changes.tsx
+++ b/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
--- a/apps/client/src/components/icons/icon-drawio.tsx
+++ b/apps/client/src/components/icons/icon-drawio.tsx
@ -0,0 +1,20 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+function IconDrawio({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="#F08705"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path d="M19.69 13.419h-2.527l-2.667-4.555a1.292 1.292 0 001.035-1.28V4.16c0-.725-.576-1.312-1.302-1.312H9.771c-.726 0-1.312.576-1.312 1.301v3.435c0 .619.426 1.152 1.034 1.28l-2.666 4.555H4.309c-.725 0-1.312.576-1.312 1.301v3.435c0 .725.576 1.312 1.302 1.312h4.458c.726 0 1.312-.576 1.312-1.302v-3.434c0-.726-.576-1.312-1.301-1.312h-.437l2.645-4.523h2.059l2.656 4.523h-.438c-.725 0-1.312.576-1.312 1.301v3.435c0 .725.576 1.312 1.302 1.312H19.7c.726 0 1.312-.576 1.312-1.302v-3.434c0-.726-.576-1.312-1.301-1.312zM24 22.976c0 .565-.459 1.024-1.013 1.024H1.024A1.022 1.022 0 010 22.987V1.024C0 .459.459 0 1.013 0h21.963C23.541 0 24 .459 24 1.013z"></path>
+    </svg>
+  );
+}
+
+export default IconDrawio;
--- a/apps/client/src/components/icons/icon-excalidraw.tsx
+++ b/apps/client/src/components/icons/icon-excalidraw.tsx
@ -0,0 +1,20 @@
+import { rem } from "@mantine/core";
+
+interface Props {
+  size?: number | string;
+}
+
+function IconExcalidraw({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#6965DB"
+      viewBox="0 0 24 24"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path d="M23.943 19.806a.196.196 0 00-.168-.034c-1.26-1.855-2.873-3.61-4.419-5.315l-.252-.284c-.001-.073-.067-.12-.134-.15l-.084-.084c-.05-.1-.169-.167-.286-.1-.47.234-.907.585-1.327.919-.554.434-1.109.87-1.63 1.354a5.058 5.058 0 00-.588.618c-.084.117-.017.217.084.267-.37.368-.74.736-1.109 1.12a.19.19 0 00-.05.134c0 .05.033.1.067.117l.655.502v.016c.924.92 2.554 2.173 4.285 3.527.251.201.52.402.773.602.117.134.234.285.335.418.05.066.169.084.236.033.033.034.084.067.118.1a.24.24 0 00.1.034.153.153 0 00.135-.066.237.237 0 00.033-.1c.017 0 .017.016.034.016a.192.192 0 00.134-.05l3.058-3.327c.12-.116.014-.267 0-.267zm-7.628-.134l-1.546-1.17-.15-.1c-.035-.017-.068-.05-.102-.067l-.117-.1c.66-.66 1.33-1.308 2-1.956-.488.484-1.463 1.906-1.261 2.373.002 0 .018.042.067.084l1.11.936zm4.1 3.126l-1.277-.97a26.906 26.906 0 00-1.58-1.504c.69.518 1.277.97 1.361 1.053.673.585.638.485 1.093.87l.554.4c-.074.103-.151.148-.151.151zm.336.25l-.034-.016a.913.913 0 00.152-.117zM.587 3.476c.034.217.085.435.118.636.201 1.103.403 2.106.772 2.858l.152.568c.05.217.134.485.219.552a66.769 66.769 0 003.578 2.942.177.177 0 00.219 0s0 .016.016.016a.153.153 0 00.118.05.191.191 0 00.134-.05c1.798-1.989 3.142-3.627 4.1-4.998.068-.066.084-.167.084-.25.067-.067.118-.151.185-.201.067-.067.067-.184 0-.235l-.017-.016c0-.033-.017-.084-.05-.1-.42-.401-.722-.685-1.042-.986a93.555 93.555 0 01-2.352-2.273c-.017-.017-.034-.034-.067-.034-.336-.117-1.025-.234-1.882-.385-1.277-.216-3.008-.517-4.57-.986 0 0-.101 0-.118.017l-.05.05C.05.714.022.707 0 .718c.017.1.017.167.05.284 0 .033.068.301.068.334zm7.191 4.78l-.033.034a.036.036 0 01.033-.034zM6.553 2.238c.101.1.521.502.622.585-.437-.2-1.529-.702-2.034-.869.505.1 1.194.201 1.412.284zM.79 1.403c.252.434.454 1.939.655 3.41-.118-.469-.201-.936-.302-1.372C.992 2.673.84 1.988.638 1.386c.124 0 .152.021.152.017zm-.286-.369c0-.016 0-.033-.017-.033.085 0 .135.017.202.05 0 .006-.145-.017-.185-.017zm23.17-.217c.017-.066-.336-.367-.219-.384.253-.017.253-.401 0-.401-.335.017-.688.1-1.008.15-.587.117-1.192.234-1.78.367a79.696 79.696 0 00-3.949.937c-.403.117-.857.2-1.243.401-.135.067-.118.2-.05.284-.034.017-.051.017-.085.034-.117.017-.218.034-.335.05-.102.017-.152.1-.135.2 0 .017.017.05.017.067-.706.936-1.496 1.923-2.353 2.976-.84.969-1.73 1.989-2.62 3.042-2.84 3.31-6.05 7.07-9.594 10.38a.161.161 0 000 .234c.016.016.033.033.05.033-.05.05-.101.085-.152.134-.033.034-.05.067-.05.1a.364.364 0 00-.067.084c-.067.067-.067.184.017.234.067.066.185.066.235-.017.017-.017.017-.033.033-.033a.265.265 0 01.37 0c.202.217.404.435.588.618l-.42-.35c-.067-.067-.184-.05-.234.016-.068.066-.051.184.016.234l4.469 3.727c.034.034.067.034.118.034a.15.15 0 00.117-.05l.101-.1c.017.016.05.016.067.016.05 0 .084-.016.118-.05 6.049-6.05 10.922-10.614 16.5-14.693.05-.033.067-.1.067-.15.067 0 .118-.05.15-.117 1.026-3.125 1.228-5.9 1.295-7.27 0-.059.016-.038.016-.068.017-.033.017-.05.017-.05a.978.978 0 00-.067-.619zm-10.82 4.915c.268-.301.537-.619.806-.903-1.73 2.273-4.603 5.766-8.67 9.929 2.773-3.059 5.562-6.218 7.864-9.026zM5.14 23.466c-.016-.017-.016-.017 0-.017zm2.504-2.156c.135-.15.27-.284.42-.434 0 0 0 .016.017.016-.224.198-.433.418-.437.418zm.69-.668c.099-.1.14-.173.284-.318.992-1.02 2.017-2.04 3.059-3.076l.016-.016c.252-.2.555-.418.824-.619a228.063 228.063 0 00-4.184 4.029zM14.852 3.91c-.554.719-1.176 1.671-1.697 2.423-1.646 2.374-6.94 8.174-7.057 8.274a1189.647 1189.647 0 01-4.839 4.597l-.1.1c-.085-.1-.085-.25.016-.334C8.652 11.966 13.19 6.133 15.021 3.576c-.05.116-.084.216-.168.334zm2.906 3.427c-.671-.386-.99-.987-.806-1.572l.05-.2a.775.775 0 01.085-.167 1.9 1.9 0 01.756-.703c.016 0 .033 0 .05-.016-.017-.034-.017-.084-.017-.134.017-.1.085-.167.202-.167.202 0 .824.184 1.059.384.067.05.134.117.202.184.084.1.218.268.285.401.034.017.067.184.118.268.033.134.067.284.05.418-.017.016 0 .116-.017.116a1.605 1.605 0 01-.218.619c-.03.03.006.012-.05.067a1.22 1.22 0 01-.32.334 1.49 1.49 0 01-1.26.234 2.191 2.191 0 00-.169-.066zm4.37 1.403c0 .017-.017.05 0 .067-.034 0-.05.017-.085.034a109.886 109.886 0 00-3.915 3.025c1.11-.986 2.218-1.989 3.378-2.975.336-.301.571-.686.638-1.12l.168-1.003v-.033c.085-.201.404-.118.353.1-.004-.001-.173.795-.537 1.905z"></path>
+    </svg>
+  );
+}
+
+export default IconExcalidraw;
--- a/apps/client/src/components/icons/icon-mermaid.tsx
+++ b/apps/client/src/components/icons/icon-mermaid.tsx
@ -0,0 +1,20 @@
+import { rem } from "@mantine/core";
+
+interface Props {
+  size?: number | string;
+}
+
+function IconMermaid({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#FF3670"
+      viewBox="0 0 24 24"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path d="M23.99 2.115A12.223 12.223 0 0012 10.149 12.223 12.223 0 00.01 2.115a12.23 12.23 0 005.32 10.604 6.562 6.562 0 012.845 5.423v3.754h7.65v-3.754a6.561 6.561 0 012.844-5.423 12.223 12.223 0 005.32-10.604z"></path>
+    </svg>
+  );
+}
+
+export default IconMermaid;
--- a/apps/client/src/components/layouts/global/app-header.tsx
+++ b/apps/client/src/components/layouts/global/app-header.tsx
@ -57,6 +57,8 @@ export function AppHeader() {
            size="lg"
            fw={600}
            style={{ cursor: "pointer", userSelect: "none" }}
+            component={Link}
+            to="/home"
          >
            Docmost
          </Text>
--- a/apps/client/src/components/layouts/global/top-menu.tsx
+++ b/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>
--- a/apps/client/src/components/settings/settings-sidebar.tsx
+++ b/apps/client/src/components/settings/settings-sidebar.tsx
@ -93,6 +93,18 @@ export default function SettingsSidebar() {
      </Group>

      <ScrollArea w="100%">{menuItems}</ScrollArea>
+      <div className={classes.version}>
+        <Text
+          className={classes.version}
+          size="sm"
+          c="dimmed"
+          component="a"
+          href="https://github.com/docmost/docmost/releases"
+          target="_blank"
+        >
+          v{APP_VERSION}
+        </Text>
+      </div>
    </div>
  );
 }
--- a/apps/client/src/components/settings/settings.module.css
+++ b/apps/client/src/components/settings/settings.module.css
@ -57,3 +57,8 @@
    display: flex;
    align-items: center;
 }
+
+.version {
+    padding-left: var(--mantine-spacing-xs) ;
+    padding-top: 10px;
+}
--- a/apps/client/src/components/ui/emoji-picker.tsx
+++ b/apps/client/src/components/ui/emoji-picker.tsx
@ -1,13 +1,14 @@
-import React, { ReactNode } from "react";
-import data from "@emoji-mart/data";
-import Picker from "@emoji-mart/react";
+import React, { ReactNode } from 'react';
 import {
  ActionIcon,
  Popover,
  Button,
  useMantineColorScheme,
-} from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { Suspense } from 'react';
+
+const Picker = React.lazy(() => import('@emoji-mart/react'));

 export interface EmojiPickerInterface {
  onEmojiSelect: (emoji: any) => void;
@ -48,23 +49,25 @@ function EmojiPicker({
          {icon}
        </ActionIcon>
      </Popover.Target>
-      <Popover.Dropdown bg="000" style={{ border: "none" }}>
-        <Picker
-          data={data}
-          onEmojiSelect={handleEmojiSelect}
-          perLine={8}
-          skinTonePosition="search"
-          theme={colorScheme}
-        />
+      <Popover.Dropdown bg="000" style={{ border: 'none' }}>
+        <Suspense fallback={null}>
+          <Picker
+            data={async () => (await import('@emoji-mart/data')).default}
+            onEmojiSelect={handleEmojiSelect}
+            perLine={8}
+            skinTonePosition="search"
+            theme={colorScheme}
+          />
+        </Suspense>
        <Button
          variant="default"
          c="gray"
          size="xs"
          style={{
-            position: "absolute",
+            position: 'absolute',
            zIndex: 2,
-            bottom: "1rem",
-            right: "1rem",
+            bottom: '1rem',
+            right: '1rem',
          }}
          onClick={handleRemoveEmoji}
        >
--- a/apps/client/src/components/ui/role-select-menu.tsx
+++ b/apps/client/src/components/ui/role-select-menu.tsx
@ -23,7 +23,7 @@ const RoleButton = forwardRef<HTMLButtonElement, RoleButtonProps>(
  ),
 );

-interface SpaceRoleMenuProps {
+interface RoleMenuProps {
  roles: IRoleData[];
  roleName: string;
  onChange?: (value: string) => void;
@ -35,7 +35,7 @@ export default function RoleSelectMenu({
  roleName,
  onChange,
  disabled,
-}: SpaceRoleMenuProps) {
+}: RoleMenuProps) {
  return (
    <Menu withArrow>
      <Menu.Target>
--- a/apps/client/src/features/auth/atoms/auth-tokens-atom.ts
+++ b/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,
+);
--- a/apps/client/src/features/auth/hooks/use-auth.ts
+++ b/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);
--- a/apps/client/src/features/editor/components/attachment/attachment-view.tsx
+++ b/apps/client/src/features/editor/components/attachment/attachment-view.tsx
@ -0,0 +1,48 @@
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { Group, Text, Paper, ActionIcon } from "@mantine/core";
+import { getFileUrl } from "@/lib/config.ts";
+import { IconDownload, IconPaperclip } from "@tabler/icons-react";
+import { useHover } from "@mantine/hooks";
+import { formatBytes } from "@/lib";
+
+export default function AttachmentView(props: NodeViewProps) {
+  const { node, selected } = props;
+  const { url, name, size } = node.attrs;
+  const { hovered, ref } = useHover();
+
+  return (
+    <NodeViewWrapper>
+      <Paper withBorder p="4px" ref={ref} data-drag-handle>
+        <Group
+          justify="space-between"
+          gap="xl"
+          style={{ cursor: "pointer" }}
+          wrap="nowrap"
+          h={25}
+        >
+          <Group justify="space-between" wrap="nowrap">
+            <IconPaperclip size={20} />
+
+            <Text component="span" size="md" truncate="end">
+              {name}
+            </Text>
+
+            <Text component="span" size="sm" c="dimmed" inline>
+              {formatBytes(size)}
+            </Text>
+          </Group>
+
+          {selected || hovered ? (
+            <a href={getFileUrl(url)} target="_blank">
+              <ActionIcon variant="default" aria-label="download file">
+                <IconDownload size={18} />
+              </ActionIcon>
+            </a>
+          ) : (
+            ""
+          )}
+        </Group>
+      </Paper>
+    </NodeViewWrapper>
+  );
+}
--- a/apps/client/src/features/editor/components/attachment/upload-attachment-action.tsx
+++ b/apps/client/src/features/editor/components/attachment/upload-attachment-action.tsx
@ -0,0 +1,31 @@
+import { handleAttachmentUpload } from "@docmost/editor-ext";
+import { uploadFile } from "@/features/page/services/page-service.ts";
+import { notifications } from "@mantine/notifications";
+
+export const uploadAttachmentAction = handleAttachmentUpload({
+  onUpload: async (file: File, pageId: string): Promise<any> => {
+    try {
+      return await uploadFile(file, pageId);
+    } catch (err) {
+      notifications.show({
+        color: "red",
+        message: err?.response.data.message,
+      });
+      throw err;
+    }
+  },
+  validateFn: (file) => {
+    if (file.type.includes("image/") || file.type.includes("video/")) {
+      return false;
+    }
+    if (file.size / 1024 / 1024 > 50) {
+      notifications.show({
+        color: "red",
+        message: `File exceeds the 50 MB attachment limit`,
+      });
+      return false;
+    }
+
+    return true;
+  },
+});
--- a/apps/client/src/features/editor/components/callout/callout-view.tsx
+++ b/apps/client/src/features/editor/components/callout/callout-view.tsx
@ -1,9 +1,4 @@
-import {
-  Editor,
-  NodeViewContent,
-  NodeViewProps,
-  NodeViewWrapper,
-} from "@tiptap/react";
+import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import {
  IconAlertTriangleFilled,
  IconCircleCheckFilled,
--- a/apps/client/src/features/editor/components/code-block/code-block-view.tsx
+++ b/apps/client/src/features/editor/components/code-block/code-block-view.tsx
@ -0,0 +1,98 @@
+import { NodeViewContent, NodeViewProps, NodeViewWrapper } from '@tiptap/react';
+import { ActionIcon, CopyButton, Group, Select, Tooltip } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { IconCheck, IconCopy } from '@tabler/icons-react';
+//import MermaidView from "@/features/editor/components/code-block/mermaid-view.tsx";
+import classes from './code-block.module.css';
+import React from 'react';
+import { Suspense } from 'react';
+
+const MermaidView = React.lazy(
+  () => import('@/features/editor/components/code-block/mermaid-view.tsx')
+);
+
+export default function CodeBlockView(props: NodeViewProps) {
+  const { node, updateAttributes, extension, editor, getPos } = props;
+  const { language } = node.attrs;
+  const [languageValue, setLanguageValue] = useState<string | null>(
+    language || null
+  );
+  const [isSelected, setIsSelected] = useState(false);
+
+  useEffect(() => {
+    const updateSelection = () => {
+      const { state } = editor;
+      const { from, to } = state.selection;
+      // Check if the selection intersects with the node's range
+      const isNodeSelected =
+        (from >= getPos() && from < getPos() + node.nodeSize) ||
+        (to > getPos() && to <= getPos() + node.nodeSize);
+      setIsSelected(isNodeSelected);
+    };
+
+    editor.on('selectionUpdate', updateSelection);
+    return () => {
+      editor.off('selectionUpdate', updateSelection);
+    };
+  }, [editor, getPos(), node.nodeSize]);
+
+  function changeLanguage(language: string) {
+    setLanguageValue(language);
+    updateAttributes({
+      language: language,
+    });
+  }
+
+  return (
+    <NodeViewWrapper className="codeBlock">
+      <Group justify="flex-end" contentEditable={false}>
+        <Select
+          placeholder="auto"
+          checkIconPosition="right"
+          data={extension.options.lowlight.listLanguages()}
+          value={languageValue}
+          onChange={changeLanguage}
+          searchable
+          style={{ maxWidth: '130px' }}
+          classNames={{ input: classes.selectInput }}
+          disabled={!editor.isEditable}
+        />
+
+        <CopyButton value={node?.textContent} timeout={2000}>
+          {({ copied, copy }) => (
+            <Tooltip
+              label={copied ? 'Copied' : 'Copy'}
+              withArrow
+              position="right"
+            >
+              <ActionIcon
+                color={copied ? 'teal' : 'gray'}
+                variant="subtle"
+                onClick={copy}
+              >
+                {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
+              </ActionIcon>
+            </Tooltip>
+          )}
+        </CopyButton>
+      </Group>
+
+      <pre
+        spellCheck="false"
+        hidden={
+          ((language === 'mermaid' && !editor.isEditable) ||
+            (language === 'mermaid' && !isSelected)) &&
+          node.textContent.length > 0
+        }
+      >
+        <NodeViewContent as="code" className={`language-${language}`} />
+      </pre>
+
+      {language === 'mermaid' && (
+        <Suspense fallback={null}>
+          <MermaidView props={props} />
+        </Suspense>
+      )}
+    </NodeViewWrapper>
+  );
+}
--- a/apps/client/src/features/editor/components/code-block/code-block.module.css
+++ b/apps/client/src/features/editor/components/code-block/code-block.module.css
@ -0,0 +1,18 @@
+.selectInput {
+    height: 25px;
+    min-height: 25px;
+}
+
+.error {
+    color: light-dark(var(--mantine-color-red-8), var(--mantine-color-red-7));
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-gray-8));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mermaid {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
--- a/apps/client/src/features/editor/components/code-block/mermaid-view.tsx
+++ b/apps/client/src/features/editor/components/code-block/mermaid-view.tsx
@ -0,0 +1,50 @@
+import { NodeViewProps } from "@tiptap/react";
+import { useEffect, useState } from "react";
+import mermaid from "mermaid";
+import { v4 as uuidv4 } from "uuid";
+import classes from "./code-block.module.css";
+
+mermaid.initialize({
+  startOnLoad: false,
+  suppressErrorRendering: true,
+});
+
+interface MermaidViewProps {
+  props: NodeViewProps;
+}
+
+export default function MermaidView({ props }: MermaidViewProps) {
+  const { node } = props;
+  const [preview, setPreview] = useState<string>("");
+
+  useEffect(() => {
+    const id = `mermaid-${uuidv4()}`;
+
+    if (node.textContent.length > 0) {
+      mermaid
+        .render(id, node.textContent)
+        .then((item) => {
+          setPreview(item.svg);
+        })
+        .catch((err) => {
+          if (props.editor.isEditable) {
+            setPreview(
+              `<div class="${classes.error}">Mermaid diagram error: ${err}</div>`,
+            );
+          } else {
+            setPreview(
+              `<div class="${classes.error}">Invalid Mermaid Diagram</div>`,
+            );
+          }
+        });
+    }
+  }, [node.textContent]);
+
+  return (
+    <div
+      className={classes.mermaid}
+      contentEditable={false}
+      dangerouslySetInnerHTML={{ __html: preview }}
+    ></div>
+  );
+}
--- a/apps/client/src/features/editor/components/common/file-upload-handler.tsx
+++ b/apps/client/src/features/editor/components/common/file-upload-handler.tsx
@ -1,6 +1,7 @@
 import type { EditorView } from "@tiptap/pm/view";
 import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
 import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
+import { uploadAttachmentAction } from "../attachment/upload-attachment-action";

 export const handleFilePaste = (
  view: EditorView,
@ -15,6 +16,7 @@ export const handleFilePaste = (
    if (file) {
      uploadImageAction(file, view, pos, pageId);
      uploadVideoAction(file, view, pos, pageId);
+      uploadAttachmentAction(file, view, pos, pageId);
    }
    return true;
  }
@ -38,6 +40,7 @@ export const handleFileDrop = (
    if (file) {
      uploadImageAction(file, view, coordinates?.pos ?? 0 - 1, pageId);
      uploadVideoAction(file, view, coordinates?.pos ?? 0 - 1, pageId);
+      uploadAttachmentAction(file, view, coordinates?.pos ?? 0 - 1, pageId);
    }
    return true;
  }
--- a/apps/client/src/features/editor/components/common/node-width-resize.tsx
+++ b/apps/client/src/features/editor/components/common/node-width-resize.tsx
@ -1,28 +1,34 @@
-import React, { memo, useCallback, useState } from "react";
-import { Slider } from "@mantine/core";
+import { memo, useCallback, useEffect, useState } from 'react';
+import { Slider } from '@mantine/core';

 export type ImageWidthProps = {
  onChange: (value: number) => void;
  value: number;
+  width?: string;
 };

-export const NodeWidthResize = memo(({ onChange, value }: ImageWidthProps) => {
+export const NodeWidthResize = memo(({ onChange, value, width }: ImageWidthProps) => {
  const [currentValue, setCurrentValue] = useState(value);

+  useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
+
  const handleChange = useCallback(
    (newValue: number) => {
      onChange(newValue);
    },
-    [onChange],
+    [onChange]
  );

  return (
    <Slider
-      p={"sm"}
+      p={'sm'}
      min={10}
      value={currentValue}
      onChange={setCurrentValue}
      onChangeEnd={handleChange}
+      w={width || 100}
      label={(value) => `${value}%`}
    />
  );
--- a/apps/client/src/features/editor/components/drawio/drawio-menu.tsx
+++ b/apps/client/src/features/editor/components/drawio/drawio-menu.tsx
@ -0,0 +1,82 @@
+import {
+  BubbleMenu as BaseBubbleMenu,
+  findParentNode,
+  posToDOMRect,
+} from '@tiptap/react';
+import { useCallback } from 'react';
+import { sticky } from 'tippy.js';
+import { Node as PMNode } from 'prosemirror-model';
+import {
+  EditorMenuProps,
+  ShouldShowProps,
+} from '@/features/editor/components/table/types/types.ts';
+import { NodeWidthResize } from '@/features/editor/components/common/node-width-resize.tsx';
+
+export function DrawioMenu({ editor }: EditorMenuProps) {
+  const shouldShow = useCallback(
+    ({ state }: ShouldShowProps) => {
+      if (!state) {
+        return false;
+      }
+
+      return editor.isActive('drawio') && editor.getAttributes('drawio')?.src;
+    },
+    [editor]
+  );
+
+  const getReferenceClientRect = useCallback(() => {
+    const { selection } = editor.state;
+    const predicate = (node: PMNode) => node.type.name === 'drawio';
+    const parent = findParentNode(predicate)(selection);
+
+    if (parent) {
+      const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
+      return dom.getBoundingClientRect();
+    }
+
+    return posToDOMRect(editor.view, selection.from, selection.to);
+  }, [editor]);
+
+  const onWidthChange = useCallback(
+    (value: number) => {
+      editor.commands.updateAttributes('drawio', { width: `${value}%` });
+    },
+    [editor]
+  );
+
+  return (
+    <BaseBubbleMenu
+      editor={editor}
+      pluginKey={`drawio-menu}`}
+      updateDelay={0}
+      tippyOptions={{
+        getReferenceClientRect,
+        offset: [0, 8],
+        zIndex: 99,
+        popperOptions: {
+          modifiers: [{ name: 'flip', enabled: false }],
+        },
+        plugins: [sticky],
+        sticky: 'popper',
+      }}
+      shouldShow={shouldShow}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        {editor.getAttributes('drawio')?.width && (
+          <NodeWidthResize
+            onChange={onWidthChange}
+            value={parseInt(editor.getAttributes('drawio').width)}
+          />
+        )}
+      </div>
+    </BaseBubbleMenu>
+  );
+}
+
+export default DrawioMenu;
--- a/apps/client/src/features/editor/components/drawio/drawio-view.tsx
+++ b/apps/client/src/features/editor/components/drawio/drawio-view.tsx
@ -0,0 +1,173 @@
+import { NodeViewProps, NodeViewWrapper } from '@tiptap/react';
+import { ActionIcon, Card, Image, Modal, Text } from '@mantine/core';
+import { useRef, useState } from 'react';
+import { uploadFile } from '@/features/page/services/page-service.ts';
+import { useDisclosure } from '@mantine/hooks';
+import { getFileUrl } from '@/lib/config.ts';
+import {
+  DrawIoEmbed,
+  DrawIoEmbedRef,
+  EventExit,
+  EventSave,
+} from 'react-drawio';
+import { IAttachment } from '@/lib/types';
+import { decodeBase64ToSvgString, svgStringToFile } from '@/lib/utils';
+import clsx from 'clsx';
+import { IconEdit } from '@tabler/icons-react';
+
+export default function DrawioView(props: NodeViewProps) {
+  const { node, updateAttributes, editor, selected } = props;
+  const { src, title, width, attachmentId } = node.attrs;
+  const drawioRef = useRef<DrawIoEmbedRef>(null);
+  const [initialXML, setInitialXML] = useState<string>('');
+  const [opened, { open, close }] = useDisclosure(false);
+
+  const handleOpen = async () => {
+    if (!editor.isEditable) {
+      return;
+    }
+
+    try {
+      if (src) {
+        const url = getFileUrl(src);
+        const request = await fetch(url, {
+          credentials: 'include',
+          cache: 'no-store',
+        });
+        const blob = await request.blob();
+
+        const reader = new FileReader();
+        reader.readAsDataURL(blob);
+        reader.onloadend = () => {
+          let base64data = (reader.result || '') as string;
+          setInitialXML(base64data);
+        };
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      open();
+    }
+  };
+
+  const handleSave = async (data: EventSave) => {
+    const svgString = decodeBase64ToSvgString(data.xml);
+
+    const fileName = 'diagram.drawio.svg';
+    const drawioSVGFile = await svgStringToFile(svgString, fileName);
+
+    const pageId = editor.storage?.pageId;
+
+    let attachment: IAttachment = null;
+
+    if (attachmentId) {
+      attachment = await uploadFile(drawioSVGFile, pageId, attachmentId);
+    } else {
+      attachment = await uploadFile(drawioSVGFile, pageId);
+    }
+
+    updateAttributes({
+      src: `/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
+      title: attachment.fileName,
+      size: attachment.fileSize,
+      attachmentId: attachment.id,
+    });
+
+    close();
+  };
+
+  return (
+    <NodeViewWrapper>
+      <Modal.Root opened={opened} onClose={close} fullScreen>
+        <Modal.Overlay />
+        <Modal.Content style={{ overflow: 'hidden' }}>
+          <Modal.Body>
+            <div style={{ height: '100vh' }}>
+              <DrawIoEmbed
+                ref={drawioRef}
+                xml={initialXML}
+                urlParameters={{
+                  ui: 'kennedy',
+                  spin: true,
+                  libraries: true,
+                  saveAndExit: true,
+                  noSaveBtn: true,
+                }}
+                onSave={(data: EventSave) => {
+                  // If the save is triggered by another event, then do nothing
+                  if (data.parentEvent !== 'save') {
+                    return;
+                  }
+                  handleSave(data);
+                }}
+                onClose={(data: EventExit) => {
+                  // If the exit is triggered by another event, then do nothing
+                  if (data.parentEvent) {
+                    return;
+                  }
+                  close();
+                }}
+              />
+            </div>
+          </Modal.Body>
+        </Modal.Content>
+      </Modal.Root>
+
+      {src ? (
+        <div style={{ position: 'relative' }}>
+          <Image
+            onClick={(e) => e.detail === 2 && handleOpen()}
+            radius="md"
+            fit="contain"
+            w={width}
+            src={getFileUrl(src)}
+            alt={title}
+            className={clsx(
+              selected ? 'ProseMirror-selectednode' : '',
+              'alignCenter'
+            )}
+          />
+
+          {selected && (
+            <ActionIcon
+              onClick={handleOpen}
+              variant="default"
+              color="gray"
+              mx="xs"
+              style={{
+                position: 'absolute',
+                top: 8,
+                right: 8,
+              }}
+            >
+              <IconEdit size={18} />
+            </ActionIcon>
+          )}
+        </div>
+      ) : (
+        <Card
+          radius="md"
+          onClick={(e) => e.detail === 2 && handleOpen()}
+          p="xs"
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+          withBorder
+          className={clsx(selected ? 'ProseMirror-selectednode' : '')}
+        >
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ActionIcon variant="transparent" color="gray">
+              <IconEdit size={18} />
+            </ActionIcon>
+
+            <Text component="span" size="lg" c="dimmed">
+              Double-click to edit drawio diagram
+            </Text>
+          </div>
+        </Card>
+      )}
+    </NodeViewWrapper>
+  );
+}
--- a/apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx
+++ b/apps/client/src/features/editor/components/excalidraw/excalidraw-menu.tsx
@ -0,0 +1,82 @@
+import {
+  BubbleMenu as BaseBubbleMenu,
+  findParentNode,
+  posToDOMRect,
+} from '@tiptap/react';
+import { useCallback } from 'react';
+import { sticky } from 'tippy.js';
+import { Node as PMNode } from 'prosemirror-model';
+import {
+  EditorMenuProps,
+  ShouldShowProps,
+} from '@/features/editor/components/table/types/types.ts';
+import { NodeWidthResize } from '@/features/editor/components/common/node-width-resize.tsx';
+
+export function ExcalidrawMenu({ editor }: EditorMenuProps) {
+  const shouldShow = useCallback(
+    ({ state }: ShouldShowProps) => {
+      if (!state) {
+        return false;
+      }
+
+      return editor.isActive('excalidraw') && editor.getAttributes('excalidraw')?.src;
+    },
+    [editor]
+  );
+
+  const getReferenceClientRect = useCallback(() => {
+    const { selection } = editor.state;
+    const predicate = (node: PMNode) => node.type.name === 'excalidraw';
+    const parent = findParentNode(predicate)(selection);
+
+    if (parent) {
+      const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
+      return dom.getBoundingClientRect();
+    }
+
+    return posToDOMRect(editor.view, selection.from, selection.to);
+  }, [editor]);
+
+  const onWidthChange = useCallback(
+    (value: number) => {
+      editor.commands.updateAttributes('excalidraw', { width: `${value}%` });
+    },
+    [editor]
+  );
+
+  return (
+    <BaseBubbleMenu
+      editor={editor}
+      pluginKey={`excalidraw-menu}`}
+      updateDelay={0}
+      tippyOptions={{
+        getReferenceClientRect,
+        offset: [0, 8],
+        zIndex: 99,
+        popperOptions: {
+          modifiers: [{ name: 'flip', enabled: false }],
+        },
+        plugins: [sticky],
+        sticky: 'popper',
+      }}
+      shouldShow={shouldShow}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        {editor.getAttributes('excalidraw')?.width && (
+          <NodeWidthResize
+            onChange={onWidthChange}
+            value={parseInt(editor.getAttributes('excalidraw').width)}
+          />
+        )}
+      </div>
+    </BaseBubbleMenu>
+  );
+}
+
+export default ExcalidrawMenu;
--- a/apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx
+++ b/apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx
@ -0,0 +1,212 @@
+import { NodeViewProps, NodeViewWrapper } from '@tiptap/react';
+import {
+  ActionIcon,
+  Button,
+  Card,
+  Group,
+  Image,
+  Text,
+  useComputedColorScheme,
+} from '@mantine/core';
+import { useState } from 'react';
+import { uploadFile } from '@/features/page/services/page-service.ts';
+import { svgStringToFile } from '@/lib';
+import { useDisclosure } from '@mantine/hooks';
+import { getFileUrl } from '@/lib/config.ts';
+import { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types';
+import { IAttachment } from '@/lib/types';
+import ReactClearModal from 'react-clear-modal';
+import clsx from 'clsx';
+import { IconEdit } from '@tabler/icons-react';
+import { lazy } from 'react';
+import { Suspense } from 'react';
+
+const Excalidraw = lazy(() =>
+  import('@excalidraw/excalidraw').then((module) => ({
+    default: module.Excalidraw,
+  }))
+);
+
+export default function ExcalidrawView(props: NodeViewProps) {
+  const { node, updateAttributes, editor, selected } = props;
+  const { src, title, width, attachmentId } = node.attrs;
+
+  const [excalidrawAPI, setExcalidrawAPI] =
+    useState<ExcalidrawImperativeAPI>(null);
+  const [excalidrawData, setExcalidrawData] = useState<any>(null);
+  const [opened, { open, close }] = useDisclosure(false);
+  const computedColorScheme = useComputedColorScheme();
+
+  const handleOpen = async () => {
+    if (!editor.isEditable) {
+      return;
+    }
+
+    try {
+      if (src) {
+        const url = getFileUrl(src);
+        const request = await fetch(url, {
+          credentials: 'include',
+          cache: 'no-store',
+        });
+
+        const { loadFromBlob } = await import('@excalidraw/excalidraw');
+
+        const data = await loadFromBlob(await request.blob(), null, null);
+        setExcalidrawData(data);
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      open();
+    }
+  };
+
+  const handleSave = async () => {
+    if (!excalidrawAPI) {
+      return;
+    }
+
+    const { exportToSvg } = await import('@excalidraw/excalidraw');
+
+    const svg = await exportToSvg({
+      elements: excalidrawAPI?.getSceneElements(),
+      appState: {
+        exportEmbedScene: true,
+        exportWithDarkMode: computedColorScheme == 'light' ? false : true,
+      },
+      files: excalidrawAPI?.getFiles(),
+    });
+
+    const serializer = new XMLSerializer();
+    let svgString = serializer.serializeToString(svg);
+
+    svgString = svgString.replace(
+      /https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
+      'https://unpkg.com/@excalidraw/excalidraw@latest'
+    );
+
+    const fileName = 'diagram.excalidraw.svg';
+    const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
+
+    const pageId = editor.storage?.pageId;
+
+    let attachment: IAttachment = null;
+    if (attachmentId) {
+      attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
+    } else {
+      attachment = await uploadFile(excalidrawSvgFile, pageId);
+    }
+
+    updateAttributes({
+      src: `/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
+      title: attachment.fileName,
+      size: attachment.fileSize,
+      attachmentId: attachment.id,
+    });
+
+    close();
+  };
+
+  return (
+    <NodeViewWrapper>
+      <ReactClearModal
+        style={{
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          padding: 0,
+          zIndex: 200,
+        }}
+        isOpen={opened}
+        onRequestClose={close}
+        disableCloseOnBgClick={true}
+        contentProps={{
+          style: {
+            padding: 0,
+            width: '90vw',
+          },
+        }}
+      >
+        <Group
+          justify="flex-end"
+          wrap="nowrap"
+          bg="var(--mantine-color-body)"
+          p="xs"
+        >
+          <Button onClick={handleSave} size={'compact-sm'}>
+            Save & Exit
+          </Button>
+          <Button onClick={close} color="red" size={'compact-sm'}>
+            Exit
+          </Button>
+        </Group>
+        <div style={{ height: '90vh' }}>
+          <Suspense fallback={null}>
+            <Excalidraw
+              excalidrawAPI={(api) => setExcalidrawAPI(api)}
+              initialData={{
+                ...excalidrawData,
+                scrollToContent: true,
+              }}
+            />
+          </Suspense>
+        </div>
+      </ReactClearModal>
+
+      {src ? (
+        <div style={{ position: 'relative' }}>
+          <Image
+            onClick={(e) => e.detail === 2 && handleOpen()}
+            radius="md"
+            fit="contain"
+            w={width}
+            src={getFileUrl(src)}
+            alt={title}
+            className={clsx(
+              selected ? 'ProseMirror-selectednode' : '',
+              'alignCenter'
+            )}
+          />
+
+          {selected && (
+            <ActionIcon
+              onClick={handleOpen}
+              variant="default"
+              color="gray"
+              mx="xs"
+              style={{
+                position: 'absolute',
+                top: 8,
+                right: 8,
+              }}
+            >
+              <IconEdit size={18} />
+            </ActionIcon>
+          )}
+        </div>
+      ) : (
+        <Card
+          radius="md"
+          onClick={(e) => e.detail === 2 && handleOpen()}
+          p="xs"
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+          withBorder
+          className={clsx(selected ? 'ProseMirror-selectednode' : '')}
+        >
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ActionIcon variant="transparent" color="gray">
+              <IconEdit size={18} />
+            </ActionIcon>
+
+            <Text component="span" size="lg" c="dimmed">
+              Double-click to edit excalidraw diagram
+            </Text>
+          </div>
+        </Card>
+      )}
+    </NodeViewWrapper>
+  );
+}
--- a/apps/client/src/features/editor/components/image/image-view.tsx
+++ b/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>
  );
--- a/apps/client/src/features/editor/components/image/upload-image-action.tsx
+++ b/apps/client/src/features/editor/components/image/upload-image-action.tsx
@ -1,12 +1,16 @@
 import { handleImageUpload } from "@docmost/editor-ext";
 import { uploadFile } from "@/features/page/services/page-service.ts";
+import { notifications } from "@mantine/notifications";

 export const uploadImageAction = handleImageUpload({
  onUpload: async (file: File, pageId: string): Promise<any> => {
    try {
      return await uploadFile(file, pageId);
    } catch (err) {
-      console.error("failed to upload image", err);
+      notifications.show({
+        color: "red",
+        message: err?.response.data.message,
+      });
      throw err;
    }
  },
@ -14,8 +18,11 @@ export const uploadImageAction = handleImageUpload({
    if (!file.type.includes("image/")) {
      return false;
    }
-    if (file.size / 1024 / 1024 > 20) {
-      //error("File size too big (max 20MB).");
+    if (file.size / 1024 / 1024 > 50) {
+      notifications.show({
+        color: "red",
+        message: `File exceeds the 50 MB attachment limit`,
+      });
      return false;
    }
    return true;
--- a/apps/client/src/features/editor/components/slash-menu/menu-items.ts
+++ b/apps/client/src/features/editor/components/slash-menu/menu-items.ts
@ -12,9 +12,11 @@ import {
  IconMath,
  IconMathFunction,
  IconMovie,
+  IconPaperclip,
  IconPhoto,
  IconTable,
  IconTypography,
+  IconMenu4
 } from "@tabler/icons-react";
 import {
  CommandProps,
@ -22,6 +24,10 @@ import {
 } from "@/features/editor/components/slash-menu/types";
 import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
 import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
+import { uploadAttachmentAction } from "@/features/editor/components/attachment/upload-attachment-action.tsx";
+import IconExcalidraw from "@/components/icons/icon-excalidraw";
+import IconMermaid from "@/components/icons/icon-mermaid";
+import IconDrawio from "@/components/icons/icon-drawio";

 const CommandGroups: SlashMenuGroupedItemsType = {
  basic: [
@ -118,15 +124,23 @@ const CommandGroups: SlashMenuGroupedItemsType = {
    },
    {
      title: "Code",
-      description: "Capture a code snippet.",
+      description: "Insert code snippet.",
      searchTerms: ["codeblock"],
      icon: IconCode,
      command: ({ editor, range }: CommandProps) =>
        editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
    },
+    {
+      title: "Divider",
+      description: "Insert horizontal rule divider",
+      searchTerms: ["horizontal rule", "hr"],
+      icon: IconMenu4,
+      command: ({ editor, range }: CommandProps) =>
+        editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
+    },
    {
      title: "Image",
-      description: "Upload an image from your computer.",
+      description: "Upload any image from your device.",
      searchTerms: ["photo", "picture", "media"],
      icon: IconPhoto,
      command: ({ editor, range }) => {
@ -139,11 +153,13 @@ const CommandGroups: SlashMenuGroupedItemsType = {
        const input = document.createElement("input");
        input.type = "file";
        input.accept = "image/*";
+        input.multiple = true;
        input.onchange = async () => {
          if (input.files?.length) {
-            const file = input.files[0];
-            const pos = editor.view.state.selection.from;
-            uploadImageAction(file, editor.view, pos, pageId);
+            for (const file of input.files) {
+              const pos = editor.view.state.selection.from;
+              uploadImageAction(file, editor.view, pos, pageId);
+            }
          }
        };
        input.click();
@ -151,7 +167,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
    },
    {
      title: "Video",
-      description: "Upload an video from your computer.",
+      description: "Upload any video from your device.",
      searchTerms: ["video", "mp4", "media"],
      icon: IconMovie,
      command: ({ editor, range }) => {
@ -174,6 +190,37 @@ const CommandGroups: SlashMenuGroupedItemsType = {
        input.click();
      },
    },
+    {
+      title: "File attachment",
+      description: "Upload any file from your device.",
+      searchTerms: ["file", "attachment", "upload", "pdf", "csv", "zip"],
+      icon: IconPaperclip,
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).run();
+
+        const pageId = editor.storage?.pageId;
+        if (!pageId) return;
+
+        // upload file
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "";
+        input.onchange = async () => {
+          if (input.files?.length) {
+            const file = input.files[0];
+            const pos = editor.view.state.selection.from;
+            if (file.type.includes("image/*")) {
+              uploadImageAction(file, editor.view, pos, pageId);
+            } else if (file.type.includes("video/*")) {
+              uploadVideoAction(file, editor.view, pos, pageId);
+            } else {
+              uploadAttachmentAction(file, editor.view, pos, pageId);
+            }
+          }
+        };
+        input.click();
+      },
+    },
    {
      title: "Table",
      description: "Insert a table.",
@ -184,7 +231,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
          .chain()
          .focus()
          .deleteRange(range)
-          .insertTable({ rows: 3, cols: 3, withHeaderRow: false })
+          .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
          .run(),
    },
    {
@ -253,6 +300,36 @@ const CommandGroups: SlashMenuGroupedItemsType = {
      command: ({ editor, range }: CommandProps) =>
        editor.chain().focus().deleteRange(range).setMathBlock().run(),
    },
+    {
+      title: "Mermaid diagram",
+      description: "Insert mermaid diagram",
+      searchTerms: ["mermaid", "diagrams", "chart", "uml"],
+      icon: IconMermaid,
+      command: ({ editor, range }: CommandProps) =>
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .setCodeBlock({ language: "mermaid" })
+          .insertContent("flowchart LR\n" + "    A --> B")
+          .run(),
+    },
+    {
+      title: "Draw.io (diagrams.net) ",
+      description: "Insert and design Drawio diagrams",
+      searchTerms: ["drawio", "diagrams", "charts", "uml", "whiteboard"],
+      icon: IconDrawio,
+      command: ({ editor, range }: CommandProps) =>
+        editor.chain().focus().deleteRange(range).setDrawio().run(),
+    },
+    {
+      title: "Excalidraw diagram",
+      description: "Draw and sketch excalidraw diagrams",
+      searchTerms: ["diagrams", "draw", "sketch", "whiteboard"],
+      icon: IconExcalidraw,
+      command: ({ editor, range }: CommandProps) =>
+        editor.chain().focus().deleteRange(range).setExcalidraw().run(),
+    },
  ],
 };

@ -264,10 +341,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)))
--- a/apps/client/src/features/editor/components/video/upload-video-action.tsx
+++ b/apps/client/src/features/editor/components/video/upload-video-action.tsx
@ -1,12 +1,16 @@
 import { handleVideoUpload } from "@docmost/editor-ext";
 import { uploadFile } from "@/features/page/services/page-service.ts";
+import { notifications } from "@mantine/notifications";

 export const uploadVideoAction = handleVideoUpload({
  onUpload: async (file: File, pageId: string): Promise<any> => {
    try {
      return await uploadFile(file, pageId);
    } catch (err) {
-      console.error("failed to upload image", err);
+      notifications.show({
+        color: "red",
+        message: err?.response.data.message,
+      });
      throw err;
    }
  },
@ -15,7 +19,11 @@ export const uploadVideoAction = handleVideoUpload({
      return false;
    }

-    if (file.size / 1024 / 1024 > 20) {
+    if (file.size / 1024 / 1024 > 50) {
+      notifications.show({
+        color: "red",
+        message: `File exceeds the 50 MB attachment limit`,
+      });
      return false;
    }
    return true;
--- a/apps/client/src/features/editor/components/video/video-view.tsx
+++ b/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>
  );
--- a/apps/client/src/features/editor/extensions/drag-handle.ts
+++ b/apps/client/src/features/editor/extensions/drag-handle.ts
@ -1,371 +0,0 @@
-// MIT - source: https://github.com/NiclasDev63/tiptap-extension-global-drag-handle
-import { Extension } from "@tiptap/core";
-import {
-  NodeSelection,
-  Plugin,
-  PluginKey,
-  TextSelection,
-} from "@tiptap/pm/state";
-import { Fragment, Slice, Node } from "@tiptap/pm/model";
-
-// @ts-ignore
-import { __serializeForClipboard, EditorView } from "@tiptap/pm/view";
-
-export interface GlobalDragHandleOptions {
-  /**
-   * The width of the drag handle
-   */
-  dragHandleWidth: number;
-
-  /**
-   * The treshold for scrolling
-   */
-  scrollTreshold: number;
-
-  /*
-   * The css selector to query for the drag handle. (eg: '.custom-handle').
-   * If handle element is found, that element will be used as drag handle. If not, a default handle will be created
-   */
-  dragHandleSelector?: string;
-}
-function absoluteRect(node: Element) {
-  const data = node.getBoundingClientRect();
-  const modal = node.closest('[role="dialog"]');
-
-  if (modal && window.getComputedStyle(modal).transform !== "none") {
-    const modalRect = modal.getBoundingClientRect();
-
-    return {
-      top: data.top - modalRect.top,
-      left: data.left - modalRect.left,
-      width: data.width,
-    };
-  }
-  return {
-    top: data.top,
-    left: data.left,
-    width: data.width,
-  };
-}
-
-function nodeDOMAtCoords(coords: { x: number; y: number }) {
-  return document
-    .elementsFromPoint(coords.x, coords.y)
-    .find(
-      (elem: Element) =>
-        elem.parentElement?.matches?.(".ProseMirror") ||
-        elem.matches(
-          [
-            "li",
-            "p:not(:first-child)",
-            "pre",
-            "blockquote",
-            "h1, h2, h3, h4, h5, h6",
-            ".tableWrapper",
-          ].join(", "),
-        ),
-    );
-}
-
-function nodePosAtDOM(
-  node: Element,
-  view: EditorView,
-  options: GlobalDragHandleOptions,
-) {
-  const boundingRect = node.getBoundingClientRect();
-
-  return view.posAtCoords({
-    left: boundingRect.left + 50 + options.dragHandleWidth,
-    top: boundingRect.top + 1,
-  })?.inside;
-}
-
-function calcNodePos(pos: number, view: EditorView) {
-  const $pos = view.state.doc.resolve(pos);
-  if ($pos.depth > 1) return $pos.before($pos.depth);
-  return pos;
-}
-
-export function DragHandlePlugin(
-  options: GlobalDragHandleOptions & { pluginKey: string },
-) {
-  let listType = "";
-  function handleDragStart(event: DragEvent, view: EditorView) {
-    view.focus();
-
-    if (!event.dataTransfer) return;
-
-    const node = nodeDOMAtCoords({
-      x: event.clientX + 50 + options.dragHandleWidth,
-      y: event.clientY,
-    });
-
-    if (!(node instanceof Element)) return;
-
-    let draggedNodePos = nodePosAtDOM(node, view, options);
-    if (draggedNodePos == null || draggedNodePos < 0) return;
-    draggedNodePos = calcNodePos(draggedNodePos, view);
-
-    const { from, to } = view.state.selection;
-    const diff = from - to;
-
-    const fromSelectionPos = calcNodePos(from, view);
-    let differentNodeSelected = false;
-
-    const nodePos = view.state.doc.resolve(fromSelectionPos);
-
-    // Check if nodePos points to the top level node
-    if (nodePos.node().type.name === "doc") differentNodeSelected = true;
-    else {
-      const nodeSelection = NodeSelection.create(
-        view.state.doc,
-        nodePos.before(),
-      );
-      // Check if the node where the drag event started is part of the current selection
-      differentNodeSelected = !(
-        draggedNodePos + 1 >= nodeSelection.$from.pos &&
-        draggedNodePos <= nodeSelection.$to.pos
-      );
-    }
-
-    if (
-      !differentNodeSelected &&
-      diff !== 0 &&
-      !(view.state.selection instanceof NodeSelection)
-    ) {
-      const endSelection = NodeSelection.create(view.state.doc, to - 1);
-      const multiNodeSelection = TextSelection.create(
-        view.state.doc,
-        draggedNodePos,
-        endSelection.$to.pos,
-      );
-      view.dispatch(view.state.tr.setSelection(multiNodeSelection));
-    } else {
-      const nodeSelection = NodeSelection.create(
-        view.state.doc,
-        draggedNodePos,
-      );
-      view.dispatch(view.state.tr.setSelection(nodeSelection));
-    }
-
-    // If the selected node is a list item, we need to save the type of the wrapping list e.g. OL or UL
-    if (
-      view.state.selection instanceof NodeSelection &&
-      view.state.selection.node.type.name === "listItem"
-    ) {
-      listType = node.parentElement!.tagName;
-    }
-
-    const slice = view.state.selection.content();
-    const { dom, text } = __serializeForClipboard(view, slice);
-
-    event.dataTransfer.clearData();
-    event.dataTransfer.setData("text/html", dom.innerHTML);
-    event.dataTransfer.setData("text/plain", text);
-    event.dataTransfer.effectAllowed = "copyMove";
-
-    event.dataTransfer.setDragImage(node, 0, 0);
-
-    view.dragging = { slice, move: event.ctrlKey };
-  }
-
-  let dragHandleElement: HTMLElement | null = null;
-
-  function hideDragHandle() {
-    if (dragHandleElement) {
-      dragHandleElement.classList.add("hide");
-    }
-  }
-
-  function showDragHandle() {
-    if (dragHandleElement) {
-      dragHandleElement.classList.remove("hide");
-    }
-  }
-
-  return new Plugin({
-    key: new PluginKey(options.pluginKey),
-    view: (view) => {
-      const handleBySelector = options.dragHandleSelector
-        ? document.querySelector<HTMLElement>(options.dragHandleSelector)
-        : null;
-      dragHandleElement = handleBySelector ?? document.createElement("div");
-      dragHandleElement.draggable = true;
-      dragHandleElement.dataset.dragHandle = "";
-      dragHandleElement.classList.add("drag-handle");
-
-      function onDragHandleDragStart(e: DragEvent) {
-        handleDragStart(e, view);
-      }
-
-      dragHandleElement.addEventListener("dragstart", onDragHandleDragStart);
-
-      function onDragHandleDrag(e: DragEvent) {
-        hideDragHandle();
-        let scrollY = window.scrollY;
-        if (e.clientY < options.scrollTreshold) {
-          window.scrollTo({ top: scrollY - 30, behavior: "smooth" });
-        } else if (window.innerHeight - e.clientY < options.scrollTreshold) {
-          window.scrollTo({ top: scrollY + 30, behavior: "smooth" });
-        }
-      }
-
-      dragHandleElement.addEventListener("drag", onDragHandleDrag);
-
-      hideDragHandle();
-
-      if (!handleBySelector) {
-        view?.dom?.parentElement?.appendChild(dragHandleElement);
-      }
-
-      return {
-        destroy: () => {
-          if (!handleBySelector) {
-            dragHandleElement?.remove?.();
-          }
-          dragHandleElement?.removeEventListener("drag", onDragHandleDrag);
-          dragHandleElement?.removeEventListener(
-            "dragstart",
-            onDragHandleDragStart,
-          );
-          dragHandleElement = null;
-        },
-      };
-    },
-    props: {
-      handleDOMEvents: {
-        mousemove: (view, event) => {
-          if (!view.editable) {
-            return;
-          }
-
-          const node = nodeDOMAtCoords({
-            x: event.clientX + 50 + options.dragHandleWidth,
-            y: event.clientY,
-          });
-
-          const notDragging = node?.closest(".not-draggable");
-
-          //const isNodeInTable = node?.closest("td") || node?.closest("th");
-
-          if (
-            !(node instanceof Element) ||
-            node.matches("ul, ol") ||
-            notDragging ||
-            node.matches(".tableWrapper")
-          ) {
-            hideDragHandle();
-            return;
-          }
-
-          const compStyle = window.getComputedStyle(node);
-          const parsedLineHeight = parseInt(compStyle.lineHeight, 10);
-          const lineHeight = isNaN(parsedLineHeight)
-            ? parseInt(compStyle.fontSize) * 1.2
-            : parsedLineHeight;
-          const paddingTop = parseInt(compStyle.paddingTop, 10);
-
-          const rect = absoluteRect(node);
-
-          rect.top += (lineHeight - 24) / 2;
-          rect.top += paddingTop;
-          // Li markers
-          if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
-            rect.left -= options.dragHandleWidth;
-          }
-          rect.width = options.dragHandleWidth;
-
-          if (!dragHandleElement) return;
-
-          dragHandleElement.style.left = `${rect.left - rect.width}px`;
-          dragHandleElement.style.top = `${rect.top}px`;
-          showDragHandle();
-        },
-        keydown: () => {
-          hideDragHandle();
-        },
-        mousewheel: () => {
-          hideDragHandle();
-        },
-        // dragging class is used for CSS
-        dragstart: (view) => {
-          view.dom.classList.add("dragging");
-        },
-        drop: (view, event) => {
-          view.dom.classList.remove("dragging");
-          hideDragHandle();
-          let droppedNode: Node | null = null;
-          const dropPos = view.posAtCoords({
-            left: event.clientX,
-            top: event.clientY,
-          });
-
-          if (!dropPos) return;
-
-          if (view.state.selection instanceof NodeSelection) {
-            droppedNode = view.state.selection.node;
-          }
-          if (!droppedNode) return;
-
-          const resolvedPos = view.state.doc.resolve(dropPos.pos);
-
-          const isDroppedInsideList =
-            resolvedPos.parent.type.name === "listItem";
-
-          // If the selected node is a list item and is not dropped inside a list, we need to wrap it inside <ol> tag otherwise ol list items will be transformed into ul list item when dropped
-          if (
-            view.state.selection instanceof NodeSelection &&
-            view.state.selection.node.type.name === "listItem" &&
-            !isDroppedInsideList &&
-            listType == "OL"
-          ) {
-            const text = droppedNode.textContent;
-            if (!text) return;
-            const paragraph = view.state.schema.nodes.paragraph?.createAndFill(
-              {},
-              view.state.schema.text(text),
-            );
-            const listItem = view.state.schema.nodes.listItem?.createAndFill(
-              {},
-              paragraph,
-            );
-
-            const newList = view.state.schema.nodes.orderedList?.createAndFill(
-              null,
-              listItem,
-            );
-            const slice = new Slice(Fragment.from(newList), 0, 0);
-            view.dragging = { slice, move: event.ctrlKey };
-          }
-        },
-        dragend: (view) => {
-          view.dom.classList.remove("dragging");
-        },
-      },
-    },
-  });
-}
-
-const GlobalDragHandle = Extension.create({
-  name: "globalDragHandle",
-
-  addOptions() {
-    return {
-      dragHandleWidth: 20,
-      scrollTreshold: 100,
-    };
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      DragHandlePlugin({
-        pluginKey: "globalDragHandle",
-        dragHandleWidth: this.options.dragHandleWidth,
-        scrollTreshold: this.options.scrollTreshold,
-        dragHandleSelector: this.options.dragHandleSelector,
-      }),
-    ];
-  },
-});
-
-export default GlobalDragHandle;
--- a/apps/client/src/features/editor/extensions/extensions.ts
+++ b/apps/client/src/features/editor/extensions/extensions.ts
@ -4,14 +4,14 @@ import { TextAlign } from "@tiptap/extension-text-align";
 import { TaskList } from "@tiptap/extension-task-list";
 import { TaskItem } from "@tiptap/extension-task-item";
 import { Underline } from "@tiptap/extension-underline";
-import { Link } from "@tiptap/extension-link";
 import { Superscript } from "@tiptap/extension-superscript";
 import SubScript from "@tiptap/extension-subscript";
 import { Highlight } from "@tiptap/extension-highlight";
 import { Typography } from "@tiptap/extension-typography";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
-import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import Table from "@tiptap/extension-table";
+import TableHeader from "@tiptap/extension-table-header";
 import SlashCommand from "@/features/editor/extensions/slash-command";
 import { Collaboration } from "@tiptap/extension-collaboration";
 import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
@ -23,8 +23,6 @@ import {
  DetailsSummary,
  MathBlock,
  MathInline,
-  Table,
-  TableHeader,
  TableCell,
  TableRow,
  TrailingNode,
@ -33,6 +31,10 @@ import {
  TiptapVideo,
  LinkExtension,
  Selection,
+  Attachment,
+  CustomCodeBlock,
+  Drawio,
+  Excalidraw,
 } from "@docmost/editor-ext";
 import {
  randomElement,
@ -41,13 +43,20 @@ import {
 import { IUser } from "@/features/user/types/user.types.ts";
 import MathInlineView from "@/features/editor/components/math/math-inline.tsx";
 import MathBlockView from "@/features/editor/components/math/math-block.tsx";
-import GlobalDragHandle from "@/features/editor/extensions/drag-handle.ts";
+import GlobalDragHandle from "tiptap-extension-global-drag-handle";
 import { Youtube } from "@tiptap/extension-youtube";
 import ImageView from "@/features/editor/components/image/image-view.tsx";
 import CalloutView from "@/features/editor/components/callout/callout-view.tsx";
 import { common, createLowlight } from "lowlight";
 import VideoView from "@/features/editor/components/video/video-view.tsx";
+import AttachmentView from "@/features/editor/components/attachment/attachment-view.tsx";
+import CodeBlockView from "@/features/editor/components/code-block/code-block-view.tsx";
+import DrawioView from "../components/drawio/drawio-view";
+import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
+import plaintext from "highlight.js/lib/languages/plaintext";
+
 const lowlight = createLowlight(common);
+lowlight.register("mermaid", plaintext);

 export const mainExtensions = [
  StarterKit.configure({
@ -57,6 +66,11 @@ export const mainExtensions = [
      color: "#70CFF8",
    },
    codeBlock: false,
+    code: {
+      HTMLAttributes: {
+        spellcheck: false,
+      },
+    },
  }),
  Placeholder.configure({
    placeholder: ({ node }) => {
@ -66,9 +80,12 @@ export const mainExtensions = [
      if (node.type.name === "detailsSummary") {
        return "Toggle title";
      }
-      return 'Write anything. Enter "/" for commands';
+      if (node.type.name === "paragraph") {
+        return 'Write anything. Enter "/" for commands';
+      }
    },
    includeChildren: true,
+    showOnlyWhenEditable: true,
  }),
  TextAlign.configure({ types: ["heading", "paragraph"] }),
  TaskList,
@ -95,10 +112,16 @@ export const mainExtensions = [
      class: "comment-mark",
    },
  }),
-  Table,
+
+  Table.configure({
+    resizable: true,
+    lastColumnResizable: false,
+    allowTableNodeSelection: true,
+  }),
  TableRow,
  TableCell,
  TableHeader,
+
  MathInline.configure({
    view: MathInlineView,
  }),
@ -122,10 +145,23 @@ export const mainExtensions = [
  Callout.configure({
    view: CalloutView,
  }),
-  CodeBlockLowlight.configure({
+  CustomCodeBlock.configure({
+    view: CodeBlockView,
    lowlight,
+    HTMLAttributes: {
+      spellcheck: false,
+    },
  }),
  Selection,
+  Attachment.configure({
+    view: AttachmentView,
+  }),
+  Drawio.configure({
+    view: DrawioView,
+  }),
+  Excalidraw.configure({
+    view: ExcalidrawView,
+  }),
 ] as any;

 type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];
--- a/apps/client/src/features/editor/full-editor.tsx
+++ b/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>
  );
 }
--- a/apps/client/src/features/editor/page-editor.tsx
+++ b/apps/client/src/features/editor/page-editor.tsx
@ -31,14 +31,14 @@ import TableCellMenu from "@/features/editor/components/table/table-cell-menu.ts
 import TableMenu from "@/features/editor/components/table/table-menu.tsx";
 import ImageMenu from "@/features/editor/components/image/image-menu.tsx";
 import CalloutMenu from "@/features/editor/components/callout/callout-menu.tsx";
-import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
-import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action.tsx";
 import VideoMenu from "@/features/editor/components/video/video-menu.tsx";
 import {
  handleFileDrop,
  handleFilePaste,
 } from "@/features/editor/components/common/file-upload-handler.tsx";
 import LinkMenu from "@/features/editor/components/link/link-menu.tsx";
+import ExcalidrawMenu from "./components/excalidraw/excalidraw-menu";
+import DrawioMenu from "./components/drawio/drawio-menu";

 interface PageEditorProps {
  pageId: string;
@ -173,6 +173,8 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
              <ImageMenu editor={editor} />
              <VideoMenu editor={editor} />
              <CalloutMenu editor={editor} />
+              <ExcalidrawMenu editor={editor} />
+              <DrawioMenu editor={editor} />
              <LinkMenu editor={editor} appendTo={menuContainerRef} />
            </div>
          )}
--- a/apps/client/src/features/editor/styles/code.css
+++ b/apps/client/src/features/editor/styles/code.css
@ -1,6 +1,13 @@
 .ProseMirror {
+  .codeBlock {
+    padding: 4px;
+    border-radius: var(--mantine-radius-default);
+    background-color: light-dark(var(--mantine-color-gray-0),  var(--mantine-color-dark-8));
+    }
+
  pre {
-    padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+    margin: 4px;
    font-family: "JetBrainsMono", var(--mantine-font-family-monospace);
    border-radius: var(--mantine-radius-default);

@ -86,4 +93,22 @@
      font-weight: 700;
    }
  }
+
+  :not(pre) > code {
+    font-family: "JetBrainsMono", var(--mantine-font-family-monospace);
+    line-height: var(--mantine-line-height);
+    padding: 2px calc(var(--mantine-spacing-xs) / 2);
+    border-radius: var(--mantine-radius-sm);
+    margin: 0;
+
+    @mixin where-light {
+      background-color: var(--code-bg, var(--mantine-color-gray-1));
+      color: var(--mantine-color-black);
+    }
+
+    @mixin where-dark {
+      background-color: var(--mantine-color-dark-8);
+      color: var(--mantine-color-gray-4);
+    }
+  }
 }
--- a/apps/client/src/features/editor/styles/core.css
+++ b/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%;

  > * + * {
@ -20,6 +20,11 @@
    outline: none;
  }

+  p {
+    margin-top: 0.65em;
+    margin-bottom: 0.65em;
+  }
+
  ul,
  ol {
    padding: 0 1rem;
@ -27,6 +32,12 @@
    margin-bottom: 0.25rem;
  }

+  ul p,
+  ol p {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
  h1,
  h2,
  h3,
@ -80,15 +91,9 @@
    outline: 2px solid #70cff8;
  }

-  .node-mathInline {
-    .katex-display {
-      margin: 0;
-    }
-  }
-
  & > .react-renderer {
-    margin-top:  var(--mantine-spacing-xl);
-    margin-bottom: var(--mantine-spacing-xl);
+    margin-top:  var(--mantine-spacing-sm);
+    margin-bottom: var(--mantine-spacing-sm);

    &:first-child {
      margin-top: 0;
@ -125,6 +130,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 +168,4 @@
 .actionIconGroup {
  background: var(--mantine-color-body);
 }
+
--- a/apps/client/src/features/editor/styles/details.css
+++ b/apps/client/src/features/editor/styles/details.css
@ -50,8 +50,7 @@

    [data-type="detailsContainer"] {
      flex: 1;
-      margin-left: 0.2em;
-      overflow-x: hidden;
+      padding: 4px;
      word-break: break-word;
      overflow-wrap: break-word;

--- a/apps/client/src/features/editor/styles/editor.module.css
+++ b/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;
+    }
 }

--- a/apps/client/src/features/editor/styles/index.css
+++ b/apps/client/src/features/editor/styles/index.css
@ -8,5 +8,4 @@
@import "./youtube.css";
@import "./media.css";
@import "./code.css";
-
-
+@import "./print.css";
--- a/apps/client/src/features/editor/styles/media.css
+++ b/apps/client/src/features/editor/styles/media.css
@ -4,10 +4,34 @@
    height: auto;
  }

-  .node-image, .node-video {
+  .node-image, .node-video, .node-excalidraw, .node-drawio {
    &.ProseMirror-selectednode {
      outline: none;
    }
  }
+
+  .attachment-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--mantine-color-body);
+    border-radius: var(--mantine-radius-default);
+    cursor: pointer;
+    padding: 15px;
+    height: 25px;
+
+    @mixin light {
+      border: 1px solid var(--mantine-color-gray-3);
+    }
+
+    @mixin dark {
+      border: 1px solid var(--mantine-color-dark-4);
+    }
+  }
+
+  .uploading-text {
+    font-size: var(--mantine-font-size-md);
+    line-height: var(--mantine-line-height-md);
+  }
 }

--- a/apps/client/src/features/editor/styles/placeholder.css
+++ b/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: '';
+  display: none;
+
+  @media print {
+    display: none;
+  }
 }
--- a/apps/client/src/features/editor/styles/print.css
+++ b/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;
+    }
+}
--- a/apps/client/src/features/editor/styles/table.css
+++ b/apps/client/src/features/editor/styles/table.css
@ -1,6 +1,6 @@
 .tableWrapper {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
  overflow-x: auto;
  & table {
    overflow-x: hidden;
--- a/apps/client/src/features/editor/styles/youtube.css
+++ b/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;
+        }
    }
 }
--- a/apps/client/src/features/group/components/add-group-member-modal.tsx
+++ b/apps/client/src/features/group/components/add-group-member-modal.tsx
@ -1,4 +1,4 @@
-import { Button, Divider, Group, Modal, ScrollArea } from "@mantine/core";
+import { Button, Divider, Group, Modal } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import React, { useState } from "react";
 import { MultiUserSelect } from "@/features/group/components/multi-user-select.tsx";
--- a/apps/client/src/features/page-history/components/history-list.tsx
+++ b/apps/client/src/features/page-history/components/history-list.tsx
@ -2,7 +2,6 @@ import {
  usePageHistoryListQuery,
  usePageHistoryQuery,
 } from "@/features/page-history/queries/page-history-query";
-import { useParams } from "react-router-dom";
 import HistoryItem from "@/features/page-history/components/history-item";
 import {
  activeHistoryIdAtom,
--- a/apps/client/src/features/page/components/header/page-header-menu.tsx
+++ b/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,6 +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 { PageWidthToggle } from "@/features/user/components/page-width-pref.tsx";
+import PageExportModal from "@/features/page/components/page-export-modal.tsx";

 interface PageHeaderMenuProps {
  readOnly?: boolean;
@ -55,6 +60,8 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
  });
  const { openDeleteModal } = useDeletePageModal();
  const [tree] = useAtom(treeApiAtom);
+  const [exportOpened, { open: openExportModal, close: closeExportModal }] =
+    useDisclosure(false);

  const handleCopyLink = () => {
    const pageUrl =
@ -64,6 +71,12 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
    notifications.show({ message: "Link copied" });
  };

+  const handlePrint = () => {
+    setTimeout(() => {
+      window.print();
+    }, 250);
+  };
+
  const openHistoryModal = () => {
    setHistoryModalOpen(true);
  };
@ -73,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={exportOpened}
+        onClose={closeExportModal}
+      />
+    </>
  );
 }
--- a/apps/client/src/features/page/components/header/page-header.module.css
+++ b/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;
+    }
 }
--- a/apps/client/src/features/page/components/page-export-modal.tsx
+++ b/apps/client/src/features/page/components/page-export-modal.tsx
@ -0,0 +1,94 @@
+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.Root
+      opened={open}
+      onClose={onClose}
+      size={500}
+      padding="xl"
+      yOffset="10vh"
+      xOffset={0}
+      mah={400}
+    >
+      <Modal.Overlay />
+      <Modal.Content style={{ overflow: "hidden" }}>
+        <Modal.Header py={0}>
+          <Modal.Title fw={500}>Export page</Modal.Title>
+          <Modal.CloseButton />
+        </Modal.Header>
+        <Modal.Body>
+          <Group justify="space-between" wrap="nowrap">
+            <div>
+              <Text size="md">Format</Text>
+            </div>
+            <ExportFormatSelection format={format} onChange={handleChange} />
+          </Group>
+
+          <Group justify="center" mt="md">
+            <Button onClick={onClose} variant="default">
+              Cancel
+            </Button>
+            <Button onClick={handleExport}>Export</Button>
+          </Group>
+        </Modal.Body>
+      </Modal.Content>
+    </Modal.Root>
+  );
+}
+
+interface ExportFormatSelection {
+  format: ExportFormat;
+  onChange: (value: string) => void;
+}
+function ExportFormatSelection({ format, onChange }: ExportFormatSelection) {
+  return (
+    <Select
+      data={[
+        { value: "markdown", label: "Markdown" },
+        { value: "html", label: "HTML" },
+      ]}
+      defaultValue={format}
+      onChange={onChange}
+      styles={{ wrapper: { maxWidth: 120 } }}
+      comboboxProps={{ width: "120" }}
+      allowDeselect={false}
+      withCheckIcon={false}
+      aria-label="Select export format"
+    />
+  );
+}
--- a/apps/client/src/features/page/components/page-import-modal.tsx
+++ b/apps/client/src/features/page/components/page-import-modal.tsx
@ -0,0 +1,150 @@
+import { Modal, Button, SimpleGrid, FileButton } from "@mantine/core";
+import {
+  IconCheck,
+  IconFileCode,
+  IconMarkdown,
+  IconX,
+} from "@tabler/icons-react";
+import { importPage } from "@/features/page/services/page-service.ts";
+import { notifications } from "@mantine/notifications";
+import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
+import { useAtom } from "jotai";
+import { buildTree } from "@/features/page/tree/utils";
+import { IPage } from "@/features/page/types/page.types.ts";
+import React from "react";
+
+interface PageImportModalProps {
+  spaceId: string;
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function PageImportModal({
+  spaceId,
+  open,
+  onClose,
+}: PageImportModalProps) {
+  return (
+    <>
+      <Modal.Root
+        opened={open}
+        onClose={onClose}
+        size={600}
+        padding="xl"
+        yOffset="10vh"
+        xOffset={0}
+        mah={400}
+      >
+        <Modal.Overlay />
+        <Modal.Content style={{ overflow: "hidden" }}>
+          <Modal.Header py={0}>
+            <Modal.Title fw={500}>Import pages</Modal.Title>
+            <Modal.CloseButton />
+          </Modal.Header>
+          <Modal.Body>
+            <ImportFormatSelection spaceId={spaceId} onClose={onClose} />
+          </Modal.Body>
+        </Modal.Content>
+      </Modal.Root>
+    </>
+  );
+}
+
+interface ImportFormatSelection {
+  spaceId: string;
+  onClose: () => void;
+}
+function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
+  const [treeData, setTreeData] = useAtom(treeDataAtom);
+
+  const handleFileUpload = async (selectedFiles: File[]) => {
+    if (!selectedFiles) {
+      return;
+    }
+
+    onClose();
+
+    const alert = notifications.show({
+      title: "Importing pages",
+      message: "Page import is in progress. Please do not close this tab.",
+      loading: true,
+      autoClose: false,
+    });
+
+    const pages: IPage[] = [];
+    let pageCount = 0;
+
+    for (const file of selectedFiles) {
+      try {
+        const page = await importPage(file, spaceId);
+        pages.push(page);
+        pageCount += 1;
+      } catch (err) {
+        console.log("Failed to import page", err);
+      }
+    }
+
+    if (pages?.length > 0 && pageCount > 0) {
+      const newTreeNodes = buildTree(pages);
+      const fullTree = treeData.concat(newTreeNodes);
+
+      if (newTreeNodes?.length && fullTree?.length > 0) {
+        setTreeData(fullTree);
+      }
+
+      const pageCountText = pageCount === 1 ? "1 page" : `${pageCount} pages`;
+
+      notifications.update({
+        id: alert,
+        color: "teal",
+        title: `Successfully imported ${pageCountText}`,
+        message: "Your import is complete.",
+        icon: <IconCheck size={18} />,
+        loading: false,
+        autoClose: 5000,
+      });
+    } else {
+      notifications.update({
+        id: alert,
+        color: "red",
+        title: `Failed to import pages`,
+        message: "Unable to import pages. Please try again.",
+        icon: <IconX size={18} />,
+        loading: false,
+        autoClose: 5000,
+      });
+    }
+  };
+
+  return (
+    <>
+      <SimpleGrid cols={2}>
+        <FileButton onChange={handleFileUpload} accept="text/markdown" multiple>
+          {(props) => (
+            <Button
+              justify="start"
+              variant="default"
+              leftSection={<IconMarkdown size={18} />}
+              {...props}
+            >
+              Markdown
+            </Button>
+          )}
+        </FileButton>
+
+        <FileButton onChange={handleFileUpload} accept="text/html" multiple>
+          {(props) => (
+            <Button
+              justify="start"
+              variant="default"
+              leftSection={<IconFileCode size={18} />}
+              {...props}
+            >
+              HTML
+            </Button>
+          )}
+        </FileButton>
+      </SimpleGrid>
+    </>
+  );
+}
--- a/apps/client/src/features/page/services/page-service.ts
+++ b/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,46 @@ export async function getRecentChanges(
  return req.data;
 }

-export async function uploadFile(file: File, pageId: string) {
+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 importPage(file: File, spaceId: string) {
  const formData = new FormData();
-  formData.append("pageId", pageId);
+  formData.append("spaceId", spaceId);
  formData.append("file", file);

-  // should be file endpoint
+  const req = await api.post<IPage>("/pages/import", formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+
+  return req.data;
+}
+
+export async function uploadFile(file: File, pageId: string, attachmentId?: string): Promise<IAttachment> {
+  const formData = new FormData();
+  if(attachmentId){
+    formData.append("attachmentId", attachmentId);
+  }
+  formData.append("pageId", pageId);
+  formData.append("file", file);
+  
+
  const req = await api.post<IAttachment>("/files/upload", formData, {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  });
-  // console.log("req", req);

-  return req;
+  return req as unknown as IAttachment;
 }
--- a/apps/client/src/features/page/tree/components/space-tree.tsx
+++ b/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;
@ -446,9 +447,11 @@ function NodeMenu({ node, treeApi }: NodeMenuProps) {
              leftSection={
                <IconTrash style={{ width: rem(14), height: rem(14) }} />
              }
-              onClick={() =>
-                openDeleteModal({ onConfirm: () => treeApi?.delete(node) })
-              }
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                openDeleteModal({ onConfirm: () => treeApi?.delete(node) });
+              }}
            >
              Delete
            </Menu.Item>
--- a/apps/client/src/features/page/tree/hooks/use-tree-mutation.ts
+++ b/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;

--- a/apps/client/src/features/page/types/page.types.ts
+++ b/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",
+}
--- a/apps/client/src/features/search/search-spotlight.tsx
+++ b/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 { useNavigate } 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 {
--- a/apps/client/src/features/space/components/settings-modal.tsx
+++ b/apps/client/src/features/space/components/settings-modal.tsx
@ -1,4 +1,4 @@
-import { Modal, Tabs, rem, Group, Divider, ScrollArea } from "@mantine/core";
+import { Modal, Tabs, rem, Group, ScrollArea } from "@mantine/core";
 import SpaceMembersList from "@/features/space/components/space-members.tsx";
 import AddSpaceMembersModal from "@/features/space/components/add-space-members-modal.tsx";
 import React, { useMemo } from "react";
--- a/apps/client/src/features/space/components/sidebar/space-name.tsx
+++ b/apps/client/src/features/space/components/sidebar/space-name.tsx
@ -1,4 +1,4 @@
-import { UnstyledButton, Group, Avatar, Text, rem } from "@mantine/core";
+import { UnstyledButton, Group, Text } from "@mantine/core";
 import classes from "./space-name.module.css";

 interface SpaceNameProps {
--- a/apps/client/src/features/space/components/sidebar/space-sidebar.tsx
+++ b/apps/client/src/features/space/components/sidebar/space-sidebar.tsx
@ -1,13 +1,15 @@
 import {
  ActionIcon,
  Group,
-  rem,
+  Menu,
  Text,
  Tooltip,
  UnstyledButton,
 } from "@mantine/core";
 import { spotlight } from "@mantine/spotlight";
 import {
+  IconArrowDown,
+  IconDots,
  IconHome,
  IconPlus,
  IconSearch,
@ -32,6 +34,7 @@ import {
  SpaceCaslAction,
  SpaceCaslSubject,
 } from "@/features/space/permissions/permissions.type.ts";
+import PageImportModal from "@/features/page/components/page-import-modal.tsx";

 export function SpaceSidebar() {
  const [tree] = useAtom(treeApiAtom);
@ -140,18 +143,20 @@ export function SpaceSidebar() {
              SpaceCaslAction.Manage,
              SpaceCaslSubject.Page,
            ) && (
-              <Tooltip label="Create page" withArrow position="right">
-                <ActionIcon
-                  variant="default"
-                  size={18}
-                  onClick={handleCreatePage}
-                >
-                  <IconPlus
-                    style={{ width: rem(12), height: rem(12) }}
-                    stroke={1.5}
-                  />
-                </ActionIcon>
-              </Tooltip>
+              <Group gap="xs">
+                <SpaceMenu spaceId={space.id} onSpaceSettings={openSettings} />
+
+                <Tooltip label="Create page" withArrow position="right">
+                  <ActionIcon
+                    variant="default"
+                    size={18}
+                    onClick={handleCreatePage}
+                    aria-label="Create page"
+                  >
+                    <IconPlus />
+                  </ActionIcon>
+                </Tooltip>
+              </Group>
            )}
          </Group>

@ -177,3 +182,54 @@ export function SpaceSidebar() {
    </>
  );
 }
+
+interface SpaceMenuProps {
+  spaceId: string;
+  onSpaceSettings: () => void;
+}
+function SpaceMenu({ spaceId, onSpaceSettings }: SpaceMenuProps) {
+  const [importOpened, { open: openImportModal, close: closeImportModal }] =
+    useDisclosure(false);
+
+  return (
+    <>
+      <Menu width={200} shadow="md" withArrow>
+        <Menu.Target>
+          <Tooltip
+            label="Import pages & space settings"
+            withArrow
+            position="top"
+          >
+            <ActionIcon variant="default" size={18} aria-label="Space menu">
+              <IconDots />
+            </ActionIcon>
+          </Tooltip>
+        </Menu.Target>
+
+        <Menu.Dropdown>
+          <Menu.Item
+            onClick={openImportModal}
+            leftSection={<IconArrowDown size={16} />}
+          >
+            Import pages
+          </Menu.Item>
+
+          <Menu.Divider />
+
+          <Menu.Item
+            onClick={onSpaceSettings}
+            leftSection={<IconSettings size={16} />}
+          >
+            Space settings
+          </Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+
+      <PageImportModal
+        spaceId={spaceId}
+        open={importOpened}
+        onClose={closeImportModal}
+      />
+    </>
+  );
+}
--- a/apps/client/src/features/space/components/space-list.tsx
+++ b/apps/client/src/features/space/components/space-list.tsx
@ -3,6 +3,7 @@ import React, { useState } from "react";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query.ts";
 import SpaceSettingsModal from "@/features/space/components/settings-modal.tsx";
 import { useDisclosure } from "@mantine/hooks";
+import { formatMemberCount } from "@/lib";

 export default function SpaceList() {
  const { data, isLoading } = useGetSpacesQuery();
@ -50,7 +51,7 @@ export default function SpaceList() {
                  </Group>
                </Table.Td>

-                <Table.Td>{space.memberCount} members</Table.Td>
+                <Table.Td>{formatMemberCount(space.memberCount)}</Table.Td>
              </Table.Tr>
            ))}
          </Table.Tbody>
--- a/apps/client/src/features/space/components/space-members.tsx
+++ b/apps/client/src/features/space/components/space-members.tsx
@ -1,5 +1,4 @@
 import { Group, Table, Text, Menu, ActionIcon } from "@mantine/core";
-import { useParams } from "react-router-dom";
 import React from "react";
 import { IconDots } from "@tabler/icons-react";
 import { modals } from "@mantine/modals";
--- a/apps/client/src/features/user/atoms/current-user-atom.ts
+++ b/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"),
+);
--- a/apps/client/src/features/user/components/change-password.tsx
+++ b/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>
  );
 }
--- a/apps/client/src/features/user/components/page-width-pref.tsx
+++ b/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"
+    />
+  );
+}
--- a/apps/client/src/features/user/types/user.types.ts
+++ b/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;
+  };
+}
--- a/apps/client/src/features/websocket/types/constants.ts
+++ b/apps/client/src/features/websocket/types/constants.ts
@ -1,3 +1,4 @@
 export const SOCKET_URL = import.meta.env.DEV
-  ? "http://localhost:3000"
+  ? process.env.APP_URL
  : undefined;
+  
--- a/apps/client/src/features/workspace/components/members/components/workspace-invites-table.tsx
+++ b/apps/client/src/features/workspace/components/members/components/workspace-invites-table.tsx
@ -1,4 +1,4 @@
-import { Group, Table, Avatar, Text, Badge, Alert } from "@mantine/core";
+import { Group, Table, Avatar, Text, Alert } from "@mantine/core";
 import { useWorkspaceInvitationsQuery } from "@/features/workspace/queries/workspace-query.ts";
 import React from "react";
 import { getUserRoleLabel } from "@/features/workspace/types/user-role-data.ts";
--- a/apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx
+++ b/apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx
@ -1,4 +1,4 @@
-import { Group, Table, Avatar, Text, Badge } from "@mantine/core";
+import { Group, Table, Text, Badge } from "@mantine/core";
 import {
  useChangeMemberRoleMutation,
  useWorkspaceMembersQuery,
@ -11,11 +11,14 @@ import {
  userRoleData,
 } from "@/features/workspace/types/user-role-data.ts";
 import useUserRole from "@/hooks/use-user-role.tsx";
+import { UserRole } from "@/lib/types.ts";

 export default function WorkspaceMembersTable() {
  const { data, isLoading } = useWorkspaceMembersQuery({ limit: 100 });
  const changeMemberRoleMutation = useChangeMemberRoleMutation();
-  const { isAdmin } = useUserRole();
+  const { isAdmin, isOwner } = useUserRole();
+
+  const assignableUserRoles =  isOwner ? userRoleData : userRoleData.filter((role) => role.value !== UserRole.OWNER);

  const handleRoleChange = async (
    userId: string,
@ -69,7 +72,7 @@ export default function WorkspaceMembersTable() {

                <Table.Td>
                  <RoleSelectMenu
-                    roles={userRoleData}
+                    roles={assignableUserRoles}
                    roleName={getUserRoleLabel(user.role)}
                    onChange={(newRole) =>
                      handleRoleChange(user.id, user.role, newRole)
--- a/apps/client/src/features/workspace/queries/workspace-query.ts
+++ b/apps/client/src/features/workspace/queries/workspace-query.ts
@ -53,9 +53,10 @@ export function useChangeMemberRoleMutation() {
  return useMutation<any, Error, any>({
    mutationFn: (data) => changeMemberRole(data),
    onSuccess: (data, variables) => {
+      // TODO: change in cache instead
      notifications.show({ message: "Member role updated successfully" });
      queryClient.refetchQueries({
-        queryKey: ["workspaceMembers", variables.spaceId],
+        queryKey: ["workspaceMembers"],
      });
    },
    onError: (error) => {
--- a/apps/client/src/lib/api-client.ts
+++ b/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) => {
--- a/apps/client/src/lib/config.ts
+++ b/apps/client/src/lib/config.ts
@ -5,24 +5,29 @@ declare global {
 }

 export function getAppUrl(): string {
-  let appUrl = window.CONFIG?.APP_URL || process.env.APP_URL;
+  //let appUrl = window.CONFIG?.APP_URL || process.env.APP_URL;

-  if (import.meta.env.DEV) {
-    return appUrl || "http://localhost:3000";
-  }
+  // if (import.meta.env.DEV) {
+  //   return appUrl || "http://localhost:3000";
+  //}

  return `${window.location.protocol}//${window.location.host}`;
 }

 export function getBackendUrl(): string {
-  return getAppUrl() + "/api";
+  return getAppUrl() + '/api';
 }

 export function getCollaborationUrl(): string {
-  const COLLAB_PATH = "/collab";
+  const COLLAB_PATH = '/collab';

-  const wsProtocol = getAppUrl().startsWith("https") ? "wss" : "ws";
-  return `${wsProtocol}://${getAppUrl().split("://")[1]}${COLLAB_PATH}`;
+  let url = getAppUrl();
+  if (import.meta.env.DEV) {
+    url = process.env.APP_URL;
+  }
+
+  const wsProtocol = url.startsWith('https') ? 'wss' : 'ws';
+  return `${wsProtocol}://${url.split('://')[1]}${COLLAB_PATH}`;
 }

 export function getAvatarUrl(avatarUrl: string) {
@ -30,17 +35,17 @@ export function getAvatarUrl(avatarUrl: string) {
    return null;
  }

-  if (avatarUrl.startsWith("http")) {
+  if (avatarUrl?.startsWith('http')) {
    return avatarUrl;
  }

-  return getBackendUrl() + "/attachments/img/avatar/" + avatarUrl;
+  return getBackendUrl() + '/attachments/img/avatar/' + avatarUrl;
 }

 export function getSpaceUrl(spaceSlug: string) {
-  return "/s/" + spaceSlug;
+  return '/s/' + spaceSlug;
 }

 export function getFileUrl(src: string) {
-  return src.startsWith("/files/") ? getBackendUrl() + src : src;
+  return src?.startsWith('/files/') ? getBackendUrl() + src : src;
 }
--- a/apps/client/src/lib/types.ts
+++ b/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;
--- a/apps/client/src/lib/utils.ts
+++ b/apps/client/src/lib/utils.ts
@ -25,3 +25,39 @@ export const computeSpaceSlug = (name: string) => {
    return alphanumericName.toLowerCase();
  }
 };
+
+export const formatBytes = (
+  bytes: number,
+  decimalPlaces: number = 2,
+): string => {
+  if (bytes === 0) return "0.0 KB";
+
+  const unitSize = 1024;
+  const precision = decimalPlaces < 0 ? 0 : decimalPlaces;
+  const units = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+  const kilobytes = bytes / unitSize;
+
+  const unitIndex = Math.floor(Math.log(kilobytes) / Math.log(unitSize));
+  const adjustedUnitIndex = Math.max(unitIndex, 0);
+  const adjustedSize = kilobytes / Math.pow(unitSize, adjustedUnitIndex);
+
+  return `${adjustedSize.toFixed(precision)} ${units[adjustedUnitIndex]}`;
+};
+
+export async function svgStringToFile(
+  svgString: string,
+  fileName: string,
+): Promise<File> {
+  const blob = new Blob([svgString], { type: "image/svg+xml" });
+  return new File([blob], fileName, { type: "image/svg+xml" });
+}
+
+export function decodeBase64ToSvgString(base64Data: string): string {
+  const base64Prefix = 'data:image/svg+xml;base64,';
+  if (base64Data.startsWith(base64Prefix)) {
+      base64Data = base64Data.replace(base64Prefix, '');
+  }
+
+  return atob(base64Data);
+}
--- a/apps/client/src/main.tsx
+++ b/apps/client/src/main.tsx
@ -22,6 +22,7 @@ export const queryClient = new QueryClient({
  },
 });

+
 const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement,
 );
--- a/apps/client/src/pages/settings/account/account-preferences.tsx
+++ b/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 />
    </>
  );
 }
--- a/apps/client/src/vite-env.d.ts
+++ b/apps/client/src/vite-env.d.ts
@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare const APP_VERSION: string
--- a/apps/client/vite.config.ts
+++ b/apps/client/vite.config.ts
@ -12,6 +12,7 @@ export default defineConfig(({ mode }) => {
      "process.env": {
        APP_URL,
      },
+      'APP_VERSION': JSON.stringify(process.env.npm_package_version),
    },
    plugins: [react()],
    resolve: {
@ -19,5 +20,13 @@ export default defineConfig(({ mode }) => {
        "@": "/src",
      },
    },
+    server: {
+      proxy: {
+        "/api": {
+          target: APP_URL,
+          changeOrigin: true,
+        },
+      },
+    },
  };
 });
--- a/apps/server/package.json
+++ b/apps/server/package.json
@ -1,6 +1,6 @@
 {
  "name": "server",
-  "version": "0.2.1",
+  "version": "0.3.1",
  "description": "",
  "author": "",
  "private": true,
@ -28,36 +28,38 @@
    "test:e2e": "jest --config test/jest-e2e.json"
  },
  "dependencies": {
-    "@aws-sdk/client-s3": "^3.600.0",
-    "@aws-sdk/s3-request-presigner": "^3.600.0",
+    "@aws-sdk/client-s3": "^3.637.0",
+    "@aws-sdk/s3-request-presigner": "^3.637.0",
    "@casl/ability": "^6.7.1",
+    "@fastify/cookie": "^9.4.0",
    "@fastify/multipart": "^8.3.0",
    "@fastify/static": "^7.0.4",
-    "@nestjs/bullmq": "^10.1.1",
-    "@nestjs/common": "^10.3.9",
-    "@nestjs/config": "^3.2.2",
-    "@nestjs/core": "^10.3.9",
+    "@nestjs/bullmq": "^10.2.1",
+    "@nestjs/common": "^10.4.1",
+    "@nestjs/config": "^3.2.3",
+    "@nestjs/core": "^10.4.1",
    "@nestjs/event-emitter": "^2.0.4",
    "@nestjs/jwt": "^10.2.0",
    "@nestjs/mapped-types": "^2.0.5",
    "@nestjs/passport": "^10.0.3",
-    "@nestjs/platform-fastify": "^10.3.9",
-    "@nestjs/platform-socket.io": "^10.3.9",
-    "@nestjs/websockets": "^10.3.9",
-    "@react-email/components": "0.0.19",
-    "@react-email/render": "^0.0.15",
+    "@nestjs/platform-fastify": "^10.4.1",
+    "@nestjs/platform-socket.io": "^10.4.1",
+    "@nestjs/terminus": "^10.2.3",
+    "@nestjs/websockets": "^10.4.1",
+    "@react-email/components": "0.0.24",
+    "@react-email/render": "^1.0.1",
    "@socket.io/redis-adapter": "^8.3.0",
-    "@types/pg": "^8.11.6",
    "bcrypt": "^5.1.1",
-    "bullmq": "^5.8.2",
+    "bullmq": "^5.12.12",
    "bytes": "^3.1.2",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.14.1",
-    "fastify": "^4.28.0",
    "fix-esm": "^1.0.1",
    "fs-extra": "^11.2.0",
-    "kysely": "^0.27.3",
+    "happy-dom": "^15.7.3",
+    "kysely": "^0.27.4",
    "kysely-migration-cli": "^0.4.2",
+    "marked": "^13.0.3",
    "mime-types": "^2.1.35",
    "nanoid": "^5.0.7",
    "nestjs-kysely": "^1.0.0",
@ -65,46 +67,47 @@
    "passport-jwt": "^4.0.1",
    "pg": "^8.12.0",
    "pg-tsquery": "^8.4.2",
-    "postmark": "^4.0.4",
+    "postmark": "^4.0.5",
    "react": "^18.3.1",
-    "redis": "^4.6.14",
+    "redis": "^4.7.0",
    "reflect-metadata": "^0.2.2",
    "rxjs": "^7.8.1",
    "sanitize-filename-ts": "^1.0.2",
    "socket.io": "^4.7.5",
-    "ws": "^8.17.1"
+    "ws": "^8.18.0"
  },
  "devDependencies": {
-    "@nestjs/cli": "^10.3.2",
-    "@nestjs/schematics": "^10.1.1",
-    "@nestjs/testing": "^10.3.9",
+    "@nestjs/cli": "^10.4.5",
+    "@nestjs/schematics": "^10.1.4",
+    "@nestjs/testing": "^10.4.1",
    "@types/bcrypt": "^5.0.2",
    "@types/bytes": "^3.1.4",
    "@types/debounce": "^1.2.4",
    "@types/fs-extra": "^11.0.4",
    "@types/jest": "^29.5.12",
    "@types/mime-types": "^2.1.4",
-    "@types/node": "^20.14.9",
+    "@types/node": "^22.5.2",
    "@types/nodemailer": "^6.4.15",
    "@types/passport-jwt": "^4.0.1",
+    "@types/pg": "^8.11.8",
    "@types/supertest": "^6.0.2",
-    "@types/ws": "^8.5.10",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
-    "eslint": "^9.5.0",
+    "@types/ws": "^8.5.12",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
+    "eslint": "^9.9.1",
    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.2.1",
    "jest": "^29.7.0",
-    "kysely-codegen": "^0.15.0",
-    "prettier": "^3.3.2",
-    "react-email": "^2.1.4",
+    "kysely-codegen": "^0.16.3",
+    "prettier": "^3.3.3",
+    "react-email": "^3.0.1",
    "source-map-support": "^0.5.21",
    "supertest": "^7.0.0",
-    "ts-jest": "^29.1.5",
+    "ts-jest": "^29.2.5",
    "ts-loader": "^9.5.1",
    "ts-node": "^10.9.2",
    "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.5.2"
+    "typescript": "^5.5.4"
  },
  "jest": {
    "moduleFileExtensions": [
--- a/apps/server/src/app.module.ts
+++ b/apps/server/src/app.module.ts
@ -11,6 +11,9 @@ 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';
+import { ImportModule } from './integrations/import/import.module';

@Module({
  imports: [
@ -21,6 +24,9 @@ import { EventEmitterModule } from '@nestjs/event-emitter';
    WsModule,
    QueueModule,
    StaticModule,
+    HealthModule,
+    ImportModule,
+    ExportModule,
    StorageModule.forRootAsync({
      imports: [EnvironmentModule],
    }),
--- a/apps/server/src/collaboration/collaboration.util.ts
+++ b/apps/server/src/collaboration/collaboration.util.ts
@ -10,28 +10,38 @@ import { Typography } from '@tiptap/extension-typography';
 import { TextStyle } from '@tiptap/extension-text-style';
 import { Color } from '@tiptap/extension-color';
 import { Youtube } from '@tiptap/extension-youtube';
+import Table from '@tiptap/extension-table';
+import TableHeader from '@tiptap/extension-table-header';
 import {
  Callout,
  Comment,
+  CustomCodeBlock,
  Details,
  DetailsContent,
  DetailsSummary,
  LinkExtension,
  MathBlock,
  MathInline,
-  Table,
  TableCell,
-  TableHeader,
  TableRow,
  TiptapImage,
  TiptapVideo,
  TrailingNode,
+  Attachment,
+  Drawio,
+  Excalidraw,
 } from '@docmost/editor-ext';
-import { generateHTML, generateJSON } from '@tiptap/html';
 import { generateText, JSONContent } from '@tiptap/core';
+import { generateHTML } from '../common/helpers/prosemirror/html';
+// @tiptap/html library works best for generating prosemirror json state but not HTML
+// see: https://github.com/ueberdosis/tiptap/issues/5352
+// see:https://github.com/ueberdosis/tiptap/issues/4089
+import { generateJSON } from '@tiptap/html';

 export const tiptapExtensions = [
-  StarterKit,
+  StarterKit.configure({
+    codeBlock: false,
+  }),
  Comment,
  TextAlign,
  TaskList,
@ -58,9 +68,13 @@ export const tiptapExtensions = [
  TiptapImage,
  TiptapVideo,
  Callout,
+  Attachment,
+  CustomCodeBlock,
+  Drawio,
+  Excalidraw,
 ] as any;

-export function jsonToHtml(tiptapJson: JSONContent) {
+export function jsonToHtml(tiptapJson: any) {
  return generateHTML(tiptapJson, tiptapExtensions);
 }

--- a/apps/server/src/common/helpers/prosemirror/html/generateHTML.ts
+++ b/apps/server/src/common/helpers/prosemirror/html/generateHTML.ts
@ -0,0 +1,21 @@
+import { Extensions, getSchema, JSONContent } from '@tiptap/core';
+import { DOMSerializer, Node } from '@tiptap/pm/model';
+import { Window } from 'happy-dom';
+
+export function generateHTML(doc: JSONContent, extensions: Extensions): string {
+  const schema = getSchema(extensions);
+  const contentNode = Node.fromJSON(schema, doc);
+
+  const window = new Window();
+
+  const fragment = DOMSerializer.fromSchema(schema).serializeFragment(
+    contentNode.content,
+    {
+      document: window.document as unknown as Document,
+    },
+  );
+
+  const serializer = new window.XMLSerializer();
+  // @ts-ignore
+  return serializer.serializeToString(fragment as unknown as Node);
+}
--- a/apps/server/src/common/helpers/prosemirror/html/generateJSON.ts
+++ b/apps/server/src/common/helpers/prosemirror/html/generateJSON.ts
@ -0,0 +1,17 @@
+import { Extensions, getSchema } from '@tiptap/core';
+import { DOMParser, ParseOptions } from '@tiptap/pm/model';
+import { Window, DOMParser as HappyDomParser } from 'happy-dom';
+
+export function generateJSON(
+  html: string,
+  extensions: Extensions,
+  options?: ParseOptions,
+): Record<string, any> {
+  const schema = getSchema(extensions);
+
+  const window = new Window();
+  const dom = new HappyDomParser().parseFromString(html, 'text/html').body;
+
+  // @ts-ignore
+  return DOMParser.fromSchema(schema).parse(dom, options).toJSON();
+}
--- a/apps/server/src/common/helpers/prosemirror/html/index.ts
+++ b/apps/server/src/common/helpers/prosemirror/html/index.ts
@ -0,0 +1,2 @@
+export * from './generateHTML.js';
+export * from './generateJSON.js';
--- a/apps/server/src/core/attachment/interceptors/attachment.interceptor.ts
+++ b/apps/server/src/core/attachment/interceptors/attachment.interceptor.ts
@ -9,7 +9,7 @@ import { Observable } from 'rxjs';
 import { FastifyRequest } from 'fastify';

@Injectable()
-export class AttachmentInterceptor implements NestInterceptor {
+export class FileInterceptor implements NestInterceptor {
  public intercept(
    context: ExecutionContext,
    next: CallHandler,
--- a/apps/server/src/common/interceptors/http-response.interceptor.ts
+++ b/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;
--- a/apps/server/src/core/attachment/attachment.constants.ts
+++ b/apps/server/src/core/attachment/attachment.constants.ts
@ -5,10 +5,10 @@ export enum AttachmentType {
  File = 'file',
 }

-export const validImageExtensions = ['.jpg', '.png', '.jpeg', 'gif'];
+export const validImageExtensions = ['.jpg', '.png', '.jpeg'];
 export const MAX_AVATAR_SIZE = '5MB';

-export const InlineFileExtensions = [
+export const inlineFileExtensions = [
  '.jpg',
  '.png',
  '.jpeg',
@ -16,4 +16,4 @@ export const InlineFileExtensions = [
  '.mp4',
  '.mov',
 ];
-export const MAX_FILE_SIZE = '20MB';
+export const MAX_FILE_SIZE = '50MB';
--- a/apps/server/src/core/attachment/attachment.controller.ts
+++ b/apps/server/src/core/attachment/attachment.controller.ts
@ -16,7 +16,7 @@ import {
 } from '@nestjs/common';
 import { AttachmentService } from './services/attachment.service';
 import { FastifyReply } from 'fastify';
-import { AttachmentInterceptor } from './interceptors/attachment.interceptor';
+import { FileInterceptor } from '../../common/interceptors/file.interceptor';
 import * as bytes from 'bytes';
 import { AuthUser } from '../../common/decorators/auth-user.decorator';
 import { AuthWorkspace } from '../../common/decorators/auth-workspace.decorator';
@ -30,6 +30,7 @@ import {
 import { getMimeType } from '../../common/helpers';
 import {
  AttachmentType,
+  inlineFileExtensions,
  MAX_AVATAR_SIZE,
  MAX_FILE_SIZE,
 } from './attachment.constants';
@ -45,7 +46,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()
@ -64,7 +64,7 @@ export class AttachmentController {
  @UseGuards(JwtAuthGuard)
  @HttpCode(HttpStatus.OK)
  @Post('files/upload')
-  @UseInterceptors(AttachmentInterceptor)
+  @UseInterceptors(FileInterceptor)
  async uploadFile(
    @Req() req: any,
    @Res() res: FastifyReply,
@ -76,7 +76,7 @@ export class AttachmentController {
    let file = null;
    try {
      file = await req.file({
-        limits: { fileSize: maxFileSize, fields: 2, files: 1 },
+        limits: { fileSize: maxFileSize, fields: 3, files: 1 },
      });
    } catch (err: any) {
      this.logger.error(err.message);
@ -113,6 +113,11 @@ export class AttachmentController {

    const spaceId = page.spaceId;

+    const attachmentId = file.fields?.attachmentId?.value;
+    if (attachmentId && !isValidUUID(attachmentId)) {
+      throw new BadRequestException('Invalid attachment id');
+    }
+
    try {
      const fileResponse = await this.attachmentService.uploadFile({
        filePromise: file,
@ -120,21 +125,26 @@ export class AttachmentController {
        spaceId: spaceId,
        userId: user.id,
        workspaceId: workspace.id,
+        attachmentId: attachmentId,
      });

      return res.send(fileResponse);
    } catch (err: any) {
+      if (err?.statusCode === 413) {
+        const errMessage = `File too large. Exceeds the ${MAX_FILE_SIZE} limit`;
+        this.logger.error(errMessage);
+        throw new BadRequestException(errMessage);
+      }
      this.logger.error(err);
      throw new BadRequestException('Error processing file upload.');
    }
  }

-  @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,19 +154,38 @@ 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),
+        'Content-Type': attachment.mimeType,
+        'Cache-Control': 'public, max-age=3600',
      });
+
+      if (!inlineFileExtensions.includes(attachment.fileExt)) {
+        res.header(
+          'Content-Disposition',
+          `attachment; filename="${attachment.fileName}"`,
+        );
+      }
+
      return res.send(fileStream);
    } catch (err) {
      this.logger.error(err);
@ -167,7 +196,7 @@ export class AttachmentController {
  @UseGuards(JwtAuthGuard)
  @HttpCode(HttpStatus.OK)
  @Post('attachments/upload-image')
-  @UseInterceptors(AttachmentInterceptor)
+  @UseInterceptors(FileInterceptor)
  async uploadAvatarOrLogo(
    @Req() req: any,
    @Res() res: FastifyReply,
@ -268,6 +297,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) {
--- a/apps/server/src/core/attachment/attachment.utils.ts
+++ b/apps/server/src/core/attachment/attachment.utils.ts
@ -38,7 +38,6 @@ export async function prepareFile(
      mimeType: file.mimetype,
    };
  } catch (error) {
-    console.error('Error in file preparation:', error);
    throw error;
  }
 }
--- a/apps/server/src/core/attachment/services/attachment.service.ts
+++ b/apps/server/src/core/attachment/services/attachment.service.ts
@ -1,4 +1,9 @@
-import { BadRequestException, Injectable, Logger } from '@nestjs/common';
+import {
+  BadRequestException,
+  Injectable,
+  Logger,
+  NotFoundException,
+} from '@nestjs/common';
 import { StorageService } from '../../../integrations/storage/storage.service';
 import { MultipartFile } from '@fastify/multipart';
 import {
@ -36,30 +41,67 @@ export class AttachmentService {
    userId: string;
    spaceId: string;
    workspaceId: string;
+    attachmentId?: string;
  }) {
    const { filePromise, pageId, spaceId, userId, workspaceId } = opts;
    const preparedFile: PreparedFile = await prepareFile(filePromise);

-    const attachmentId = uuid7();
+    let isUpdate = false;
+    let attachmentId = null;
+
+    // passing attachmentId to allow for updating diagrams
+    // instead of creating new files for each save
+    if (opts?.attachmentId) {
+      let existingAttachment = await this.attachmentRepo.findById(
+        opts.attachmentId,
+      );
+      if (!existingAttachment) {
+        throw new NotFoundException(
+          'Existing attachment to overwrite not found',
+        );
+      }
+
+      if (
+        existingAttachment.pageId !== pageId &&
+        existingAttachment.fileExt !== preparedFile.fileExtension &&
+        existingAttachment.workspaceId !== workspaceId
+      ) {
+        throw new BadRequestException('File attachment does not match');
+      }
+      attachmentId = opts.attachmentId;
+      isUpdate = true;
+    } else {
+      attachmentId = uuid7();
+    }
+
    const filePath = `${getAttachmentFolderPath(AttachmentType.File, workspaceId)}/${attachmentId}/${preparedFile.fileName}`;

    await this.uploadToDrive(filePath, preparedFile.buffer);

    let attachment: Attachment = null;
    try {
-      attachment = await this.saveAttachment({
-        attachmentId,
-        preparedFile,
-        filePath,
-        type: AttachmentType.File,
-        userId,
-        spaceId,
-        workspaceId,
-        pageId,
-      });
+      if (isUpdate) {
+        attachment = await this.attachmentRepo.updateAttachment(
+          {
+            updatedAt: new Date(),
+          },
+          attachmentId,
+        );
+      } else {
+        attachment = await this.saveAttachment({
+          attachmentId,
+          preparedFile,
+          filePath,
+          type: AttachmentType.File,
+          userId,
+          spaceId,
+          workspaceId,
+          pageId,
+        });
+      }
    } catch (err) {
      // delete uploaded file on error
-      console.error(err);
+      this.logger.error(err);
    }

    return attachment;
--- a/apps/server/src/core/auth/strategies/jwt.strategy.ts
+++ b/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;
+  }
 }
--- a/apps/server/src/core/core.module.ts
+++ b/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('*');
  }
 }
--- a/apps/server/src/core/user/dto/update-user.dto.ts
+++ b/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;
 }
--- a/apps/server/src/core/user/user.service.ts
+++ b/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,
+    );
+  }
 }
--- a/apps/server/src/core/workspace/services/workspace.service.ts
+++ b/apps/server/src/core/workspace/services/workspace.service.ts
@ -1,5 +1,6 @@
 import {
  BadRequestException,
+  ForbiddenException,
  Injectable,
  NotFoundException,
 } from '@nestjs/common';
@ -217,11 +218,21 @@ export class WorkspaceService {
  ) {
    const user = await this.userRepo.findById(userRoleDto.userId, workspaceId);

+    const newRole = userRoleDto.role.toLowerCase();
+
    if (!user) {
      throw new BadRequestException('Workspace member not found');
    }

-    if (user.role === userRoleDto.role) {
+    // prevent ADMIN from managing OWNER role
+    if (
+      (authUser.role === UserRole.ADMIN && newRole === UserRole.OWNER) ||
+      (authUser.role === UserRole.ADMIN && user.role === UserRole.OWNER)
+    ) {
+      throw new ForbiddenException();
+    }
+
+    if (user.role === newRole) {
      return user;
    }

@ -238,7 +249,7 @@ export class WorkspaceService {

    await this.userRepo.updateUser(
      {
-        role: userRoleDto.role,
+        role: newRole,
      },
      user.id,
      workspaceId,
--- a/apps/server/src/database/database.module.ts
+++ b/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');
--- a/apps/server/src/database/migrations/20240707T145623-drop-redundant-pages-slug_id-index.ts
+++ b/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> {}
--- a/apps/server/src/database/repos/attachment/attachment.repo.ts
+++ b/apps/server/src/database/repos/attachment/attachment.repo.ts
@ -43,8 +43,8 @@ export class AttachmentRepo {
  async updateAttachment(
    updatableAttachment: UpdatableAttachment,
    attachmentId: string,
-  ): Promise<void> {
-    await this.db
+  ): Promise<Attachment> {
+    return await this.db
      .updateTable('attachments')
      .set(updatableAttachment)
      .where('id', '=', attachmentId)
--- a/apps/server/src/database/repos/user/user.repo.ts
+++ b/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,
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Philipinho	be0d97661a	update README	2024-09-04 18:56:14 +01:00
Philipinho	4e2b23c97e	v0.3.1	2024-09-03 10:49:38 +01:00
Philipinho	dc3ce27762	fix collaboration websocket	2024-09-03 10:48:47 +01:00
Philipinho	8af2d4e8cf	file content-disposition	2024-09-02 16:39:07 +01:00
Philipinho	73ddec4ca7	v0.3.0	2024-09-02 15:56:24 +01:00
Philip Okugbe	2b9765fb35	lazy load (#237 )	2024-09-02 15:51:28 +01:00
Philipinho	7fdd355cc3	Reduce version text size	2024-09-02 13:08:01 +01:00
Philipinho	6c6b47599a	update dependencies	2024-09-02 12:43:33 +01:00
Philipinho	7e6a71fa2d	add HR divider to slash menu	2024-09-02 01:28:15 +01:00
Philipinho	1141796f24	Show version * Add default mermaid content	2024-09-01 17:30:34 +01:00
Philipinho	11dbc079be	Add home link to logo	2024-09-01 16:24:20 +01:00
Philip Okugbe	87b99f8646	feat: draw.io (diagrams.net) integration (#215 ) * draw.io init * updates	2024-09-01 12:26:20 +01:00
Philip Okugbe	38e9eef2dc	feat: excalidraw integration (#214 ) * update tiptap version * excalidraw init * cleanup * better file handling and other fixes * use different modal to fix excalidraw cursor position issue * see https://github.com/excalidraw/excalidraw/issues/7312 * fix websocket in vite dev mode * WIP * add align attribute * fix table * menu icons * Render image in excalidraw html * add size to custom SVG components * rewrite undefined font urls	2024-08-31 19:11:07 +01:00
Philip Okugbe	77b541ec71	Fix mime attribute	2024-08-26 17:12:59 +01:00
Philip Okugbe	7dc37b933f	feat: editor file attachments (#194 ) * fix current slider value * WIP * changes to extension attributes * update command title	2024-08-26 12:38:47 +01:00
Philip Okugbe	7e80797e3f	feat: mermaid diagram integration (#202 )	2024-08-24 18:30:07 +01:00
Philip Okugbe	17475bf123	feat: code block language selection (#198 ) * code block language selection * cleanup * Add copy button	2024-08-24 18:12:19 +01:00
Marc	4433d5174d	Add Source Label to Dockerfile (#157 )	2024-08-20 13:09:36 +01:00
sidnelui-krystal	c810d0b314	fix: added env variable for support for forcepathstyle on s3 (#181 )	2024-08-20 13:05:59 +01:00
Philipinho	463480ae67	v0.2.10 (fix)	2024-08-07 23:03:00 +02:00
Philipinho	2449d69fab	v2.9.10	2024-08-07 22:22:49 +02:00
Philip Okugbe	e0d74fcb0e	Fix: editor formatting (#137 ) * reduce space between list items * reduce spacing * Make inline code readable in dark mode * Disable spellcheck in code * fix numbered list in toggle block	2024-08-04 10:06:22 +02:00
Philipinho	4967849e3a	add SMTP_SECURE	2024-08-02 11:19:12 +02:00
Philipinho	0a447e91bb	fix markdown import	2024-07-22 18:39:44 +01:00
Philipinho	48e76aa9f4	v0.2.8	2024-07-22 16:36:06 +01:00
Philipinho	2bd6422a35	Show new workspace role on change	2024-07-22 16:35:00 +01:00
olivierIllogika	407a1aff3b	only owner can assign owner role (#108 ) * backend fix: `b4bc184cb3`	2024-07-22 16:18:09 +01:00
Philipinho	b4bc184cb3	prevent admin role from managing owner role (backend)	2024-07-22 16:16:33 +01:00
Philipinho	109dbdbe02	cleanup log	2024-07-22 15:59:43 +01:00
Philipinho	2df7de5828	fix table commands type error	2024-07-22 15:43:43 +01:00
Philipinho	373fc86e47	preserve details tag in markdown export	2024-07-22 14:09:52 +01:00
Philipinho	5052a9ea40	Support math export in Markdown	2024-07-22 13:20:00 +01:00
Philipinho	cd47c79d86	Make math node handling better	2024-07-22 13:05:07 +01:00
Philipinho	78746938b7	fix export format state	2024-07-22 13:02:13 +01:00
Philipinho	4d2936627c	fix: generate ydoc state during page import to prevent duplicate nodes on the editor	2024-07-22 11:02:43 +01:00
Philipinho	d2ecd28047	fix: localize attachment type * fixes #86	2024-07-22 10:58:32 +01:00
Philipinho	bb92ca75e9	use logger	2024-07-21 21:57:31 +01:00
Philipinho	8f3e2ff663	fix editor placeholder bug	2024-07-21 20:50:08 +01:00
Philipinho	89f6311e46	* Make page import handling better	2024-07-21 20:48:33 +01:00
Philipinho	e5a97d2a26	v0.2.7	2024-07-20 18:21:12 +01:00
Philipinho	7f0fd45f3a	singular & plural count	2024-07-20 18:20:10 +01:00
Philipinho	078959dfa0	v0.2.6	2024-07-20 18:05:56 +01:00
Philip Okugbe	937a07059a	feat: implement Markdown and HTML page imports (#85 ) * page import feature * make file interceptor common * replace @tiptap/html * update tiptap version * reduce table margin * update tiptap version * switch to upstream drag handle lib (fixes table dragging) * WIP * Page import module and other fixes * working page imports * extract page title from h1 heading * finalize page imports * cleanup unused imports * add menu arrow	2024-07-20 17:59:04 +01:00
olivierIllogika	227ac30d5e	add STMP_SECURE and changed auth config (#81 ) * add STMP_SECURE and changed auth config * relocated logic to mail.provider.ts	2024-07-19 12:54:55 +01:00
Philipinho	a2ae341934	v0.2.5	2024-07-12 18:05:59 +01:00
Philipinho	3c70e40d16	add table header by default	2024-07-12 16:53:33 +01:00
Philipinho	14197d7365	add cookie duration	2024-07-12 14:52:09 +01:00
Philip Okugbe	f388540293	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	2024-07-12 14:45:09 +01:00
Philipinho	b43de81013	cleanup	2024-07-07 16:36:14 +01:00
Philipinho	6659adc7fe	v0.2.4	2024-07-07 16:31:28 +01:00
Philip Okugbe	24adff9679	Merge pull request #74 from docmost/remove-redundant-page-slug_id-index remove redundant page slug_id index	2024-07-07 16:29:21 +01:00
Philipinho	e960b8c1a9	create migration	2024-07-07 16:27:43 +01:00
Philipinho	1958067110	Revert "remove redundant slug_id index" This reverts commit `3e519ebcd8`.	2024-07-07 16:16:13 +01:00
Philipinho	3e519ebcd8	remove redundant slug_id index	2024-07-07 16:07:43 +01:00
Philip Okugbe	07cd650205	Merge pull request #73 from docmost/fix/case-insensitive-email make emails case-insensitive	2024-07-07 15:51:14 +01:00
Philipinho	949d782a28	make emails case-insensitive	2024-07-07 15:49:43 +01:00
Philipinho	295d4325bf	update tiptap hocuspocus	2024-07-07 15:36:36 +01:00
Philip Okugbe	40a40bb3c7	Merge pull request #71 from docmost/aws_env_option Add support for AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY environment variables	2024-07-07 09:49:31 +01:00
Philipinho	bc1579b022	fix condition check	2024-07-07 09:48:43 +01:00
Philip Okugbe	85b3073681	Merge pull request #57 from will2hew/will/url-setup CORS setup and Vite devServer proxy	2024-07-07 09:42:51 +01:00
Philipinho	4af3a54649	Allow AWS SDK use AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY	2024-07-07 09:24:19 +01:00
Philip Okugbe	c4c169b17a	Merge pull request #64 from docmost/feat/health Add health check	2024-07-06 01:06:17 +01:00
Philipinho	a0536d852f	cleanup indicators	2024-07-05 23:05:19 +01:00
Philipinho	f12f93b373	increase startup db retry limit	2024-07-05 19:00:55 +01:00
Philipinho	35dcd5f254	refactor health module	2024-07-05 18:59:26 +01:00
Philipinho	9496ec9b57	prevent database error from crashing server	2024-07-05 18:59:16 +01:00
Will H	5ace7616d0	cors setup and dev server proxy	2024-07-05 16:25:00 +12:00
Will H	ce6a05ab66	cr - add redis check and logging	2024-07-05 13:40:51 +12:00
Philipinho	7383673636	v0.2.3	2024-07-05 00:49:08 +01:00
Philip Okugbe	3e7b2495c5	Merge pull request #51 from docmost/private-attachments make page attachments private	2024-07-05 00:47:51 +01:00
Philip Okugbe	0fc8edeb52	Merge pull request #55 from docmost/fix/bug-fixes Fix: missing tree, editor font and responsive recent pages	2024-07-05 00:45:32 +01:00
Philipinho	bbf865b2f6	cleanup debug log	2024-07-05 00:41:30 +01:00
Philipinho	0c622a0dc1	use sane font-weight	2024-07-05 00:33:59 +01:00
Philipinho	f52cd011a4	remove unused imports	2024-07-05 00:33:12 +01:00
Philipinho	a4d53468c3	fix tree state	2024-07-05 00:30:56 +01:00
Will H	66773dfaca	Add health check and dev script	2024-07-05 10:10:08 +12:00
Philipinho	cc93abfb7e	make pages table responsive	2024-07-04 21:13:43 +01:00
Philipinho	13f26f9c31	make page attachments private	2024-07-04 16:01:35 +01:00
Philipinho	a4ec2dac6c	v0.2.2	2024-07-03 13:01:00 +01:00
Philip Okugbe	681d7c789c	merge: fix/media-in-firefox fix media visibility in firefox	2024-07-03 11:57:03 +01:00
Philipinho	9f583174a9	fix media visibility in firefox	2024-07-03 11:53:09 +01:00
Philip Okugbe	05633082c5	feat/fuzzy-match-menu added fuzzy matching logic for menu search	2024-07-03 11:25:21 +01:00
Philip Okugbe	491fbad4ac	feat/full-width add full page width user preference	2024-07-03 11:24:32 +01:00
Philipinho	e824aeced7	Add width option to page menu	2024-07-03 11:23:42 +01:00
Philipinho	8f056d1071	add full page width preference	2024-07-03 11:00:42 +01:00
SurajJadhav7	99cf6dab62	added fuzzy matching logic for menu search	2024-07-01 16:49:36 +05:30