mirror of
https://github.com/docmost/docmost.git
synced 2026-05-19 16:04:17 +08:00
Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Philipinho
|
e14aa0ebd9 | ||
|
Philipinho
|
21899fddb6 | ||
|
Philipinho
|
5bcca990fd | ||
|
Philipinho
|
4e8f6b043d | ||
|
Philipinho
|
e2589a67fa | ||
|
Philipinho
|
bfa8fea9fc | ||
|
Philipinho
|
e04b54f625 | ||
|
Philipinho
|
9e365787bb |
@@ -48,13 +48,6 @@ GOTENBERG_URL=
|
||||
|
||||
DISABLE_TELEMETRY=false
|
||||
|
||||
# Allow other sites to embed Docmost in an iframe.
|
||||
IFRAME_EMBED_ALLOWED=false
|
||||
|
||||
# Only used when IFRAME_EMBED_ALLOWED=true. When empty, any origin is allowed.
|
||||
# Example: https://intranet.example.com,https://portal.example.com
|
||||
IFRAME_ALLOWED_ORIGINS=
|
||||
|
||||
# Enable debug logging in production (default: false)
|
||||
DEBUG_MODE=false
|
||||
|
||||
|
||||
+63
-63
@@ -12,84 +12,84 @@
|
||||
"test:watch": "vitest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@atlaskit/pragmatic-drag-and-drop": "1.8.1",
|
||||
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.5",
|
||||
"@atlaskit/pragmatic-drag-and-drop-flourish": "2.0.15",
|
||||
"@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
|
||||
"@atlaskit/pragmatic-drag-and-drop-live-region": "1.3.4",
|
||||
"@casl/react": "5.0.1",
|
||||
"@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
|
||||
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
|
||||
"@atlaskit/pragmatic-drag-and-drop-flourish": "^2.0.15",
|
||||
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
|
||||
"@atlaskit/pragmatic-drag-and-drop-live-region": "^1.3.4",
|
||||
"@casl/react": "^5.0.1",
|
||||
"@docmost/editor-ext": "workspace:*",
|
||||
"@excalidraw/excalidraw": "0.18.0-3a5ef40",
|
||||
"@mantine/core": "8.3.18",
|
||||
"@mantine/dates": "8.3.18",
|
||||
"@mantine/form": "8.3.18",
|
||||
"@mantine/hooks": "8.3.18",
|
||||
"@mantine/modals": "8.3.18",
|
||||
"@mantine/notifications": "8.3.18",
|
||||
"@mantine/spotlight": "8.3.18",
|
||||
"@slidoapp/emoji-mart": "5.8.7",
|
||||
"@slidoapp/emoji-mart-data": "1.2.4",
|
||||
"@slidoapp/emoji-mart-react": "1.1.5",
|
||||
"@tabler/icons-react": "3.40.0",
|
||||
"@mantine/core": "^8.3.18",
|
||||
"@mantine/dates": "^8.3.18",
|
||||
"@mantine/form": "^8.3.18",
|
||||
"@mantine/hooks": "^8.3.18",
|
||||
"@mantine/modals": "^8.3.18",
|
||||
"@mantine/notifications": "^8.3.18",
|
||||
"@mantine/spotlight": "^8.3.18",
|
||||
"@slidoapp/emoji-mart": "^5.8.7",
|
||||
"@slidoapp/emoji-mart-data": "^1.2.4",
|
||||
"@slidoapp/emoji-mart-react": "^1.1.5",
|
||||
"@tabler/icons-react": "^3.40.0",
|
||||
"@tanstack/react-query": "5.90.17",
|
||||
"@tanstack/react-virtual": "3.13.24",
|
||||
"alfaaz": "1.1.0",
|
||||
"alfaaz": "^1.1.0",
|
||||
"axios": "1.16.0",
|
||||
"blueimp-load-image": "5.16.0",
|
||||
"clsx": "2.1.1",
|
||||
"file-saver": "2.0.5",
|
||||
"highlightjs-sap-abap": "0.3.0",
|
||||
"blueimp-load-image": "^5.16.0",
|
||||
"clsx": "^2.1.1",
|
||||
"file-saver": "^2.0.5",
|
||||
"highlightjs-sap-abap": "^0.3.0",
|
||||
"i18next": "25.10.1",
|
||||
"i18next-http-backend": "3.0.6",
|
||||
"jotai": "2.18.1",
|
||||
"jotai-optics": "0.4.0",
|
||||
"js-cookie": "3.0.5",
|
||||
"jwt-decode": "4.0.0",
|
||||
"jotai": "^2.18.1",
|
||||
"jotai-optics": "^0.4.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"katex": "0.16.40",
|
||||
"lowlight": "3.3.0",
|
||||
"mantine-form-zod-resolver": "1.3.0",
|
||||
"mermaid": "11.15.0",
|
||||
"mitt": "3.0.1",
|
||||
"lowlight": "^3.3.0",
|
||||
"mantine-form-zod-resolver": "^1.3.0",
|
||||
"mermaid": "^11.13.0",
|
||||
"mitt": "^3.0.1",
|
||||
"posthog-js": "1.372.2",
|
||||
"react": "18.3.1",
|
||||
"react": "^18.3.1",
|
||||
"react-clear-modal": "^2.0.18",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-drawio": "1.0.7",
|
||||
"react-error-boundary": "6.1.1",
|
||||
"react-helmet-async": "3.0.0",
|
||||
"react-drawio": "^1.0.7",
|
||||
"react-error-boundary": "^6.1.1",
|
||||
"react-helmet-async": "^3.0.0",
|
||||
"react-i18next": "16.5.8",
|
||||
"react-router-dom": "7.13.1",
|
||||
"semver": "7.7.4",
|
||||
"socket.io-client": "4.8.3",
|
||||
"zod": "4.3.6"
|
||||
"react-router-dom": "^7.13.1",
|
||||
"semver": "^7.7.4",
|
||||
"socket.io-client": "^4.8.3",
|
||||
"zod": "^4.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "9.28.0",
|
||||
"@tanstack/eslint-plugin-query": "5.94.4",
|
||||
"@testing-library/jest-dom": "6.6.0",
|
||||
"@testing-library/react": "16.1.0",
|
||||
"@types/blueimp-load-image": "5.16.6",
|
||||
"@types/file-saver": "2.0.7",
|
||||
"@types/js-cookie": "3.0.6",
|
||||
"@types/katex": "0.16.8",
|
||||
"@eslint/js": "^9.28.0",
|
||||
"@tanstack/eslint-plugin-query": "^5.94.4",
|
||||
"@testing-library/jest-dom": "^6.6.0",
|
||||
"@testing-library/react": "^16.1.0",
|
||||
"@types/blueimp-load-image": "^5.16.6",
|
||||
"@types/file-saver": "^2.0.7",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
"@types/katex": "^0.16.8",
|
||||
"@types/node": "22.19.1",
|
||||
"@types/react": "18.3.12",
|
||||
"@types/react-dom": "18.3.1",
|
||||
"@vitejs/plugin-react": "6.0.1",
|
||||
"eslint": "9.28.0",
|
||||
"eslint-plugin-react": "7.37.5",
|
||||
"eslint-plugin-react-hooks": "7.0.1",
|
||||
"eslint-plugin-react-refresh": "0.5.2",
|
||||
"globals": "15.13.0",
|
||||
"jsdom": "25.0.0",
|
||||
"optics-ts": "2.4.1",
|
||||
"postcss": "8.5.14",
|
||||
"postcss-preset-mantine": "1.18.0",
|
||||
"postcss-simple-vars": "7.0.1",
|
||||
"prettier": "3.8.1",
|
||||
"typescript": "5.9.3",
|
||||
"typescript-eslint": "8.57.1",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"eslint": "^9.28.0",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.2",
|
||||
"globals": "^15.13.0",
|
||||
"jsdom": "^25.0.0",
|
||||
"optics-ts": "^2.4.1",
|
||||
"postcss": "^8.5.12",
|
||||
"postcss-preset-mantine": "^1.18.0",
|
||||
"postcss-simple-vars": "^7.0.1",
|
||||
"prettier": "^3.8.1",
|
||||
"typescript": "^5.9.3",
|
||||
"typescript-eslint": "^8.57.1",
|
||||
"vite": "8.0.5",
|
||||
"vitest": "4.1.6"
|
||||
"vitest": "^4.1.6"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -71,7 +71,6 @@
|
||||
"Export": "Export",
|
||||
"Failed to create page": "Failed to create page",
|
||||
"Failed to delete page": "Failed to delete page",
|
||||
"Failed to restore page": "Failed to restore page",
|
||||
"Failed to fetch recent pages": "Failed to fetch recent pages",
|
||||
"Failed to import pages": "Failed to import pages",
|
||||
"Failed to load page. An error occurred.": "Failed to load page. An error occurred.",
|
||||
@@ -287,19 +286,6 @@
|
||||
"Add row above": "Add row above",
|
||||
"Add row below": "Add row below",
|
||||
"Delete table": "Delete table",
|
||||
"Add column left": "Add column left",
|
||||
"Add column right": "Add column right",
|
||||
"Clear cell": "Clear cell",
|
||||
"Clear cells": "Clear cells",
|
||||
"Toggle header cell": "Toggle header cell",
|
||||
"Toggle header column": "Toggle header column",
|
||||
"Toggle header row": "Toggle header row",
|
||||
"Move column left": "Move column left",
|
||||
"Move column right": "Move column right",
|
||||
"Move row down": "Move row down",
|
||||
"Move row up": "Move row up",
|
||||
"Sort A → Z": "Sort A → Z",
|
||||
"Sort Z → A": "Sort Z → A",
|
||||
"Info": "Info",
|
||||
"Note": "Note",
|
||||
"Success": "Success",
|
||||
@@ -362,8 +348,6 @@
|
||||
"Create block quote.": "Create block quote.",
|
||||
"Insert code snippet.": "Insert code snippet.",
|
||||
"Insert horizontal rule divider": "Insert horizontal rule divider",
|
||||
"Page break": "Page break",
|
||||
"Insert a page break for printing.": "Insert a page break for printing.",
|
||||
"Upload any image from your device.": "Upload any image from your device.",
|
||||
"Upload any video from your device.": "Upload any video from your device.",
|
||||
"Upload any audio from your device.": "Upload any audio from your device.",
|
||||
@@ -582,8 +566,6 @@
|
||||
"Move to trash": "Move to trash",
|
||||
"Move this page to trash?": "Move this page to trash?",
|
||||
"Restore page": "Restore page",
|
||||
"Permanently delete": "Permanently delete",
|
||||
"<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> moved this page to Trash {{time}}.",
|
||||
"Page moved to trash": "Page moved to trash",
|
||||
"Page restored successfully": "Page restored successfully",
|
||||
"Deleted by": "Deleted by",
|
||||
@@ -936,35 +918,6 @@
|
||||
"Page actions": "Page actions",
|
||||
"Pick emoji": "Pick emoji",
|
||||
"Template menu": "Template menu",
|
||||
"Use": "Use",
|
||||
"Use template": "Use template",
|
||||
"Preview template: {{title}}": "Preview template: {{title}}",
|
||||
"Use a template": "Use a template",
|
||||
"Search templates...": "Search templates...",
|
||||
"Search spaces...": "Search spaces...",
|
||||
"No templates found": "No templates found",
|
||||
"No spaces found": "No spaces found",
|
||||
"Browse all templates": "Browse all templates",
|
||||
"This space": "This space",
|
||||
"All templates": "All templates",
|
||||
"Global": "Global",
|
||||
"New template": "New template",
|
||||
"Edit template": "Edit template",
|
||||
"Are you sure you want to delete this template?": "Are you sure you want to delete this template?",
|
||||
"Template scope updated": "Template scope updated",
|
||||
"Choose which space this template belongs to": "Choose which space this template belongs to",
|
||||
"Scope": "Scope",
|
||||
"Select scope": "Select scope",
|
||||
"Title": "Title",
|
||||
"Saving...": "Saving...",
|
||||
"Saved": "Saved",
|
||||
"Save failed. Retry": "Save failed. Retry",
|
||||
"By {{name}}": "By {{name}}",
|
||||
"Updated {{time}}": "Updated {{time}}",
|
||||
"Choose destination": "Choose destination",
|
||||
"Search pages and spaces...": "Search pages and spaces...",
|
||||
"No results found": "No results found",
|
||||
"You don't have permission to create pages here": "You don't have permission to create pages here",
|
||||
"Chat menu": "Chat menu",
|
||||
"API key menu": "API key menu",
|
||||
"Jump to comment selection": "Jump to comment selection",
|
||||
@@ -1044,8 +997,5 @@
|
||||
"No pages with this label": "No pages with this label",
|
||||
"Pages tagged with this label will appear here.": "Pages tagged with this label will appear here.",
|
||||
"No pages match your search.": "No pages match your search.",
|
||||
"Updated {{date}}": "Updated {{date}}",
|
||||
"Cell actions": "Cell actions",
|
||||
"Column actions": "Column actions",
|
||||
"Row actions": "Row actions"
|
||||
"Updated {{date}}": "Updated {{date}}"
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { ActionIcon, Box, Group, ScrollArea, Text, Tooltip } from "@mantine/core";
|
||||
import { IconX } from "@tabler/icons-react";
|
||||
import { Box, ScrollArea, Text } from "@mantine/core";
|
||||
import CommentListWithTabs from "@/features/comment/components/comment-list-with-tabs.tsx";
|
||||
import { useAtom } from "jotai";
|
||||
import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
|
||||
@@ -12,10 +11,9 @@ import AsideChatPanel from "@/ee/ai-chat/components/aside-chat-panel";
|
||||
import { PageDetailsAside } from "@/features/page-details/components/page-details-aside.tsx";
|
||||
|
||||
export default function Aside() {
|
||||
const [{ tab }, setAsideState] = useAtom(asideStateAtom);
|
||||
const [{ tab }] = useAtom(asideStateAtom);
|
||||
const { t } = useTranslation();
|
||||
const pageEditor = useAtomValue(pageEditorAtom);
|
||||
const closeAside = () => setAsideState((s) => ({ ...s, isAsideOpen: false }));
|
||||
|
||||
let title: string;
|
||||
let component: ReactNode;
|
||||
@@ -47,19 +45,9 @@ export default function Aside() {
|
||||
{component && (
|
||||
<>
|
||||
{tab !== "chat" && (
|
||||
<Group justify="space-between" wrap="nowrap" mb="md">
|
||||
<Text fw={500}>{t(title)}</Text>
|
||||
<Tooltip label={t("Close")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
onClick={closeAside}
|
||||
aria-label={t("Close")}
|
||||
>
|
||||
<IconX size={18} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<Text mb="md" fw={500}>
|
||||
{t(title)}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{tab === "comments" || tab === "chat" ? (
|
||||
|
||||
@@ -38,16 +38,6 @@
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||
}
|
||||
}
|
||||
|
||||
&[data-disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
|
||||
@mixin hover {
|
||||
background-color: transparent;
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.linkIcon {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { ScrollArea, Text, Divider, Modal, UnstyledButton, Tooltip } from "@mantine/core";
|
||||
import { ScrollArea, Text, Divider, Modal, UnstyledButton } from "@mantine/core";
|
||||
import {
|
||||
IconHome,
|
||||
IconClock,
|
||||
@@ -7,7 +7,6 @@ import {
|
||||
IconLayoutGrid,
|
||||
IconSettings,
|
||||
IconUserPlus,
|
||||
IconTemplate,
|
||||
} from "@tabler/icons-react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import classes from "./global-sidebar.module.css";
|
||||
@@ -21,9 +20,12 @@ import { useDisclosure } from "@mantine/hooks";
|
||||
import { WorkspaceInviteForm } from "@/features/workspace/components/members/components/workspace-invite-form";
|
||||
import { CustomAvatar } from "@/components/ui/custom-avatar";
|
||||
import { AvatarIconType } from "@/features/attachments/types/attachment.types";
|
||||
import { useHasFeature } from "@/ee/hooks/use-feature";
|
||||
import { Feature } from "@/ee/features";
|
||||
import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
|
||||
|
||||
const mainNavItems = [
|
||||
{ label: "Home", icon: IconHome, path: "/home" },
|
||||
{ label: "Favorites", icon: IconStar, path: "/favorites" },
|
||||
{ label: "Spaces", icon: IconLayoutGrid, path: "/spaces" },
|
||||
];
|
||||
|
||||
export default function GlobalSidebar() {
|
||||
const { t } = useTranslation();
|
||||
@@ -31,19 +33,6 @@ export default function GlobalSidebar() {
|
||||
const [active, setActive] = useState(location.pathname);
|
||||
const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
|
||||
const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
|
||||
const hasTemplates = useHasFeature(Feature.TEMPLATES);
|
||||
const upgradeLabel = useUpgradeLabel();
|
||||
const mainNavItems = [
|
||||
{ label: "Home", icon: IconHome, path: "/home" },
|
||||
{ label: "Favorites", icon: IconStar, path: "/favorites" },
|
||||
{ label: "Spaces", icon: IconLayoutGrid, path: "/spaces" },
|
||||
{
|
||||
label: "Templates",
|
||||
icon: IconTemplate,
|
||||
path: "/templates",
|
||||
disabled: !hasTemplates,
|
||||
},
|
||||
];
|
||||
const { data: favoriteSpacesData, isPending: isFavoritesPending } = useFavoritesQuery("space");
|
||||
const favoriteSpaces = favoriteSpacesData?.pages.flatMap((p) => p.items) ?? [];
|
||||
const sortedFavoriteSpaces = [...favoriteSpaces]
|
||||
@@ -69,37 +58,18 @@ export default function GlobalSidebar() {
|
||||
<div className={classes.navbar}>
|
||||
<ScrollArea w="100%" style={{ flex: 1 }}>
|
||||
<div className={classes.section}>
|
||||
{mainNavItems.map((item) =>
|
||||
item.disabled ? (
|
||||
<Tooltip
|
||||
key={item.label}
|
||||
label={upgradeLabel}
|
||||
position="right"
|
||||
withArrow
|
||||
>
|
||||
<UnstyledButton
|
||||
className={classes.link}
|
||||
data-disabled
|
||||
aria-disabled="true"
|
||||
tabIndex={-1}
|
||||
>
|
||||
<item.icon className={classes.linkIcon} stroke={2} />
|
||||
<span>{t(item.label)}</span>
|
||||
</UnstyledButton>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Link
|
||||
key={item.label}
|
||||
className={classes.link}
|
||||
data-active={active === item.path || undefined}
|
||||
to={item.path}
|
||||
onClick={handleNavClick}
|
||||
>
|
||||
<item.icon className={classes.linkIcon} stroke={2} />
|
||||
<span>{t(item.label)}</span>
|
||||
</Link>
|
||||
),
|
||||
)}
|
||||
{mainNavItems.map((item) => (
|
||||
<Link
|
||||
key={item.label}
|
||||
className={classes.link}
|
||||
data-active={active === item.path || undefined}
|
||||
to={item.path}
|
||||
onClick={handleNavClick}
|
||||
>
|
||||
<item.icon className={classes.linkIcon} stroke={2} />
|
||||
<span>{t(item.label)}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Divider my="xs" />
|
||||
|
||||
@@ -16,8 +16,6 @@ export function DestinationPickerModal({
|
||||
loading,
|
||||
excludePageId,
|
||||
pageLimit,
|
||||
initialSpaceId,
|
||||
searchSpacesOnly,
|
||||
}: DestinationPickerModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const [selection, setSelection] = useState<DestinationSelection | null>(null);
|
||||
@@ -48,8 +46,6 @@ export function DestinationPickerModal({
|
||||
onSelectionChange={setSelection}
|
||||
excludePageId={excludePageId}
|
||||
pageLimit={pageLimit}
|
||||
initialSpaceId={initialSpaceId}
|
||||
searchSpacesOnly={searchSpacesOnly}
|
||||
/>
|
||||
|
||||
<Group justify="flex-end" mt="md">
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
transition: background-color 150ms ease;
|
||||
user-select: none;
|
||||
|
||||
@@ -23,11 +22,6 @@
|
||||
var(--mantine-color-dark-6)
|
||||
);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--mantine-primary-color-filled);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
@@ -63,7 +57,7 @@
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
flex-shrink: 0;
|
||||
transition: transform 150ms ease;
|
||||
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
||||
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
||||
|
||||
@mixin hover {
|
||||
background-color: light-dark(
|
||||
@@ -117,7 +111,7 @@
|
||||
}
|
||||
|
||||
.spaceName {
|
||||
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
||||
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState, useCallback, useEffect, useMemo, useRef } from "react";
|
||||
import { ActionIcon, TextInput, ScrollArea, Loader } from "@mantine/core";
|
||||
import { useState, useCallback } from "react";
|
||||
import { TextInput, ScrollArea, Loader } from "@mantine/core";
|
||||
import { useDebouncedValue } from "@mantine/hooks";
|
||||
import { IconSearch, IconFileDescription } from "@tabler/icons-react";
|
||||
import { IconSearch, IconFile } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useGetSpacesQuery } from "@/features/space/queries/space-query";
|
||||
import { useSearchSuggestionsQuery } from "@/features/search/queries/search-query";
|
||||
@@ -15,29 +15,23 @@ type DestinationPickerProps = {
|
||||
onSelectionChange: (selection: DestinationSelection | null) => void;
|
||||
excludePageId?: string;
|
||||
pageLimit?: number;
|
||||
initialSpaceId?: string;
|
||||
searchSpacesOnly?: boolean;
|
||||
};
|
||||
|
||||
export function DestinationPicker({
|
||||
onSelectionChange,
|
||||
excludePageId,
|
||||
pageLimit = 15,
|
||||
initialSpaceId,
|
||||
searchSpacesOnly,
|
||||
}: DestinationPickerProps) {
|
||||
const { t } = useTranslation();
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [selection, setSelection] = useState<DestinationSelection | null>(null);
|
||||
const [debouncedQuery] = useDebouncedValue(searchQuery, 300);
|
||||
const viewportRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const { data: spacesData, isLoading: spacesLoading } = useGetSpacesQuery({
|
||||
limit: 100,
|
||||
});
|
||||
|
||||
const searchEnabled =
|
||||
!searchSpacesOnly && debouncedQuery && debouncedQuery.length >= 2;
|
||||
const searchEnabled = debouncedQuery && debouncedQuery.length >= 2;
|
||||
|
||||
const { data: searchData, isLoading: searchLoading } =
|
||||
useSearchSuggestionsQuery({
|
||||
@@ -48,18 +42,6 @@ export function DestinationPicker({
|
||||
|
||||
const isSearching = !!searchEnabled;
|
||||
|
||||
const filteredSpaces = useMemo(() => {
|
||||
const items = spacesData?.items ?? [];
|
||||
if (!searchSpacesOnly || !debouncedQuery) return items;
|
||||
const fold = (s: string) =>
|
||||
s
|
||||
.normalize("NFD")
|
||||
.replace(/[̀-ͯ]/g, "")
|
||||
.toLocaleLowerCase();
|
||||
const term = fold(debouncedQuery);
|
||||
return items.filter((s) => fold(s.name).includes(term));
|
||||
}, [spacesData, searchSpacesOnly, debouncedQuery]);
|
||||
|
||||
const selectedId =
|
||||
selection?.type === "space" ? selection.spaceId : selection?.pageId ?? null;
|
||||
|
||||
@@ -105,48 +87,18 @@ export function DestinationPicker({
|
||||
[updateSelection],
|
||||
);
|
||||
|
||||
// Pre-select space when initialSpaceId is set and spaces have loaded.
|
||||
// Only runs once: skip if user has already made a selection.
|
||||
useEffect(() => {
|
||||
if (!initialSpaceId || selection) return;
|
||||
const match = spacesData?.items?.find((s) => s.id === initialSpaceId);
|
||||
if (match) {
|
||||
updateSelection({ type: "space", spaceId: match.id, space: match });
|
||||
requestAnimationFrame(() => {
|
||||
const el = viewportRef.current?.querySelector<HTMLElement>(
|
||||
`[data-space-id="${match.id}"]`,
|
||||
);
|
||||
el?.scrollIntoView({ block: "nearest" });
|
||||
});
|
||||
}
|
||||
}, [initialSpaceId, selection, spacesData, updateSelection]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<TextInput
|
||||
leftSection={<IconSearch size={16} />}
|
||||
placeholder={
|
||||
searchSpacesOnly
|
||||
? t("Search spaces...")
|
||||
: t("Search pages and spaces...")
|
||||
}
|
||||
aria-label={
|
||||
searchSpacesOnly
|
||||
? t("Search spaces...")
|
||||
: t("Search pages and spaces...")
|
||||
}
|
||||
placeholder={t("Search pages and spaces...")}
|
||||
variant="filled"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.currentTarget.value)}
|
||||
className={classes.searchInput}
|
||||
/>
|
||||
|
||||
<ScrollArea
|
||||
h="50vh"
|
||||
offsetScrollbars
|
||||
className={classes.scrollArea}
|
||||
viewportRef={viewportRef}
|
||||
>
|
||||
<ScrollArea h="50vh" offsetScrollbars className={classes.scrollArea}>
|
||||
{isSearching ? (
|
||||
searchLoading ? (
|
||||
<div className={classes.emptyState}>
|
||||
@@ -159,28 +111,16 @@ export function DestinationPicker({
|
||||
<div
|
||||
key={page.id}
|
||||
className={classes.searchResult}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => handleSearchResultClick(page)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
handleSearchResultClick(page);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className={classes.iconWrapper}>
|
||||
{page.icon ? (
|
||||
page.icon
|
||||
) : (
|
||||
<ActionIcon
|
||||
component="div"
|
||||
variant="transparent"
|
||||
c="gray"
|
||||
size={22}
|
||||
>
|
||||
<IconFileDescription size={18} />
|
||||
</ActionIcon>
|
||||
<IconFile
|
||||
size={16}
|
||||
color="var(--mantine-color-gray-5)"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className={classes.pageTitle}>
|
||||
@@ -201,14 +141,8 @@ export function DestinationPicker({
|
||||
<div className={classes.emptyState}>
|
||||
<Loader size="xs" />
|
||||
</div>
|
||||
) : filteredSpaces.length === 0 ? (
|
||||
<div className={classes.emptyState}>
|
||||
{searchSpacesOnly && debouncedQuery
|
||||
? t("No spaces found")
|
||||
: t("No results found")}
|
||||
</div>
|
||||
) : (
|
||||
filteredSpaces.map((space) => (
|
||||
spacesData?.items?.map((space) => (
|
||||
<SpaceRow
|
||||
key={space.id}
|
||||
space={space}
|
||||
|
||||
@@ -20,6 +20,4 @@ export type DestinationPickerModalProps = {
|
||||
loading?: boolean;
|
||||
excludePageId?: string;
|
||||
pageLimit?: number;
|
||||
initialSpaceId?: string;
|
||||
searchSpacesOnly?: boolean;
|
||||
};
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { KeyboardEvent, useState } from "react";
|
||||
import { ActionIcon } from "@mantine/core";
|
||||
import { IconChevronRight, IconFileDescription } from "@tabler/icons-react";
|
||||
import { useState } from "react";
|
||||
import { IconChevronRight, IconFile } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IPage } from "@/features/page/types/page.types";
|
||||
import { PageChildren } from "./page-children";
|
||||
@@ -37,44 +36,23 @@ export function PageRow({
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
const handleSelect = () => {
|
||||
if (!isExcluded) onSelect(page);
|
||||
};
|
||||
|
||||
const handleRowKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (e.target !== e.currentTarget) return;
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
handleSelect();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={rowClasses}
|
||||
style={{ paddingLeft: depth * 20 + 12 }}
|
||||
role="button"
|
||||
tabIndex={isExcluded ? -1 : 0}
|
||||
aria-disabled={isExcluded || undefined}
|
||||
onClick={handleSelect}
|
||||
onKeyDown={handleRowKeyDown}
|
||||
onClick={() => !isExcluded && onSelect(page)}
|
||||
>
|
||||
{page.hasChildren ? (
|
||||
<ActionIcon
|
||||
<div
|
||||
className={`${classes.chevron} ${expanded ? classes.chevronExpanded : ""}`}
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="sm"
|
||||
aria-label={expanded ? t("Collapse") : t("Expand")}
|
||||
aria-expanded={expanded}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setExpanded(!expanded);
|
||||
}}
|
||||
>
|
||||
<IconChevronRight size={14} />
|
||||
</ActionIcon>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ width: 20, flexShrink: 0 }} />
|
||||
)}
|
||||
@@ -83,14 +61,10 @@ export function PageRow({
|
||||
{page.icon ? (
|
||||
page.icon
|
||||
) : (
|
||||
<ActionIcon
|
||||
component="div"
|
||||
variant="transparent"
|
||||
c="gray"
|
||||
size={22}
|
||||
>
|
||||
<IconFileDescription size={18} />
|
||||
</ActionIcon>
|
||||
<IconFile
|
||||
size={16}
|
||||
color="var(--mantine-color-gray-5)"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { KeyboardEvent, useState } from "react";
|
||||
import { ActionIcon, Tooltip } from "@mantine/core";
|
||||
import { useState } from "react";
|
||||
import { Tooltip } from "@mantine/core";
|
||||
import { IconChevronRight, IconLock } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ISpace } from "@/features/space/types/space.types";
|
||||
@@ -42,43 +42,21 @@ export function SpaceRow({
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
const handleSelect = () => {
|
||||
if (writable) onSelectSpace(space);
|
||||
};
|
||||
|
||||
const handleRowKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (e.target !== e.currentTarget) return;
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
handleSelect();
|
||||
}
|
||||
};
|
||||
|
||||
const rowContent = (
|
||||
<div
|
||||
className={rowClasses}
|
||||
data-space-id={space.id}
|
||||
role="button"
|
||||
tabIndex={writable ? 0 : -1}
|
||||
aria-disabled={!writable || undefined}
|
||||
onClick={handleSelect}
|
||||
onKeyDown={handleRowKeyDown}
|
||||
onClick={() => writable && onSelectSpace(space)}
|
||||
>
|
||||
{writable ? (
|
||||
<ActionIcon
|
||||
<div
|
||||
className={`${classes.chevron} ${expanded ? classes.chevronExpanded : ""}`}
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="sm"
|
||||
aria-label={expanded ? t("Collapse") : t("Expand")}
|
||||
aria-expanded={expanded}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setExpanded(!expanded);
|
||||
}}
|
||||
>
|
||||
<IconChevronRight size={14} />
|
||||
</ActionIcon>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ width: 20, flexShrink: 0 }} />
|
||||
)}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { useWorkspacePublicDataQuery } from "@/features/workspace/queries/workspace-query.ts";
|
||||
import { Button, Divider, Stack } from "@mantine/core";
|
||||
import { IconLock, IconServer } from "@tabler/icons-react";
|
||||
@@ -7,37 +7,15 @@ import { buildSsoLoginUrl } from "@/ee/security/sso.utils.ts";
|
||||
import { SSO_PROVIDER } from "@/ee/security/contants.ts";
|
||||
import { GoogleIcon } from "@/components/icons/google-icon.tsx";
|
||||
import { LdapLoginModal } from "@/ee/components/ldap-login-modal.tsx";
|
||||
import { getRedirectParam } from "@/lib/app-route.ts";
|
||||
import useCurrentUser from "@/features/user/hooks/use-current-user.ts";
|
||||
|
||||
const SSO_AUTO_ATTEMPT_KEY = "docmost:ssoAutoAttempt";
|
||||
const SSO_AUTO_ATTEMPT_TTL_MS = 5 * 60_000;
|
||||
|
||||
function recentAutoAttempt(): boolean {
|
||||
try {
|
||||
const raw = window.sessionStorage.getItem(SSO_AUTO_ATTEMPT_KEY);
|
||||
if (!raw) return false;
|
||||
const ts = Number(raw);
|
||||
return Number.isFinite(ts) && Date.now() - ts < SSO_AUTO_ATTEMPT_TTL_MS;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function markAutoAttempt(): void {
|
||||
try {
|
||||
window.sessionStorage.setItem(SSO_AUTO_ATTEMPT_KEY, String(Date.now()));
|
||||
} catch {
|
||||
/* sessionStorage unavailable (private mode, etc.) — best effort */
|
||||
}
|
||||
}
|
||||
|
||||
export default function SsoLogin() {
|
||||
const { data, isLoading } = useWorkspacePublicDataQuery();
|
||||
const { data: currentUser } = useCurrentUser();
|
||||
const [ldapModalOpened, setLdapModalOpened] = useState(false);
|
||||
const [selectedLdapProvider, setSelectedLdapProvider] = useState<IAuthProvider | null>(null);
|
||||
const autoRedirectedRef = useRef(false);
|
||||
|
||||
if (!data?.authProviders || data?.authProviders?.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleSsoLogin = (provider: IAuthProvider) => {
|
||||
if (provider.type === SSO_PROVIDER.LDAP) {
|
||||
@@ -50,47 +28,10 @@ export default function SsoLogin() {
|
||||
providerId: provider.id,
|
||||
type: provider.type,
|
||||
workspaceId: data.id,
|
||||
redirect: getRedirectParam() ?? undefined,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Auto-redirect when SSO is enforced and there is exactly one non-LDAP
|
||||
// provider. The user has no other option, so skip the extra click.
|
||||
useEffect(() => {
|
||||
if (autoRedirectedRef.current) return;
|
||||
if (!data?.enforceSso) return;
|
||||
if (!data.authProviders || data.authProviders.length !== 1) return;
|
||||
const onlyProvider = data.authProviders[0];
|
||||
if (onlyProvider.type === SSO_PROVIDER.LDAP) return;
|
||||
|
||||
// Already signed in: let useRedirectIfAuthenticated handle navigation
|
||||
// instead of racing it through the IdP.
|
||||
if (currentUser?.user) return;
|
||||
|
||||
// Explicit logout: don't immediately bounce them back to the IdP.
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
if (params.has("logout")) return;
|
||||
|
||||
// Circuit-breaker: if we already auto-redirected within the TTL, the
|
||||
// user came back (likely from an IdP failure). Show the page so they
|
||||
// can read errors or pick a different account.
|
||||
if (recentAutoAttempt()) return;
|
||||
|
||||
autoRedirectedRef.current = true;
|
||||
markAutoAttempt();
|
||||
window.location.href = buildSsoLoginUrl({
|
||||
providerId: onlyProvider.id,
|
||||
type: onlyProvider.type,
|
||||
workspaceId: data.id,
|
||||
redirect: getRedirectParam() ?? undefined,
|
||||
});
|
||||
}, [data, currentUser]);
|
||||
|
||||
if (!data?.authProviders || data?.authProviders?.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const getProviderIcon = (provider: IAuthProvider) => {
|
||||
if (provider.type === SSO_PROVIDER.GOOGLE) {
|
||||
return <GoogleIcon size={16} />;
|
||||
|
||||
@@ -34,7 +34,7 @@ function AllowMemberTemplatesToggle() {
|
||||
const [checked, setChecked] = useState(
|
||||
workspace?.settings?.templates?.allowMemberTemplates === true,
|
||||
);
|
||||
const hasTemplates = useHasFeature(Feature.TEMPLATES);
|
||||
const hasSecuritySettings = useHasFeature(Feature.SECURITY_SETTINGS);
|
||||
const upgradeLabel = useUpgradeLabel();
|
||||
|
||||
const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -54,11 +54,15 @@ function AllowMemberTemplatesToggle() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Tooltip label={upgradeLabel} disabled={hasTemplates} refProp="rootRef">
|
||||
<Tooltip
|
||||
label={upgradeLabel}
|
||||
disabled={hasSecuritySettings}
|
||||
refProp="rootRef"
|
||||
>
|
||||
<Switch
|
||||
checked={checked}
|
||||
onChange={handleChange}
|
||||
disabled={!hasTemplates}
|
||||
disabled={!hasSecuritySettings}
|
||||
aria-label={t("Toggle allow members to create templates")}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
@@ -137,6 +137,7 @@ export default function Security() {
|
||||
{ max: SCIM_TOKEN_LIMIT },
|
||||
)}
|
||||
disabled={(scimData?.items.length ?? 0) < SCIM_TOKEN_LIMIT}
|
||||
refProp="rootRef"
|
||||
>
|
||||
<Button
|
||||
onClick={() => setCreateOpen(true)}
|
||||
|
||||
@@ -18,21 +18,14 @@ export function buildSsoLoginUrl(opts: {
|
||||
providerId: string;
|
||||
type: SSO_PROVIDER;
|
||||
workspaceId?: string;
|
||||
redirect?: string;
|
||||
}): string {
|
||||
const { providerId, type, workspaceId, redirect } = opts;
|
||||
const { providerId, type, workspaceId } = opts;
|
||||
const domain = getAppUrl();
|
||||
|
||||
const params = new URLSearchParams();
|
||||
if (redirect) params.set("redirect", redirect);
|
||||
|
||||
if (type === SSO_PROVIDER.GOOGLE) {
|
||||
if (workspaceId) params.set("workspaceId", workspaceId);
|
||||
return `${getServerAppUrl()}/api/sso/${type}/login?${params.toString()}`;
|
||||
return `${getServerAppUrl()}/api/sso/${type}/login?workspaceId=${workspaceId}`;
|
||||
}
|
||||
const query = params.toString();
|
||||
const base = `${domain}/api/sso/${type}/${providerId}/login`;
|
||||
return query ? `${base}?${query}` : base;
|
||||
return `${domain}/api/sso/${type}/${providerId}/login`;
|
||||
}
|
||||
|
||||
export function getGoogleSignupUrl(): string {
|
||||
|
||||
@@ -8,11 +8,6 @@
|
||||
@mixin hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--mantine-primary-color-filled);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.cardBody {
|
||||
@@ -55,27 +50,18 @@
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
justify-content: space-between;
|
||||
gap: var(--mantine-spacing-xs);
|
||||
padding-top: var(--mantine-spacing-sm);
|
||||
margin-top: var(--mantine-spacing-lg);
|
||||
border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
|
||||
}
|
||||
|
||||
.scopeDot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background-color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
||||
}
|
||||
|
||||
.menuTarget {
|
||||
opacity: 0;
|
||||
transition: opacity 100ms ease;
|
||||
|
||||
.card:hover &,
|
||||
.card:focus-within & {
|
||||
.card:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Button, Card, Text, ActionIcon, Menu, Group } from "@mantine/core";
|
||||
import { Card, Text, ActionIcon, Menu, Group } from "@mantine/core";
|
||||
import {
|
||||
IconDots,
|
||||
IconEdit,
|
||||
@@ -12,7 +12,6 @@ import classes from "./template-card.module.css";
|
||||
type TemplateCardProps = {
|
||||
template: ITemplate;
|
||||
spaceName?: string;
|
||||
onPreview: (template: ITemplate) => void;
|
||||
onUse: (template: ITemplate) => void;
|
||||
onEdit?: (template: ITemplate) => void;
|
||||
onDelete?: (template: ITemplate) => void;
|
||||
@@ -22,7 +21,6 @@ type TemplateCardProps = {
|
||||
export default function TemplateCard({
|
||||
template,
|
||||
spaceName,
|
||||
onPreview,
|
||||
onUse,
|
||||
onEdit,
|
||||
onDelete,
|
||||
@@ -36,17 +34,7 @@ export default function TemplateCard({
|
||||
padding="lg"
|
||||
className={classes.card}
|
||||
style={{ cursor: "pointer" }}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={t("Preview template: {{title}}", { title: template.title })}
|
||||
onClick={() => onPreview(template)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.target !== e.currentTarget) return;
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
onPreview(template);
|
||||
}
|
||||
}}
|
||||
onClick={() => onUse(template)}
|
||||
>
|
||||
<div className={classes.cardBody}>
|
||||
<Group justify="space-between" align="flex-start" wrap="nowrap" mb="md">
|
||||
@@ -59,17 +47,6 @@ export default function TemplateCard({
|
||||
)}
|
||||
|
||||
<Group gap={6} wrap="nowrap">
|
||||
<Button
|
||||
size="compact-xs"
|
||||
variant="filled"
|
||||
className={classes.menuTarget}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onUse(template);
|
||||
}}
|
||||
>
|
||||
{t("Use")}
|
||||
</Button>
|
||||
{canManage && (
|
||||
<Menu width={150} shadow="md" withArrow>
|
||||
<Menu.Target>
|
||||
@@ -114,7 +91,6 @@ export default function TemplateCard({
|
||||
<div className={classes.title}>{template.title}</div>
|
||||
|
||||
<div className={classes.footer}>
|
||||
<span className={classes.scopeDot} aria-hidden="true" />
|
||||
<Text size="sm" fw={500} c="dimmed">
|
||||
{template.spaceId ? (spaceName || t("Space")) : t("Global")}
|
||||
</Text>
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
.row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--mantine-spacing-sm);
|
||||
padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
width: 100%;
|
||||
|
||||
@mixin hover {
|
||||
background-color: light-dark(
|
||||
var(--mantine-color-gray-1),
|
||||
var(--mantine-color-dark-6)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.scope {
|
||||
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
flex-shrink: 0;
|
||||
transition: opacity 100ms ease;
|
||||
|
||||
.row:hover &,
|
||||
.row:focus-within & {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.useButton {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: var(--mantine-spacing-sm);
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
transition: opacity 100ms ease;
|
||||
|
||||
.row:hover &,
|
||||
.row:focus-within &,
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--mantine-spacing-xl);
|
||||
}
|
||||
@@ -1,259 +0,0 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Modal,
|
||||
TextInput,
|
||||
ScrollArea,
|
||||
Loader,
|
||||
Text,
|
||||
UnstyledButton,
|
||||
Group,
|
||||
SegmentedControl,
|
||||
} from "@mantine/core";
|
||||
import { useDebouncedValue } from "@mantine/hooks";
|
||||
import {
|
||||
IconArrowRight,
|
||||
IconSearch,
|
||||
IconFileText,
|
||||
} from "@tabler/icons-react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
useGetTemplatesQuery,
|
||||
useUseTemplateMutation,
|
||||
} from "@/ee/template/queries/template-query";
|
||||
import { useGetSpacesQuery } from "@/features/space/queries/space-query";
|
||||
import { ITemplate } from "@/ee/template/types/template.types";
|
||||
import UseTemplateModal from "@/ee/template/components/use-template-modal";
|
||||
import TemplatePreviewModal from "@/ee/template/components/template-preview-modal";
|
||||
import { buildPageUrl } from "@/features/page/page.utils";
|
||||
import classes from "./template-picker-modal.module.css";
|
||||
|
||||
type TemplatePickerModalProps = {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
/** Pre-select this space in the destination picker after a template is chosen. */
|
||||
initialSpaceId?: string;
|
||||
};
|
||||
|
||||
type ScopeFilter = "current" | "all";
|
||||
|
||||
export default function TemplatePickerModal({
|
||||
opened,
|
||||
onClose,
|
||||
initialSpaceId,
|
||||
}: TemplatePickerModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const useTemplateMutation = useUseTemplateMutation();
|
||||
const [query, setQuery] = useState("");
|
||||
const [debouncedQuery] = useDebouncedValue(query, 200);
|
||||
const [scope, setScope] = useState<ScopeFilter>(
|
||||
initialSpaceId ? "current" : "all",
|
||||
);
|
||||
// Two-stage selection: previewing first, then destination-picker.
|
||||
// `previewTemplate` is set when the user clicks a row in the picker.
|
||||
// `destinationTemplate` is set when they click "Use template" in the preview.
|
||||
const [previewTemplate, setPreviewTemplate] = useState<ITemplate | null>(
|
||||
null,
|
||||
);
|
||||
const [destinationTemplate, setDestinationTemplate] =
|
||||
useState<ITemplate | null>(null);
|
||||
|
||||
const { data, isPending } = useGetTemplatesQuery({
|
||||
spaceId: scope === "current" ? initialSpaceId : undefined,
|
||||
});
|
||||
const { data: spacesData } = useGetSpacesQuery({ limit: 100 });
|
||||
|
||||
const spaceNamesById = useMemo(() => {
|
||||
const map = new Map<string, string>();
|
||||
spacesData?.items?.forEach((s) => map.set(s.id, s.name));
|
||||
return map;
|
||||
}, [spacesData]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const all = data?.pages.flatMap((p) => p.items) ?? [];
|
||||
const term = debouncedQuery.trim().toLowerCase();
|
||||
if (!term) return all;
|
||||
return all.filter((tpl) => tpl.title.toLowerCase().includes(term));
|
||||
}, [data, debouncedQuery]);
|
||||
|
||||
const createInInitialSpace = async (tpl: ITemplate) => {
|
||||
if (!initialSpaceId) return;
|
||||
try {
|
||||
const page = await useTemplateMutation.mutateAsync({
|
||||
templateId: tpl.id,
|
||||
spaceId: initialSpaceId,
|
||||
});
|
||||
setPreviewTemplate(null);
|
||||
onClose();
|
||||
const space = spacesData?.items?.find((s) => s.id === initialSpaceId);
|
||||
if (page?.slugId && space?.slug) {
|
||||
navigate(buildPageUrl(space.slug, page.slugId, page.title));
|
||||
}
|
||||
} catch {
|
||||
// error notification handled by mutation's onError
|
||||
}
|
||||
};
|
||||
|
||||
const handlePick = (tpl: ITemplate) => {
|
||||
setPreviewTemplate(tpl);
|
||||
};
|
||||
|
||||
const handleQuickUse = (tpl: ITemplate) => {
|
||||
if (initialSpaceId) {
|
||||
createInInitialSpace(tpl);
|
||||
return;
|
||||
}
|
||||
setDestinationTemplate(tpl);
|
||||
};
|
||||
|
||||
const handlePreviewClose = () => {
|
||||
// Closing preview returns to the picker list (no full unmount).
|
||||
setPreviewTemplate(null);
|
||||
};
|
||||
|
||||
const handlePreviewUse = () => {
|
||||
if (initialSpaceId && previewTemplate) {
|
||||
createInInitialSpace(previewTemplate);
|
||||
return;
|
||||
}
|
||||
// Move from preview into destination-picker stage.
|
||||
setDestinationTemplate(previewTemplate);
|
||||
setPreviewTemplate(null);
|
||||
};
|
||||
|
||||
const handleDestinationClose = () => {
|
||||
setDestinationTemplate(null);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setQuery("");
|
||||
setScope(initialSpaceId ? "current" : "all");
|
||||
setPreviewTemplate(null);
|
||||
setDestinationTemplate(null);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
opened={opened && !previewTemplate && !destinationTemplate}
|
||||
onClose={handleClose}
|
||||
size={550}
|
||||
padding="lg"
|
||||
yOffset="10vh"
|
||||
title={<Text fw={500}>{t("Use a template")}</Text>}
|
||||
>
|
||||
<TextInput
|
||||
leftSection={<IconSearch size={16} />}
|
||||
placeholder={t("Search templates...")}
|
||||
variant="filled"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.currentTarget.value)}
|
||||
mb="xs"
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
{initialSpaceId && (
|
||||
<SegmentedControl
|
||||
fullWidth
|
||||
size="xs"
|
||||
mb="sm"
|
||||
value={scope}
|
||||
onChange={(v) => setScope(v as ScopeFilter)}
|
||||
data={[
|
||||
{ label: t("This space"), value: "current" },
|
||||
{ label: t("All templates"), value: "all" },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
|
||||
<ScrollArea h="50vh" offsetScrollbars>
|
||||
{isPending ? (
|
||||
<div className={classes.empty}>
|
||||
<Loader size="xs" />
|
||||
</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className={classes.empty}>
|
||||
<Text size="sm" c="dimmed">
|
||||
{t("No templates found")}
|
||||
</Text>
|
||||
</div>
|
||||
) : (
|
||||
filtered.map((tpl) => (
|
||||
<UnstyledButton
|
||||
key={tpl.id}
|
||||
className={classes.row}
|
||||
onClick={() => handlePick(tpl)}
|
||||
>
|
||||
<div className={classes.icon}>
|
||||
{tpl.icon ? (
|
||||
<span>{tpl.icon}</span>
|
||||
) : (
|
||||
<IconFileText
|
||||
size={16}
|
||||
color="var(--mantine-color-gray-6)"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className={classes.title}>{tpl.title}</div>
|
||||
<div className={classes.scope}>
|
||||
{tpl.spaceId
|
||||
? spaceNamesById.get(tpl.spaceId) ?? t("Space")
|
||||
: t("Global")}
|
||||
</div>
|
||||
<Button
|
||||
size="compact-xs"
|
||||
variant="filled"
|
||||
className={classes.useButton}
|
||||
loading={useTemplateMutation.isPending}
|
||||
disabled={useTemplateMutation.isPending}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleQuickUse(tpl);
|
||||
}}
|
||||
>
|
||||
{t("Use")}
|
||||
</Button>
|
||||
</UnstyledButton>
|
||||
))
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button
|
||||
component={Link}
|
||||
to="/templates"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
rightSection={<IconArrowRight size={16} />}
|
||||
onClick={handleClose}
|
||||
>
|
||||
{t("Browse all templates")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Modal>
|
||||
|
||||
{previewTemplate && (
|
||||
<TemplatePreviewModal
|
||||
templateId={previewTemplate.id}
|
||||
opened={true}
|
||||
onClose={handlePreviewClose}
|
||||
onUse={handlePreviewUse}
|
||||
useLoading={useTemplateMutation.isPending}
|
||||
/>
|
||||
)}
|
||||
|
||||
{destinationTemplate && (
|
||||
<UseTemplateModal
|
||||
template={destinationTemplate}
|
||||
opened={true}
|
||||
onClose={handleDestinationClose}
|
||||
initialSpaceId={initialSpaceId}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -9,7 +9,6 @@ type TemplatePreviewModalProps = {
|
||||
onClose: () => void;
|
||||
onUse: () => void;
|
||||
onEdit?: () => void;
|
||||
useLoading?: boolean;
|
||||
};
|
||||
|
||||
export default function TemplatePreviewModal({
|
||||
@@ -18,7 +17,6 @@ export default function TemplatePreviewModal({
|
||||
onClose,
|
||||
onUse,
|
||||
onEdit,
|
||||
useLoading,
|
||||
}: TemplatePreviewModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const { data: template, isLoading } = useGetTemplateByIdQuery(templateId);
|
||||
@@ -39,19 +37,14 @@ export default function TemplatePreviewModal({
|
||||
</Group>
|
||||
</Modal.Title>
|
||||
<Group gap="sm">
|
||||
<Button
|
||||
size="xs"
|
||||
onClick={onUse}
|
||||
loading={useLoading}
|
||||
disabled={useLoading}
|
||||
>
|
||||
{t("Use template")}
|
||||
</Button>
|
||||
{onEdit && (
|
||||
<Button size="xs" variant="default" onClick={onEdit}>
|
||||
{t("Edit")}
|
||||
</Button>
|
||||
)}
|
||||
<Button size="xs" onClick={onUse}>
|
||||
{t("Use template")}
|
||||
</Button>
|
||||
<Modal.CloseButton />
|
||||
</Group>
|
||||
</Modal.Header>
|
||||
|
||||
@@ -10,14 +10,12 @@ type UseTemplateModalProps = {
|
||||
template: ITemplate;
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
initialSpaceId?: string;
|
||||
};
|
||||
|
||||
export default function UseTemplateModal({
|
||||
template,
|
||||
opened,
|
||||
onClose,
|
||||
initialSpaceId,
|
||||
}: UseTemplateModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
@@ -56,8 +54,6 @@ export default function UseTemplateModal({
|
||||
actionLabel={t("Create page")}
|
||||
onSelect={handleSelect}
|
||||
loading={useTemplateMutation.isPending}
|
||||
initialSpaceId={initialSpaceId ?? template.spaceId}
|
||||
searchSpacesOnly
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -75,18 +75,6 @@ export default function TemplateEditor() {
|
||||
const editor = useEditor({
|
||||
extensions: templateExtensions,
|
||||
content: "",
|
||||
editorProps: {
|
||||
handleDOMEvents: {
|
||||
keydown: (_view, event) => {
|
||||
if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
|
||||
const slashCommand = document.querySelector("#slash-command");
|
||||
if (slashCommand) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
onUpdate() {
|
||||
if (loadedRef.current) {
|
||||
markDirty();
|
||||
|
||||
@@ -160,8 +160,7 @@ export default function TemplateList() {
|
||||
? spaceNameMap.get(template.spaceId)
|
||||
: undefined
|
||||
}
|
||||
onPreview={handlePreview}
|
||||
onUse={handleUse}
|
||||
onUse={handlePreview}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
canManage={isWorkspaceAdmin}
|
||||
|
||||
@@ -6,7 +6,6 @@ import {
|
||||
UseQueryResult,
|
||||
InfiniteData,
|
||||
} from "@tanstack/react-query";
|
||||
import { useAtom, useStore } from "jotai";
|
||||
import {
|
||||
getTemplates,
|
||||
getTemplateById,
|
||||
@@ -19,12 +18,6 @@ import { ITemplate } from "@/ee/template/types/template.types";
|
||||
import { IPagination } from "@/lib/types.ts";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { invalidateOnCreatePage } from "@/features/page/queries/page-query.ts";
|
||||
import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
|
||||
import { treeModel } from "@/features/page/tree/model/tree-model";
|
||||
import { SpaceTreeNode } from "@/features/page/tree/types.ts";
|
||||
import { IPage } from "@/features/page/types/page.types.ts";
|
||||
import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
|
||||
|
||||
export function useGetTemplatesQuery(params?: { spaceId?: string }) {
|
||||
const { spaceId } = params ?? {};
|
||||
@@ -156,64 +149,13 @@ export function useDeleteTemplateMutation() {
|
||||
|
||||
export function useUseTemplateMutation() {
|
||||
const { t } = useTranslation();
|
||||
const [, setTreeData] = useAtom(treeDataAtom);
|
||||
const store = useStore();
|
||||
const emit = useQueryEmit();
|
||||
|
||||
return useMutation<
|
||||
IPage,
|
||||
Error,
|
||||
{ templateId: string; spaceId: string; parentPageId?: string }
|
||||
>({
|
||||
mutationFn: (data) => useTemplate(data),
|
||||
onSuccess: (page) => {
|
||||
// React Query sidebar-pages cache update (same path useCreatePageMutation takes).
|
||||
invalidateOnCreatePage(page);
|
||||
|
||||
const parentId = page.parentPageId ?? null;
|
||||
const newNode: SpaceTreeNode = {
|
||||
id: page.id,
|
||||
slugId: page.slugId,
|
||||
name: page.title,
|
||||
icon: page.icon,
|
||||
position: page.position,
|
||||
spaceId: page.spaceId,
|
||||
parentPageId: page.parentPageId,
|
||||
hasChildren: false,
|
||||
children: [],
|
||||
};
|
||||
|
||||
// Only mutate the tree atom and broadcast if it currently represents
|
||||
// this space. Cross-space template-use (e.g., from the gallery picking
|
||||
// a different space) lets the target space's clients pick up the new
|
||||
// page on their next React Query refetch (focus, navigation, etc.).
|
||||
// Without this guard we'd both pollute the local tree and send a wrong
|
||||
// `index` to remote clients in the target space.
|
||||
const current = store.get(treeDataAtom);
|
||||
const treeIsForThisSpace = current[0]?.spaceId === page.spaceId;
|
||||
if (!treeIsForThisSpace) return;
|
||||
|
||||
const lastIndex =
|
||||
parentId === null
|
||||
? current.length
|
||||
: (treeModel.find(current, parentId)?.children?.length ?? 0);
|
||||
|
||||
setTreeData((prev) =>
|
||||
treeModel.insert(prev, parentId, newNode, lastIndex),
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
emit({
|
||||
operation: "addTreeNode",
|
||||
spaceId: page.spaceId,
|
||||
payload: {
|
||||
parentId,
|
||||
index: lastIndex,
|
||||
data: newNode,
|
||||
},
|
||||
});
|
||||
}, 50);
|
||||
},
|
||||
return useMutation({
|
||||
mutationFn: (data: {
|
||||
templateId: string;
|
||||
spaceId: string;
|
||||
parentPageId?: string;
|
||||
}) => useTemplate(data),
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import api from "@/lib/api-client";
|
||||
import { ITemplate } from "@/ee/template/types/template.types";
|
||||
import { IPage } from "@/features/page/types/page.types";
|
||||
import { IPagination } from "@/lib/types.ts";
|
||||
|
||||
export async function getTemplates(params?: {
|
||||
@@ -41,7 +40,7 @@ export async function useTemplate(data: {
|
||||
templateId: string;
|
||||
spaceId: string;
|
||||
parentPageId?: string;
|
||||
}): Promise<IPage> {
|
||||
const req = await api.post<IPage>("/templates/use", data);
|
||||
}): Promise<any> {
|
||||
const req = await api.post("/templates/use", data);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
@@ -166,7 +166,7 @@ export default function useAuth() {
|
||||
const handleLogout = async () => {
|
||||
setCurrentUser(RESET);
|
||||
await logout();
|
||||
window.location.replace(`${APP_ROUTE.AUTH.LOGIN}?logout=1`);
|
||||
window.location.replace(APP_ROUTE.AUTH.LOGIN);
|
||||
};
|
||||
|
||||
const handleForgotPassword = async (data: IForgotPassword) => {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { atom } from "jotai";
|
||||
import { Editor } from "@tiptap/core";
|
||||
import { PageEditMode } from "@/features/user/types/user.types.ts";
|
||||
|
||||
export const pageEditorAtom = atom<Editor | null>(null);
|
||||
|
||||
@@ -13,7 +12,3 @@ export const yjsConnectionStatusAtom = atom<string>("");
|
||||
export const showAiMenuAtom = atom(false);
|
||||
|
||||
export const showLinkMenuAtom = atom(false);
|
||||
|
||||
// Current page's edit mode — initialized from the user's saved preference on
|
||||
// first load, can be toggled locally without persisting to the server.
|
||||
export const currentPageEditModeAtom = atom<PageEditMode>(PageEditMode.Edit);
|
||||
|
||||
@@ -2,7 +2,6 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
|
||||
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
|
||||
import { useCallback } from "react";
|
||||
import { Node as PMNode } from "@tiptap/pm/model";
|
||||
import { isEditorReady } from "@docmost/editor-ext";
|
||||
import {
|
||||
EditorMenuProps,
|
||||
ShouldShowProps,
|
||||
@@ -47,7 +46,7 @@ export function AudioMenu({ editor }: EditorMenuProps) {
|
||||
);
|
||||
|
||||
const getReferencedVirtualElement = useCallback(() => {
|
||||
if (!isEditorReady(editor)) return;
|
||||
if (!editor) return;
|
||||
const { selection } = editor.state;
|
||||
const predicate = (node: PMNode) => node.type.name === "audio";
|
||||
const parent = findParentNode(predicate)(selection);
|
||||
|
||||
@@ -16,7 +16,7 @@ import {
|
||||
IconMoodSmile,
|
||||
IconNotes,
|
||||
} from "@tabler/icons-react";
|
||||
import { CalloutType, isEditorReady, isTextSelected } from "@docmost/editor-ext";
|
||||
import { CalloutType, isTextSelected } from "@docmost/editor-ext";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import EmojiPicker from "@/components/ui/emoji-picker.tsx";
|
||||
import classes from "../common/toolbar-menu.module.css";
|
||||
@@ -55,7 +55,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
|
||||
});
|
||||
|
||||
const getReferencedVirtualElement = useCallback(() => {
|
||||
if (!isEditorReady(editor)) return;
|
||||
if (!editor) return;
|
||||
const { selection } = editor.state;
|
||||
const predicate = (node: PMNode) => node.type.name === "callout";
|
||||
const parent = findParentNode(predicate)(selection);
|
||||
|
||||
@@ -19,7 +19,7 @@ import {
|
||||
IconCopy,
|
||||
IconTrash,
|
||||
} from "@tabler/icons-react";
|
||||
import { isEditorReady, isTextSelected } from "@docmost/editor-ext";
|
||||
import { isTextSelected } from "@docmost/editor-ext";
|
||||
import type { WidthMode, ColumnsLayout } from "@docmost/editor-ext";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import classes from "../common/toolbar-menu.module.css";
|
||||
@@ -82,7 +82,7 @@ export function ColumnsMenu({ editor }: EditorMenuProps) {
|
||||
|
||||
const shouldShow = useCallback(
|
||||
({ state }: ShouldShowProps) => {
|
||||
if (!state || !isEditorReady(editor)) return false;
|
||||
if (!state) return false;
|
||||
if (!editor.isActive("columns")) return false;
|
||||
if (isTextSelected(editor)) return false;
|
||||
if (nodesWithMenus.some((name) => editor.isActive(name))) return false;
|
||||
@@ -121,7 +121,7 @@ export function ColumnsMenu({ editor }: EditorMenuProps) {
|
||||
});
|
||||
|
||||
const getReferencedVirtualElement = useCallback(() => {
|
||||
if (!isEditorReady(editor)) return;
|
||||
if (!editor) return;
|
||||
const { selection } = editor.state;
|
||||
const predicate = (node: PMNode) => node.type.name === "columns";
|
||||
const parent = findParentNode(predicate)(selection);
|
||||
|
||||
@@ -2,7 +2,6 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
|
||||
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Node as PMNode } from "@tiptap/pm/model";
|
||||
import { isEditorReady } from "@docmost/editor-ext";
|
||||
import {
|
||||
EditorMenuProps,
|
||||
ShouldShowProps,
|
||||
@@ -82,7 +81,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
|
||||
);
|
||||
|
||||
const getReferencedVirtualElement = useCallback(() => {
|
||||
if (!isEditorReady(editor)) return;
|
||||
if (!editor) return;
|
||||
const { selection } = editor.state;
|
||||
const predicate = (node: PMNode) => node.type.name === "drawio";
|
||||
const parent = findParentNode(predicate)(selection);
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
import { lazy, Suspense } from "react";
|
||||
import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
|
||||
|
||||
const ExcalidrawMenu = lazy(
|
||||
() => import("@/features/editor/components/excalidraw/excalidraw-menu.tsx"),
|
||||
);
|
||||
|
||||
export default function ExcalidrawMenuLazy(props: EditorMenuProps) {
|
||||
return (
|
||||
<Suspense fallback={null}>
|
||||
<ExcalidrawMenu {...props} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,6 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
|
||||
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
|
||||
import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Node as PMNode } from "@tiptap/pm/model";
|
||||
import { isEditorReady } from "@docmost/editor-ext";
|
||||
import {
|
||||
EditorMenuProps,
|
||||
ShouldShowProps,
|
||||
@@ -95,7 +94,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
|
||||
);
|
||||
|
||||
const getReferencedVirtualElement = useCallback(() => {
|
||||
if (!isEditorReady(editor)) return;
|
||||
if (!editor) return;
|
||||
const { selection } = editor.state;
|
||||
const predicate = (node: PMNode) => node.type.name === "excalidraw";
|
||||
const parent = findParentNode(predicate)(selection);
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
import { lazy, Suspense } from "react";
|
||||
import { NodeViewProps } from "@tiptap/react";
|
||||
|
||||
const ExcalidrawView = lazy(
|
||||
() => import("@/features/editor/components/excalidraw/excalidraw-view.tsx"),
|
||||
);
|
||||
|
||||
export default function ExcalidrawViewLazy(props: NodeViewProps) {
|
||||
return (
|
||||
<Suspense fallback={null}>
|
||||
<ExcalidrawView {...props} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
top: calc(var(--app-shell-header-offset, 0rem) + 45px);
|
||||
inset-inline-start: var(--app-shell-navbar-offset, 0rem);
|
||||
inset-inline-end: var(--app-shell-aside-offset, 0rem);
|
||||
z-index: 99;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--mantine-color-body);
|
||||
|
||||
@@ -28,7 +28,6 @@ export const FixedToolbar: FC = () => {
|
||||
<>
|
||||
<div
|
||||
className={classes.fixedToolbar}
|
||||
data-fixed-toolbar="true"
|
||||
role="toolbar"
|
||||
aria-label="Editor toolbar"
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
|
||||
@@ -10,7 +10,6 @@ import {
|
||||
IconH2,
|
||||
IconH3,
|
||||
IconMenu4,
|
||||
IconPageBreak,
|
||||
IconTypography,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -103,12 +102,6 @@ export const BlockTypeGroup: FC<Props> = ({ editor }) => {
|
||||
>
|
||||
{t("Divider")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconPageBreak size={16} />}
|
||||
onClick={() => editor.chain().focus().setPageBreak().run()}
|
||||
>
|
||||
{t("Page break")}
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
@@ -2,7 +2,6 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
|
||||
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
|
||||
import React, { useCallback, useRef } from "react";
|
||||
import { Node as PMNode } from "@tiptap/pm/model";
|
||||
import { isEditorReady } from "@docmost/editor-ext";
|
||||
import {
|
||||
EditorMenuProps,
|
||||
ShouldShowProps,
|
||||
@@ -57,7 +56,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
|
||||
);
|
||||
|
||||
const getReferencedVirtualElement = useCallback(() => {
|
||||
if (!isEditorReady(editor)) return;
|
||||
if (!editor) return;
|
||||
const { selection } = editor.state;
|
||||
const predicate = (node: PMNode) => node.type.name === "image";
|
||||
const parent = findParentNode(predicate)(selection);
|
||||
|
||||
@@ -2,7 +2,6 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
|
||||
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
|
||||
import { useCallback } from "react";
|
||||
import { Node as PMNode } from "@tiptap/pm/model";
|
||||
import { isEditorReady } from "@docmost/editor-ext";
|
||||
import {
|
||||
EditorMenuProps,
|
||||
ShouldShowProps,
|
||||
@@ -38,8 +37,9 @@ export function PdfMenu({ editor }: EditorMenuProps) {
|
||||
|
||||
const shouldShow = useCallback(
|
||||
({ state }: ShouldShowProps) => {
|
||||
if (!state || !isEditorReady(editor)) return false;
|
||||
if (!editor.isActive("pdf")) return false;
|
||||
if (!state || !editor.isActive("pdf")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const { selection } = state;
|
||||
const dom = editor.view.nodeDOM(selection.from) as HTMLElement | null;
|
||||
@@ -51,7 +51,7 @@ export function PdfMenu({ editor }: EditorMenuProps) {
|
||||
);
|
||||
|
||||
const getReferencedVirtualElement = useCallback(() => {
|
||||
if (!isEditorReady(editor)) return;
|
||||
if (!editor) return;
|
||||
const { selection } = editor.state;
|
||||
const predicate = (node: PMNode) => node.type.name === "pdf";
|
||||
const parent = findParentNode(predicate)(selection);
|
||||
|
||||
@@ -19,7 +19,6 @@ import {
|
||||
IconTable,
|
||||
IconTypography,
|
||||
IconMenu4,
|
||||
IconPageBreak,
|
||||
IconCalendar,
|
||||
IconAppWindow,
|
||||
IconSitemap,
|
||||
@@ -165,14 +164,6 @@ const CommandGroups: SlashMenuGroupedItemsType = {
|
||||
command: ({ editor, range }: CommandProps) =>
|
||||
editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
|
||||
},
|
||||
{
|
||||
title: "Page break",
|
||||
description: "Insert a page break for printing.",
|
||||
searchTerms: ["page", "break", "pagebreak", "print"],
|
||||
icon: IconPageBreak,
|
||||
command: ({ editor, range }: CommandProps) =>
|
||||
editor.chain().focus().deleteRange(range).setPageBreak().run(),
|
||||
},
|
||||
{
|
||||
title: "Image",
|
||||
description: "Upload any image from your device.",
|
||||
|
||||
@@ -6,7 +6,6 @@ import { ActionIcon, Tooltip } from "@mantine/core";
|
||||
import { IconTrash } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Editor } from "@tiptap/core";
|
||||
import { isEditorReady } from "@docmost/editor-ext";
|
||||
|
||||
interface SubpagesMenuProps {
|
||||
editor: Editor;
|
||||
@@ -34,7 +33,6 @@ export const SubpagesMenu = React.memo(
|
||||
);
|
||||
|
||||
const getReferenceClientRect = useCallback(() => {
|
||||
if (!isEditorReady(editor)) return new DOMRect();
|
||||
const { selection } = editor.state;
|
||||
const predicate = (node: PMNode) => node.type.name === "subpages";
|
||||
const parent = findParentNode(predicate)(selection);
|
||||
|
||||
@@ -1,126 +0,0 @@
|
||||
import React, { useCallback, useEffect } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { useEditorState } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { TextSelection } from "@tiptap/pm/state";
|
||||
import { columnResizingPluginKey } from "@tiptap/pm/tables";
|
||||
import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
|
||||
import { Menu, UnstyledButton } from "@mantine/core";
|
||||
import { IconChevronDown } from "@tabler/icons-react";
|
||||
import clsx from "clsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { isCellSelection } from "@docmost/editor-ext";
|
||||
import { CellChevronMenu } from "./menus/cell-chevron-menu";
|
||||
import classes from "./handle.module.css";
|
||||
|
||||
interface CellChevronProps {
|
||||
editor: Editor;
|
||||
cellPos: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
}
|
||||
|
||||
export const CellChevron = React.memo(function CellChevron({
|
||||
editor,
|
||||
cellPos,
|
||||
tableNode,
|
||||
tablePos,
|
||||
}: CellChevronProps) {
|
||||
const { t } = useTranslation();
|
||||
const cellDom = editor.view.nodeDOM(cellPos) as HTMLElement | null;
|
||||
|
||||
const { refs, floatingStyles, middlewareData } = useFloating({
|
||||
placement: "top-end",
|
||||
// crossAxis pulls the chevron INWARD from the cell's right edge. We need
|
||||
// enough inset that we don't overlap PM-tables' column-resize hot zone
|
||||
// (~5px wide around the column boundary). Without this, hovering near the
|
||||
// column edge picks up the chevron's `cursor: pointer` instead of
|
||||
// `col-resize`, and a drag near the edge clicks the chevron.
|
||||
middleware: [offset({ mainAxis: -22, crossAxis: -10 }), hide()],
|
||||
whileElementsMounted: autoUpdate,
|
||||
strategy: "absolute",
|
||||
});
|
||||
const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
|
||||
|
||||
useEffect(() => {
|
||||
refs.setReference(cellDom);
|
||||
}, [cellDom, refs]);
|
||||
|
||||
// Hide the chevron while the user is resizing a column. PM-tables sets
|
||||
// `activeHandle > -1` whenever the mouse is near a column boundary OR
|
||||
// actively dragging it. Either way we don't want the chevron in the way.
|
||||
const isResizingColumn = useEditorState({
|
||||
editor,
|
||||
selector: (ctx) => {
|
||||
if (!ctx.editor) return false;
|
||||
const state = columnResizingPluginKey.getState(ctx.editor.state) as
|
||||
| { activeHandle: number }
|
||||
| undefined;
|
||||
return !!state && state.activeHandle > -1;
|
||||
},
|
||||
});
|
||||
|
||||
const onOpen = useCallback(() => {
|
||||
const current = editor.state.selection;
|
||||
|
||||
// Preserve an existing multi-cell CellSelection that already covers
|
||||
// this cell so merge etc. operate on the user's whole range.
|
||||
let preserveExisting = false;
|
||||
if (isCellSelection(current)) {
|
||||
current.forEachCell((_node, pos) => {
|
||||
if (pos === cellPos) preserveExisting = true;
|
||||
});
|
||||
}
|
||||
|
||||
if (!preserveExisting) {
|
||||
// Drop a collapsed cursor inside the cell rather than a single-cell
|
||||
// CellSelection — PM-tables paints the latter as a text-range
|
||||
// highlight on the cell content.
|
||||
try {
|
||||
const $inside = editor.state.doc.resolve(cellPos + 1);
|
||||
const sel = TextSelection.near($inside, 1);
|
||||
editor.view.dispatch(editor.state.tr.setSelection(sel));
|
||||
} catch {}
|
||||
}
|
||||
editor.commands.freezeHandles();
|
||||
}, [editor, cellPos]);
|
||||
|
||||
const onClose = useCallback(() => {
|
||||
editor.commands.unfreezeHandles();
|
||||
}, [editor]);
|
||||
|
||||
if (!cellDom) return null;
|
||||
if (isResizingColumn) return null;
|
||||
|
||||
return (
|
||||
<Menu
|
||||
position="bottom-end"
|
||||
onOpen={onOpen}
|
||||
onClose={onClose}
|
||||
withinPortal
|
||||
shadow="md"
|
||||
>
|
||||
<Menu.Target>
|
||||
<UnstyledButton
|
||||
ref={refs.setFloating}
|
||||
style={{
|
||||
...floatingStyles,
|
||||
...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
|
||||
}}
|
||||
className={clsx(classes.cellChevron)}
|
||||
aria-label={t("Cell actions")}
|
||||
>
|
||||
<IconChevronDown size={14} />
|
||||
</UnstyledButton>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<CellChevronMenu
|
||||
editor={editor}
|
||||
cellPos={cellPos}
|
||||
tableNode={tableNode}
|
||||
tablePos={tablePos}
|
||||
/>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
});
|
||||
@@ -1,132 +0,0 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
|
||||
import { Menu } from "@mantine/core";
|
||||
import clsx from "clsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTableHandleDrag } from "./hooks/use-table-handle-drag";
|
||||
import { useColumnRowMenuLifecycle } from "./hooks/use-column-row-menu-lifecycle";
|
||||
import { ColumnHandleMenu } from "./menus/column-handle-menu";
|
||||
import classes from "./handle.module.css";
|
||||
|
||||
interface ColumnHandleProps {
|
||||
editor: Editor;
|
||||
index: number;
|
||||
anchorPos: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
}
|
||||
|
||||
export const ColumnHandle = React.memo(function ColumnHandle({
|
||||
editor,
|
||||
index,
|
||||
anchorPos,
|
||||
tableNode,
|
||||
tablePos,
|
||||
}: ColumnHandleProps) {
|
||||
const { t } = useTranslation();
|
||||
// Hold the cell DOM in a ref-backed state so we never unmount the handle
|
||||
// mid-drag. A remote edit can transiently flip `nodeDOM(anchorPos)` to null
|
||||
// (the plugin re-emits `hoveringCell` with the mapped pos a tick later);
|
||||
// unmounting the source element here would make pragmatic-dnd silently
|
||||
// abort the active drag.
|
||||
// `nodeDOM` is typed as `Node | null` — when `anchorPos` goes stale (e.g.
|
||||
// an external drop reflows the doc before the plugin re-emits
|
||||
// hoveringCell), it can resolve to a Text node, on which `.closest` is
|
||||
// undefined. Filter to HTMLElement so downstream consumers stay safe.
|
||||
const lookupDom = editor.view.nodeDOM(anchorPos);
|
||||
const lookupCellDom = lookupDom instanceof HTMLElement ? lookupDom : null;
|
||||
const [cellDom, setCellDom] = useState<HTMLElement | null>(lookupCellDom);
|
||||
const lastCellDomRef = useRef<HTMLElement | null>(lookupCellDom);
|
||||
useEffect(() => {
|
||||
if (lookupCellDom && lookupCellDom !== lastCellDomRef.current) {
|
||||
lastCellDomRef.current = lookupCellDom;
|
||||
setCellDom(lookupCellDom);
|
||||
}
|
||||
}, [lookupCellDom]);
|
||||
|
||||
const [handleEl, setHandleEl] = useState<HTMLDivElement | null>(null);
|
||||
|
||||
const { refs, floatingStyles, middlewareData } = useFloating({
|
||||
placement: "top",
|
||||
middleware: [offset(-4), hide()],
|
||||
whileElementsMounted: autoUpdate,
|
||||
});
|
||||
const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
|
||||
|
||||
useEffect(() => {
|
||||
refs.setReference(cellDom);
|
||||
}, [cellDom, refs]);
|
||||
|
||||
// `cellDom` is inside the table, so `closest('.tableWrapper')` finds the
|
||||
// wrapper for this drag's auto-scroll. The handle itself lives in a
|
||||
// floating layer outside the editor DOM, so we can't walk up from it.
|
||||
const wrapper = cellDom?.closest<HTMLElement>(".tableWrapper") ?? null;
|
||||
|
||||
const [menuOpened, setMenuOpened] = useState(false);
|
||||
const closeMenu = useCallback(() => setMenuOpened(false), []);
|
||||
useTableHandleDrag(editor, "col", handleEl, wrapper, closeMenu);
|
||||
|
||||
const { onOpen, onClose } = useColumnRowMenuLifecycle({
|
||||
editor,
|
||||
orientation: "col",
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
});
|
||||
|
||||
if (!cellDom) return null;
|
||||
|
||||
return (
|
||||
<Menu
|
||||
opened={menuOpened}
|
||||
onChange={setMenuOpened}
|
||||
position="bottom-start"
|
||||
onOpen={onOpen}
|
||||
onClose={onClose}
|
||||
withinPortal
|
||||
shadow="md"
|
||||
>
|
||||
<Menu.Target>
|
||||
<div
|
||||
ref={(node) => {
|
||||
refs.setFloating(node);
|
||||
setHandleEl(node);
|
||||
}}
|
||||
style={{
|
||||
...floatingStyles,
|
||||
...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
|
||||
}}
|
||||
className={clsx(classes.handle, classes.columnHandle)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={t("Column actions")}
|
||||
>
|
||||
<span style={{ pointerEvents: "none", display: "inline-flex" }}>
|
||||
<GripIcon />
|
||||
</span>
|
||||
</div>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<ColumnHandleMenu
|
||||
editor={editor}
|
||||
index={index}
|
||||
tableNode={tableNode}
|
||||
tablePos={tablePos}
|
||||
/>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
});
|
||||
|
||||
function GripIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 10 10" width="14" height="14" aria-hidden>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M3,2 A1,1 0 1 1 3,0 A1,1 0 0 1 3,2 Z M3,6 A1,1 0 1 1 3,4 A1,1 0 0 1 3,6 Z M3,10 A1,1 0 1 1 3,8 A1,1 0 0 1 3,10 Z M7,2 A1,1 0 1 1 7,0 A1,1 0 0 1 7,2 Z M7,6 A1,1 0 1 1 7,4 A1,1 0 0 1 7,6 Z M7,10 A1,1 0 1 1 7,8 A1,1 0 0 1 7,10 Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
.handle {
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
color: rgba(55, 53, 47, 0.45);
|
||||
background: var(--mantine-color-body);
|
||||
border: 1px solid rgba(55, 53, 47, 0.12);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
cursor: grab;
|
||||
padding: 0;
|
||||
transition: background-color 120ms ease, color 120ms ease;
|
||||
|
||||
@mixin dark {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
background: var(--mantine-color-dark-7);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.handle:hover {
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-1),
|
||||
var(--mantine-color-dark-5)
|
||||
);
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-7),
|
||||
var(--mantine-color-dark-0)
|
||||
);
|
||||
}
|
||||
|
||||
.handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.columnHandle {
|
||||
width: 28px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.columnHandle svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.rowHandle {
|
||||
width: 16px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.handle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cellChevron {
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-7),
|
||||
var(--mantine-color-dark-1)
|
||||
);
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-1),
|
||||
var(--mantine-color-dark-5)
|
||||
);
|
||||
border: 1px solid rgba(55, 53, 47, 0.12);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: background-color 120ms ease, color 120ms ease;
|
||||
|
||||
@mixin dark {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.cellChevron:hover {
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-2),
|
||||
var(--mantine-color-dark-4)
|
||||
);
|
||||
color: light-dark(
|
||||
var(--mantine-color-gray-8),
|
||||
var(--mantine-color-dark-0)
|
||||
);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.cellChevron {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.handle,
|
||||
.cellChevron {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
-40
@@ -1,40 +0,0 @@
|
||||
import { useCallback } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { buildRowOrColumnSelection, Orientation } from "../lib/select-row-column";
|
||||
|
||||
interface Args {
|
||||
editor: Editor;
|
||||
orientation: Orientation;
|
||||
index: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
}
|
||||
|
||||
export function useColumnRowMenuLifecycle({
|
||||
editor,
|
||||
orientation,
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
}: Args) {
|
||||
const onOpen = useCallback(() => {
|
||||
const selection = buildRowOrColumnSelection(
|
||||
editor.state,
|
||||
tableNode,
|
||||
tablePos,
|
||||
orientation,
|
||||
index,
|
||||
);
|
||||
const tr = editor.state.tr;
|
||||
if (selection) tr.setSelection(selection);
|
||||
editor.view.dispatch(tr);
|
||||
editor.commands.freezeHandles();
|
||||
}, [editor, orientation, index, tableNode, tablePos]);
|
||||
|
||||
const onClose = useCallback(() => {
|
||||
editor.commands.unfreezeHandles();
|
||||
}, [editor]);
|
||||
|
||||
return { onOpen, onClose };
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import { useCallback } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { TableMap } from "@tiptap/pm/tables";
|
||||
|
||||
type Scope =
|
||||
| { kind: "col"; index: number }
|
||||
| { kind: "row"; index: number }
|
||||
| { kind: "cell"; cellPos: number };
|
||||
|
||||
export function useTableClear(
|
||||
editor: Editor,
|
||||
tableNode: ProseMirrorNode,
|
||||
tablePos: number,
|
||||
scope: Scope,
|
||||
) {
|
||||
return useCallback(() => {
|
||||
const tr = editor.state.tr;
|
||||
const tableStart = tablePos + 1;
|
||||
const map = TableMap.get(tableNode);
|
||||
const paragraph = editor.schema.nodes.paragraph;
|
||||
if (!paragraph) return;
|
||||
|
||||
const cellOffsets: number[] = [];
|
||||
|
||||
if (scope.kind === "col") {
|
||||
for (let row = 0; row < map.height; row++) {
|
||||
cellOffsets.push(map.map[row * map.width + scope.index]);
|
||||
}
|
||||
} else if (scope.kind === "row") {
|
||||
for (let col = 0; col < map.width; col++) {
|
||||
cellOffsets.push(map.map[scope.index * map.width + col]);
|
||||
}
|
||||
}
|
||||
|
||||
const targets =
|
||||
scope.kind === "cell"
|
||||
? [scope.cellPos]
|
||||
: Array.from(new Set(cellOffsets)).map((o) => tableStart + o);
|
||||
|
||||
// Process in reverse position order so earlier replacements don't shift later ones.
|
||||
targets.sort((a, b) => b - a);
|
||||
|
||||
for (const cellPos of targets) {
|
||||
const node = tr.doc.nodeAt(cellPos);
|
||||
if (!node) continue;
|
||||
const start = cellPos + 1;
|
||||
const end = cellPos + node.nodeSize - 1;
|
||||
tr.replaceWith(start, end, paragraph.create());
|
||||
}
|
||||
|
||||
if (tr.docChanged) editor.view.dispatch(tr);
|
||||
}, [editor, tableNode, tablePos, scope]);
|
||||
}
|
||||
-79
@@ -1,79 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
|
||||
import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
||||
import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
|
||||
import {
|
||||
autoScrollForElements,
|
||||
autoScrollWindowForElements,
|
||||
} from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
|
||||
import { getTableHandlePluginSpec } from "@docmost/editor-ext";
|
||||
|
||||
// Uses pragmatic-drag-and-drop instead of native HTML5 DnD because the native
|
||||
// dragstart→dragover→drop lifecycle was being silently cancelled
|
||||
export function useTableHandleDrag(
|
||||
editor: Editor,
|
||||
orientation: "col" | "row",
|
||||
element: HTMLElement | null,
|
||||
wrapper: HTMLElement | null,
|
||||
onDragStart?: () => void,
|
||||
) {
|
||||
useEffect(() => {
|
||||
if (!element) return;
|
||||
|
||||
return combine(
|
||||
draggable({
|
||||
element,
|
||||
getInitialData: () => ({ type: `table-${orientation}` }),
|
||||
onGenerateDragPreview: ({ nativeSetDragImage }) => {
|
||||
// We render our own floating preview via PreviewController, so hide
|
||||
// the native drag image entirely.
|
||||
disableNativeDragPreview({ nativeSetDragImage });
|
||||
},
|
||||
onDragStart: ({ location }) => {
|
||||
// The menu (if open from a prior click on the handle) won't dismiss
|
||||
// on its own — pragmatic-dnd swallows the events Mantine listens for.
|
||||
onDragStart?.();
|
||||
const spec = getTableHandlePluginSpec(editor);
|
||||
if (!spec) return;
|
||||
const { clientX, clientY } = location.initial.input;
|
||||
spec.startDragFromHandle(orientation, clientX, clientY);
|
||||
},
|
||||
onDrag: ({ location }) => {
|
||||
const spec = getTableHandlePluginSpec(editor);
|
||||
if (!spec) return;
|
||||
const { clientX, clientY } = location.current.input;
|
||||
spec.updateDragPosition(clientX, clientY);
|
||||
},
|
||||
onDrop: ({ location }) => {
|
||||
const spec = getTableHandlePluginSpec(editor);
|
||||
if (!spec) return;
|
||||
const { clientX, clientY } = location.current.input;
|
||||
// Make sure the final position is recorded before committing the drop.
|
||||
spec.updateDragPosition(clientX, clientY);
|
||||
spec.commitDrop();
|
||||
spec.endDrag();
|
||||
},
|
||||
}),
|
||||
// Wrapper owns horizontal auto-scroll (it has `overflow-x: auto`);
|
||||
// window owns vertical. Locking each axis prevents the window's
|
||||
// horizontal auto-scroll from running when the cursor approaches
|
||||
// the viewport edge — without the cap, the preview's `left` follows
|
||||
// the cursor past the viewport, the page widens to contain it, the
|
||||
// plugin scrolls the now-wider page further, and the loop never
|
||||
// ends.
|
||||
// Only the column handle registers wrapper auto-scroll (rows can't
|
||||
// scroll horizontally) — registering twice on the same wrapper
|
||||
// triggers a dev-mode warning from pragmatic-dnd-auto-scroll.
|
||||
orientation === "col" &&
|
||||
wrapper &&
|
||||
!wrapper.classList.contains("tableWrapperNoOverflow")
|
||||
? autoScrollForElements({
|
||||
element: wrapper,
|
||||
getAllowedAxis: () => "horizontal",
|
||||
})
|
||||
: () => {},
|
||||
autoScrollWindowForElements({ getAllowedAxis: () => "vertical" }),
|
||||
);
|
||||
}, [editor, orientation, element, wrapper, onDragStart]);
|
||||
}
|
||||
-23
@@ -1,23 +0,0 @@
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { useEditorState } from "@tiptap/react";
|
||||
import { TableDndKey, TableHandleState } from "@docmost/editor-ext";
|
||||
|
||||
const FALLBACK: TableHandleState = {
|
||||
hoveringCell: null,
|
||||
tableNode: null,
|
||||
tablePos: null,
|
||||
dragging: null,
|
||||
frozen: false,
|
||||
};
|
||||
|
||||
export function useTableHandleState(editor: Editor | null): TableHandleState {
|
||||
const state = useEditorState({
|
||||
editor,
|
||||
selector: (ctx) => {
|
||||
if (!ctx.editor) return null;
|
||||
return TableDndKey.getState(ctx.editor.state) ?? null;
|
||||
},
|
||||
});
|
||||
|
||||
return state ?? FALLBACK;
|
||||
}
|
||||
-50
@@ -1,50 +0,0 @@
|
||||
import { useCallback, useMemo } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { TableMap } from "@tiptap/pm/tables";
|
||||
import { moveColumn, moveRow } from "@docmost/editor-ext";
|
||||
|
||||
export type MoveDirection = "left" | "right" | "up" | "down";
|
||||
|
||||
export function useTableMoveRowColumn(
|
||||
editor: Editor,
|
||||
orientation: "col" | "row",
|
||||
index: number,
|
||||
direction: MoveDirection,
|
||||
tableNode: ProseMirrorNode,
|
||||
tablePos: number,
|
||||
) {
|
||||
const target =
|
||||
direction === "left" || direction === "up" ? index - 1 : index + 1;
|
||||
|
||||
const maxIndex = useMemo(() => {
|
||||
const map = TableMap.get(tableNode);
|
||||
return orientation === "col" ? map.width - 1 : map.height - 1;
|
||||
}, [tableNode, orientation]);
|
||||
|
||||
const canMove = target >= 0 && target <= maxIndex;
|
||||
|
||||
const handleMove = useCallback(() => {
|
||||
if (!canMove) return;
|
||||
const tr = editor.state.tr;
|
||||
const moved =
|
||||
orientation === "col"
|
||||
? moveColumn({
|
||||
tr,
|
||||
originIndex: index,
|
||||
targetIndex: target,
|
||||
select: true,
|
||||
pos: tablePos + 1,
|
||||
})
|
||||
: moveRow({
|
||||
tr,
|
||||
originIndex: index,
|
||||
targetIndex: target,
|
||||
select: true,
|
||||
pos: tablePos + 1,
|
||||
});
|
||||
if (moved) editor.view.dispatch(tr);
|
||||
}, [editor, orientation, index, target, tablePos, canMove]);
|
||||
|
||||
return { canMove, handleMove };
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
import { useCallback, useMemo } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import {
|
||||
convertArrayOfRowsToTableNode,
|
||||
convertTableNodeToArrayOfRows,
|
||||
transpose,
|
||||
} from "@docmost/editor-ext";
|
||||
import {
|
||||
getCellSortText,
|
||||
isCellEmpty,
|
||||
isHeaderCell,
|
||||
type SortDirection,
|
||||
type SortableItem,
|
||||
sortItems,
|
||||
weaveItems,
|
||||
} from "../lib/sort-cells";
|
||||
|
||||
interface Args {
|
||||
editor: Editor;
|
||||
orientation: "col" | "row";
|
||||
index: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
direction: SortDirection;
|
||||
}
|
||||
|
||||
function tableHasMergedCells(tableNode: ProseMirrorNode): boolean {
|
||||
for (let r = 0; r < tableNode.childCount; r++) {
|
||||
const row = tableNode.child(r);
|
||||
for (let c = 0; c < row.childCount; c++) {
|
||||
const { colspan = 1, rowspan = 1 } = row.child(c).attrs;
|
||||
if (colspan > 1 || rowspan > 1) return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function isAllHeader(cells: (ProseMirrorNode | null)[]): boolean {
|
||||
return cells.every((c) => c !== null && isHeaderCell(c));
|
||||
}
|
||||
|
||||
export function useTableSort({
|
||||
editor,
|
||||
orientation,
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
direction,
|
||||
}: Args) {
|
||||
const canSort = useMemo(() => {
|
||||
if (tableHasMergedCells(tableNode)) return false;
|
||||
|
||||
const rows = convertTableNodeToArrayOfRows(tableNode);
|
||||
const axes = orientation === "col" ? rows : transpose(rows);
|
||||
if (axes.length < 2) return false;
|
||||
|
||||
return axes.some((cells) => {
|
||||
if (isAllHeader(cells)) return false;
|
||||
const sortCell = cells[index];
|
||||
return !!sortCell && !isCellEmpty(sortCell);
|
||||
});
|
||||
}, [tableNode, orientation, index]);
|
||||
|
||||
const handleSort = useCallback(() => {
|
||||
if (!canSort) return;
|
||||
|
||||
const rows = convertTableNodeToArrayOfRows(tableNode);
|
||||
const axes = orientation === "col" ? rows : transpose(rows);
|
||||
|
||||
const items: SortableItem<(ProseMirrorNode | null)[]>[] = axes.map(
|
||||
(cells, originalOrder) => {
|
||||
const sortCell = cells[index];
|
||||
return {
|
||||
payload: cells,
|
||||
text: sortCell ? getCellSortText(sortCell) : "",
|
||||
isHeader: isAllHeader(cells),
|
||||
isEmpty: !sortCell || isCellEmpty(sortCell),
|
||||
originalOrder,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
const dataItems = items.filter((it) => !it.isHeader);
|
||||
const sortedData = sortItems(dataItems, direction);
|
||||
const woven = weaveItems(items, sortedData);
|
||||
|
||||
const newAxes = woven.map((it) => it.payload);
|
||||
const newRows = orientation === "col" ? newAxes : transpose(newAxes);
|
||||
|
||||
const newTable = convertArrayOfRowsToTableNode(tableNode, newRows);
|
||||
|
||||
const tr = editor.state.tr;
|
||||
tr.replaceWith(tablePos, tablePos + tableNode.nodeSize, newTable);
|
||||
|
||||
if (tr.docChanged) editor.view.dispatch(tr);
|
||||
}, [editor, tableNode, tablePos, orientation, index, direction, canSort]);
|
||||
|
||||
return { canSort, handleSort };
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import type { EditorState } from "@tiptap/pm/state";
|
||||
import { CellSelection, TableMap } from "@tiptap/pm/tables";
|
||||
|
||||
export type Orientation = "col" | "row";
|
||||
|
||||
export function buildRowOrColumnSelection(
|
||||
state: EditorState,
|
||||
tableNode: ProseMirrorNode,
|
||||
tablePos: number,
|
||||
orientation: Orientation,
|
||||
index: number,
|
||||
): CellSelection | null {
|
||||
const map = TableMap.get(tableNode);
|
||||
const tableStart = tablePos + 1;
|
||||
|
||||
if (orientation === "col") {
|
||||
if (index < 0 || index >= map.width) return null;
|
||||
const firstCellPos = tableStart + map.map[index];
|
||||
const lastCellPos =
|
||||
tableStart + map.map[(map.height - 1) * map.width + index];
|
||||
const $first = state.doc.resolve(firstCellPos);
|
||||
const $last = state.doc.resolve(lastCellPos);
|
||||
return CellSelection.colSelection($first, $last);
|
||||
}
|
||||
|
||||
if (index < 0 || index >= map.height) return null;
|
||||
const firstCellPos = tableStart + map.map[index * map.width];
|
||||
const lastCellPos =
|
||||
tableStart + map.map[index * map.width + (map.width - 1)];
|
||||
const $first = state.doc.resolve(firstCellPos);
|
||||
const $last = state.doc.resolve(lastCellPos);
|
||||
return CellSelection.rowSelection($first, $last);
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
|
||||
export type SortDirection = "asc" | "desc";
|
||||
|
||||
export interface SortableItem<T> {
|
||||
payload: T;
|
||||
text: string;
|
||||
isHeader: boolean;
|
||||
isEmpty: boolean;
|
||||
originalOrder: number;
|
||||
}
|
||||
|
||||
const HEADER_TYPE_NAMES = new Set(["tableHeader", "table_header"]);
|
||||
|
||||
export function isHeaderCell(node: ProseMirrorNode): boolean {
|
||||
if (HEADER_TYPE_NAMES.has(node.type.name)) return true;
|
||||
return node.attrs?.header === true;
|
||||
}
|
||||
|
||||
export function getCellSortText(node: ProseMirrorNode): string {
|
||||
let text = "";
|
||||
node.descendants((child) => {
|
||||
if (child.isText) text += child.text ?? "";
|
||||
return true;
|
||||
});
|
||||
return text.trim().toLowerCase();
|
||||
}
|
||||
|
||||
export function isCellEmpty(node: ProseMirrorNode): boolean {
|
||||
return getCellSortText(node) === "";
|
||||
}
|
||||
|
||||
export const collator = new Intl.Collator(undefined, {
|
||||
sensitivity: "base",
|
||||
numeric: true,
|
||||
});
|
||||
|
||||
export function sortItems<T>(
|
||||
data: SortableItem<T>[],
|
||||
direction: SortDirection,
|
||||
): SortableItem<T>[] {
|
||||
return [...data].sort((a, b) => {
|
||||
if (a.isEmpty && !b.isEmpty) return 1;
|
||||
if (!a.isEmpty && b.isEmpty) return -1;
|
||||
if (a.isEmpty && b.isEmpty) return a.originalOrder - b.originalOrder;
|
||||
const cmp = collator.compare(a.text, b.text);
|
||||
return direction === "asc" ? cmp : -cmp;
|
||||
});
|
||||
}
|
||||
|
||||
export function weaveItems<T>(
|
||||
all: SortableItem<T>[],
|
||||
sortedData: SortableItem<T>[],
|
||||
): SortableItem<T>[] {
|
||||
const dataQueue = [...sortedData];
|
||||
return all.map((item) => (item.isHeader ? item : dataQueue.shift()!));
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
import React from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { Menu } from "@mantine/core";
|
||||
import {
|
||||
IconAlignCenter,
|
||||
IconAlignLeft,
|
||||
IconAlignRight,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface AlignmentSubmenuProps {
|
||||
editor: Editor;
|
||||
}
|
||||
|
||||
export const AlignmentSubmenu = React.memo(function AlignmentSubmenu({
|
||||
editor,
|
||||
}: AlignmentSubmenuProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Menu.Sub position="right-start">
|
||||
<Menu.Sub.Target>
|
||||
<Menu.Sub.Item leftSection={<IconAlignLeft size={16} />}>
|
||||
{t("Text alignment")}
|
||||
</Menu.Sub.Item>
|
||||
</Menu.Sub.Target>
|
||||
<Menu.Sub.Dropdown>
|
||||
<Menu.Item
|
||||
leftSection={<IconAlignLeft size={16} />}
|
||||
onClick={() => editor.chain().focus().setTextAlign("left").run()}
|
||||
>
|
||||
{t("Align left")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconAlignCenter size={16} />}
|
||||
onClick={() => editor.chain().focus().setTextAlign("center").run()}
|
||||
>
|
||||
{t("Align center")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconAlignRight size={16} />}
|
||||
onClick={() => editor.chain().focus().setTextAlign("right").run()}
|
||||
>
|
||||
{t("Align right")}
|
||||
</Menu.Item>
|
||||
</Menu.Sub.Dropdown>
|
||||
</Menu.Sub>
|
||||
);
|
||||
});
|
||||
@@ -1,154 +0,0 @@
|
||||
import React from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { ColorSwatch, Menu } from "@mantine/core";
|
||||
import {
|
||||
IconBoxMargin,
|
||||
IconColumnInsertRight,
|
||||
IconColumnRemove,
|
||||
IconEraser,
|
||||
IconPalette,
|
||||
IconRowInsertBottom,
|
||||
IconRowRemove,
|
||||
IconSquareToggle,
|
||||
IconTableRow,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTableClear } from "../hooks/use-table-clear";
|
||||
import { TABLE_COLORS } from "../../table-background-color";
|
||||
import { AlignmentSubmenu } from "./alignment-submenu";
|
||||
|
||||
interface CellChevronMenuProps {
|
||||
editor: Editor;
|
||||
cellPos: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
}
|
||||
|
||||
export const CellChevronMenu = React.memo(function CellChevronMenu({
|
||||
editor,
|
||||
cellPos,
|
||||
tableNode,
|
||||
tablePos,
|
||||
}: CellChevronMenuProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const clearCell = useTableClear(editor, tableNode, tablePos, {
|
||||
kind: "cell",
|
||||
cellPos,
|
||||
});
|
||||
|
||||
const setBackground = (color: string, name: string) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.updateAttributes("tableCell", {
|
||||
backgroundColor: color || null,
|
||||
backgroundColorName: color ? name : null,
|
||||
})
|
||||
.updateAttributes("tableHeader", {
|
||||
backgroundColor: color || null,
|
||||
backgroundColorName: color ? name : null,
|
||||
})
|
||||
.run();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu.Sub position="right-start">
|
||||
<Menu.Sub.Target>
|
||||
<Menu.Sub.Item leftSection={<IconPalette size={16} />}>
|
||||
{t("Background color")}
|
||||
</Menu.Sub.Item>
|
||||
</Menu.Sub.Target>
|
||||
<Menu.Sub.Dropdown>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(4, 1fr)",
|
||||
gap: 8,
|
||||
padding: 8,
|
||||
}}
|
||||
>
|
||||
{TABLE_COLORS.map((c) => (
|
||||
<button
|
||||
key={c.name}
|
||||
type="button"
|
||||
onClick={() => setBackground(c.color, c.name)}
|
||||
aria-label={t(c.name)}
|
||||
style={{
|
||||
border: "none",
|
||||
background: "transparent",
|
||||
padding: 0,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<ColorSwatch
|
||||
color={c.color || "#ffffff"}
|
||||
size={22}
|
||||
style={{
|
||||
border: c.color === "" ? "1px solid #e5e7eb" : undefined,
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Menu.Sub.Dropdown>
|
||||
</Menu.Sub>
|
||||
|
||||
<AlignmentSubmenu editor={editor} />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconBoxMargin size={16} />}
|
||||
onClick={() => editor.chain().focus().mergeCells().run()}
|
||||
disabled={!editor.can().mergeCells()}
|
||||
>
|
||||
{t("Merge cells")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconSquareToggle size={16} />}
|
||||
onClick={() => editor.chain().focus().splitCell().run()}
|
||||
disabled={!editor.can().splitCell()}
|
||||
>
|
||||
{t("Split cell")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconTableRow size={16} />}
|
||||
onClick={() => editor.chain().focus().toggleHeaderCell().run()}
|
||||
>
|
||||
{t("Toggle header cell")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconColumnInsertRight size={16} />}
|
||||
onClick={() => editor.chain().focus().addColumnAfter().run()}
|
||||
>
|
||||
{t("Add column right")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconRowInsertBottom size={16} />}
|
||||
onClick={() => editor.chain().focus().addRowAfter().run()}
|
||||
>
|
||||
{t("Add row below")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item leftSection={<IconEraser size={16} />} onClick={clearCell}>
|
||||
{t("Clear cell")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconColumnRemove size={16} />}
|
||||
onClick={() => editor.chain().focus().deleteColumn().run()}
|
||||
>
|
||||
{t("Delete column")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconRowRemove size={16} />}
|
||||
onClick={() => editor.chain().focus().deleteRow().run()}
|
||||
>
|
||||
{t("Delete row")}
|
||||
</Menu.Item>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -1,177 +0,0 @@
|
||||
import React from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { ColorSwatch, Menu } from "@mantine/core";
|
||||
import { TABLE_COLORS } from "../../table-background-color";
|
||||
import {
|
||||
IconArrowLeft,
|
||||
IconArrowRight,
|
||||
IconColumnInsertLeft,
|
||||
IconColumnInsertRight,
|
||||
IconColumnRemove,
|
||||
IconEraser,
|
||||
IconPalette,
|
||||
IconSortAscendingLetters,
|
||||
IconSortDescendingLetters,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTableMoveRowColumn } from "../hooks/use-table-move-row-column";
|
||||
import { useTableClear } from "../hooks/use-table-clear";
|
||||
import { useTableSort } from "../hooks/use-table-sort";
|
||||
import { AlignmentSubmenu } from "./alignment-submenu";
|
||||
|
||||
interface ColumnHandleMenuProps {
|
||||
editor: Editor;
|
||||
index: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
}
|
||||
|
||||
export const ColumnHandleMenu = React.memo(function ColumnHandleMenu({
|
||||
editor,
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
}: ColumnHandleMenuProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const moveLeft = useTableMoveRowColumn(editor, "col", index, "left", tableNode, tablePos);
|
||||
const moveRight = useTableMoveRowColumn(editor, "col", index, "right", tableNode, tablePos);
|
||||
const clearCol = useTableClear(editor, tableNode, tablePos, {
|
||||
kind: "col",
|
||||
index,
|
||||
});
|
||||
|
||||
const setBackground = (color: string, name: string) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.updateAttributes("tableCell", {
|
||||
backgroundColor: color || null,
|
||||
backgroundColorName: color ? name : null,
|
||||
})
|
||||
.updateAttributes("tableHeader", {
|
||||
backgroundColor: color || null,
|
||||
backgroundColorName: color ? name : null,
|
||||
})
|
||||
.run();
|
||||
};
|
||||
|
||||
const sortAsc = useTableSort({
|
||||
editor,
|
||||
orientation: "col",
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
direction: "asc",
|
||||
});
|
||||
const sortDesc = useTableSort({
|
||||
editor,
|
||||
orientation: "col",
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
direction: "desc",
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu.Item
|
||||
leftSection={<IconSortAscendingLetters size={16} />}
|
||||
onClick={sortAsc.handleSort}
|
||||
disabled={!sortAsc.canSort}
|
||||
>
|
||||
{t("Sort A → Z")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconSortDescendingLetters size={16} />}
|
||||
onClick={sortDesc.handleSort}
|
||||
disabled={!sortDesc.canSort}
|
||||
>
|
||||
{t("Sort Z → A")}
|
||||
</Menu.Item>
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Sub position="right-start">
|
||||
<Menu.Sub.Target>
|
||||
<Menu.Sub.Item leftSection={<IconPalette size={16} />}>
|
||||
{t("Background color")}
|
||||
</Menu.Sub.Item>
|
||||
</Menu.Sub.Target>
|
||||
<Menu.Sub.Dropdown>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, padding: 8 }}>
|
||||
{TABLE_COLORS.map((c) => (
|
||||
<button
|
||||
key={c.name}
|
||||
type="button"
|
||||
onClick={() => setBackground(c.color, c.name)}
|
||||
aria-label={t(c.name)}
|
||||
style={{
|
||||
border: "none",
|
||||
background: "transparent",
|
||||
padding: 0,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<ColorSwatch
|
||||
color={c.color || "#ffffff"}
|
||||
size={22}
|
||||
style={{ border: c.color === "" ? "1px solid #e5e7eb" : undefined }}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Menu.Sub.Dropdown>
|
||||
</Menu.Sub>
|
||||
|
||||
<AlignmentSubmenu editor={editor} />
|
||||
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconColumnInsertLeft size={16} />}
|
||||
onClick={() => editor.chain().focus().addColumnBefore().run()}
|
||||
>
|
||||
{t("Add column left")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconColumnInsertRight size={16} />}
|
||||
onClick={() => editor.chain().focus().addColumnAfter().run()}
|
||||
>
|
||||
{t("Add column right")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconEraser size={16} />}
|
||||
onClick={clearCol}
|
||||
>
|
||||
{t("Clear cells")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconColumnRemove size={16} />}
|
||||
onClick={() => editor.chain().focus().deleteColumn().run()}
|
||||
>
|
||||
{t("Delete column")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconArrowLeft size={16} />}
|
||||
onClick={moveLeft.handleMove}
|
||||
disabled={!moveLeft.canMove}
|
||||
>
|
||||
{t("Move column left")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconArrowRight size={16} />}
|
||||
onClick={moveRight.handleMove}
|
||||
disabled={!moveRight.canMove}
|
||||
>
|
||||
{t("Move column right")}
|
||||
</Menu.Item>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -1,138 +0,0 @@
|
||||
import React from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { ColorSwatch, Menu } from "@mantine/core";
|
||||
import { TABLE_COLORS } from "../../table-background-color";
|
||||
import {
|
||||
IconArrowDown,
|
||||
IconArrowUp,
|
||||
IconEraser,
|
||||
IconPalette,
|
||||
IconRowInsertBottom,
|
||||
IconRowInsertTop,
|
||||
IconRowRemove,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTableMoveRowColumn } from "../hooks/use-table-move-row-column";
|
||||
import { useTableClear } from "../hooks/use-table-clear";
|
||||
import { AlignmentSubmenu } from "./alignment-submenu";
|
||||
|
||||
interface RowHandleMenuProps {
|
||||
editor: Editor;
|
||||
index: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
}
|
||||
|
||||
export const RowHandleMenu = React.memo(function RowHandleMenu({
|
||||
editor,
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
}: RowHandleMenuProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const setBackground = (color: string, name: string) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.updateAttributes("tableCell", {
|
||||
backgroundColor: color || null,
|
||||
backgroundColorName: color ? name : null,
|
||||
})
|
||||
.updateAttributes("tableHeader", {
|
||||
backgroundColor: color || null,
|
||||
backgroundColorName: color ? name : null,
|
||||
})
|
||||
.run();
|
||||
};
|
||||
|
||||
const moveUp = useTableMoveRowColumn(editor, "row", index, "up", tableNode, tablePos);
|
||||
const moveDown = useTableMoveRowColumn(editor, "row", index, "down", tableNode, tablePos);
|
||||
const clearRow = useTableClear(editor, tableNode, tablePos, {
|
||||
kind: "row",
|
||||
index,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu.Sub position="right-start">
|
||||
<Menu.Sub.Target>
|
||||
<Menu.Sub.Item leftSection={<IconPalette size={16} />}>
|
||||
{t("Background color")}
|
||||
</Menu.Sub.Item>
|
||||
</Menu.Sub.Target>
|
||||
<Menu.Sub.Dropdown>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, padding: 8 }}>
|
||||
{TABLE_COLORS.map((c) => (
|
||||
<button
|
||||
key={c.name}
|
||||
type="button"
|
||||
onClick={() => setBackground(c.color, c.name)}
|
||||
aria-label={t(c.name)}
|
||||
style={{
|
||||
border: "none",
|
||||
background: "transparent",
|
||||
padding: 0,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<ColorSwatch
|
||||
color={c.color || "#ffffff"}
|
||||
size={22}
|
||||
style={{ border: c.color === "" ? "1px solid #e5e7eb" : undefined }}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Menu.Sub.Dropdown>
|
||||
</Menu.Sub>
|
||||
|
||||
<AlignmentSubmenu editor={editor} />
|
||||
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconRowInsertTop size={16} />}
|
||||
onClick={() => editor.chain().focus().addRowBefore().run()}
|
||||
>
|
||||
{t("Add row above")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconRowInsertBottom size={16} />}
|
||||
onClick={() => editor.chain().focus().addRowAfter().run()}
|
||||
>
|
||||
{t("Add row below")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Item leftSection={<IconEraser size={16} />} onClick={clearRow}>
|
||||
{t("Clear cells")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconRowRemove size={16} />}
|
||||
onClick={() => editor.chain().focus().deleteRow().run()}
|
||||
>
|
||||
{t("Delete row")}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Divider />
|
||||
|
||||
<Menu.Item
|
||||
leftSection={<IconArrowUp size={16} />}
|
||||
onClick={moveUp.handleMove}
|
||||
disabled={!moveUp.canMove}
|
||||
>
|
||||
{t("Move row up")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconArrowDown size={16} />}
|
||||
onClick={moveDown.handleMove}
|
||||
disabled={!moveDown.canMove}
|
||||
>
|
||||
{t("Move row down")}
|
||||
</Menu.Item>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -1,127 +0,0 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
||||
import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
|
||||
import { Menu } from "@mantine/core";
|
||||
import clsx from "clsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTableHandleDrag } from "./hooks/use-table-handle-drag";
|
||||
import { useColumnRowMenuLifecycle } from "./hooks/use-column-row-menu-lifecycle";
|
||||
import { RowHandleMenu } from "./menus/row-handle-menu";
|
||||
import classes from "./handle.module.css";
|
||||
|
||||
interface RowHandleProps {
|
||||
editor: Editor;
|
||||
index: number;
|
||||
anchorPos: number;
|
||||
tableNode: ProseMirrorNode;
|
||||
tablePos: number;
|
||||
}
|
||||
|
||||
export const RowHandle = React.memo(function RowHandle({
|
||||
editor,
|
||||
index,
|
||||
anchorPos,
|
||||
tableNode,
|
||||
tablePos,
|
||||
}: RowHandleProps) {
|
||||
const { t } = useTranslation();
|
||||
// See ColumnHandle for the rationale: keep the last valid cell DOM cached
|
||||
// so the handle div stays mounted across stale-anchor renders, otherwise
|
||||
// pragmatic-dnd silently aborts an in-flight drag.
|
||||
// `nodeDOM` is typed as `Node | null` — when `anchorPos` goes stale (e.g.
|
||||
// an external drop reflows the doc before the plugin re-emits
|
||||
// hoveringCell), it can resolve to a Text node, on which `.closest` is
|
||||
// undefined. Filter to HTMLElement so downstream consumers stay safe.
|
||||
const lookupDom = editor.view.nodeDOM(anchorPos);
|
||||
const lookupCellDom = lookupDom instanceof HTMLElement ? lookupDom : null;
|
||||
const [cellDom, setCellDom] = useState<HTMLElement | null>(lookupCellDom);
|
||||
const lastCellDomRef = useRef<HTMLElement | null>(lookupCellDom);
|
||||
useEffect(() => {
|
||||
if (lookupCellDom && lookupCellDom !== lastCellDomRef.current) {
|
||||
lastCellDomRef.current = lookupCellDom;
|
||||
setCellDom(lookupCellDom);
|
||||
}
|
||||
}, [lookupCellDom]);
|
||||
|
||||
const [handleEl, setHandleEl] = useState<HTMLDivElement | null>(null);
|
||||
|
||||
const { refs, floatingStyles, middlewareData } = useFloating({
|
||||
placement: "left",
|
||||
middleware: [offset(-4), hide()],
|
||||
whileElementsMounted: autoUpdate,
|
||||
});
|
||||
const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
|
||||
|
||||
useEffect(() => {
|
||||
refs.setReference(cellDom);
|
||||
}, [cellDom, refs]);
|
||||
|
||||
const wrapper = cellDom?.closest<HTMLElement>(".tableWrapper") ?? null;
|
||||
|
||||
const [menuOpened, setMenuOpened] = useState(false);
|
||||
const closeMenu = useCallback(() => setMenuOpened(false), []);
|
||||
useTableHandleDrag(editor, "row", handleEl, wrapper, closeMenu);
|
||||
|
||||
const { onOpen, onClose } = useColumnRowMenuLifecycle({
|
||||
editor,
|
||||
orientation: "row",
|
||||
index,
|
||||
tableNode,
|
||||
tablePos,
|
||||
});
|
||||
|
||||
if (!cellDom) return null;
|
||||
|
||||
return (
|
||||
<Menu
|
||||
opened={menuOpened}
|
||||
onChange={setMenuOpened}
|
||||
position="right-start"
|
||||
onOpen={onOpen}
|
||||
onClose={onClose}
|
||||
withinPortal
|
||||
shadow="md"
|
||||
>
|
||||
<Menu.Target>
|
||||
<div
|
||||
ref={(node) => {
|
||||
refs.setFloating(node);
|
||||
setHandleEl(node);
|
||||
}}
|
||||
style={{
|
||||
...floatingStyles,
|
||||
...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
|
||||
}}
|
||||
className={clsx(classes.handle, classes.rowHandle)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={t("Row actions")}
|
||||
>
|
||||
<span style={{ pointerEvents: "none", display: "inline-flex" }}>
|
||||
<GripIcon />
|
||||
</span>
|
||||
</div>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<RowHandleMenu
|
||||
editor={editor}
|
||||
index={index}
|
||||
tableNode={tableNode}
|
||||
tablePos={tablePos}
|
||||
/>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
});
|
||||
|
||||
function GripIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 10 10" width="14" height="14" aria-hidden>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M3,2 A1,1 0 1 1 3,0 A1,1 0 0 1 3,2 Z M3,6 A1,1 0 1 1 3,4 A1,1 0 0 1 3,6 Z M3,10 A1,1 0 1 1 3,8 A1,1 0 0 1 3,10 Z M7,2 A1,1 0 1 1 7,0 A1,1 0 0 1 7,2 Z M7,6 A1,1 0 1 1 7,4 A1,1 0 0 1 7,6 Z M7,10 A1,1 0 1 1 7,8 A1,1 0 0 1 7,10 Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import React from "react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import { useTableHandleState } from "./hooks/use-table-handle-state";
|
||||
import { ColumnHandle } from "./column-handle";
|
||||
import { RowHandle } from "./row-handle";
|
||||
import { CellChevron } from "./cell-chevron";
|
||||
|
||||
interface TableHandlesLayerProps {
|
||||
editor: Editor | null;
|
||||
}
|
||||
|
||||
export const TableHandlesLayer = React.memo(function TableHandlesLayer({
|
||||
editor,
|
||||
}: TableHandlesLayerProps) {
|
||||
const state = useTableHandleState(editor);
|
||||
|
||||
if (!editor || !editor.isEditable) return null;
|
||||
if (!state.hoveringCell || !state.tableNode || state.tablePos == null) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ColumnHandle
|
||||
editor={editor}
|
||||
index={state.hoveringCell.colIndex}
|
||||
anchorPos={state.hoveringCell.colFirstCellPos}
|
||||
tableNode={state.tableNode!}
|
||||
tablePos={state.tablePos!}
|
||||
/>
|
||||
<RowHandle
|
||||
editor={editor}
|
||||
index={state.hoveringCell.rowIndex}
|
||||
anchorPos={state.hoveringCell.rowFirstCellPos}
|
||||
tableNode={state.tableNode!}
|
||||
tablePos={state.tablePos!}
|
||||
/>
|
||||
<CellChevron
|
||||
editor={editor}
|
||||
cellPos={state.hoveringCell.cellPos}
|
||||
tableNode={state.tableNode!}
|
||||
tablePos={state.tablePos!}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -22,7 +22,7 @@ interface TableBackgroundColorProps {
|
||||
editor: Editor | null;
|
||||
}
|
||||
|
||||
export const TABLE_COLORS: TableColorItem[] = [
|
||||
const TABLE_COLORS: TableColorItem[] = [
|
||||
{ name: "Default", color: "" },
|
||||
{ name: "Blue", color: "#b4d5ff" },
|
||||
{ name: "Green", color: "#acf5d2" },
|
||||
|
||||
@@ -18,7 +18,7 @@ import {
|
||||
IconTrashX,
|
||||
} from "@tabler/icons-react";
|
||||
import { BubbleMenu } from "@tiptap/react/menus";
|
||||
import { isCellSelection, isEditorReady, isTextSelected } from "@docmost/editor-ext";
|
||||
import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import classes from "../common/toolbar-menu.module.css";
|
||||
|
||||
@@ -38,7 +38,6 @@ export const TableMenu = React.memo(
|
||||
);
|
||||
|
||||
const getReferencedVirtualElement = useCallback(() => {
|
||||
if (!isEditorReady(editor)) return;
|
||||
const { selection } = editor.state;
|
||||
const predicate = (node: PMNode) => node.type.name === "table";
|
||||
const parent = findParentNode(predicate)(selection);
|
||||
@@ -105,12 +104,12 @@ export const TableMenu = React.memo(
|
||||
element.style.zIndex = "99";
|
||||
}}
|
||||
options={{
|
||||
placement: "bottom",
|
||||
placement: "top",
|
||||
offset: {
|
||||
mainAxis: 15,
|
||||
},
|
||||
flip: {
|
||||
fallbackPlacements: ["bottom", "top"],
|
||||
fallbackPlacements: ["top", "bottom"],
|
||||
padding: { top: 35 + 15, left: 8, right: 8, bottom: -Infinity },
|
||||
boundary: editor.options.element as HTMLElement,
|
||||
},
|
||||
|
||||
@@ -86,11 +86,11 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
|
||||
transitionProps={{ transition: "pop" }}
|
||||
>
|
||||
<Popover.Target>
|
||||
<Tooltip label={t("Text align")} withArrow>
|
||||
<Tooltip label={t("Text alignment")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
size="lg"
|
||||
aria-label={t("Text align")}
|
||||
aria-label={t("Text alignment")}
|
||||
onClick={() => setOpened(!opened)}
|
||||
>
|
||||
<activeItem.icon size={18} />
|
||||
|
||||
-1
@@ -35,7 +35,6 @@ export default function TransclusionReferenceView(props: NodeViewProps) {
|
||||
return (
|
||||
<NodeViewWrapper
|
||||
className={classes.includeWrap}
|
||||
data-editable={isEditable ? "true" : "false"}
|
||||
data-focused={isEditable && props.selected ? "true" : "false"}
|
||||
data-menu-open={openMenus > 0 ? "true" : "false"}
|
||||
contentEditable={false}
|
||||
|
||||
@@ -62,7 +62,6 @@ export default function TransclusionView(props: NodeViewProps) {
|
||||
return (
|
||||
<NodeViewWrapper
|
||||
className={classes.transclusionWrap}
|
||||
data-editable={isEditable ? "true" : "false"}
|
||||
data-menu-open={openMenus > 0 ? "true" : "false"}
|
||||
data-id={transclusionId ?? undefined}
|
||||
>
|
||||
|
||||
@@ -44,29 +44,8 @@
|
||||
transition: border 0.3s;
|
||||
}
|
||||
|
||||
.transclusionWrap[data-editable="false"],
|
||||
.includeWrap[data-editable="false"] {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Cancel the wrapping .react-renderer's vertical spacing in read-only mode
|
||||
so the synced block sits flush with surrounding paragraphs (whose own
|
||||
margins already provide the right rhythm). */
|
||||
:global(.react-renderer.node-transclusionSource):has(
|
||||
.transclusionWrap[data-editable="false"]
|
||||
),
|
||||
:global(.react-renderer.node-transclusionReference):has(
|
||||
.includeWrap[data-editable="false"]
|
||||
) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.transclusionWrap[data-editable="true"]:hover,
|
||||
.transclusionWrap[data-editable="true"]:focus-within {
|
||||
.transclusionWrap:hover,
|
||||
.transclusionWrap:focus-within {
|
||||
border: 2px solid
|
||||
light-dark(
|
||||
var(--mantine-color-orange-2),
|
||||
@@ -135,9 +114,9 @@
|
||||
transition: border 0.3s;
|
||||
}
|
||||
|
||||
.includeWrap[data-editable="true"]:hover,
|
||||
.includeWrap[data-editable="true"][data-focused="true"],
|
||||
.includeWrap[data-editable="true"][data-menu-open="true"] {
|
||||
.includeWrap:hover,
|
||||
.includeWrap[data-focused="true"],
|
||||
.includeWrap[data-menu-open="true"] {
|
||||
border: 2px solid
|
||||
light-dark(
|
||||
var(--mantine-color-orange-2),
|
||||
|
||||
@@ -2,7 +2,6 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
|
||||
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
|
||||
import { useCallback } from "react";
|
||||
import { Node as PMNode } from "@tiptap/pm/model";
|
||||
import { isEditorReady } from "@docmost/editor-ext";
|
||||
import {
|
||||
EditorMenuProps,
|
||||
ShouldShowProps,
|
||||
@@ -54,7 +53,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
|
||||
);
|
||||
|
||||
const getReferencedVirtualElement = useCallback(() => {
|
||||
if (!isEditorReady(editor)) return;
|
||||
if (!editor) return;
|
||||
const { selection } = editor.state;
|
||||
const predicate = (node: PMNode) => node.type.name === "video";
|
||||
const parent = findParentNode(predicate)(selection);
|
||||
|
||||
@@ -60,23 +60,6 @@ function nodeDOMAtCoords(
|
||||
options: GlobalDragHandleOptions,
|
||||
view: EditorView,
|
||||
) {
|
||||
// Custom nodes (transclusion, …) render via tiptap's React node-view
|
||||
// renderer, which emits `class="react-renderer node-${name}"` on the
|
||||
// live wrapper — the `data-type` attribute is for static HTML
|
||||
// serialization only. Match both so we cover live and parsed DOM.
|
||||
// Inside a custom node, also match plain `p` so the first paragraph
|
||||
// (which doesn't match `:not(:first-child)`) still gets its own
|
||||
// handle; only hovers on the custom node's padding/border fall
|
||||
// through to the wrapper.
|
||||
const customSelectors = options.customNodes.flatMap((node) => [
|
||||
`[data-type=${node}]`,
|
||||
`.node-${node}`,
|
||||
]);
|
||||
const customParagraphSelectors = options.customNodes.flatMap((node) => [
|
||||
`[data-type=${node}] p`,
|
||||
`.node-${node} p`,
|
||||
]);
|
||||
|
||||
const selectors = [
|
||||
"li",
|
||||
"p:not(:first-child)",
|
||||
@@ -88,13 +71,7 @@ function nodeDOMAtCoords(
|
||||
"h4",
|
||||
"h5",
|
||||
"h6",
|
||||
// Tables nested in another block (toggle, transclusion, …) have a
|
||||
// wrapper that isn't a direct child of .ProseMirror, so the
|
||||
// parent-check below skips it. Match the wrapper explicitly so the
|
||||
// handle shows up even with empty cells.
|
||||
".tableWrapper",
|
||||
...customParagraphSelectors,
|
||||
...customSelectors,
|
||||
...options.customNodes.map((node) => `[data-type=${node}]`),
|
||||
].join(", ");
|
||||
return document
|
||||
.elementsFromPoint(coords.x, coords.y)
|
||||
@@ -122,22 +99,6 @@ function nodePosAtDOM(
|
||||
})?.inside;
|
||||
}
|
||||
|
||||
function isCustomNodeDOM(
|
||||
elem: Element | null | undefined,
|
||||
options: GlobalDragHandleOptions,
|
||||
): boolean {
|
||||
if (!elem) return false;
|
||||
for (const name of options.customNodes) {
|
||||
if (
|
||||
elem.getAttribute("data-type") === name ||
|
||||
elem.classList.contains(`node-${name}`)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function calcNodePos(pos: number, view: EditorView) {
|
||||
const $pos = view.state.doc.resolve(pos);
|
||||
if ($pos.depth > 1) return $pos.before($pos.depth);
|
||||
@@ -176,6 +137,7 @@ export function DragHandlePlugin(
|
||||
|
||||
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(
|
||||
@@ -204,46 +166,14 @@ export function DragHandlePlugin(
|
||||
} else {
|
||||
selection = NodeSelection.create(view.state.doc, draggedNodePos);
|
||||
|
||||
const $sel = view.state.doc.resolve(selection.from);
|
||||
|
||||
if (isCustomNodeDOM(node, options)) {
|
||||
// The drag landed on a custom-node container (transclusion etc.).
|
||||
// Walk up to the matching node so the drag moves the whole
|
||||
// container, not whatever inner element the click landed on.
|
||||
const customTypes = new Set(options.customNodes);
|
||||
for (let d = $sel.depth; d > 0; d--) {
|
||||
if (customTypes.has($sel.node(d).type.name)) {
|
||||
selection = NodeSelection.create(
|
||||
view.state.doc,
|
||||
$sel.before(d),
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// If the selected node lives inside a table (at any nesting
|
||||
// depth), promote to the whole table — the global drag handle is
|
||||
// meant to move the table as a single block, not a row/cell. The
|
||||
// earlier tableRow-only check only worked when the table sat at
|
||||
// the doc root; once wrapped in another node (toggle, layout,
|
||||
// etc.) the selection lands on a cell/paragraph and that check
|
||||
// never fired.
|
||||
let tableDepth = -1;
|
||||
for (let d = $sel.depth; d > 0; d--) {
|
||||
if ($sel.node(d).type.name === "table") {
|
||||
tableDepth = d;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (tableDepth > 0) {
|
||||
selection = NodeSelection.create(
|
||||
view.state.doc,
|
||||
$sel.before(tableDepth),
|
||||
);
|
||||
} else if ((selection as NodeSelection).node.type.isInline) {
|
||||
// Inline node (e.g. mention): walk up to the parent block.
|
||||
selection = NodeSelection.create(view.state.doc, $sel.before());
|
||||
}
|
||||
// if inline node is selected, e.g mention -> go to the parent node to select the whole node
|
||||
// if table row is selected, go to the parent node to select the whole node
|
||||
if (
|
||||
(selection as NodeSelection).node.type.isInline ||
|
||||
(selection as NodeSelection).node.type.name === "tableRow"
|
||||
) {
|
||||
let $pos = view.state.doc.resolve(selection.from);
|
||||
selection = NodeSelection.create(view.state.doc, $pos.before());
|
||||
}
|
||||
}
|
||||
view.dispatch(view.state.tr.setSelection(selection));
|
||||
@@ -383,27 +313,6 @@ export function DragHandlePlugin(
|
||||
return;
|
||||
}
|
||||
|
||||
const isCustomNode = isCustomNodeDOM(node, options);
|
||||
|
||||
// Custom nodes pin the handle to the inner NodeViewWrapper's top-left:
|
||||
// the natural anchor sits in transient/empty space outside the visible block.
|
||||
if (isCustomNode) {
|
||||
// tiptap React node-views emit an outer `.react-renderer` whose first
|
||||
// child is the visible NodeViewWrapper; walk to that outer first since
|
||||
// `node` may be either the outer or an inner element with data-type.
|
||||
const rendererOuter =
|
||||
(node.closest(".react-renderer") as HTMLElement | null) ?? node;
|
||||
const inner =
|
||||
(rendererOuter.firstElementChild as HTMLElement | null) ??
|
||||
rendererOuter;
|
||||
const innerRect = absoluteRect(inner);
|
||||
if (!dragHandleElement) return;
|
||||
dragHandleElement.style.left = `${innerRect.left + 4}px`;
|
||||
dragHandleElement.style.top = `${innerRect.top + 4}px`;
|
||||
showDragHandle();
|
||||
return;
|
||||
}
|
||||
|
||||
const compStyle = window.getComputedStyle(node);
|
||||
const parsedLineHeight = parseInt(compStyle.lineHeight, 10);
|
||||
const lineHeight = isNaN(parsedLineHeight)
|
||||
@@ -419,13 +328,6 @@ export function DragHandlePlugin(
|
||||
if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
|
||||
rect.left -= options.dragHandleWidth;
|
||||
}
|
||||
// Tables: clear the table's own row-drag handle so the two
|
||||
// grips don't stack on each other. `nodeDOMAtCoords` returns
|
||||
// the wrapper for top-level hovers (wrapper is direct child of
|
||||
// .ProseMirror) and a descendant for deeper hovers — cover both.
|
||||
if (node.closest(".tableWrapper")) {
|
||||
rect.left -= options.dragHandleWidth;
|
||||
}
|
||||
rect.width = options.dragHandleWidth;
|
||||
|
||||
if (!dragHandleElement) return;
|
||||
|
||||
@@ -42,13 +42,9 @@ import {
|
||||
Excalidraw,
|
||||
Embed,
|
||||
TiptapPdf,
|
||||
PageBreak,
|
||||
SearchAndReplace,
|
||||
Mention,
|
||||
TableDndExtension,
|
||||
TableHandleCommandsExtension,
|
||||
TableHeaderPin,
|
||||
TableReadonlySort,
|
||||
Subpages,
|
||||
Heading,
|
||||
Highlight,
|
||||
@@ -60,7 +56,6 @@ import {
|
||||
Status,
|
||||
TransclusionSource,
|
||||
TransclusionReference,
|
||||
TableView,
|
||||
} from "@docmost/editor-ext";
|
||||
import {
|
||||
randomElement,
|
||||
@@ -85,7 +80,7 @@ import AudioView from "@/features/editor/components/audio/audio-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-lazy.tsx";
|
||||
import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
|
||||
import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
|
||||
import PdfView from "@/features/editor/components/pdf/pdf-view.tsx";
|
||||
import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
|
||||
@@ -264,16 +259,11 @@ export const mainExtensions = [
|
||||
resizable: true,
|
||||
lastColumnResizable: true,
|
||||
allowTableNodeSelection: true,
|
||||
cellMinWidth: 49,
|
||||
View: TableView,
|
||||
}),
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableHeader,
|
||||
TableDndExtension,
|
||||
TableHandleCommandsExtension,
|
||||
TableHeaderPin,
|
||||
TableReadonlySort,
|
||||
MathInline.configure({
|
||||
view: MathInlineView,
|
||||
}),
|
||||
@@ -367,7 +357,6 @@ export const mainExtensions = [
|
||||
TiptapPdf.configure({
|
||||
view: PdfView,
|
||||
}),
|
||||
PageBreak,
|
||||
Subpages.configure({
|
||||
view: SubpagesView,
|
||||
}),
|
||||
@@ -416,9 +405,7 @@ const TEMPLATE_EXCLUDED_SLASH_ITEMS = new Set([
|
||||
"Video",
|
||||
"File attachment",
|
||||
"Draw.io (diagrams.net)",
|
||||
"Excalidraw (Whiteboard)",
|
||||
"Audio",
|
||||
"Synced block"
|
||||
"Excalidraw diagram",
|
||||
]);
|
||||
|
||||
const TemplateSlashCommand = Command.configure({
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import classes from "@/features/editor/styles/editor.module.css";
|
||||
import React, { useEffect } from "react";
|
||||
import React from "react";
|
||||
import { TitleEditor } from "@/features/editor/title-editor";
|
||||
import PageEditor from "@/features/editor/page-editor";
|
||||
import {
|
||||
@@ -23,25 +23,17 @@ import { IContributor } from "@/features/page/types/page.types.ts";
|
||||
import { FixedToolbar } from "@/features/editor/components/fixed-toolbar/fixed-toolbar";
|
||||
import { PageEditMode } from "@/features/user/types/user.types.ts";
|
||||
import useToggleAside from "@/hooks/use-toggle-aside.tsx";
|
||||
import { DeletedPageBanner } from "@/features/page/trash/components/deleted-page-banner.tsx";
|
||||
import clsx from "clsx";
|
||||
import { currentPageEditModeAtom } from "@/features/editor/atoms/editor-atoms.ts";
|
||||
|
||||
const MemoizedTitleEditor = React.memo(TitleEditor);
|
||||
const MemoizedPageEditor = React.memo(PageEditor);
|
||||
const MemoizedFixedToolbar = React.memo(FixedToolbar);
|
||||
const MemoizedDeletedPageBanner = React.memo(DeletedPageBanner);
|
||||
|
||||
type PageUser = {
|
||||
type PageCreator = {
|
||||
id: string;
|
||||
name: string;
|
||||
avatarUrl: string;
|
||||
};
|
||||
|
||||
// Module-level flag: survives component unmount/remount on page navigation,
|
||||
// reset only on full page reload (i.e. a new app session).
|
||||
let defaultEditModeApplied = false;
|
||||
|
||||
export interface FullEditorProps {
|
||||
pageId: string;
|
||||
slugId: string;
|
||||
@@ -49,7 +41,7 @@ export interface FullEditorProps {
|
||||
content: string;
|
||||
spaceSlug: string;
|
||||
editable: boolean;
|
||||
creator?: PageUser;
|
||||
creator?: PageCreator;
|
||||
contributors?: IContributor[];
|
||||
canComment?: boolean;
|
||||
}
|
||||
@@ -69,21 +61,9 @@ export function FullEditor({
|
||||
const fullPageWidth = user.settings?.preferences?.fullPageWidth;
|
||||
const editorToolbarEnabled =
|
||||
user.settings?.preferences?.editorToolbar ?? false;
|
||||
const [currentPageEditMode, setCurrentPageEditMode] = useAtom(
|
||||
currentPageEditModeAtom,
|
||||
);
|
||||
const userPageEditMode =
|
||||
user.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
|
||||
const isEditMode = currentPageEditMode === PageEditMode.Edit;
|
||||
|
||||
// Apply the user's saved preference only once on initial load, not on every
|
||||
// page navigation — so the mode sticks across navigations within a session.
|
||||
useEffect(() => {
|
||||
if (!defaultEditModeApplied) {
|
||||
setCurrentPageEditMode(userPageEditMode as PageEditMode);
|
||||
defaultEditModeApplied = true;
|
||||
}
|
||||
}, [userPageEditMode, setCurrentPageEditMode]);
|
||||
const isEditMode = userPageEditMode === PageEditMode.Edit;
|
||||
|
||||
return (
|
||||
<Container
|
||||
@@ -91,10 +71,7 @@ export function FullEditor({
|
||||
size={!fullPageWidth && 900}
|
||||
className={classes.editor}
|
||||
>
|
||||
{editorToolbarEnabled && editable && isEditMode && (
|
||||
<MemoizedFixedToolbar />
|
||||
)}
|
||||
<MemoizedDeletedPageBanner slugId={slugId} />
|
||||
{editorToolbarEnabled && editable && isEditMode && <FixedToolbar />}
|
||||
<MemoizedTitleEditor
|
||||
pageId={pageId}
|
||||
slugId={slugId}
|
||||
@@ -118,12 +95,16 @@ export function FullEditor({
|
||||
}
|
||||
|
||||
type PageBylineProps = {
|
||||
creator?: PageUser;
|
||||
creator?: PageCreator;
|
||||
contributors?: IContributor[];
|
||||
readOnly?: boolean;
|
||||
};
|
||||
|
||||
function PageByline({ creator, contributors, readOnly }: PageBylineProps) {
|
||||
function PageByline({
|
||||
creator,
|
||||
contributors,
|
||||
readOnly,
|
||||
}: PageBylineProps) {
|
||||
const { t } = useTranslation();
|
||||
const toggleAside = useToggleAside();
|
||||
|
||||
|
||||
@@ -26,11 +26,10 @@ import {
|
||||
collabExtensions,
|
||||
mainExtensions,
|
||||
} from "@/features/editor/extensions/extensions";
|
||||
import { useAtom, useAtomValue } from "jotai";
|
||||
import { useAtom } from "jotai";
|
||||
import useCollaborationUrl from "@/features/editor/hooks/use-collaboration-url";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import {
|
||||
currentPageEditModeAtom,
|
||||
pageEditorAtom,
|
||||
yjsConnectionStatusAtom,
|
||||
} from "@/features/editor/atoms/editor-atoms";
|
||||
@@ -45,7 +44,6 @@ import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubbl
|
||||
import { ReadonlyBubbleMenu } from "@/features/editor/components/bubble-menu/readonly-bubble-menu";
|
||||
import TableCellMenu from "@/features/editor/components/table/table-cell-menu.tsx";
|
||||
import TableMenu from "@/features/editor/components/table/table-menu.tsx";
|
||||
import { TableHandlesLayer } from "@/features/editor/components/table/handle/table-handles-layer";
|
||||
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";
|
||||
@@ -55,7 +53,7 @@ import {
|
||||
handleFileDrop,
|
||||
handlePaste,
|
||||
} from "@/features/editor/components/common/editor-paste-handler.tsx";
|
||||
import ExcalidrawMenu from "./components/excalidraw/excalidraw-menu-lazy";
|
||||
import ExcalidrawMenu from "./components/excalidraw/excalidraw-menu";
|
||||
import DrawioMenu from "./components/drawio/drawio-menu";
|
||||
import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
|
||||
import SearchAndReplaceDialog from "@/features/editor/components/search-and-replace/search-and-replace-dialog.tsx";
|
||||
@@ -113,7 +111,8 @@ export default function PageEditor({
|
||||
const documentState = useDocumentVisibility();
|
||||
const { pageSlug } = useParams();
|
||||
const slugId = extractPageSlugId(pageSlug);
|
||||
const currentPageEditMode = useAtomValue(currentPageEditModeAtom);
|
||||
const userPageEditMode =
|
||||
currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
|
||||
const canScroll = useCallback(
|
||||
() => Boolean(isComponentMounted.current && editorRef.current),
|
||||
[isComponentMounted],
|
||||
@@ -373,9 +372,19 @@ export default function PageEditor({
|
||||
return () => clearTimeout(timeout);
|
||||
}, [yjsConnectionStatus, isSynced]);
|
||||
useEffect(() => {
|
||||
if (!editor) return;
|
||||
editor.setEditable(editable && currentPageEditMode === PageEditMode.Edit);
|
||||
}, [currentPageEditMode, editor, editable]);
|
||||
// Only honor user default page edit mode preference and permissions
|
||||
if (editor) {
|
||||
if (userPageEditMode && editable) {
|
||||
if (userPageEditMode === PageEditMode.Edit) {
|
||||
editor.setEditable(true);
|
||||
} else if (userPageEditMode === PageEditMode.Read) {
|
||||
editor.setEditable(false);
|
||||
}
|
||||
} else {
|
||||
editor.setEditable(false);
|
||||
}
|
||||
}
|
||||
}, [userPageEditMode, editor, editable]);
|
||||
|
||||
const hasConnectedOnceRef = useRef(false);
|
||||
const [showStatic, setShowStatic] = useState(true);
|
||||
@@ -415,7 +424,7 @@ export default function PageEditor({
|
||||
<EditorLinkMenu editor={editor} />
|
||||
<EditorBubbleMenu editor={editor} />
|
||||
<TableMenu editor={editor} />
|
||||
<TableHandlesLayer editor={editor} />
|
||||
<TableCellMenu editor={editor} appendTo={menuContainerRef} />
|
||||
<ImageMenu editor={editor} />
|
||||
<VideoMenu editor={editor} />
|
||||
<PdfMenu editor={editor} />
|
||||
|
||||
@@ -203,8 +203,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.resize-cursor,
|
||||
&.resize-cursor * {
|
||||
.resize-cursor {
|
||||
cursor: ew-resize;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,6 @@
|
||||
@import "./media.css";
|
||||
@import "./code.css";
|
||||
@import "./print.css";
|
||||
@import "./page-break.css";
|
||||
@import "./find.css";
|
||||
@import "./mention.css";
|
||||
@import "./ordered-list.css";
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
.ProseMirror .page-break {
|
||||
position: relative;
|
||||
margin: 1.5rem 0;
|
||||
border-top: 1px dashed var(--mantine-color-default-border);
|
||||
height: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ProseMirror[contenteditable="false"] .page-break {
|
||||
margin: 0;
|
||||
border: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.ProseMirror[contenteditable="false"] .page-break::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.ProseMirror .page-break::after {
|
||||
content: "Page break";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 0 0.5rem;
|
||||
background: var(--mantine-color-body);
|
||||
color: var(--mantine-color-dimmed);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ProseMirror .page-break.ProseMirror-selectednode {
|
||||
border-top-color: var(--mantine-primary-color-filled);
|
||||
}
|
||||
|
||||
@media print {
|
||||
.ProseMirror .page-break {
|
||||
break-before: always;
|
||||
page-break-before: always;
|
||||
visibility: hidden;
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ProseMirror .page-break::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@@ -15,8 +15,7 @@
|
||||
}
|
||||
|
||||
.table-dnd-drop-indicator {
|
||||
background-color: var(--mantine-color-blue-5);
|
||||
z-index: 3;
|
||||
background-color: #adf;
|
||||
}
|
||||
|
||||
.ProseMirror {
|
||||
@@ -58,14 +57,13 @@
|
||||
}
|
||||
|
||||
.column-resize-handle {
|
||||
background-color: var(--mantine-color-blue-5);
|
||||
background-color: #adf;
|
||||
bottom: -1px;
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
right: -2px;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
z-index: 3;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.selectedCell:after {
|
||||
@@ -131,139 +129,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Header-row pinning. Two CSS paths, picked by `header-pin/controller.ts`:
|
||||
- native sticky (preferred): wrapper drops its overflow constraint so
|
||||
`position: sticky` on the row can resolve against the document scroll.
|
||||
- transform fallback: wrapper keeps `overflow-x: auto` for horizontal
|
||||
scrolling; the row is positioned imperatively per scroll frame.
|
||||
|
||||
`--editor-pin-offset` is published to :root by `pinOffsetWatcher` in
|
||||
`header-pin/offset.ts`, measured against the lowest fixed surface above
|
||||
the editor (app shell header, page header, fixed toolbar). */
|
||||
|
||||
.tableWrapper.tableWrapperNoOverflow,
|
||||
.tableWrapper.tableWrapperNoOverflow table {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.tableWrapper.tableHeaderPinned table tr:first-child {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tableWrapper.tableWrapperNoOverflow.tableHeaderPinned table tr:first-child {
|
||||
position: sticky;
|
||||
top: var(--editor-pin-offset, 90px);
|
||||
}
|
||||
|
||||
.tableWrapper.tableHeaderPinned:not(.tableWrapperNoOverflow) table tr:first-child {
|
||||
position: relative;
|
||||
transform: translateY(var(--table-pin-offset, 0px));
|
||||
}
|
||||
|
||||
@media print {
|
||||
.tableWrapper.tableHeaderPinned table tr:first-child {
|
||||
position: static;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tableReadonlySortChevron {
|
||||
/* Anchor to the cell's right edge, vertically centered with the cell
|
||||
content. The cell content (a <p>) is block-level so an inline chevron
|
||||
would wrap to a new line; absolute positioning takes it out of flow. */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 6px;
|
||||
transform: translateY(-50%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
background: light-dark(
|
||||
rgba(55, 53, 47, 0.08),
|
||||
rgba(255, 255, 255, 0.08)
|
||||
);
|
||||
color: light-dark(
|
||||
rgba(55, 53, 47, 0.55),
|
||||
rgba(255, 255, 255, 0.55)
|
||||
);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
/* Hidden by default; revealed on header-cell hover or when this column is
|
||||
the active sort (see selectors below). */
|
||||
opacity: 0;
|
||||
transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
|
||||
}
|
||||
|
||||
.ProseMirror table th:hover .tableReadonlySortChevron,
|
||||
.tableReadonlySortChevron[data-sort] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ProseMirror table th:has(.tableReadonlySortChevron) {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.tableReadonlySortChevron:hover {
|
||||
background: light-dark(
|
||||
rgba(55, 53, 47, 0.16),
|
||||
rgba(255, 255, 255, 0.16)
|
||||
);
|
||||
}
|
||||
|
||||
/* Immediate tooltip on the chevron — same style language as the rest of the
|
||||
app (small, dark, rounded), unlike the native `title` tooltip which only
|
||||
appears after a long delay. */
|
||||
.tableReadonlySortChevron::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
/* Below the chevron — placing it above the cell hits the table's
|
||||
overflow clipping (the wrapper has `overflow-x: auto` which forces
|
||||
`overflow-y: auto` per spec). */
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--mantine-color-dark-7);
|
||||
color: var(--mantine-color-white);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 120ms ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tableReadonlySortChevron:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tableReadonlySortChevron svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tableReadonlySortChevron[data-sort="asc"],
|
||||
.tableReadonlySortChevron[data-sort="desc"] {
|
||||
background: light-dark(
|
||||
var(--mantine-color-blue-1),
|
||||
var(--mantine-color-blue-9)
|
||||
);
|
||||
color: light-dark(
|
||||
var(--mantine-color-blue-7),
|
||||
var(--mantine-color-blue-2)
|
||||
);
|
||||
}
|
||||
|
||||
.tableReadonlySortChevron[data-sort="asc"] svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.editor-container:has(.table-dnd-drop-indicator[data-dragging="true"]) {
|
||||
.prosemirror-dropcursor-block {
|
||||
display: none;
|
||||
|
||||
@@ -7,7 +7,6 @@ import { Text } from "@tiptap/extension-text";
|
||||
import { Placeholder } from "@tiptap/extension-placeholder";
|
||||
import { useAtomValue } from "jotai";
|
||||
import {
|
||||
currentPageEditModeAtom,
|
||||
pageEditorAtom,
|
||||
titleEditorAtom,
|
||||
} from "@/features/editor/atoms/editor-atoms";
|
||||
@@ -25,6 +24,7 @@ import { useTranslation } from "react-i18next";
|
||||
import EmojiCommand from "@/features/editor/extensions/emoji-command.ts";
|
||||
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";
|
||||
import { platformModifierKey } from "@/lib";
|
||||
@@ -52,7 +52,9 @@ export function TitleEditor({
|
||||
const emit = useQueryEmit();
|
||||
const navigate = useNavigate();
|
||||
const [activePageId, setActivePageId] = useState(pageId);
|
||||
const currentPageEditMode = useAtomValue(currentPageEditModeAtom);
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
const userPageEditMode =
|
||||
currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
|
||||
|
||||
const titleEditor = useEditor({
|
||||
extensions: [
|
||||
@@ -170,9 +172,18 @@ export function TitleEditor({
|
||||
}, [pageId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!titleEditor) return;
|
||||
titleEditor.setEditable(editable && currentPageEditMode === PageEditMode.Edit);
|
||||
}, [currentPageEditMode, titleEditor, editable]);
|
||||
if (titleEditor) {
|
||||
if (userPageEditMode && editable) {
|
||||
if (userPageEditMode === PageEditMode.Edit) {
|
||||
titleEditor.setEditable(true);
|
||||
} else if (userPageEditMode === PageEditMode.Read) {
|
||||
titleEditor.setEditable(false);
|
||||
}
|
||||
} else {
|
||||
titleEditor.setEditable(false);
|
||||
}
|
||||
}
|
||||
}, [userPageEditMode, titleEditor, editable]);
|
||||
|
||||
const openSearchDialog = () => {
|
||||
const event = new CustomEvent("openFindDialogFromEditor", {});
|
||||
|
||||
@@ -40,7 +40,7 @@ import {
|
||||
yjsConnectionStatusAtom,
|
||||
} from "@/features/editor/atoms/editor-atoms.ts";
|
||||
import { formattedDate } from "@/lib/time.ts";
|
||||
import { PageEditModeToggle } from "@/features/user/components/page-state-pref.tsx";
|
||||
import { PageStateSegmentedControl } from "@/features/user/components/page-state-pref.tsx";
|
||||
import MovePageModal from "@/features/page/components/move-page-modal.tsx";
|
||||
import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
|
||||
import { PageShareModal } from "@/ee/page-permission";
|
||||
@@ -65,11 +65,6 @@ interface PageHeaderMenuProps {
|
||||
export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
|
||||
const { t } = useTranslation();
|
||||
const toggleAside = useToggleAside();
|
||||
const { pageSlug } = useParams();
|
||||
const { data: page } = usePageQuery({
|
||||
pageId: extractPageSlugId(pageSlug),
|
||||
});
|
||||
const isDeleted = !!page?.deletedAt;
|
||||
|
||||
useHotkeys(
|
||||
[
|
||||
@@ -92,15 +87,11 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
|
||||
[],
|
||||
);
|
||||
|
||||
if (isDeleted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConnectionWarning />
|
||||
|
||||
{!readOnly && <PageEditModeToggle size="xs" />}
|
||||
{!readOnly && <PageStateSegmentedControl size="xs" />}
|
||||
|
||||
<PageShareModal readOnly={readOnly} />
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ interface Props {
|
||||
}
|
||||
export default function PageHeader({ readOnly }: Props) {
|
||||
return (
|
||||
<div className={classes.header} data-page-header="true">
|
||||
<div className={classes.header}>
|
||||
<Group justify="space-between" h="100%" px="md" wrap="nowrap" className={classes.group}>
|
||||
<Breadcrumb />
|
||||
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
import { modals } from "@mantine/modals";
|
||||
import { Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
type UseRestoreModalProps = {
|
||||
title?: string | null;
|
||||
onConfirm: () => void;
|
||||
};
|
||||
|
||||
export function useRestorePageModal() {
|
||||
const { t } = useTranslation();
|
||||
const openRestoreModal = ({ title, onConfirm }: UseRestoreModalProps) => {
|
||||
modals.openConfirmModal({
|
||||
title: t("Restore page"),
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t("Restore '{{title}}' and its sub-pages?", {
|
||||
title: title || t("Untitled"),
|
||||
})}
|
||||
</Text>
|
||||
),
|
||||
centered: true,
|
||||
labels: { confirm: t("Restore"), cancel: t("Cancel") },
|
||||
confirmProps: { color: "blue" },
|
||||
onConfirm,
|
||||
});
|
||||
};
|
||||
|
||||
return { openRestoreModal } as const;
|
||||
}
|
||||
@@ -117,20 +117,10 @@ export function useUpdatePageMutation() {
|
||||
}
|
||||
|
||||
export function useRemovePageMutation() {
|
||||
const { t } = useTranslation();
|
||||
return useMutation({
|
||||
mutationFn: (pageId: string) => deletePage(pageId, false),
|
||||
onSuccess: (_, pageId) => {
|
||||
notifications.show({ message: t("Page moved to trash") });
|
||||
|
||||
// Stamp deletedAt so a re-visit shows the trash banner, not stale state.
|
||||
const cached = queryClient.getQueryData<IPage>(["pages", pageId]);
|
||||
if (cached) {
|
||||
const stamped = { ...cached, deletedAt: new Date() };
|
||||
queryClient.setQueryData(["pages", cached.id], stamped);
|
||||
queryClient.setQueryData(["pages", cached.slugId], stamped);
|
||||
}
|
||||
|
||||
notifications.show({ message: "Page moved to trash" });
|
||||
invalidateOnDeletePage(pageId);
|
||||
queryClient.invalidateQueries({
|
||||
predicate: (item) =>
|
||||
@@ -138,7 +128,7 @@ export function useRemovePageMutation() {
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
notifications.show({ message: t("Failed to delete page"), color: "red" });
|
||||
notifications.show({ message: "Failed to delete page", color: "red" });
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -172,14 +162,13 @@ export function useMovePageMutation() {
|
||||
}
|
||||
|
||||
export function useRestorePageMutation() {
|
||||
const { t } = useTranslation();
|
||||
const [treeData, setTreeData] = useAtom(treeDataAtom);
|
||||
const emit = useQueryEmit();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (pageId: string) => restorePage(pageId),
|
||||
onSuccess: async (restoredPage) => {
|
||||
notifications.show({ message: t("Page restored successfully") });
|
||||
notifications.show({ message: "Page restored successfully" });
|
||||
|
||||
// Check if the page already exists in the tree (it shouldn't)
|
||||
if (!treeModel.find(treeData, restoredPage.id)) {
|
||||
@@ -233,16 +222,9 @@ export function useRestorePageMutation() {
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["trash-list", restoredPage.spaceId],
|
||||
});
|
||||
|
||||
// Merge — restore endpoint returns a skinny page;
|
||||
// Replace would strip space/permissions/content and break the editor.
|
||||
const merge = (cached: IPage | undefined) =>
|
||||
cached ? { ...cached, ...restoredPage } : cached;
|
||||
queryClient.setQueryData<IPage>(["pages", restoredPage.id], merge);
|
||||
queryClient.setQueryData<IPage>(["pages", restoredPage.slugId], merge);
|
||||
},
|
||||
onError: (error) => {
|
||||
notifications.show({ message: t("Failed to restore page"), color: "red" });
|
||||
notifications.show({ message: "Failed to restore page", color: "red" });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,140 +0,0 @@
|
||||
import { ActionIcon, Button, Group, Paper, Text, Tooltip } from "@mantine/core";
|
||||
import { IconRestore, IconTrash } from "@tabler/icons-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
|
||||
import { useRestorePageModal } from "@/features/page/hooks/use-restore-page-modal.tsx";
|
||||
import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
|
||||
import {
|
||||
useDeletePageMutation,
|
||||
usePageQuery,
|
||||
useRestorePageMutation,
|
||||
} from "@/features/page/queries/page-query.ts";
|
||||
import { getSpaceUrl } from "@/lib/config.ts";
|
||||
import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
|
||||
import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
|
||||
import {
|
||||
SpaceCaslAction,
|
||||
SpaceCaslSubject,
|
||||
} from "@/features/space/permissions/permissions.type.ts";
|
||||
|
||||
type DeletedPageBannerProps = {
|
||||
slugId: string;
|
||||
};
|
||||
|
||||
export function DeletedPageBanner({ slugId }: DeletedPageBannerProps) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const { data: page } = usePageQuery({ pageId: slugId });
|
||||
const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
|
||||
const spaceAbility = useSpaceAbility(space?.membership?.permissions);
|
||||
const deletedTimeAgo = useTimeAgo(page?.deletedAt);
|
||||
const restorePageMutation = useRestorePageMutation();
|
||||
const deletePageMutation = useDeletePageMutation();
|
||||
const { openRestoreModal } = useRestorePageModal();
|
||||
const { openDeleteModal } = useDeletePageModal();
|
||||
|
||||
if (!page?.deletedAt) return null;
|
||||
|
||||
const canRestore = spaceAbility.can(
|
||||
SpaceCaslAction.Edit,
|
||||
SpaceCaslSubject.Page,
|
||||
);
|
||||
const canPermanentlyDelete = spaceAbility.can(
|
||||
SpaceCaslAction.Manage,
|
||||
SpaceCaslSubject.Settings,
|
||||
);
|
||||
const actorName = page.deletedBy?.name ?? t("Someone");
|
||||
|
||||
const handleRestore = () => {
|
||||
openRestoreModal({
|
||||
title: page.title,
|
||||
onConfirm: () => restorePageMutation.mutate(page.id),
|
||||
});
|
||||
};
|
||||
|
||||
const handlePermanentDelete = () => {
|
||||
openDeleteModal({
|
||||
isPermanent: true,
|
||||
onConfirm: async () => {
|
||||
await deletePageMutation.mutateAsync(page.id);
|
||||
navigate(getSpaceUrl(page.space?.slug));
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const hasAnyAction = canRestore || canPermanentlyDelete;
|
||||
|
||||
return (
|
||||
<Paper radius="sm" mb="md" px="md" py="xs" bg="red.0">
|
||||
<Group justify="space-between" wrap="wrap" gap="sm">
|
||||
<Text size="sm" style={{ flex: 1, minWidth: 0 }}>
|
||||
<Trans
|
||||
i18nKey="<b>{{name}}</b> moved this page to Trash {{time}}."
|
||||
values={{ name: actorName, time: deletedTimeAgo }}
|
||||
components={{ b: <Text span fw={600} inherit /> }}
|
||||
/>
|
||||
</Text>
|
||||
{hasAnyAction && (
|
||||
<>
|
||||
<Group gap="xs" wrap="nowrap" visibleFrom="sm">
|
||||
{canRestore && (
|
||||
<Button
|
||||
size="xs"
|
||||
variant="light"
|
||||
color="red"
|
||||
leftSection={<IconRestore size={16} />}
|
||||
onClick={handleRestore}
|
||||
loading={restorePageMutation.isPending}
|
||||
>
|
||||
{t("Restore page")}
|
||||
</Button>
|
||||
)}
|
||||
{canPermanentlyDelete && (
|
||||
<Button
|
||||
size="xs"
|
||||
variant="light"
|
||||
color="red"
|
||||
leftSection={<IconTrash size={16} />}
|
||||
onClick={handlePermanentDelete}
|
||||
loading={deletePageMutation.isPending}
|
||||
>
|
||||
{t("Permanently delete")}
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
<Group gap="xs" wrap="nowrap" hiddenFrom="sm">
|
||||
{canRestore && (
|
||||
<Tooltip label={t("Restore page")} withArrow>
|
||||
<ActionIcon
|
||||
size="lg"
|
||||
variant="default"
|
||||
onClick={handleRestore}
|
||||
loading={restorePageMutation.isPending}
|
||||
aria-label={t("Restore page")}
|
||||
>
|
||||
<IconRestore size={18} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
{canPermanentlyDelete && (
|
||||
<Tooltip label={t("Permanently delete")} withArrow>
|
||||
<ActionIcon
|
||||
size="lg"
|
||||
variant="light"
|
||||
color="red"
|
||||
onClick={handlePermanentDelete}
|
||||
loading={deletePageMutation.isPending}
|
||||
aria-label={t("Permanently delete")}
|
||||
>
|
||||
<IconTrash size={18} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Group>
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import { Alert, Text } from "@mantine/core";
|
||||
import { IconInfoCircle } from "@tabler/icons-react";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
|
||||
|
||||
export function TrashBanner() {
|
||||
const { t } = useTranslation();
|
||||
const workspace = useAtomValue(workspaceAtom);
|
||||
const retentionDays = workspace?.trashRetentionDays ?? 30;
|
||||
|
||||
return (
|
||||
<Alert icon={<IconInfoCircle size={16} />} variant="light" color="red">
|
||||
<Text size="sm" lh={1.35}>
|
||||
{t("Pages in trash will be permanently deleted after {{count}} days.", {
|
||||
count: retentionDays,
|
||||
})}
|
||||
</Text>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
@@ -7,16 +7,17 @@ import {
|
||||
Group,
|
||||
ActionIcon,
|
||||
Text,
|
||||
Alert,
|
||||
Stack,
|
||||
Menu,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconInfoCircle,
|
||||
IconDots,
|
||||
IconRestore,
|
||||
IconTrash,
|
||||
IconFileDescription,
|
||||
} from "@tabler/icons-react";
|
||||
import { TrashBanner } from "@/features/page/trash/components/trash-banner.tsx";
|
||||
import {
|
||||
useDeletedPagesQuery,
|
||||
useRestorePageMutation,
|
||||
@@ -30,10 +31,12 @@ import TrashPageContentModal from "@/features/page/trash/components/trash-page-c
|
||||
import { UserInfo } from "@/components/common/user-info.tsx";
|
||||
import Paginate from "@/components/common/paginate.tsx";
|
||||
import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
|
||||
import { useRestorePageModal } from "@/features/page/hooks/use-restore-page-modal.tsx";
|
||||
import { useAtom } from "jotai";
|
||||
import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
|
||||
|
||||
export default function Trash() {
|
||||
const { t } = useTranslation();
|
||||
const [workspace] = useAtom(workspaceAtom);
|
||||
const { spaceSlug } = useParams();
|
||||
const { cursor, goNext, goPrev } = useCursorPaginate();
|
||||
const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
|
||||
@@ -42,7 +45,6 @@ export default function Trash() {
|
||||
});
|
||||
const restorePageMutation = useRestorePageMutation();
|
||||
const deletePageMutation = useDeletePageMutation();
|
||||
const { openRestoreModal } = useRestorePageModal();
|
||||
|
||||
const [selectedPage, setSelectedPage] = useState<{
|
||||
title: string;
|
||||
@@ -76,6 +78,23 @@ export default function Trash() {
|
||||
});
|
||||
};
|
||||
|
||||
const openRestoreModal = (pageId: string, pageTitle: string) => {
|
||||
modals.openConfirmModal({
|
||||
title: t("Restore page"),
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t("Restore '{{title}}' and its sub-pages?", {
|
||||
title: pageTitle || "Untitled",
|
||||
})}
|
||||
</Text>
|
||||
),
|
||||
centered: true,
|
||||
labels: { confirm: t("Restore"), cancel: t("Cancel") },
|
||||
confirmProps: { color: "blue" },
|
||||
onConfirm: () => handleRestorePage(pageId),
|
||||
});
|
||||
};
|
||||
|
||||
const hasPages = deletedPages && deletedPages.items.length > 0;
|
||||
|
||||
const handlePageClick = (page: any) => {
|
||||
@@ -90,7 +109,11 @@ export default function Trash() {
|
||||
<Title order={2}>{t("Trash")}</Title>
|
||||
</Group>
|
||||
|
||||
<TrashBanner />
|
||||
<Alert icon={<IconInfoCircle size={16} />} variant="light" color="red">
|
||||
<Text size="sm">
|
||||
{t("Pages in trash will be permanently deleted after {{count}} days.", { count: workspace?.trashRetentionDays ?? 30 })}
|
||||
</Text>
|
||||
</Alert>
|
||||
|
||||
{isLoading || !deletedPages ? (
|
||||
<></>
|
||||
@@ -158,10 +181,7 @@ export default function Trash() {
|
||||
<Menu.Item
|
||||
leftSection={<IconRestore size={16} />}
|
||||
onClick={() =>
|
||||
openRestoreModal({
|
||||
title: page.title,
|
||||
onConfirm: () => handleRestorePage(page.id),
|
||||
})
|
||||
openRestoreModal(page.id, page.title)
|
||||
}
|
||||
>
|
||||
{t("Restore")}
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
import { atom } from "jotai";
|
||||
import { atomWithStorage } from "jotai/utils";
|
||||
import { ISharedPageTree } from "@/features/share/types/share.types";
|
||||
import { SharedPageTreeNode } from "@/features/share/utils";
|
||||
|
||||
export const sharedPageTreeAtom = atom<ISharedPageTree | null>(null);
|
||||
export const sharedTreeDataAtom = atom<SharedPageTreeNode[] | null>(null);
|
||||
export const sharedPageFullWidthAtom = atomWithStorage<boolean>(
|
||||
"sharedPageFullWidth",
|
||||
false,
|
||||
);
|
||||
export const sharedTreeDataAtom = atom<SharedPageTreeNode[] | null>(null);
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import React, { useEffect, useMemo } from "react";
|
||||
import {
|
||||
ActionIcon,
|
||||
AppShell,
|
||||
@@ -14,16 +14,11 @@ import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
|
||||
import { ThemeToggle } from "@/components/theme-toggle.tsx";
|
||||
import { useAtomValue, useSetAtom } from "jotai";
|
||||
import { useAtom } from "jotai";
|
||||
import {
|
||||
sharedPageFullWidthAtom,
|
||||
sharedPageTreeAtom,
|
||||
sharedTreeDataAtom,
|
||||
} from "@/features/share/atoms/shared-page-atom";
|
||||
import { sharedPageTreeAtom, sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom";
|
||||
import { buildSharedPageTree } from "@/features/share/utils";
|
||||
import {
|
||||
desktopSidebarAtom,
|
||||
mobileSidebarAtom,
|
||||
sidebarWidthAtom,
|
||||
} from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
|
||||
import SidebarToggle from "@/components/ui/sidebar-toggle-button.tsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -32,7 +27,7 @@ import {
|
||||
mobileTableOfContentAsideAtom,
|
||||
tableOfContentAsideAtom,
|
||||
} from "@/features/share/atoms/sidebar-atom.ts";
|
||||
import { IconArrowsHorizontal, IconList } from "@tabler/icons-react";
|
||||
import { IconList } from "@tabler/icons-react";
|
||||
import { useToggleToc } from "@/features/share/hooks/use-toggle-toc.ts";
|
||||
import classes from "./share.module.css";
|
||||
import {
|
||||
@@ -60,46 +55,6 @@ export default function ShareShell({
|
||||
const [mobileTocOpened] = useAtom(mobileTableOfContentAsideAtom);
|
||||
const toggleTocMobile = useToggleToc(mobileTableOfContentAsideAtom);
|
||||
const toggleToc = useToggleToc(tableOfContentAsideAtom);
|
||||
const [fullWidth, setFullWidth] = useAtom(sharedPageFullWidthAtom);
|
||||
const [sidebarWidth, setSidebarWidth] = useAtom(sidebarWidthAtom);
|
||||
const [isResizing, setIsResizing] = useState(false);
|
||||
const sidebarRef = useRef<HTMLElement | null>(null);
|
||||
|
||||
const startResizing = useCallback((e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
setIsResizing(true);
|
||||
}, []);
|
||||
|
||||
const stopResizing = useCallback(() => {
|
||||
setIsResizing(false);
|
||||
}, []);
|
||||
|
||||
const resize = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
if (!isResizing || !sidebarRef.current) return;
|
||||
const newWidth =
|
||||
e.clientX - sidebarRef.current.getBoundingClientRect().left;
|
||||
if (newWidth < 220) {
|
||||
setSidebarWidth(220);
|
||||
return;
|
||||
}
|
||||
if (newWidth > 600) {
|
||||
setSidebarWidth(600);
|
||||
return;
|
||||
}
|
||||
setSidebarWidth(newWidth);
|
||||
},
|
||||
[isResizing, setSidebarWidth],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("mousemove", resize);
|
||||
window.addEventListener("mouseup", stopResizing);
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", resize);
|
||||
window.removeEventListener("mouseup", stopResizing);
|
||||
};
|
||||
}, [resize, stopResizing]);
|
||||
|
||||
const { shareId } = useParams();
|
||||
const { data } = useGetSharedPageTreeQuery(shareId);
|
||||
@@ -126,7 +81,7 @@ export default function ShareShell({
|
||||
header={{ height: 50 }}
|
||||
{...(data?.pageTree?.length > 1 && {
|
||||
navbar: {
|
||||
width: sidebarWidth,
|
||||
width: 300,
|
||||
breakpoint: "sm",
|
||||
collapsed: {
|
||||
mobile: !mobileOpened,
|
||||
@@ -211,20 +166,6 @@ export default function ShareShell({
|
||||
<IconList size={20} stroke={2} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label={t("Full width")} withArrow>
|
||||
<ActionIcon
|
||||
variant={fullWidth ? "light" : "default"}
|
||||
style={fullWidth ? undefined : { border: "none" }}
|
||||
aria-label={t("Full width")}
|
||||
aria-pressed={fullWidth}
|
||||
onClick={() => setFullWidth((v) => !v)}
|
||||
visibleFrom="sm"
|
||||
size="sm"
|
||||
>
|
||||
<IconArrowsHorizontal size={20} stroke={2} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</>
|
||||
|
||||
<ThemeToggle />
|
||||
@@ -233,11 +174,7 @@ export default function ShareShell({
|
||||
</AppShell.Header>
|
||||
|
||||
{data?.pageTree?.length > 1 && (
|
||||
<AppShell.Navbar p="md" className={classes.navbar} ref={sidebarRef}>
|
||||
<div
|
||||
className={classes.resizeHandle}
|
||||
onMouseDown={startResizing}
|
||||
/>
|
||||
<AppShell.Navbar p="md" className={classes.navbar}>
|
||||
<MemoizedSharedTree sharedPageTree={data} />
|
||||
</AppShell.Navbar>
|
||||
)}
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
.treeNode {
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.navbar,
|
||||
@@ -19,26 +18,3 @@
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.resizeHandle {
|
||||
width: 3px;
|
||||
cursor: col-resize;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
width: 5px;
|
||||
background: light-dark(
|
||||
var(--mantine-color-gray-4),
|
||||
var(--mantine-color-dark-5)
|
||||
);
|
||||
}
|
||||
|
||||
@media (max-width: $mantine-breakpoint-sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,6 @@ import {
|
||||
IconSettings,
|
||||
IconStar,
|
||||
IconStarFilled,
|
||||
IconTemplate,
|
||||
IconTrash,
|
||||
} from "@tabler/icons-react";
|
||||
import {
|
||||
@@ -54,10 +53,6 @@ import {
|
||||
import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
|
||||
import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
|
||||
import { searchSpotlight } from "@/features/search/constants";
|
||||
import TemplatePickerModal from "@/ee/template/components/template-picker-modal";
|
||||
import { useHasFeature } from "@/ee/hooks/use-feature";
|
||||
import { Feature } from "@/ee/features";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
|
||||
export function SpaceSidebar() {
|
||||
const { t } = useTranslation();
|
||||
@@ -251,11 +246,6 @@ function SpaceMenu({
|
||||
useDisclosure(false);
|
||||
const [exportOpened, { open: openExportModal, close: closeExportModal }] =
|
||||
useDisclosure(false);
|
||||
const [
|
||||
templatePickerOpened,
|
||||
{ open: openTemplatePicker, close: closeTemplatePicker },
|
||||
] = useDisclosure(false);
|
||||
const hasTemplates = useHasFeature(Feature.TEMPLATES);
|
||||
|
||||
const { data: watchStatus } = useSpaceWatchStatusQuery(spaceId);
|
||||
const watchMutation = useWatchSpaceMutation();
|
||||
@@ -325,18 +315,6 @@ function SpaceMenu({
|
||||
{isWatching ? t("Stop watching space") : t("Watch space")}
|
||||
</Menu.Item>
|
||||
|
||||
{hasTemplates && canManagePages && (
|
||||
<>
|
||||
<Menu.Divider />
|
||||
<Menu.Item
|
||||
onClick={openTemplatePicker}
|
||||
leftSection={<IconTemplate size={16} />}
|
||||
>
|
||||
{t("Templates")}
|
||||
</Menu.Item>
|
||||
</>
|
||||
)}
|
||||
|
||||
{canManagePages && (
|
||||
<>
|
||||
<Menu.Divider />
|
||||
@@ -392,16 +370,6 @@ function SpaceMenu({
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{hasTemplates && templatePickerOpened && (
|
||||
<ErrorBoundary fallbackRender={() => null}>
|
||||
<TemplatePickerModal
|
||||
opened={templatePickerOpened}
|
||||
onClose={closeTemplatePicker}
|
||||
initialSpaceId={spaceId}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,6 @@ import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { PageEditMode } from "@/features/user/types/user.types.ts";
|
||||
import { ResponsiveSettingsRow, ResponsiveSettingsContent, ResponsiveSettingsControl } from "@/components/ui/responsive-settings-row";
|
||||
import { currentPageEditModeAtom } from "@/features/editor/atoms/editor-atoms.ts";
|
||||
|
||||
export default function PageStatePref() {
|
||||
const { t } = useTranslation();
|
||||
@@ -72,24 +71,3 @@ export function PageStateSegmentedControl({
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Header variant: updates the current page's mode locally without persisting
|
||||
// the preference to the server.
|
||||
export function PageEditModeToggle({ size }: { size?: MantineSize }) {
|
||||
const { t } = useTranslation();
|
||||
const [currentPageEditMode, setCurrentPageEditMode] = useAtom(
|
||||
currentPageEditModeAtom,
|
||||
);
|
||||
|
||||
return (
|
||||
<SegmentedControl
|
||||
size={size}
|
||||
value={currentPageEditMode}
|
||||
onChange={(v) => setCurrentPageEditMode(v as PageEditMode)}
|
||||
data={[
|
||||
{ label: t("Edit"), value: PageEditMode.Edit },
|
||||
{ label: t("Read"), value: PageEditMode.Read },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -31,38 +31,20 @@ const APP_ROUTE = {
|
||||
},
|
||||
};
|
||||
|
||||
export function safeRedirectPath(input: unknown): string | null {
|
||||
if (typeof input !== "string") return null;
|
||||
if (input.length === 0 || input.length > 2048) return null;
|
||||
// Reject whitespace, backslash, and any Unicode "Other" category char
|
||||
// (ASCII controls, zero-width space, BOM, bidi marks, etc).
|
||||
if (/[\s\\]|\p{C}/u.test(input)) return null;
|
||||
if (!input.startsWith("/") || input.startsWith("//")) return null;
|
||||
if (input.toLowerCase().includes("://")) return null;
|
||||
if (/^\/[a-z][a-z0-9+\-.]*:/i.test(input)) return null;
|
||||
try {
|
||||
const resolved = new URL(input, window.location.origin);
|
||||
if (resolved.origin !== window.location.origin) return null;
|
||||
return resolved.pathname + resolved.search + resolved.hash;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function getPostLoginRedirect(): string {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return safeRedirectPath(params.get("redirect")) ?? APP_ROUTE.HOME;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the `?redirect=` value from the current URL only when it is a safe
|
||||
* same-origin path. Unlike {@link getPostLoginRedirect} this returns `null`
|
||||
* (not `/home`) when no redirect is present, so callers can distinguish
|
||||
* "user came here directly" from "user was bounced from a deep link".
|
||||
*/
|
||||
export function getRedirectParam(): string | null {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return safeRedirectPath(params.get("redirect"));
|
||||
const redirect = params.get("redirect");
|
||||
if (redirect) {
|
||||
try {
|
||||
const resolved = new URL(redirect, window.location.origin);
|
||||
if (resolved.origin === window.location.origin) {
|
||||
return resolved.pathname + resolved.search + resolved.hash;
|
||||
}
|
||||
} catch {
|
||||
// malformed URL, fall through to default
|
||||
}
|
||||
}
|
||||
return APP_ROUTE.HOME;
|
||||
}
|
||||
|
||||
export default APP_ROUTE;
|
||||
|
||||
@@ -52,7 +52,7 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
|
||||
} = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
|
||||
const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
|
||||
|
||||
const canEdit = !page?.deletedAt && (page?.permissions?.canEdit ?? false);
|
||||
const canEdit = page?.permissions?.canEdit ?? false;
|
||||
const canComment =
|
||||
canEdit ||
|
||||
(space?.settings?.comments?.allowViewerComments === true);
|
||||
|
||||
@@ -6,7 +6,6 @@ import { getAppName, isCloud } from "@/lib/config.ts";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import ManageHostname from "@/ee/components/manage-hostname.tsx";
|
||||
import { Divider } from "@mantine/core";
|
||||
import AllowMemberTemplates from "@/ee/security/components/allow-member-templates.tsx";
|
||||
|
||||
export default function WorkspaceSettings() {
|
||||
const { t } = useTranslation();
|
||||
@@ -19,9 +18,6 @@ export default function WorkspaceSettings() {
|
||||
<WorkspaceIcon />
|
||||
<WorkspaceNameForm />
|
||||
|
||||
<Divider my="md" />
|
||||
<AllowMemberTemplates />
|
||||
|
||||
{isCloud() && (
|
||||
<>
|
||||
<Divider my="md" />
|
||||
|
||||
@@ -9,10 +9,7 @@ import { extractPageSlugId } from "@/lib";
|
||||
import { Error404 } from "@/components/ui/error-404.tsx";
|
||||
import ShareBranding from "@/features/share/components/share-branding.tsx";
|
||||
import { useAtomValue } from "jotai";
|
||||
import {
|
||||
sharedPageFullWidthAtom,
|
||||
sharedTreeDataAtom,
|
||||
} from "@/features/share/atoms/shared-page-atom.ts";
|
||||
import { sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom.ts";
|
||||
import { isPageInTree } from "@/features/share/utils.ts";
|
||||
|
||||
export default function SharedPage() {
|
||||
@@ -26,7 +23,6 @@ export default function SharedPage() {
|
||||
});
|
||||
|
||||
const sharedTreeData = useAtomValue(sharedTreeDataAtom);
|
||||
const fullWidth = useAtomValue(sharedPageFullWidthAtom);
|
||||
|
||||
useEffect(() => {
|
||||
if (shareId && data) {
|
||||
@@ -63,7 +59,7 @@ export default function SharedPage() {
|
||||
)}
|
||||
</Helmet>
|
||||
|
||||
<Container fluid={fullWidth} size={fullWidth ? undefined : 900} p={0}>
|
||||
<Container size={900} p={0}>
|
||||
<ReadonlyPageEditor
|
||||
key={data.page.id}
|
||||
title={data.page.title}
|
||||
|
||||
@@ -38,12 +38,12 @@ export default defineConfig(({ mode }) => {
|
||||
build: {
|
||||
rolldownOptions: {
|
||||
output: {
|
||||
advancedChunks: {
|
||||
codeSplitting: {
|
||||
groups: [
|
||||
{
|
||||
name: "vendor-mantine",
|
||||
test: /[\\/]node_modules[\\/]@mantine[\\/]/,
|
||||
},
|
||||
{ name: "vendor-mantine", test: /@mantine/ },
|
||||
{ name: "vendor-mermaid", test: /mermaid|cytoscape|elkjs/ },
|
||||
{ name: "vendor-excalidraw", test: /excalidraw/ },
|
||||
{ name: "vendor-katex", test: /katex/ },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
"@fastify/multipart": "^10.0.0",
|
||||
"@fastify/static": "^9.1.3",
|
||||
"@keyv/redis": "^5.1.6",
|
||||
"@langchain/core": "1.1.46",
|
||||
"@langchain/core": "1.1.39",
|
||||
"@langchain/textsplitters": "1.0.1",
|
||||
"@modelcontextprotocol/sdk": "^1.29.0",
|
||||
"@nest-lab/throttler-storage-redis": "^1.2.0",
|
||||
@@ -81,7 +81,7 @@
|
||||
"ioredis": "^5.10.1",
|
||||
"js-tiktoken": "^1.0.21",
|
||||
"jsonwebtoken": "^9.0.3",
|
||||
"kysely": "^0.28.17",
|
||||
"kysely": "^0.28.14",
|
||||
"kysely-migration-cli": "^0.4.2",
|
||||
"kysely-postgres-js": "^3.0.0",
|
||||
"ldapts": "^8.1.7",
|
||||
|
||||
@@ -26,7 +26,6 @@ import {
|
||||
TiptapVideo,
|
||||
TiptapAudio,
|
||||
TiptapPdf,
|
||||
PageBreak,
|
||||
TrailingNode,
|
||||
Attachment,
|
||||
Drawio,
|
||||
@@ -95,7 +94,6 @@ export const tiptapExtensions = [
|
||||
TiptapVideo,
|
||||
TiptapAudio,
|
||||
TiptapPdf,
|
||||
PageBreak,
|
||||
Callout,
|
||||
Attachment,
|
||||
CustomCodeBlock,
|
||||
|
||||
@@ -2,7 +2,6 @@ import { Module } from '@nestjs/common';
|
||||
import { AppController } from '../../app.controller';
|
||||
import { AppService } from '../../app.service';
|
||||
import { EnvironmentModule } from '../../integrations/environment/environment.module';
|
||||
import { EnvironmentService } from '../../integrations/environment/environment.service';
|
||||
import { CollaborationModule } from '../collaboration.module';
|
||||
import { DatabaseModule } from '@docmost/db/database.module';
|
||||
import { QueueModule } from '../../integrations/queue/queue.module';
|
||||
@@ -13,8 +12,6 @@ import { LoggerModule } from '../../common/logger/logger.module';
|
||||
import { RedisModule } from '@nestjs-labs/nestjs-ioredis';
|
||||
import { RedisConfigService } from '../../integrations/redis/redis-config.service';
|
||||
import { CaslModule } from '../../core/casl/casl.module';
|
||||
import { CacheModule } from '@nestjs/cache-manager';
|
||||
import KeyvRedis from '@keyv/redis';
|
||||
|
||||
@Module({
|
||||
imports: [
|
||||
@@ -29,18 +26,6 @@ import KeyvRedis from '@keyv/redis';
|
||||
RedisModule.forRootAsync({
|
||||
useClass: RedisConfigService,
|
||||
}),
|
||||
CacheModule.registerAsync({
|
||||
isGlobal: true,
|
||||
useFactory: async (environmentService: EnvironmentService) => {
|
||||
const redisUrl = environmentService.getRedisUrl();
|
||||
|
||||
return {
|
||||
ttl: 5 * 1000,
|
||||
stores: [new KeyvRedis(redisUrl)],
|
||||
};
|
||||
},
|
||||
inject: [EnvironmentService],
|
||||
}),
|
||||
],
|
||||
controllers: [
|
||||
AppController,
|
||||
|
||||
@@ -1,11 +1,3 @@
|
||||
export const CacheKey = {
|
||||
LICENSE_VALID: (workspaceId: string) => `license:valid:${workspaceId}`,
|
||||
SPACE_ROLES: (userId: string, spaceId: string) =>
|
||||
`perm:space-roles:${userId}:${spaceId}`,
|
||||
PAGE_CAN_EDIT: (userId: string, pageId: string) =>
|
||||
`perm:can-edit:${userId}:${pageId}`,
|
||||
};
|
||||
|
||||
// Permission caches dedupe repeated checks within and across short request bursts.
|
||||
// 5s keeps staleness on revocations bounded.
|
||||
export const PERMISSION_CACHE_TTL_MS = 5_000;
|
||||
|
||||
@@ -2,4 +2,3 @@ export * from './utils';
|
||||
export * from './nanoid.utils';
|
||||
export * from './file.helper';
|
||||
export * from './constants';
|
||||
export * from './security-headers';
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
export type SecurityHeader = { name: string; value: string };
|
||||
|
||||
export function resolveFrameHeader(
|
||||
iframeEmbedAllowed: boolean,
|
||||
allowedOrigins: string[],
|
||||
): SecurityHeader | null {
|
||||
if (!iframeEmbedAllowed) {
|
||||
return { name: 'X-Frame-Options', value: 'SAMEORIGIN' };
|
||||
}
|
||||
|
||||
if (allowedOrigins.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
name: 'Content-Security-Policy',
|
||||
value: `frame-ancestors 'self' ${allowedOrigins.join(' ')}`,
|
||||
};
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { Cache } from 'cache-manager';
|
||||
|
||||
export async function withCache<T>(
|
||||
cacheManager: Cache,
|
||||
key: string,
|
||||
ttlMs: number,
|
||||
fn: () => Promise<T>,
|
||||
): Promise<T> {
|
||||
try {
|
||||
const cached = await cacheManager.get<{ v: T }>(key);
|
||||
if (cached !== undefined && cached !== null) {
|
||||
return cached.v;
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn(`[withCache] get failed for "${key}", falling back to source`, err);
|
||||
}
|
||||
|
||||
const value = await fn();
|
||||
|
||||
try {
|
||||
await cacheManager.set(key, { v: value }, ttlMs);
|
||||
} catch (err) {
|
||||
console.warn(`[withCache] set failed for "${key}"`, err);
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
@@ -76,7 +76,6 @@ export class PageController {
|
||||
includeCreator: true,
|
||||
includeLastUpdatedBy: true,
|
||||
includeContributors: true,
|
||||
includeDeletedBy: true,
|
||||
});
|
||||
|
||||
if (!page) {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user