Merge branch 'docmost:main' into Merged-Downstream

* feat: make space slug editable

* feat: delete space

* client

.env.example

@@ -44,6 +44,7 @@ SMTP_PORT=587
 SMTP_USERNAME=
 SMTP_PASSWORD=
 SMTP_SECURE=false
+SMTP_IGNORETLS=false
 
 # Postmark driver config
 POSTMARK_TOKEN=

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)

apps/client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.3.1",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

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

@@ -5,14 +5,15 @@ import {
   Badge,
   Table,
   ScrollArea,
-} from "@mantine/core";
+  ActionIcon,
-import { Link } from "react-router-dom";
+} from '@mantine/core';
-import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
+import { Link } from 'react-router-dom';
-import { buildPageUrl } from "@/features/page/page.utils.ts";
+import PageListSkeleton from '@/components/ui/page-list-skeleton.tsx';
-import { formattedDate } from "@/lib/time.ts";
+import { buildPageUrl } from '@/features/page/page.utils.ts';
-import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
+import { formattedDate } from '@/lib/time.ts';
-import { IconFileDescription } from "@tabler/icons-react";
+import { useRecentChangesQuery } from '@/features/page/queries/page-query.ts';
-import { getSpaceUrl } from "@/lib/config.ts";
+import { IconFileDescription } from '@tabler/icons-react';
+import { getSpaceUrl } from '@/lib/config.ts';
 
 interface Props {
   spaceId?: string;
@@ -40,10 +41,14 @@ export default function RecentChanges({ spaceId }: Props) {
                   to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
                 >
                   <Group wrap="nowrap">
-                    {page.icon || <IconFileDescription size={18} />}
+                    {page.icon || (
+                      <ActionIcon variant='transparent' color='gray' size={18}>
+                        <IconFileDescription size={18} />
+                      </ActionIcon>
+                    )}
 
                     <Text fw={500} size="md" lineClamp={1}>
-                      {page.title || "Untitled"}
+                      {page.title || 'Untitled'}
                     </Text>
                   </Group>
                 </UnstyledButton>
@@ -55,7 +60,7 @@ export default function RecentChanges({ spaceId }: Props) {
                     variant="light"
                     component={Link}
                     to={getSpaceUrl(page?.space.slug)}
-                    style={{ cursor: "pointer" }}
+                    style={{ cursor: 'pointer' }}
                   >
                     {page?.space.name}
                   </Badge>

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

@@ -9,6 +9,7 @@ import {
   IconInfoCircle,
   IconList,
   IconListNumbers,
+  IconListTree,
   IconMath,
   IconMathFunction,
   IconMovie,
@@ -96,6 +97,20 @@ const CommandGroups: SlashMenuGroupedItemsType = {
           .run();
       },
     },
+    {
+      title: "Table of Contents",
+      description: "Create a table of contents.",
+      searchTerms: ["table", "contents", "list"],
+      icon: IconListTree,
+      command: ({ editor, range }: CommandProps) => {
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .toggleTableOfContents()
+          .run();
+      },
+    },
     {
       title: "Bullet list",
       description: "Create a simple bullet list.",

apps/client/src/features/editor/components/table-of-contents/table-of-contents-menu.tsx

@@ -0,0 +1,124 @@
+import { BubbleMenu as BaseBubbleMenu, findParentNode, posToDOMRect } from "@tiptap/react";
+import React, { 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 {
+    ActionIcon,
+    DividerVariant,
+    Group,
+    SegmentedControl,
+    Select,
+    Tooltip,
+    Text,
+    Checkbox,
+    Card,
+    Fieldset,
+} from "@mantine/core";
+import { IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignRight } from "@tabler/icons-react";
+import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
+
+export function TableOfContentsMenu({ editor }: EditorMenuProps) {
+    const shouldShow = useCallback(
+        ({ state }: ShouldShowProps) => {
+            if (!state) {
+                return false;
+            }
+
+            return editor.isActive("tableOfContents");
+        },
+        [editor]
+    );
+
+    const getReferenceClientRect = useCallback(() => {
+        const { selection } = editor.state;
+        const predicate = (node: PMNode) => node.type.name === "tableOfContents";
+        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 setDividerType = useCallback(
+        (type: DividerVariant) => {
+            editor.chain().focus(undefined, { scrollIntoView: false }).setDividerType(type).run();
+        },
+        [editor]
+    );
+
+    const setTableType = useCallback(
+        (type: "Contents" | "Child Pages") => {
+            editor.chain().focus(undefined, { scrollIntoView: false }).setTableType(type).run();
+        },
+        [editor]
+    );
+
+    const setPageIcons = useCallback(
+        (icons: boolean) => {
+            editor.chain().focus(undefined, { scrollIntoView: false }).setPageIcons(icons).run();
+        },
+        [editor]
+    );
+
+    return (
+        <BaseBubbleMenu
+            editor={editor}
+            pluginKey={`tableOfContents-menu}`}
+            updateDelay={0}
+            tippyOptions={{
+                getReferenceClientRect,
+                offset: [0, 8],
+                zIndex: 99,
+                popperOptions: {
+                    modifiers: [{ name: "flip", enabled: false }],
+                },
+                plugins: [sticky],
+                sticky: "popper",
+                maxWidth: 500,
+            }}
+            shouldShow={shouldShow}
+        >
+            <Fieldset variant="filled" p="xs">
+                <Group gap="xs">
+                    <Tooltip position="top" label="Divider type">
+                        <Select
+                            w={100}
+                            value={editor.getAttributes("tableOfContents").dividerType}
+                            data={[
+                                { value: "solid", label: "Solid" },
+                                { value: "dashed", label: "Dashed" },
+                                { value: "dotted", label: "Dotted" },
+                                { value: "none", label: "None" },
+                            ]}
+                            onChange={(_value, option) => setDividerType(_value as DividerVariant)}
+                        />
+                    </Tooltip>
+                    <Tooltip position="top" label="Table type">
+                        <SegmentedControl
+                            value={editor.getAttributes("tableOfContents").tableType}
+                            data={["Contents", "Child Pages"]}
+                            onChange={(value: "Contents" | "Child Pages") => setTableType(value)}
+                        />
+                    </Tooltip>
+                    {editor.getAttributes("tableOfContents").tableType == "Child Pages" && (
+                        <Tooltip position="top" label="Show page icons">
+                            <Group gap="xs">
+                                <Text size="sm">Page Icons</Text>
+                                <Checkbox
+                                    checked={editor.getAttributes("tableOfContents").icons}
+                                    onChange={(event) => setPageIcons(event.currentTarget.checked)}
+                                />
+                            </Group>
+                        </Tooltip>
+                    )}
+                </Group>
+            </Fieldset>
+        </BaseBubbleMenu>
+    );
+}
+
+export default TableOfContentsMenu;

apps/client/src/features/editor/components/table-of-contents/table-of-contents-view.tsx

@@ -0,0 +1,199 @@
+import { JSONContent, NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import {
+    IconAlertTriangleFilled,
+    IconCircleCheckFilled,
+    IconCircleXFilled,
+    IconInfoCircleFilled,
+} from "@tabler/icons-react";
+import { Alert, Divider, Group, Stack, Title, UnstyledButton, Text, DividerVariant } from "@mantine/core";
+import { CalloutType } from "@docmost/editor-ext";
+import React, { useEffect, useMemo, useState } from "react";
+import { TextSelection } from "@tiptap/pm/state";
+import classes from "./table-of-contents.module.css";
+import clsx from "clsx";
+import { useGetRootSidebarPagesQuery, usePageQuery } from "@/features/page/queries/page-query";
+import { IPage, SidebarPagesParams } from "@/features/page/types/page.types";
+import { queryClient } from "@/main";
+import { getSidebarPages } from "@/features/page/services/page-service";
+import { useToggle } from "@mantine/hooks";
+import { useNavigate, useParams } from "react-router-dom";
+import { buildPageUrl } from "@/features/page/page.utils";
+import { string } from "zod";
+
+export default function TableOfContentsView(props: NodeViewProps) {
+    const { node, editor, selected } = props;
+
+    const { dividerType, tableType, icons } = node.attrs as {
+        dividerType: DividerVariant & "none";
+        tableType: "Contents" | "Child Pages";
+        icons: boolean;
+    };
+
+    const pageId = editor.storage?.pageId;
+
+    const { data: page } = usePageQuery({
+        pageId: pageId,
+    });
+
+    const { pageSlug, spaceSlug } = useParams();
+
+    const navigate = useNavigate();
+
+    const [childPages, setChildPages] = useState<JSX.Element[]>([]);
+    const [headings, setHeadings] = useState<JSX.Element[]>([]);
+
+    const fetchChildren = async (params: SidebarPagesParams) => {
+        return await queryClient.fetchQuery({
+            queryKey: ["toc-child-pages", params],
+            queryFn: () => getSidebarPages(params),
+            staleTime: 10 * 60 * 1000,
+        });
+    };
+
+    // Max depth to prevent infinite recursion errors
+    const MAX_RECURSION_DEPTH = 10;
+
+    const fetchAllChildren = async (
+        currentPage: IPage,
+        pages: (IPage & { depth: number })[],
+        depth: number = 0
+    ): Promise<void> => {
+        // Prevent infinite recursion
+        if (depth > MAX_RECURSION_DEPTH) {
+            console.warn("Max recursion depth reached");
+            return;
+        }
+
+        const params: SidebarPagesParams = {
+            pageId: currentPage.id,
+            spaceId: currentPage.spaceId,
+        };
+
+        const result = await fetchChildren(params);
+        const children = result.items;
+
+        // Store the children in the relationships map
+        for (let child of children) pages.push({ ...child, depth });
+
+        // Use requestIdleCallback to allow the browser to perform other tasks
+        for (const child of children) {
+            if (child.hasChildren) {
+                await new Promise((resolve) =>
+                    requestIdleCallback(() => {
+                        fetchAllChildren(child, pages, depth + 1).then(resolve);
+                    })
+                );
+            }
+        }
+    };
+
+    useEffect(() => {
+        if (!page) return;
+
+        (async () => {
+            if (tableType == "Child Pages") {
+                // Initialize the child pagse array
+                const pages: (IPage & { depth: number })[] = [];
+
+                // Fetch all children recursively
+                await fetchAllChildren(page, pages);
+
+                const tocChildPages: JSX.Element[] = pages.map((value, index) => (
+                    <UnstyledButton
+                        key={`toc-${index}`}
+                        className={classes.heading}
+                        style={{
+                            marginLeft: `calc(${value.depth} * var(--mantine-spacing-md))`,
+                        }}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (e.button != 0) return;
+
+                            const pageSlug = buildPageUrl(spaceSlug, value.slugId, value.title);
+
+                            // opted to not use "replace" so that browser back button workers properly
+                            navigate(pageSlug);
+                        }}
+                    >
+                        <Group>
+                            <Text m={6}>
+                                {icons ? value.icon : ""} {value.title}
+                            </Text>
+                            {dividerType != "none" && <Divider className={classes.divider} variant={dividerType} />}
+                        </Group>
+                    </UnstyledButton>
+                ));
+
+                setChildPages(tocChildPages);
+            } else {
+                const contentHeadings = editor.getJSON().content?.filter((c) => c.type == "heading");
+
+                const tocHeadings: JSX.Element[] = contentHeadings.map((value, index) => (
+                    <UnstyledButton
+                        key={`toc-${index}`}
+                        className={classes.heading}
+                        style={{
+                            marginLeft: `calc(${value.attrs?.level - 1} * var(--mantine-spacing-md))`,
+                        }}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (e.button != 0) return;
+
+                            if (editor) {
+                                const headings = editor.view.dom.querySelectorAll("h1, h2, h3, h4, h5, h6");
+                                const clickedHeading = headings[index];
+
+                                // find selected heading position in DOM relative to editors view
+                                const pos = editor.view.posAtDOM(clickedHeading, 0);
+
+                                // start new state transaction on editors view state
+                                const tr = editor.view.state.tr;
+                                // move editor cursor to heading
+                                tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
+                                editor.view.dispatch(tr);
+                                editor.view.focus();
+
+                                window.scrollTo({
+                                    top:
+                                        clickedHeading.getBoundingClientRect().top -
+                                        // subtract half of elements height to avoid viewport clipping
+                                        clickedHeading.getBoundingClientRect().height / 2 -
+                                        // substract headers height so that heading is visible after scroll.
+                                        // getComputedStyles is not evaluating "--app-shell-header-height" so have hardcoded pixels.
+                                        45 * 2 +
+                                        window.scrollY,
+                                    behavior: "smooth",
+                                });
+                            }
+                        }}
+                    >
+                        <Group>
+                            <Text m={6}>{value.content?.at(0).text}</Text>
+                            {dividerType != "none" && <Divider className={classes.divider} variant={dividerType} />}
+                        </Group>
+                    </UnstyledButton>
+                ));
+
+                setHeadings(tocHeadings);
+            }
+        })();
+    }, [page == undefined, dividerType, tableType, icons]);
+
+    return (
+        <NodeViewWrapper>
+            <NodeViewContent />
+            <Stack
+                gap={0}
+                className={clsx(selected ? "ProseMirror-selectednode" : "")}
+                contentEditable={false}
+                onContextMenu={(e) => e.preventDefault()}
+            >
+                {tableType == "Contents" && headings}
+
+                {tableType == "Child Pages" && childPages}
+            </Stack>
+        </NodeViewWrapper>
+    );
+}

apps/client/src/features/editor/components/table-of-contents/table-of-contents.module.css

@@ -0,0 +1,9 @@
+.divider {
+    flex: 1 0 0;
+}
+
+.heading {
+    :hover {
+        background-color: var(--mantine-color-default-hover);
+    }
+}

apps/client/src/features/editor/extensions/extensions.ts

@@ -35,6 +35,7 @@ import {
   CustomCodeBlock,
   Drawio,
   Excalidraw,
+  TableofContents,
 } from "@docmost/editor-ext";
 import {
   randomElement,
@@ -54,6 +55,7 @@ import CodeBlockView from "@/features/editor/components/code-block/code-block-vi
 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";
+import TableOfContentsView from "../components/table-of-contents/table-of-contents-view";
 
 const lowlight = createLowlight(common);
 lowlight.register("mermaid", plaintext);
@@ -162,6 +164,9 @@ export const mainExtensions = [
   Excalidraw.configure({
     view: ExcalidrawView,
   }),
+  TableofContents.configure({
+    view: TableOfContentsView
+  })
 ] as any;
 
 type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];

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

@@ -39,6 +39,7 @@ import {
 import LinkMenu from "@/features/editor/components/link/link-menu.tsx";
 import ExcalidrawMenu from "./components/excalidraw/excalidraw-menu";
 import DrawioMenu from "./components/drawio/drawio-menu";
+import TableOfContentsMenu from "./components/table-of-contents/table-of-contents-menu";
 
 interface PageEditorProps {
   pageId: string;
@@ -175,6 +176,7 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
               <CalloutMenu editor={editor} />
               <ExcalidrawMenu editor={editor} />
               <DrawioMenu editor={editor} />
+              <TableOfContentsMenu editor={editor} />
               <LinkMenu editor={editor} appendTo={menuContainerRef} />
             </div>
           )}

apps/client/src/features/group/queries/group-query.ts

@@ -3,8 +3,8 @@ import {
   useQuery,
   useQueryClient,
   UseQueryResult,
-} from "@tanstack/react-query";
+} from '@tanstack/react-query';
-import { IGroup } from "@/features/group/types/group.types";
+import { IGroup } from '@/features/group/types/group.types';
 import {
   addGroupMember,
   createGroup,
@@ -14,22 +14,22 @@ import {
   getGroups,
   removeGroupMember,
   updateGroup,
-} from "@/features/group/services/group-service";
+} from '@/features/group/services/group-service';
-import { notifications } from "@mantine/notifications";
+import { notifications } from '@mantine/notifications';
-import { QueryParams } from "@/lib/types.ts";
+import { QueryParams } from '@/lib/types.ts';
 
 export function useGetGroupsQuery(
-  params?: QueryParams,
+  params?: QueryParams
 ): UseQueryResult<any, Error> {
   return useQuery({
-    queryKey: ["groups", params],
+    queryKey: ['groups', params],
     queryFn: () => getGroups(params),
   });
 }
 
 export function useGroupQuery(groupId: string): UseQueryResult<IGroup, Error> {
   return useQuery({
-    queryKey: ["groups", groupId],
+    queryKey: ['groups', groupId],
     queryFn: () => getGroupById(groupId),
     enabled: !!groupId,
   });
@@ -37,7 +37,7 @@ export function useGroupQuery(groupId: string): UseQueryResult<IGroup, Error> {
 
 export function useGroupMembersQuery(groupId: string) {
   return useQuery({
-    queryKey: ["groupMembers", groupId],
+    queryKey: ['groupMembers', groupId],
     queryFn: () => getGroupMembers(groupId),
     enabled: !!groupId,
   });
@@ -47,10 +47,10 @@ export function useCreateGroupMutation() {
   return useMutation<IGroup, Error, Partial<IGroup>>({
     mutationFn: (data) => createGroup(data),
     onSuccess: () => {
-      notifications.show({ message: "Group created successfully" });
+      notifications.show({ message: 'Group created successfully' });
     },
     onError: () => {
-      notifications.show({ message: "Failed to create group", color: "red" });
+      notifications.show({ message: 'Failed to create group', color: 'red' });
     },
   });
 }
@@ -61,14 +61,14 @@ export function useUpdateGroupMutation() {
   return useMutation<IGroup, Error, Partial<IGroup>>({
     mutationFn: (data) => updateGroup(data),
     onSuccess: (data, variables) => {
-      notifications.show({ message: "Group updated successfully" });
+      notifications.show({ message: 'Group updated successfully' });
       queryClient.invalidateQueries({
-        queryKey: ["group", variables.groupId],
+        queryKey: ['group', variables.groupId],
       });
     },
     onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
+      const errorMessage = error['response']?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      notifications.show({ message: errorMessage, color: 'red' });
     },
   });
 }
@@ -79,17 +79,19 @@ export function useDeleteGroupMutation() {
   return useMutation({
     mutationFn: (groupId: string) => deleteGroup({ groupId }),
     onSuccess: (data, variables) => {
-      notifications.show({ message: "Group deleted successfully" });
+      notifications.show({ message: 'Group deleted successfully' });
 
-      const groups = queryClient.getQueryData(["groups"]) as any;
+      const groups = queryClient.getQueryData(['groups']) as any;
       if (groups) {
-        groups.items?.filter((group: IGroup) => group.id !== variables);
+        groups.items = groups.items?.filter(
-        queryClient.setQueryData(["groups"], groups);
+          (group: IGroup) => group.id !== variables
+        );
+        queryClient.setQueryData(['groups'], groups);
       }
     },
     onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
+      const errorMessage = error['response']?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      notifications.show({ message: errorMessage, color: 'red' });
     },
   });
 }
@@ -100,15 +102,15 @@ export function useAddGroupMemberMutation() {
   return useMutation<void, Error, { groupId: string; userIds: string[] }>({
     mutationFn: (data) => addGroupMember(data),
     onSuccess: (data, variables) => {
-      notifications.show({ message: "Added successfully" });
+      notifications.show({ message: 'Added successfully' });
       queryClient.invalidateQueries({
-        queryKey: ["groupMembers", variables.groupId],
+        queryKey: ['groupMembers', variables.groupId],
       });
     },
     onError: () => {
       notifications.show({
-        message: "Failed to add group members",
+        message: 'Failed to add group members',
-        color: "red",
+        color: 'red',
       });
     },
   });
@@ -127,14 +129,14 @@ export function useRemoveGroupMemberMutation() {
   >({
     mutationFn: (data) => removeGroupMember(data),
     onSuccess: (data, variables) => {
-      notifications.show({ message: "Removed successfully" });
+      notifications.show({ message: 'Removed successfully' });
       queryClient.invalidateQueries({
-        queryKey: ["groupMembers", variables.groupId],
+        queryKey: ['groupMembers', variables.groupId],
       });
     },
     onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
+      const errorMessage = error['response']?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      notifications.show({ message: errorMessage, color: 'red' });
     },
   });
 }

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

@@ -64,7 +64,7 @@ export async function exportPage(data: IExportPageParams): Promise<void> {
     .split("filename=")[1]
     .replace(/"/g, "");
 
-  saveAs(req.data, fileName);
+  saveAs(req.data, decodeURIComponent(fileName));
 }
 
 export async function importPage(file: File, spaceId: string) {
@@ -81,15 +81,18 @@ export async function importPage(file: File, spaceId: string) {
   return req.data;
 }
 
-export async function uploadFile(file: File, pageId: string, attachmentId?: string): Promise<IAttachment> {
+export async function uploadFile(
+  file: File,
+  pageId: string,
+  attachmentId?: string,
+): Promise<IAttachment> {
   const formData = new FormData();
-  if(attachmentId){
+  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",

apps/client/src/features/space/components/delete-space-modal.tsx

@@ -0,0 +1,86 @@
+import { Button, Divider, Group, Modal, Text, TextInput } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { useDeleteSpaceMutation } from '../queries/space-query';
+import { useField } from '@mantine/form';
+import { ISpace } from '../types/space.types';
+import { useNavigate } from 'react-router-dom';
+import APP_ROUTE from '@/lib/app-route';
+
+interface DeleteSpaceModalProps {
+  space: ISpace;
+}
+
+export default function DeleteSpaceModal({ space }: DeleteSpaceModalProps) {
+  const [opened, { open, close }] = useDisclosure(false);
+  const deleteSpaceMutation = useDeleteSpaceMutation();
+  const navigate = useNavigate();
+
+  const confirmNameField = useField({
+    initialValue: '',
+    validateOnChange: true,
+    validate: (value) =>
+      value.trim().toLowerCase() === space.name.trim().toLocaleLowerCase()
+        ? null
+        : 'Names do not match',
+  });
+
+  const handleDelete = async () => {
+    if (
+      confirmNameField.getValue().trim().toLowerCase() !==
+      space.name.trim().toLowerCase()
+    ) {
+      confirmNameField.validate();
+      return;
+    }
+
+    try {
+      // pass slug too so we can clear the local cache
+      await deleteSpaceMutation.mutateAsync({ id: space.id, slug: space.slug });
+      navigate(APP_ROUTE.HOME);
+    } catch (error) {
+      console.error('Failed to delete space', error);
+    }
+  };
+
+  return (
+    <>
+      <Button onClick={open} variant="light" color="red">
+        Delete
+      </Button>
+
+      <Modal
+        opened={opened}
+        onClose={close}
+        title="Are you sure you want to delete this space?"
+      >
+        <Divider size="xs" mb="xs" />
+        <Text>
+          All pages, comments, attachments and permissions in this space will be
+          deleted irreversibly.
+        </Text>
+        <Text mt="sm">
+          Type the space name{' '}
+          <Text span fw={500}>
+            '{space.name}'
+          </Text>{' '}
+          to confirm your action.
+        </Text>
+        <TextInput
+          {...confirmNameField.getInputProps()}
+          variant="filled"
+          placeholder="Confirm space name"
+          py="sm"
+          data-autofocus
+        />
+        <Group justify="flex-end" mt="md">
+          <Button onClick={close} variant="default">
+            Cancel
+          </Button>
+          <Button onClick={handleDelete} color="red">
+            Confirm
+          </Button>
+        </Group>
+      </Modal>
+    </>
+  );
+}

apps/client/src/features/space/components/edit-space-form.tsx

@@ -8,6 +8,14 @@ import { ISpace } from "@/features/space/types/space.types.ts";
 const formSchema = z.object({
   name: z.string().min(2).max(50),
   description: z.string().max(250),
+  slug: z
+    .string()
+    .min(2)
+    .max(50)
+    .regex(
+      /^[a-zA-Z0-9]+$/,
+      "Space slug must be alphanumeric. No special characters",
+    ),
 });
 
 type FormValues = z.infer<typeof formSchema>;
@@ -23,12 +31,14 @@ export function EditSpaceForm({ space, readOnly }: EditSpaceFormProps) {
     initialValues: {
       name: space?.name,
       description: space?.description || "",
+      slug: space.slug,
     },
   });
 
   const handleSubmit = async (values: {
     name?: string;
     description?: string;
+    slug?: string;
   }) => {
     const spaceData: Partial<ISpace> = {
       spaceId: space.id,
@@ -40,6 +50,10 @@ export function EditSpaceForm({ space, readOnly }: EditSpaceFormProps) {
       spaceData.description = values.description;
     }
 
+    if (form.isDirty("slug")) {
+      spaceData.slug = values.slug;
+    }
+
     await updateSpaceMutation.mutateAsync(spaceData);
     form.resetDirty();
   };
@@ -62,8 +76,8 @@ export function EditSpaceForm({ space, readOnly }: EditSpaceFormProps) {
               id="slug"
               label="Slug"
               variant="filled"
-              readOnly
+              readOnly={readOnly}
-              value={space.slug}
+              {...form.getInputProps("slug")}
             />
 
             <Textarea

apps/client/src/features/space/components/space-details.tsx

@@ -1,7 +1,8 @@
-import React from "react";
+import React from 'react';
-import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
+import { useSpaceQuery } from '@/features/space/queries/space-query.ts';
-import { EditSpaceForm } from "@/features/space/components/edit-space-form.tsx";
+import { EditSpaceForm } from '@/features/space/components/edit-space-form.tsx';
-import { Text } from "@mantine/core";
+import { Divider, Group, Text } from '@mantine/core';
+import DeleteSpaceModal from './delete-space-modal';
 
 interface SpaceDetailsProps {
   spaceId: string;
@@ -18,6 +19,23 @@ export default function SpaceDetails({ spaceId, readOnly }: SpaceDetailsProps) {
             Details
           </Text>
           <EditSpaceForm space={space} readOnly={readOnly} />
+
+          {!readOnly && (
+            <>
+              <Divider my="lg" />
+
+              <Group justify="space-between" wrap="nowrap" gap="xl">
+                <div>
+                  <Text size="md">Delete space</Text>
+                  <Text size="sm" c="dimmed">
+                    Delete this space with all its pages and data.
+                  </Text>
+                </div>
+
+                <DeleteSpaceModal space={space} />
+              </Group>
+            </>
+          )}
         </div>
       )}
     </>

apps/client/src/features/space/queries/space-query.ts

@@ -3,14 +3,14 @@ import {
   useQuery,
   useQueryClient,
   UseQueryResult,
-} from "@tanstack/react-query";
+} from '@tanstack/react-query';
 import {
   IAddSpaceMember,
   IChangeSpaceMemberRole,
   IRemoveSpaceMember,
   ISpace,
   ISpaceMember,
-} from "@/features/space/types/space.types";
+} from '@/features/space/types/space.types';
 import {
   addSpaceMember,
   changeMemberRole,
@@ -20,23 +20,24 @@ import {
   removeSpaceMember,
   createSpace,
   updateSpace,
-} from "@/features/space/services/space-service.ts";
+  deleteSpace,
-import { notifications } from "@mantine/notifications";
+} from '@/features/space/services/space-service.ts';
-import { IPagination } from "@/lib/types.ts";
+import { notifications } from '@mantine/notifications';
+import { IPagination } from '@/lib/types.ts';
 
 export function useGetSpacesQuery(): UseQueryResult<
   IPagination<ISpace>,
   Error
 > {
   return useQuery({
-    queryKey: ["spaces"],
+    queryKey: ['spaces'],
     queryFn: () => getSpaces(),
   });
 }
 
 export function useSpaceQuery(spaceId: string): UseQueryResult<ISpace, Error> {
   return useQuery({
-    queryKey: ["spaces", spaceId],
+    queryKey: ['spaces', spaceId],
     queryFn: () => getSpaceById(spaceId),
     enabled: !!spaceId,
     staleTime: 5 * 60 * 1000,
@@ -50,22 +51,22 @@ export function useCreateSpaceMutation() {
     mutationFn: (data) => createSpace(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ["spaces"],
+        queryKey: ['spaces'],
       });
-      notifications.show({ message: "Space created successfully" });
+      notifications.show({ message: 'Space created successfully' });
     },
     onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
+      const errorMessage = error['response']?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      notifications.show({ message: errorMessage, color: 'red' });
     },
   });
 }
 
 export function useGetSpaceBySlugQuery(
-  spaceId: string,
+  spaceId: string
 ): UseQueryResult<ISpace, Error> {
   return useQuery({
-    queryKey: ["spaces", spaceId],
+    queryKey: ['spaces', spaceId],
     queryFn: () => getSpaceById(spaceId),
     enabled: !!spaceId,
     staleTime: 5 * 60 * 1000,
@@ -78,34 +79,64 @@ export function useUpdateSpaceMutation() {
   return useMutation<ISpace, Error, Partial<ISpace>>({
     mutationFn: (data) => updateSpace(data),
     onSuccess: (data, variables) => {
-      notifications.show({ message: "Space updated successfully" });
+      notifications.show({ message: 'Space updated successfully' });
 
       const space = queryClient.getQueryData([
-        "space",
+        'space',
         variables.spaceId,
       ]) as ISpace;
       if (space) {
         const updatedSpace = { ...space, ...data };
-        queryClient.setQueryData(["space", variables.spaceId], updatedSpace);
+        queryClient.setQueryData(['space', variables.spaceId], updatedSpace);
-        queryClient.setQueryData(["space", data.slug], updatedSpace);
+        queryClient.setQueryData(['space', data.slug], updatedSpace);
       }
 
       queryClient.invalidateQueries({
-        queryKey: ["spaces"],
+        queryKey: ['spaces'],
       });
     },
     onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
+      const errorMessage = error['response']?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      notifications.show({ message: errorMessage, color: 'red' });
+    },
+  });
+}
+
+export function useDeleteSpaceMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: Partial<ISpace>) => deleteSpace(data.id),
+    onSuccess: (data, variables) => {
+      notifications.show({ message: 'Space deleted successfully' });
+
+      if (variables.slug) {
+        queryClient.removeQueries({
+          queryKey: ['spaces', variables.slug],
+          exact: true,
+        });
+      }
+
+      const spaces = queryClient.getQueryData(['spaces']) as any;
+      if (spaces) {
+        spaces.items = spaces.items?.filter(
+          (space: ISpace) => space.id !== variables.id
+        );
+        queryClient.setQueryData(['spaces'], spaces);
+      }
+    },
+    onError: (error) => {
+      const errorMessage = error['response']?.data?.message;
+      notifications.show({ message: errorMessage, color: 'red' });
     },
   });
 }
 
 export function useSpaceMembersQuery(
-  spaceId: string,
+  spaceId: string
 ): UseQueryResult<IPagination<ISpaceMember>, Error> {
   return useQuery({
-    queryKey: ["spaceMembers", spaceId],
+    queryKey: ['spaceMembers', spaceId],
     queryFn: () => getSpaceMembers(spaceId),
     enabled: !!spaceId,
   });
@@ -117,14 +148,14 @@ export function useAddSpaceMemberMutation() {
   return useMutation<void, Error, IAddSpaceMember>({
     mutationFn: (data) => addSpaceMember(data),
     onSuccess: (data, variables) => {
-      notifications.show({ message: "Members added successfully" });
+      notifications.show({ message: 'Members added successfully' });
       queryClient.invalidateQueries({
-        queryKey: ["spaceMembers", variables.spaceId],
+        queryKey: ['spaceMembers', variables.spaceId],
       });
     },
     onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
+      const errorMessage = error['response']?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      notifications.show({ message: errorMessage, color: 'red' });
     },
   });
 }
@@ -135,14 +166,14 @@ export function useRemoveSpaceMemberMutation() {
   return useMutation<void, Error, IRemoveSpaceMember>({
     mutationFn: (data) => removeSpaceMember(data),
     onSuccess: (data, variables) => {
-      notifications.show({ message: "Removed successfully" });
+      notifications.show({ message: 'Removed successfully' });
       queryClient.refetchQueries({
-        queryKey: ["spaceMembers", variables.spaceId],
+        queryKey: ['spaceMembers', variables.spaceId],
       });
     },
     onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
+      const errorMessage = error['response']?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      notifications.show({ message: errorMessage, color: 'red' });
     },
   });
 }
@@ -153,15 +184,15 @@ export function useChangeSpaceMemberRoleMutation() {
   return useMutation<void, Error, IChangeSpaceMemberRole>({
     mutationFn: (data) => changeMemberRole(data),
     onSuccess: (data, variables) => {
-      notifications.show({ message: "Member role updated successfully" });
+      notifications.show({ message: 'Member role updated successfully' });
       // due to pagination levels, change in cache instead
       queryClient.refetchQueries({
-        queryKey: ["spaceMembers", variables.spaceId],
+        queryKey: ['spaceMembers', variables.spaceId],
       });
     },
     onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
+      const errorMessage = error['response']?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
+      notifications.show({ message: errorMessage, color: 'red' });
     },
   });
 }

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

@@ -1,52 +1,56 @@
-import api from "@/lib/api-client";
+import api from '@/lib/api-client';
 import {
   IAddSpaceMember,
   IChangeSpaceMemberRole,
   IRemoveSpaceMember,
   ISpace,
-} from "@/features/space/types/space.types";
+} from '@/features/space/types/space.types';
-import { IPagination } from "@/lib/types.ts";
+import { IPagination } from '@/lib/types.ts';
-import { IUser } from "@/features/user/types/user.types.ts";
+import { IUser } from '@/features/user/types/user.types.ts';
 
 export async function getSpaces(): Promise<IPagination<ISpace>> {
-  const req = await api.post("/spaces");
+  const req = await api.post('/spaces');
   return req.data;
 }
 
 export async function getSpaceById(spaceId: string): Promise<ISpace> {
-  const req = await api.post<ISpace>("/spaces/info", { spaceId });
+  const req = await api.post<ISpace>('/spaces/info', { spaceId });
   return req.data;
 }
 
 export async function createSpace(data: Partial<ISpace>): Promise<ISpace> {
-  const req = await api.post<ISpace>("/spaces/create", data);
+  const req = await api.post<ISpace>('/spaces/create', data);
   return req.data;
 }
 
 export async function updateSpace(data: Partial<ISpace>): Promise<ISpace> {
-  const req = await api.post<ISpace>("/spaces/update", data);
+  const req = await api.post<ISpace>('/spaces/update', data);
   return req.data;
 }
 
+export async function deleteSpace(spaceId: string): Promise<void> {
+  await api.post<void>('/spaces/delete', { spaceId });
+}
+
 export async function getSpaceMembers(
-  spaceId: string,
+  spaceId: string
 ): Promise<IPagination<IUser>> {
-  const req = await api.post<any>("/spaces/members", { spaceId });
+  const req = await api.post<any>('/spaces/members', { spaceId });
   return req.data;
 }
 
 export async function addSpaceMember(data: IAddSpaceMember): Promise<void> {
-  await api.post("/spaces/members/add", data);
+  await api.post('/spaces/members/add', data);
 }
 
 export async function removeSpaceMember(
-  data: IRemoveSpaceMember,
+  data: IRemoveSpaceMember
 ): Promise<void> {
-  await api.post("/spaces/members/remove", data);
+  await api.post('/spaces/members/remove', data);
 }
 
 export async function changeMemberRole(
-  data: IChangeSpaceMemberRole,
+  data: IChangeSpaceMemberRole
 ): Promise<void> {
-  await api.post("/spaces/members/change-role", data);
+  await api.post('/spaces/members/change-role', data);
 }

apps/client/src/lib/config.ts

@@ -15,15 +15,19 @@ export function getAppUrl(): string {
 }
 
 export function getBackendUrl(): string {
-  return getAppUrl() + "/api";
+  return getAppUrl() + '/api';
 }
 
 export function getCollaborationUrl(): string {
-  const COLLAB_PATH = "/collab";
+  const COLLAB_PATH = '/collab';
-  const url = process.env.APP_URL || getAppUrl();
 
-  const wsProtocol = url.startsWith("https") ? "wss" : "ws";
+  let url = getAppUrl();
-  return `${wsProtocol}://${url.split("://")[1]}${COLLAB_PATH}`;
+  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) {
@@ -31,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;
 }

apps/client/src/theme.ts

@@ -1,20 +1,34 @@
-import { createTheme, MantineColorsTuple } from "@mantine/core";
+import { createTheme, MantineColorsTuple } from '@mantine/core';
 
 const blue: MantineColorsTuple = [
-  "#e7f3ff",
+  '#e7f3ff',
-  "#d0e4ff",
+  '#d0e4ff',
-  "#a1c6fa",
+  '#a1c6fa',
-  "#6ea6f6",
+  '#6ea6f6',
-  "#458bf2",
+  '#458bf2',
-  "#2b7af1",
+  '#2b7af1',
-  "#0b60d8", //
+  '#0b60d8',
-  "#1b72f2",
+  '#1b72f2',
-  "#0056c1",
+  '#0056c1',
-  "#004aac",
+  '#004aac',
+];
+
+const red: MantineColorsTuple = [
+  '#ffebeb',
+  '#fad7d7',
+  '#eeadad',
+  '#e3807f',
+  '#da5a59',
+  '#d54241',
+  '#d43535',
+  '#bc2727',
+  '#a82022',
+  '#93151b',
 ];
 
 export const theme = createTheme({
   colors: {
     blue,
+    red,
   },
 });

apps/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "",
   "author": "",
   "private": true,

apps/server/src/common/events/event.contants.ts

@@ -0,0 +1,3 @@
+export enum EventName {
+  COLLAB_PAGE_UPDATED = 'collab.page.updated',
+}

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

@@ -182,7 +182,7 @@ export class AttachmentController {
       if (!inlineFileExtensions.includes(attachment.fileExt)) {
         res.header(
           'Content-Disposition',
-          `attachment; filename="${attachment.fileName}"`,
+          `attachment; filename="${encodeURIComponent(attachment.fileName)}"`,
         );
       }
 

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

@@ -4,10 +4,11 @@ import { AttachmentController } from './attachment.controller';
 import { StorageModule } from '../../integrations/storage/storage.module';
 import { UserModule } from '../user/user.module';
 import { WorkspaceModule } from '../workspace/workspace.module';
+import { AttachmentProcessor } from './processors/attachment.processor';
 
 @Module({
   imports: [StorageModule, UserModule, WorkspaceModule],
   controllers: [AttachmentController],
-  providers: [AttachmentService],
+  providers: [AttachmentService, AttachmentProcessor],
 })
 export class AttachmentModule {}

apps/server/src/core/attachment/processors/attachment.processor.ts

@@ -0,0 +1,47 @@
+import { Logger, OnModuleDestroy } from '@nestjs/common';
+import { OnWorkerEvent, Processor, WorkerHost } from '@nestjs/bullmq';
+import { Job } from 'bullmq';
+import { AttachmentService } from '../services/attachment.service';
+import { QueueJob, QueueName } from 'src/integrations/queue/constants';
+import { Space } from '@docmost/db/types/entity.types';
+
+@Processor(QueueName.ATTACHEMENT_QUEUE)
+export class AttachmentProcessor extends WorkerHost implements OnModuleDestroy {
+  private readonly logger = new Logger(AttachmentProcessor.name);
+  constructor(private readonly attachmentService: AttachmentService) {
+    super();
+  }
+
+  async process(job: Job<Space, void>): Promise<void> {
+    try {
+      if (job.name === QueueJob.DELETE_SPACE_ATTACHMENTS) {
+        await this.attachmentService.handleDeleteSpaceAttachments(job.data.id);
+      }
+    } catch (err) {
+      throw err;
+    }
+  }
+
+  @OnWorkerEvent('active')
+  onActive(job: Job) {
+    this.logger.debug(`Processing ${job.name} job`);
+  }
+
+  @OnWorkerEvent('failed')
+  onError(job: Job) {
+    this.logger.error(
+      `Error processing ${job.name} job. Reason: ${job.failedReason}`,
+    );
+  }
+
+  @OnWorkerEvent('completed')
+  onCompleted(job: Job) {
+    this.logger.debug(`Completed ${job.name} job`);
+  }
+
+  async onModuleDestroy(): Promise<void> {
+    if (this.worker) {
+      await this.worker.close();
+    }
+  }
+}

apps/server/src/core/attachment/services/attachment.service.ts

@@ -256,4 +256,37 @@ export class AttachmentService {
       trx,
     );
   }
+
+  async handleDeleteSpaceAttachments(spaceId: string) {
+    try {
+      const attachments = await this.attachmentRepo.findBySpaceId(spaceId);
+      if (!attachments || attachments.length === 0) {
+        return;
+      }
+
+      const failedDeletions = [];
+
+      await Promise.all(
+        attachments.map(async (attachment) => {
+          try {
+            await this.storageService.delete(attachment.filePath);
+            await this.attachmentRepo.deleteAttachmentById(attachment.id);
+          } catch (err) {
+            failedDeletions.push(attachment.id);
+            this.logger.log(
+              `DeleteSpaceAttachments: failed to delete attachment ${attachment.id}:`,
+              err,
+            );
+          }
+        }),
+      );
+
+      if(failedDeletions.length === attachments.length){
+        throw new Error(`Failed to delete any attachments for spaceId: ${spaceId}`);
+      }
+
+    } catch (err) {
+      throw err;
+    }
+  }
 }

