{
+ editor.chain().focus().deleteRange(range).insertSubpages().run();
+ },
+ },
{
title: "Iframe embed",
description: "Embed any Iframe",
diff --git a/apps/client/src/features/editor/components/subpages/subpages-menu.tsx b/apps/client/src/features/editor/components/subpages/subpages-menu.tsx
new file mode 100644
index 00000000..6cc017e2
--- /dev/null
+++ b/apps/client/src/features/editor/components/subpages/subpages-menu.tsx
@@ -0,0 +1,95 @@
+import {
+ BubbleMenu as BaseBubbleMenu,
+ posToDOMRect,
+ findParentNode,
+} from "@tiptap/react";
+import { Node as PMNode } from "@tiptap/pm/model";
+import React, { useCallback } from "react";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { Editor } from "@tiptap/core";
+import { sticky } from "tippy.js";
+
+interface SubpagesMenuProps {
+ editor: Editor;
+}
+
+interface ShouldShowProps {
+ state: any;
+ from?: number;
+ to?: number;
+}
+
+export const SubpagesMenu = React.memo(
+ ({ editor }: SubpagesMenuProps): JSX.Element => {
+ const { t } = useTranslation();
+
+ const shouldShow = useCallback(
+ ({ state }: ShouldShowProps) => {
+ if (!state) {
+ return false;
+ }
+
+ return editor.isActive("subpages");
+ },
+ [editor],
+ );
+
+ const getReferenceClientRect = useCallback(() => {
+ const { selection } = editor.state;
+ const predicate = (node: PMNode) => node.type.name === "subpages";
+ 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 deleteNode = useCallback(() => {
+ const { selection } = editor.state;
+ editor
+ .chain()
+ .focus()
+ .setNodeSelection(selection.from)
+ .deleteSelection()
+ .run();
+ }, [editor]);
+
+ return (
+
+
+
+
+
+
+
+ );
+ },
+);
+
+export default SubpagesMenu;
diff --git a/apps/client/src/features/editor/components/subpages/subpages-view.tsx b/apps/client/src/features/editor/components/subpages/subpages-view.tsx
new file mode 100644
index 00000000..525e2ec9
--- /dev/null
+++ b/apps/client/src/features/editor/components/subpages/subpages-view.tsx
@@ -0,0 +1,120 @@
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { Stack, Text, Anchor, ActionIcon } from "@mantine/core";
+import { IconFileDescription } from "@tabler/icons-react";
+import { useGetSidebarPagesQuery } from "@/features/page/queries/page-query";
+import { useMemo } from "react";
+import { Link, useParams } from "react-router-dom";
+import classes from "./subpages.module.css";
+import styles from "../mention/mention.module.css";
+import {
+ buildPageUrl,
+ buildSharedPageUrl,
+} from "@/features/page/page.utils.ts";
+import { useTranslation } from "react-i18next";
+import { sortPositionKeys } from "@/features/page/tree/utils/utils";
+import { useSharedPageSubpages } from "@/features/share/hooks/use-shared-page-subpages";
+
+export default function SubpagesView(props: NodeViewProps) {
+ const { editor } = props;
+ const { spaceSlug, shareId } = useParams();
+ const { t } = useTranslation();
+
+ const currentPageId = editor.storage.pageId;
+
+ // Get subpages from shared tree if we're in a shared context
+ const sharedSubpages = useSharedPageSubpages(currentPageId);
+
+ const { data, isLoading, error } = useGetSidebarPagesQuery({
+ pageId: currentPageId,
+ });
+
+ const subpages = useMemo(() => {
+ // If we're in a shared context, use the shared subpages
+ if (shareId && sharedSubpages) {
+ return sharedSubpages.map((node) => ({
+ id: node.value,
+ slugId: node.slugId,
+ title: node.name,
+ icon: node.icon,
+ position: node.position,
+ }));
+ }
+
+ // Otherwise use the API data
+ if (!data?.pages) return [];
+ const allPages = data.pages.flatMap((page) => page.items);
+ return sortPositionKeys(allPages);
+ }, [data, shareId, sharedSubpages]);
+
+ if (isLoading && !shareId) {
+ return null;
+ }
+
+ if (error && !shareId) {
+ return (
+
+
+ {t("Failed to load subpages")}
+
+
+ );
+ }
+
+ if (subpages.length === 0) {
+ return (
+
+
+
+ {t("No subpages")}
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ {subpages.map((page) => (
+
+ {page?.icon ? (
+ {page.icon}
+ ) : (
+
+
+
+ )}
+
+
+ {page?.title || t("untitled")}
+
+
+ ))}
+
+
+ );
+}
diff --git a/apps/client/src/features/editor/components/subpages/subpages.module.css b/apps/client/src/features/editor/components/subpages/subpages.module.css
new file mode 100644
index 00000000..fb43eaf6
--- /dev/null
+++ b/apps/client/src/features/editor/components/subpages/subpages.module.css
@@ -0,0 +1,9 @@
+.container {
+ margin: 0;
+ padding-left: 4px;
+ user-select: none;
+
+ a {
+ border: none !important;
+ }
+}
diff --git a/apps/client/src/features/editor/extensions/extensions.ts b/apps/client/src/features/editor/extensions/extensions.ts
index 1421eea9..3fdee0e8 100644
--- a/apps/client/src/features/editor/extensions/extensions.ts
+++ b/apps/client/src/features/editor/extensions/extensions.ts
@@ -38,6 +38,8 @@ import {
Embed,
SearchAndReplace,
Mention,
+ Subpages,
+ TableDndExtension,
HeadingAnchors,
} from "@docmost/editor-ext";
import {
@@ -58,6 +60,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 EmbedView from "@/features/editor/components/embed/embed-view.tsx";
+import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
import plaintext from "highlight.js/lib/languages/plaintext";
import powershell from "highlight.js/lib/languages/powershell";
import abap from "highlightjs-sap-abap";
@@ -167,12 +170,13 @@ export const mainExtensions = [
}),
CustomTable.configure({
resizable: true,
- lastColumnResizable: false,
+ lastColumnResizable: true,
allowTableNodeSelection: true,
}),
TableRow,
TableCell,
TableHeader,
+ TableDndExtension,
MathInline.configure({
view: MathInlineView,
}),
@@ -217,6 +221,9 @@ export const mainExtensions = [
Embed.configure({
view: EmbedView,
}),
+ Subpages.configure({
+ view: SubpagesView,
+ }),
MarkdownClipboard.configure({
transformPastedText: true,
}),
@@ -226,17 +233,17 @@ export const mainExtensions = [
SearchAndReplace.extend({
addKeyboardShortcuts() {
return {
- "Mod-f": () => {
+ 'Mod-f': () => {
const event = new CustomEvent("openFindDialogFromEditor", {});
document.dispatchEvent(event);
return true;
},
- Escape: () => {
+ 'Escape': () => {
const event = new CustomEvent("closeFindDialogFromEditor", {});
document.dispatchEvent(event);
return true;
},
- };
+ }
},
}).configure(),
UniqueID.configure({
diff --git a/apps/client/src/features/editor/page-editor.tsx b/apps/client/src/features/editor/page-editor.tsx
index d388a714..44ac4dab 100644
--- a/apps/client/src/features/editor/page-editor.tsx
+++ b/apps/client/src/features/editor/page-editor.tsx
@@ -31,6 +31,7 @@ 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 VideoMenu from "@/features/editor/components/video/video-menu.tsx";
+import SubpagesMenu from "@/features/editor/components/subpages/subpages-menu.tsx";
import {
handleFileDrop,
handlePaste,
@@ -49,6 +50,7 @@ import { extractPageSlugId } from "@/lib";
import { FIVE_MINUTES } from "@/lib/constants.ts";
import { PageEditMode } from "@/features/user/types/user.types.ts";
import { jwtDecode } from "jwt-decode";
+import { searchSpotlight } from '@/features/search/constants.ts';
import { useAnchorScroll } from "./components/heading/use-anchor-scroll";
interface PageEditorProps {
@@ -223,6 +225,10 @@ export default function PageEditor({
event.preventDefault();
return true;
}
+ if ((event.ctrlKey || event.metaKey) && event.code === 'KeyK') {
+ searchSpotlight.open();
+ return true;
+ }
if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
const slashCommand = document.querySelector("#slash-command");
if (slashCommand) {
@@ -377,7 +383,7 @@ export default function PageEditor({
}
return (
-
+
@@ -393,6 +399,7 @@ export default function PageEditor({
+
diff --git a/apps/client/src/features/editor/readonly-page-editor.tsx b/apps/client/src/features/editor/readonly-page-editor.tsx
index bd6b9f6b..c1352354 100644
--- a/apps/client/src/features/editor/readonly-page-editor.tsx
+++ b/apps/client/src/features/editor/readonly-page-editor.tsx
@@ -6,21 +6,19 @@ import { Document } from "@tiptap/extension-document";
import { Heading } from "@tiptap/extension-heading";
import { Text } from "@tiptap/extension-text";
import { Placeholder } from "@tiptap/extension-placeholder";
-import { useAtom } from "jotai/index";
-import {
- pageEditorAtom,
- readOnlyEditorAtom,
-} from "@/features/editor/atoms/editor-atoms.ts";
-import { Editor } from "@tiptap/core";
+import { useAtom } from "jotai";
+import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
interface PageEditorProps {
title: string;
content: any;
+ pageId?: string;
}
export default function ReadonlyPageEditor({
title,
content,
+ pageId,
}: PageEditorProps) {
const [, setReadOnlyEditor] = useAtom(readOnlyEditorAtom);
@@ -56,6 +54,9 @@ export default function ReadonlyPageEditor({
content={content}
onCreate={({ editor }) => {
if (editor) {
+ if (pageId) {
+ editor.storage.pageId = pageId;
+ }
// @ts-ignore
setReadOnlyEditor(editor);
}
diff --git a/apps/client/src/features/editor/styles/core.css b/apps/client/src/features/editor/styles/core.css
index de60d710..479d000d 100644
--- a/apps/client/src/features/editor/styles/core.css
+++ b/apps/client/src/features/editor/styles/core.css
@@ -33,8 +33,8 @@
}
p {
- margin-top: 0.65em;
- margin-bottom: 0.65em;
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
}
ul,
@@ -57,6 +57,7 @@
h5,
h6 {
line-height: 1.1;
+ margin-bottom: 10px;
}
code {
@@ -93,8 +94,12 @@
hr {
border: none;
- border-top: 2px solid #ced4da;
- margin: 2rem 0;
+ @mixin light {
+ border-top: 1px solid var(--mantine-color-gray-4);
+ }
+ @mixin dark {
+ border-top: 1px solid var(--mantine-color-dark-4);
+ }
&:hover {
cursor: pointer;
@@ -136,7 +141,7 @@
.selection,
*::selection {
- background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-gray-7));
+ background-color: Highlight;
}
.comment-mark {
diff --git a/apps/client/src/features/editor/styles/drag-handle.css b/apps/client/src/features/editor/styles/drag-handle.css
index e1d3ae4b..f77c9630 100644
--- a/apps/client/src/features/editor/styles/drag-handle.css
+++ b/apps/client/src/features/editor/styles/drag-handle.css
@@ -45,6 +45,10 @@
display: none;
pointer-events: none;
}
+
+ &[data-direction='horizontal'] {
+ rotate: 90deg;
+ }
}
.dark .drag-handle {
diff --git a/apps/client/src/features/editor/styles/print.css b/apps/client/src/features/editor/styles/print.css
index ab105b40..c63e376b 100644
--- a/apps/client/src/features/editor/styles/print.css
+++ b/apps/client/src/features/editor/styles/print.css
@@ -1,11 +1,23 @@
@media print {
- .mantine-AppShell-header,
- .mantine-AppShell-navbar,
- .mantine-AppShell-aside{
- display: none !important;
- }
+ .mantine-AppShell-header,
+ .mantine-AppShell-navbar,
+ .mantine-AppShell-aside,
+ .print-hide,
+ .drag-handle {
+ display: none !important;
+ }
- .mantine-AppShell-main {
- padding-top: 0 !important;
- }
+ .mantine-AppShell-main {
+ padding-top: 0 !important;
+ min-height: auto !important;
+ }
+
+ .ProseMirror-selectednode {
+ outline: none !important;
+ box-shadow: none !important;
+ }
+
+ .tableWrapper {
+ overflow: hidden !important;
+ }
}
diff --git a/apps/client/src/features/editor/styles/table.css b/apps/client/src/features/editor/styles/table.css
index d60a299c..9926d0bc 100644
--- a/apps/client/src/features/editor/styles/table.css
+++ b/apps/client/src/features/editor/styles/table.css
@@ -8,6 +8,16 @@
}
}
+.table-dnd-preview {
+ padding: 0;
+ background-color: rgba(255, 255, 255, 0.3);
+ backdrop-filter: blur(2px);
+}
+
+.table-dnd-drop-indicator {
+ background-color: #adf;
+}
+
.ProseMirror {
table {
border-collapse: collapse;
@@ -118,3 +128,13 @@
}
}
}
+
+.editor-container:has(.table-dnd-drop-indicator[data-dragging="true"]) {
+ .prosemirror-dropcursor-block {
+ display: none;
+ }
+
+ .prosemirror-dropcursor-inline {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/apps/client/src/features/editor/styles/task-list.css b/apps/client/src/features/editor/styles/task-list.css
index a2c5f6f4..b8b9fb89 100644
--- a/apps/client/src/features/editor/styles/task-list.css
+++ b/apps/client/src/features/editor/styles/task-list.css
@@ -10,6 +10,7 @@ ul[data-type="taskList"] {
display: flex;
> label {
+ padding-top: 0.2rem;
flex: 0 0 auto;
margin-right: 0.5rem;
user-select: none;
diff --git a/apps/client/src/features/editor/title-editor.tsx b/apps/client/src/features/editor/title-editor.tsx
index 937ae374..f7665ecb 100644
--- a/apps/client/src/features/editor/title-editor.tsx
+++ b/apps/client/src/features/editor/title-editor.tsx
@@ -26,6 +26,7 @@ import { UpdateEvent } from "@/features/websocket/types";
import localEmitter from "@/lib/local-emitter.ts";
import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
import { PageEditMode } from "@/features/user/types/user.types.ts";
+import { searchSpotlight } from "@/features/search/constants.ts";
export interface TitleEditorProps {
pageId: string;
@@ -86,6 +87,20 @@ export function TitleEditor({
content: title,
immediatelyRender: true,
shouldRerenderOnTransaction: false,
+ editorProps: {
+ handleDOMEvents: {
+ keydown: (_view, event) => {
+ if ((event.ctrlKey || event.metaKey) && event.code === "KeyS") {
+ event.preventDefault();
+ return true;
+ }
+ if ((event.ctrlKey || event.metaKey) && event.code === "KeyK") {
+ searchSpotlight.open();
+ return true;
+ }
+ },
+ },
+ },
});
useEffect(() => {
@@ -193,7 +208,7 @@ export function TitleEditor({
onKeyDown={(event) => {
// First handle the search hotkey
getHotkeyHandler([["mod+F", openSearchDialog]])(event);
-
+
// Then handle other key events
handleTitleKeyDown(event);
}}
diff --git a/apps/client/src/features/page/components/page-import-modal.tsx b/apps/client/src/features/page/components/page-import-modal.tsx
index 0223d78f..a2df380e 100644
--- a/apps/client/src/features/page/components/page-import-modal.tsx
+++ b/apps/client/src/features/page/components/page-import-modal.tsx
@@ -24,7 +24,7 @@ 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, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { ConfluenceIcon } from "@/components/icons/confluence-icon.tsx";
import { getFileImportSizeLimit, isCloud } from "@/lib/config.ts";
@@ -84,6 +84,12 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
const [fileTaskId, setFileTaskId] = useState
(null);
const emit = useQueryEmit();
+ const markdownFileRef = useRef<() => void>(null);
+ const htmlFileRef = useRef<() => void>(null);
+ const notionFileRef = useRef<() => void>(null);
+ const confluenceFileRef = useRef<() => void>(null);
+ const zipFileRef = useRef<() => void>(null);
+
const canUseConfluence = isCloud() || workspace?.hasLicenseKey;
const handleZipUpload = async (selectedFile: File, source: string) => {
@@ -116,6 +122,15 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
});
setFileTaskId(importTask.id);
+
+ // Reset file input after successful upload
+ if (source === "notion" && notionFileRef.current) {
+ notionFileRef.current();
+ } else if (source === "confluence" && confluenceFileRef.current) {
+ confluenceFileRef.current();
+ } else if (source === "generic" && zipFileRef.current) {
+ zipFileRef.current();
+ }
} catch (err) {
console.log("Failed to upload import file", err);
notifications.update({
@@ -243,6 +258,10 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
setTreeData(fullTree);
}
+ // Reset file inputs after successful upload
+ if (markdownFileRef.current) markdownFileRef.current();
+ if (htmlFileRef.current) htmlFileRef.current();
+
const pageCountText =
pageCount === 1 ? `1 ${t("page")}` : `${pageCount} ${t("pages")}`;
@@ -272,7 +291,7 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
return (
<>
-
+
{(props) => (
diff --git a/apps/client/src/features/search/hooks/use-unified-search.ts b/apps/client/src/features/search/hooks/use-unified-search.ts
new file mode 100644
index 00000000..dbc5563f
--- /dev/null
+++ b/apps/client/src/features/search/hooks/use-unified-search.ts
@@ -0,0 +1,43 @@
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import {
+ searchPage,
+ searchAttachments,
+} from "@/features/search/services/search-service";
+import {
+ IAttachmentSearch,
+ IPageSearch,
+ IPageSearchParams,
+} from "@/features/search/types/search.types";
+import { useLicense } from "@/ee/hooks/use-license";
+import { isCloud } from "@/lib/config";
+
+export type UnifiedSearchResult = IPageSearch | IAttachmentSearch;
+
+export interface UseUnifiedSearchParams extends IPageSearchParams {
+ contentType?: string;
+}
+
+export function useUnifiedSearch(
+ params: UseUnifiedSearchParams,
+): UseQueryResult
{
+ const { hasLicenseKey } = useLicense();
+
+ const isAttachmentSearch =
+ params.contentType === "attachment" && (isCloud() || hasLicenseKey);
+ const searchType = isAttachmentSearch ? "attachment" : "page";
+
+ return useQuery({
+ queryKey: ["unified-search", searchType, params],
+ queryFn: async () => {
+ // Remove contentType from backend params since it's only used for frontend routing
+ const { contentType, ...backendParams } = params;
+
+ if (isAttachmentSearch) {
+ return await searchAttachments(backendParams);
+ } else {
+ return await searchPage(backendParams);
+ }
+ },
+ enabled: !!params.query,
+ });
+}
diff --git a/apps/client/src/features/search/queries/search-query.ts b/apps/client/src/features/search/queries/search-query.ts
index 6b8c0296..bc91dfac 100644
--- a/apps/client/src/features/search/queries/search-query.ts
+++ b/apps/client/src/features/search/queries/search-query.ts
@@ -1,15 +1,17 @@
import { useQuery, UseQueryResult } from "@tanstack/react-query";
import {
+ searchAttachments,
searchPage,
searchShare,
searchSuggestions,
-} from "@/features/search/services/search-service";
+} from '@/features/search/services/search-service';
import {
+ IAttachmentSearch,
IPageSearch,
IPageSearchParams,
ISuggestionResult,
SearchSuggestionParams,
-} from "@/features/search/types/search.types";
+} from '@/features/search/types/search.types';
export function usePageSearchQuery(
params: IPageSearchParams,
@@ -41,3 +43,13 @@ export function useShareSearchQuery(
enabled: !!params.query,
});
}
+
+export function useAttachmentSearchQuery(
+ params: IPageSearchParams,
+): UseQueryResult {
+ return useQuery({
+ queryKey: ["attachment-search", params],
+ queryFn: () => searchAttachments(params),
+ enabled: !!params.query,
+ });
+}
diff --git a/apps/client/src/features/search/search-spotlight.tsx b/apps/client/src/features/search/search-spotlight.tsx
deleted file mode 100644
index 581524fc..00000000
--- a/apps/client/src/features/search/search-spotlight.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Group, Center, Text } from "@mantine/core";
-import { Spotlight } from "@mantine/spotlight";
-import { IconSearch } from "@tabler/icons-react";
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import { useDebouncedValue } from "@mantine/hooks";
-import { usePageSearchQuery } from "@/features/search/queries/search-query";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
-import { getPageIcon } from "@/lib";
-import { useTranslation } from "react-i18next";
-import { searchSpotlightStore } from "./constants";
-
-interface SearchSpotlightProps {
- spaceId?: string;
-}
-export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
- const { t } = useTranslation();
- const [query, setQuery] = useState("");
- const [debouncedSearchQuery] = useDebouncedValue(query, 300);
-
- const { data: searchResults } = usePageSearchQuery({
- query: debouncedSearchQuery,
- spaceId,
- });
-
- const pages = (
- searchResults && searchResults.length > 0 ? searchResults : []
- ).map((page) => (
-
-
- {getPageIcon(page?.icon)}
-
-
- {page.title}
-
- {page?.highlight && (
-
- )}
-
-
-
- ));
-
- return (
- <>
-
- }
- />
-
- {query.length === 0 && pages.length === 0 && (
- {t("Start typing to search...")}
- )}
-
- {query.length > 0 && pages.length === 0 && (
- {t("No results found...")}
- )}
-
- {pages.length > 0 && pages}
-
-
-
- );
-}
diff --git a/apps/client/src/features/search/services/search-service.ts b/apps/client/src/features/search/services/search-service.ts
index 8ea4e6a6..417e3f11 100644
--- a/apps/client/src/features/search/services/search-service.ts
+++ b/apps/client/src/features/search/services/search-service.ts
@@ -1,10 +1,11 @@
import api from "@/lib/api-client";
import {
+ IAttachmentSearch,
IPageSearch,
IPageSearchParams,
ISuggestionResult,
SearchSuggestionParams,
-} from "@/features/search/types/search.types";
+} from '@/features/search/types/search.types';
export async function searchPage(
params: IPageSearchParams,
@@ -26,3 +27,10 @@ export async function searchShare(
const req = await api.post("/search/share-search", params);
return req.data;
}
+
+export async function searchAttachments(
+ params: IPageSearchParams,
+): Promise {
+ const req = await api.post("/search-attachments", params);
+ return req.data;
+}
diff --git a/apps/client/src/features/search/types/search.types.ts b/apps/client/src/features/search/types/search.types.ts
index 1338e121..9962b9ca 100644
--- a/apps/client/src/features/search/types/search.types.ts
+++ b/apps/client/src/features/search/types/search.types.ts
@@ -37,3 +37,25 @@ export interface IPageSearchParams {
spaceId?: string;
shareId?: string;
}
+
+export interface IAttachmentSearch {
+ id: string;
+ fileName: string;
+ pageId: string;
+ creatorId: string;
+ createdAt: Date;
+ updatedAt: Date;
+ rank: string;
+ highlight: string;
+ space: {
+ id: string;
+ name: string;
+ slug: string;
+ icon: string;
+ };
+ page: {
+ id: string;
+ title: string;
+ slugId: string;
+ };
+}
diff --git a/apps/client/src/features/share/atoms/shared-page-atom.ts b/apps/client/src/features/share/atoms/shared-page-atom.ts
new file mode 100644
index 00000000..813f5e61
--- /dev/null
+++ b/apps/client/src/features/share/atoms/shared-page-atom.ts
@@ -0,0 +1,6 @@
+import { atom } from "jotai";
+import { ISharedPageTree } from "@/features/share/types/share.types";
+import { SharedPageTreeNode } from "@/features/share/utils";
+
+export const sharedPageTreeAtom = atom(null);
+export const sharedTreeDataAtom = atom(null);
\ No newline at end of file
diff --git a/apps/client/src/features/share/components/share-shell.tsx b/apps/client/src/features/share/components/share-shell.tsx
index 8550f59f..a300172e 100644
--- a/apps/client/src/features/share/components/share-shell.tsx
+++ b/apps/client/src/features/share/components/share-shell.tsx
@@ -1,9 +1,7 @@
-import React from "react";
+import React, { useEffect, useMemo } from "react";
import {
ActionIcon,
- Affix,
AppShell,
- Button,
Group,
ScrollArea,
Tooltip,
@@ -14,8 +12,10 @@ import SharedTree from "@/features/share/components/shared-tree.tsx";
import { TableOfContents } from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
import { ThemeToggle } from "@/components/theme-toggle.tsx";
-import { useAtomValue } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
import { useAtom } from "jotai";
+import { sharedPageTreeAtom, sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom";
+import { buildSharedPageTree } from "@/features/share/utils";
import {
desktopSidebarAtom,
mobileSidebarAtom,
@@ -34,7 +34,7 @@ import {
SearchControl,
SearchMobileControl,
} from "@/features/search/components/search-control.tsx";
-import { ShareSearchSpotlight } from "@/features/search/share-search-spotlight";
+import { ShareSearchSpotlight } from "@/features/search/components/share-search-spotlight.tsx";
import { shareSearchSpotlight } from "@/features/search/constants";
import ShareBranding from '@/features/share/components/share-branding.tsx';
@@ -60,6 +60,22 @@ export default function ShareShell({
const { data } = useGetSharedPageTreeQuery(shareId);
const readOnlyEditor = useAtomValue(readOnlyEditorAtom);
+ // @ts-ignore
+ const setSharedPageTree = useSetAtom(sharedPageTreeAtom);
+ // @ts-ignore
+ const setSharedTreeData = useSetAtom(sharedTreeDataAtom);
+
+ // Build and set the tree data when it changes
+ const treeData = useMemo(() => {
+ if (!data?.pageTree) return null;
+ return buildSharedPageTree(data.pageTree);
+ }, [data?.pageTree]);
+
+ useEffect(() => {
+ setSharedPageTree(data || null);
+ setSharedTreeData(treeData);
+ }, [data, treeData, setSharedPageTree, setSharedTreeData]);
+
return (
{
+ if (!treeData || !pageId) return [];
+
+ function findSubpages(nodes: SharedPageTreeNode[]): SharedPageTreeNode[] {
+ for (const node of nodes) {
+ if (node.value === pageId || node.slugId === pageId) {
+ return node.children || [];
+ }
+ if (node.children && node.children.length > 0) {
+ const subpages = findSubpages(node.children);
+ if (subpages.length > 0) {
+ return subpages;
+ }
+ }
+ }
+ return [];
+ }
+
+ return findSubpages(treeData);
+ }, [treeData, pageId]);
+}
diff --git a/apps/client/src/features/space/components/settings-modal.tsx b/apps/client/src/features/space/components/settings-modal.tsx
index 35f3a65f..1afce237 100644
--- a/apps/client/src/features/space/components/settings-modal.tsx
+++ b/apps/client/src/features/space/components/settings-modal.tsx
@@ -1,10 +1,10 @@
-import {Modal, Tabs, rem, Group, ScrollArea, Text} from "@mantine/core";
+import { Modal, Tabs, rem, Group, ScrollArea, Text } 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";
+import React from "react";
import SpaceDetails from "@/features/space/components/space-details.tsx";
-import {useSpaceQuery} from "@/features/space/queries/space-query.ts";
-import {useSpaceAbility} from "@/features/space/permissions/use-space-ability.ts";
+import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
+import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
import {
SpaceCaslAction,
SpaceCaslSubject,
@@ -39,16 +39,18 @@ export default function SpaceSettingsModal({
xOffset={0}
mah={400}
>
-
-
+
+
- {space?.name}
+
+ {space?.name}
+
-
+
-
+
@@ -60,13 +62,15 @@ export default function SpaceSettingsModal({
-
+
+
+
@@ -74,7 +78,7 @@ export default function SpaceSettingsModal({
{spaceAbility.can(
SpaceCaslAction.Manage,
SpaceCaslSubject.Member,
- ) && }
+ ) && }
void;
@@ -16,7 +18,14 @@ interface SpaceSelectProps {
const renderSelectOption: SelectProps["renderOption"] = ({ option }) => (
-
+
{option.label}
@@ -50,6 +59,7 @@ export function SpaceSelect({
return {
label: space.name,
value: space.slug,
+ icon: space.logo,
};
});
@@ -76,7 +86,6 @@ export function SpaceSelect({
onChange={(slug) =>
onChange(spaces.items?.find((item) => item.slug === slug))
}
- // duct tape
onClick={(e) => e.stopPropagation()}
nothingFoundMessage={t("No space found")}
limit={50}
diff --git a/apps/client/src/features/space/components/sidebar/space-sidebar.tsx b/apps/client/src/features/space/components/sidebar/space-sidebar.tsx
index f0235b3e..ced237be 100644
--- a/apps/client/src/features/space/components/sidebar/space-sidebar.tsx
+++ b/apps/client/src/features/space/components/sidebar/space-sidebar.tsx
@@ -19,7 +19,6 @@ import {
import classes from "./space-sidebar.module.css";
import React from "react";
import { useAtom } from "jotai";
-import { SearchSpotlight } from "@/features/search/search-spotlight.tsx";
import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
import { Link, useLocation, useParams } from "react-router-dom";
import clsx from "clsx";
@@ -75,7 +74,11 @@ export function SpaceSidebar() {
marginBottom: 3,
}}
>
-
+
@@ -195,8 +198,6 @@ export function SpaceSidebar() {
onClose={closeSettings}
spaceId={space?.slug}
/>
-
-
);
}
diff --git a/apps/client/src/features/space/components/sidebar/switch-space.tsx b/apps/client/src/features/space/components/sidebar/switch-space.tsx
index dc47b778..60349ecc 100644
--- a/apps/client/src/features/space/components/sidebar/switch-space.tsx
+++ b/apps/client/src/features/space/components/sidebar/switch-space.tsx
@@ -1,17 +1,25 @@
-import classes from './switch-space.module.css';
-import { useNavigate } from 'react-router-dom';
-import { SpaceSelect } from './space-select';
-import { getSpaceUrl } from '@/lib/config';
-import { Avatar, Button, Popover, Text } from '@mantine/core';
-import { IconChevronDown } from '@tabler/icons-react';
-import { useDisclosure } from '@mantine/hooks';
+import classes from "./switch-space.module.css";
+import { useNavigate } from "react-router-dom";
+import { SpaceSelect } from "./space-select";
+import { getSpaceUrl } from "@/lib/config";
+import { Button, Popover, Text } from "@mantine/core";
+import { IconChevronDown } from "@tabler/icons-react";
+import { useDisclosure } from "@mantine/hooks";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import React from "react";
interface SwitchSpaceProps {
spaceName: string;
spaceSlug: string;
+ spaceIcon?: string;
}
-export function SwitchSpace({ spaceName, spaceSlug }: SwitchSpaceProps) {
+export function SwitchSpace({
+ spaceName,
+ spaceSlug,
+ spaceIcon,
+}: SwitchSpaceProps) {
const navigate = useNavigate();
const [opened, { close, open, toggle }] = useDisclosure(false);
@@ -40,11 +48,13 @@ export function SwitchSpace({ spaceName, spaceSlug }: SwitchSpaceProps) {
color="gray"
onClick={open}
>
-
{spaceName}
@@ -55,7 +65,7 @@ export function SwitchSpace({ spaceName, spaceSlug }: SwitchSpaceProps) {
handleSelect(space.slug)}
+ onChange={(space) => handleSelect(space.slug)}
width={300}
opened={true}
/>
diff --git a/apps/client/src/features/space/components/space-details.tsx b/apps/client/src/features/space/components/space-details.tsx
index fca5aaec..3c3eb178 100644
--- a/apps/client/src/features/space/components/space-details.tsx
+++ b/apps/client/src/features/space/components/space-details.tsx
@@ -1,11 +1,23 @@
-import React from 'react';
-import { useSpaceQuery } from '@/features/space/queries/space-query.ts';
-import { EditSpaceForm } from '@/features/space/components/edit-space-form.tsx';
-import { Button, Divider, Group, Text } from '@mantine/core';
-import DeleteSpaceModal from './delete-space-modal';
+import React, { useState } from "react";
+import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
+import { EditSpaceForm } from "@/features/space/components/edit-space-form.tsx";
+import { Button, Divider, Text } from "@mantine/core";
+import DeleteSpaceModal from "./delete-space-modal";
import { useDisclosure } from "@mantine/hooks";
import ExportModal from "@/components/common/export-modal.tsx";
+import AvatarUploader from "@/components/common/avatar-uploader.tsx";
+import {
+ uploadSpaceIcon,
+ removeSpaceIcon,
+} from "@/features/attachments/services/attachment-service.ts";
import { useTranslation } from "react-i18next";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
+import { queryClient } from "@/main.tsx";
+import {
+ ResponsiveSettingsContent,
+ ResponsiveSettingsControl,
+ ResponsiveSettingsRow,
+} from "@/components/ui/responsive-settings-row.tsx";
interface SpaceDetailsProps {
spaceId: string;
@@ -13,9 +25,40 @@ interface SpaceDetailsProps {
}
export default function SpaceDetails({ spaceId, readOnly }: SpaceDetailsProps) {
const { t } = useTranslation();
- const { data: space, isLoading } = useSpaceQuery(spaceId);
+ const { data: space, isLoading, refetch } = useSpaceQuery(spaceId);
const [exportOpened, { open: openExportModal, close: closeExportModal }] =
useDisclosure(false);
+ const [isIconUploading, setIsIconUploading] = useState(false);
+
+ const handleIconUpload = async (file: File) => {
+ setIsIconUploading(true);
+ try {
+ await uploadSpaceIcon(file, spaceId);
+ await refetch();
+ await queryClient.invalidateQueries({
+ predicate: (item) => ["spaces"].includes(item.queryKey[0] as string),
+ });
+ } catch (err) {
+ // skip
+ } finally {
+ setIsIconUploading(false);
+ }
+ };
+
+ const handleIconRemove = async () => {
+ setIsIconUploading(true);
+ try {
+ await removeSpaceIcon(spaceId);
+ await refetch();
+ await queryClient.invalidateQueries({
+ predicate: (item) => ["spaces"].includes(item.queryKey[0] as string),
+ });
+ } catch (err) {
+ // skip
+ } finally {
+ setIsIconUploading(false);
+ }
+ };
return (
<>
@@ -24,38 +67,56 @@ export default function SpaceDetails({ spaceId, readOnly }: SpaceDetailsProps) {
{t("Details")}
+
+
+
{!readOnly && (
<>
-
-
-
+
+
{t("Export space")}
{t("Export all pages and attachments in this space.")}
-
-
-
-
+
+
+
+
+
-
-
+
+
{t("Delete space")}
{t("Delete this space with all its pages and data.")}
-
-
-
-
+
+
+
+
+
-
{cards}
-
+
{data?.items && data.items.length > 9 && (