apps/server/src/core/space/services/space.service.ts

@@ -14,6 +14,9 @@ import { executeTx } from '@docmost/db/utils';
 import { InjectKysely } from 'nestjs-kysely';
 import { SpaceMemberService } from './space-member.service';
 import { SpaceRole } from '../../../common/helpers/types/permission';
+import { QueueJob, QueueName } from 'src/integrations/queue/constants';
+import { Queue } from 'bullmq';
+import { InjectQueue } from '@nestjs/bullmq';
 
 @Injectable()
 export class SpaceService {
@@ -21,6 +24,7 @@ export class SpaceService {
     private spaceRepo: SpaceRepo,
     private spaceMemberService: SpaceMemberService,
     @InjectKysely() private readonly db: KyselyDB,
+    @InjectQueue(QueueName.ATTACHEMENT_QUEUE) private attachmentQueue: Queue,
   ) {}
 
   async createSpace(
@@ -88,10 +92,24 @@ export class SpaceService {
     updateSpaceDto: UpdateSpaceDto,
     workspaceId: string,
   ): Promise<Space> {
+    if (updateSpaceDto?.slug) {
+      const slugExists = await this.spaceRepo.slugExists(
+        updateSpaceDto.slug,
+        workspaceId,
+      );
+
+      if (slugExists) {
+        throw new BadRequestException(
+          'Space slug exists. Please use a unique space slug',
+        );
+      }
+    }
+
     return await this.spaceRepo.updateSpace(
       {
         name: updateSpaceDto.name,
         description: updateSpaceDto.description,
+        slug: updateSpaceDto.slug,
       },
       updateSpaceDto.spaceId,
       workspaceId,
@@ -120,4 +138,14 @@ export class SpaceService {
 
     return spaces;
   }
+
+  async deleteSpace(spaceId: string, workspaceId: string): Promise<void> {
+    const space = await this.spaceRepo.findById(spaceId, workspaceId);
+    if (!space) {
+      throw new NotFoundException('Space not found');
+    }
+
+    await this.spaceRepo.deleteSpace(spaceId, workspaceId);
+    await this.attachmentQueue.add(QueueJob.DELETE_SPACE_ATTACHMENTS, space);
+  }
 }

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

@@ -95,7 +95,7 @@ export class SpaceController {
 
   @HttpCode(HttpStatus.OK)
   @Post('create')
-  createGroup(
+  createSpace(
     @Body() createSpaceDto: CreateSpaceDto,
     @AuthUser() user: User,
     @AuthWorkspace() workspace: Workspace,
@@ -111,7 +111,7 @@ export class SpaceController {
 
   @HttpCode(HttpStatus.OK)
   @Post('update')
-  async updateGroup(
+  async updateSpace(
     @Body() updateSpaceDto: UpdateSpaceDto,
     @AuthUser() user: User,
     @AuthWorkspace() workspace: Workspace,
@@ -126,6 +126,23 @@ export class SpaceController {
     return this.spaceService.updateSpace(updateSpaceDto, workspace.id);
   }
 
+  @HttpCode(HttpStatus.OK)
+  @Post('delete')
+  async deleteSpace(
+    @Body() spaceIdDto: SpaceIdDto,
+    @AuthUser() user: User,
+    @AuthWorkspace() workspace: Workspace,
+  ) {
+    const ability = await this.spaceAbility.createForUser(
+      user,
+      spaceIdDto.spaceId,
+    );
+    if (ability.cannot(SpaceCaslAction.Manage, SpaceCaslSubject.Settings)) {
+      throw new ForbiddenException();
+    }
+    return this.spaceService.deleteSpace(spaceIdDto.spaceId, workspace.id);
+  }
+
   @HttpCode(HttpStatus.OK)
   @Post('members')
   async getSpaceMembers(

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

@@ -40,6 +40,21 @@ export class AttachmentRepo {
       .executeTakeFirst();
   }
 
+  async findBySpaceId(
+    spaceId: string,
+    opts?: {
+      trx?: KyselyTransaction;
+    },
+  ): Promise<Attachment[]> {
+    const db = dbOrTx(this.db, opts?.trx);
+
+    return db
+      .selectFrom('attachments')
+      .selectAll()
+      .where('spaceId', '=', spaceId)
+      .execute();
+  }
+
   async updateAttachment(
     updatableAttachment: UpdatableAttachment,
     attachmentId: string,
@@ -52,7 +67,7 @@ export class AttachmentRepo {
       .executeTakeFirst();
   }
 
-  async deleteAttachment(attachmentId: string): Promise<void> {
+  async deleteAttachmentById(attachmentId: string): Promise<void> {
     await this.db
       .deleteFrom('attachments')
       .where('id', '=', attachmentId)

apps/server/src/database/repos/space/space-member.repo.ts

@@ -64,7 +64,7 @@ export class SpaceMemberRepo {
     } else if (opts.groupId) {
       query = query.where('groupId', '=', opts.groupId);
     } else {
-      throw new BadRequestException('Please provider a userId or groupId');
+      throw new BadRequestException('Please provide a userId or groupId');
     }
     return query.executeTakeFirst();
   }

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

@@ -98,6 +98,13 @@ export class EnvironmentService {
     return secure === 'true';
   }
 
+  getSmtpIgnoreTLS(): boolean {
+    const ignoretls = this.configService
+      .get<string>('SMTP_IGNORETLS', 'false')
+      .toLowerCase();
+    return ignoretls === 'true';
+  }
+
   getSmtpUsername(): string {
     return this.configService.get<string>('SMTP_USERNAME');
   }

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

@@ -61,7 +61,8 @@ export class ImportController {
 
     res.headers({
       'Content-Type': getMimeType(fileExt),
-      'Content-Disposition': 'attachment; filename="' + fileName + '"',
+      'Content-Disposition':
+        'attachment; filename="' + encodeURIComponent(fileName) + '"',
     });
 
     res.send(rawContent);

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

@@ -41,6 +41,7 @@ export const mailDriverConfigProvider = {
             connectionTimeout: 30 * 1000, // 30 seconds
             auth,
             secure: environmentService.getSmtpSecure(),
+            ignoreTLS: environmentService.getSmtpIgnoreTLS()
           } as SMTPTransport.Options,
         };
 

apps/server/src/integrations/queue/constants/queue.constants.ts

@@ -1,7 +1,10 @@
 export enum QueueName {
   EMAIL_QUEUE = '{email-queue}',
+  ATTACHEMENT_QUEUE = '{attachment-queue}',
 }
 
 export enum QueueJob {
   SEND_EMAIL = 'send-email',
+  DELETE_SPACE_ATTACHMENTS = 'delete-space-attachments',
+  DELETE_PAGE_ATTACHMENTS = 'delete-page-attachments',
 }

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

@@ -31,6 +31,9 @@ import { QueueName } from './constants';
     BullModule.registerQueue({
       name: QueueName.EMAIL_QUEUE,
     }),
+    BullModule.registerQueue({
+      name: QueueName.ATTACHEMENT_QUEUE,
+    }),
   ],
   exports: [BullModule],
 })

package.json

@@ -1,7 +1,7 @@
 {
   "name": "docmost",
   "homepage": "https://docmost.com",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": true,
   "scripts": {
     "build": "nx run-many -t build",

packages/editor-ext/src/index.ts

@@ -14,4 +14,4 @@ export * from "./lib/attachment";
 export * from "./lib/custom-code-block"
 export * from "./lib/drawio";
 export * from "./lib/excalidraw";
-
+export * from "./lib/table-of-contents";

packages/editor-ext/src/lib/table-of-contents.ts

@@ -0,0 +1,115 @@
+import { Node, findChildren, findParentNode, mergeAttributes, wrappingInputRule } from "@tiptap/core";
+import { icon, setAttributes } from "./utils";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        tableOfContents: {
+            setTableOfContents: () => ReturnType;
+            unsetTableOfContents: () => ReturnType;
+            toggleTableOfContents: () => ReturnType;
+            setDividerType: (type: "solid" | "dashed" | "dotted" | "none") => ReturnType;
+            setTableType: (type: "Contents" | "Child Pages") => ReturnType;
+            setPageIcons: (icons: boolean) => ReturnType;
+        };
+    }
+}
+
+export interface TableofContentsOptions {
+    HTMLAttributes: Record<string, any>;
+    view: any;
+}
+
+export const TableofContents = Node.create<TableofContentsOptions>({
+    name: "tableOfContents",
+
+    content: "block+",
+    inline: false,
+    group: "block",
+    isolating: true,
+    atom: true,
+    defining: true,
+
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+            view: null,
+        };
+    },
+
+    parseHTML() {
+        return [
+            {
+                tag: `div[data-type="${this.name}"]`,
+            },
+        ];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return ["div", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+    },
+
+    addAttributes() {
+        return {
+            dividerType: {
+                default: "solid",
+                parseHTML: (element) => element.getAttribute("data-divider-type"),
+                renderHTML: (attributes) => ({
+                    "data-divider-type": attributes.dividerType,
+                }),
+            },
+            tableType: {
+                default: "Contents",
+                parseHTML: (element) => element.getAttribute("data-table-type"),
+                renderHTML: (attributes) => ({
+                    "data-table-type": attributes.tableType,
+                }),
+            },
+            icons: {
+                default: true,
+                parseHTML: (element) => element.getAttribute("data-page-icons"),
+                renderHTML: (attributes) => ({
+                    "data-page-icons": attributes.tableType,
+                }),
+            },
+        };
+    },
+
+    addNodeView() {
+        return ReactNodeViewRenderer(this.options.view);
+    },
+
+    addCommands() {
+        return {
+            setTableOfContents:
+                () =>
+                ({ commands }) =>
+                    commands.setNode(this.name),
+
+            unsetTableOfContents:
+                () =>
+                ({ commands }) =>
+                    commands.lift(this.name),
+
+            toggleTableOfContents:
+                () =>
+                ({ commands }) =>
+                    commands.toggleWrap(this.name),
+
+            setDividerType:
+                (type) =>
+                ({ commands }) =>
+                    commands.updateAttributes("tableOfContents", { dividerType: type }),
+
+            setTableType:
+                (type) =>
+                ({ commands }) =>
+                    commands.updateAttributes("tableOfContents", { tableType: type }),
+
+            setPageIcons:
+                (icons) =>
+                ({ commands }) =>
+                    commands.updateAttributes("tableOfContents", { icons: icons }),
+        };
+    },
+});